Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Melodify - Music Streaming</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎵</text></svg>"> | |
| <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> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#8A2BE2', | |
| secondary: '#1E1E2F', | |
| accent: '#2D2D44', | |
| dark: '#0F0F1A', | |
| light: '#F5F5F5' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background: linear-gradient(135deg, #0F0F1A 0%, #1E1E2F 50%, #2D2D44 100%); | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .music-bar { | |
| height: 4px; | |
| width: 4px; | |
| background: #8A2BE2; | |
| margin: 0 2px; | |
| border-radius: 4px; | |
| animation: musicBar 1.2s ease infinite alternate; | |
| } | |
| .music-bar:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .music-bar:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| .music-bar:nth-child(4) { | |
| animation-delay: 0.6s; | |
| } | |
| .music-bar:nth-child(5) { | |
| animation-delay: 0.8s; | |
| } | |
| @keyframes musicBar { | |
| 0% { | |
| transform: scaleY(1); | |
| } | |
| 100% { | |
| transform: scaleY(5); | |
| } | |
| } | |
| .player-progress { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 2px; | |
| outline: none; | |
| } | |
| .player-progress::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #8A2BE2; | |
| cursor: pointer; | |
| } | |
| .scroll-hidden { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .scroll-hidden::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .album-art { | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); | |
| animation: rotateAlbum 20s linear infinite; | |
| transform-origin: center; | |
| } | |
| @keyframes rotateAlbum { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .active-song { | |
| background: rgba(138, 43, 226, 0.15); | |
| border-left: 3px solid #8A2BE2; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #8A2BE2, #FF6B6B); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-light"> | |
| <!-- Main Container --> | |
| <div class="flex flex-col h-screen max-w-md mx-auto bg-dark"> | |
| <!-- Header --> | |
| <header class="p-4 flex justify-between items-center border-b border-accent"> | |
| <div class="flex items-center"> | |
| <i data-feather="menu" class="mr-4 text-light cursor-pointer" onclick="toggleMenu()"></i> | |
| <h1 class="text-xl font-bold gradient-text">Melodify</h1> | |
| </div> | |
| <div class="flex items-center"> | |
| <a href="search.html"><i data-feather="search" class="mr-4 text-light cursor-pointer"></i></a> | |
| <i data-feather="user" class="text-light cursor-pointer"></i> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 overflow-y-auto scroll-hidden p-4"> | |
| <!-- Now Playing Section --> | |
| <section class="mb-8"> | |
| <h2 class="text-lg font-semibold mb-4">Now Playing</h2> | |
| <div class="flex justify-center mb-6"> | |
| <div class="relative"> | |
| <img id="albumArt" src="https://huggingface.co/spaces/arthur6583/melodify/resolve/main/images/Screenshot_2025-10-13-03-24-06-08_2ca4e1d5ec83da2f54025413ac83b968.jpg" alt="Album Art" class="album-art w-64 h-64 rounded-2xl object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="bg-black bg-opacity-50 rounded-full p-4 cursor-pointer" onclick="togglePlay()"> | |
| <i data-feather="play" class="w-12 h-12 text-white" id="playIcon"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mb-2"> | |
| <h3 id="songTitle" class="text-xl font-bold">Blinding Lights</h3> | |
| <p id="artistName" class="text-gray-400">The Weeknd</p> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div class="mb-2"> | |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> | |
| <span id="currentTime">1:23</span> | |
| <span id="totalTime">3:45</span> | |
| </div> | |
| <input type="range" min="0" max="100" value="35" class="player-progress w-full" id="progressBar"> | |
| </div> | |
| <!-- Player Controls --> | |
| <div class="flex justify-center items-center space-x-8 mt-6"> | |
| <i data-feather="shuffle" class="text-gray-400 cursor-pointer"></i> | |
| <i data-feather="skip-back" class="w-8 h-8 text-light cursor-pointer" onclick="previousSong()"></i> | |
| <div class="bg-primary rounded-full p-3 cursor-pointer" onclick="togglePlay()"> | |
| <i data-feather="pause" class="w-8 h-8 text-white" id="playPauseIcon"></i> | |
| </div> | |
| <i data-feather="skip-forward" class="w-8 h-8 text-light cursor-pointer" onclick="nextSong()"></i> | |
| <i data-feather="repeat" class="text-gray-400 cursor-pointer"></i> | |
| </div> | |
| </section> | |
| <!-- Recently Played --> | |
| <section> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Recently Played</h2> | |
| <span class="text-primary text-sm">See All</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <!-- Song Item --> | |
| <div class="flex items-center p-3 rounded-lg active-song cursor-pointer" onclick="playSong(0)"> | |
| <img src="http://static.photos/music/60x60/12" alt="Song" class="w-12 h-12 rounded-lg object-cover mr-4"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Save Your Tears</h4> | |
| <p class="text-gray-400 text-sm">The Weeknd</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex mr-3"> | |
| <div class="music-bar"></div> | |
| <div class="music-bar"></div> | |
| <div class="music-bar"></div> | |
| <div class="music-bar"></div> | |
| <div class="music-bar"></div> | |
| </div> | |
| <i data-feather="more-vertical" class="text-gray-400 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <!-- Song Item --> | |
| <div class="flex items-center p-3 rounded-lg bg-accent cursor-pointer" onclick="playSong(1)"> | |
| <img src="http://static.photos/music/60x60/23" alt="Song" class="w-12 h-12 rounded-lg object-cover mr-4"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Levitating</h4> | |
| <p class="text-gray-400 text-sm">Dua Lipa</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-gray-400 text-sm mr-3">3:24</span> | |
| <i data-feather="more-vertical" class="text-gray-400 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <!-- Song Item --> | |
| <div class="flex items-center p-3 rounded-lg bg-accent cursor-pointer" onclick="playSong(2)"> | |
| <img src="http://static.photos/music/60x60/34" alt="Song" class="w-12 h-12 rounded-lg object-cover mr-4"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Stay</h4> | |
| <p class="text-gray-400 text-sm">The Kid LAROI, Justin Bieber</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-gray-400 text-sm mr-3">2:59</span> | |
| <i data-feather="more-vertical" class="text-gray-400 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <!-- Song Item --> | |
| <div class="flex items-center p-3 rounded-lg bg-accent cursor-pointer" onclick="playSong(3)"> | |
| <img src="http://static.photos/music/60x60/45" alt="Song" class="w-12 h-12 rounded-lg object-cover mr-4"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Good 4 U</h4> | |
| <p class="text-gray-400 text-sm">Olivia Rodrigo</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-gray-400 text-sm mr-3">2:58</span> | |
| <i data-feather="more-vertical" class="text-gray-400 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Navigation --> | |
| <nav class="flex justify-around items-center p-4 border-t border-accent bg-secondary"> | |
| <div class="flex flex-col items-center text-primary"> | |
| <i data-feather="home" class="w-6 h-6 cursor-pointer"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </div> | |
| <div class="flex flex-col items-center text-gray-400"> | |
| <a href="search.html"><i data-feather="search" class="w-6 h-6 cursor-pointer"></i></a> | |
| <span class="text-xs mt-1">Search</span> | |
| </div> | |
| <div class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="book" class="w-6 h-6 cursor-pointer"></i> | |
| <span class="text-xs mt-1">Library</span> | |
| </div> | |
| <div class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="heart" class="w-6 h-6 cursor-pointer"></i> | |
| <span class="text-xs mt-1">Favorites</span> | |
| </div> | |
| <div class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="user" class="w-6 h-6 cursor-pointer"></i> | |
| <span class="text-xs mt-1">Profile</span> | |
| </div> | |
| </nav> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Music player functionality | |
| const songs = [ | |
| { | |
| title: "Save Your Tears", | |
| artist: "The Weeknd", | |
| albumArt: "http://static.photos/music/60x60/12", | |
| duration: "3:24" | |
| }, | |
| { | |
| title: "Levitating", | |
| artist: "Dua Lipa", | |
| albumArt: "http://static.photos/music/60x60/23", | |
| duration: "3:24" | |
| }, | |
| { | |
| title: "Stay", | |
| artist: "The Kid LAROI, Justin Bieber", | |
| albumArt: "http://static.photos/music/60x60/34", | |
| duration: "2:59" | |
| }, | |
| { | |
| title: "Good 4 U", | |
| artist: "Olivia Rodrigo", | |
| albumArt: "http://static.photos/music/60x60/45", | |
| duration: "2:58" | |
| } | |
| ]; | |
| let currentSongIndex = 0; | |
| let isPlaying = true; | |
| function togglePlay() { | |
| isPlaying = !isPlaying; | |
| const playIcon = document.getElementById('playIcon'); | |
| const playPauseIcon = document.getElementById('playPauseIcon'); | |
| if (isPlaying) { | |
| playIcon.setAttribute('data-feather', 'pause'); | |
| playPauseIcon.setAttribute('data-feather', 'pause'); | |
| } else { | |
| playIcon.setAttribute('data-feather', 'play'); | |
| playPauseIcon.setAttribute('data-feather', 'play'); | |
| } | |
| feather.replace(); | |
| } | |
| function nextSong() { | |
| currentSongIndex = (currentSongIndex + 1) % songs.length; | |
| updatePlayer(); | |
| } | |
| function previousSong() { | |
| currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length; | |
| updatePlayer(); | |
| } | |
| function playSong(index) { | |
| currentSongIndex = index; | |
| updatePlayer(); | |
| isPlaying = true; | |
| const playIcon = document.getElementById('playIcon'); | |
| const playPauseIcon = document.getElementById('playPauseIcon'); | |
| playIcon.setAttribute('data-feather', 'pause'); | |
| playPauseIcon.setAttribute('data-feather', 'pause'); | |
| feather.replace(); | |
| } | |
| function updatePlayer() { | |
| const song = songs[currentSongIndex]; | |
| document.getElementById('songTitle').textContent = song.title; | |
| document.getElementById('artistName').textContent = song.artist; | |
| document.getElementById('albumArt').src = song.albumArt; | |
| } | |
| // Simulate music progress | |
| const progressBar = document.getElementById('progressBar'); | |
| const currentTimeElement = document.getElementById('currentTime'); | |
| let progress = 35; | |
| setInterval(() => { | |
| if (isPlaying) { | |
| progress += 0.1; | |
| if (progress > 100) progress = 0; | |
| progressBar.value = progress; | |
| // Update time display | |
| const totalSeconds = Math.floor(progress * 2.2); | |
| const minutes = Math.floor(totalSeconds / 60); | |
| const seconds = totalSeconds % 60; | |
| currentTimeElement.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; | |
| } | |
| }, 1000); | |
| function toggleMenu() { | |
| alert("Menu functionality would be implemented here"); | |
| } | |
| </script> | |
| </body> | |
| </html> | |