| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Spotify Multi-Tab Manager</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=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| :root { |
| --spotify-green: #1DB954; |
| --spotify-black: #191414; |
| --spotify-dark: #121212; |
| --spotify-light: #282828; |
| --spotify-text: #FFFFFF; |
| --spotify-gray: #B3B3B3; |
| } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: var(--spotify-dark); |
| color: var(--spotify-text); |
| overflow-x: hidden; |
| } |
| |
| .tab-indicator { |
| transition: all 0.3s ease; |
| } |
| |
| .tab-content { |
| transform-origin: top center; |
| animation: fadeIn 0.3s ease forwards; |
| } |
| |
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: translateY(10px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .wave-animation { |
| position: relative; |
| height: 20px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .wave { |
| height: 100%; |
| width: 3px; |
| margin: 0 2px; |
| background-color: var(--spotify-green); |
| border-radius: 10px; |
| animation: wave 1.2s infinite ease-in-out; |
| } |
| |
| .wave:nth-child(2) { |
| animation-delay: 0.1s; |
| } |
| |
| .wave:nth-child(3) { |
| animation-delay: 0.2s; |
| } |
| |
| .wave:nth-child(4) { |
| animation-delay: 0.3s; |
| } |
| |
| .wave:nth-child(5) { |
| animation-delay: 0.4s; |
| } |
| |
| @keyframes wave { |
| 0%, 40%, 100% { |
| transform: scaleY(0.4); |
| } |
| 20% { |
| transform: scaleY(1); |
| } |
| } |
| |
| .progress-bar { |
| height: 4px; |
| background-color: var(--spotify-light); |
| border-radius: 2px; |
| overflow: hidden; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| background-color: var(--spotify-green); |
| border-radius: 2px; |
| transition: width 0.1s linear; |
| } |
| |
| .tab-item { |
| transition: all 0.2s ease; |
| } |
| |
| .tab-item:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| } |
| |
| .volume-slider::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 16px; |
| height: 16px; |
| background: var(--spotify-green); |
| border-radius: 50%; |
| cursor: pointer; |
| } |
| |
| .volume-slider::-moz-range-thumb { |
| width: 16px; |
| height: 16px; |
| background: var(--spotify-green); |
| border-radius: 50%; |
| cursor: pointer; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| <div class="container mx-auto px-4 py-6 max-w-md"> |
| |
| <header class="flex justify-between items-center mb-8"> |
| <div class="flex items-center"> |
| <i class="fab fa-spotify text-3xl text-green-500 mr-2"></i> |
| <h1 class="text-xl font-bold">MultiTab</h1> |
| </div> |
| <div class="flex space-x-4"> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-search"></i> |
| </button> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-cog"></i> |
| </button> |
| </div> |
| </header> |
| |
| |
| <div class="bg-spotify-light rounded-xl p-6 mb-6 shadow-lg" style="background-color: var(--spotify-light);"> |
| <div class="flex justify-between items-center mb-4"> |
| <div> |
| <h2 class="font-semibold text-lg">Now Playing</h2> |
| <p class="text-gray-400 text-sm">Tab 1: Workout Mix</p> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <span class="text-xs text-gray-400">1/10</span> |
| <button class="bg-green-500 text-white p-2 rounded-full hover:bg-green-600 transition"> |
| <i class="fas fa-random"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex justify-center mb-6"> |
| <div class="w-48 h-48 bg-gradient-to-br from-purple-500 to-blue-500 rounded-xl shadow-lg overflow-hidden"> |
| <img src="https://i.scdn.co/image/ab67616d00001e02ff9ca10b55ce82ae553c8228" alt="Album Cover" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| |
| <div class="text-center mb-6"> |
| <h3 class="font-bold text-lg">Blinding Lights</h3> |
| <p class="text-gray-400">The Weeknd</p> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="progress-bar mb-1"> |
| <div class="progress-fill" style="width: 65%;"></div> |
| </div> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>2:10</span> |
| <span>3:20</span> |
| </div> |
| </div> |
| |
| <div class="flex justify-between items-center"> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-step-backward text-xl"></i> |
| </button> |
| <button class="bg-green-500 text-white p-4 rounded-full hover:bg-green-600 transition"> |
| <i class="fas fa-pause text-xl"></i> |
| </button> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-step-forward text-xl"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="mb-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="font-semibold text-lg">Your Tabs</h2> |
| <button id="add-tab-btn" class="bg-green-500 text-white px-3 py-1 rounded-full text-sm hover:bg-green-600 transition"> |
| <i class="fas fa-plus mr-1"></i> Add Tab |
| </button> |
| </div> |
| |
| <div class="relative mb-2"> |
| <div class="flex overflow-x-auto pb-2 space-x-2" id="tab-list"> |
| |
| </div> |
| <div class="tab-indicator absolute bottom-0 left-0 h-0.5 bg-green-500 transition-all duration-300"></div> |
| </div> |
| </div> |
| |
| |
| <div class="tab-content" id="tab-content"> |
| |
| <div class="bg-spotify-light rounded-xl p-4" style="background-color: var(--spotify-light);"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-medium">Workout Mix</h3> |
| <div class="flex items-center space-x-2"> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-random"></i> |
| </button> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-redo"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="space-y-3"> |
| |
| <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-800 transition"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-gray-700 rounded mr-3 overflow-hidden"> |
| <img src="https://i.scdn.co/image/ab67616d00001e02ff9ca10b55ce82ae553c8228" alt="Track" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Blinding Lights</p> |
| <p class="text-xs text-gray-400">The Weeknd</p> |
| </div> |
| </div> |
| <div class="wave-animation"> |
| <div class="wave"></div> |
| <div class="wave"></div> |
| <div class="wave"></div> |
| <div class="wave"></div> |
| <div class="wave"></div> |
| </div> |
| </div> |
| |
| <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-800 transition"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-gray-700 rounded mr-3 overflow-hidden"> |
| <img src="https://i.scdn.co/image/ab67616d00001e02c591d9f35d9e68c5e86e8b6b" alt="Track" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Save Your Tears</p> |
| <p class="text-xs text-gray-400">The Weeknd</p> |
| </div> |
| </div> |
| <div class="text-gray-400 text-xs">3:35</div> |
| </div> |
| |
| <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-800 transition"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-gray-700 rounded mr-3 overflow-hidden"> |
| <img src="https://i.scdn.co/image/ab67616d00001e0268e3a5c5d456a5a3b8d6e1a0" alt="Track" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Levitating</p> |
| <p class="text-xs text-gray-400">Dua Lipa</p> |
| </div> |
| </div> |
| <div class="text-gray-400 text-xs">3:23</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="fixed bottom-0 left-0 right-0 bg-spotify-light py-3 px-6 shadow-lg" style="background-color: var(--spotify-light);"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 bg-gray-700 rounded overflow-hidden"> |
| <img src="https://i.scdn.co/image/ab67616d00001e02ff9ca10b55ce82ae553c8228" alt="Album" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Blinding Lights</p> |
| <p class="text-xs text-gray-400">The Weeknd</p> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-pause"></i> |
| </button> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-step-forward"></i> |
| </button> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-volume-down text-gray-400"></i> |
| <input type="range" min="0" max="100" value="70" class="volume-slider w-16 accent-green-500"> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-2 flex justify-between items-center text-xs text-gray-400"> |
| <span>Master Controls</span> |
| <div class="flex space-x-2"> |
| <button class="hover:text-white"> |
| <i class="fas fa-sliders-h"></i> |
| </button> |
| <button class="hover:text-white"> |
| <i class="fas fa-sync-alt"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| // Sample tab data |
| const tabs = [ |
| { id: 1, name: 'Workout Mix', active: true }, |
| { id: 2, name: 'Chill Vibes', active: false }, |
| { id: 3, name: 'Focus Flow', active: false }, |
| { id: 4, name: 'Party Hits', active: false }, |
| { id: 5, name: 'Jazz Lounge', active: false }, |
| { id: 6, name: 'Rock Classics', active: false }, |
| { id: 7, name: 'Indie Mix', active: false }, |
| { id: 8, name: 'Hip Hop', active: false }, |
| { id: 9, name: 'Electronic', active: false }, |
| { id: 10, name: 'Acoustic', active: false } |
| ]; |
| |
| const tabList = document.getElementById('tab-list'); |
| const tabContent = document.getElementById('tab-content'); |
| const addTabBtn = document.getElementById('add-tab-btn'); |
| const tabIndicator = document.querySelector('.tab-indicator'); |
| |
| // Render tabs |
| function renderTabs() { |
| tabList.innerHTML = ''; |
| |
| tabs.forEach((tab, index) => { |
| const tabElement = document.createElement('div'); |
| tabElement.className = `tab-item flex-shrink-0 px-4 py-2 rounded-full cursor-pointer ${tab.active ? 'bg-green-500 text-white' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'}`; |
| tabElement.textContent = tab.name; |
| tabElement.dataset.tabId = tab.id; |
| |
| tabElement.addEventListener('click', () => { |
| // Update active tab |
| tabs.forEach(t => t.active = false); |
| tab.active = true; |
| renderTabs(); |
| loadTabContent(tab.id); |
| |
| // Move indicator |
| const tabRect = tabElement.getBoundingClientRect(); |
| const containerRect = tabList.getBoundingClientRect(); |
| tabIndicator.style.width = `${tabRect.width}px`; |
| tabIndicator.style.transform = `translateX(${tabRect.left - containerRect.left}px)`; |
| }); |
| |
| tabList.appendChild(tabElement); |
| |
| // Set initial indicator position for active tab |
| if (tab.active) { |
| setTimeout(() => { |
| const tabRect = tabElement.getBoundingClientRect(); |
| const containerRect = tabList.getBoundingClientRect(); |
| tabIndicator.style.width = `${tabRect.width}px`; |
| tabIndicator.style.transform = `translateX(${tabRect.left - containerRect.left}px)`; |
| }, 100); |
| } |
| }); |
| } |
| |
| // Load tab content |
| function loadTabContent(tabId) { |
| // In a real app, this would fetch content for the specific tab |
| // For demo, we'll just show a placeholder |
| tabContent.innerHTML = ` |
| <div class="bg-spotify-light rounded-xl p-4" style="background-color: var(--spotify-light);"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-medium">${tabs.find(t => t.id === tabId).name}</h3> |
| <div class="flex items-center space-x-2"> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-random"></i> |
| </button> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-redo"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="space-y-3"> |
| <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-800 transition"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-gray-700 rounded mr-3 overflow-hidden"> |
| <img src="https://i.scdn.co/image/ab67616d00001e02ff9ca10b55ce82ae553c8228" alt="Track" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Current Playing</p> |
| <p class="text-xs text-gray-400">Artist Name</p> |
| </div> |
| </div> |
| <div class="wave-animation"> |
| <div class="wave"></div> |
| <div class="wave"></div> |
| <div class="wave"></div> |
| <div class="wave"></div> |
| <div class="wave"></div> |
| </div> |
| </div> |
| |
| <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-800 transition"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-gray-700 rounded mr-3 overflow-hidden"> |
| <img src="https://i.scdn.co/image/ab67616d00001e02c591d9f35d9e68c5e86e8b6b" alt="Track" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Next Track</p> |
| <p class="text-xs text-gray-400">Artist Name</p> |
| </div> |
| </div> |
| <div class="text-gray-400 text-xs">3:35</div> |
| </div> |
| |
| <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-800 transition"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-gray-700 rounded mr-3 overflow-hidden"> |
| <img src="https://i.scdn.co/image/ab67616d00001e0268e3a5c5d456a5a3b8d6e1a0" alt="Track" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Upcoming</p> |
| <p class="text-xs text-gray-400">Artist Name</p> |
| </div> |
| </div> |
| <div class="text-gray-400 text-xs">3:23</div> |
| </div> |
| </div> |
| </div> |
| `; |
| } |
| |
| // Add new tab |
| addTabBtn.addEventListener('click', () => { |
| if (tabs.length < 10) { |
| const newId = tabs.length + 1; |
| tabs.forEach(t => t.active = false); |
| tabs.push({ |
| id: newId, |
| name: `New Tab ${newId}`, |
| active: true |
| }); |
| renderTabs(); |
| loadTabContent(newId); |
| } else { |
| alert('Maximum of 10 tabs reached!'); |
| } |
| }); |
| |
| // Initialize |
| renderTabs(); |
| loadTabContent(1); |
| |
| // Simulate progress bar movement |
| setInterval(() => { |
| const progressFill = document.querySelector('.progress-fill'); |
| if (progressFill) { |
| const currentWidth = parseFloat(progressFill.style.width || '0'); |
| const newWidth = currentWidth >= 100 ? 0 : currentWidth + 0.5; |
| progressFill.style.width = `${newWidth}%`; |
| } |
| }, 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=Diabolov/2spot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
