From 897b244d16c7b78adda474bbe5459dac2a1e39ac Mon Sep 17 00:00:00 2001
From: el-yazide mohamed <el-yazide.mohamed@esadhar.fr>
Date: Sun, 13 Apr 2025 17:23:03 +0200
Subject: [PATCH] lecteur sons

---
 assets/front.html       |  10 +--
 assets/hell_even.html   |  47 +++++------
 assets/hell_even.js     |  47 +++++++++++
 assets/main.html        |   4 +-
 assets/muddy_files.html |  41 +++++----
 assets/muddy_files.js   |  47 +++++++++++
 assets/styleshe.css     | 180 ++++++++++++++++++++++------------------
 assets/stylesmf.css     | 165 ++++++++++++++++++++++++++----------
 8 files changed, 368 insertions(+), 173 deletions(-)
 create mode 100644 assets/hell_even.js
diff --git a/assets/front.html b/assets/front.html
index 319ae93..a01fca0 100644
--- a/assets/front.html
+++ b/assets/front.html
@@ -12,12 +12,12 @@
     <body>
 
       <header>
-        <a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
+        <a href="main.html"><img src="logo.png" class="logo"></a>
       </header>
       
       <div class="music-list">
-        
-        <a href="file:///home/devel/Desktop/loop-code/assets/muddy_files.html" class="music-card">
+
+        <a href="muddy_files.html" class="music-card">
           <img src="muddyfiles.jpg" alt="muddyfiles">
           <div class="music-info">
             <h3>Muddy Files</h3>
@@ -25,7 +25,7 @@
           </div>
         </a>
       
-        <a href="file:///home/devel/Desktop/loop-code/assets/hell_even.html" class="music-card">
+        <a href="hell_even.html" class="music-card">
           <img src="helleven.jpg" alt="helleven">
           <div class="music-info">
             <h3>Hell Even</h3>
@@ -33,7 +33,7 @@
           </div>
         </a>
 
-        <a href="file:///home/devel/Desktop/loop-code/assets/hell_even.html" class="music-card">
+        <a href="hell_even.html" class="music-card">
           <img src="stamina.jpg" alt="stamina">
           <div class="music-info">
             <h3>Stamina</h3>
diff --git a/assets/hell_even.html b/assets/hell_even.html
index ec395c3..f2231df 100644
--- a/assets/hell_even.html
+++ b/assets/hell_even.html
@@ -1,31 +1,30 @@
 <!DOCTYPE html>
 <html lang="fr">
-    <head>
-        <meta charset="UTF-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>LOOP</title>
-        <base href="./">
-        <script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
-        <link rel="stylesheet" href="styleshe.css">
-    </head>
-    <body>
+<head>
+  <meta charset="UTF-8">
+  <title>Hell Even</title>
+  <link rel="stylesheet" href="styleshe.css">
+</head>
+<body>
+  <header>
+    <a href="main.html"><img src="logo.png" alt="Logo" class="logo"></a>
+  </header>
 
-      <header>
-        <a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
-      </header>
-
-      <h1>Let your favorite songs play on LOOP.</h1>
-      
-
-      <div class="login-container">
-        
+  <div class="container">
+    <div class="vinyl-wrapper">
+      <div class="vinyl">
+        <img src="pochette.jpg" alt="Pochette de l'album">
       </div>
-    
-      <h2>Don't have an account ?<a href="" class="orange"> Sign up now.</a> </span></h2>
+    </div>
 
-        <script src="script.js"></script>
+    <div class="audio-player">
+      <audio id="audio" src="paradisev2.mp3"></audio>
+      <button id="play-pause">▶️</button>
+      <input type="range" id="progress" value="0" step="1">
+      <div id="time">0:00 / 0:00</div>
+    </div>
+  </div>
 
-    </body>
+  <script src="muddy_files.js"></script>
+</body>
 </html>
