404.html (10996B)
1 <!DOCTYPE html> 2 <html lang="en" class="dark"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>404 // Page Not Found</title> 7 8 <!-- Fonts (Same as App) --> 9 <link rel="preconnect" href="https://fonts.googleapis.com"> 10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 11 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"> 12 13 <!-- Tailwind CSS --> 14 <script src="https://cdn.tailwindcss.com"></script> 15 <script> 16 tailwind.config = { 17 darkMode: 'class', 18 theme: { 19 extend: { 20 colors: { 21 gemini: { 22 bg: '#131314', 23 surface: '#1E1F20', 24 text: '#E3E3E3', 25 blue: '#A8C7FA', 26 purple: '#D0BCFF' 27 } 28 }, 29 fontFamily: { 30 sans: ['Inter', 'sans-serif'], 31 mono: ['JetBrains Mono', 'monospace'], 32 display: ['Space Grotesk', 'sans-serif'], 33 }, 34 animation: { 35 'float': 'float 6s ease-in-out infinite', 36 'float-delayed': 'float 6s ease-in-out 3s infinite', 37 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', 38 'glitch': 'glitch 1s linear infinite', 39 }, 40 keyframes: { 41 float: { 42 '0%, 100%': { transform: 'translateY(0)' }, 43 '50%': { transform: 'translateY(-20px)' }, 44 }, 45 glitch: { 46 '2%, 64%': { transform: 'translate(2px,0) skew(0deg)' }, 47 '4%, 60%': { transform: 'translate(-2px,0) skew(0deg)' }, 48 '62%': { transform: 'translate(0,0) skew(5deg)' }, 49 } 50 } 51 } 52 } 53 } 54 </script> 55 56 <style> 57 body { 58 background-color: #131314; 59 color: #E3E3E3; 60 overflow: hidden; 61 } 62 63 /* Ambient Glow Effects */ 64 .glow-orb { 65 position: absolute; 66 border-radius: 50%; 67 filter: blur(120px); 68 opacity: 0.15; 69 z-index: 0; 70 } 71 .glow-1 { width: 600px; height: 600px; background: #4facfe; top: -200px; left: -100px; animation: float 10s ease-in-out infinite; } 72 .glow-2 { width: 500px; height: 500px; background: #a8c7fa; bottom: -150px; right: -100px; animation: float-delayed 12s ease-in-out infinite; } 73 74 /* Glitch Text Effect */ 75 .glitch-wrapper { 76 position: relative; 77 } 78 .glitch-text::before, 79 .glitch-text::after { 80 content: attr(data-text); 81 position: absolute; 82 top: 0; 83 left: 0; 84 width: 100%; 85 height: 100%; 86 } 87 .glitch-text::before { 88 left: 2px; 89 text-shadow: -1px 0 #ff00c1; 90 clip: rect(44px, 450px, 56px, 0); 91 animation: glitch-anim 5s infinite linear alternate-reverse; 92 } 93 .glitch-text::after { 94 left: -2px; 95 text-shadow: -1px 0 #00fff9; 96 clip: rect(44px, 450px, 56px, 0); 97 animation: glitch-anim2 5s infinite linear alternate-reverse; 98 } 99 @keyframes glitch-anim { 100 0% { clip: rect(34px, 9999px, 11px, 0); } 101 5% { clip: rect(89px, 9999px, 86px, 0); } 102 10% { clip: rect(6px, 9999px, 83px, 0); } 103 15% { clip: rect(32px, 9999px, 5px, 0); } 104 20% { clip: rect(65px, 9999px, 18px, 0); } 105 25% { clip: rect(96px, 9999px, 23px, 0); } 106 30% { clip: rect(21px, 9999px, 56px, 0); } 107 35% { clip: rect(78px, 9999px, 2px, 0); } 108 40% { clip: rect(12px, 9999px, 67px, 0); } 109 45% { clip: rect(54px, 9999px, 92px, 0); } 110 50% { clip: rect(3px, 9999px, 34px, 0); } 111 55% { clip: rect(45px, 9999px, 12px, 0); } 112 60% { clip: rect(87px, 9999px, 65px, 0); } 113 65% { clip: rect(23px, 9999px, 98px, 0); } 114 70% { clip: rect(67px, 9999px, 45px, 0); } 115 75% { clip: rect(12px, 9999px, 34px, 0); } 116 80% { clip: rect(56px, 9999px, 78px, 0); } 117 85% { clip: rect(98px, 9999px, 23px, 0); } 118 90% { clip: rect(34px, 9999px, 67px, 0); } 119 95% { clip: rect(78px, 9999px, 12px, 0); } 120 100% { clip: rect(12px, 9999px, 56px, 0); } 121 } 122 @keyframes glitch-anim2 { 123 0% { clip: rect(65px, 9999px, 87px, 0); } 124 5% { clip: rect(12px, 9999px, 34px, 0); } 125 10% { clip: rect(54px, 9999px, 12px, 0); } 126 15% { clip: rect(98px, 9999px, 65px, 0); } 127 20% { clip: rect(23px, 9999px, 78px, 0); } 128 25% { clip: rect(67px, 9999px, 34px, 0); } 129 30% { clip: rect(12px, 9999px, 98px, 0); } 130 35% { clip: rect(56px, 9999px, 23px, 0); } 131 40% { clip: rect(89px, 9999px, 67px, 0); } 132 45% { clip: rect(34px, 9999px, 12px, 0); } 133 50% { clip: rect(78px, 9999px, 56px, 0); } 134 55% { clip: rect(21px, 9999px, 89px, 0); } 135 60% { clip: rect(65px, 9999px, 34px, 0); } 136 65% { clip: rect(12px, 9999px, 78px, 0); } 137 70% { clip: rect(54px, 9999px, 21px, 0); } 138 75% { clip: rect(98px, 9999px, 65px, 0); } 139 80% { clip: rect(32px, 9999px, 12px, 0); } 140 85% { clip: rect(76px, 9999px, 54px, 0); } 141 90% { clip: rect(19px, 9999px, 98px, 0); } 142 95% { clip: rect(63px, 9999px, 32px, 0); } 143 100% { clip: rect(12px, 9999px, 76px, 0); } 144 } 145 146 /* Code Block Styling */ 147 .code-block { 148 background: rgba(30, 31, 32, 0.5); 149 border: 1px solid rgba(255, 255, 255, 0.1); 150 backdrop-filter: blur(8px); 151 font-family: 'JetBrains Mono', monospace; 152 } 153 </style> 154 </head> 155 <body class="flex flex-col items-center justify-center min-h-screen relative"> 156 157 <!-- Background Elements --> 158 <div class="glow-orb glow-1"></div> 159 <div class="glow-orb glow-2"></div> 160 <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00MCAwTDQgMEw0IDRMNDAgNEw0MCAwWiIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjAzKSIvPgo8cGF0aCBkPSJNMCA0MEwwIDRMNCA0TDQgNDBMMCA0MFoiIGZpbGw9InJnYmEoMjU1LCAyNTUsIDI1NSwgMC4wMykiLz4KPC9zdmc+')] opacity-20 pointer-events-none"></div> 161 162 <!-- Floating Code Bits (Background) --> 163 <div class="absolute top-1/4 left-1/4 animate-float opacity-30 pointer-events-none select-none"> 164 <div class="code-block p-4 rounded-lg transform -rotate-12"> 165 <span class="text-pink-400">if</span> (page == <span class="text-blue-400">null</span>) {<br> 166 <span class="text-yellow-400">panic</span>();<br> 167 } 168 </div> 169 </div> 170 171 <div class="absolute bottom-1/3 right-1/4 animate-float-delayed opacity-30 pointer-events-none select-none"> 172 <div class="code-block p-4 rounded-lg transform rotate-6"> 173 <span class="text-green-400">404</span> Error:<br> 174 <span class="text-gray-400">// Resource not found</span> 175 </div> 176 </div> 177 178 <!-- Main Content --> 179 <div class="z-10 text-center space-y-8 max-w-2xl px-6"> 180 181 <!-- Animated 404 Header --> 182 <div class="relative inline-block glitch-wrapper mb-4"> 183 <h1 class="text-9xl font-bold font-display text-white tracking-tighter glitch-text" data-text="404"> 184 404 185 </h1> 186 </div> 187 188 <!-- Subtext --> 189 <div class="space-y-4"> 190 <h2 class="text-3xl font-medium text-white tracking-tight"> 191 Lost in the Code? 192 </h2> 193 <p class="text-gemini-textSecondary text-lg font-light leading-relaxed"> 194 The page you are looking for has been moved, deleted, or possibly never existed in this dimension. 195 </p> 196 </div> 197 198 <!-- Interactive Terminal (Visual Only) --> 199 <div class="code-block rounded-xl p-6 text-left max-w-lg mx-auto shadow-2xl mt-8 border-t border-white/10 relative overflow-hidden group hover:border-gemini-blue/50 transition-colors cursor-default"> 200 <div class="flex gap-2 mb-4"> 201 <div class="w-3 h-3 rounded-full bg-red-500"></div> 202 <div class="w-3 h-3 rounded-full bg-yellow-500"></div> 203 <div class="w-3 h-3 rounded-full bg-green-500"></div> 204 </div> 205 <div class="text-sm space-y-2 font-mono"> 206 <div class="flex"> 207 <span class="text-green-400 mr-2">➜</span> 208 <span class="text-blue-400">~</span> 209 <span class="text-gray-400 ml-2">locate page</span> 210 </div> 211 <div class="text-gray-300">Searching database...</div> 212 <div class="text-red-400">Error: Route not defined.</div> 213 <div class="flex animate-pulse"> 214 <span class="text-green-400 mr-2">➜</span> 215 <span class="text-blue-400">~</span> 216 <span class="w-2 h-5 bg-gray-500 ml-2"></span> 217 </div> 218 </div> 219 <!-- Glow effect on hover --> 220 <div class="absolute inset-0 bg-gradient-to-tr from-gemini-blue/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div> 221 </div> 222 223 <!-- Action Button --> 224 <div class="pt-8"> 225 <a href="/" class="group relative inline-flex items-center gap-3 px-8 py-4 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-gemini-blue/50 rounded-full transition-all duration-300 backdrop-blur-sm overflow-hidden"> 226 <div class="absolute inset-0 bg-gradient-to-r from-gemini-blue/20 to-gemini-purple/20 opacity-0 group-hover:opacity-100 transition-opacity"></div> 227 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gemini-blue group-hover:translate-x-[-4px] transition-transform"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg> 228 <span class="font-medium text-white relative z-10">Return to Ada AI</span> 229 </a> 230 </div> 231 232 </div> 233 234 </body> 235 </html>