Spaces:
Running
Running
File size: 7,249 Bytes
fe7217a 0612a17 | 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 | <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Just a moment...</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.glow-text {
text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
.security-shield {
filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.3));
}
.captcha-grid {
background: linear-gradient(45deg, transparent 48%, rgba(59, 130, 246, 0.1) 50%, transparent 52%);
background-size: 10px 10px;
}
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center">
<div id="vanta-background" class="absolute inset-0 z-0"></div>
<div class="relative z-10 max-w-md w-full mx-4 bg-gray-800/80 backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-gray-700">
<!-- Header -->
<div class="text-center mb-8">
<div class="flex justify-center mb-4">
<div class="security-shield bg-blue-500/20 p-4 rounded-full">
<i data-feather="shield" class="w-12 h-12 text-blue-400"></i>
</div>
</div>
<h1 class="text-2xl font-bold glow-text mb-2">Just a moment...</h1>
<p class="text-gray-400 text-sm">neal.fun needs to review the security of your connection</p>
</div>
<!-- Domain Info -->
<div class="bg-gray-700/50 rounded-lg p-4 mb-6 text-center">
<div class="flex items-center justify-center space-x-2 mb-2">
<i data-feather="globe" class="w-4 h-4 text-blue-400"></i>
<span class="font-medium">neal.fun</span>
</div>
<p class="text-xs text-gray-400">Verifying your connection to ensure security</p>
</div>
<!-- Security Message -->
<div class="bg-blue-500/10 border border-blue-500/30 rounded-lg p-4 mb-6">
<div class="flex items-start space-x-3">
<i data-feather="alert-triangle" class="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5"></i>
<div>
<h3 class="font-semibold text-blue-400 text-sm mb-1">Security Check Required</h3>
<p class="text-gray-300 text-sm">Please complete the verification below to continue</p>
</div>
</div>
</div>
<!-- CAPTCHA Area -->
<div class="captcha-grid border-2 border-dashed border-gray-600 rounded-xl p-6 mb-6">
<div class="text-center">
<div class="flex justify-center mb-4">
<div class="relative">
<div class="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center">
<i data-feather="key" class="w-8 h-8 text-blue-400"></i>
</div>
<div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
</div>
</div>
<h3 class="font-semibold mb-2">Verify You Are Human</h3>
<p class="text-gray-400 text-sm mb-4">Complete the security check to proceed</p>
<!-- Loading Animation -->
<div class="flex justify-center space-x-1 mb-4">
<div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
<div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
<div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.3s"></div>
</div>
<!-- Progress Bar -->
<div class="w-full bg-gray-700 rounded-full h-2 mb-4">
<div class="bg-blue-500 h-2 rounded-full animate-pulse w-3/4"></div>
</div>
</div>
</div>
<!-- Action Button -->
<button id="verify-btn" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 flex items-center justify-center space-x-2">
<i data-feather="check-circle" class="w-5 h-5"></i>
<span>Complete Verification</span>
</button>
<!-- Footer Info -->
<div class="text-center mt-6 text-xs text-gray-500">
<p>This check helps prevent automated access to our services</p>
<p class="mt-1">Powered by advanced security protocols</p>
</div>
</div>
<script>
// Initialize Vanta.js background
VANTA.NET({
el: "#vanta-background",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3b82f6,
backgroundColor: 0x111827,
points: 12.00,
maxDistance: 25.00,
spacing: 18.00
});
// Initialize Feather Icons
feather.replace();
// Add interaction to verify button
document.getElementById('verify-btn').addEventListener('click', function() {
const btn = this;
const originalText = btn.innerHTML;
// Show loading state
btn.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin"></i><span>Verifying...</span>';
feather.replace();
// Disable button
btn.disabled = true;
btn.classList.remove('hover:scale-105', 'hover:bg-blue-600');
btn.classList.add('bg-blue-400');
// Simulate verification process
setTimeout(() => {
btn.innerHTML = '<i data-feather="check" class="w-5 h-5"></i><span>Verified Successfully!</span>';
feather.replace();
btn.classList.remove('bg-blue-400');
btn.classList.add('bg-green-500');
// Redirect after successful verification
setTimeout(() => {
window.location.href = 'https://neal.fun/password-game/';
}, 1000);
}, 2000);
});
// Add subtle animation to security shield
const shield = document.querySelector('.security-shield');
setInterval(() => {
shield.classList.toggle('scale-105');
}, 2000);
</script>
</body>
</html>
|