-
diff --git a/assets/hell_even.js b/assets/hell_even.js
new file mode 100644
index 0000000..b77d4b5
--- /dev/null
+++ b/assets/hell_even.js
@@ -0,0 +1,47 @@
+const audio = document.getElementById('audio');
+const playPauseBtn = document.getElementById('play-pause');
+const progress = document.getElementById('progress');
+const time = document.getElementById('time');
+const vinyl = document.querySelector('.vinyl');
+
+let isPlaying = false;
+
+// Play / Pause button
+playPauseBtn.addEventListener('click', () => {
+  if (isPlaying) {
+    audio.pause();
+    vinyl.style.animationPlayState = 'paused';
+    playPauseBtn.textContent = '▶️';
+  } else {
+    audio.play();
+    vinyl.style.animationPlayState = 'running';
+    playPauseBtn.textContent = '⏸️';
+  }
+  isPlaying = !isPlaying;
+});
+
+// Update progress and time
+audio.addEventListener('timeupdate', () => {
+  progress.value = audio.currentTime;
+  updateTimeDisplay();
+});
+
+// Set duration when audio loads
+audio.addEventListener('loadedmetadata', () => {
+  progress.max = audio.duration;
+  updateTimeDisplay();
+});
+
+// Seek audio
+progress.addEventListener('input', () => {
+  audio.currentTime = progress.value;
+});
+
+function updateTimeDisplay() {
+  const format = (s) => {
+    const m = Math.floor(s / 60);
+    const ss = Math.floor(s % 60);
+    return `${m}:${ss < 10 ? '0' + ss : ss}`;
+  };
+  time.textContent = `${format(audio.currentTime)} / ${format(audio.duration)}`;
+}
diff --git a/assets/main.html b/assets/main.html
index ec48afd..81d8800 100644
--- a/assets/main.html
+++ b/assets/main.html
@@ -12,7 +12,7 @@
     <body>
 
       <header>
-        <a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
+        <a href="main.html"><img src="logo.png" class="logo"></a>
       </header>
 
       <h1>Let your favorite songs play on LOOP.</h1>
@@ -21,7 +21,7 @@
       <div class="login-container">
         <input type="text" placeholder="Username" required>
         <input type="password" placeholder="Password" required>
-        <a href="file:///home/devel/Desktop/loop-code/assets/front.html" class="button">Log In</a>
+        <a href="front.html" class="button">Log In</a>
       </div>
     
       <h2>Don't have an account ?<a href="" class="orange"> Sign up now.</a> </span></h2>
diff --git a/assets/muddy_files.html b/assets/muddy_files.html
index 038bb19..a97d8ce 100644
--- a/assets/muddy_files.html
+++ b/assets/muddy_files.html
@@ -1,23 +1,30 @@
 <!DOCTYPE html>
 <html lang="fr">
-    <head>
-        <meta charset="UTF-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>LOOP</title>
-        <base href="./">
-        <script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
-        <link rel="stylesheet" href="stylesmf.css">
-    </head>
-    <body>
+<head>
+  <meta charset="UTF-8">
+  <title>Muddy Files</title>
+  <link rel="stylesheet" href="stylesmf.css">
+</head>
+<body>
+  <header>
+    <a href="main.html"><img src="logo.png" alt="Logo" class="logo"></a>
+  </header>
 
-      <header>
-        <a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
-      </header>
+  <div class="container">
+    <div class="vinyl-wrapper">
+      <div class="vinyl">
+        <img src="pochette.jpg" alt="Pochette de l'album">
+      </div>
+    </div>
 
-      
-        <script src="script.js"></script>
+    <div class="audio-player">
+      <audio id="audio" src="muddy_files.mp3"></audio>
+      <button id="play-pause">▶️</button>
+      <input type="range" id="progress" value="0" step="1">
+      <div id="time">0:00 / 0:00</div>
+    </div>
+  </div>
 
