Compare commits
No commits in common. "c63d1cc49eb4a5ee4206f25d269571238db0ff73" and "148b240bb72d2f2ccf0c46d52b5dc4472e277648" have entirely different histories.
c63d1cc49e
...
148b240bb7
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
BIN
assets/Cover.png
BIN
assets/Cover.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 MiB |
@ -1,51 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>To Hide Is To Be Seen</title>
|
||||
<link rel="stylesheet" href="stylesrom.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">To Hide Is To Be Seen</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<main class="vinyl-container">
|
||||
|
||||
<div class="vinyl" id="vinyl">
|
||||
<img src="C9EED782-8F3C-40E5-87C0-5E2032ADAB72.jpeg" alt="Pochette" />
|
||||
</div>
|
||||
|
||||
<h2 class="title-under">
|
||||
<span class="song-title">To Hide Is To Be Seen</span><br>
|
||||
<span class="artist-name">Roman</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>
|
||||
|
||||
<audio id="audio" src="song to song v4.mp3"></audio>
|
||||
</main>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB |
@ -1,59 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>LOOP</title>
|
||||
<base href="./">
|
||||
<script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="stylesfront.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a href="main.html"><img src="logo.png" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<div class="music-list">
|
||||
|
||||
<a href="muddy_files.html" class="music-card">
|
||||
<img src="Cover.png" alt="muddyfiles">
|
||||
<div class="music-info">
|
||||
<h3>Muddy Files</h3>
|
||||
<p>Ely</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="hell_even.html" class="music-card">
|
||||
<img src="hell even 5.png" alt="helleven">
|
||||
<div class="music-info">
|
||||
<h3>Hell Even</h3>
|
||||
<p>Ely feat. JENNY</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="Roman.html" class="music-card">
|
||||
<img src="C9EED782-8F3C-40E5-87C0-5E2032ADAB72.jpeg" alt="ToHideIsToBeSeen">
|
||||
<div class="music-info">
|
||||
<h3>To Hide Is To Be Seen</h3>
|
||||
<p>Roman</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Ajoute autant de titres que nécessaire -->
|
||||
</div>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
@ -1,51 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<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" />
|
||||
</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">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>
|
||||
|
||||
<audio id="audio" src="paradisev2.mp3"></audio>
|
||||
</main>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,47 +0,0 @@
|
||||
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)}`;
|
||||
}
|
||||
33
assets/index.html
Normal file
33
assets/index.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LOOP</title>
|
||||
<base href="./">
|
||||
<script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a href="file:///C:/Users/elyko/Desktop/loop/index.html"><img src="images/logo.png" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<h1>Let your favorite songs play on LOOP.</h1>
|
||||
|
||||
|
||||
<div class="login-container">
|
||||
<input type="text" placeholder="Username" required>
|
||||
<input type="password" placeholder="Password" required>
|
||||
<button>Log In</button>
|
||||
</div>
|
||||
|
||||
<h2>Don't have an account ?<a href="" class="orange"> Sign up now.</a> </span></h2>
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
assets/logo.png
BIN
assets/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB |
@ -1,35 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>LOOP</title>
|
||||
<base href="./">
|
||||
<script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header-container">
|
||||
<a href="main.html"><img src="logo.png" class="logo"></a>
|
||||
<h1>Let your favorite songs play on LOOP.</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="login-container">
|
||||
<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="main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
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,51 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<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" />
|
||||
</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">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>
|
||||
|
||||
<audio id="audio" src="muddy_files.mp3"></audio>
|
||||
</main>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,47 +0,0 @@
|
||||
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)}`;
|
||||
}
|
||||
Binary file not shown.
@ -1,93 +1 @@
|
||||
// 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;
|
||||
}
|
||||
});
|
||||
console.log( 'hello')
|
||||
Binary file not shown.
Binary file not shown.
@ -1,51 +0,0 @@
|
||||
<!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>
|
||||
3
assets/style.css
Normal file
3
assets/style.css
Normal file
@ -0,0 +1,3 @@
|
||||
body{
|
||||
background-color: red;
|
||||
}
|
||||
@ -31,36 +31,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
|
||||
|
||||
.logo{
|
||||
margin-top: 40px;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 30px; /* pour séparer du reste */
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin-top: 40px;
|
||||
margin-right: auto;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
h1 {
|
||||
color: #ffffff;
|
||||
font-size: 70%;
|
||||
margin-top: 10px; /* espace entre logo et h1 */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #ffffff;
|
||||
font-size: 60%;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
color: black;
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 40%;
|
||||
}
|
||||
|
||||
.orange {
|
||||
@ -82,6 +73,7 @@ h2 {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
/* Champs de texte */
|
||||
.login-container input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
@ -91,34 +83,22 @@ h2 {
|
||||
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 */
|
||||
/* Bouton */
|
||||
.login-container 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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.login-container button:hover {
|
||||
background-color: #dd3000;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,90 +0,0 @@
|
||||
@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, #ffa600, #dd3000);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
.music-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.music-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.music-card:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.music-card img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.music-info {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.music-info h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.music-info p {
|
||||
margin: 5px 0 0;
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@ -1,196 +0,0 @@
|
||||
@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, #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;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,196 +0,0 @@
|
||||
@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, #3d78a8, #00182e);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,196 +0,0 @@
|
||||
@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, #000e33, #002f96);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,196 +0,0 @@
|
||||
@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