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.
71 lines
2.9 KiB
71 lines
2.9 KiB
9 months ago
|
<!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>
|