Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CYBERPUNK 4041</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Press+Start+2P&display=swap'); | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| background-color: #0a0a12; | |
| color: #00ff9d; | |
| overflow-x: hidden; | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .glitch::before { | |
| color: #ff00aa; | |
| animation: glitch-effect 3s infinite; | |
| z-index: -2; | |
| } | |
| .glitch::after { | |
| color: #00f7ff; | |
| animation: glitch-effect 2s infinite reverse; | |
| z-index: -1; | |
| } | |
| @keyframes glitch-effect { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-3px, 3px); } | |
| 40% { transform: translate(-3px, -3px); } | |
| 60% { transform: translate(3px, 3px); } | |
| 80% { transform: translate(3px, -3px); } | |
| 100% { transform: translate(0); } | |
| } | |
| .scanlines { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| linear-gradient(rgba(0, 255, 157, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 255, 157, 0.03) 1px, transparent 1px); | |
| background-size: 3px 3px; | |
| pointer-events: none; | |
| z-index: 100; | |
| } | |
| .pixel-grid { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| linear-gradient(rgba(0, 255, 157, 0.01) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 255, 157, 0.01) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| pointer-events: none; | |
| z-index: 99; | |
| } | |
| .cyber-button { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| } | |
| .cyber-button:hover { | |
| transform: translate(-2px, -2px); | |
| box-shadow: 4px 4px 0 #ff00aa, 8px 8px 0 #00f7ff; | |
| } | |
| .cyber-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.4), transparent); | |
| transition: all 0.5s; | |
| } | |
| .cyber-button:hover::before { | |
| left: 100%; | |
| } | |
| .matrix-rain { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.1; | |
| } | |
| .hologram { | |
| animation: hologram-float 6s ease-in-out infinite; | |
| } | |
| @keyframes hologram-float { | |
| 0%, 100% { transform: translateY(0) rotate(0.5deg); } | |
| 50% { transform: translateY(-20px) rotate(-0.5deg); } | |
| } | |
| .hologram::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(transparent 65%, rgba(0, 255, 157, 0.2) 90%, transparent 95%); | |
| background-size: 100% 6px; | |
| animation: hologram-scan 4s linear infinite; | |
| pointer-events: none; | |
| } | |
| @keyframes hologram-scan { | |
| 0% { background-position: 0 -50px; } | |
| 100% { background-position: 0 0; } | |
| } | |
| .terminal-cursor::after { | |
| content: '▋'; | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .parallax-layer { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| will-change: transform; | |
| } | |
| .cyber-card { | |
| background: rgba(10, 10, 18, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(0, 255, 157, 0.3); | |
| box-shadow: 0 0 20px rgba(0, 255, 157, 0.1); | |
| transition: all 0.3s; | |
| } | |
| .cyber-card:hover { | |
| border-color: #ff00aa; | |
| box-shadow: 0 0 30px rgba(255, 0, 170, 0.3); | |
| transform: translateY(-5px); | |
| } | |
| .binary-rain { | |
| position: absolute; | |
| color: rgba(0, 255, 157, 0.7); | |
| font-family: 'Press Start 2P', cursive; | |
| font-size: 14px; | |
| writing-mode: vertical-rl; | |
| text-orientation: mixed; | |
| animation: binary-fall linear infinite; | |
| } | |
| @keyframes binary-fall { | |
| to { transform: translateY(100vh); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen relative"> | |
| <!-- Background elements --> | |
| <div class="matrix-rain" id="matrixRain"></div> | |
| <div class="scanlines"></div> | |
| <div class="pixel-grid"></div> | |
| <!-- Binary rain elements will be added by JS --> | |
| <!-- Main container --> | |
| <div class="container mx-auto px-4 py-12 relative z-10"> | |
| <!-- Header --> | |
| <header class="mb-16 text-center hologram"> | |
| <h1 class="glitch text-5xl md:text-8xl font-black mb-4" data-text="CYBERPUNK 4041"> | |
| CYBERPUNK 4041 | |
| </h1> | |
| <p class="text-xl md:text-2xl text-purple-300 font-light mb-8 terminal-cursor"> | |
| > SYSTEM INITIALIZED_ WELCOME TO THE FUTURE_ | |
| </p> | |
| <div class="flex justify-center space-x-6"> | |
| <button class="cyber-button bg-transparent border-2 border-cyan-400 text-cyan-400 px-8 py-3 font-bold tracking-wider"> | |
| <i class="fas fa-terminal mr-2"></i> ACCESS | |
| </button> | |
| <button class="cyber-button bg-transparent border-2 border-pink-500 text-pink-500 px-8 py-3 font-bold tracking-wider"> | |
| <i class="fas fa-biohazard mr-2"></i> OVERRIDE | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main content --> | |
| <main> | |
| <!-- Cyber grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> | |
| <!-- Card 1 --> | |
| <div class="cyber-card p-6 rounded-lg hologram"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-purple-900 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-brain text-2xl text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-purple-400">NEURAL LINK</h3> | |
| </div> | |
| <p class="text-gray-300 mb-4">Direct neural interface protocols for enhanced cognitive processing and memory augmentation.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-cyan-300">SECURITY LEVEL: 5</span> | |
| <button class="text-pink-500 hover:text-pink-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="cyber-card p-6 rounded-lg hologram"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-blue-900 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-eye text-2xl text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-400">OPTICAL ENHANCE</h3> | |
| </div> | |
| <p class="text-gray-300 mb-4">Advanced visual augmentation systems with infrared, night vision, and tactical overlay capabilities.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-cyan-300">SECURITY LEVEL: 3</span> | |
| <button class="text-pink-500 hover:text-pink-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="cyber-card p-6 rounded-lg hologram"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-green-900 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-dna text-2xl text-green-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-400">BIO MODS</h3> | |
| </div> | |
| <p class="text-gray-300 mb-4">Genetic optimization and cellular regeneration packages for peak physical performance.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-cyan-300">SECURITY LEVEL: 7</span> | |
| <button class="text-pink-500 hover:text-pink-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Terminal section --> | |
| <div class="cyber-card p-6 rounded-lg mb-16 hologram"> | |
| <div class="flex items-center mb-4 border-b border-cyan-900 pb-3"> | |
| <div class="flex space-x-2 mr-4"> | |
| <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> | |
| <h3 class="text-xl font-bold text-cyan-400">SYSTEM TERMINAL</h3> | |
| </div> | |
| <div class="font-mono text-green-400 mb-4 h-64 overflow-y-auto bg-black bg-opacity-50 p-4 rounded" id="terminalOutput"> | |
| <p>> INITIALIZING CYBERPUNK 4041 INTERFACE...</p> | |
| <p>> LOADING NEURAL CONNECTION PROTOCOLS...</p> | |
| <p>> SCANNING FOR BIO-AUGMENTATIONS...</p> | |
| <p>> SYSTEM STATUS: NOMINAL</p> | |
| <p>> WARNING: UNAUTHORIZED ACCESS DETECTED</p> | |
| <p>> ACTIVATING DEFENSE MECHANISMS...</p> | |
| <p>> DEFENSE MECHANISMS ONLINE</p> | |
| <p>> WELCOME, USER. YOUR JOURNEY BEGINS NOW.</p> | |
| </div> | |
| <div class="flex"> | |
| <span class="text-green-400 mr-2">></span> | |
| <input type="text" class="bg-transparent border-none text-green-400 font-mono w-full focus:outline-none terminal-cursor" placeholder="ENTER COMMAND..."> | |
| </div> | |
| </div> | |
| <!-- Stats section --> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-pink-500 mb-2" id="counter1">0</div> | |
| <div class="text-sm text-gray-400 uppercase tracking-wider">CYBERNETIC MODS</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-cyan-400 mb-2" id="counter2">0</div> | |
| <div class="text-sm text-gray-400 uppercase tracking-wider">NEURAL CONNECTS</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-purple-500 mb-2" id="counter3">0</div> | |
| <div class="text-sm text-gray-400 uppercase tracking-wider">HACK ATTEMPTS</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-green-400 mb-2" id="counter4">0</div> | |
| <div class="text-sm text-gray-400 uppercase tracking-wider">SYSTEM ALERTS</div> | |
| </div> | |
| </div> | |
| <!-- Glitch image gallery --> | |
| <div class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center glitch" data-text="AUGMENTATION GALLERY">AUGMENTATION GALLERY</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="relative group overflow-hidden rounded-lg h-48"> | |
| <img src="https://source.unsplash.com/random/300x300/?cyberpunk,1" alt="Augmentation 1" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> | |
| <span class="text-pink-500 font-bold">NEURAL IMPLANT v4.2</span> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-lg h-48"> | |
| <img src="https://source.unsplash.com/random/300x300/?cyberpunk,2" alt="Augmentation 2" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> | |
| <span class="text-cyan-400 font-bold">OPTICAL HUD v3.7</span> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-lg h-48"> | |
| <img src="https://source.unsplash.com/random/300x300/?cyberpunk,3" alt="Augmentation 3" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> | |
| <span class="text-purple-400 font-bold">BIONIC ARM v5.1</span> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-lg h-48"> | |
| <img src="https://source.unsplash.com/random/300x300/?cyberpunk,4" alt="Augmentation 4" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> | |
| <span class="text-green-400 font-bold">SYNTH SKIN v2.9</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="text-center py-8 border-t border-gray-800"> | |
| <div class="flex justify-center space-x-6 mb-6"> | |
| <a href="#" class="text-gray-400 hover:text-pink-500 transition-colors"> | |
| <i class="fab fa-discord text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors"> | |
| <i class="fab fa-twitter text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors"> | |
| <i class="fab fa-github text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition-colors"> | |
| <i class="fab fa-steam text-2xl"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-500 text-sm"> | |
| WARNING: UNAUTHORIZED ACCESS TO THIS SYSTEM IS PROHIBITED BY CYBER SECURITY ACT 4041 | |
| </p> | |
| <p class="text-gray-600 text-xs mt-2"> | |
| © 2041 NEOTOKYO CORPORATION. ALL RIGHTS RESERVED. | |
| </p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Matrix rain effect | |
| function createMatrixRain() { | |
| const chars = "01"; | |
| const matrixRain = document.getElementById('matrixRain'); | |
| const width = window.innerWidth; | |
| const height = window.innerHeight; | |
| const fontSize = 14; | |
| const columns = Math.floor(width / fontSize); | |
| // Create columns | |
| for (let i = 0; i < columns; i++) { | |
| const column = document.createElement('div'); | |
| column.className = 'binary-rain'; | |
| column.style.left = (i * fontSize) + 'px'; | |
| column.style.animationDuration = (Math.random() * 3 + 2) + 's'; | |
| column.style.animationDelay = (Math.random() * 2) + 's'; | |
| // Create binary characters | |
| let binaryText = ''; | |
| const rows = Math.floor(height / fontSize); | |
| for (let j = 0; j < rows; j++) { | |
| binaryText += chars.charAt(Math.floor(Math.random() * chars.length)) + '\n'; | |
| } | |
| column.textContent = binaryText; | |
| matrixRain.appendChild(column); | |
| } | |
| } | |
| // Create random binary elements floating around | |
| function createFloatingBinary() { | |
| const container = document.body; | |
| const count = 30; | |
| for (let i = 0; i < count; i++) { | |
| const binary = document.createElement('div'); | |
| binary.className = 'binary-rain absolute pointer-events-none'; | |
| binary.textContent = Math.random() > 0.5 ? '1' : '0'; | |
| binary.style.left = Math.random() * 100 + 'vw'; | |
| binary.style.top = Math.random() * 100 + 'vh'; | |
| binary.style.fontSize = (Math.random() * 10 + 8) + 'px'; | |
| binary.style.opacity = Math.random() * 0.5 + 0.1; | |
| binary.style.animationDuration = (Math.random() * 10 + 10) + 's'; | |
| binary.style.animationDelay = (Math.random() * 5) + 's'; | |
| container.appendChild(binary); | |
| } | |
| } | |
| // Animated counters | |
| function animateCounters() { | |
| const counters = [ | |
| { element: document.getElementById('counter1'), target: 427, duration: 2000 }, | |
| { element: document.getElementById('counter2'), target: 892, duration: 2500 }, | |
| { element: document.getElementById('counter3'), target: 156, duration: 1800 }, | |
| { element: document.getElementById('counter4'), target: 23, duration: 1500 } | |
| ]; | |
| counters.forEach(counter => { | |
| const startTime = performance.now(); | |
| const endTime = startTime + counter.duration; | |
| function updateCounter(currentTime) { | |
| const elapsed = currentTime - startTime; | |
| const progress = Math.min(elapsed / counter.duration, 1); | |
| const value = Math.floor(progress * counter.target); | |
| counter.element.textContent = value; | |
| if (progress < 1) { | |
| requestAnimationFrame(updateCounter); | |
| } | |
| } | |
| requestAnimationFrame(updateCounter); | |
| }); | |
| } | |
| // Terminal typing effect | |
| function terminalTyping() { | |
| const terminal = document.getElementById('terminalOutput'); | |
| const lines = [ | |
| "> SCANNING USER BIO-SIGNATURE...", | |
| "> IDENTIFIED: USER #XJ9-4041", | |
| "> ACCESS LEVEL: ADMINISTRATOR", | |
| "> LOADING USER PREFERENCES...", | |
| "> SYSTEM OPTIMIZATION COMPLETE", | |
| "> WARNING: MULTIPLE INTRUSION ATTEMPTS DETECTED", | |
| "> ACTIVATING COUNTERMEASURES...", | |
| "> ALL SYSTEMS OPERATIONAL" | |
| ]; | |
| let currentLine = 0; | |
| function typeNextLine() { | |
| if (currentLine < lines.length) { | |
| const lineElement = document.createElement('p'); | |
| terminal.appendChild(lineElement); | |
| let i = 0; | |
| const line = lines[currentLine]; | |
| function type() { | |
| if (i < line.length) { | |
| lineElement.textContent = line.substring(0, i + 1); | |
| i++; | |
| setTimeout(type, Math.random() * 50 + 30); | |
| } else { | |
| currentLine++; | |
| setTimeout(typeNextLine, 1000); | |
| } | |
| } | |
| type(); | |
| } | |
| } | |
| setTimeout(typeNextLine, 2000); | |
| } | |
| // Parallax effect | |
| function setupParallax() { | |
| document.addEventListener('mousemove', (e) => { | |
| const x = e.clientX / window.innerWidth; | |
| const y = e.clientY / window.innerHeight; | |
| const holograms = document.querySelectorAll('.hologram'); | |
| holograms.forEach(hologram => { | |
| hologram.style.transform = `translate(${x * 10 - 5}px, ${y * 10 - 5}px)`; | |
| }); | |
| }); | |
| } | |
| // Initialize all effects | |
| window.addEventListener('DOMContentLoaded', () => { | |
| createMatrixRain(); | |
| createFloatingBinary(); | |
| animateCounters(); | |
| terminalTyping(); | |
| setupParallax(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mkknight970/crazy1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |