|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>Social Media Handle Checker | ToKnow.ai</title> |
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> |
|
<style> |
|
.platform-logo { |
|
width: 30px; |
|
height: 30px; |
|
margin-right: 10px; |
|
} |
|
.card-body > i { |
|
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); |
|
} |
|
.card-body { |
|
cursor: pointer; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body class="bg-light"> |
|
<div class="container mt-5"> |
|
<h1 class="text-center mb-4">Social Media Handle Checker</h1> |
|
|
|
<p class="text-center text-body-secondary"> |
|
<a target="_blank" href="https://toknow.ai/posts/social-media-handle-checker" |
|
class="text-decoration-none text-reset"> |
|
<b><u>ToKnow</u></b>.ai |
|
</a> |
|
</p> |
|
|
|
<div class="row justify-content-center"> |
|
<div class="col-lg-6 col-md-8"> |
|
<form id="search-form" class="mb-3 mt-4"> |
|
<div class="input-group"> |
|
<span class="input-group-text">@</span> |
|
<input type="text" id="social-handle" class="form-control" placeholder="Enter username" |
|
aria-label="Username" required /> |
|
<button class="btn btn-primary" type="submit">Check</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<div class="row justify-content-center"> |
|
<div class="col-lg-8 col-md-10" id="platform-container"> |
|
</div> |
|
</div> |
|
|
|
<p class="text-center mt-4 text-body-secondary text-lowercase"> |
|
<a target="_blank" href="https://toknow.ai/posts/social-media-handle-checker" class="text-decoration-none"> |
|
<i>get help or get more details</i> |
|
</a> |
|
<img class="rounded mx-auto d-block" |
|
src="https://api.visitorbadge.io/api/visitors?path=https://toknow.ai/posts/social-media-handle-checker" /> |
|
</p> |
|
</div> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> |
|
|
|
<script> |
|
const platformContainer = document.querySelector("#platform-container") |
|
const platforms = {{ json_data | safe }}; |
|
|
|
for (const platform of platforms) { |
|
platformContainer.innerHTML += |
|
`<div class="card mb-2" data-platform="${platform.id}"> |
|
<div class="card-body d-flex align-items-center" data-bs-toggle="collapse" |
|
data-bs-target="#collapse-${platform.id}" aria-expanded="false" |
|
aria-controls="collapse-${platform.id}"> |
|
<img src="${platform.img}" alt="${platform.name}" class="platform-logo"> |
|
<span class="me-auto">${platform.name}</span> |
|
<div class="spinner-border text-primary d-none me-2"></div> |
|
<span class="status"></span> |
|
<i class="ms-2 bi bi-info-circle-fill"></i> |
|
</div> |
|
<div class="collapse p-3 pt-0 fst-italic" id="collapse-${platform.id}"> |
|
<hr class="mt-0" /> |
|
<div></div> |
|
</div> |
|
</div>` |
|
} |
|
|
|
document.getElementById('search-form').addEventListener('submit', function (e) { |
|
e.preventDefault(); |
|
const username = document.getElementById('social-handle').value; |
|
if ((username || '').trim().length == 0) { |
|
return; |
|
} |
|
|
|
if (platforms.length == 0) { |
|
alert("Not working right now, please try again later...") |
|
return; |
|
} |
|
|
|
|
|
platforms.forEach(platform => { |
|
const card = document.querySelector(`[data-platform="${platform.id}"]`); |
|
const statusSpan = card.querySelector('.status'); |
|
const collapse = card.querySelector('.collapse > div'); |
|
const spinner = card.querySelector('.spinner-border'); |
|
|
|
card.classList.remove('bg-success-subtle', 'bg-danger-subtle', 'bg-warning-subtle'); |
|
spinner.classList.remove('d-none'); |
|
statusSpan.textContent = 'Checking...'; |
|
|
|
fetch(`/check/${platform.id}/${username}`) |
|
.then(response => response.json()) |
|
.then(({ available, message, url }) => { |
|
if (available === true) { |
|
card.classList.add('bg-success-subtle'); |
|
statusSpan.innerHTML = `<a href="${url}" target="_blank">${username}</a>: ✅ Available`; |
|
} else if (available === false) { |
|
card.classList.add('bg-danger-subtle'); |
|
statusSpan.innerHTML = `<a href="${url}" target="_blank">${username}</a>: ❌ Taken`; |
|
} else { |
|
card.classList.add('bg-warning-subtle'); |
|
statusSpan.textContent = `${username}: 🛑 Unable to check`; |
|
} |
|
collapse.innerHTML = message; |
|
}) |
|
.catch(error => { |
|
card.classList.add('bg-warning-subtle'); |
|
statusSpan.textContent = `Error checking availability`; |
|
collapse.innerHTML = error; |
|
}).finally(() => { |
|
spinner.classList.add('d-none'); |
|
}); |
|
}); |
|
}); |
|
|
|
platformContainer.addEventListener('click', e => { |
|
if (e.target.closest(".status > a")){ |
|
e.stopPropagation(); |
|
e.preventDefault(); |
|
window.open(e.target.href, '_blank').focus(); |
|
return; |
|
} |
|
}); |
|
</script> |
|
</body> |
|
|
|
</html> |