-    </body>
+  <script src="muddy_files.js"></script>
+</body>
 </html>
-
diff --git a/assets/muddy_files.js b/assets/muddy_files.js
index e69de29..b77d4b5 100644
--- a/assets/muddy_files.js
+++ b/assets/muddy_files.js
@@ -0,0 +1,47 @@
+const audio = document.getElementById('audio');
+const playPauseBtn = document.getElementById('play-pause');
+const progress = document.getElementById('progress');
+const time = document.getElementById('time');
+const vinyl = document.querySelector('.vinyl');
+
+let isPlaying = false;
+
+// Play / Pause button
+playPauseBtn.addEventListener('click', () => {
+  if (isPlaying) {
+    audio.pause();
+    vinyl.style.animationPlayState = 'paused';
+    playPauseBtn.textContent = '▶️';
+  } else {
+    audio.play();
+    vinyl.style.animationPlayState = 'running';
+    playPauseBtn.textContent = '⏸️';
+  }
+  isPlaying = !isPlaying;
+});
+
+// Update progress and time
+audio.addEventListener('timeupdate', () => {
+  progress.value = audio.currentTime;
+  updateTimeDisplay();
+});
+
+// Set duration when audio loads
+audio.addEventListener('loadedmetadata', () => {
+  progress.max = audio.duration;
+  updateTimeDisplay();
+});
+
+// Seek audio
+progress.addEventListener('input', () => {
+  audio.currentTime = progress.value;
+});
+
+function updateTimeDisplay() {
+  const format = (s) => {
+    const m = Math.floor(s / 60);
+    const ss = Math.floor(s % 60);
+    return `${m}:${ss < 10 ? '0' + ss : ss}`;
+  };
+  time.textContent = `${format(audio.currentTime)} / ${format(audio.duration)}`;
+}
diff --git a/assets/styleshe.css b/assets/styleshe.css
index abd946b..05162f9 100644
--- a/assets/styleshe.css
+++ b/assets/styleshe.css
@@ -1,109 +1,123 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
-*{
-    margin: 0;
-    padding: 0;
-    font-family: 'Poppins', sans-serif;
-    box-sizing: border-box;
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
 }
 
