110 lines
4.5 KiB
HTML
110 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Pyrite</title>
|
|
<link rel="stylesheet" type="text/css" href="./static/pyrite.css">
|
|
<script type="text/javascript" src="./static/pyrite.js"></script>
|
|
<script>window.onload = init;</script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.6">
|
|
<meta name="description" content="Fool's gold.">
|
|
<link rel="manifest" href="./static/pyrite.webmanifest">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Pyrite</h1>
|
|
</header>
|
|
<div id="artist_list" class="list">
|
|
{% for artist in artists %}
|
|
<label for="artist_{{ loop.index }}">
|
|
<input type="radio" id="artist_{{ loop.index }}" name="artist" value="{{ artist }}" onclick="select_artist(event)">
|
|
<div class="list_item artist">
|
|
<span class="artist_name">{{ artist }}</span>
|
|
</div>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
<div id="album_list" class="list">
|
|
</div>
|
|
<div id="track_list" class="list">
|
|
</div>
|
|
<div id="player_container">
|
|
<div id="settings">
|
|
<div>
|
|
<label for="playlist-select">Playlist:</label>
|
|
<select id="playlist-select" onchange="select_playlist(event)">
|
|
<option value="">All Tracks</option>
|
|
{% for playlist in playlists %}
|
|
<option value="{{ playlist }}"{% if playlist == request.cookies.get('playlist') %} selected{% endif %}>{{ playlist }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="visualizer-select">Visualizer:</label>
|
|
<select id="visualizer-select" onchange="select_visualizer(event)">
|
|
<option value="disabled" selected>Disabled</option>
|
|
<option value="bar_graph">Bar Graph</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="cover_art"><img alt="Album cover art" src="./static/pyrite-256x256.jpg"></div>
|
|
<div id="title">
|
|
<h2><span id="now_playing_artist">Artist</span> - <span id="now_playing_album">Album</span></h2>
|
|
<h2 id="now_playing_title">Title</h2>
|
|
<canvas id="visualizer" height="300" width="1000"></canvas>
|
|
</div>
|
|
<div id="player_controls">
|
|
<audio id="player" style="display:none"></audio>
|
|
<button id="prev-track-btn" class="btn" onclick="prevTrack()" aria-label="Previous Track">
|
|
<img id="prev" alt="Previous Track" src="./static/prev.svg"></img>
|
|
</button>
|
|
<button id="play-btn" class="btn" onclick="playTrack()" aria-label="Play Track">
|
|
<img id="prev" alt="Play Track" src="./static/play.svg"></img>
|
|
</button>
|
|
<button id="pause-btn" class="btn" onclick="pauseTrack()" aria-label="Pause Track" style="display:none">
|
|
<img id="prev" alt="Pause Track" src="./static/pause.svg"></img>
|
|
</button>
|
|
<button id="next-track-btn" class="btn" onclick="nextTrack()" aria-label="Next Track">
|
|
<img id="prev" alt="Next Track" src="./static/prev.svg"></img>
|
|
</button>
|
|
<button id="vol-btn" class="btn" onclick="volume_off()" aria-label="Volume Off">
|
|
<img id="vol" alt="Volume Off" src="./static/volume-max.svg"</img>
|
|
</button>
|
|
<button id="vol-off-btn" class="btn" onclick="volume_restore()" aria-label="Volume Restore" style="display:none">
|
|
<img id="vol-off" alt="Volume Restore" src="./static/volume-off.svg"</img>
|
|
</button>
|
|
<input id="volume-slider" type="range" max="100" value="100"aria-label="Volume Slider">
|
|
</div>
|
|
<div id="seek_controls">
|
|
<input id="seek-slider" type="range" max="0" value="0" aria-label="Seek Slider">
|
|
<output id="current-time">0:00</output>/<output id="duration">0:00</output>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<template id="artist_template">
|
|
<label for="artist_$n">
|
|
<input type="radio" id="artist_$n" name="artist" value="$artist_name" onclick="select_artist(event)">
|
|
<div class="list_item artist">
|
|
<span class="artist_name">$artist_name</span>
|
|
</div>
|
|
</label>
|
|
</template>
|
|
<template id="album_template">
|
|
<label for="album_$n">
|
|
<input type="radio" id="album_$n" name="album" value="$album_name" onclick="select_album(event)">
|
|
<div class="list_item album">
|
|
<img src=""><span class="album_name">$album_name</span><span class="album_year">$album_year</span>
|
|
</div>
|
|
</label>
|
|
</template>
|
|
<template id="track_template">
|
|
<label for="track_$n">
|
|
<input type="radio" id="track_$n" name="track" value="$track_title" onclick="select_track(event)">
|
|
<div class="list_item track">
|
|
<span class="track_num">$disc_num.$track_num</span><span class="track_title">$track_title</span><span class="track_length">$track_len</span>
|
|
</div>
|
|
</label>
|
|
</template>
|
|
</body>
|
|
</html>
|