Compare commits
4 Commits
148b240bb7
...
c63d1cc49e
| Author | SHA1 | Date | |
|---|---|---|---|
| c63d1cc49e | |||
| d4300b6963 | |||
| 897b244d16 | |||
| 838201bb58 |
BIN
assets/C9EED782-8F3C-40E5-87C0-5E2032ADAB72.jpeg
Normal file
BIN
assets/C9EED782-8F3C-40E5-87C0-5E2032ADAB72.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
assets/Cover.png
Normal file
BIN
assets/Cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
51
assets/Roman.html
Normal file
51
assets/Roman.html
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||||
|
<title>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>
|
||||||
BIN
assets/WhatsApp Image 2025-04-21 at 15.01.32.jpeg
Normal file
BIN
assets/WhatsApp Image 2025-04-21 at 15.01.32.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
59
assets/front.html
Normal file
59
assets/front.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<!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>
|
||||||
BIN
assets/hell even 5.png
Normal file
BIN
assets/hell even 5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
51
assets/hell_even.html
Normal file
51
assets/hell_even.html
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||||
|
<title>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>
|
||||||
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)}`;
|
||||||
|
}
|
||||||
@ -1,33 +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.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
Normal file
BIN
assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
35
assets/main.html
Normal file
35
assets/main.html
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<!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>
|
||||||
|
|
||||||
18
assets/main.js
Normal file
18
assets/main.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
document.getElementById('loginBtn').addEventListener('click', function(event) {
|
||||||
|
event.preventDefault(); // Empêche le bouton de recharger ou changer de page
|
||||||
|
|
||||||
|
const username = document.getElementById('username').value.trim();
|
||||||
|
const password = document.getElementById('password').value.trim();
|
||||||
|
const errorMessage = document.getElementById('error-message');
|
||||||
|
|
||||||
|
// Identifiants valides en dur (à modifier selon ton besoin)
|
||||||
|
const validUsername = "ELY";
|
||||||
|
const validPassword = "Bilan6";
|
||||||
|
|
||||||
|
if (username === validUsername && password === validPassword) {
|
||||||
|
window.location.href = "front.html"; // Redirige vers la page suivante
|
||||||
|
} else {
|
||||||
|
errorMessage.textContent = "Incorrect username or password.";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
51
assets/muddy_files.html
Normal file
51
assets/muddy_files.html
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||||
|
<title>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>
|
||||||
47
assets/muddy_files.js
Normal file
47
assets/muddy_files.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)}`;
|
||||||
|
}
|
||||||
BIN
assets/paradisev2.mp3
Normal file
BIN
assets/paradisev2.mp3
Normal file
Binary file not shown.
@ -1 +1,93 @@
|
|||||||
console.log( 'hello')
|
// 1. Sélection des éléments du DOM
|
||||||
|
const vinyl = document.getElementById('vinyl');
|
||||||
|
const audio = document.getElementById('audio');
|
||||||
|
const progress = document.getElementById('progress');
|
||||||
|
const currentTimeEl = document.getElementById('currentTime');
|
||||||
|
const durationEl = document.getElementById('duration');
|
||||||
|
const backwardBtn = document.getElementById('backward');
|
||||||
|
const forwardBtn = document.getElementById('forward');
|
||||||
|
const loopBtn = document.getElementById('loop');
|
||||||
|
|
||||||
|
// 2. Variables utiles
|
||||||
|
let isPlaying = false;
|
||||||
|
let isLooping = false;
|
||||||
|
|
||||||
|
// 3. Fonctions
|
||||||
|
|
||||||
|
// Fonction pour basculer la lecture
|
||||||
|
function togglePlay() {
|
||||||
|
if (isPlaying) {
|
||||||
|
audio.pause();
|
||||||
|
vinyl.style.animationPlayState = 'paused';
|
||||||
|
} else {
|
||||||
|
audio.play();
|
||||||
|
vinyl.style.animationPlayState = 'running';
|
||||||
|
}
|
||||||
|
isPlaying = !isPlaying;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mise à jour de la barre de progression
|
||||||
|
function updateProgress() {
|
||||||
|
const progressPercent = (audio.currentTime / audio.duration) * 100;
|
||||||
|
progress.value = progressPercent;
|
||||||
|
currentTimeEl.textContent = formatTime(audio.currentTime);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fonction pour formater le temps (min:sec)
|
||||||
|
function formatTime(time) {
|
||||||
|
const minutes = Math.floor(time / 60);
|
||||||
|
const seconds = Math.floor(time % 60);
|
||||||
|
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fonction pour changer la position de lecture en cliquant sur la barre
|
||||||
|
function setProgress(e) {
|
||||||
|
const width = progress.clientWidth;
|
||||||
|
const clickX = e.offsetX;
|
||||||
|
const duration = audio.duration;
|
||||||
|
audio.currentTime = (clickX / width) * duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Événements
|
||||||
|
|
||||||
|
// Clique sur le vinyle pour basculer lecture
|
||||||
|
vinyl.addEventListener('click', togglePlay);
|
||||||
|
|
||||||
|
// Mise à jour de la barre de progression à chaque changement de temps
|
||||||
|
audio.addEventListener('timeupdate', updateProgress);
|
||||||
|
|
||||||
|
// Mise à jour de la durée du titre dès que l'audio est chargé
|
||||||
|
audio.addEventListener('loadedmetadata', () => {
|
||||||
|
durationEl.textContent = formatTime(audio.duration);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Permet de cliquer sur la barre de progression
|
||||||
|
progress.addEventListener('click', setProgress);
|
||||||
|
|
||||||
|
// Bouton reculer de 10s
|
||||||
|
backwardBtn.addEventListener('click', () => {
|
||||||
|
audio.currentTime = Math.max(0, audio.currentTime - 10);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Bouton avancer de 10s
|
||||||
|
forwardBtn.addEventListener('click', () => {
|
||||||
|
audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Bouton pour activer/désactiver la boucle (LOOP)
|
||||||
|
loopBtn.addEventListener('click', () => {
|
||||||
|
isLooping = !isLooping;
|
||||||
|
loopBtn.style.backgroundColor = isLooping ? 'white' : 'transparent';
|
||||||
|
loopBtn.style.color = isLooping ? '#18344b' : 'white';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Lorsque l'audio est terminé, on répète si la boucle est activée
|
||||||
|
audio.addEventListener('ended', () => {
|
||||||
|
if (isLooping) {
|
||||||
|
audio.currentTime = 0;
|
||||||
|
audio.play();
|
||||||
|
} else {
|
||||||
|
vinyl.style.animationPlayState = 'paused';
|
||||||
|
isPlaying = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|||||||
BIN
assets/song to song v4.mp3
Normal file
BIN
assets/song to song v4.mp3
Normal file
Binary file not shown.
BIN
assets/stamina-v17.mp3
Normal file
BIN
assets/stamina-v17.mp3
Normal file
Binary file not shown.
51
assets/stamina.html
Normal file
51
assets/stamina.html
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||||
|
<title>Stamina</title>
|
||||||
|
<link rel="stylesheet" href="stylestam.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="page-header">
|
||||||
|
<a href="front.html" class="logo-container">
|
||||||
|
<img src="logo.png" alt="Logo" class="logo" />
|
||||||
|
</a>
|
||||||
|
<h1 class="title">Stamina</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<main class="vinyl-container">
|
||||||
|
|
||||||
|
<div class="vinyl" id="vinyl">
|
||||||
|
<img src="WhatsApp Image 2025-04-21 at 15.01.32.jpeg" alt="Pochette" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="title-under">
|
||||||
|
<span class="song-title">Stamina</span><br>
|
||||||
|
<span class="artist-name">Corb Nurk</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="progress-container">
|
||||||
|
<input type="range" id="progress" value="0" />
|
||||||
|
|
||||||
|
<div class="time-wrapper">
|
||||||
|
<div id="currentTime" class="time">0:00</div>
|
||||||
|
<div id="duration" class="time">4:43</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="buttons-container">
|
||||||
|
<button id="backward">- 10s</button>
|
||||||
|
<button id="loop">LOOP</button>
|
||||||
|
<button id="forward">10s +</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<audio id="audio" src="stamina-v17.mp3"></audio>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,3 +0,0 @@
|
|||||||
body{
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
@ -31,27 +31,36 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
display: block;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 70%;
|
font-size: 70%;
|
||||||
|
margin-top: 10px; /* espace entre logo et h1 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 40%;
|
font-size: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
color: black;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.orange {
|
.orange {
|
||||||
@ -73,7 +82,6 @@ h2 {
|
|||||||
text-align: center
|
text-align: center
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Champs de texte */
|
|
||||||
.login-container input {
|
.login-container input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -83,10 +91,16 @@ h2 {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Bouton */
|
.login-container input:focus {
|
||||||
.login-container button {
|
border: 2px solid #ffa600; /* ou la couleur que tu veux */
|
||||||
width: 100%;
|
outline: none; /* enlève le contour bleu par défaut */
|
||||||
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;
|
||||||
@ -94,11 +108,17 @@ 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;
|
||||||
|
}
|
||||||
|
|
||||||
90
assets/stylesfront.css
Normal file
90
assets/stylesfront.css
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
196
assets/styleshe.css
Normal file
196
assets/styleshe.css
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(to bottom, #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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
196
assets/stylesmf.css
Normal file
196
assets/stylesmf.css
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(to bottom, #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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
196
assets/stylesrom.css
Normal file
196
assets/stylesrom.css
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(to bottom, #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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
196
assets/stylestam.css
Normal file
196
assets/stylestam.css
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(to bottom, #000000, #4e4e4e);
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.page-header {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
pointer-events: none; /* pour que seul le logo reste cliquable */
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
pointer-events: auto; /* permet au logo d'être cliquable malgré pointer-events: none plus haut */
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 120px;
|
||||||
|
height: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.vinyl-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Titre du bas avec un <br> stylé */
|
||||||
|
|
||||||
|
.title-under {
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-title {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artist-name {
|
||||||
|
margin: none;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 400;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vinyl {
|
||||||
|
width: 600px;
|
||||||
|
height: 600px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle at center, #444 0%, #111 60%, #000 100%);
|
||||||
|
animation: spin 5s linear infinite paused;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vinyl img {
|
||||||
|
width: 40%;
|
||||||
|
border-radius: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style pour la barre de progression */
|
||||||
|
.progress-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 500px;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progress {
|
||||||
|
width: 100%;
|
||||||
|
height: 6px;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 5px;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progress::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progress::-moz-range-thumb {
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Position des timestamps */
|
||||||
|
|
||||||
|
.time-wrapper {
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px; /* <-- ajoute ceci pour écarter duration du bouton */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.buttons-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 500px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 16px;
|
||||||
|
background: none;
|
||||||
|
border: 1px solid white;
|
||||||
|
color: white;
|
||||||
|
padding: 6px 14px;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.vinyl {
|
||||||
|
width: 70vw;
|
||||||
|
height: 70vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vinyl img {
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progress {
|
||||||
|
width: 85vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons-container {
|
||||||
|
width: 85vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -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('index.html');
|
res.sendFile('main.html');
|
||||||
})
|
})
|
||||||
|
|
||||||
io.on('connection', (socket) => {
|
io.on('connection', (socket) => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user