Spaces:
Running
Running
File size: 14,846 Bytes
26ecfb1 ccc304d 26ecfb1 ccc304d 26ecfb1 4781bce 26ecfb1 4781bce 26ecfb1 ccc304d 26ecfb1 ccc304d 4781bce 26ecfb1 4781bce 26ecfb1 4781bce 26ecfb1 4781bce ccc304d 4781bce ccc304d 4781bce ccc304d 4781bce ccc304d 4781bce ccc304d 26ecfb1 8557032 | 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 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InstaShield | Account Security Toolkit</title>
<link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/69">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
light: '#f8fafc',
dark: '#1e293b'
}
}
}
}
</script>
<style>
.hacker-text {
font-family: 'Courier New', monospace;
}
.terminal {
background-color: white;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.typewriter {
border-right: 2px solid #3b82f6;
white-space: nowrap;
overflow: hidden;
animation: blink-caret 0.75s step-end infinite;
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #3b82f6; }
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-light text-dark">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="flex flex-col items-center justify-center mb-12 text-center">
<div class="flex items-center gap-4 mb-6">
<i data-feather="shield" class="text-primary w-12 h-12"></i>
<h1 class="text-4xl md:text-5xl font-bold hacker-text">InstaShield</h1>
</div>
<p class="text-secondary text-lg md:text-xl max-w-2xl hacker-text">
Your Instagram Account Security Toolkit
</p>
</header>
<!-- Main Content -->
<main>
<!-- Info Box -->
<div class="terminal p-6 mb-12 bg-primary/10 border-primary/30">
<div class="flex items-start gap-4">
<i data-feather="info" class="text-primary mt-1"></i>
<div>
<h3 class="text-lg font-bold hacker-text">SECURITY NOTICE</h3>
<p class="hacker-text mb-2">
This toolkit helps you understand and improve your Instagram account security.
</p>
</div>
</div>
</div>
<!-- Tool Selection -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
<!-- Tool 1 -->
<div class="terminal p-6 card-hover">
<div class="flex items-center gap-3 mb-4">
<div class="bg-primary/10 p-2 rounded-full">
<i data-feather="lock" class="text-primary"></i>
</div>
<h3 class="text-xl font-bold hacker-text">Password Check</h3>
</div>
<p class="hacker-text text-sm mb-4">
Test how strong your password is against common attacks.
</p>
<input type="password" id="passwordInput" class="w-full hacker-text px-3 py-2 mb-2 border rounded" placeholder="Enter password to test">
<button onclick="checkPassword()" class="bg-primary hover:bg-primary/90 text-white hacker-text px-4 py-2 rounded transition-all">
Test Password
</button>
<div id="passwordResult" class="mt-2 hacker-text text-sm"></div>
</div>
<!-- Tool 2 -->
<div class="terminal p-6 card-hover">
<div class="flex items-center gap-3 mb-4">
<div class="bg-primary/10 p-2 rounded-full">
<i data-feather="activity" class="text-primary"></i>
</div>
<h3 class="text-xl font-bold hacker-text">Account Audit</h3>
</div>
<p class="hacker-text text-sm mb-4">
Check your account settings for security vulnerabilities.
</p>
<button class="bg-primary hover:bg-primary/90 text-white hacker-text px-4 py-2 rounded transition-all opacity-50" disabled>
Run Audit
</button>
</div>
<!-- Tool 3 -->
<div class="terminal p-6 card-hover">
<div class="flex items-center gap-3 mb-4">
<div class="bg-primary/10 p-2 rounded-full">
<i data-feather="alert-circle" class="text-primary"></i>
</div>
<h3 class="text-xl font-bold hacker-text">Phishing Test</h3>
</div>
<p class="hacker-text text-sm mb-4">
Learn how to spot phishing attempts on Instagram.
</p>
<button onclick="startPhishingTest()" class="bg-primary hover:bg-primary/90 text-white hacker-text px-4 py-2 rounded transition-all">
Start Test
</button>
<div id="phishingTestContent" class="mt-4 hacker-text text-sm hidden">
<div class="border-b pb-2 mb-2">
<h4 class="font-bold">Look for these red flags:</h4>
<ul class="list-disc pl-5 mt-2">
<li>Requests for your password</li>
<li>Spelling/grammar mistakes</li>
<li>Urgent calls to action ("Your account will be disabled!")</li>
<li>Suspicious sender email addresses</li>
</ul>
</div>
<div class="mt-2">
<p>Example phishing message:</p>
<div class="terminal p-3 mt-2 bg-red-50">
<p>"Dear user, your Instagram account will be deleted in 24 hours unless you verify your credentials at: instagram.verify-account.com"</p>
</div>
</div>
</div>
</div>
</div>
<!-- Security Tips -->
<div class="terminal p-6 mb-12">
<h2 class="text-2xl font-bold hacker-text text-primary mb-4">Essential Security Tips</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="bg-secondary/10 p-2 rounded-full">
<i data-feather="check" class="text-secondary"></i>
</div>
<div>
<h3 class="text-lg font-bold hacker-text">Use Strong, Unique Passwords</h3>
<p class="hacker-text text-sm">
Create complex passwords and never reuse them across different sites.
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-secondary/10 p-2 rounded-full">
<i data-feather="check" class="text-secondary"></i>
</div>
<div>
<h3 class="text-lg font-bold hacker-text">Enable Two-Factor Authentication</h3>
<p class="hacker-text text-sm">
Add an extra layer of security to your Instagram account.
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-secondary/10 p-2 rounded-full">
<i data-feather="check" class="text-secondary"></i>
</div>
<div>
<h3 class="text-lg font-bold hacker-text">Review Connected Apps</h3>
<p class="hacker-text text-sm">
Regularly check and remove third-party apps with access to your account.
</p>
</div>
</div>
</div>
</div>
<!-- Fake Terminal -->
<div class="terminal p-6 mb-12">
<div class="flex items-center gap-2 mb-4">
<div class="w-3 h-3 rounded-full bg-red-400"></div>
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
<div class="w-3 h-3 rounded-full bg-green-400"></div>
<span class="hacker-text ml-2">user@instashield:~</span>
</div>
<div class="hacker-text mb-2">
<span class="text-green-600">user@instashield</span>:<span class="text-blue-600">~</span>$ loading security modules...
</div>
<div class="hacker-text mb-2 typewriter" style="width: 28ch;">
analyzing account security...
</div>
<div class="hacker-text mb-2 text-sm" id="terminal-output">
> This is a demonstration of security analysis tools.
</div>
</div>
</main>
<!-- Footer -->
<footer class="mt-16 text-center hacker-text text-sm text-gray-600">
<p>© 2023 InstaShield | Educational tool for account security</p>
<p class="mt-2">Not affiliated with Instagram or Meta</p>
<div class="mt-4">
<button onclick="runApp()" class="bg-primary hover:bg-primary/90 text-white hacker-text px-4 py-2 rounded transition-all">
Run InstaShield
</button>
</div>
</footer>
</div>
<script>
// Terminal messages
const terminalOutput = document.getElementById('terminal-output');
const messages = [
"> System check complete. Security status: Good",
"> Recommendation: Enable two-factor authentication",
"> Remember to use unique passwords for each account",
"> Security tip: Be cautious of suspicious DMs"
];
let currentMessage = 0;
function updateTerminal() {
terminalOutput.textContent = messages[currentMessage];
currentMessage = (currentMessage + 1) % messages.length;
}
// Change message every 5 seconds
setInterval(updateTerminal, 5000);
// Initialize feather icons
feather.replace();
function runApp() {
const terminalOutput = document.getElementById('terminal-output');
terminalOutput.innerHTML = `
> Initializing InstaShield v1.0...<br>
> Loading security modules...<br>
> Checking system requirements...<br>
<span class="text-green-600">> Ready! All tools are now active.</span>
`;
document.querySelector('.grid').scrollIntoView({ behavior: 'smooth' });
}
function checkPassword() {
const password = document.getElementById('passwordInput').value;
const resultDiv = document.getElementById('passwordResult');
if (!password) {
resultDiv.textContent = "Please enter a password to test";
resultDiv.className = "mt-2 hacker-text text-sm text-red-500";
return;
}
// Simple password strength check
let strength = 0;
let feedback = [];
// Length check
if (password.length >= 12) strength += 2;
else if (password.length >= 8) strength += 1;
else feedback.push("Too short (min 8 chars)");
// Complexity checks
if (/[A-Z]/.test(password)) strength += 1;
else feedback.push("Add uppercase letters");
if (/[a-z]/.test(password)) strength += 1;
else feedback.push("Add lowercase letters");
if (/[0-9]/.test(password)) strength += 1;
else feedback.push("Add numbers");
if (/[^A-Za-z0-9]/.test(password)) strength += 2;
else feedback.push("Add special characters");
// Common password check
const commonPasswords = ["password", "123456", "qwerty", "instagram", "admin"];
if (commonPasswords.includes(password.toLowerCase())) {
strength = 0;
feedback = ["This is a very common password - DO NOT USE"];
}
// Display results
let strengthText = "";
let colorClass = "";
if (strength <= 3) {
strengthText = "Weak";
colorClass = "text-red-500";
} else if (strength <= 6) {
strengthText = "Moderate";
colorClass = "text-yellow-500";
} else {
strengthText = "Strong";
colorClass = "text-green-500";
}
resultDiv.innerHTML = `
<div class="font-bold ${colorClass}">Strength: ${strengthText}</div>
${feedback.length ? `<div class="mt-1">Recommendations:<br>${feedback.join('<br>')}</div>` : '<div class="mt-1">Great password!</div>'}
`;
}
function startPhishingTest() {
const contentDiv = document.getElementById('phishingTestContent');
contentDiv.classList.toggle('hidden');
const terminalOutput = document.getElementById('terminal-output');
terminalOutput.innerHTML = `
> Starting phishing awareness module...<br>
> Loaded common phishing tactics<br>
<span class="text-green-600">> Review the red flags above carefully</span>
`;
}
</script>
</body>
</html>
|