File size: 6,350 Bytes
8325569 c8826b9 8325569 1287619 c8826b9 1287619 21ac1a1 8325569 c8826b9 8325569 c8826b9 8325569 c8826b9 8325569 e7f8ff5 8325569 41fde5b 21ac1a1 41fde5b 8325569 1287619 c8826b9 21ac1a1 c8826b9 8325569 c8826b9 8325569 c8826b9 8325569 c8826b9 8325569 c8826b9 8325569 c8826b9 8325569 c8826b9 8325569 c8826b9 8325569 41fde5b 12059ed 41fde5b 12059ed 41fde5b 8325569 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<!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;
}
// Simulate API calls
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> |