404.html (9498B)
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>Page Not Found | Veyrix IDE</title> 7 8 <link rel="icon" type="image/svg+xml" href="assets/veyrix.svg"> 9 <meta name="theme-color" content="#0a0f1a"> 10 11 <script src="https://cdn.tailwindcss.com"></script> 12 <script> 13 tailwind.config = { 14 darkMode: 'class', 15 theme: { 16 extend: { 17 colors: { 18 veyrix: { 19 bg: '#0a0f1a', 20 surface: '#121b2a', 21 border: '#1e293b', 22 accent: '#3b82f6', 23 accentHover: '#2563eb', 24 text: '#e2e8f0', 25 muted: '#94a3b8' 26 } 27 }, 28 animation: { 29 'float': 'float 6s ease-in-out infinite', 30 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', 31 'blink': 'blink 1s step-end infinite', 32 }, 33 keyframes: { 34 float: { 35 '0%, 100%': { transform: 'translateY(0)' }, 36 '50%': { transform: 'translateY(-15px)' }, 37 }, 38 blink: { 39 '0%, 100%': { opacity: '1' }, 40 '50%': { opacity: '0' }, 41 } 42 } 43 } 44 } 45 } 46 </script> 47 48 <style type="text/tailwindcss"> 49 * { -webkit-tap-highlight-color: transparent; } 50 :focus:not(:focus-visible) { outline: none; } 51 :focus-visible { 52 outline: 2px solid theme('colors.veyrix.accent'); 53 outline-offset: 2px; 54 border-radius: 4px; 55 } 56 57 .bg-blob { 58 position: absolute; 59 filter: blur(120px); 60 z-index: 0; 61 opacity: 0.15; 62 pointer-events: none; 63 border-radius: 50%; 64 background: theme('colors.veyrix.accent'); 65 animation: float 8s ease-in-out infinite, pulse-slow 6s infinite; 66 } 67 68 .reveal-1 { opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: 0.1s; } 69 .reveal-2 { opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: 0.2s; } 70 .reveal-3 { opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: 0.3s; } 71 .reveal-4 { opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: 0.4s; } 72 73 @keyframes fadeUp { 74 from { opacity: 0; transform: translateY(30px) scale(0.95); } 75 to { opacity: 1; transform: translateY(0) scale(1); } 76 } 77 78 .glass-footer { 79 background: rgba(18, 27, 42, 0.6); 80 backdrop-filter: blur(12px); 81 -webkit-backdrop-filter: blur(12px); 82 border-top: 1px solid theme('colors.veyrix.border'); 83 } 84 </style> 85 </head> 86 <body class="bg-veyrix-bg text-veyrix-text antialiased selection:bg-veyrix-accent/30 font-sans min-h-screen flex flex-col relative overflow-x-hidden"> 87 88 <!-- Header (Minimal) --> 89 <header class="fixed w-full top-0 h-14 bg-transparent z-40"> 90 <div class="max-w-7xl mx-auto h-full px-6 flex items-center"> 91 <a href="/" class="flex items-center gap-2.5 focus:outline-none rounded-lg focus-visible:ring-2 focus-visible:ring-veyrix-accent p-1 -ml-1 group"> 92 <img src="assets/veyrix.svg" alt="Veyrix Logo" class="w-10 h-10 opacity-100 group-hover:opacity-100 transition-opacity transform group-hover:scale-110 duration-300"> 93 <p class="reveal-2 text-2xl md:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-veyrix-muted mb-3 tracking-tight">Veyrix IDE</p> 94 </a> 95 </div> 96 </header> 97 98 <!-- Background Decoration --> 99 <div class="bg-blob w-80 h-80 top-1/4 left-1/4 -translate-x-1/2 -translate-y-1/2 bg-blue-600"></div> 100 <div class="bg-blob w-[30rem] h-[30rem] bottom-1/4 right-1/4 translate-x-1/3 translate-y-1/3 bg-purple-600" style="animation-delay: -3s;"></div> 101 102 <!-- Content --> 103 <main class="relative z-10 flex-1 flex flex-col items-center justify-center text-center px-5 w-full w-full"> 104 <div class="max-w-lg w-full"> 105 <div class="reveal-1 flex items-center justify-center gap-2 mb-2 font-mono text-[8rem] md:text-[10rem] font-black leading-none text-transparent bg-clip-text bg-gradient-to-b from-white to-veyrix-muted drop-shadow-2xl select-none animate-float"> 106 404 107 </div> 108 109 <h1 class="reveal-2 text-2xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-veyrix-muted mb-3 tracking-tight"> 110 Entity Not Found 111 </h1> 112 113 <p class="reveal-3 text-sm md:text-base text-veyrix-muted mb-10 max-w-sm mx-auto leading-relaxed"> 114 The file, path, or directory you're attempting to access has been moved, deleted, or never existed in this workspace. 115 </p> 116 117 <div class="reveal-4 flex flex-col sm:flex-row items-center justify-center gap-4"> 118 <a href="/" class="w-full sm:w-auto px-6 py-3 rounded-lg bg-veyrix-accent hover:bg-veyrix-accentHover text-white font-medium transition-all duration-300 hover:-translate-y-1 shadow-[0_0_20px_rgba(59,130,246,0.3)] hover:shadow-[0_8px_25px_rgba(59,130,246,0.5)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-veyrix-bg focus-visible:ring-veyrix-accent flex items-center justify-center gap-2 relative overflow-hidden group"> 119 <span class="absolute inset-0 w-full h-full -mt-1 rounded-lg opacity-30 bg-gradient-to-b from-transparent via-transparent to-black transition-opacity group-hover:opacity-0"></span> 120 <svg class="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg> 121 <span class="relative z-10">Return to IDE</span> 122 </a> 123 <a href="/docs" class="w-full sm:w-auto px-6 py-3 rounded-lg bg-veyrix-surface hover:bg-white/10 border border-veyrix-border text-veyrix-text hover:text-white font-medium transition-all duration-300 hover:-translate-y-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-veyrix-accent flex items-center justify-center gap-2 group"> 124 <svg class="w-4 h-4 text-veyrix-muted group-hover:text-veyrix-accent transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg> 125 Read Documentation 126 </a> 127 </div> 128 </div> 129 </main> 130 131 <!-- Global Footer --> 132 <footer class="relative z-20 glass-footer mt-12 py-10 px-6 text-sm border-t border-white/5"> 133 <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center md:items-start gap-10"> 134 135 <!-- Brand Section --> 136 <div class="flex flex-col items-center md:items-start gap-2"> 137 <div class="flex items-center gap-2"> 138 <img src="assets/veyrix.svg" alt="Veyrix Logo" class="w-6 h-6 grayscale opacity-70"> 139 <span class="font-bold text-white tracking-wide text-xl opacity-90">Veyrix</span> 140 </div> 141 <p class="text-xs text-veyrix-muted font-light tracking-wide">Code. Anywhere.</p> 142 </div> 143 144 <!-- Navigation Links --> 145 <nav class="flex flex-wrap justify-center gap-x-8 gap-y-4 text-veyrix-muted"> 146 <a href="/" class="hover:text-veyrix-accent transition-colors duration-200">Editor</a> 147 <a href="/docs" class="hover:text-veyrix-accent transition-colors duration-200">Documentation</a> 148 <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="hover:text-veyrix-accent transition-colors duration-200">GitHub</a> 149 <a href="https://amit.is-a.dev" target="_blank" rel="noopener noreferrer" class="hover:text-veyrix-accent transition-colors duration-200">Author</a> 150 </nav> 151 152 <!-- Copyright Section --> 153 <div class="text-xs text-veyrix-muted/60 text-center md:text-right leading-relaxed"> 154 <p>© <a href="https://amit.is-a.dev" target="_blank" rel="noopener noreferrer" class="hover:text-veyrix-accent hover:underline transition-colors">Amit Dutta</a>.</p> 155 <p>All rights reserved.</p> 156 </div> 157 </div> 158 </footer> 159 160 </body> 161 </html>