-
-
+
+
+
+
+
+
+
+
+ Muddy Files
+ Ely
+
+
+
+
+
+
+
+
+
-
-
+
+
-
+
diff --git a/assets/script.js b/assets/script.js
index b8d1d52..2d27620 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -1 +1,93 @@
-console.log( 'hello')
\ No newline at end of file
+// 1. Sélection des éléments du DOM
+const vinyl = document.getElementById('vinyl');
+const audio = document.getElementById('audio');
+const progress = document.getElementById('progress');
+const currentTimeEl = document.getElementById('currentTime');
+const durationEl = document.getElementById('duration');
+const backwardBtn = document.getElementById('backward');
+const forwardBtn = document.getElementById('forward');
+const loopBtn = document.getElementById('loop');
+
+// 2. Variables utiles
+let isPlaying = false;
+let isLooping = false;
+
+// 3. Fonctions
+
+// Fonction pour basculer la lecture
+function togglePlay() {
+ if (isPlaying) {
+ audio.pause();
+ vinyl.style.animationPlayState = 'paused';
+ } else {
+ audio.play();
+ vinyl.style.animationPlayState = 'running';
+ }
+ isPlaying = !isPlaying;
+}
+
+// Mise à jour de la barre de progression
+function updateProgress() {
+ const progressPercent = (audio.currentTime / audio.duration) * 100;
+ progress.value = progressPercent;
+ currentTimeEl.textContent = formatTime(audio.currentTime);
+}
+
+// Fonction pour formater le temps (min:sec)
+function formatTime(time) {
+ const minutes = Math.floor(time / 60);
+ const seconds = Math.floor(time % 60);
+ return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+}
+
+// Fonction pour changer la position de lecture en cliquant sur la barre
+function setProgress(e) {
+ const width = progress.clientWidth;
+ const clickX = e.offsetX;
+ const duration = audio.duration;
+ audio.currentTime = (clickX / width) * duration;
+}
+
+// 4. Événements
+
+// Clique sur le vinyle pour basculer lecture
+vinyl.addEventListener('click', togglePlay);
+
+// Mise à jour de la barre de progression à chaque changement de temps
+audio.addEventListener('timeupdate', updateProgress);
+
+// Mise à jour de la durée du titre dès que l'audio est chargé
+audio.addEventListener('loadedmetadata', () => {
+ durationEl.textContent = formatTime(audio.duration);
+});
+
+// Permet de cliquer sur la barre de progression
+progress.addEventListener('click', setProgress);
+
+// Bouton reculer de 10s
+backwardBtn.addEventListener('click', () => {
+ audio.currentTime = Math.max(0, audio.currentTime - 10);
+});
+
+// Bouton avancer de 10s
+forwardBtn.addEventListener('click', () => {
+ audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
+});
+
+// Bouton pour activer/désactiver la boucle (LOOP)
+loopBtn.addEventListener('click', () => {
+ isLooping = !isLooping;
+ loopBtn.style.backgroundColor = isLooping ? 'white' : 'transparent';
+ loopBtn.style.color = isLooping ? '#18344b' : 'white';
+});
+
+// Lorsque l'audio est terminé, on répète si la boucle est activée
+audio.addEventListener('ended', () => {
+ if (isLooping) {
+ audio.currentTime = 0;
+ audio.play();
+ } else {
+ vinyl.style.animationPlayState = 'paused';
+ isPlaying = false;
+ }
+});
diff --git a/assets/stamina-v17.mp3 b/assets/stamina-v17.mp3
new file mode 100644
index 0000000..21c1316
Binary files /dev/null and b/assets/stamina-v17.mp3 differ
diff --git a/assets/stamina.html b/assets/stamina.html
new file mode 100644
index 0000000..dbd4ab5
--- /dev/null
+++ b/assets/stamina.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
Stamina
+
+
+
+
+
+
+
+
+
+
+
+
+ Stamina
+ Corb Nurk
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/styles.css b/assets/styles.css
index d904d19..81cf19c 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -31,27 +31,36 @@
}
}
-
-
-.logo{
- margin-top: 40px;
- max-width: 280px;
-}
-
-.container {
+ .header-container {
display: flex;
flex-direction: column;
align-items: center;
+ margin-bottom: 30px; /* pour séparer du reste */
}
-h1 {
+ .logo {
+ display: block;
+ margin-top: 40px;
+ margin-right: auto;
+ max-width: 200px;
+ }
+
+ h1 {
color: #ffffff;
font-size: 70%;
-}
+ margin-top: 10px; /* espace entre logo et h1 */
+ }
+
h2 {
color: #ffffff;
- font-size: 40%;
+ font-size: 60%;
+}
+
+.login-title {
+ color: black;
+ font-size: 24px;
+ margin-bottom: 20px;
}
.orange {
@@ -82,22 +91,34 @@ h2 {
font-size: 16px;
}
-.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;
+.login-container input:focus {
+ border: 2px solid #ffa600; /* ou la couleur que tu veux */
+ outline: none; /* enlève le contour bleu par défaut */
}
+.button {
+ display: inline-block;
+ width: 100%; /* pareil que les input */
+ padding: 12px;
+ margin-top: 40px; /* plus de marge */
+ background-color:#ffa600;
+ color: white;
+ border: none;
+ border-radius: 50px;
+ font-size: 18px;
+ cursor: pointer;
+ transition: background 0.3s ease;
+ text-decoration: none;
+}
+
+
.button:hover {
background-color: #dd3000;
}
-
+.error-message {
+ color: red;
+ margin-top: 15px;
+ font-size: 14px;
+}
\ No newline at end of file
diff --git a/assets/styleshe.css b/assets/styleshe.css
index 05162f9..f4bced1 100644
--- a/assets/styleshe.css
+++ b/assets/styleshe.css
@@ -1,123 +1,196 @@
@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, #500000, #000000);
- color: white;
- display: flex;
- flex-direction: column;
- align-items: center;
- min-height: 100vh;
-}
+ margin: 0;
+ padding: 0;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(to bottom, #500000, #000000);
+ font-family: sans-serif;
+ }
+
+ header.page-header {
+ position: absolute;
+ top: 20px;
+ left: 0;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: none; /* pour que seul le logo reste cliquable */
+ }
+
+ .logo-container {
+ position: absolute;
+ left: 20px;
+ pointer-events: auto; /* permet au logo d'être cliquable malgré pointer-events: none plus haut */
+ }
+
+ .logo {
+ width: 120px;
+ height: auto;
+ cursor: pointer;
+ }
+
+ .title {
+ color: white;
+ font-size: 20px;
+ font-weight: 600;
+ margin: 0;
+ pointer-events: none;
+ }
+
-header {
- width: 100%;
- padding: 15px 30px;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- position: absolute;
- top: 0;
- left: 0;
-}
+ .vinyl-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
-.logo {
- width: 100px;
- height: auto;
-}
-.container {
- margin-top: 120px;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
+/* Titre du bas avec un
stylé */
-.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;
-}
+.title-under {
+ text-align: center;
+ color: white;
+ margin-top: 20px;
+ }
+
+ .song-title {
+ font-size: 30px;
+ font-weight: 600;
+ }
+
+ .artist-name {
+ margin: none;
+ font-size: 22px;
+ font-weight: 400;
+ opacity: 0.8;
+ }
+
+ .vinyl {
+ width: 600px;
+ height: 600px;
+ border-radius: 50%;
+ background: radial-gradient(circle at center, #444 0%, #111 60%, #000 100%);
+ animation: spin 5s linear infinite paused;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ cursor: pointer;
+ margin: 20px 0;
+ }
+
+ .vinyl img {
+ width: 40%;
+ border-radius: 50%;
+ pointer-events: none;
+ }
+
+ /* Style pour la barre de progression */
+.progress-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 20px;
+ width: 80%;
+ max-width: 500px;
+ margin-inline: auto;
+ }
+
+ #progress {
+ width: 100%;
+ height: 6px;
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 5px;
+ -webkit-appearance: none;
+ appearance: none;
+ }
+
+ #progress::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ background: white;
+ cursor: pointer;
+ }
+
+ #progress::-moz-range-thumb {
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ background: white;
+ cursor: pointer;
+ }
+
+ /* Position des timestamps */
+
+ .time-wrapper {
+ color: white;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 0 20px;
+ margin-top: 10px;
+ margin-bottom: 10px; /* <-- ajoute ceci pour écarter duration du bouton */
+ }
+
+
+ .buttons-container {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ width: 80%;
+ max-width: 500px;
+ margin-top: 10px;
+ }
+
+ button {
+ flex: 1;
+ font-size: 16px;
+ background: none;
+ border: 1px solid white;
+ color: white;
+ padding: 6px 14px;
+ border-radius: 8px;
+ cursor: pointer;
+ }
+
+
+ @keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+
+ @media (max-width: 768px) {
+ .vinyl {
+ width: 70vw;
+ height: 70vw;
+ }
+
+ .vinyl img {
+ width: 45%;
+ }
+
+ #progress {
+ width: 85vw;
+ }
+
+ .buttons-container {
+ width: 85vw;
+ }
+ }
+
+
\ No newline at end of file
diff --git a/assets/stylesmf.css b/assets/stylesmf.css
index 022ce32..2dc7ebc 100644
--- a/assets/stylesmf.css
+++ b/assets/stylesmf.css
@@ -1,123 +1,196 @@
@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;
-}
+ margin: 0;
+ padding: 0;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(to bottom, #3d78a8, #19222b);
+ font-family: sans-serif;
+ }
+
+ header.page-header {
+ position: absolute;
+ top: 20px;
+ left: 0;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: none; /* pour que seul le logo reste cliquable */
+ }
+
+ .logo-container {
+ position: absolute;
+ left: 20px;
+ pointer-events: auto; /* permet au logo d'être cliquable malgré pointer-events: none plus haut */
+ }
+
+ .logo {
+ width: 120px;
+ height: auto;
+ cursor: pointer;
+ }
+
+ .title {
+ color: white;
+ font-size: 20px;
+ font-weight: 600;
+ margin: 0;
+ pointer-events: none;
+ }
+
-header {
- width: 100%;
- padding: 15px 30px;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- position: absolute;
- top: 0;
- left: 0;
-}
+ .vinyl-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
-.logo {
- width: 100px;
- height: auto;
-}
-.container {
- margin-top: 120px;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
+/* Titre du bas avec un
stylé */
-.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;
-}
+.title-under {
+ text-align: center;
+ color: white;
+ margin-top: 20px;
+ }
+
+ .song-title {
+ font-size: 30px;
+ font-weight: 600;
+ }
+
+ .artist-name {
+ margin: none;
+ font-size: 22px;
+ font-weight: 400;
+ opacity: 0.8;
+ }
+
+ .vinyl {
+ width: 600px;
+ height: 600px;
+ border-radius: 50%;
+ background: radial-gradient(circle at center, #444 0%, #111 60%, #000 100%);
+ animation: spin 5s linear infinite paused;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ cursor: pointer;
+ margin: 20px 0;
+ }
+
+ .vinyl img {
+ width: 40%;
+ border-radius: 50%;
+ pointer-events: none;
+ }
+
+ /* Style pour la barre de progression */
+.progress-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 20px;
+ width: 80%;
+ max-width: 500px;
+ margin-inline: auto;
+ }
+
+ #progress {
+ width: 100%;
+ height: 6px;
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 5px;
+ -webkit-appearance: none;
+ appearance: none;
+ }
+
+ #progress::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ background: white;
+ cursor: pointer;
+ }
+
+ #progress::-moz-range-thumb {
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ background: white;
+ cursor: pointer;
+ }
+
+ /* Position des timestamps */
+
+ .time-wrapper {
+ color: white;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 0 20px;
+ margin-top: 10px;
+ margin-bottom: 10px; /* <-- ajoute ceci pour écarter duration du bouton */
+ }
+
+
+ .buttons-container {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ width: 80%;
+ max-width: 500px;
+ margin-top: 10px;
+ }
+
+ button {
+ flex: 1;
+ font-size: 16px;
+ background: none;
+ border: 1px solid white;
+ color: white;
+ padding: 6px 14px;
+ border-radius: 8px;
+ cursor: pointer;
+ }
+
+
+ @keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+
+ @media (max-width: 768px) {
+ .vinyl {
+ width: 70vw;
+ height: 70vw;
+ }
+
+ .vinyl img {
+ width: 45%;
+ }
+
+ #progress {
+ width: 85vw;
+ }
+
+ .buttons-container {
+ width: 85vw;
+ }
+ }
+
+
\ No newline at end of file
diff --git a/assets/stylestam.css b/assets/stylestam.css
new file mode 100644
index 0000000..a0d7a4c
--- /dev/null
+++ b/assets/stylestam.css
@@ -0,0 +1,196 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+
+body {
+ margin: 0;
+ padding: 0;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(to bottom, #000000, #4e4e4e);
+ font-family: sans-serif;
+ }
+
+ header.page-header {
+ position: absolute;
+ top: 20px;
+ left: 0;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: none; /* pour que seul le logo reste cliquable */
+ }
+
+ .logo-container {
+ position: absolute;
+ left: 20px;
+ pointer-events: auto; /* permet au logo d'être cliquable malgré pointer-events: none plus haut */
+ }
+
+ .logo {
+ width: 120px;
+ height: auto;
+ cursor: pointer;
+ }
+
+ .title {
+ color: white;
+ font-size: 20px;
+ font-weight: 600;
+ margin: 0;
+ pointer-events: none;
+ }
+
+
+ .vinyl-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
+
+
+/* Titre du bas avec un
stylé */
+
+.title-under {
+ text-align: center;
+ color: white;
+ margin-top: 20px;
+ }
+
+ .song-title {
+ font-size: 30px;
+ font-weight: 600;
+ }
+
+ .artist-name {
+ margin: none;
+ font-size: 22px;
+ font-weight: 400;
+ opacity: 0.8;
+ }
+
+ .vinyl {
+ width: 600px;
+ height: 600px;
+ border-radius: 50%;
+ background: radial-gradient(circle at center, #444 0%, #111 60%, #000 100%);
+ animation: spin 5s linear infinite paused;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ cursor: pointer;
+ margin: 20px 0;
+ }
+
+ .vinyl img {
+ width: 40%;
+ border-radius: 50%;
+ pointer-events: none;
+ }
+
+ /* Style pour la barre de progression */
+.progress-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 20px;
+ width: 80%;
+ max-width: 500px;
+ margin-inline: auto;
+ }
+
+ #progress {
+ width: 100%;
+ height: 6px;
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 5px;
+ -webkit-appearance: none;
+ appearance: none;
+ }
+
+ #progress::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ background: white;
+ cursor: pointer;
+ }
+
+ #progress::-moz-range-thumb {
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ background: white;
+ cursor: pointer;
+ }
+
+ /* Position des timestamps */
+
+ .time-wrapper {
+ color: white;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 0 20px;
+ margin-top: 10px;
+ margin-bottom: 10px; /* <-- ajoute ceci pour écarter duration du bouton */
+ }
+
+
+ .buttons-container {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ width: 80%;
+ max-width: 500px;
+ margin-top: 10px;
+ }
+
+ button {
+ flex: 1;
+ font-size: 16px;
+ background: none;
+ border: 1px solid white;
+ color: white;
+ padding: 6px 14px;
+ border-radius: 8px;
+ cursor: pointer;
+ }
+
+
+ @keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+
+ @media (max-width: 768px) {
+ .vinyl {
+ width: 70vw;
+ height: 70vw;
+ }
+
+ .vinyl img {
+ width: 45%;
+ }
+
+ #progress {
+ width: 85vw;
+ }
+
+ .buttons-container {
+ width: 85vw;
+ }
+ }
+
+
\ No newline at end of file
+ 
+ 
+
+ 
-