Spaces:
Running
Running
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChatVerse Retro - Main Chat</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ff00'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="retro-bg min-h-screen"> | |
| <div class="crt-overlay"></div> | |
| <div class="scanlines"></div> | |
| <nav-bar></nav-bar> | |
| <div class="flex h-screen pt-16"> | |
| <side-bar></side-bar> | |
| <main class="flex-1 flex flex-col bg-black/40 backdrop-blur-sm border-t border-l border-emerald-400/30 shadow-inner shadow-emerald-400/20"> | |
| <div class="flex-1 overflow-y-auto p-4 space-y-4 messages-container" id="messagesContainer"> | |
| <div class="message-group"> | |
| <div class="message-header flex items-center gap-2 mb-2"> | |
| <div class="w-3 h-3 bg-emerald-400 shadow-[0_0_10px_#00ff00]"></div> | |
| <span class="font-['Press_Start_2P'] text-xs text-emerald-400">SYSTEM</span> | |
| <span class="text-slate-500 text-xs" data-timestamp="new">[NOW]</span> | |
| </div> | |
| <div class="message-content font-mono text-slate-300 text-sm leading-relaxed"> | |
| > Welcome to ChatVerse Retro v1.0<br> | |
| > Type /help for available commands<br> | |
| > Connection established: ONLINE | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-emerald-400/30 p-4 bg-black/60"> | |
| <div class="flex gap-2"> | |
| <input | |
| type="text" | |
| id="messageInput" | |
| placeholder="> Type your message..." | |
| class="flex-1 bg-black/80 border border-emerald-400/50 text-emerald-400 font-mono text-sm px-4 py-3 focus:outline-none focus:border-emerald-400 focus:shadow-[0_0_15px_#00ff00] transition-all duration-300 placeholder:text-emerald-400/50" | |
| autocomplete="off" | |
| > | |
| <button | |
| id="sendButton" | |
| class="bg-emerald-400 text-black font-['Press_Start_2P'] text-xs px-6 py-3 hover:bg-emerald-500 hover:shadow-[0_0_20px_#00ff00] transition-all duration-300 active:translate-y-1" | |
| > | |
| SEND | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="components/nav-bar.js"></script> | |
| <script src="components/side-bar.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |