lecteur sons
This commit is contained in:
parent
838201bb58
commit
897b244d16
@ -12,12 +12,12 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
|
<a href="main.html"><img src="logo.png" class="logo"></a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="music-list">
|
<div class="music-list">
|
||||||
|
|
||||||
<a href="file:///home/devel/Desktop/loop-code/assets/muddy_files.html" class="music-card">
|
<a href="muddy_files.html" class="music-card">
|
||||||
<img src="muddyfiles.jpg" alt="muddyfiles">
|
<img src="muddyfiles.jpg" alt="muddyfiles">
|
||||||
<div class="music-info">
|
<div class="music-info">
|
||||||
<h3>Muddy Files</h3>
|
<h3>Muddy Files</h3>
|
||||||
@ -25,7 +25,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="file:///home/devel/Desktop/loop-code/assets/hell_even.html" class="music-card">
|
<a href="hell_even.html" class="music-card">
|
||||||
<img src="helleven.jpg" alt="helleven">
|
<img src="helleven.jpg" alt="helleven">
|
||||||
<div class="music-info">
|
<div class="music-info">
|
||||||
<h3>Hell Even</h3>
|
<h3>Hell Even</h3>
|
||||||
@ -33,7 +33,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="file:///home/devel/Desktop/loop-code/assets/hell_even.html" class="music-card">
|
<a href="hell_even.html" class="music-card">
|
||||||
<img src="stamina.jpg" alt="stamina">
|
<img src="stamina.jpg" alt="stamina">
|
||||||
<div class="music-info">
|
<div class="music-info">
|
||||||
<h3>Stamina</h3>
|
<h3>Stamina</h3>
|
||||||
|
|||||||
@ -2,30 +2,29 @@
|
|||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<title>Hell Even</title>
|
||||||
<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="styleshe.css">
|
<link rel="stylesheet" href="styleshe.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
|
<a href="main.html"><img src="logo.png" alt="Logo" class="logo"></a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<h1>Let your favorite songs play on LOOP.</h1>
|
<div class="container">
|
||||||
|
<div class="vinyl-wrapper">
|
||||||
|
<div class="vinyl">
|
||||||
<div class="login-container">
|
<img src="pochette.jpg" alt="Pochette de l'album">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Don't have an account ?<a href="" class="orange"> Sign up now.</a> </span></h2>
|
<div class="audio-player">
|
||||||
|
<audio id="audio" src="paradisev2.mp3"></audio>
|
||||||
<script src="script.js"></script>
|
<button id="play-pause">▶️</button>
|
||||||
|
<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>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
47
assets/hell_even.js
Normal file
47
assets/hell_even.js
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
const audio = document.getElementById('audio');
|
||||||
|
const playPauseBtn = document.getElementById('play-pause');
|
||||||
|
const progress = document.getElementById('progress');
|
||||||
|
const time = document.getElementById('time');
|
||||||
|
const vinyl = document.querySelector('.vinyl');
|
||||||
|
|
||||||
|
let isPlaying = false;
|
||||||
|
|
||||||
|
// Play / Pause button
|
||||||
|
playPauseBtn.addEventListener('click', () => {
|
||||||
|
if (isPlaying) {
|
||||||
|
audio.pause();
|
||||||
|
vinyl.style.animationPlayState = 'paused';
|
||||||
|
playPauseBtn.textContent = '▶️';
|
||||||
|
} else {
|
||||||
|
audio.play();
|
||||||
|
vinyl.style.animationPlayState = 'running';
|
||||||
|
playPauseBtn.textContent = '⏸️';
|
||||||
|
}
|
||||||
|
isPlaying = !isPlaying;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update progress and time
|
||||||
|
audio.addEventListener('timeupdate', () => {
|
||||||
|
progress.value = audio.currentTime;
|
||||||
|
updateTimeDisplay();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set duration when audio loads
|
||||||
|
audio.addEventListener('loadedmetadata', () => {
|
||||||
|
progress.max = audio.duration;
|
||||||
|
updateTimeDisplay();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Seek audio
|
||||||
|
progress.addEventListener('input', () => {
|
||||||
|
audio.currentTime = progress.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateTimeDisplay() {
|
||||||
|
const format = (s) => {
|
||||||
|
const m = Math.floor(s / 60);
|
||||||
|
const ss = Math.floor(s % 60);
|
||||||
|
return `${m}:${ss < 10 ? '0' + ss : ss}`;
|
||||||
|
};
|
||||||
|
time.textContent = `${format(audio.currentTime)} / ${format(audio.duration)}`;
|
||||||
|
}
|
||||||
@ -12,7 +12,7 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
|
<a href="main.html"><img src="logo.png" class="logo"></a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<h1>Let your favorite songs play on LOOP.</h1>
|
<h1>Let your favorite songs play on LOOP.</h1>
|
||||||
@ -21,7 +21,7 @@
|
|||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<input type="text" placeholder="Username" required>
|
<input type="text" placeholder="Username" required>
|
||||||
<input type="password" placeholder="Password" required>
|
<input type="password" placeholder="Password" required>
|
||||||
<a href="file:///home/devel/Desktop/loop-code/assets/front.html" class="button">Log In</a>
|
<a href="front.html" class="button">Log In</a>
|
||||||
</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>
|
||||||
|
|||||||
@ -2,22 +2,29 @@
|
|||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<title>Muddy Files</title>
|
||||||
<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="stylesmf.css">
|
<link rel="stylesheet" href="stylesmf.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
|
<a href="main.html"><img src="logo.png" alt="Logo" class="logo"></a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="vinyl-wrapper">
|
||||||
|
<div class="vinyl">
|
||||||
|
<img src="pochette.jpg" alt="Pochette de l'album">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<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>
|
||||||
|
|
||||||
|
<script src="muddy_files.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,47 @@
|
|||||||
|
const audio = document.getElementById('audio');
|
||||||
|
const playPauseBtn = document.getElementById('play-pause');
|
||||||
|
const progress = document.getElementById('progress');
|
||||||
|
const time = document.getElementById('time');
|
||||||
|
const vinyl = document.querySelector('.vinyl');
|
||||||
|
|
||||||
|
let isPlaying = false;
|
||||||
|
|
||||||
|
// Play / Pause button
|
||||||
|
playPauseBtn.addEventListener('click', () => {
|
||||||
|
if (isPlaying) {
|
||||||
|
audio.pause();
|
||||||
|
vinyl.style.animationPlayState = 'paused';
|
||||||
|
playPauseBtn.textContent = '▶️';
|
||||||
|
} else {
|
||||||
|
audio.play();
|
||||||
|
vinyl.style.animationPlayState = 'running';
|
||||||
|
playPauseBtn.textContent = '⏸️';
|
||||||
|
}
|
||||||
|
isPlaying = !isPlaying;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update progress and time
|
||||||
|
audio.addEventListener('timeupdate', () => {
|
||||||
|
progress.value = audio.currentTime;
|
||||||
|
updateTimeDisplay();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set duration when audio loads
|
||||||
|
audio.addEventListener('loadedmetadata', () => {
|
||||||
|
progress.max = audio.duration;
|
||||||
|
updateTimeDisplay();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Seek audio
|
||||||
|
progress.addEventListener('input', () => {
|
||||||
|
audio.currentTime = progress.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateTimeDisplay() {
|
||||||
|
const format = (s) => {
|
||||||
|
const m = Math.floor(s / 60);
|
||||||
|
const ss = Math.floor(s % 60);
|
||||||
|
return `${m}:${ss < 10 ? '0' + ss : ss}`;
|
||||||
|
};
|
||||||
|
time.textContent = `${format(audio.currentTime)} / ${format(audio.duration)}`;
|
||||||
|
}
|
||||||
@ -1,109 +1,123 @@
|
|||||||
@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');
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) { /* Écran plus large (tablette, PC) */
|
|
||||||
.container {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Par défaut, style mobile */
|
|
||||||
body {
|
body {
|
||||||
font-size: 16px;
|
background: linear-gradient(to bottom, #500000, #000000);
|
||||||
background: linear-gradient(to bottom, #585858, #000000);
|
color: white;
|
||||||
display: grid;
|
display: flex;
|
||||||
place-items: center; /* Centre horizontalement et verticalement */
|
flex-direction: column;
|
||||||
height: 100vh;
|
align-items: center;
|
||||||
margin: 0;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Quand l'écran est large (ex : tablette ou ordinateur) */
|
header {
|
||||||
@media (min-width: 768px) {
|
width: 100%;
|
||||||
body {
|
padding: 15px 30px;
|
||||||
font-size: 18px;
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
margin-top: 40px;
|
width: 100px;
|
||||||
max-width: 280px;
|
height: auto;
|
||||||
}
|
|
||||||
|
|
||||||
.logofront{
|
|
||||||
max-width: 130px;
|
|
||||||
margin-right: 700px;
|
|
||||||
margin-bottom: 880px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
margin-top: 120px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
.vinyl-wrapper {
|
||||||
color: #ffffff;
|
width: 250px;
|
||||||
font-size: 70%;
|
height: 250px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
.vinyl {
|
||||||
color: #ffffff;
|
|
||||||
font-size: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.orange {
|
|
||||||
color: #ffa600;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.orange:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-container {
|
|
||||||
background: white;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 30px;
|
|
||||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
|
|
||||||
width: 300px;
|
|
||||||
height: 400px;
|
|
||||||
text-align: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-container input {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
height: 100%;
|
||||||
margin: 10px 0;
|
border-radius: 50%;
|
||||||
border: 1px solid #ccc;
|
background: black;
|
||||||
border-radius: 50px;
|
display: flex;
|
||||||
font-size: 16px;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
animation: spin 5s linear infinite paused;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.vinyl img {
|
||||||
width: 100%;
|
width: 100px;
|
||||||
padding: 10px;
|
height: 100px;
|
||||||
background-color:#ffa600;
|
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;
|
color: white;
|
||||||
|
font-size: 30px;
|
||||||
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 50px;
|
|
||||||
font-size: 18px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.3s ease;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
#play-pause:hover {
|
||||||
background-color: #dd3000;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,42 +1,123 @@
|
|||||||
@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');
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
}
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: linear-gradient(to bottom, #316997, #18344b);
|
background: linear-gradient(to bottom, #316997, #18344b);
|
||||||
}
|
color: white;
|
||||||
|
|
||||||
/* Structure de base */
|
|
||||||
header {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start; /* Aligne à gauche */
|
flex-direction: column;
|
||||||
align-items: center; /* Centré verticalement si tu ajoutes du texte à côté */
|
align-items: center;
|
||||||
padding: 10px 20px;
|
min-height: 100vh;
|
||||||
position: relative;
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Style du logo */
|
|
||||||
.logo {
|
.logo {
|
||||||
width: 120px; /* Ajuste la taille selon ton design */
|
width: 100px;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive pour smartphone */
|
.container {
|
||||||
@media (max-width: 768px) {
|
margin-top: 120px;
|
||||||
.logo {
|
display: flex;
|
||||||
width: 100px; /* Un peu plus petit sur mobile si nécessaire */
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
.vinyl-wrapper {
|
||||||
padding: 10px;
|
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;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user