| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Neon Bean | Win2K Cyberpunk Café</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| matrix: { |
| 300: '#00ff41', |
| 400: '#00cc33', |
| 500: '#009926', |
| }, |
| cyber: { |
| 800: '#000000', |
| 900: '#0a0a0a', |
| }, |
| code: { |
| bg: '#0d0208', |
| text: '#008f11' |
| } |
| }, |
| fontFamily: { |
| 'matrix': ['"Courier New"', 'monospace'], |
| 'title': ['"Arial Black"', 'sans-serif'] |
| }, |
| } |
| } |
| } |
| </script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); |
| </style> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
| <style> |
| @keyframes scanline { |
| 0% { background-position: 0 0; } |
| 100% { background-position: 0 100vh; } |
| } |
| .win2k-bg { |
| background: linear-gradient(to right, #008080, #000080); |
| border: 2px solid #c0c0c0; |
| box-shadow: inset 1px 1px 0px #fff, inset -1px -1px 0px #808080; |
| } |
| .matrix-text { |
| font-family: 'Courier New', monospace; |
| text-shadow: 0 0 8px #00ffff; |
| color: #00ffff; |
| } |
| .win2k-btn { |
| background: linear-gradient(to bottom, #c0c0c0, #808080); |
| border: 2px solid; |
| border-color: #fff #808080 #808080 #fff; |
| color: #000; |
| font-weight: bold; |
| } |
| .win2k-btn:hover { |
| background: linear-gradient(to bottom, #808080, #c0c0c0); |
| border-color: #808080 #fff #fff #808080; |
| } |
| .win2k-input { |
| background: #000; |
| border: 2px solid #008080; |
| color: #00ffff; |
| padding: 4px; |
| } |
| .scanline-overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: 9999; |
| pointer-events: none; |
| background: linear-gradient(to bottom, |
| rgba(0,255,255,0.1) 50%, |
| rgba(0,0,0,0) 50%); |
| background-size: 100% 4px; |
| animation: scanline 1s linear infinite; |
| } |
| .cyber-border { |
| position: relative; |
| } |
| .cyber-border::after { |
| content: ''; |
| position: absolute; |
| bottom: -5px; |
| left: 0; |
| width: 100%; |
| height: 2px; |
| background: linear-gradient(90deg, transparent, #00f0ff, transparent); |
| } |
| .menu-item:hover { |
| transform: translateX(10px); |
| transition: transform 0.3s ease; |
| } |
| #vanta-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.7; |
| } |
| </style> |
| </head> |
| <body class="bg-black text-gray-200 font-matrix min-h-screen overflow-x-hidden" style="background-image: url('http://static.photos/technology/1024x576/42');"> |
| <div class="scanline-overlay"></div> |
| <div id="vanta-bg" class="pointer-events-none"></div> |
| <header class="container mx-auto px-4 py-6 flex justify-between items-center win2k-bg"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="coffee" class="text-cyan-500 w-8 h-8"></i> |
| <h1 class="text-3xl font-bold text-cyan-500 matrix-text">NEON_BEAN.EXE</h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#" class="text-neon-400 hover:text-neon-500 font-medium cyber-border">HOME</a> |
| <a href="menu.html" class="text-neon-400 hover:text-neon-500 font-medium cyber-border">MENU</a> |
| <a href="#" class="text-neon-400 hover:text-neon-500 font-medium cyber-border">EVENTS</a> |
| <a href="#" class="text-neon-400 hover:text-neon-500 font-medium cyber-border">CONTACT</a> |
| </nav> |
| <button class="md:hidden text-neon-500" id="menu-toggle"> |
| <i data-feather="menu"></i> |
| </button> |
| </header> |
|
|
| <main class="container mx-auto px-4 py-12"> |
| <section class="mb-20"> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h2 class="text-5xl md:text-6xl font-bold mb-6 matrix-text">TAKE THE <span class="text-matrix-400">RED PILL</span></h2> |
| <p class="text-lg mb-8 text-matrix-400 leading-relaxed font-matrix"> |
| You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.<br> |
| You take the red pill - you stay in Wonderland, and we show you how deep the rabbit-hole goes. |
| </p> |
| <div class="flex space-x-4"> |
| <button class="win2k-btn py-3 px-6"> |
| FOLLOW_WHITE_RABBIT |
| </button> |
| <button class="win2k-btn py-3 px-6"> |
| KNOW_YOUR_CHOICE <i data-feather="terminal" class="inline ml-2"></i> |
| </button> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="absolute -top-6 -left-6 w-full h-full border-2 border-cyan-500 rounded-none z-0"></div> |
| <img src="http://static.photos/technology/640x360/23" alt="Cyber Coffee" class="relative z-10 w-full h-auto rounded-none grayscale hover:grayscale-0 transition-all duration-500 border-2 border-cyan-500"> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="mb-20"> |
| <h2 class="text-3xl font-bold mb-12 text-center matrix-text inline-block mx-auto pb-2 border-b-2 border-matrix-400">DIGITAL <span class="text-matrix-400">ELIXIRS</span></h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-code-bg p-6 rounded-none border-2 border-matrix-400 transform hover:-translate-y-2 transition-all duration-300"> |
| <div class="flex justify-between items-start mb-4"> |
| <h3 class="text-xl font-bold text-matrix-400 font-matrix">RED_PILL</h3> |
| <span class="bg-matrix-400 text-cyber-900 px-3 py-1 text-sm font-bold">$01.01</span> |
| </div> |
| <p class="text-code-text mb-4 font-matrix text-sm">Wake-up call in liquid form. Contains reality-enhancing compounds.</p> |
| <button class="text-matrix-400 hover:text-matrix-300 text-sm font-bold flex items-center font-matrix"> |
| [SELECT] <i data-feather="chevron-right" class="w-4 h-4 ml-2"></i> |
| </button> |
| </div> |
| <div class="bg-code-bg p-6 rounded-none border-2 border-matrix-400 transform hover:-translate-y-2 transition-all duration-300"> |
| <div class="flex justify-between items-start mb-4"> |
| <h3 class="text-xl font-bold text-matrix-400 font-matrix">AGENT_SMITH</h3> |
| <span class="bg-matrix-400 text-cyber-900 px-3 py-1 text-sm font-bold">$01.00</span> |
| </div> |
| <p class="text-code-text mb-4 font-matrix text-sm">Black coffee that will hunt down your sleepiness. Contains no free will.</p> |
| <button class="text-matrix-400 hover:text-matrix-300 text-sm font-bold flex items-center font-matrix"> |
| [SELECT] <i data-feather="chevron-right" class="w-4 h-4 ml-2"></i> |
| </button> |
| </div> |
| <div class="bg-code-bg p-6 rounded-none border-2 border-matrix-400 transform hover:-translate-y-2 transition-all duration-300"> |
| <div class="flex justify-between items-start mb-4"> |
| <h3 class="text-xl font-bold text-matrix-400 font-matrix">ORACLE_BREW</h3> |
| <span class="bg-matrix-400 text-cyber-900 px-3 py-1 text-sm font-bold">$01.11</span> |
| </div> |
| <p class="text-code-text mb-4 font-matrix text-sm">Knows exactly how much sugar you need before you do.</p> |
| <button class="text-matrix-400 hover:text-matrix-300 text-sm font-bold flex items-center font-matrix"> |
| [SELECT] <i data-feather="chevron-right" class="w-4 h-4 ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </section> |
| <section class="mb-20"> |
| <div class="bg-black p-8 rounded-none border-2 border-cyan-500 relative overflow-hidden win2k-bg"> |
| <div class="absolute -right-20 -top-20 w-64 h-64 bg-matrix-400 rounded-full opacity-10 blur-md"></div> |
| <div class="relative z-10 grid md:grid-cols-2 gap-8 items-center"> |
| <div> |
| <h2 class="text-3xl font-bold mb-4 matrix-text">ENTER <span class="text-matrix-400">THE MATRIX</span></h2> |
| <p class="text-code-text mb-6 font-matrix">Access requires verification. Input your digital signature.</p> |
| <form class="space-y-4"> |
| <input type="email" placeholder="USERNAME@NEONBEAN.CYB" class="w-full win2k-input py-3 px-4 text-cyan-500 focus:outline-none font-matrix"> |
| <button type="submit" class="win2k-btn py-3 px-6"> |
| CONNECT <i data-feather="key" class="inline ml-2"></i> |
| </button> |
| </form> |
| </div> |
| <div class="flex justify-center"> |
| <img src="http://static.photos/technology/320x240/15" alt="Cyber Terminal" class="w-full max-w-xs h-auto rounded-none border-2 border-cyan-500 grayscale hover:grayscale-0 transition-all duration-500"> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
| <footer class="bg-black py-12" style="border-top: 4px solid #008080;"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold text-cyan-500 mb-4">NEON_BEAN</h3> |
| <p class="text-gray-400">Where the future of coffee is being brewed today.</p> |
| <div class="flex space-x-4 mt-4"> |
| <a href="#" class="text-gray-400 hover:text-cyan-500"><i data-feather="code"></i></a> |
| <a href="#" class="text-gray-400 hover:text-cyan-500"><i data-feather="cpu"></i></a> |
| <a href="#" class="text-gray-400 hover:text-cyan-500"><i data-feather="globe"></i></a> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-4 text-cyan-500 border-b-2 border-cyan-500 inline-block font-matrix">SYSTEM_HOURS</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li>Mon-Fri: 7AM - 2AM</li> |
| <li>Sat-Sun: 8AM - 4AM</li> |
| <li>24/7 VR Lounge Access</li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-4 text-cyan-500 border-b-2 border-cyan-500 inline-block font-matrix">COORDINATES</h4> |
| <address class="not-italic text-gray-400"> |
| Neon District, Level 3<br> |
| Cyber City 2077<br> |
| Near the Mainframe Hub |
| </address> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg mb-4 text-cyan-500 border-b-2 border-cyan-500 inline-block font-matrix">CONTACT.EXE</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li class="flex items-center"><i data-feather="mail" class="mr-2 w-4 h-4"></i> connect@neonbean.cyb</li> |
| <li class="flex items-center"><i data-feather="phone" class="mr-2 w-4 h-4"></i> +7 (905) 2077-1337</li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500"> |
| <p class="font-matrix">© 1999 NEO_N BEAN | SYSTEM STATUS: [ONLINE]</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| function createCodeRain() { |
| const chars = "01"; |
| const container = document.createElement('div'); |
| container.className = 'absolute top-0 left-0 w-full h-full overflow-hidden z-0 opacity-20'; |
| container.id = 'matrix-rain'; |
| document.getElementById('vanta-bg').appendChild(container); |
| |
| const fontSize = 14; |
| const columns = Math.floor(window.innerWidth / fontSize); |
| |
| for(let i = 0; i < columns; i++) { |
| const yPos = Math.random() * -1000; |
| const delay = Math.random() * 10; |
| const speed = 50 + Math.random() * 50; |
| const column = document.createElement('div'); |
| column.className = 'absolute top-0 text-matrix-400 font-matrix'; |
| column.style.left = (i * fontSize) + 'px'; |
| column.style.animation = `fall ${speed/10}s ${delay}s linear infinite`; |
| |
| for(let j = 0; j < 30; j++) { |
| const char = document.createElement('div'); |
| char.textContent = chars.charAt(Math.floor(Math.random() * chars.length)); |
| char.style.opacity = (30-j)/30; |
| column.appendChild(char); |
| } |
| |
| container.appendChild(column); |
| } |
| } |
| |
| |
| const style = document.createElement('style'); |
| style.textContent = ` |
| @keyframes fall { |
| to { transform: translateY(100vh); } |
| } |
| `; |
| document.head.appendChild(style); |
| |
| createCodeRain(); |
| |
| document.getElementById('menu-toggle').addEventListener('click', function() { |
| const nav = document.querySelector('nav'); |
| nav.classList.toggle('hidden'); |
| nav.classList.toggle('flex'); |
| nav.classList.toggle('flex-col'); |
| nav.classList.toggle('absolute'); |
| nav.classList.toggle('top-20'); |
| nav.classList.toggle('right-4'); |
| nav.classList.toggle('bg-cyber-800'); |
| nav.classList.toggle('p-4'); |
| nav.classList.toggle('rounded-sm'); |
| nav.classList.toggle('border'); |
| nav.classList.toggle('border-neon-500'); |
| nav.classList.toggle('space-y-4'); |
| nav.classList.toggle('space-x-0'); |
| }); |
| |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
