You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.9 KiB
70 lines
2.9 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Нейрошансон и не только</title> |
|
<!-- Bootstrap 5 CSS --> |
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
<!-- Bootstrap Icons --> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> |
|
<!-- Custom CSS --> |
|
<link rel="stylesheet" href="/static/css/styles.css"> |
|
</head> |
|
<body class="bg-dark text-light"> |
|
<div class="container-fluid min-vh-100 justify-content-center"> |
|
<div class="row g-0"> |
|
<div class="col-md-4 p-4 sticky-column"> |
|
<div class="player-card card bg-dark border-secondary mx-auto" style="max-width: 400px;"> |
|
<!-- Album Art --> |
|
<img id="cover" src="" class="card-img-top" alt="Album Cover" style="border-radius: 15px 15px 0 0;"> |
|
|
|
<!-- Song Info --> |
|
<div class="card-body text-center"> |
|
<h3 id="song-title" class="card-title mb-1">-</h3> |
|
<p id="song-artist" class="text-muted mb-4">-</p> |
|
|
|
<!-- Progress Bar --> |
|
<div class="progress bg-transparent mb-3" id="progress-container" style="height: 3px; cursor: pointer;"> |
|
<div id="progress-bar" class="progress-bar bg-primary" role="progressbar" style="width: 0%"></div> |
|
</div> |
|
|
|
<!-- Time Display --> |
|
<div class="d-flex justify-content-between small text-muted mb-4"> |
|
<span id="current-time">0:00</span> |
|
<span id="duration-time">0:00</span> |
|
</div> |
|
|
|
<!-- Controls --> |
|
<div class="d-flex justify-content-center gap-3"> |
|
<button onclick="previousTrack()" class="btn btn-outline-light btn-lg rounded-circle"> |
|
<i class="bi bi-skip-start-fill"></i> |
|
</button> |
|
<button onclick="togglePlay()" id="playBtn" class="btn btn-light btn-lg rounded-circle px-4"> |
|
<i class="bi bi-play-fill"></i> |
|
</button> |
|
<button onclick="nextTrack()" class="btn btn-outline-light btn-lg rounded-circle"> |
|
<i class="bi bi-skip-end-fill"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Playlist --> |
|
<div class="col-md-8 p-4 scrollable-column"> |
|
<div class="playlist" style="max-width: 600px;"> |
|
<h5 class="mb-3">Playlist</h5> |
|
<div id="track-list" class="list-group bg-transparent"> |
|
<!-- Dynamic track list --> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Scripts --> |
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> |
|
<script src="/static/js/player.js"></script> |
|
</body> |
|
</html>
|
|
|