Rend les page fonctionnel

index.html

@@ -114,55 +114,52 @@
         <!-- 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"></i>
+                <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">
-                <i data-feather="search" class="mr-4 text-light"></i>
-                <i data-feather="user" class="text-light"></i>
+                <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 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 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">
+                        <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">
-                                <i data-feather="play" class="w-12 h-12 text-white"></i>
+                            <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 class="text-xl font-bold">Blinding Lights</h3>
-                    <p class="text-gray-400">The Weeknd</p>
+                    <h3 id="songTitle" class="text-xl font-bold">Blinding Lights</h3>
+                    <p id="artistName" class="text-gray-400">The Weeknd</p>
                 </div>
-                
-                <!-- Progress Bar -->
+<!-- Progress Bar -->
                 <div class="mb-2">
                     <div class="flex justify-between text-sm text-gray-400 mb-1">
-                        <span>1:23</span>
-                        <span>3:45</span>
+                        <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">
+                    <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"></i>
-                    <i data-feather="skip-back" class="w-8 h-8 text-light"></i>
-                    <div class="bg-primary rounded-full p-3">
-                        <i data-feather="pause" class="w-8 h-8 text-white"></i>
+                    <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"></i>
-                    <i data-feather="repeat" class="text-gray-400"></i>
+                    <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>
+</section>
 
             <!-- Recently Played -->
             <section>
@@ -170,10 +167,9 @@
                     <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">
+                    <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>
@@ -187,12 +183,11 @@
                                 <div class="music-bar"></div>
                                 <div class="music-bar"></div>
                             </div>
-                            <i data-feather="more-vertical" class="text-gray-400"></i>
+                            <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">
+                    <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>
@@ -200,12 +195,11 @@
                         </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"></i>
+                            <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">
+                    <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>
@@ -213,12 +207,11 @@
                         </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"></i>
+                            <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">
+                    <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>
@@ -226,56 +219,137 @@
                         </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"></i>
+                            <i data-feather="more-vertical" class="text-gray-400 cursor-pointer"></i>
                         </div>
                     </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"></i>
+                <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">
-                <i data-feather="search" class="w-6 h-6"></i>
+                <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"></i>
+                <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"></i>
+                <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"></i>
+                <i data-feather="user" class="w-6 h-6 cursor-pointer"></i>
                 <span class="text-xs mt-1">Profile</span>
             </div>
         </nav>
-    </div>
-
+</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.querySelector('.player-progress');
+        const progressBar = document.getElementById('progressBar');
+        const currentTimeElement = document.getElementById('currentTime');
         let progress = 35;
         
         setInterval(() => {
-            progress += 0.1;
-            if (progress > 100) progress = 0;
-            progressBar.value = progress;
-            
-            // Update time display
-            const currentTime = document.querySelector('.text-sm.text-gray-400:first-child');
-            const minutes = Math.floor(progress * 2.2 / 60);
-            const seconds = Math.floor(progress * 2.2 % 60);
-            currentTime.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+            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>