lecteur sons
This commit is contained in:
parent
838201bb58
commit
897b244d16
@ -12,12 +12,12 @@
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
|
||||
<a href="main.html"><img src="logo.png" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<div class="music-list">
|
||||
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/muddy_files.html" class="music-card">
|
||||
|
||||
<a href="muddy_files.html" class="music-card">
|
||||
<img src="muddyfiles.jpg" alt="muddyfiles">
|
||||
<div class="music-info">
|
||||
<h3>Muddy Files</h3>
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/hell_even.html" class="music-card">
|
||||
<a href="hell_even.html" class="music-card">
|
||||
<img src="helleven.jpg" alt="helleven">
|
||||
<div class="music-info">
|
||||
<h3>Hell Even</h3>
|
||||
@ -33,7 +33,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/hell_even.html" class="music-card">
|
||||
<a href="hell_even.html" class="music-card">
|
||||
<img src="stamina.jpg" alt="stamina">
|
||||
<div class="music-info">
|
||||
<h3>Stamina</h3>
|
||||
|
||||
@ -1,31 +1,30 @@
|
||||
<!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="styleshe.css">
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Hell Even</title>
|
||||
<link rel="stylesheet" href="styleshe.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="main.html"><img src="logo.png" alt="Logo" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<header>
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<h1>Let your favorite songs play on LOOP.</h1>
|
||||
|
||||
|
||||
<div class="login-container">
|
||||
|
||||
<div class="container">
|
||||
<div class="vinyl-wrapper">
|
||||
<div class="vinyl">
|
||||
<img src="pochette.jpg" alt="Pochette de l'album">
|
||||
</div>
|
||||
|
||||
<h2>Don't have an account ?<a href="" class="orange"> Sign up now.</a> </span></h2>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<div class="audio-player">
|
||||
<audio id="audio" src="paradisev2.mp3"></audio>
|
||||
<button id="play-pause">▶️</button>
|
||||
<input type="range" id="progress" value="0" step="1">
|
||||
<div id="time">0:00 / 0:00</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="muddy_files.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)}`;
|
||||
}
|
||||
@ -12,7 +12,7 @@
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
|
||||
<a href="main.html"><img src="logo.png" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<h1>Let your favorite songs play on LOOP.</h1>
|
||||
@ -21,7 +21,7 @@
|
||||
<div class="login-container">
|
||||
<input type="text" placeholder="Username" required>
|
||||
<input type="password" placeholder="Password" required>
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/front.html" class="button">Log In</a>
|
||||
<a href="front.html" class="button">Log In</a>
|
||||
</div>
|
||||
|
||||
<h2>Don't have an account ?<a href="" class="orange"> Sign up now.</a> </span></h2>
|
||||
|
||||
@ -1,23 +1,30 @@
|
||||
<!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="stylesmf.css">
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Muddy Files</title>
|
||||
<link rel="stylesheet" href="stylesmf.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="main.html"><img src="logo.png" alt="Logo" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<header>
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
|
||||
</header>
|
||||
<div class="container">
|
||||
<div class="vinyl-wrapper">
|
||||
<div class="vinyl">
|
||||
<img src="pochette.jpg" alt="Pochette de l'album">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
<div class="audio-player">
|
||||
<audio id="audio" src="muddy_files.mp3"></audio>
|
||||
<button id="play-pause">▶️</button>
|
||||
<input type="range" id="progress" value="0" step="1">
|
||||
<div id="time">0:00 / 0:00</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="muddy_files.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -0,0 +1,47 @@
|
||||
const audio = document.getElementById('audio');
|
||||
const playPauseBtn = document.getElementById('play-pause');
|
||||
const progress = document.getElementById('progress');
|
||||
const time = document.getElementById('time');
|
||||
const vinyl = document.querySelector('.vinyl');
|
||||
|
||||
let isPlaying = false;
|
||||
|
||||
// Play / Pause button
|
||||
playPauseBtn.addEventListener('click', () => {
|
||||
if (isPlaying) {
|
||||
audio.pause();
|
||||
vinyl.style.animationPlayState = 'paused';
|
||||
playPauseBtn.textContent = '▶️';
|
||||
} else {
|
||||
audio.play();
|
||||
vinyl.style.animationPlayState = 'running';
|
||||
playPauseBtn.textContent = '⏸️';
|
||||
}
|
||||
isPlaying = !isPlaying;
|
||||
});
|
||||
|
||||
// Update progress and time
|
||||
audio.addEventListener('timeupdate', () => {
|
||||
progress.value = audio.currentTime;
|
||||
updateTimeDisplay();
|
||||
});
|
||||
|
||||
// Set duration when audio loads
|
||||
audio.addEventListener('loadedmetadata', () => {
|
||||
progress.max = audio.duration;
|
||||
updateTimeDisplay();
|
||||
});
|
||||
|
||||
// Seek audio
|
||||
progress.addEventListener('input', () => {
|
||||
audio.currentTime = progress.value;
|
||||
});
|
||||
|
||||
function updateTimeDisplay() {
|
||||
const format = (s) => {
|
||||
const m = Math.floor(s / 60);
|
||||
const ss = Math.floor(s % 60);
|
||||
return `${m}:${ss < 10 ? '0' + ss : ss}`;
|
||||
};
|
||||
time.textContent = `${format(audio.currentTime)} / ${format(audio.duration)}`;
|
||||
}
|
||||
@ -1,109 +1,123 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
box-sizing: border-box;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) { /* Écran plus large (tablette, PC) */
|
||||
.container {
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
/* Par défaut, style mobile */
|
||||
body {
|
||||
font-size: 16px;
|
||||
background: linear-gradient(to bottom, #585858, #000000);
|
||||
display: grid;
|
||||
place-items: center; /* Centre horizontalement et verticalement */
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Quand l'écran est large (ex : tablette ou ordinateur) */
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.logo{
|
||||
margin-top: 40px;
|
||||
max-width: 280px;
|
||||
body {
|
||||
background: linear-gradient(to bottom, #500000, #000000);
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.logofront{
|
||||
max-width: 130px;
|
||||
margin-right: 700px;
|
||||
margin-bottom: 880px;
|
||||
header {
|
||||
width: 100%;
|
||||
padding: 15px 30px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ffffff;
|
||||
font-size: 70%;
|
||||
margin-top: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #ffffff;
|
||||
font-size: 40%;
|
||||
.vinyl-wrapper {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.orange {
|
||||
color: #ffa600;
|
||||
text-decoration: none;
|
||||
.vinyl {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: spin 5s linear infinite paused;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.orange:hover {
|
||||
text-decoration: underline;
|
||||
.vinyl img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
text-align: center
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.login-container input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
/* Bouton play/pause en blanc */
|
||||
#play-pause {
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color:#ffa600;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
text-decoration: none;
|
||||
#play-pause:hover {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #dd3000;
|
||||
/* Barre de progression audio blanche */
|
||||
#progress {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* Curseur (thumb) blanc */
|
||||
#progress::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
#progress::-moz-range-thumb {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Texte du timer blanc (déjà par défaut mais pour être sûr) */
|
||||
#time {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -1,42 +1,123 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom, #316997, #18344b);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom, #316997, #18344b);
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
padding: 15px 30px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vinyl-wrapper {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vinyl {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: spin 5s linear infinite paused;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vinyl img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Bouton play/pause en blanc */
|
||||
#play-pause {
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#play-pause:hover {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
/* Barre de progression audio blanche */
|
||||
#progress {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* Curseur (thumb) blanc */
|
||||
#progress::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#progress::-moz-range-thumb {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Texte du timer blanc (déjà par défaut mais pour être sûr) */
|
||||
#time {
|
||||
color: white;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user