Boobs00/ai-age-verification at main

35.1 kB

1 contributor

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Raven Cipher Access Gateway</title> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { cyberteal: '#00ffcc', cyberpurple: '#7700ff', cyberblack: '#050505', cybergray: '#1a1a1a' }, fontFamily: { orbitron: ['Orbitron', 'sans-serif'], rajdhani: ['Rajdhani', 'sans-serif'] }, animation: { 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', 'flicker': 'flicker 1.5s infinite alternate', 'glow': 'glow 1.5s infinite alternate' }, keyframes: { flicker: { '0%, 19%, 21%, 23%, 25%, 54%, 56%, 100%': { opacity: '1', }, '20%, 24%, 55%': { opacity: '0.2', } }, glow: { '0%': { 'text-shadow': '0 0 2px #00ffcc, 0 0 5px #00ffcc', }, '100%': { 'text-shadow': '0 0 5px #00ffcc, 0 0 15px #00bb88, 0 0 20px #008855', } } } } } } </script> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet"> <style> body { margin: 0; padding: 0; background: radial-gradient(circle at center, #050505 0%, #0a0a0a 50%, #000 100%); background-attachment: fixed; color: #00ffcc; min-height: 100vh; overflow-x: hidden; } .cyber-border { position: relative; box-shadow: 0 0 15px #00ffcc55, 0 0 25px #00ffcc33; border: 1px solid transparent; } .cyber-border::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, #00ffcc, #7700ff, #00ffcc, #7700ff, #00ffcc); background-size: 400%; border-radius: 0.75rem; z-index: -1; animation: animate-border 20s linear infinite; } @keyframes animate-border { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } .cyber-text { letter-spacing: 1px; text-shadow: 0 0 10px #00ffcc80; } .scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(to bottom, rgba(0,255,204,0.1), rgba(0,255,204,0.7)); opacity: 0.6; animation: scan 5s linear infinite; } @keyframes scan { 0% { top: 0%; } 50% { top: 100%; } 51% { opacity: 0; } 52% { opacity: 0.6; top: 0; } 100% { top: 100%; } } .circuit-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 10% 20%, rgba(0, 255, 204, 0.05) 0%, transparent 15%), radial-gradient(circle at 90% 50%, rgba(119, 0, 255, 0.05) 0%, transparent 15%), radial-gradient(circle at 50% 80%, rgba(0, 255, 204, 0.05) 0%, transparent 15%); background-size: 300px 300px; opacity: 0.8; pointer-events: none; } .code-select { background: rgba(20, 20, 20, 0.8); border: 1px solid #00ffcc; color: #00ffcc; } .code-select:focus { outline: none; border-color: #7700ff; box-shadow: 0 0 10px rgba(119, 0, 255, 0.5); } .matrix-grid { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-size: 30px 30px; background-image: linear-gradient(to right, rgba(0,255,204,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,255,204,0.05) 1px, transparent 1px); opacity: 0.2; } .flicker-1 { animation: flicker 2s infinite alternate; } .flicker-2 { animation: flicker 1.8s infinite alternate-reverse; } @keyframes flicker { 0% { opacity: 0.8; } 50% { opacity: 0.3; } 100% { opacity: 1; } } .cyber-btn { background-color: #00ffcc; color: #000; position: relative; overflow: hidden; box-shadow: 0 0 15px #00ffcc; transition: all 0.3s ease; } .cyber-btn:hover { background-color: #00e6b3; transform: translateY(-2px); box-shadow: 0 0 20px #00ffcc, 0 0 30px #00ffcc66; } .cyber-btn:active { transform: translateY(0); } .cyber-btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); transition: all 0.5s ease; } .cyber-btn:hover::after { left: 100%; } .message-entering { animation: fadeScaleIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } @keyframes fadeScaleIn { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } } /* Responsive optimizations */ @media (max-width: 1024px) { .circuit-overlay { background-size: 200px 200px; } } @media (max-width: 640px) { .scan-line { height: 3px; } } </style> </head> <body class="font-orbitron min-h-screen flex flex-col items-center justify-center p-4 lg:p-8 relative overflow-hidden">  <div class="matrix-grid"></div>  <div class="scan-line"></div>  <div class="circuit-overlay"></div>  <div class="particles"> <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-cyan-400 rounded-full opacity-30 flicker-1"></div> <div class="absolute top-1/3 right-1/5 w-1 h-1 bg-purple-500 rounded-full opacity-40 flicker-2"></div> <div class="absolute bottom-1/4 left-1/3 w-1.5 h-1.5 bg-cyan-500 rounded-full opacity-50 flicker-1"></div> <div class="absolute top-1/5 right-1/4 w-1 h-1 bg-purple-400 rounded-full opacity-30 flicker-2"></div> </div>  <div class="cyber-border w-full max-w-lg bg-cybergray/90 backdrop-blur-sm py-8 px-6 sm:p-10 rounded-xl relative z-10"> <div class="flex flex-col items-center justify-center space-y-6">  <div class="text-center"> <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-cyberteal cyber-text uppercase tracking-wider mb-2 flex items-center justify-center gap-2"> <span class="animate-pulse-slow">⚠️</span> <span class="animate-glow">Access Gateway: Adults Only</span> </h1> <p class="text-xs sm:text-sm text-cyberteal/70 font-rajdhani tracking-wide"> Restricted Section - Neural Validation Required </p> </div>  <div class="w-16 h-0.5 bg-cyberteal/40 mx-auto rounded-full relative"> <div class="absolute top-0 left-0 w-8 h-full bg-cyberteal rounded-full animate-pulse"></div> </div> <form id="ageGate" class="w-full space-y-5">  <div> <p class="text-sm text-cyberteal/80 font-medium mb-3 uppercase tracking-wider">Neural Age Verification</p> <div class="grid grid-cols-3 gap-3"> <div class="flex flex-col"> <label for="day" class="text-xs font-rajdhani font-medium mb-1.5">Day</label> <select id="day" class="code-select rounded-lg py-2 px-3 text-sm cursor-pointer appearance-none"></select> </div> <div class="flex flex-col"> <label for="month" class="text-xs font-rajdhani font-medium mb-1.5">Month</label> <select id="month" class="code-select rounded-lg py-2 px-3 text-sm cursor-pointer appearance-none"></select> </div> <div class="flex flex-col"> <label for="year" class="text-xs font-rajdhani font-medium mb-1.5">Year</label> <select id="year" class="code-select rounded-lg py-2 px-3 text-sm cursor-pointer appearance-none"></select> </div> </div> </div>  <div> <p class="text-sm text-cyberteal/80 font-medium mb-3 uppercase tracking-wider">Genetic Access Code</p> <div class="flex items-center gap-4"> <div class="flex-1 flex flex-col"> <label for="code1" class="text-xs font-rajdhani font-medium mb-1.5">Gene Sequence 01</label> <select id="code1" class="code-select rounded-lg py-2 px-3 text-center text-sm font-bold"></select> </div> <div class="flex-1 flex flex-col"> <label for="code2" class="text-xs font-rajdhani font-medium mb-1.5">Gene Sequence 02</label> <select id="code2" class="code-select rounded-lg py-2 px-3 text-center text-sm font-bold"></select> </div> <div class="flex-1 flex flex-col"> <label for="code3" class="text-xs font-rajdhani font-medium mb-1.5">Gene Sequence 03</label> <select id="code3" class="code-select rounded-lg py-2 px-3 text-center text-sm font-bold"></select> </div> </div> <p class="text-cyberteal/40 text-xs font-rajdhani text-center mt-2 italic"> Family Code Pattern: VII • VII • VII </p> </div>  <div class="pt-4"> <button type="submit" class="cyber-btn w-full py-3 rounded-lg text-sm font-bold uppercase tracking-widest transition-all duration-300"> <span class="relative z-10">Unlock Neural Cipher</span> </button> </div> </form>  <div id="message" class="message w-full text-sm text-center min-h-[40px] pt-2 font-rajdhani"></div> </div> </div>  <div class="absolute bottom-6 left-0 right-0 flex justify-center"> <p class="text-cyberteal/60 text-xs font-rajdhani font-medium uppercase tracking-wide flex items-center gap-1 animate-pulse"> <span>Raven Cipher</span> <span class="w-1 h-1 bg-cyberteal/50 rounded-full"></span> <span>Neuro-Sequence Encryption Protocol</span> <span class="w-1 h-1 bg-cyberteal/50 rounded-full"></span> <span>Sub-Zero Security</span> </p> </div> <script> // Initialize date dropdowns const daySelect = document.getElementById('day'); const monthSelect = document.getElementById('month'); const yearSelect = document.getElementById('year'); const msg = document.getElementById('message'); // Add days daySelect.innerHTML += `<option value="" disabled selected>DD</option>`; for (let i = 1; i <= 31; i++) { daySelect.innerHTML += `<option value="${i}">${i.toString().padStart(2, '0')}</option>`; } // Add months monthSelect.innerHTML += `<option value="" disabled selected>MM</option>`; for (let i = 1; i <= 12; i++) { monthSelect.innerHTML += `<option value="${i}">${i.toString().padStart(2, '0')}</option>`; } // Add years yearSelect.innerHTML += `<option value="" disabled selected>YYYY</option>`; for (let i = new Date().getFullYear(); i >= 1900; i--) { yearSelect.innerHTML += `<option value="${i}">${i}</option>`; } // Add code options for (let i = 0; i <= 9; i++) { ['code1','code2','code3'].forEach(id => { document.getElementById(id).innerHTML += `<option value="${i}" ${i === 7 ? 'selected' : ''}>${i}</option>`; }); } // Form submission handler document.getElementById('ageGate').addEventListener('submit', function(e) { e.preventDefault(); // Animate button press const submitBtn = this.querySelector('button'); submitBtn.classList.add('scale-95'); setTimeout(() => submitBtn.classList.remove('scale-95'), 150); // Get values const day = parseInt(daySelect.value); const month = parseInt(monthSelect.value); const year = parseInt(yearSelect.value); // Validate input if (!day || !month || !year) { showMessage("ERROR: INCOMPLETE NEURAL PROFILE DATA", false); return; } // Calculate age const dob = new Date(year, month - 1, day); const ageDifMs = Date.now() - dob.getTime(); const ageDate = new Date(ageDifMs); const age = Math.abs(ageDate.getUTCFullYear() - 1970); // Get code values const code1 = document.getElementById('code1').value; const code2 = document.getElementById('code2').value; const code3 = document.getElementById('code3').value; const code = `${code1}${code2}${code3}`; // Process validation msg.classList.add('message-entering'); setTimeout(() => msg.classList.remove('message-entering'), 400); if (age >= 18 && code === "777") { showMessage("✔️ Neural pattern validated. Cerebral clearance accepted. Welcome, Cipher Initiate.", true); // Simulate redirect sequence setTimeout(() => { document.body.classList.add('opacity-0'); setTimeout(() => window.location.href = "/main.html", 500); }, 2000); } else { showMessage("❌ Access denied. Biological age or genetic marker mismatch detected. The cipher remains encrypted.", false); // Shake animation for incorrect input this.classList.add('animate-shake'); setTimeout(() => this.classList.remove('animate-shake'), 500); } }); // Helper function to display messages function showMessage(text, isSuccess) { msg.textContent = text; msg.className = 'message w-full text-sm text-center min-h-[40px] pt-2 font-rajdhani message-entering'; if (isSuccess) { msg.classList.add('text-green-400', 'font-semibold'); } else { msg.classList.add('text-red-400'); } } // Add subtle hover effects to selects const selects = document.querySelectorAll('select'); selects.forEach(select => { select.addEventListener('mouseenter', () => { select.parentElement.querySelector('label').classList.add('text-cyberteal'); }); select.addEventListener('mouseleave', () => { select.parentElement.querySelector('label').classList.remove('text-cyberteal'); }); }); // Simulate terminal input for code boxes const codeBoxes = document.querySelectorAll('[id^="code"]'); codeBoxes.forEach(box => { box.addEventListener('focus', () => { box.classList.add('bg-cyberblack', 'ring-2', 'ring-cyberteal'); }); box.addEventListener('blur', () => { box.classList.remove('bg-cyberblack', 'ring-2', 'ring-cyberteal'); }); }); </script> </body> </html> - Initial Deployment

366631c verified 7 months ago