Scribd
Upload
0 views5 pages

Source Code Viewer

The document is an HTML template for a 'Telegram Info Checker' web application. It includes sections for username and phone number lookups, along with API documentation for fetching user information and checking accounts by phone numbers. The layout is responsive and designed with a clean user interface, featuring error handling for user inputs.

Uploaded by

www.mdranamiah555
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0 views5 pages

Source Code Viewer

The document is an HTML template for a 'Telegram Info Checker' web application. It includes sections for username and phone number lookups, along with API documentation for fetching user information and checking accounts by phone numbers. The layout is responsive and designed with a clean user interface, featuring error handling for user inputs.

Uploaded by

www.mdranamiah555
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Telegram Info Checker</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: #f0f4f8;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
}

header {
background-color: #ffffff;
width: 100%;
padding: 1rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
text-align: center;
}

header h1 {
margin: 0;
color: #2c3e50;
}

.main-content {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1200px;
padding: 1rem;
}

.card-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
width: 100%;
}

@media (min-width: 768px) {


.card-container {
flex-direction: row;
}
}

.card {
flex: 1;
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
color: #2c3e50;
margin-top: 0;
}

textarea, input[type="text"] {
width: 100%;
height: 50px;
padding: 10px;
margin-bottom: 1rem;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 1rem;
resize: vertical;
box-sizing: border-box;
}

button {
width: 100%;
padding: 12px;
background-color: #007bff;
border: none;
color: white;
font-size: 1rem;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #0056b3;
}

pre {
background: #272822;
color: #f8f8f2;
padding: 1rem;
border-radius: 5px;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
max-height: 400px;
}

.error {
color: red;
margin-top: 1rem;
}

.section-title {
font-size: 1.2rem;
font-weight: bold;
}

.api-doc {
margin-top: 2rem;
}
footer {
margin-top: 2rem;
padding: 1rem;
font-size: 0.8rem;
color: #777;
text-align: center;
}

a {
color: #007bff;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
</style>
</head>
<body>

<header>
<h1>Telegram Info Checker</h1>
</header>

<div class="main-content">
<div class="card-container">

<!-- Username Section -->


<div class="card">
<h2 class="section-title">🔎 Username / Chat Lookup</h2>
<input type="text" id="usernameInput" placeholder="Enter Telegram username
(e.g. @username or username)" />
<button onclick="fetchUserInfo()">Get Info</button>
<div id="usernameResult" class="result-box"></div>
</div>

<!-- Phone Section -->


<div class="card">
<h2 class="section-title">📞 Phone Number Lookup</h2>
<textarea id="phoneInput" rows="6" placeholder="8801XXXXXXXXX
8801YYYYYYYYY"></textarea>
<button onclick="checkPhones()">Check Numbers</button>
<div id="phoneResult" class="result-box"></div>
</div>

</div>

<!-- API Documentation -->


<div class="card api-doc">
<h2 class="section-title">📚 API Documentation</h2>
<pre>
GET /check?phones=8801XXXXXXXXX,8801YYYYYYYY
→ Check Telegram accounts by phone number(s)

GET /get_user_info?username=@username
→ Get Telegram user info by username

⚠️ These APIs are proxied and protected. Original backend is hidden.


</pre>
</div>
</div>

<footer>
Powered by <a href="https://t.me/bbinl_cc_bot">bbinl cc bot</a>
</footer>

<script>
async function fetchUserInfo() {
const usernameInput = document.getElementById('usernameInput').value.trim();
const resultBox = document.getElementById('usernameResult');
resultBox.innerHTML = "";

if (!usernameInput) {
resultBox.innerHTML = '<p class="error">Please enter a username.</p>';
return;
}

// Ensure username starts with "@"


const username = usernameInput.startsWith("@") ? usernameInput : `@$
{usernameInput}`;

resultBox.innerHTML = 'Loading...';

try {
const response = await fetch(`/get_user_info?username=$
{encodeURIComponent(username)}`);
const text = await response.text();

if (response.ok) {
resultBox.innerHTML = `<pre>${text.trim()}</pre>`;
} else {
resultBox.innerHTML = `<p class="error">Error: ${text}</p>`;
}
} catch (err) {
resultBox.innerHTML = `<p class="error">Network error: ${err.message}</p>`;
}
}

async function checkPhones() {


const input = document.getElementById("phoneInput").value.trim();
const phoneResult = document.getElementById("phoneResult");
phoneResult.innerHTML = "";

if (!input) {
phoneResult.innerHTML = '<p class="error">Please enter phone numbers.</p>';
return;
}

const phones = input.split("\n").map(p => p.trim()).filter(p => p);


if (phones.length === 0) {
phoneResult.innerHTML = '<p class="error">No valid phone numbers
found.</p>';
return;
}

phoneResult.innerHTML = 'Checking...';

try {
const res = await fetch(`/check?phones=${phones.join(",")}`);
const text = await res.text();

if (res.ok) {
phoneResult.innerHTML = `<pre>${text.trim()}</pre>`;
} else {
phoneResult.innerHTML = `<p class="error">Error: ${text}</p>`;
}
} catch (err) {
phoneResult.innerHTML = `<p class="error">Network error:
${err.message}</p>`;
}
}
</script>

</body>
</html>

You might also like