Interface Finale
This commit is contained in:
parent
897b244d16
commit
d4300b6963
BIN
assets/Cover.png
Normal file
BIN
assets/Cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
assets/WhatsApp Image 2025-04-21 at 15.01.32.jpeg
Normal file
BIN
assets/WhatsApp Image 2025-04-21 at 15.01.32.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
@ -3,7 +3,7 @@
|
||||
<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">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>LOOP</title>
|
||||
<base href="./">
|
||||
<script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
|
||||
@ -18,7 +18,7 @@
|
||||
<div class="music-list">
|
||||
|
||||
<a href="muddy_files.html" class="music-card">
|
||||
<img src="muddyfiles.jpg" alt="muddyfiles">
|
||||
<img src="Cover.png" alt="muddyfiles">
|
||||
<div class="music-info">
|
||||
<h3>Muddy Files</h3>
|
||||
<p>Ely</p>
|
||||
@ -26,15 +26,15 @@
|
||||
</a>
|
||||
|
||||
<a href="hell_even.html" class="music-card">
|
||||
<img src="helleven.jpg" alt="helleven">
|
||||
<img src="hell even 5.png" alt="helleven">
|
||||
<div class="music-info">
|
||||
<h3>Hell Even</h3>
|
||||
<p>Ely feat. Jenny</p>
|
||||
<p>Ely feat. JENNY</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="hell_even.html" class="music-card">
|
||||
<img src="stamina.jpg" alt="stamina">
|
||||
<a href="stamina.html" class="music-card">
|
||||
<img src="WhatsApp Image 2025-04-21 at 15.01.32.jpeg" alt="stamina">
|
||||
<div class="music-info">
|
||||
<h3>Stamina</h3>
|
||||
<p>Corb Nurk</p>
|
||||
|
||||
BIN
assets/hell even 5.png
Normal file
BIN
assets/hell even 5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@ -1,30 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Hell Even</title>
|
||||
<link rel="stylesheet" href="styleshe.css">
|
||||
<link rel="stylesheet" href="styleshe.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="main.html"><img src="logo.png" alt="Logo" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="vinyl-wrapper">
|
||||
<div class="vinyl">
|
||||
<img src="pochette.jpg" alt="Pochette de l'album">
|
||||
<header class="page-header">
|
||||
<a href="front.html" class="logo-container">
|
||||
<img src="logo.png" alt="Logo" class="logo" />
|
||||
</a>
|
||||
<h1 class="title">Hell Even</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<main class="vinyl-container">
|
||||
|
||||
<div class="vinyl" id="vinyl">
|
||||
<img src="hell even 5.png" alt="Pochette" />
|
||||
</div>
|
||||
|
||||
<h2 class="title-under">
|
||||
<span class="song-title">Hell Even</span><br>
|
||||
<span class="artist-name">Ely feat. JENNY</span>
|
||||
</h2>
|
||||
|
||||
<div class="progress-container">
|
||||
<input type="range" id="progress" value="0" />
|
||||
|
||||
<div class="time-wrapper">
|
||||
<div id="currentTime" class="time">0:00</div>
|
||||
<div id="duration" class="time">3:28</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="buttons-container">
|
||||
<button id="backward">- 10s</button>
|
||||
<button id="loop">LOOP</button>
|
||||
<button id="forward">10s +</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<audio id="audio" src="paradisev2.mp3"></audio>
|
||||
</main>
|
||||
|
||||
<script src="muddy_files.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<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">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>LOOP</title>
|
||||
<base href="./">
|
||||
<script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
|
||||
@ -11,22 +11,24 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<a href="main.html"><img src="logo.png" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<h1>Let your favorite songs play on LOOP.</h1>
|
||||
<h1>Let your favorite songs play on LOOP.</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="login-container">
|
||||
<input type="text" placeholder="Username" required>
|
||||
<input type="password" placeholder="Password" required>
|
||||
<a href="front.html" class="button">Log In</a>
|
||||
<h3 class="login-title">Login Account</h3>
|
||||
<input type="text" id="username" placeholder="Username" required>
|
||||
<input type="password" id="password" placeholder="Password" required>
|
||||
<button id="loginBtn" class="button">Log In</button>
|
||||
<p id="error-message" class="error-message"></p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Don't have an account ?<a href="" class="orange"> Sign up now.</a> </span></h2>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script src="main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
18
assets/main.js
Normal file
18
assets/main.js
Normal file
@ -0,0 +1,18 @@
|
||||
document.getElementById('loginBtn').addEventListener('click', function(event) {
|
||||
event.preventDefault(); // Empêche le bouton de recharger ou changer de page
|
||||
|
||||
const username = document.getElementById('username').value.trim();
|
||||
const password = document.getElementById('password').value.trim();
|
||||
const errorMessage = document.getElementById('error-message');
|
||||
|
||||
// Identifiants valides en dur (à modifier selon ton besoin)
|
||||
const validUsername = "ELY";
|
||||
const validPassword = "Bilan6";
|
||||
|
||||
if (username === validUsername && password === validPassword) {
|
||||
window.location.href = "front.html"; // Redirige vers la page suivante
|
||||
} else {
|
||||
errorMessage.textContent = "Incorrect username or password.";
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,30 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Muddy Files</title>
|
||||
<link rel="stylesheet" href="stylesmf.css">
|
||||
<link rel="stylesheet" href="stylesmf.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="main.html"><img src="logo.png" alt="Logo" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="vinyl-wrapper">
|
||||
<div class="vinyl">
|
||||
<img src="pochette.jpg" alt="Pochette de l'album">
|
||||
<header class="page-header">
|
||||
<a href="front.html" class="logo-container">
|
||||
<img src="logo.png" alt="Logo" class="logo" />
|
||||
</a>
|
||||
<h1 class="title">Muddy Files</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<main class="vinyl-container">
|
||||
|
||||
<div class="vinyl" id="vinyl">
|
||||
<img src="Cover.png" alt="Pochette" />
|
||||
</div>
|
||||
|
||||
<h2 class="title-under">
|
||||
<span class="song-title">Muddy Files</span><br>
|
||||
<span class="artist-name">Ely</span>
|
||||
</h2>
|
||||
|
||||
<div class="progress-container">
|
||||
<input type="range" id="progress" value="0" />
|
||||
|
||||
<div class="time-wrapper">
|
||||
<div id="currentTime" class="time">0:00</div>
|
||||
<div id="duration" class="time">1:36</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="buttons-container">
|
||||
<button id="backward">- 10s</button>
|
||||
<button id="loop">LOOP</button>
|
||||
<button id="forward">10s +</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<audio id="audio" src="muddy_files.mp3"></audio>
|
||||
</main>
|
||||
|
||||
<script src="muddy_files.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1 +1,93 @@
|
||||
console.log( 'hello')
|
||||
// 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;
|
||||
}
|
||||
});
|
||||
|
||||
BIN
assets/stamina-v17.mp3
Normal file
BIN
assets/stamina-v17.mp3
Normal file
Binary file not shown.
51
assets/stamina.html
Normal file
51
assets/stamina.html
Normal file
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Stamina</title>
|
||||
<link rel="stylesheet" href="stylestam.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="page-header">
|
||||
<a href="front.html" class="logo-container">
|
||||
<img src="logo.png" alt="Logo" class="logo" />
|
||||
</a>
|
||||
<h1 class="title">Stamina</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<main class="vinyl-container">
|
||||
|
||||
<div class="vinyl" id="vinyl">
|
||||
<img src="WhatsApp Image 2025-04-21 at 15.01.32.jpeg" alt="Pochette" />
|
||||
</div>
|
||||
|
||||
<h2 class="title-under">
|
||||
<span class="song-title">Stamina</span><br>
|
||||
<span class="artist-name">Corb Nurk</span>
|
||||
</h2>
|
||||
|
||||
<div class="progress-container">
|
||||
<input type="range" id="progress" value="0" />
|
||||
|
||||
<div class="time-wrapper">
|
||||
<div id="currentTime" class="time">0:00</div>
|
||||
<div id="duration" class="time">4:43</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="buttons-container">
|
||||
<button id="backward">- 10s</button>
|
||||
<button id="loop">LOOP</button>
|
||||
<button id="forward">10s +</button>
|
||||
</div>
|
||||
|
||||
<audio id="audio" src="stamina-v17.mp3"></audio>
|
||||
</main>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 <br> 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 <br> 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
196
assets/stylestam.css
Normal file
196
assets/stylestam.css
Normal file
@ -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 <br> 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user