Design a dark-themed web interface for a vibe coding platform. The layout includes a terminal-style code editor, a lo-fi music player, and a theme switcher. The aesthetic is inspired by cyberpunk and lo-fi visuals, with soft gradients, glowing neon accents, and animated ambient backgrounds. Typography is modern and minimal. The interface should feel immersive, calming, and customizable - Initial Deployment
11c0520 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VibeCoder | Cyberpunk Coding Environment</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=Fira+Code:wght@300;400;500;600;700&family=Major+Mono+Display&display=swap'); | |
| :root { | |
| --primary: #0ff0fc; | |
| --secondary: #ff2ced; | |
| --accent: #f8fc54; | |
| --bg-dark: #0a0a14; | |
| --bg-darker: #050510; | |
| --text-primary: #e0e0ff; | |
| } | |
| body { | |
| font-family: 'Fira Code', monospace; | |
| background-color: var(--bg-darker); | |
| color: var(--text-primary); | |
| overflow-x: hidden; | |
| } | |
| .title-font { | |
| font-family: 'Major Mono Display', monospace; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%); | |
| } | |
| .neon-border { | |
| border: 1px solid rgba(15, 240, 252, 0.3); | |
| box-shadow: 0 0 10px rgba(15, 240, 252, 0.3), | |
| inset 0 0 10px rgba(15, 240, 252, 0.2); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px var(--primary); | |
| } | |
| .neon-accent { | |
| text-shadow: 0 0 5px var(--secondary); | |
| } | |
| .code-editor { | |
| background-color: rgba(10, 10, 20, 0.7); | |
| backdrop-filter: blur(5px); | |
| } | |
| .music-player { | |
| background-color: rgba(5, 5, 16, 0.7); | |
| backdrop-filter: blur(5px); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.7; } | |
| } | |
| .glow { | |
| animation: glow 3s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| box-shadow: 0 0 5px rgba(15, 240, 252, 0.5); | |
| } | |
| to { | |
| box-shadow: 0 0 15px rgba(15, 240, 252, 0.8); | |
| } | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .animated-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background: linear-gradient(45deg, | |
| rgba(15, 240, 252, 0.05) 0%, | |
| rgba(255, 44, 237, 0.05) 50%, | |
| rgba(248, 252, 84, 0.05) 100%); | |
| background-size: 200% 200%; | |
| animation: gradientBG 15s ease infinite; | |
| } | |
| @keyframes gradientBG { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .rainbow-text { | |
| background: linear-gradient(90deg, | |
| var(--primary) 0%, | |
| var(--secondary) 50%, | |
| var(--accent) 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background: linear-gradient(90deg, | |
| var(--primary) 0%, | |
| var(--secondary) 50%, | |
| var(--accent) 100%); | |
| animation: progress 10s linear infinite; | |
| background-size: 200% 100%; | |
| } | |
| @keyframes progress { | |
| 0% { background-position: 100% 0; } | |
| 100% { background-position: -100% 0; } | |
| } | |
| .theme-switcher { | |
| background: rgba(15, 15, 25, 0.7); | |
| backdrop-filter: blur(5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg"> | |
| <div class="animated-bg"></div> | |
| <header class="container mx-auto px-4 py-6 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-purple-500 glow"></div> | |
| <h1 class="title-font text-2xl md:text-3xl neon-text">Vibe<span class="neon-accent">Coder</span></h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-switcher" class="theme-switcher px-4 py-2 rounded-full flex items-center space-x-2 neon-border hover:bg-cyan-900/20 transition-all"> | |
| <i class="fas fa-palette text-cyan-300"></i> | |
| <span class="hidden md:inline">Themes</span> | |
| </button> | |
| <div class="relative group"> | |
| <button class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center glow"> | |
| <i class="fas fa-user-astronaut"></i> | |
| </button> | |
| <div class="absolute right-0 mt-2 w-48 bg-gray-900/90 rounded-md shadow-lg py-1 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-cyan-900/20">Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-cyan-900/20">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-cyan-900/20">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Code Editor Section --> | |
| <section class="lg:col-span-2 code-editor rounded-xl p-4 neon-border"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <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> | |
| <div class="text-sm font-mono text-cyan-300"> | |
| <span class="rainbow-text">main.js</span> • JavaScript | |
| </div> | |
| <button class="text-xs bg-cyan-900/30 px-2 py-1 rounded hover:bg-cyan-900/50 transition"> | |
| <i class="fas fa-play mr-1"></i> Run | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-cyan-900/10 to-transparent pointer-events-none"></div> | |
| <textarea id="code-input" class="w-full h-96 bg-transparent font-mono text-sm p-4 resize-none focus:outline-none scrollbar-hide" spellcheck="false"> | |
| // Welcome to VibeCoder | |
| // Type your code here... | |
| function vibeCheck() { | |
| const beats = ["lofi", "synthwave", "chillhop"]; | |
| let currentVibe = 0; | |
| setInterval(() => { | |
| currentVibe = (currentVibe + 1) % beats.length; | |
| console.log(`Now playing: ${beats[currentVibe]} beats`); | |
| updatePlayer(beats[currentVibe]); | |
| }, 30000); | |
| return { | |
| play: () => console.log("🎵 Music started..."), | |
| pause: () => console.log("⏸️ Music paused"), | |
| next: () => { | |
| currentVibe = (currentVibe + 1) % beats.length; | |
| console.log(`⏭️ Switched to ${beats[currentVibe]}`); | |
| } | |
| }; | |
| } | |
| const coder = { | |
| name: "Cyber Dev", | |
| skills: ["JavaScript", "React", "Node", "Tailwind"], | |
| mood: "focused" | |
| }; | |
| const player = vibeCheck(); | |
| player.play(); | |
| // Happy coding! ✨ | |
| </textarea> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center text-xs"> | |
| <div class="flex space-x-4"> | |
| <button class="flex items-center space-x-1 text-cyan-300 hover:text-cyan-200"> | |
| <i class="fas fa-save"></i> | |
| <span>Save</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-purple-300 hover:text-purple-200"> | |
| <i class="fas fa-share-alt"></i> | |
| <span>Share</span> | |
| </button> | |
| </div> | |
| <div class="text-gray-400"> | |
| <span class="text-cyan-300">Ln 24, Col 13</span> • UTF-8 | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Music Player Section --> | |
| <section class="music-player rounded-xl p-4 neon-border"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="title-font text-xl flex items-center"> | |
| <i class="fas fa-headphones mr-2 text-purple-300"></i> | |
| <span class="rainbow-text">Vibe</span> Player | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="w-6 h-6 rounded-full bg-cyan-900/30 flex items-center justify-center hover:bg-cyan-900/50 transition"> | |
| <i class="fas fa-random text-xs"></i> | |
| </button> | |
| <button class="w-6 h-6 rounded-full bg-cyan-900/30 flex items-center justify-center hover:bg-cyan-900/50 transition"> | |
| <i class="fas fa-redo text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="relative mb-2"> | |
| <img src="https://source.unsplash.com/random/300x300/?lofi,music" alt="Album cover" class="w-full rounded-lg opacity-90 hover:opacity-100 transition"> | |
| <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition"> | |
| <button class="w-12 h-12 rounded-full bg-cyan-500/80 flex items-center justify-center text-white glow"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <h3 class="font-medium text-lg">Midnight Coding Session</h3> | |
| <p class="text-sm text-cyan-300">Lofi Vibes • 2023</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="progress-bar rounded-full mb-2"></div> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>1:23</span> | |
| <span>3:45</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-center items-center space-x-6 mb-6"> | |
| <button class="text-gray-300 hover:text-cyan-300 transition"> | |
| <i class="fas fa-step-backward text-xl"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-cyan-500 flex items-center justify-center text-white glow pulse"> | |
| <i class="fas fa-pause"></i> | |
| </button> | |
| <button class="text-gray-300 hover:text-cyan-300 transition"> | |
| <i class="fas fa-step-forward text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-2 rounded hover:bg-cyan-900/20 transition cursor-pointer"> | |
| <div class="w-8 h-8 bg-cyan-900/30 rounded flex items-center justify-center mr-3"> | |
| <i class="fas fa-music text-xs text-cyan-300"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="text-sm font-medium">Rainy Night Coding</h4> | |
| <p class="text-xs text-gray-400">Chillhop Essentials</p> | |
| </div> | |
| <span class="text-xs text-gray-400">2:45</span> | |
| </div> | |
| <div class="flex items-center p-2 rounded bg-cyan-900/30 transition cursor-pointer"> | |
| <div class="w-8 h-8 bg-cyan-500/20 rounded flex items-center justify-center mr-3"> | |
| <i class="fas fa-play text-xs text-cyan-300"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="text-sm font-medium">Synthwave Sunset</h4> | |
| <p class="text-xs text-gray-400">Retro Waves</p> | |
| </div> | |
| <span class="text-xs text-cyan-300">3:12</span> | |
| </div> | |
| <div class="flex items-center p-2 rounded hover:bg-cyan-900/20 transition cursor-pointer"> | |
| <div class="w-8 h-8 bg-cyan-900/30 rounded flex items-center justify-center mr-3"> | |
| <i class="fas fa-music text-xs text-cyan-300"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="text-sm font-medium">Coffee Break</h4> | |
| <p class="text-xs text-gray-400">Jazz Lofi</p> | |
| </div> | |
| <span class="text-xs text-gray-400">1:56</span> | |
| </div> | |
| <div class="flex items-center p-2 rounded hover:bg-cyan-900/20 transition cursor-pointer"> | |
| <div class="w-8 h-8 bg-cyan-900/30 rounded flex items-center justify-center mr-3"> | |
| <i class="fas fa-music text-xs text-cyan-300"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="text-sm font-medium">Neon Dreams</h4> | |
| <p class="text-xs text-gray-400">Cyberpunk Mix</p> | |
| </div> | |
| <span class="text-xs text-gray-400">4:23</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-cyan-900/30 flex justify-between"> | |
| <button class="flex items-center space-x-2 text-sm text-cyan-300 hover:text-cyan-200"> | |
| <i class="fas fa-plus"></i> | |
| <span>Add Playlist</span> | |
| </button> | |
| <button class="flex items-center space-x-2 text-sm text-purple-300 hover:text-purple-200"> | |
| <i class="fas fa-volume-up"></i> | |
| <span>Volume</span> | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Terminal Output Section --> | |
| <section class="container mx-auto px-4 pb-6"> | |
| <div class="bg-black/70 rounded-xl p-4 neon-border"> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-gray-600"></div> | |
| <div class="w-3 h-3 rounded-full bg-gray-600"></div> | |
| <div class="w-3 h-3 rounded-full bg-gray-600"></div> | |
| </div> | |
| <div class="text-sm font-mono text-gray-400"> | |
| Terminal Output | |
| </div> | |
| </div> | |
| <div class="font-mono text-sm text-green-300 h-32 overflow-y-auto scrollbar-hide p-2"> | |
| <div class="mb-1">$ node main.js</div> | |
| <div class="mb-1">🎵 Music started...</div> | |
| <div class="mb-1">Now playing: lofi beats</div> | |
| <div class="text-gray-400">// Running on http://localhost:8080</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Theme Switcher Modal (Hidden by default) --> | |
| <div id="theme-modal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300"> | |
| <div class="bg-gray-900/90 backdrop-blur-lg rounded-xl p-6 max-w-md w-full neon-border transform translate-y-4 transition-transform duration-300"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="title-font text-xl rainbow-text">Select Theme</h3> | |
| <button id="close-theme" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="theme-option bg-gradient-to-br from-cyan-900 to-gray-900 p-4 rounded-lg cursor-pointer hover:ring-2 ring-cyan-400 transition" data-theme="cyberpunk"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-medium">Cyberpunk</span> | |
| <i class="fas fa-check-circle text-cyan-400 hidden"></i> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <div class="w-4 h-4 bg-cyan-400 rounded-sm"></div> | |
| <div class="w-4 h-4 bg-purple-500 rounded-sm"></div> | |
| <div class="w-4 h-4 bg-pink-500 rounded-sm"></div> | |
| </div> | |
| </div> | |
| <div class="theme-option bg-gradient-to-br from-purple-900 to-gray-900 p-4 rounded-lg cursor-pointer hover:ring-2 ring-purple-400 transition" data-theme="synthwave"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-medium">Synthwave</span> | |
| <i class="fas fa-check-circle text-purple-400 hidden"></i> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <div class="w-4 h-4 bg-purple-400 rounded-sm"></div> | |
| <div class="w-4 h-4 bg-pink-500 rounded-sm"></div> | |
| <div class="w-4 h-4 bg-yellow-400 rounded-sm"></div> | |
| </div> | |
| </div> | |
| <div class="theme-option bg-gradient-to-br from-green-900 to-gray-900 p-4 rounded-lg cursor-pointer hover:ring-2 ring-green-400 transition" data-theme="hacker"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-medium">Hacker</span> | |
| <i class="fas fa-check-circle text-green-400 hidden"></i> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <div class="w-4 h-4 bg-green-400 rounded-sm"></div> | |
| <div class="w-4 h-4 bg-gray-400 rounded-sm"></div> | |
| <div class="w-4 h-4 bg-white rounded-sm"></div> | |
| </div> | |
| </div> | |
| <div class="theme-option bg-gradient-to-br from-pink-900 to-gray-900 p-4 rounded-lg cursor-pointer hover:ring-2 ring-pink-400 transition" data-theme="neon"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-medium">Neon Dreams</span> | |
| <i class="fas fa-check-circle text-pink-400 hidden"></i> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <div class="w-4 h-4 bg-pink-400 rounded-sm"></div> | |
| <div class="w-4 h-4 bg-blue-400 rounded-sm"></div> | |
| <div class="w-4 h-4 bg-yellow-400 rounded-sm"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-800 flex justify-end"> | |
| <button id="apply-theme" class="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg transition"> | |
| Apply Theme | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="container mx-auto px-4 py-6 text-center text-sm text-gray-500"> | |
| <p>Made with <i class="fas fa-heart text-pink-400"></i> for night coders • VibeCoder 2023</p> | |
| </footer> | |
| <script> | |
| // Theme switcher functionality | |
| const themeSwitcher = document.getElementById('theme-switcher'); | |
| const themeModal = document.getElementById('theme-modal'); | |
| const closeTheme = document.getElementById('close-theme'); | |
| const applyTheme = document.getElementById('apply-theme'); | |
| const themeOptions = document.querySelectorAll('.theme-option'); | |
| let selectedTheme = 'cyberpunk'; | |
| themeSwitcher.addEventListener('click', () => { | |
| themeModal.classList.remove('pointer-events-none'); | |
| themeModal.classList.add('pointer-events-auto'); | |
| themeModal.classList.remove('opacity-0'); | |
| themeModal.querySelector('div').classList.remove('translate-y-4'); | |
| }); | |
| closeTheme.addEventListener('click', () => { | |
| themeModal.classList.add('pointer-events-none'); | |
| themeModal.classList.remove('pointer-events-auto'); | |
| themeModal.classList.add('opacity-0'); | |
| themeModal.querySelector('div').classList.add('translate-y-4'); | |
| }); | |
| themeOptions.forEach(option => { | |
| option.addEventListener('click', () => { | |
| themeOptions.forEach(opt => { | |
| opt.querySelector('.fa-check-circle').classList.add('hidden'); | |
| }); | |
| option.querySelector('.fa-check-circle').classList.remove('hidden'); | |
| selectedTheme = option.dataset.theme; | |
| }); | |
| }); | |
| applyTheme.addEventListener('click', () => { | |
| // In a real app, this would change the theme colors | |
| alert(`Theme changed to ${selectedTheme}!`); | |
| closeTheme.click(); | |
| }); | |
| // Music player functionality | |
| const playPauseBtn = document.querySelector('.music-player .pulse'); | |
| let isPlaying = true; | |
| playPauseBtn.addEventListener('click', () => { | |
| isPlaying = !isPlaying; | |
| if (isPlaying) { | |
| playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>'; | |
| playPauseBtn.classList.add('pulse'); | |
| } else { | |
| playPauseBtn.innerHTML = '<i class="fas fa-play"></i>'; | |
| playPauseBtn.classList.remove('pulse'); | |
| } | |
| }); | |
| // Terminal-like typing effect for code editor | |
| const codeInput = document.getElementById('code-input'); | |
| const codeText = codeInput.value; | |
| codeInput.value = ''; | |
| let i = 0; | |
| function typeWriter() { | |
| if (i < codeText.length) { | |
| codeInput.value += codeText.charAt(i); | |
| i++; | |
| setTimeout(typeWriter, Math.random() * 10); | |
| } | |
| } | |
| // Start typing effect after a short delay | |
| setTimeout(typeWriter, 1000); | |
| </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=cenktekin/vibecoder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |