Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HEXA MODULARIZER | CodeWizard</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Share+Tech+Mono&display=swap'); | |
| body { | |
| font-family: 'Share Tech Mono', monospace; | |
| background-color: #0f0f23; | |
| color: #00ff41; | |
| overflow-x: hidden; | |
| } | |
| .matrix-text { | |
| font-family: 'Major Mono Display', monospace; | |
| text-shadow: 0 0 5px #00ff41, 0 0 10px #00ff41; | |
| } | |
| .hexa-card { | |
| background: rgba(0, 0, 0, 0.7); | |
| border: 1px solid #00ff41; | |
| box-shadow: 0 0 15px #00ff41; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hexa-card:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 0 30px #00ff41; | |
| } | |
| .hexa-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| rgba(0, 255, 65, 0.1), | |
| rgba(0, 255, 65, 0.05), | |
| transparent | |
| ); | |
| transform: rotate(30deg); | |
| animation: shine 3s infinite; | |
| } | |
| @keyframes shine { | |
| 0% { transform: rotate(30deg) translate(-30%, -30%); } | |
| 100% { transform: rotate(30deg) translate(30%, 30%); } | |
| } | |
| .neon-btn { | |
| background: transparent; | |
| border: 2px solid #00ff41; | |
| color: #00ff41; | |
| text-shadow: 0 0 5px #00ff41; | |
| box-shadow: 0 0 10px #00ff41; | |
| transition: all 0.3s ease; | |
| } | |
| .neon-btn:hover { | |
| background: #00ff41; | |
| color: black; | |
| box-shadow: 0 0 20px #00ff41; | |
| } | |
| @keyframes flicker { | |
| 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { | |
| opacity: 1; | |
| } | |
| 20%, 22%, 24%, 55% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .flicker { | |
| animation: flicker 3s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="py-6 px-6 md:px-12 flex justify-between items-center border-b border-green-500/20"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="hexagon" class="text-green-500"></i> | |
| <span class="text-xl font-bold matrix-text">SUPERAGENT/FACTORY</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="hover:text-green-400 transition matrix-text">MAINFRAME</a> | |
| <a href="quantum.html" class="hover:text-green-400 transition matrix-text">QUANTUM</a> | |
| <a href="visual.html" class="hover:text-green-400 transition matrix-text">VISUAL</a> | |
| <a href="game.html" class="hover:text-green-400 transition matrix-text">GAME</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="container mx-auto px-6 md:px-12 py-20 text-center"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 matrix-text flicker"> | |
| <span class="text-green-500">SUPERAGENT</span><span class="text-white">:</span><span class="text-green-500">FACTORY</span> | |
| </h1> | |
| <p class="text-xl text-green-300 mb-10 max-w-3xl mx-auto matrix-text"> | |
| NEURAL FOUNDRY FOR BREEDING NEXT-GEN AI SUPERAGENTS | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-6"> | |
| <button class="px-8 py-4 rounded-none neon-btn matrix-text"> | |
| INITIALIZE AGENTS | |
| </button> | |
| <button class="px-8 py-4 rounded-none neon-btn matrix-text"> | |
| SCAN DEVICES | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Hexa Grid --> | |
| <div class="container mx-auto px-6 md:px-12 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Module 1 --> | |
| <div class="hexa-card p-8"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="w-20 h-20 border-2 border-green-500 rotate-45 flex items-center justify-center"> | |
| <i data-feather="brain" class="text-green-500 w-10 h-10 -rotate-45"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold text-center mb-4 text-green-500 matrix-text">NEURAL.FORGE</h3> | |
| <p class="text-green-300 mb-6 text-center matrix-text"> | |
| GENERATIVE AI AGENT BREEDING ENGINE | |
| </p> | |
| <button class="w-full py-3 rounded-none neon-btn matrix-text"> | |
| INITIATE BREEDING | |
| </button> | |
| </div> | |
| <!-- Module 2 --> | |
| <div class="hexa-card p-8"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="w-20 h-20 border-2 border-green-500 rotate-45 flex items-center justify-center"> | |
| <i data-feather="layers" class="text-green-500 w-10 h-10 -rotate-45"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold text-center mb-4 text-green-500 matrix-text">HYPERNET</h3> | |
| <p class="text-green-300 mb-6 text-center matrix-text"> | |
| MULTI-MODAL NEURAL ARCHITECTURE | |
| </p> | |
| <button class="w-full py-3 rounded-none neon-btn matrix-text"> | |
| DESIGN AGENT | |
| </button> | |
| </div> | |
| <!-- Module 3 --> | |
| <div class="hexa-card p-8"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="w-20 h-20 border-2 border-green-500 rotate-45 flex items-center justify-center"> | |
| <i data-feather="zap" class="text-green-500 w-10 h-10 -rotate-45"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold text-center mb-4 text-green-500 matrix-text">QUANTUM.COGNITION</h3> | |
| <p class="text-green-300 mb-6 text-center matrix-text"> | |
| POST-HUMAN INTELLIGENCE ACCELERATOR | |
| </p> | |
| <button class="w-full py-3 rounded-none neon-btn matrix-text"> | |
| ACTIVATE SUPERAGENT | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hexa Terminal --> | |
| <div class="container mx-auto px-6 md:px-12 py-12 max-w-5xl"> | |
| <div class="hexa-card p-8"> | |
| <div class="flex mb-6"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="font-mono text-green-400"> | |
| <div class="mb-4"> | |
| <span class="text-green-500">HEXA></span> | |
| <span class="text-white ml-2">init --all --protocol=multi-device</span> | |
| </div> | |
| <div class="mb-2 text-green-300">> SCANNING NEURAL ARCHITECTURES...</div> | |
| <div class="mb-2 text-green-300">> FOUND 247 POTENTIAL SUPERAGENTS</div> | |
| <div class="mb-2 text-green-500">> INITIALIZING QUANTUM COGNITION MATRIX</div> | |
| <div class="mb-4 text-green-300">> READY FOR POST-HUMAN INTELLIGENCE BREEDING</div> | |
| <div> | |
| <span class="text-green-500">HEXA></span> | |
| <span class="text-white ml-2 border-b border-green-500 inline-block min-w-[50%]">_</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="py-12 px-6 md:px-12 border-t border-green-500/20 mt-20"> | |
| <div class="container mx-auto text-center"> | |
| <p class="text-green-500/80 matrix-text">© 2023 SUPERAGENT FACTORY - ALL INTELLIGENCE LEVELS EXCEEDED</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize feather icons | |
| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| }); | |
| // Terminal typing effect | |
| const hexaCommands = [ | |
| "breed --type=super --parents=7", | |
| "simulate --consciousness=quantum", | |
| "optimize --neural=hyper", | |
| "deploy --reality=augmented" | |
| ]; | |
| let currentCommand = 0; | |
| function rotateCommand() { | |
| const terminal = document.querySelector('.hexa-card .font-mono div:last-child span:last-child'); | |
| terminal.textContent = hexaCommands[currentCommand]; | |
| currentCommand = (currentCommand + 1) % hexaCommands.length; | |
| setTimeout(rotateCommand, 3000); | |
| } | |
| setTimeout(rotateCommand, 3000); | |
| </script> | |
| </body> | |
| </html> |