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>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<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>
|
<title>LOOP</title>
|
||||||
<base href="./">
|
<base href="./">
|
||||||
<script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
|
||||||
@ -18,7 +18,7 @@
|
|||||||
<div class="music-list">
|
<div class="music-list">
|
||||||
|
|
||||||
<a href="muddy_files.html" class="music-card">
|
<a href="muddy_files.html" class="music-card">
|
||||||
<img src="muddyfiles.jpg" alt="muddyfiles">
|
<img src="Cover.png" alt="muddyfiles">
|
||||||
<div class="music-info">
|
<div class="music-info">
|
||||||
<h3>Muddy Files</h3>
|
<h3>Muddy Files</h3>
|
||||||
<p>Ely</p>
|
<p>Ely</p>
|
||||||
@ -26,15 +26,15 @@
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="hell_even.html" class="music-card">
|
<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">
|
<div class="music-info">
|
||||||
<h3>Hell Even</h3>
|
<h3>Hell Even</h3>
|
||||||
<p>Ely feat. Jenny</p>
|
<p>Ely feat. JENNY</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="hell_even.html" class="music-card">
|
<a href="stamina.html" class="music-card">
|
||||||
<img src="stamina.jpg" alt="stamina">
|
<img src="WhatsApp Image 2025-04-21 at 15.01.32.jpeg" alt="stamina">
|
||||||
<div class="music-info">
|
<div class="music-info">
|
||||||
<h3>Stamina</h3>
|
<h3>Stamina</h3>
|
||||||
<p>Corb Nurk</p>
|
<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>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<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>
|
<title>Hell Even</title>
|
||||||
<link rel="stylesheet" href="styleshe.css">
|
<link rel="stylesheet" href="styleshe.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
|
||||||
<a href="main.html"><img src="logo.png" alt="Logo" class="logo"></a>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="container">
|
<header class="page-header">
|
||||||
<div class="vinyl-wrapper">
|
<a href="front.html" class="logo-container">
|
||||||
<div class="vinyl">
|
<img src="logo.png" alt="Logo" class="logo" />
|
||||||
<img src="pochette.jpg" alt="Pochette de l'album">
|
</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>
|
</div>
|
||||||
|
|
||||||
<div class="audio-player">
|
|
||||||
|
<div class="buttons-container">
|
||||||
|
<button id="backward">- 10s</button>
|
||||||
|
<button id="loop">LOOP</button>
|
||||||
|
<button id="forward">10s +</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<audio id="audio" src="paradisev2.mp3"></audio>
|
<audio id="audio" src="paradisev2.mp3"></audio>
|
||||||
<button id="play-pause">▶️</button>
|
</main>
|
||||||
<input type="range" id="progress" value="0" step="1">
|
|
||||||
<div id="time">0:00 / 0:00</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="muddy_files.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<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>
|
<title>LOOP</title>
|
||||||
<base href="./">
|
<base href="./">
|
||||||
<script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
|
||||||
@ -11,22 +11,24 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<div class="header-container">
|
||||||
<a href="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>
|
<h1>Let your favorite songs play on LOOP.</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<input type="text" placeholder="Username" required>
|
<h3 class="login-title">Login Account</h3>
|
||||||
<input type="password" placeholder="Password" required>
|
<input type="text" id="username" placeholder="Username" required>
|
||||||
<a href="front.html" class="button">Log In</a>
|
<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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2>Don't have an account ?<a href="" class="orange"> Sign up now.</a> </span></h2>
|
<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>
|
</body>
|
||||||
</html>
|
</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>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<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>
|
<title>Muddy Files</title>
|
||||||
<link rel="stylesheet" href="stylesmf.css">
|
<link rel="stylesheet" href="stylesmf.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
|
||||||
<a href="main.html"><img src="logo.png" alt="Logo" class="logo"></a>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="container">
|
<header class="page-header">
|
||||||
<div class="vinyl-wrapper">
|
<a href="front.html" class="logo-container">
|
||||||
<div class="vinyl">
|
<img src="logo.png" alt="Logo" class="logo" />
|
||||||
<img src="pochette.jpg" alt="Pochette de l'album">
|
</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>
|
</div>
|
||||||
|
|
||||||
<div class="audio-player">
|
|
||||||
|
<div class="buttons-container">
|
||||||
|
<button id="backward">- 10s</button>
|
||||||
|
<button id="loop">LOOP</button>
|
||||||
|
<button id="forward">10s +</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<audio id="audio" src="muddy_files.mp3"></audio>
|
<audio id="audio" src="muddy_files.mp3"></audio>
|
||||||
<button id="play-pause">▶️</button>
|
</main>
|
||||||
<input type="range" id="progress" value="0" step="1">
|
|
||||||
<div id="time">0:00 / 0:00</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="muddy_files.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
|
||||||
.logo{
|
|
||||||
margin-top: 40px;
|
|
||||||
max-width: 280px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
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;
|
color: #ffffff;
|
||||||
font-size: 70%;
|
font-size: 70%;
|
||||||
}
|
margin-top: 10px; /* espace entre logo et h1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 40%;
|
font-size: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
color: black;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.orange {
|
.orange {
|
||||||
@ -82,9 +91,16 @@ h2 {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 {
|
.button {
|
||||||
width: 100%;
|
display: inline-block;
|
||||||
padding: 10px;
|
width: 100%; /* pareil que les input */
|
||||||
|
padding: 12px;
|
||||||
|
margin-top: 40px; /* plus de marge */
|
||||||
background-color:#ffa600;
|
background-color:#ffa600;
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
@ -95,9 +111,14 @@ h2 {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
background-color: #dd3000;
|
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');
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
|
||||||
|
|
||||||
* {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 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;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
justify-content: center;
|
||||||
|
background: linear-gradient(to bottom, #500000, #000000);
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
.vinyl-wrapper {
|
header.page-header {
|
||||||
width: 250px;
|
position: absolute;
|
||||||
height: 250px;
|
top: 20px;
|
||||||
margin-bottom: 30px;
|
left: 0;
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vinyl {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: black;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
animation: spin 5s linear infinite paused;
|
pointer-events: none; /* pour que seul le logo reste cliquable */
|
||||||
overflow: hidden;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.vinyl img {
|
.logo-container {
|
||||||
width: 100px;
|
position: absolute;
|
||||||
height: 100px;
|
left: 20px;
|
||||||
border-radius: 50%;
|
pointer-events: auto; /* permet au logo d'être cliquable malgré pointer-events: none plus haut */
|
||||||
object-fit: cover;
|
}
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
.logo {
|
||||||
0% { transform: rotate(0deg); }
|
width: 120px;
|
||||||
100% { transform: rotate(360deg); }
|
height: auto;
|
||||||
}
|
|
||||||
|
|
||||||
/* Bouton play/pause en blanc */
|
|
||||||
#play-pause {
|
|
||||||
color: white;
|
|
||||||
font-size: 30px;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#play-pause:hover {
|
.title {
|
||||||
transform: scale(1.1);
|
color: white;
|
||||||
transition: transform 0.2s ease;
|
font-size: 20px;
|
||||||
}
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Barre de progression audio blanche */
|
|
||||||
#progress {
|
.vinyl-container {
|
||||||
-webkit-appearance: none;
|
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%;
|
width: 100%;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
background: white;
|
background: rgba(255, 255, 255, 0.3);
|
||||||
border-radius: 3px;
|
border-radius: 5px;
|
||||||
outline: none;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Curseur (thumb) blanc */
|
|
||||||
#progress::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 15px;
|
}
|
||||||
height: 15px;
|
|
||||||
|
#progress::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: white;
|
background: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#progress::-moz-range-thumb {
|
#progress::-moz-range-thumb {
|
||||||
width: 15px;
|
height: 12px;
|
||||||
height: 15px;
|
width: 12px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: white;
|
background: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* Texte du timer blanc (déjà par défaut mais pour être sûr) */
|
/* Position des timestamps */
|
||||||
#time {
|
|
||||||
|
.time-wrapper {
|
||||||
color: white;
|
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');
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
|
||||||
|
|
||||||
* {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 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;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
justify-content: center;
|
||||||
|
background: linear-gradient(to bottom, #3d78a8, #19222b);
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
.vinyl-wrapper {
|
header.page-header {
|
||||||
width: 250px;
|
position: absolute;
|
||||||
height: 250px;
|
top: 20px;
|
||||||
margin-bottom: 30px;
|
left: 0;
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vinyl {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: black;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
animation: spin 5s linear infinite paused;
|
pointer-events: none; /* pour que seul le logo reste cliquable */
|
||||||
overflow: hidden;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.vinyl img {
|
.logo-container {
|
||||||
width: 100px;
|
position: absolute;
|
||||||
height: 100px;
|
left: 20px;
|
||||||
border-radius: 50%;
|
pointer-events: auto; /* permet au logo d'être cliquable malgré pointer-events: none plus haut */
|
||||||
object-fit: cover;
|
}
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
.logo {
|
||||||
0% { transform: rotate(0deg); }
|
width: 120px;
|
||||||
100% { transform: rotate(360deg); }
|
height: auto;
|
||||||
}
|
|
||||||
|
|
||||||
/* Bouton play/pause en blanc */
|
|
||||||
#play-pause {
|
|
||||||
color: white;
|
|
||||||
font-size: 30px;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#play-pause:hover {
|
.title {
|
||||||
transform: scale(1.1);
|
color: white;
|
||||||
transition: transform 0.2s ease;
|
font-size: 20px;
|
||||||
}
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Barre de progression audio blanche */
|
|
||||||
#progress {
|
.vinyl-container {
|
||||||
-webkit-appearance: none;
|
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%;
|
width: 100%;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
background: white;
|
background: rgba(255, 255, 255, 0.3);
|
||||||
border-radius: 3px;
|
border-radius: 5px;
|
||||||
outline: none;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Curseur (thumb) blanc */
|
|
||||||
#progress::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 15px;
|
}
|
||||||
height: 15px;
|
|
||||||
|
#progress::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: white;
|
background: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#progress::-moz-range-thumb {
|
#progress::-moz-range-thumb {
|
||||||
width: 15px;
|
height: 12px;
|
||||||
height: 15px;
|
width: 12px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: white;
|
background: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* Texte du timer blanc (déjà par défaut mais pour être sûr) */
|
/* Position des timestamps */
|
||||||
#time {
|
|
||||||
|
.time-wrapper {
|
||||||
color: white;
|
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