Spaces:

bhmyers
/

shadowweave-tactical

Running

App Files Files Community

bhmyers commited on 19 days ago

Commit

96ec784

verified ·

1 Parent(s): e51a80d

there needs to be more movement maybe a glitch effect across the entire page but only enough to be noticeable and not affect peoples experience

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +579 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Shadowweave Tactical
-emoji: 🏃
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ShadowWeave Tactical 👾
+colorFrom: gray
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,580 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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 !important;
+            }
+        }
+        .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>