Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BLACK HYMN | Covert Apparel Division</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| :root { | |
| --bg: #0A0B0D; | |
| --fg: #E6EAEE; | |
| --accent: #67E8F9; | |
| --accent-2: #22D3EE; | |
| --chrome: rgba(255, 255, 255, 0.06); | |
| } | |
| body { | |
| background-color: var(--bg); | |
| color: var(--fg); | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .scanlines { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px); | |
| background-size: 100% 3px; | |
| pointer-events: none; | |
| opacity: 0.2; | |
| z-index: 999; | |
| mix-blend-mode: overlay; | |
| } | |
| .grid-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(to right, var(--chrome) 1px, transparent 1px), | |
| linear-gradient(to bottom, var(--chrome) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| pointer-events: none; | |
| opacity: 0.1; | |
| z-index: 998; | |
| } | |
| .glow-hover:hover { | |
| box-shadow: 0 0 15px rgba(103, 232, 249, 0.3); | |
| } | |
| .product-card:hover .product-overlay { | |
| opacity: 1; | |
| } | |
| @media (prefers-reduced-motion) { | |
| .pulse-slow, .glitch-text { | |
| animation: none ; | |
| } | |
| } | |
| .glitch-effect { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); | |
| background-size: 100% 2px; | |
| pointer-events: none; | |
| opacity: 0; | |
| mix-blend-mode: overlay; | |
| animation: glitch-flicker 10s linear infinite; | |
| z-index: 1000; | |
| } | |
| @keyframes glitch-flicker { | |
| 0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { | |
| opacity: 0.1; | |
| } | |
| 20%, 21.999%, 63%, 63.999%, 65%, 69.999% { | |
| opacity: 0.3; | |
| } | |
| } | |
| .glitch-text { | |
| animation: glitch 8s linear infinite; | |
| } | |
| @keyframes glitch { | |
| 0%, 100% { | |
| transform: translate(0); | |
| text-shadow: none; | |
| } | |
| 20% { | |
| transform: translate(-2px, 2px); | |
| } | |
| 40% { | |
| transform: translate(-2px, -2px); | |
| } | |
| 60% { | |
| transform: translate(2px, 2px); | |
| } | |
| 80% { | |
| transform: translate(2px, -2px); | |
| } | |
| 95% { | |
| text-shadow: none; | |
| transform: translate(0); | |
| } | |
| 96% { | |
| text-shadow: -2px 0 var(--accent), 2px 0 var(--accent-2); | |
| transform: translate(-1px, 1px); | |
| } | |
| 97% { | |
| text-shadow: 2px 0 var(--accent), -2px 0 var(--accent-2); | |
| transform: translate(1px, -1px); | |
| } | |
| 98% { | |
| text-shadow: none; | |
| transform: translate(0); | |
| } | |
| } | |
| .pulse-slow { | |
| animation: pulse 8s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.8; } | |
| } | |
| .terminal-input { | |
| caret-color: var(--accent); | |
| border-left: 2px solid var(--accent); | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { border-color: transparent } | |
| 50% { border-color: var(--accent); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen relative"> | |
| <!-- HUD Overlays --> | |
| <div class="scanlines"></div> | |
| <div class="grid-overlay"></div> | |
| <div class="glitch-effect"></div> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-black bg-opacity-80 backdrop-blur-md border-b border-gray-900"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center py-4"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <span class="text-2xl font-bold tracking-tighter text-white"> | |
| <span class="text-accent">[</span>BLACK_HYMN<span class="text-accent">]</span> | |
| </span> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| <!-- Desktop Nav --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#gear" class="text-sm uppercase tracking-wider text-gray-300 hover:text-accent transition-colors">GEAR</a> | |
| <a href="#all" class="text-sm uppercase tracking-wider text-gray-300 hover:text-accent transition-colors">ALL</a> | |
| <a href="#cart" class="text-sm uppercase tracking-wider text-gray-300 hover:text-accent transition-colors flex items-center"> | |
| <i data-feather="shopping-cart" class="mr-1 w-4 h-4"></i> CART | |
| </a> | |
| <a href="#intel" class="text-sm uppercase tracking-wider text-gray-300 hover:text-accent transition-colors">INTEL</a> | |
| <a href="#about" class="text-sm uppercase tracking-wider text-gray-300 hover:text-accent transition-colors">ABOUT</a> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-90 border-t border-gray-800"> | |
| <div class="px-4 py-3 space-y-4"> | |
| <a href="#gear" class="block text-sm uppercase tracking-wider text-gray-300 hover:text-accent transition-colors">GEAR</a> | |
| <a href="#all" class="block text-sm uppercase tracking-wider text-gray-300 hover:text-accent transition-colors">ALL</a> | |
| <a href="#cart" class="block text-sm uppercase tracking-wider text-gray-300 hover:text-accent transition-colors flex items-center"> | |
| <i data-feather="shopping-cart" class="mr-2 w-4 h-4"></i> CART | |
| </a> | |
| <a href="#intel" class="block text-sm uppercase tracking-wider text-gray-300 hover:text-accent transition-colors">INTEL</a> | |
| <a href="#about" class="block text-sm uppercase tracking-wider text-gray-300 hover:text-accent transition-colors">ABOUT</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32"> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent via-black to-black opacity-70"></div> | |
| <div class="absolute inset-0 bg-noise opacity-5"></div> | |
| </div> | |
| <div class="relative z-10 text-center"> | |
| <span class="text-xs uppercase tracking-widest text-accent block mb-4 glitch-text">PROJECT BLACK HYMN</span> | |
| <h1 class="text-4xl md:text-6xl font-bold tracking-tight mb-6"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-accent to-accent-2">COVERT APPAREL DIVISION</span> | |
| </h1> | |
| <p class="max-w-2xl mx-auto text-lg md:text-xl text-gray-300 mb-8"> | |
| Encrypted access granted. Field-tested silhouettes. | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#gear" class="px-6 py-3 bg-gradient-to-r from-accent to-accent-2 text-black font-medium rounded-sm hover:opacity-90 transition-opacity"> | |
| ENTER SITE | |
| </a> | |
| <a href="#intel" class="px-6 py-3 border border-gray-700 text-gray-300 font-medium rounded-sm hover:border-accent hover:text-accent transition-all"> | |
| READ INTEL | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Terminal Panel --> | |
| <div class="mt-16 max-w-2xl mx-auto bg-black bg-opacity-50 border border-gray-800 rounded-sm p-4"> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex space-x-2 mr-3"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-xs text-gray-400">secure_terminal_interface</div> | |
| </div> | |
| <div class="font-mono text-sm text-gray-400 mb-2"> | |
| <div class="mb-1">> Initializing encrypted connection...</div> | |
| <div class="mb-1">> Handshake complete. Secure channel established.</div> | |
| <div class="mb-1">> Welcome, operative. Security clearance: BLACK</div> | |
| <div class="flex items-center"> | |
| <span class="text-accent mr-2">></span> | |
| <input type="text" class="terminal-input bg-transparent outline-none text-gray-300 w-full" placeholder="Enter command..."> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Collection --> | |
| <section id="gear" class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="flex justify-between items-center mb-12"> | |
| <h2 class="text-2xl md:text-3xl font-bold">FIELD GEAR</h2> | |
| <a href="#all" class="text-sm uppercase tracking-wider text-gray-300 hover:text-accent transition-colors flex items-center"> | |
| VIEW ALL <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product Card 1 --> | |
| <div class="product-card group relative border border-gray-800 rounded-sm overflow-hidden transition-all hover:border-accent glow-hover"> | |
| <div class="relative overflow-hidden"> | |
| <img src="http://static.photos/black/1024x576/1" alt="Stealth Jacket" class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-105"> | |
| <div class="product-overlay absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 transition-opacity duration-300 flex items-end p-6"> | |
| <button class="w-full py-2 bg-accent text-black font-medium text-sm uppercase tracking-wider hover:bg-accent-2 transition-colors"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-medium mb-1">STEALTH FIELD JACKET</h3> | |
| <p class="text-sm text-gray-400 mb-3">Thermal-cloak enabled outerwear</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">$298.00</span> | |
| <span class="text-xs uppercase tracking-wider text-accent">IN STOCK</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 2 --> | |
| <div class="product-card group relative border border-gray-800 rounded-sm overflow-hidden transition-all hover:border-accent glow-hover"> | |
| <div class="relative overflow-hidden"> | |
| <img src="http://static.photos/black/1024x576/2" alt="Tactical Boots" class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-105"> | |
| <div class="product-overlay absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 transition-opacity duration-300 flex items-end p-6"> | |
| <button class="w-full py-2 bg-accent text-black font-medium text-sm uppercase tracking-wider hover:bg-accent-2 transition-colors"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-medium mb-1">TACTICAL ASSAULT BOOTS</h3> | |
| <p class="text-sm text-gray-400 mb-3">Urban/field hybrid footwear</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">$245.00</span> | |
| <span class="text-xs uppercase tracking-wider text-accent">IN STOCK</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 3 --> | |
| <div class="product-card group relative border border-gray-800 rounded-sm overflow-hidden transition-all hover:border-accent glow-hover"> | |
| <div class="relative overflow-hidden"> | |
| <img src="http://static.photos/black/1024x576/3" alt="Utility Pants" class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-105"> | |
| <div class="product-overlay absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 transition-opacity duration-300 flex items-end p-6"> | |
| <button class="w-full py-2 bg-accent text-black font-medium text-sm uppercase tracking-wider hover:bg-accent-2 transition-colors"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-medium mb-1">MODULAR UTILITY PANTS</h3> | |
| <p class="text-sm text-gray-400 mb-3">12-pocket tactical design</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">$175.00</span> | |
| <span class="text-xs uppercase tracking-wider text-yellow-400">LOW STOCK</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Intel/Blog Section --> | |
| <section id="intel" class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16 bg-black bg-opacity-30 border-y border-gray-800"> | |
| <div class="flex justify-between items-center mb-12"> | |
| <h2 class="text-2xl md:text-3xl font-bold">LATEST INTEL</h2> | |
| <a href="#intel" class="text-sm uppercase tracking-wider text-gray-300 hover:text-accent transition-colors flex items-center"> | |
| VIEW ALL <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Blog Card 1 --> | |
| <a href="#" class="group border border-gray-800 rounded-sm overflow-hidden transition-all hover:border-accent"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/1024x576/1" alt="Tech Blog" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-xs uppercase tracking-widest text-accent block mb-2">FIELD REPORT</span> | |
| <h3 class="text-lg font-medium mb-2">ADVANCED MATERIALS IN URBAN ENVIRONMENTS</h3> | |
| <p class="text-sm text-gray-400 mb-4">Testing next-gen fabric technologies under extreme conditions.</p> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <span>READ TIME: 5 MIN</span> | |
| <span class="mx-2">•</span> | |
| <span>03.24.2023</span> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Blog Card 2 --> | |
| <a href="#" class="group border border-gray-800 rounded-sm overflow-hidden transition-all hover:border-accent"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/1024x576/2" alt="Tech Blog" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-xs uppercase tracking-widest text-accent block mb-2">DESIGN NOTES</span> | |
| <h3 class="text-lg font-medium mb-2">THE EVOLUTION OF COVERT SILHOUETTES</h3> | |
| <p class="text-sm text-gray-400 mb-4">How tactical aesthetics influence mainstream fashion.</p> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <span>READ TIME: 8 MIN</span> | |
| <span class="mx-2">•</span> | |
| <span>02.15.2023</span> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Blog Card 3 --> | |
| <a href="#" class="group border border-gray-800 rounded-sm overflow-hidden transition-all hover:border-accent"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/1024x576/3" alt="Tech Blog" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-xs uppercase tracking-widest text-accent block mb-2">OPERATIONAL BRIEF</span> | |
| <h3 class="text-lg font-medium mb-2">EXTREME WEATHER TESTING PROTOCOLS</h3> | |
| <p class="text-sm text-gray-400 mb-4">Pushing gear to its limits in Arctic and desert conditions.</p> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <span>READ TIME: 6 MIN</span> | |
| <span class="mx-2">•</span> | |
| <span>01.08.2023</span> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="border border-gray-800 rounded-sm p-8 md:p-12 text-center"> | |
| <span class="text-xs uppercase tracking-widest text-accent block mb-4">SECURE CHANNEL</span> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4">RECEIVE OPERATIONAL UPDATES</h2> | |
| <p class="max-w-2xl mx-auto text-gray-400 mb-8">Encrypted monthly briefings on new drops, field tests, and experimental prototypes.</p> | |
| <form class="max-w-md mx-auto"> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <input type="email" placeholder="OPERATIVE@DOMAIN.COM" class="flex-grow px-4 py-3 bg-black bg-opacity-50 border border-gray-700 text-gray-300 focus:border-accent focus:outline-none"> | |
| <button type="submit" class="px-6 py-3 bg-gradient-to-r from-accent to-accent-2 text-black font-medium hover:opacity-90 transition-opacity"> | |
| SUBSCRIBE | |
| </button> | |
| </div> | |
| <p class="mt-3 text-xs text-gray-500">Secure transmission. No spam. Unsubscribe anytime.</p> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black bg-opacity-80 border-t border-gray-900"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm uppercase tracking-wider text-gray-300 mb-4">NAVIGATION</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Gear</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Collections</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Intel</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">About</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm uppercase tracking-wider text-gray-300 mb-4">SUPPORT</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Shipping</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Returns</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm uppercase tracking-wider text-gray-300 mb-4">LEGAL</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Terms</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Privacy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition-colors">Cookies</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm uppercase tracking-wider text-gray-300 mb-4">CONNECT</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-accent transition-colors"><i data-feather="instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-accent transition-colors"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-accent transition-colors"><i data-feather="youtube"></i></a> | |
| </div> | |
| <p class="text-xs text-gray-500">For secure communications only.</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="text-sm text-gray-400 mb-4 md:mb-0"> | |
| © 2023 BLACK HYMN. All rights reserved. | |
| </div> | |
| <div class="text-xs text-gray-500"> | |
| <span class="inline-block mx-2">|</span> | |
| <a href="#" class="hover:text-accent transition-colors">Encryption Status: Active</a> | |
| <span class="inline-block mx-2">|</span> | |
| <a href="#" class="hover:text-accent transition-colors">v2.3.7</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating Particles Canvas --> | |
| <canvas id="particles" class="fixed top-0 left-0 w-full h-full pointer-events-none opacity-20 z-0"></canvas> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| feather.replace(); | |
| }); | |
| // Particles Canvas | |
| const canvas = document.getElementById('particles'); | |
| const ctx = canvas.getContext('2d'); | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| const particles = []; | |
| const particleCount = window.innerWidth < 768 ? 30 : 60; | |
| class Particle { | |
| constructor() { | |
| this.x = Math.random() * canvas.width; | |
| this.y = Math.random() * canvas.height; | |
| this.size = Math.random() * 2 + 0.5; | |
| this.speedX = Math.random() * 1 - 0.5; | |
| this.speedY = Math.random() * 1 - 0.5; | |
| this.color = `rgba(103, 232, 249, ${Math.random() * 0.2 + 0.1})`; | |
| } | |
| update() { | |
| this.x += this.speedX; | |
| this.y += this.speedY; | |
| if (this.x > canvas.width || this.x < 0) this.speedX *= -1; | |
| if (this.y > canvas.height || this.y < 0) this.speedY *= -1; | |
| } | |
| draw() { | |
| ctx.fillStyle = this.color; | |
| ctx.beginPath(); | |
| ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); | |
| ctx.fill(); | |
| } | |
| } | |
| function initParticles() { | |
| for (let i = 0; i < particleCount; i++) { | |
| particles.push(new Particle()); | |
| } | |
| } | |
| function animateParticles() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| for (let i = 0; i < particles.length; i++) { | |
| particles[i].update(); | |
| particles[i].draw(); | |
| for (let j = i; j < particles.length; j++) { | |
| const dx = particles[i].x - particles[j].x; | |
| const dy = particles[i].y - particles[j].y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 100) { | |
| ctx.strokeStyle = `rgba(103, 232, 249, ${0.2 - distance / 500})`; | |
| ctx.lineWidth = 0.5; | |
| ctx.beginPath(); | |
| ctx.moveTo(particles[i].x, particles[i].y); | |
| ctx.lineTo(particles[j].x, particles[j].y); | |
| ctx.stroke(); | |
| } | |
| } | |
| } | |
| requestAnimationFrame(animateParticles); | |
| } | |
| window.addEventListener('resize', () => { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| }); | |
| // Initialize and animate | |
| initParticles(); | |
| animateParticles(); | |
| // Feather Icons | |
| feather.replace(); | |
| // Terminal Input Focus | |
| const terminalInput = document.querySelector('.terminal-input'); | |
| terminalInput.addEventListener('focus', () => { | |
| terminalInput.placeholder = ''; | |
| }); | |
| terminalInput.addEventListener('blur', () => { | |
| terminalInput.placeholder = 'Enter command...'; | |
| }); | |
| // Random subtle glitch effect on elements | |
| setInterval(() => { | |
| const randomElements = document.querySelectorAll('h1, h2, h3, p, a, button, .product-card'); | |
| randomElements.forEach(el => { | |
| if(Math.random() > 0.95) { | |
| el.style.transform = `translate(${Math.random() * 2 - 1}px, ${Math.random() * 2 - 1}px)`; | |
| setTimeout(() => { | |
| el.style.transform = 'translate(0)'; | |
| }, 100); | |
| } | |
| }); | |
| }, 300); | |
| </script> | |
| </body> | |
| </html> | |