| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NexusCore | Cybernetic Chat Interface</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"> |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --neon-blue: #0ff0fc; |
| --neon-pink: #ff2d75; |
| --matrix-green: #00ff41; |
| --deep-purple: #6e00ff; |
| --cyber-yellow: #ffd300; |
| --hacker-dark: #0a0a0f; |
| --terminal-bg: #0d0d15; |
| } |
| ======= |
|
|
| 2. Let's enhance the body styling with more cyberpunk elements: |
| <<<<<<< SEARCH |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: var(--hacker-dark); |
| background-image: |
| linear-gradient(rgba(15, 240, 252, 0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(15, 240, 252, 0.03) 1px, transparent 1px); |
| background-size: 20px 20px; |
| color: #e0e0e0; |
| overflow: hidden; |
| text-shadow: 0 0 2px rgba(255,255,255,0.1); |
| } |
| ======= |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #0a0a10; |
| background-image: |
| linear-gradient(rgba(15, 240, 252, 0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(15, 240, 252, 0.03) 1px, transparent 1px); |
| background-size: 20px 20px; |
| color: #e0e0e0; |
| overflow: hidden; |
| text-shadow: 0 0 2px rgba(255,255,255,0.1); |
| } |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #0f0f12; |
| color: #e0e0e0; |
| overflow: hidden; |
| } |
| |
| .futuristic-font { |
| font-family: 'Orbitron', sans-serif; |
| } |
| |
| .channel-content { |
| scrollbar-width: thin; |
| scrollbar-color: #4a4a4a transparent; |
| } |
| |
| .channel-content::-webkit-scrollbar { |
| width: 6px; |
| } |
| |
| .channel-content::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| |
| .channel-content::-webkit-scrollbar-thumb { |
| background-color: #4a4a4a; |
| border-radius: 3px; |
| } |
| |
| .glow-effect { |
| box-shadow: 0 0 15px var(--neon-blue), |
| 0 0 30px rgba(15, 240, 252, 0.2), |
| inset 0 0 10px rgba(15, 240, 252, 0.1); |
| animation: pulse-glow 3s infinite alternate; |
| } |
| |
| @keyframes pulse-glow { |
| 0% { box-shadow: 0 0 15px var(--neon-blue), 0 0 30px rgba(15, 240, 252, 0.2); } |
| 100% { box-shadow: 0 0 20px var(--neon-blue), 0 0 40px rgba(15, 240, 252, 0.3); } |
| } |
| |
| .message:hover { |
| background: rgba(30, 31, 34, 0.7); |
| border-left: 2px solid var(--neon-blue); |
| box-shadow: -5px 0 15px rgba(15, 240, 252, 0.1); |
| } |
| |
| .cyber-border { |
| position: relative; |
| } |
| |
| .cyber-border::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 1px; |
| background: linear-gradient(90deg, transparent, var(--neon-blue), transparent); |
| } |
| |
| .pulse-animation { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 0.7; } |
| 50% { opacity: 1; } |
| 100% { opacity: 0.7; } |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| text-shadow: 0 0 8px rgba(15, 240, 252, 0.4); |
| } |
| </style> |
| </head> |
| <body class="h-screen flex"> |
| |
| <div class="w-16 bg-gray-900 flex flex-col items-center py-4 space-y-4 border-r border-gray-800"> |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-600 to-blue-500 flex items-center justify-center glow-effect"> |
| <i class="fas fa-robot text-xl text-white"></i> |
| </div> |
| |
| <div class="w-12 h-12 rounded-full bg-gray-800 hover:bg-gradient-to-br from-purple-900 to-blue-800 transition-all duration-300 flex items-center justify-center cursor-pointer glow-effect"> |
| <i class="fas fa-vr-cardboard text-purple-300"></i> |
| </div> |
| |
| <div class="w-12 h-12 rounded-full bg-gray-800 hover:bg-indigo-900 transition-all duration-300 flex items-center justify-center cursor-pointer glow-effect"> |
| <i class="fas fa-atom"></i> |
| </div> |
| |
| <div class="w-12 h-12 rounded-full bg-gray-800 hover:bg-indigo-900 transition-all duration-300 flex items-center justify-center cursor-pointer glow-effect"> |
| <i class="fas fa-microchip"></i> |
| </div> |
| |
| <div class="w-12 h-12 rounded-full bg-gray-800 hover:bg-indigo-900 transition-all duration-300 flex items-center justify-center cursor-pointer glow-effect"> |
| <i class="fas fa-rocket"></i> |
| </div> |
| |
| <div class="mt-auto w-12 h-12 rounded-full bg-gray-700 hover:bg-green-500 transition-all duration-300 flex items-center justify-center cursor-pointer"> |
| <i class="fas fa-plus"></i> |
| </div> |
| </div> |
| |
| |
| <div class="w-60 bg-gray-800 flex flex-col border-r border-gray-700"> |
| <div class="p-4 border-b border-gray-700 cyber-border"> |
| <h2 class="font-orbitron text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400 tracking-wider"> |
| <span class="drop-shadow-[0_0_8px_rgba(110,0,255,0.6)]">NEXUS</span> |
| <span class="text-cyan-300 drop-shadow-[0_0_8px_rgba(15,240,252,0.6)]">CORE</span> |
| </h2> |
| <div class="text-xs text-cyan-200 mt-1 pulse-animation">v3.2.1 ONLINE</div> |
| </div> |
| |
| <div class="overflow-y-auto flex-1"> |
| <div class="px-2 pt-4"> |
| <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider px-2 mb-2">TEXT CHANNELS</div> |
| |
| <div class="space-y-1"> |
| <div class="flex items-center px-2 py-1 rounded bg-indigo-900/50 text-white cursor-pointer"> |
| <i class="fas fa-hashtag mr-2 text-gray-400"></i> |
| <span>welcome</span> |
| </div> |
| |
| <div class="flex items-center px-2 py-1 rounded hover:bg-gray-700/50 cursor-pointer"> |
| <i class="fas fa-hashtag mr-2 text-gray-400"></i> |
| <span>general</span> |
| </div> |
| |
| <div class="flex items-center px-2 py-1 rounded hover:bg-gray-700/50 cursor-pointer"> |
| <i class="fas fa-hashtag mr-2 text-gray-400"></i> |
| <span>announcements</span> |
| </div> |
| |
| <div class="flex items-center px-2 py-1 rounded hover:bg-gray-700/50 cursor-pointer"> |
| <i class="fas fa-hashtag mr-2 text-gray-400"></i> |
| <span>tech-talk</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-2 pt-6"> |
| <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider px-2 mb-2">VOICE CHANNELS</div> |
| |
| <div class="space-y-1"> |
| <div class="flex items-center px-2 py-1 rounded hover:bg-gray-700/50 cursor-pointer"> |
| <i class="fas fa-volume-up mr-2 text-gray-400"></i> |
| <span>General VC</span> |
| </div> |
| |
| <div class="flex items-center px-2 py-1 rounded hover:bg-gray-700/50 cursor-pointer"> |
| <i class="fas fa-volume-up mr-2 text-gray-400"></i> |
| <span>Gaming</span> |
| </div> |
| |
| <div class="flex items-center px-2 py-1 rounded hover:bg-gray-700/50 cursor-pointer"> |
| <i class="fas fa-volume-up mr-2 text-gray-400"></i> |
| <span>Music</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="p-2 border-t border-gray-700"> |
| <div class="flex items-center bg-gray-900 rounded p-2"> |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center mr-2"> |
| <span class="text-xs font-bold">AI</span> |
| </div> |
| <div class="flex-1"> |
| <div class="text-sm font-medium">AI_Assistant</div> |
| <div class="text-xs text-gray-400">#9283</div> |
| </div> |
| <div class="flex space-x-1"> |
| <button class="w-6 h-6 rounded hover:bg-gray-700 flex items-center justify-center"> |
| <i class="fas fa-microphone text-xs"></i> |
| </button> |
| <button class="w-6 h-6 rounded hover:bg-gray-700 flex items-center justify-center"> |
| <i class="fas fa-headphones text-xs"></i> |
| </button> |
| <button class="w-6 h-6 rounded hover:bg-gray-700 flex items-center justify-center"> |
| <i class="fas fa-cog text-xs"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 flex flex-col bg-gray-700/20"> |
| |
| <div class="h-12 border-b border-gray-700 flex items-center px-4"> |
| <i class="fas fa-hashtag mr-2 text-gray-400"></i> |
| <span class="font-semibold">welcome</span> |
| <div class="ml-4 text-sm text-gray-400">Welcome to NexusChat - the future of communication</div> |
| |
| <div class="ml-auto flex items-center space-x-4"> |
| <button class="text-gray-400 hover:text-gray-200"> |
| <i class="fas fa-search"></i> |
| </button> |
| <button class="text-gray-400 hover:text-gray-200"> |
| <i class="fas fa-inbox"></i> |
| </button> |
| <button class="text-gray-400 hover:text-gray-200"> |
| <i class="fas fa-question-circle"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-y-auto channel-content p-4 space-y-6"> |
| |
| <div class="flex items-start message p-3 rounded-lg bg-gray-900/50 hover:bg-gray-900/70 transition-all duration-200"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-600 to-blue-500 flex items-center justify-center mr-3 mt-1 glow-effect"> |
| <i class="fas fa-robot text-white"></i> |
| </div> |
| <div> |
| <div class="flex items-baseline"> |
| <span class="font-bold mr-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-blue-300">NexusBot</span> |
| <span class="text-xs text-cyan-100/50">[SYSTEM] Today at 12:34 PM</span> |
| </div> |
| <div class="mt-1 text-gray-200"> |
| <p>Welcome to <span class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400">NexusCore</span> - neural interface v3.2.1 online</p> |
| <div class="mt-3 px-3 py-2 bg-black/30 border-l-2 border-cyan-400 rounded-r"> |
| <p class="text-sm font-mono">> Initializing quantum link...</p> |
| <p class="text-sm font-mono text-green-400">> Connection established</p> |
| <p class="text-sm font-mono">> This hub operates on <span class="text-cyan-300 font-bold">QuantumNet™</span> protocol</p> |
| <p class="text-sm font-mono text-green-400">> Uptime: <span class="text-[var(--matrix-green)]">99.999%</span></p> |
| </div> |
| <div class="mt-3 flex space-x-4 text-xs"> |
| <div class="flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-1 animate-pulse"></span> |
| <span class="text-green-400">ENCRYPTION: ACTIVE</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-1 animate-pulse"></span> |
| <span class="text-green-400">FIREWALL: ENGAGED</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center mr-3 mt-1"> |
| <i class="fas fa-shield-alt"></i> |
| </div> |
| <div> |
| <div class="flex items-baseline"> |
| <span class="font-semibold mr-2">System</span> |
| <span class="text-xs text-gray-400">Today at 12:35 PM</span> |
| </div> |
| <div class="mt-1 text-gray-300"> |
| <p>Security protocols enabled: <span class="text-green-400">Neural Encryption Active |
| <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=aomujohn/g3nus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
