скомбинируй этот стиль и стиль из windows 2000 и web pank

index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>N30N_B34N v1.0 | Cyberpunk Café</title>
+    <title>Neon Bean | Win2K Cyberpunk Café</title>
 <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
@@ -40,15 +40,50 @@
 <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 matrixRain {
-            0% { color: #a5ff0d; text-shadow: 0 0 2px #a5ff0d; }
-            50% { color: #7acc00; text-shadow: 0 0 5px #7acc00; }
-            100% { color: #a5ff0d; text-shadow: 0 0 2px #a5ff0d; }
+        @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 {
-            animation: matrixRain 1.5s infinite alternate;
             font-family: 'Courier New', monospace;
-            text-shadow: 1px 1px 0px #000;
+            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;
@@ -77,24 +112,21 @@
         }
     </style>
 </head>
-<body class="bg-gray-900 text-lime-300 font-matrix min-h-screen overflow-x-hidden" style="background: repeating-linear-gradient(0deg, #000, #000 1px, #111 1px, #111 2px);">
-    <div id="vanta-bg" class="pointer-events-none opacity-50"></div>
-    <div class="absolute top-0 left-0 w-full h-full pointer-events-none" style="background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABnSURBVGhD7c4xCgAgDABR9/9PvUxRkJYiuVgqeAeBgx8GAAAAAAAAAADoYDPbPXpYzXaPHlaz3aOH1Wz36GE12z16WM12jx5Ws90DAAAAAAAAAACg7gI4GH1PdLr4TgAAAABJRU5ErkJggg==')"></div>
-<header class="container mx-auto px-4 py-6 flex justify-between items-center border-b-2 border-lime-500">
+<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">
-            <div class="w-8 h-8 bg-lime-500 flex items-center justify-center">
-                <i data-feather="coffee" class="text-black w-5 h-5"></i>
-            </div>
-            <h1 class="text-3xl font-bold text-lime-400 matrix-text tracking-tighter">N30N_B34N.exe</h1>
-            <span class="bg-lime-500 text-black px-2 text-xs font-bold ml-2">v1.0</span>
+            <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-1 bg-gray-800 px-1 py-1 rounded-sm border border-lime-500">
-            <a href="#" class="px-4 py-1 bg-lime-500 text-black font-bold hover:bg-lime-400">HOME</a>
-            <a href="menu.html" class="px-4 py-1 text-lime-400 hover:text-white hover:bg-gray-700 font-bold">MENU</a>
-            <a href="#" class="px-4 py-1 text-lime-400 hover:text-white hover:bg-gray-700 font-bold">EVENTS</a>
-            <a href="#" class="px-4 py-1 text-lime-400 hover:text-white hover:bg-gray-700 font-bold">CONTACT</a>
+<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">
+        <button class="md:hidden text-neon-500" id="menu-toggle">
             <i data-feather="menu"></i>
         </button>
     </header>
@@ -108,31 +140,29 @@
                         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-2">
-    <button class="bg-lime-500 hover:bg-lime-400 text-black font-bold py-3 px-6 border-2 border-lime-500 active:border-lime-300 active:bg-lime-600 flex items-center">
-        <span class="mr-2">></span> FOLLOW RABBIT
-    </button>
-    <button class="border-2 border-lime-500 text-lime-500 hover:bg-gray-800 font-bold py-3 px-6 flex items-center">
-        <span class="mr-2">></span> KNOW CHOICE <i data-feather="terminal" class="inline ml-2 w-4 h-4"></i>
-    </button>
-</div>
+<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-matrix-400 rounded-none z-0"></div>
-                    <img src="http://static.photos/black/640x360/42" alt="Matrix Coffee" class="relative z-10 w-full h-auto rounded-none grayscale hover:grayscale-0 transition-all duration-500 border-2 border-matrix-400">
+                    <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-1">
-    <div class="bg-gray-800 p-4 border-t-2 border-lime-500 hover:border-lime-300 transition-all duration-200">
-        <div class="flex justify-between items-start mb-4">
-            <h3 class="text-xl font-bold text-lime-400 font-matrix tracking-tighter">
-                <span class="text-gray-400 mr-1">></span>RED_PILL
-            </h3>
-<span class="bg-matrix-400 text-cyber-900 px-3 py-1 text-sm font-bold">$01.01</span>
+<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">
@@ -162,41 +192,40 @@
 </div>
         </section>
         <section class="mb-20">
-<div class="bg-gray-800 p-8 border-l-4 border-lime-500 relative overflow-hidden" style="box-shadow: inset 0 0 10px #000">
-    <div class="absolute right-0 top-0 w-full h-full opacity-10" style="background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABnSURBVGhD7c4xCgAgDABR9/9PvUxRkJYiuVgqeAeBgx8GAAAAAAAAAADoYDPbPXpYzXaPHlaz3aOH1Wz36GE12z16WM12jx5Ws90DAAAAAAAAAACg7gI4GH1PdLr4TgAAAABJRU5ErkJggg==')">
-    </div>
-<div class="relative z-10 grid md:grid-cols-2 gap-8 items-center">
+<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@MATRIX.NEO" class="w-full bg-cyber-900 border-b-2 border-matrix-400 py-3 px-4 text-matrix-400 focus:outline-none font-matrix placeholder-matrix-500">
-                            <button type="submit" class="bg-matrix-400 hover:bg-matrix-500 text-cyber-900 font-bold py-3 px-6 rounded-none transition-all duration-300 border-2 border-matrix-400">
-                                CONNECT <i data-feather="key" class="inline ml-2"></i>
+                            <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/black/320x240/7" alt="Matrix Terminal" class="w-full max-w-xs h-auto rounded-none border-2 border-matrix-400 grayscale hover:grayscale-0 transition-all duration-500">
+                        <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-gray-800 py-8 border-t-2 border-lime-500">
+    <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-lime-400 mb-4">SYSTEM_INFO</h3>
-                    <p class="text-gray-400 font-mono text-sm">>_ Brewing cybernetic coffee since 1999</p>
-<div class="flex space-x-4 mt-4">
-                        <a href="#" class="text-gray-400 hover:text-lime-400"><i data-feather="code" class="w-4 h-4"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-lime-400"><i data-feather="cpu" class="w-4 h-4"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-lime-400"><i data-feather="globe" class="w-4 h-4"></i></a>
+                    <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-matrix-400 border-b-2 border-matrix-400 inline-block font-matrix">SYSTEM_HOURS</h4>
+                    <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>
@@ -204,7 +233,7 @@
                     </ul>
                 </div>
                 <div>
-                    <h4 class="font-bold text-lg mb-4 text-matrix-400 border-b-2 border-matrix-400 inline-block font-matrix">COORDINATES</h4>
+                    <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>
@@ -212,26 +241,26 @@
                     </address>
                 </div>
                 <div>
-                    <h4 class="font-bold text-lg mb-4 text-matrix-400 border-b-2 border-matrix-400 inline-block font-matrix">CONTACT.EXE</h4>
+                    <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-mono text-xs">© 1999 N30N_B34N | SYSTEM STATUS: <span class="text-lime-400">[ONLINE]</span> | BUILD 2077.12.31</p>
-</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>
-        // Web punk code rain effect
+        // Matrix code rain effect
         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-10';
-container.id = 'matrix-rain';
+            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;
@@ -240,8 +269,8 @@ container.id = 'matrix-rain';
             for(let i = 0; i < columns; i++) {
                 const yPos = Math.random() * -1000;
                 const delay = Math.random() * 10;
-                const speed = 10 + Math.random() * 20;
-const column = document.createElement('div');
+                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`;