index.html (46017B)
1 <!DOCTYPE html> 2 <html lang="en" class="scroll-smooth"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Veyrix IDE | Code. Anywhere. Anytime.</title> 7 8 <!-- Use Tailwind via CDN for styling to keep it single-file --> 9 <script src="https://cdn.tailwindcss.com"></script> 10 11 <!-- Configure Tailwind to match Veyrix Branding --> 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 fontFamily: { 29 sans: ['system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'], 30 mono: ['Fira Code', 'Consolas', 'Monaco', 'monospace'] 31 } 32 } 33 } 34 } 35 </script> 36 37 <style> 38 /* Base styles to prevent flash of unstyled content */ 39 body { 40 background-color: #0a0f1a; 41 color: #e2e8f0; 42 overflow-x: hidden; 43 } 44 45 /* Global Custom Scrollbar */ 46 ::-webkit-scrollbar { width: 10px; height: 10px; } 47 ::-webkit-scrollbar-track { background: #0a0f1a; border-left: 1px solid #1e293b; } 48 ::-webkit-scrollbar-thumb { background: #334155; border-radius: 5px; border: 2px solid #0a0f1a; } 49 ::-webkit-scrollbar-thumb:hover { background: #475569; } 50 51 /* Scroll Animation Classes */ 52 .scroll-trigger, .stagger-item { 53 opacity: 0; 54 transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); 55 } 56 57 .slide-left { transform: translateX(-80px); } 58 .slide-right { transform: translateX(80px); } 59 .slide-up { transform: translateY(50px); } 60 61 .in-view { 62 opacity: 1; 63 transform: translate(0, 0); 64 } 65 66 /* Typewriter Cursor */ 67 .cursor { 68 display: inline-block; 69 width: 8px; 70 height: 1.2em; 71 background-color: #e2e8f0; 72 vertical-align: middle; 73 animation: blink 1s step-end infinite; 74 margin-left: 2px; 75 } 76 77 @keyframes blink { 78 0%, 100% { opacity: 1; } 79 50% { opacity: 0; } 80 } 81 82 /* Mockup Window Styling */ 83 .mockup-window { 84 background: #0a0f1a; 85 border: 1px solid #1e293b; 86 border-radius: 0.5rem; 87 overflow: hidden; 88 } 89 90 .mockup-header { 91 background: #121b2a; 92 height: 32px; 93 display: flex; 94 align-items: center; 95 padding: 0 16px; 96 gap: 8px; 97 border-bottom: 1px solid #1e293b; 98 } 99 100 .mockup-dot { 101 width: 12px; 102 height: 12px; 103 border-radius: 50%; 104 } 105 106 /* Syntax Highlighting Colors */ 107 .kw { color: #c678dd; } /* Keyword - Purple */ 108 .fn { color: #61afef; } /* Function - Blue */ 109 .st { color: #98c379; } /* String - Green */ 110 .vr { color: #e5c07b; } /* Variable/Property - Yellow */ 111 .cm { color: #5c6370; font-style: italic; } /* Comment - Gray */ 112 .op { color: #56b6c2; } /* Operator - Cyan */ 113 .tg { color: #e06c75; } /* Tag - Red */ 114 115 /* Hide scrollbar for code blocks */ 116 .hide-scrollbar::-webkit-scrollbar { display: none; } 117 .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } 118 119 /* Render Style Static Hero Grid */ 120 .hero-bg { 121 position: relative; 122 background-color: #0a0f1a; 123 } 124 .hero-grid { 125 position: absolute; 126 inset: 0; 127 background-size: 48px 48px; 128 background-image: 129 linear-gradient(to right, rgba(255, 255, 255, 0.12) 1px, transparent 1px), 130 linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 1px, transparent 1px); 131 /* Half circle starting from version number and fading out */ 132 mask-image: radial-gradient(ellipse 80% 50% at 50% 30%, black 0%, transparent 100%); 133 -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 30%, black 0%, transparent 100%); 134 z-index: 0; 135 } 136 137 /* Bento Box Hover Effects */ 138 .bento-card { 139 transition: all 0.3s ease; 140 position: relative; 141 overflow: hidden; 142 } 143 .bento-card::before { 144 content: ''; 145 position: absolute; 146 top: 0; left: 0; right: 0; bottom: 0; 147 background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.04), transparent 40%); 148 z-index: 0; 149 pointer-events: none; 150 } 151 .bento-content { position: relative; z-index: 1; } 152 </style> 153 </head> 154 <body class="antialiased selection:bg-white/20 selection:text-white"> 155 156 <!-- Sticky Navigation --> 157 <header class="fixed w-full top-0 z-50 transition-all duration-300 bg-veyrix-bg/95 backdrop-blur-md border-b border-veyrix-border" id="navbar"> 158 <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"> 159 <a href="#" class="flex items-center gap-3 group relative z-10"> 160 <img src="assets/veyrix.svg" alt="Veyrix Logo" class="w-7 h-7"> 161 <span class="font-bold text-white text-xl tracking-tight">Veyrix</span> 162 </a> 163 <nav class="hidden md:flex items-center gap-2 relative z-10"> 164 <a class="group relative z-10 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap text-veyrix-muted transition-colors duration-300 hover:text-white px-4 py-2 text-sm font-medium rounded-md" href="#features"> 165 <span class="pointer-events-none absolute inset-0 z-0 block h-full w-full bg-white/10 transition-transform duration-300 origin-right scale-x-0 group-hover:origin-left group-hover:scale-x-100"></span> 166 <span class="relative z-10">Features</span> 167 </a> 168 <a class="group relative z-10 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap text-veyrix-muted transition-colors duration-300 hover:text-white px-4 py-2 text-sm font-medium rounded-md" href="#architecture"> 169 <span class="pointer-events-none absolute inset-0 z-0 block h-full w-full bg-white/10 transition-transform duration-300 origin-right scale-x-0 group-hover:origin-left group-hover:scale-x-100"></span> 170 <span class="relative z-10">Architecture</span> 171 </a> 172 <a class="group relative z-10 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap text-veyrix-muted transition-colors duration-300 hover:text-white px-4 py-2 text-sm font-medium rounded-md" href="/docs"> 173 <span class="pointer-events-none absolute inset-0 z-0 block h-full w-full bg-white/10 transition-transform duration-300 origin-right scale-x-0 group-hover:origin-left group-hover:scale-x-100"></span> 174 <span class="relative z-10">Documentation</span> 175 </a> 176 <a class="group relative z-10 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap text-veyrix-muted transition-colors duration-300 hover:text-white px-4 py-2 text-sm font-medium rounded-md" href="https://github.com/notamitgamer/veyrix" target="_blank"> 177 <span class="pointer-events-none absolute inset-0 z-0 block h-full w-full bg-white/10 transition-transform duration-300 origin-right scale-x-0 group-hover:origin-left group-hover:scale-x-100"></span> 178 <span class="relative z-10">GitHub</span> 179 </a> 180 </nav> 181 <div class="flex items-center gap-3 relative z-10"> 182 <!-- Header Button with Render.com slide animation --> 183 <a class="group relative z-10 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap bg-white text-black transition-colors duration-300 hover:text-white px-5 py-2 text-sm font-semibold rounded-md border border-transparent" href="/ide"> 184 <span class="pointer-events-none absolute inset-0 z-0 block h-full w-full bg-veyrix-accent transition-transform duration-300 origin-right scale-x-0 group-hover:origin-left group-hover:scale-x-100"></span> 185 <span class="relative z-10">Launch IDE</span> 186 </a> 187 </div> 188 </div> 189 </header> 190 191 <main class="relative z-10"> 192 193 <!-- Premium Hero Section (Lander) --> 194 <section class="hero-bg w-full min-h-[100dvh] flex flex-col items-center justify-center px-6 overflow-hidden"> 195 196 <!-- Static Background Grid --> 197 <div class="hero-grid pointer-events-none"></div> 198 199 <!-- Main Content --> 200 <div class="relative z-10 text-center flex flex-col items-center w-full max-w-5xl scroll-trigger slide-up mt-16 md:mt-0"> 201 <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-veyrix-surface border border-veyrix-border text-veyrix-muted text-xs font-mono font-medium mb-8"> 202 <span class="w-2 h-2 rounded-full bg-veyrix-accent"></span> 203 v1.1.0 Stable Release 204 </div> 205 206 <h1 class="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white tracking-tighter leading-tight mb-6 w-full"> 207 Code. <span class="text-veyrix-accent">Anywhere.</span> Anytime. 208 </h1> 209 210 <p class="text-lg md:text-xl text-veyrix-muted max-w-2xl mb-12 leading-relaxed font-medium"> 211 A blazing-fast, offline-first development environment that lives entirely in your browser. Zero setup, absolute privacy. 212 </p> 213 214 <div class="flex flex-col sm:flex-row flex-wrap gap-4 w-full sm:w-auto justify-center"> 215 <!-- Primary Button (White -> Blue fill) --> 216 <a class="group relative z-10 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap bg-white text-black transition-colors duration-300 hover:text-white h-14 md:h-[60px] text-base font-semibold px-8 rounded-md gap-3 border border-transparent" href="/ide"> 217 <span class="pointer-events-none absolute inset-0 z-0 block h-full w-full bg-veyrix-accent transition-transform duration-300 origin-right scale-x-0 group-hover:origin-left group-hover:scale-x-100"></span> 218 <span class="relative z-10 inline-block transition-transform duration-300 group-hover:-translate-x-1">Open Veyrix IDE</span> 219 <svg class="relative z-10 transition-transform duration-300 group-hover:translate-x-1" xmlns="http://www.w3.org/2000/svg" width="12" height="20" viewBox="0 0 12 20" fill="none"> 220 <rect x="8" y="8" width="4" height="4" fill="currentColor"></rect> 221 <rect x="4" y="4" width="4" height="4" fill="currentColor"></rect> 222 <rect width="4" height="4" fill="currentColor"></rect> 223 <rect x="4" y="12" width="4" height="4" fill="currentColor"></rect> 224 <rect y="16" width="4" height="4" fill="currentColor"></rect> 225 </svg> 226 </a> 227 <!-- Secondary Button (Transparent -> White fill) --> 228 <a class="group relative z-10 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap bg-transparent text-white transition-colors duration-300 hover:text-black h-14 md:h-[60px] text-base font-semibold px-8 rounded-md gap-3 border border-veyrix-border hover:border-transparent" href="/web"> 229 <span class="pointer-events-none absolute inset-0 z-0 block h-full w-full bg-white transition-transform duration-300 origin-right scale-x-0 group-hover:origin-left group-hover:scale-x-100"></span> 230 <span class="relative z-10 inline-block transition-transform duration-300 group-hover:-translate-x-1">Try Veyrix Web</span> 231 <svg class="relative z-10 transition-transform duration-300 group-hover:translate-x-1" xmlns="http://www.w3.org/2000/svg" width="12" height="20" viewBox="0 0 12 20" fill="none"> 232 <rect x="8" y="8" width="4" height="4" fill="currentColor"></rect> 233 <rect x="4" y="4" width="4" height="4" fill="currentColor"></rect> 234 <rect width="4" height="4" fill="currentColor"></rect> 235 <rect x="4" y="12" width="4" height="4" fill="currentColor"></rect> 236 <rect y="16" width="4" height="4" fill="currentColor"></rect> 237 </svg> 238 </a> 239 <!-- Tertiary Button (Transparent -> Purple fill) --> 240 <a class="group relative z-10 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap bg-transparent text-veyrix-muted transition-colors duration-300 hover:text-white h-14 md:h-[60px] text-base font-semibold px-8 rounded-md gap-3 border border-veyrix-border hover:border-transparent" href="/docs"> 241 <span class="pointer-events-none absolute inset-0 z-0 block h-full w-full bg-purple-600 transition-transform duration-300 origin-right scale-x-0 group-hover:origin-left group-hover:scale-x-100"></span> 242 <span class="relative z-10 inline-block transition-transform duration-300 group-hover:-translate-x-1">Read Documentation</span> 243 <svg class="relative z-10 transition-transform duration-300 group-hover:translate-x-1" xmlns="http://www.w3.org/2000/svg" width="12" height="20" viewBox="0 0 12 20" fill="none"> 244 <rect x="8" y="8" width="4" height="4" fill="currentColor"></rect> 245 <rect x="4" y="4" width="4" height="4" fill="currentColor"></rect> 246 <rect width="4" height="4" fill="currentColor"></rect> 247 <rect x="4" y="12" width="4" height="4" fill="currentColor"></rect> 248 <rect y="16" width="4" height="4" fill="currentColor"></rect> 249 </svg> 250 </a> 251 </div> 252 </div> 253 </section> 254 255 <!-- Metrics Dashboard --> 256 <section class="relative z-10 w-full bg-veyrix-surface border-y border-veyrix-border py-12 scroll-trigger slide-up" id="stats-section"> 257 <div class="max-w-5xl mx-auto px-6"> 258 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center divide-y md:divide-y-0 md:divide-x divide-veyrix-border"> 259 <div class="flex flex-col items-center justify-center pt-4 md:pt-0"> 260 <div class="text-4xl md:text-5xl font-bold text-white tracking-tight mb-2"> 261 < <span class="counter font-mono" data-target="50">0</span><span class="text-2xl text-veyrix-muted">ms</span> 262 </div> 263 <div class="text-xs font-bold text-veyrix-muted uppercase tracking-widest">Boot Time</div> 264 </div> 265 <div class="flex flex-col items-center justify-center pt-8 md:pt-0"> 266 <div class="text-4xl md:text-5xl font-bold text-white tracking-tight mb-2"> 267 <span class="counter font-mono" data-target="100">0</span><span class="text-2xl text-veyrix-muted">%</span> 268 </div> 269 <div class="text-xs font-bold text-veyrix-muted uppercase tracking-widest">Client-Side Architecture</div> 270 </div> 271 <div class="flex flex-col items-center justify-center pt-8 md:pt-0"> 272 <div class="text-4xl md:text-5xl font-bold text-white tracking-tight mb-2"> 273 <span class="counter font-mono" data-target="0">100</span><span class="text-2xl text-veyrix-muted">ms</span> 274 </div> 275 <div class="text-xs font-bold text-veyrix-muted uppercase tracking-widest">Server Latency</div> 276 </div> 277 </div> 278 </div> 279 </section> 280 281 <!-- Animated Scroll Section 1: Core IDE --> 282 <section id="features" class="max-w-7xl mx-auto px-6 py-32 overflow-hidden border-b border-veyrix-border"> 283 <div class="flex flex-col lg:flex-row items-center gap-16"> 284 <!-- Text: Left --> 285 <div class="flex-1 scroll-trigger slide-left space-y-6 stagger-container"> 286 <div class="w-12 h-12 rounded-lg bg-veyrix-surface flex items-center justify-center text-veyrix-text border border-veyrix-border"> 287 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg> 288 </div> 289 <h2 class="text-3xl md:text-4xl font-bold text-white tracking-tight">Veyrix IDE: Offline Persistence</h2> 290 <p class="text-veyrix-muted leading-relaxed text-lg"> 291 Bypass the cloud entirely. Veyrix saves your code directly to your device's native IndexedDB. Instant load times, zero latency, and fully capable of running without an internet connection as an installable PWA. 292 </p> 293 <ul class="space-y-4 pt-2 text-sm text-veyrix-muted font-medium"> 294 <li class="flex items-center gap-3 stagger-item slide-up"><div class="p-1 rounded bg-veyrix-surface border border-veyrix-border"><svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></div> Sub-second Time to Interactive</li> 295 <li class="flex items-center gap-3 stagger-item slide-up"><div class="p-1 rounded bg-veyrix-surface border border-veyrix-border"><svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></div> 5-Tier Snapshot Version History</li> 296 <li class="flex items-center gap-3 stagger-item slide-up"><div class="p-1 rounded bg-veyrix-surface border border-veyrix-border"><svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></div> <30MB Idle RAM Usage</li> 297 </ul> 298 </div> 299 <!-- Mockup: Right --> 300 <div class="flex-1 w-full scroll-trigger slide-right"> 301 <div class="mockup-window h-[400px] relative flex flex-col"> 302 <div class="mockup-header"> 303 <div class="flex gap-1.5"><div class="mockup-dot bg-veyrix-border"></div><div class="mockup-dot bg-veyrix-border"></div><div class="mockup-dot bg-veyrix-border"></div></div> 304 <div class="mx-auto text-[11px] text-veyrix-muted font-mono bg-veyrix-bg px-3 py-1 rounded border border-veyrix-border">app.js</div> 305 </div> 306 <div class="flex-1 p-3 md:p-5 overflow-y-auto hide-scrollbar bg-veyrix-bg relative text-[10px] sm:text-xs md:text-sm font-mono leading-relaxed whitespace-pre-wrap break-words" id="code-block-1"><span class="cursor"></span></div> 307 </div> 308 </div> 309 </div> 310 </section> 311 312 <!-- Animated Scroll Section 2: Veyrix Web --> 313 <section class="max-w-7xl mx-auto px-6 py-24 overflow-hidden border-b border-veyrix-border"> 314 <div class="flex flex-col-reverse lg:flex-row items-center gap-16"> 315 <!-- Mockup: Left --> 316 <div class="flex-1 w-full scroll-trigger slide-left"> 317 <div class="mockup-window h-[450px] relative flex flex-col"> 318 <div class="mockup-header"> 319 <div class="flex gap-1.5"><div class="mockup-dot bg-veyrix-border"></div><div class="mockup-dot bg-veyrix-border"></div><div class="mockup-dot bg-veyrix-border"></div></div> 320 <div class="ml-4 flex gap-4 text-[10px] font-mono font-bold text-veyrix-muted"> 321 <span class="text-white border-b border-white pb-1">index.html</span> 322 <span>style.css</span> 323 </div> 324 </div> 325 <div class="flex-1 flex overflow-hidden"> 326 <!-- Editor Pane --> 327 <div class="w-1/2 p-3 md:p-4 bg-veyrix-bg border-r border-veyrix-border text-[10px] sm:text-xs md:text-sm font-mono leading-relaxed whitespace-pre-wrap break-words relative overflow-y-auto hide-scrollbar" id="code-block-2"><span class="cursor"></span></div> 328 <!-- Live Preview Pane --> 329 <div class="w-1/2 bg-white relative flex flex-col items-center justify-center transition-colors duration-500" id="live-preview-pane"> 330 <h1 class="text-3xl font-bold text-black transition-all duration-300" id="live-preview-text"></h1> 331 </div> 332 </div> 333 </div> 334 </div> 335 <!-- Text: Right --> 336 <div class="flex-1 scroll-trigger slide-right space-y-6 stagger-container"> 337 <div class="w-12 h-12 rounded-lg bg-veyrix-surface flex items-center justify-center text-veyrix-text border border-veyrix-border"> 338 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg> 339 </div> 340 <h2 class="text-3xl md:text-4xl font-bold text-white tracking-tight">Veyrix Web: Advanced Engine</h2> 341 <p class="text-veyrix-muted leading-relaxed text-lg"> 342 Build complex web layouts with an isolated Virtual File System. Our custom AST parsing engine resolves relative imports on the fly, rendering live previews seamlessly inside an iframe without triggering network requests. 343 </p> 344 <ul class="space-y-4 pt-2 text-sm text-veyrix-muted font-medium"> 345 <li class="flex items-center gap-3 stagger-item slide-up"><div class="p-1 rounded bg-veyrix-surface border border-veyrix-border"><svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></div> Real-time DOM Updates</li> 346 <li class="flex items-center gap-3 stagger-item slide-up"><div class="p-1 rounded bg-veyrix-surface border border-veyrix-border"><svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></div> Full Folder Mapping Support</li> 347 <li class="flex items-center gap-3 stagger-item slide-up"><div class="p-1 rounded bg-veyrix-surface border border-veyrix-border"><svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></div> 1-Click ZIP Archive Export</li> 348 </ul> 349 </div> 350 </div> 351 </section> 352 353 <!-- Animated Scroll Section 3: Privacy --> 354 <section class="max-w-7xl mx-auto px-6 py-24 overflow-hidden border-b border-veyrix-border"> 355 <div class="flex flex-col lg:flex-row items-center gap-16"> 356 <!-- Text: Left --> 357 <div class="flex-1 scroll-trigger slide-left space-y-6"> 358 <div class="w-12 h-12 rounded-lg bg-veyrix-surface flex items-center justify-center text-veyrix-text border border-veyrix-border"> 359 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg> 360 </div> 361 <h2 class="text-3xl md:text-4xl font-bold text-white tracking-tight">Zero-Knowledge Security</h2> 362 <p class="text-veyrix-muted leading-relaxed text-lg"> 363 Sharing a file to the cloud? Passwords are never transmitted in plaintext. Veyrix utilizes the native Web Crypto API to generate SHA-256 hashes locally, ensuring strict zero-knowledge protection before data touches Firebase. 364 </p> 365 </div> 366 <!-- Mockup: Right --> 367 <div class="flex-1 w-full scroll-trigger slide-right"> 368 <div class="mockup-window h-[400px] relative flex flex-col"> 369 <div class="mockup-header border-b border-veyrix-border"> 370 <svg class="w-4 h-4 text-veyrix-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg> 371 <span class="text-xs font-mono text-veyrix-muted">security.ts</span> 372 </div> 373 <div class="flex-1 p-3 md:p-5 overflow-y-auto hide-scrollbar bg-veyrix-bg relative text-[10px] sm:text-xs md:text-sm font-mono leading-relaxed whitespace-pre-wrap break-words" id="code-block-3"><span class="cursor"></span></div> 374 </div> 375 </div> 376 </div> 377 </section> 378 379 <!-- The Architecture Grid --> 380 <section id="architecture" class="max-w-7xl mx-auto px-6 py-32"> 381 <div class="text-center mb-16 scroll-trigger slide-up"> 382 <h2 class="text-3xl md:text-4xl font-bold text-white mb-4 tracking-tight">Engineered for Performance</h2> 383 <p class="text-veyrix-muted max-w-2xl mx-auto">Veyrix bypasses bloated modern frameworks in favor of heavily optimized Vanilla JS and native browser APIs.</p> 384 </div> 385 386 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 scroll-trigger slide-up stagger-container"> 387 388 <!-- Bento Card 1: Virtual File System --> 389 <div class="bento-card bg-veyrix-surface border border-veyrix-border rounded-xl p-8 hover:border-veyrix-muted transition-colors stagger-item slide-up"> 390 <div class="bento-content"> 391 <div class="w-10 h-10 rounded-md bg-veyrix-bg border border-veyrix-border flex items-center justify-center text-white mb-6"> 392 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg> 393 </div> 394 <h3 class="text-lg font-bold text-white mb-3 tracking-tight">AST Parsing Engine</h3> 395 <p class="text-veyrix-muted text-sm leading-relaxed mb-6"> 396 Reads raw HTML, extracts relative paths, and resolves from the VFS into sandboxed Blobs. 397 </p> 398 </div> 399 </div> 400 401 <!-- Bento Card 2: Offline Native --> 402 <div class="bento-card bg-veyrix-surface border border-veyrix-border rounded-xl p-8 hover:border-veyrix-muted transition-colors stagger-item slide-up"> 403 <div class="bento-content"> 404 <div class="w-10 h-10 rounded-md bg-veyrix-bg border border-veyrix-border flex items-center justify-center text-white mb-6"> 405 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg> 406 </div> 407 <h3 class="text-lg font-bold text-white mb-3 tracking-tight">IndexedDB Storage</h3> 408 <p class="text-veyrix-muted text-sm leading-relaxed"> 409 Bypass standard limits utilizing asynchronous IndexedDB for megabytes of raw code storage. 410 </p> 411 </div> 412 </div> 413 414 <!-- Bento Card 3: Compression --> 415 <div class="bento-card bg-veyrix-surface border border-veyrix-border rounded-xl p-8 hover:border-veyrix-muted transition-colors stagger-item slide-up"> 416 <div class="bento-content"> 417 <div class="w-10 h-10 rounded-md bg-veyrix-bg border border-veyrix-border flex items-center justify-center text-white mb-6"> 418 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg> 419 </div> 420 <h3 class="text-lg font-bold text-white mb-3 tracking-tight">LZ-String Compression</h3> 421 <p class="text-veyrix-muted text-sm leading-relaxed"> 422 Rapid cloud sharing powered by the LZW algorithm cutting transmission bandwidth heavily. 423 </p> 424 </div> 425 </div> 426 </div> 427 </section> 428 429 </main> 430 431 <!-- Professional Global Footer --> 432 <footer class="border-t border-veyrix-border bg-[#0a0f1a] pt-16 pb-8"> 433 <div class="max-w-7xl mx-auto px-6"> 434 <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12"> 435 <div class="md:col-span-2"> 436 <a href="#" class="flex items-center gap-3 group mb-4 inline-flex"> 437 <img src="assets/veyrix.svg" alt="Veyrix Logo" class="w-8 h-8 grayscale opacity-80 group-hover:grayscale-0 group-hover:opacity-100 transition-all"> 438 <span class="font-bold text-white text-xl tracking-tight">Veyrix</span> 439 </a> 440 <p class="text-veyrix-muted text-sm leading-relaxed max-w-sm"> 441 A blazing-fast, offline-first development environment that lives entirely in your browser. Engineered for absolute privacy and maximum performance. 442 </p> 443 </div> 444 445 <div> 446 <h4 class="text-white font-semibold mb-4 tracking-tight">Product</h4> 447 <ul class="space-y-3 text-sm text-veyrix-muted"> 448 <li><a href="/ide" class="hover:text-white transition-colors">Veyrix IDE</a></li> 449 <li><a href="/web" class="hover:text-white transition-colors">Veyrix Web</a></li> 450 <li><a href="/docs" class="hover:text-white transition-colors">Documentation</a></li> 451 </ul> 452 </div> 453 454 <div> 455 <h4 class="text-white font-semibold mb-4 tracking-tight">Connect</h4> 456 <ul class="space-y-3 text-sm text-veyrix-muted"> 457 <li><a href="https://github.com/notamitgamer/veyrix" target="_blank" class="hover:text-white transition-colors flex items-center gap-1.5">GitHub Repository <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg></a></li> 458 <li><a href="https://github.com/notamitgamer" target="_blank" class="hover:text-white transition-colors flex items-center gap-1.5">Developer Profile <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg></a></li> 459 <li><a href="https://amit.is-a.dev" target="_blank" class="hover:text-white transition-colors flex items-center gap-1.5">Portfolio <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg></a></li> 460 </ul> 461 </div> 462 </div> 463 464 <div class="border-t border-veyrix-border pt-8 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-veyrix-muted"> 465 <p>Open Source • Apache 2.0 Licensed</p> 466 <p>Built with precision by <a href="https://amit.is-a.dev" target="_blank" class="text-white hover:underline font-medium">Amit Dutta</a> © 2026</p> 467 </div> 468 </div> 469 </footer> 470 471 <!-- INTERSECTION OBSERVER & TYPEWRITER ENGINE --> 472 <script> 473 // --- 1. Define Code Blocks with Syntax Highlighting Tokens --- 474 475 // Code Block 1: IndexedDB Persistence 476 const codeBlock1 = [ 477 { text: "// Initialize Storage\n", cls: "cm" }, 478 { text: "const ", cls: "kw" }, 479 { text: "DB ", cls: "vr" }, 480 { text: "= {\n", cls: "op" }, 481 { text: " save", cls: "fn" }, 482 { text: ": ", cls: "op" }, 483 { text: "async ", cls: "kw" }, 484 { text: "(file) => {\n", cls: "op" }, 485 { text: " const ", cls: "kw" }, 486 { text: "tx ", cls: "vr" }, 487 { text: "= state.db\n .", cls: "op" }, 488 { text: "transaction", cls: "fn" }, 489 { text: "(\n ", cls: "op" }, 490 { text: "'files'", cls: "st" }, 491 { text: ",\n ", cls: "op" }, 492 { text: "'readwrite'", cls: "st" }, 493 { text: "\n );\n\n", cls: "op" }, 494 { text: " file.lastModified = Date.", cls: "op" }, 495 { text: "now", cls: "fn" }, 496 { text: "();\n\n", cls: "op" }, 497 { text: " await ", cls: "kw" }, 498 { text: "tx.", cls: "op" }, 499 { text: "objectStore", cls: "fn" }, 500 { text: "(", cls: "op" }, 501 { text: "'files'", cls: "st" }, 502 { text: ")\n .", cls: "op" }, 503 { text: "put", cls: "fn" }, 504 { text: "(file);\n", cls: "op" }, 505 { text: " }\n};\n", cls: "op" }, 506 { text: "DB.", cls: "op" }, 507 { text: "save", cls: "fn" }, 508 { text: "(activeFile);", cls: "op" } 509 ]; 510 511 // Code Block 2: Veyrix Web Interactive Simulation 512 const codeBlock2 = [ 513 { text: "<", cls: "op" }, 514 { text: "h1", cls: "tg" }, 515 { text: ">\n", cls: "op" }, 516 { text: " Hello Veyrix\n", cls: "text-white", action: () => document.getElementById('live-preview-text').innerText = "Hello Veyrix" }, 517 { text: "</", cls: "op" }, 518 { text: "h1", cls: "tg" }, 519 { text: ">\n\n", cls: "op" }, 520 { text: "<", cls: "op" }, 521 { text: "style", cls: "tg" }, 522 { text: ">\n", cls: "op" }, 523 { text: " h1 ", cls: "vr" }, 524 { text: "{\n ", cls: "op" }, 525 { text: "color", cls: "fn" }, 526 { text: ": ", cls: "op" }, 527 { text: "#000000", cls: "st", action: () => document.getElementById('live-preview-text').style.color = "#000000" }, 528 { text: ";\n ", cls: "op" }, 529 { text: "font-family", cls: "fn" }, 530 { text: ": ", cls: "op" }, 531 { text: "sans-serif", cls: "st", action: () => document.getElementById('live-preview-text').style.fontFamily = "sans-serif" }, 532 { text: ";\n }\n", cls: "op" }, 533 { text: " body ", cls: "vr" }, 534 { text: "{\n ", cls: "op" }, 535 { text: "background", cls: "fn" }, 536 { text: ": ", cls: "op" }, 537 { text: "#f8fafc", cls: "st", action: () => document.getElementById('live-preview-pane').style.backgroundColor = "#f8fafc" }, 538 { text: ";\n }\n", cls: "op" }, 539 { text: "</", cls: "op" }, 540 { text: "style", cls: "tg" }, 541 { text: ">\n", cls: "op" } 542 ]; 543 544 // Code Block 3: Security Hash 545 const codeBlock3 = [ 546 { text: "async function ", cls: "kw" }, 547 { text: "hashPassword", cls: "fn" }, 548 { text: "(pwd) {\n", cls: "op" }, 549 { text: " const ", cls: "kw" }, 550 { text: "msg ", cls: "vr" }, 551 { text: "= new ", cls: "kw" }, 552 { text: "TextEncoder", cls: "vr" }, 553 { text: "()\n .", cls: "op" }, 554 { text: "encode", cls: "fn" }, 555 { text: "(pwd);\n\n", cls: "op" }, 556 { text: " // Local device hash\n", cls: "cm" }, 557 { text: " const ", cls: "kw" }, 558 { text: "hash ", cls: "vr" }, 559 { text: "= await ", cls: "kw" }, 560 { text: "crypto.subtle\n .", cls: "op" }, 561 { text: "digest", cls: "fn" }, 562 { text: "(\n ", cls: "op" }, 563 { text: "'SHA-256'", cls: "st" }, 564 { text: ",\n msg\n );\n\n", cls: "op" }, 565 { text: " const ", cls: "kw" }, 566 { text: "arr ", cls: "vr" }, 567 { text: "= Array.", cls: "op" }, 568 { text: "from", cls: "fn" }, 569 { text: "(\n new ", cls: "kw" }, 570 { text: "Uint8Array", cls: "vr" }, 571 { text: "(hash)\n );\n\n", cls: "op" }, 572 { text: " return ", cls: "kw" }, 573 { text: "arr\n .", cls: "op" }, 574 { text: "map", cls: "fn" }, 575 { text: "(b => \n b.", cls: "op" }, 576 { text: "toString", cls: "fn" }, 577 { text: "(16)\n )\n .", cls: "op" }, 578 { text: "join", cls: "fn" }, 579 { text: "(", cls: "op" }, 580 { text: "''", cls: "st" }, 581 { text: ");\n", cls: "op" }, 582 { text: "}", cls: "op" } 583 ]; 584 585 // --- 2. Typewriter Engine --- 586 async function typeWriter(containerId, tokenArray) { 587 const container = document.getElementById(containerId); 588 const cursor = container.querySelector('.cursor'); 589 590 // Utility to simulate typing delay 591 const sleep = (ms) => new Promise(r => setTimeout(r, ms)); 592 593 for (let token of tokenArray) { 594 // Create a span for the syntax token 595 const span = document.createElement('span'); 596 span.className = token.cls; 597 container.insertBefore(span, cursor); 598 599 // Type character by character 600 for (let i = 0; i < token.text.length; i++) { 601 span.textContent += token.text[i]; 602 603 // Trigger interactive actions if defined (on the last character) 604 if (token.action && i === token.text.length - 1) { 605 token.action(); 606 } 607 608 // Auto-scroll so cursor is always visible 609 container.scrollTop = container.scrollHeight; 610 611 // Variable typing speeds 612 let delay = Math.random() * 20 + 10; // Fast typing 613 if (token.text[i] === '\n') delay = 150; // Pause at line breaks 614 await sleep(delay); 615 } 616 } 617 } 618 619 // --- 3. Stat Counter Engine --- 620 function runCounters(container) { 621 const counters = container.querySelectorAll('.counter'); 622 counters.forEach(counter => { 623 const target = +counter.getAttribute('data-target'); 624 const duration = 1000; // 2 seconds 625 const increment = target / (duration / 16); // 60fps 626 627 let current = target === 0 ? 100 : 0; // If target is 0, start at 100 and go down 628 const isDecrement = target === 0; 629 630 const updateCounter = () => { 631 if (isDecrement) { 632 current -= (100 / (duration / 16)); 633 if (current > target) { 634 counter.innerText = Math.ceil(current); 635 requestAnimationFrame(updateCounter); 636 } else { 637 counter.innerText = target; 638 } 639 } else { 640 current += increment; 641 if (current < target) { 642 counter.innerText = Math.ceil(current); 643 requestAnimationFrame(updateCounter); 644 } else { 645 counter.innerText = target; 646 } 647 } 648 }; 649 updateCounter(); 650 }); 651 } 652 653 // --- 4. Intersection Observer Setup --- 654 const observerOptions = { 655 root: null, 656 rootMargin: '0px', 657 threshold: 0.25 // Trigger when 25% visible 658 }; 659 660 const scrollObserver = new IntersectionObserver((entries, observer) => { 661 entries.forEach(entry => { 662 if (entry.isIntersecting) { 663 const el = entry.target; 664 665 // Slide animation classes 666 el.classList.add('in-view'); 667 668 // Trigger Stat Counters 669 if (el.id === 'stats-section' && el.dataset.counted !== "true") { 670 el.dataset.counted = "true"; 671 runCounters(el); 672 } 673 674 // Trigger Staggered List Items 675 if (el.classList.contains('stagger-container') && el.dataset.staggered !== "true") { 676 el.dataset.staggered = "true"; 677 const items = el.querySelectorAll('.stagger-item'); 678 items.forEach((item, index) => { 679 setTimeout(() => { 680 item.classList.add('in-view'); 681 }, index * 200); // 200ms delay between items 682 }); 683 } 684 685 // Trigger Typewriter if it has an ID and hasn't run yet 686 const id = el.id; 687 if (el.dataset.typed !== "true") { 688 if (id === 'code-block-1') { 689 el.dataset.typed = "true"; 690 setTimeout(() => typeWriter(id, codeBlock1), 400); // Wait for slide animation 691 } else if (id === 'code-block-2') { 692 el.dataset.typed = "true"; 693 setTimeout(() => typeWriter(id, codeBlock2), 400); 694 } else if (id === 'code-block-3') { 695 el.dataset.typed = "true"; 696 setTimeout(() => typeWriter(id, codeBlock3), 400); 697 } 698 } 699 } 700 }); 701 }, observerOptions); 702 703 // --- 5. Initializers --- 704 document.addEventListener('DOMContentLoaded', () => { 705 // Observe animations 706 document.querySelectorAll('.scroll-trigger, #code-block-1, #code-block-2, #code-block-3').forEach(el => { 707 scrollObserver.observe(el); 708 }); 709 710 // Bento Box Hover Effect Logic 711 document.querySelectorAll('.bento-card').forEach(card => { 712 card.addEventListener('mousemove', e => { 713 const rect = card.getBoundingClientRect(); 714 const x = e.clientX - rect.left; 715 const y = e.clientY - rect.top; 716 card.style.setProperty('--mouse-x', `${x}px`); 717 card.style.setProperty('--mouse-y', `${y}px`); 718 }); 719 }); 720 }); 721 722 </script> 723 </body> 724 </html>