82 lines
3.4 KiB
HTML
82 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Playlist Viewer - Spotizerr</title>
|
|
<!-- Add the new base.css first -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/main/base.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/queue/queue.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/main/icons.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/playlist/playlist.css') }}" />
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<div id="playlist-header" class="content-header hidden">
|
|
<!-- Playlist Image -->
|
|
<img id="playlist-image" class="header-image" alt="Playlist cover" onerror="this.src='/static/images/placeholder.jpg'">
|
|
|
|
<!-- Playlist Info -->
|
|
<div id="playlist-info" class="header-info">
|
|
<h1 id="playlist-name" class="header-title"></h1>
|
|
<p id="playlist-owner" class="header-subtitle"></p>
|
|
<p id="playlist-stats" class="header-subtitle"></p>
|
|
<p id="playlist-description" class="playlist-description"></p>
|
|
|
|
<!-- Download Buttons -->
|
|
<div class="header-actions">
|
|
<button id="downloadPlaylistBtn" class="download-btn btn-primary">
|
|
<img src="{{ url_for('static', filename='images/download.svg') }}" alt="Download">
|
|
Download Whole Playlist
|
|
</button>
|
|
<button id="downloadAlbumsBtn" class="download-btn">
|
|
<img src="{{ url_for('static', filename='images/album.svg') }}" alt="Albums">
|
|
Download Playlist's Albums
|
|
</button>
|
|
<button id="watchPlaylistBtn" class="download-btn watch-btn">
|
|
<img src="{{ url_for('static', filename='images/eye.svg') }}" alt="Watch">
|
|
Watch Playlist
|
|
</button>
|
|
<button id="syncPlaylistBtn" class="download-btn sync-btn hidden">
|
|
<img src="{{ url_for('static', filename='images/refresh.svg') }}" alt="Sync">
|
|
Sync Watched Playlist
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tracks-container" class="hidden">
|
|
<h2 class="section-title">Tracks</h2>
|
|
<div id="tracks-list" class="tracks-list"></div>
|
|
</div>
|
|
|
|
<!-- Loading and Error states -->
|
|
<div id="loading" class="loading">
|
|
<div class="loading-indicator">Loading...</div>
|
|
</div>
|
|
<div id="error" class="error hidden">Error loading playlist</div>
|
|
</div>
|
|
|
|
<!-- Fixed floating buttons for home and queue -->
|
|
<button id="homeButton" class="btn-icon home-btn floating-icon settings-icon" aria-label="Return to home">
|
|
<img src="{{ url_for('static', filename='images/home.svg') }}" alt="Home">
|
|
</button>
|
|
|
|
<a href="/watchlist" class="btn-icon watchlist-icon floating-icon" aria-label="Watchlist" title="Go to Watchlist">
|
|
<img src="{{ url_for('static', filename='images/binoculars.svg') }}" alt="Watchlist" onerror="handleImageError(this)"/>
|
|
</a>
|
|
|
|
<button
|
|
id="queueIcon"
|
|
class="btn-icon queue-icon floating-icon"
|
|
aria-label="Download queue"
|
|
aria-controls="downloadQueue"
|
|
aria-expanded="false"
|
|
>
|
|
<img src="{{ url_for('static', filename='images/queue.svg') }}" alt="Queue Icon">
|
|
</button>
|
|
|
|
<script type="module" src="{{ url_for('static', filename='js/playlist.js') }}"></script>
|
|
</body>
|
|
</html>
|