Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SynthStream Control Hub</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#10b981', | |
| dark: { | |
| 900: '#0f172a', | |
| 800: '#1e293b', | |
| 700: '#334155', | |
| 600: '#475569', | |
| 500: '#64748b' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .nav-tab { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .nav-tab:hover { | |
| transform: translateY(-1px); | |
| } | |
| .metric-card { | |
| transition: all 0.3s ease; | |
| } | |
| .metric-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .progress-slider { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| height: 4px; | |
| border-radius: 2px; | |
| background: #334155; | |
| outline: none; | |
| } | |
| .progress-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #10b981; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .progress-slider::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); | |
| } | |
| .queue-item { | |
| transition: all 0.3s ease; | |
| } | |
| .queue-item:hover { | |
| background: #1e293b; | |
| transform: translateX(2px); | |
| } | |
| .badge { | |
| transition: all 0.2s ease; | |
| } | |
| .badge:hover { | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark-900 text-gray-200 min-h-screen"> | |
| <!-- Header Section --> | |
| <header class="bg-dark-800 border-b border-dark-700 sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-primary/20 p-2 rounded-lg"> | |
| <i data-feather="settings" class="w-5 h-5 text-primary"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-xl font-bold text-white">Admin Dashboard</h1> | |
| <p class="text-sm text-dark-500">Monitor stream, manage blocks, control AI DJ</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2 bg-dark-700/50 rounded-full px-3 py-1"> | |
| <div class="w-2 h-2 bg-secondary rounded-full animate-pulse"></div> | |
| <span class="text-sm">System Online</span> | |
| </div> | |
| <div class="w-8 h-8 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center"> | |
| <span class="text-white text-sm font-semibold">AD</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navigation Bar --> | |
| <nav class="bg-dark-800 border-b border-dark-700"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex space-x-8"> | |
| <a href="#" class="nav-tab py-4 px-1 border-b-2 border-primary text-primary font-medium flex items-center space-x-2"> | |
| <i data-feather="activity" class="w-4 h-4"></i> | |
| <span>Overview</span> | |
| </a> | |
| <a href="#" class="nav-tab py-4 px-1 border-b-2 border-transparent text-dark-500 hover:text-gray-300 font-medium flex items-center space-x-2"> | |
| <i data-feather="music" class="w-4 h-4"></i> | |
| <span>Music Blocks</span> | |
| </a> | |
| <a href="#" class="nav-tab py-4 px-1 border-b-2 border-transparent text-dark-500 hover:text-gray-300 font-medium flex items-center space-x-2"> | |
| <i data-feather="folder" class="w-4 h-4"></i> | |
| <span>Library</span> | |
| </a> | |
| <a href="#" class="nav-tab py-4 px-1 border-b-2 border-transparent text-dark-500 hover:text-gray-300 font-medium flex items-center space-x-2"> | |
| <i data-feather="cpu" class="w-4 h-4"></i> | |
| <span>AI DJ</span> | |
| </a> | |
| <a href="#" class="nav-tab py-4 px-1 border-b-2 border-transparent text-dark-500 hover:text-gray-300 font-medium flex items-center space-x-2"> | |
| <i data-feather="list" class="w-4 h-4"></i> | |
| <span>Event Log</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Statistics Row --> | |
| <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4"> | |
| <!-- Submitted Card --> | |
| <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-2xl font-bold text-white">1</span> | |
| <i data-feather="upload" class="w-5 h-5 text-primary"></i> | |
| </div> | |
| <p class="text-sm text-dark-500 mt-1">Submitted</p> | |
| <div class="flex items-center space-x-1 mt-2"> | |
| <i data-feather="trending-up" class="w-4 h-4 text-secondary"></i> | |
| <span class="text-xs text-secondary">+0.0% from last 24h</span> | |
| </div> | |
| </div> | |
| <!-- Approved Card --> | |
| <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-2xl font-bold text-white">1</span> | |
| <i data-feather="check-circle" class="w-5 h-5 text-secondary"></i> | |
| </div> | |
| <p class="text-sm text-dark-500 mt-1">Approved</p> | |
| <div class="flex items-center space-x-1 mt-2"> | |
| <i data-feather="trending-up" class="w-4 h-4 text-secondary"></i> | |
| <span class="text-xs text-secondary">+0.0% from last 24h</span> | |
| </div> | |
| </div> | |
| <!-- Rejected Card --> | |
| <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-2xl font-bold text-white">0</span> | |
| <i data-feather="x-circle" class="w-5 h-5 text-red-400"></i> | |
| </div> | |
| <p class="text-sm text-dark-500 mt-1">Rejected</p> | |
| <div class="flex items-center space-x-1 mt-2"> | |
| <i data-feather="minus" class="w-4 h-4 text-dark-500"></i> | |
| <span class="text-xs text-dark-500">No change</span> | |
| </div> | |
| </div> | |
| <!-- Playing Card --> | |
| <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-2xl font-bold text-white">1</span> | |
| <i data-feather="play" class="w-5 h-5 text-primary"></i> | |
| </div> | |
| <p class="text-sm text-dark-500 mt-1">Playing</p> | |
| <div class="flex items-center space-x-1 mt-2"> | |
| <i data-feather="trending-up" class="w-4 h-4 text-secondary"></i> | |
| <span class="text-xs text-secondary">+100% from last 24h</span> | |
| </div> | |
| </div> | |
| <!-- Queue Card --> | |
| <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-2xl font-bold text-white">0</span> | |
| <i data-feather="list" class="w-5 h-5 text-primary"></i> | |
| </div> | |
| <p class="text-sm text-dark-500 mt-1">Queue</p> | |
| <div class="flex items-center space-x-1 mt-2"> | |
| <i data-feather="trending-down" class="w-4 h-4 text-red-400"></i> | |
| <span class="text-xs text-red-400">-100% from last 24h</span> | |
| </div> | |
| </div> | |
| <!-- Listeners Card --> | |
| <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-2xl font-bold text-white">42</span> | |
| <i data-feather="users" class="w-5 h-5 text-secondary"></i> | |
| </div> | |
| <p class="text-sm text-dark-500 mt-1">Listeners</p> | |
| <div class="flex items-center space-x-1 mt-2"> | |
| <i data-feather="trending-up" class="w-4 h-4 text-secondary"></i> | |
| <span class="text-xs text-secondary">+5.0% from last 24h</span> | |
| </div> | |
| </div> | |
| <!-- Uptime Card --> | |
| <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-2xl font-bold text-white">99.9%</span> | |
| <i data-feather="clock" class="w-5 h-5 text-primary"></i> | |
| </div> | |
| <p class="text-sm text-dark-500 mt-1">Uptime</p> | |
| <div class="flex items-center space-x-1 mt-2"> | |
| <i data-feather="trending-up" class="w-4 h-4 text-secondary"></i> | |
| <span class="text-xs text-secondary">+0.1% from last 24h</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content Area --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column - Music Blocks --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-dark-800 rounded-xl border border-dark-700 overflow-hidden"> | |
| <div class="bg-gradient-to-r from-dark-800 to-dark-700 px-6 py-4 border-b border-dark-600"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-primary/20 p-2 rounded-lg"> | |
| <i data-feather="folder" class="w-5 h-5 text-primary"></i> | |
| </div> | |
| <h2 class="text-lg font-semibold text-white">Music Blocks</h2> | |
| </div> | |
| </div> | |
| <div class="p-6 space-y-6"> | |
| <!-- Current Block --> | |
| <div class="bg-dark-700/50 rounded-lg p-4 border border-dark-600"> | |
| <h3 class="text-sm font-medium text-dark-400 mb-2">Current Block</h3> | |
| <p class="text-gray-300">No block active right now.</p> | |
| </div> | |
| <!-- Next Block --> | |
| <div class="bg-dark-700/50 rounded-lg p-4 border border-dark-600"> | |
| <h3 class="text-sm font-medium text-dark-400 mb-2">Next Block</h3> | |
| <p class="text-gray-300">No upcoming block scheduled.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Center Column - Now Playing --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-dark-800 rounded-xl border border-dark-700 overflow-hidden"> | |
| <div class="relative"> | |
| <div class="absolute top-4 right-4 z-10"> | |
| <button class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 transform hover:scale-105"> | |
| Skip | |
| </button> | |
| </div> | |
| <div class="bg-gradient-to-br from-primary/20 to-secondary/20 p-8 text-center"> | |
| <div class="inline-block bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20"> | |
| <div class="w-32 h-32 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-white text-2xl font-bold">BANG</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-center mb-6"> | |
| <p class="text-sm text-dark-500 mb-1">Now Playing</p> | |
| <h3 class="text-xl font-semibold text-white">DJ Toilettiquette - Bensound</h3> | |
| <p class="text-dark-500">The Elevator Bossa Nova</p> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div class="mb-6"> | |
| <div class="flex justify-between text-sm text-dark-500 mb-2"> | |
| <span>1:24</span> | |
| <span>3:45</span> | |
| </div> | |
| <input type="range" class="progress-slider w-full" value="38"> | |
| </div> | |
| <!-- Controls --> | |
| <div class="flex items-center justify-center space-x-8"> | |
| <button class="p-3 rounded-full bg-dark-700 hover:bg-dark-600 transition-all duration-200"> | |
| <i data-feather="skip-back" class="w-5 h-5 text-gray-400"></i> | |
| </button> | |
| <button class="p-4 rounded-full bg-primary hover:bg-primary/90 transition-all duration-200 transform hover:scale-105"> | |
| <i data-feather="play" class="w-6 h-6 text-white"></i> | |
| </button> | |
| <button class="p-3 rounded-full bg-dark-700 hover:bg-dark-600 transition-all duration-200"> | |
| <i data-feather="skip-forward" class="w-5 h-5 text-gray-400"></i> | |
| </button> | |
| <button class="p-3 rounded-full bg-dark-700 hover:bg-dark-600 transition-all duration-200"> | |
| <i data-feather="volume-2" class="w-5 h-5 text-gray-400"></i> | |
| </button> | |
| </div> | |
| <div class="text-center mt-6"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-secondary/20 text-secondary"> | |
| <i data-feather="check-circle" class="w-3 h-3 mr-1"></i> | |
| Ready | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Submit a Track --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-dark-800 rounded-xl border border-dark-700 overflow-hidden"> | |
| <div class="bg-gradient-to-r from-dark-800 to-dark-700 px-6 py-4 border-b border-dark-600"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-primary/20 p-2 rounded-lg"> | |
| <i data-feather="radio" class="w-5 h-5 text-primary"></i> | |
| </div> | |
| <h2 class="text-lg font-semibold text-white">Submit a Track</h2> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Tabs --> | |
| <div class="flex space-x-1 bg-dark-700 rounded-lg p-1 mb-6"> | |
| </body> | |
| </html> |