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 @@
-
-
-
+
+
+
+
-
-
+
-
+
+
-
+
+
-
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 @@
- 
+
Let your favorite songs play on LOOP.
@@ -21,7 +21,7 @@
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 @@
-
-
-
-
-
LOOP
-
-
-
-
-
+
+
+
Muddy Files
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
-
-
+
+
-
+
+
-
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;
+}
