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
|
console.log( 'hello')
|
||||||
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;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 30px; /* pour séparer du reste */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
h1 {
|
||||||
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: 60%;
|
font-size: 40%;
|
||||||
}
|
|
||||||
|
|
||||||
.login-title {
|
|
||||||
color: black;
|
|
||||||
font-size: 24px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.orange {
|
.orange {
|
||||||
@ -82,6 +73,7 @@ h2 {
|
|||||||
text-align: center
|
text-align: center
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Champs de texte */
|
||||||
.login-container input {
|
.login-container input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -91,16 +83,10 @@ h2 {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-container input:focus {
|
/* Bouton */
|
||||||
border: 2px solid #ffa600; /* ou la couleur que tu veux */
|
.login-container button {
|
||||||
outline: none; /* enlève le contour bleu par défaut */
|
width: 100%;
|
||||||
}
|
padding: 10px;
|
||||||
|
|
||||||
.button {
|
|
||||||
display: inline-block;
|
|
||||||
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;
|
||||||
@ -108,17 +94,11 @@ h2 {
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.3s ease;
|
transition: background 0.3s ease;
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.login-container button:hover {
|
||||||
.button:hover {
|
|
||||||
background-color: #dd3000;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@ -16,7 +16,7 @@ app.use(express.static('assets'))
|
|||||||
app.get('/', (req, res) => {
|
app.get('/', (req, res) => {
|
||||||
// res.send('Hello World!')
|
// res.send('Hello World!')
|
||||||
// res.render('index', { title: 'Hey', message: 'Hello there PUG!' })
|
// res.render('index', { title: 'Hey', message: 'Hello there PUG!' })
|
||||||
res.sendFile('main.html');
|
res.sendFile('index.html');
|
||||||
})
|
})
|
||||||
|
|
||||||
io.on('connection', (socket) => {
|
io.on('connection', (socket) => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user