|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Instagram ID Grabber</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes pulse { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); |
|
|
} |
|
|
.instagram-card { |
|
|
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.instagram-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.4); |
|
|
} |
|
|
.result-box { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.5s ease-out; |
|
|
} |
|
|
.result-box.show { |
|
|
max-height: 300px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4"> |
|
|
<div class="w-full max-w-md"> |
|
|
<div class="instagram-card gradient-bg rounded-2xl p-1 mb-8"> |
|
|
<div class="bg-white rounded-xl p-8"> |
|
|
<div class="flex items-center justify-center mb-6"> |
|
|
<i class="fab fa-instagram text-4xl mr-3 gradient-text" style="background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i> |
|
|
<h1 class="text-2xl font-bold text-gray-800">Instagram ID Grabber</h1> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-600 mb-6 text-center">Enter an Instagram username below to get the unique user ID</p> |
|
|
|
|
|
<div class="relative mb-4"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-at text-gray-400"></i> |
|
|
</div> |
|
|
<input type="text" id="usernameInput" class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="e.g. instagram"> |
|
|
</div> |
|
|
|
|
|
<button id="fetchBtn" class="w-full gradient-bg text-white py-3 px-4 rounded-lg font-semibold hover:opacity-90 transition-all duration-300 flex items-center justify-center pulse-animation"> |
|
|
<i class="fas fa-id-card mr-2"></i> Get User ID |
|
|
</button> |
|
|
|
|
|
<div id="resultBox" class="result-box mt-6 bg-gray-50 rounded-lg p-4 border border-gray-200"> |
|
|
<div id="resultContent" class="flex flex-col items-center"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 text-center text-sm text-gray-500"> |
|
|
<p>This tool doesn't store any data and works in real-time.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center text-gray-500 text-xs"> |
|
|
<p>Made with <i class="fas fa-heart text-red-500"></i> for Instagram users</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const fetchBtn = document.getElementById('fetchBtn'); |
|
|
const usernameInput = document.getElementById('usernameInput'); |
|
|
const resultBox = document.getElementById('resultBox'); |
|
|
const resultContent = document.getElementById('resultContent'); |
|
|
|
|
|
fetchBtn.addEventListener('click', fetchInstagramId); |
|
|
usernameInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
fetchInstagramId(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function fetchInstagramId() { |
|
|
const username = usernameInput.value.trim(); |
|
|
|
|
|
if (!username) { |
|
|
showError('Please enter a username'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
fetchBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Fetching...'; |
|
|
fetchBtn.disabled = true; |
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
|
|
|
const fakeId = generateFakeId(username); |
|
|
|
|
|
if (Math.random() > 0.1) { |
|
|
showResult(username, fakeId); |
|
|
} else { |
|
|
showError('User not found. Please check the username and try again.'); |
|
|
} |
|
|
|
|
|
fetchBtn.innerHTML = '<i class="fas fa-id-card mr-2"></i> Get User ID'; |
|
|
fetchBtn.disabled = false; |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
function showResult(username, userId) { |
|
|
resultContent.innerHTML = ` |
|
|
<div class="w-full mb-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="font-semibold text-gray-600">Username:</span> |
|
|
<span class="font-medium">@${username}</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="font-semibold text-gray-600">User ID:</span> |
|
|
<span class="font-bold text-purple-600">${userId}</span> |
|
|
</div> |
|
|
</div> |
|
|
<button id="copyBtn" class="mt-4 bg-purple-100 text-purple-700 py-2 px-4 rounded-lg font-medium hover:bg-purple-200 transition-colors flex items-center"> |
|
|
<i class="fas fa-copy mr-2"></i> Copy ID |
|
|
</button> |
|
|
`; |
|
|
|
|
|
resultBox.classList.add('show'); |
|
|
|
|
|
document.getElementById('copyBtn').addEventListener('click', function() { |
|
|
navigator.clipboard.writeText(userId); |
|
|
|
|
|
const copyBtn = document.getElementById('copyBtn'); |
|
|
copyBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!'; |
|
|
copyBtn.classList.remove('bg-purple-100', 'text-purple-700', 'hover:bg-purple-200'); |
|
|
copyBtn.classList.add('bg-green-100', 'text-green-700', 'hover:bg-green-200'); |
|
|
|
|
|
setTimeout(() => { |
|
|
copyBtn.innerHTML = '<i class="fas fa-copy mr-2"></i> Copy ID'; |
|
|
copyBtn.classList.remove('bg-green-100', 'text-green-700', 'hover:bg-green-200'); |
|
|
copyBtn.classList.add('bg-purple-100', 'text-purple-700', 'hover:bg-purple-200'); |
|
|
}, 2000); |
|
|
}); |
|
|
} |
|
|
|
|
|
function showError(message) { |
|
|
resultContent.innerHTML = ` |
|
|
<div class="text-center text-red-500"> |
|
|
<i class="fas fa-exclamation-circle text-2xl mb-2"></i> |
|
|
<p>${message}</p> |
|
|
</div> |
|
|
`; |
|
|
resultBox.classList.add('show'); |
|
|
} |
|
|
|
|
|
function generateFakeId(username) { |
|
|
|
|
|
let hash = 0; |
|
|
for (let i = 0; i < username.length; i++) { |
|
|
hash = (hash << 5) - hash + username.charCodeAt(i); |
|
|
hash |= 0; |
|
|
} |
|
|
return Math.abs(hash).toString().substring(0, 10); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jjoih/arya-m" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
