Interface Finale

This commit is contained in:
2025-04-21 19:03:59 +02:00
parent 897b244d16
commit d4300b6963
15 changed files with 873 additions and 305 deletions
+38 -17
View File
@@ -1,30 +1,51 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<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">
<link rel="stylesheet" href="stylesmf.css" />
</head>
<body>
<header>
<a href="main.html"><img src="logo.png" alt="Logo" class="logo"></a>
</header>
<div class="container">
<div class="vinyl-wrapper">
<div class="vinyl">
<img src="pochette.jpg" alt="Pochette de l'album">
<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>
<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>
<audio id="audio" src="muddy_files.mp3"></audio>
</main>
<script src="muddy_files.js"></script>
<script src="script.js"></script>
</body>
</html>