-  @media (min-width: 768px) { /* Écran plus large (tablette, PC) */
-    .container {
-      flex-direction: row;
-      justify-content: space-around;
-    }
-  }
-
-  /* Par défaut, style mobile */
-  body {
-    font-size: 16px;
-    background: linear-gradient(to bottom, #585858, #000000);
-    display: grid;
-    place-items: center; /* Centre horizontalement et verticalement */
-    height: 100vh;
-    margin: 0;
-  }
-  
-  /* Quand l'écran est large (ex : tablette ou ordinateur) */
-  @media (min-width: 768px) {
-    body {
-      font-size: 18px;
-    }
-  }
-
-
-
-.logo{
-    margin-top: 40px;
-    max-width: 280px;
+body {
+  background: linear-gradient(to bottom, #500000, #000000);
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
 }
 
-.logofront{
-  max-width: 130px;
-  margin-right: 700px;
-  margin-bottom: 880px;
+header {
+  width: 100%;
+  padding: 15px 30px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.logo {
+  width: 100px;
+  height: auto;
 }
 
 .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  
-h1 {
-    color: #ffffff;
-    font-size: 70%;
+  margin-top: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-h2 {
-    color: #ffffff;
-    font-size: 40%;
+.vinyl-wrapper {
+  width: 250px;
+  height: 250px;
+  margin-bottom: 30px;
+  position: relative;
 }
 
-.orange {
-    color: #ffa600;
-    text-decoration: none;
+.vinyl {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: spin 5s linear infinite paused;
+  overflow: hidden;
 }
 
-.orange:hover {
-    text-decoration: underline;
+.vinyl img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  z-index: 2;
 }
 
-.login-container {
-    background: white;
-    padding: 20px;
-    border-radius: 30px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-    width: 300px;
-    height: 400px;
-    text-align: center
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
-.login-container input {
-    width: 100%;
-    padding: 10px;
-    margin: 10px 0;
-    border: 1px solid #ccc;
-    border-radius: 50px;
-    font-size: 16px;
+/* Bouton play/pause en blanc */
+#play-pause {
+  color: white;
+  font-size: 30px;
+  background: none;
+  border: none;
+  cursor: pointer;
 }
 
-.button {
-    width: 100%;
-    padding: 10px;
-    background-color:#ffa600;
-    color: white;
-    border: none;
-    border-radius: 50px;
-    font-size: 18px;
-    cursor: pointer;
-    transition: background 0.3s ease;
-    text-decoration: none;
+#play-pause:hover {
+  transform: scale(1.1);
+  transition: transform 0.2s ease;
 }
 
-.button:hover {
-    background-color: #dd3000;
+/* Barre de progression audio blanche */
+#progress {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 6px;
+  background: white;
+  border-radius: 3px;
+  outline: none;
+  margin: 10px 0;
 }
 
+/* Curseur (thumb) blanc */
+#progress::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+  border: none;
+}
 
-  
\ No newline at end of file
+#progress::-moz-range-thumb {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+  border: none;
+}
+
+/* Texte du timer blanc (déjà par défaut mais pour être sûr) */
+#time {
+  color: white;
+}
diff --git a/assets/stylesmf.css b/assets/stylesmf.css
index dc3ee1c..022ce32 100644
--- a/assets/stylesmf.css
+++ b/assets/stylesmf.css
@@ -1,42 +1,123 @@
-  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
-  *{
-      margin: 0;
-      padding: 0;
-      font-family: 'Poppins', sans-serif;
-      box-sizing: border-box;
-  
-  }
-  
-  html, body {
-      height: 100%;
-    }
-  
-  body {
-      background: linear-gradient(to bottom, #316997, #18344b);
-    }
-  
-  /* Structure de base */
-  header {
-      display: flex;
-      justify-content: flex-start; /* Aligne à gauche */
-      align-items: center;         /* Centré verticalement si tu ajoutes du texte à côté */
-      padding: 10px 20px;
-      position: relative;
-    }
-    
-    /* Style du logo */
-    .logo {
-      width: 120px;      /* Ajuste la taille selon ton design */
-      height: auto;
-    }
-    
-    /* Responsive pour smartphone */
-    @media (max-width: 768px) {
-      .logo {
-        width: 100px; /* Un peu plus petit sur mobile si nécessaire */
-      }
-    
-      header {
-        padding: 10px;
-      }
-    }
\ No newline at end of file
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+
+body {
+  background: linear-gradient(to bottom, #316997, #18344b);
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
+}
+
+header {
+  width: 100%;
+  padding: 15px 30px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.logo {
+  width: 100px;
+  height: auto;
+}
+
+.container {
+  margin-top: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.vinyl-wrapper {
+  width: 250px;
+  height: 250px;
+  margin-bottom: 30px;
+  position: relative;
+}
+
+.vinyl {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: spin 5s linear infinite paused;
+  overflow: hidden;
+}
+
+.vinyl img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  z-index: 2;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Bouton play/pause en blanc */
+#play-pause {
+  color: white;
+  font-size: 30px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+#play-pause:hover {
+  transform: scale(1.1);
+  transition: transform 0.2s ease;
+}
+
+/* Barre de progression audio blanche */
+#progress {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 6px;
+  background: white;
+  border-radius: 3px;
+  outline: none;
+  margin: 10px 0;
+}
+
+/* Curseur (thumb) blanc */
+#progress::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+  border: none;
+}
+
+#progress::-moz-range-thumb {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+  border: none;
+}
+
+/* Texte du timer blanc (déjà par défaut mais pour être sûr) */
+#time {
+  color: white;
+}
