Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>64K Demo</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| body { | |
| overflow: hidden; | |
| margin: 0; | |
| font-family: 'Courier New', monospace; | |
| } | |
| #vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .demo-text { | |
| text-shadow: 0 0 10px rgba(0,255,255,0.7); | |
| font-weight: bold; | |
| } | |
| .scanlines { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| rgba(0, 0, 0, 0.1) 50%, | |
| rgba(0, 0, 0, 0.25) 50% | |
| ); | |
| background-size: 100% 4px; | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| .glitch { | |
| animation: glitch 1s linear infinite; | |
| } | |
| @keyframes glitch { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-2px, 2px); } | |
| 40% { transform: translate(-2px, -2px); } | |
| 60% { transform: translate(2px, 2px); } | |
| 80% { transform: translate(2px, -2px); } | |
| 100% { transform: translate(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-cyan-400"> | |
| <div id="vanta-bg"></div> | |
| <div class="scanlines"></div> | |
| <div class="container mx-auto px-4 h-screen flex flex-col justify-center items-center"> | |
| <div class="text-center mb-16"> | |
| <h1 class="demo-text text-6xl md:text-8xl font-mono mb-4 glitch">64K INTRO</h1> | |
| <p class="demo-text text-xl md:text-2xl font-mono">PUSHING THE LIMITS OF THE WEB</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-4xl"> | |
| <div class="demo-card p-6 border border-cyan-400 rounded-lg backdrop-blur-sm bg-black bg-opacity-40"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="cpu" class="mr-2"></i> | |
| <h3 class="text-2xl font-mono">TECH</h3> | |
| </div> | |
| <p class="font-mono">WebGL + Three.js rendering with procedural generation and real-time effects.</p> | |
| </div> | |
| <div class="demo-card p-6 border border-cyan-400 rounded-lg backdrop-blur-sm bg-black bg-opacity-40"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="code" class="mr-2"></i> | |
| <h3 class="text-2xl font-mono">CODE</h3> | |
| </div> | |
| <p class="font-mono">Optimized JavaScript under 64KB with advanced compression techniques.</p> | |
| </div> | |
| <div class="demo-card p-6 border border-cyan-400 rounded-lg backdrop-blur-sm bg-black bg-opacity-40"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="music" class="mr-2"></i> | |
| <h3 class="text-2xl font-mono">AUDIO</h3> | |
| </div> | |
| <p class="font-mono">Procedural music generation with WebAudio API in minimal footprint.</p> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <button id="start-demo" class="px-8 py-3 border-2 border-cyan-400 rounded-full font-mono text-xl hover:bg-cyan-400 hover:text-black transition-all duration-300"> | |
| START DEMO | |
| </button> | |
| <div class="mt-4 text-sm font-mono opacity-70"> | |
| <p>PRESS ANY KEY TO TOGGLE EFFECTS</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 left-0 right-0 text-center font-mono text-sm opacity-70"> | |
| <p>DEMOGROUP.PARTY © 2023</p> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js globe | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x00ffff, | |
| backgroundColor: 0x0, | |
| size: 0.8 | |
| }); | |
| // Demo controls | |
| document.getElementById('start-demo').addEventListener('click', function() { | |
| this.textContent = 'SYSTEM OVERLOAD'; | |
| this.classList.add('animate-pulse'); | |
| // Add more intense effects | |
| document.querySelector('h1').style.animation = 'glitch 0.5s linear infinite'; | |
| document.body.style.filter = 'contrast(120%) brightness(120%)'; | |
| // Change Vanta.js params for more intensity | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| color: 0xff00ff, | |
| size: 1.2, | |
| speed: 2.0 | |
| }); | |
| }); | |
| // Keyboard controls | |
| document.addEventListener('keydown', function() { | |
| document.body.classList.toggle('invert'); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |