50 lines
1.7 KiB
HTML
50 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Scorch</title>
|
|
<link rel="stylesheet" type="text/css" href="/static/scorch.css">
|
|
<script>const ws_uri = "{{ url('ws') }}";</script>
|
|
<script type="text/javascript" src="/static/scorch.js"></script>
|
|
<script>window.onload = load;</script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.8">
|
|
<meta name="description" content="A music streaming platform.">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div id="header">
|
|
<object id="logo" aria-label="Scorch logo" data="/static/scorch.svg"></object>
|
|
<h1>Scorch</h1>
|
|
</div>
|
|
<div id="artistListContainer" class="list">
|
|
<select id="artistList" aria-label="Artist list" size="2" class="list" onchange="select_artist(this)">
|
|
{% for artist in artists %}
|
|
<option value="{{ artist }}">{{ artist }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div id="albumListContainer" class="list">
|
|
<select id="albumList" aria-label="Artist list" size="2" class="list" onchange="select_album(this)">
|
|
</select>
|
|
</div>
|
|
<div id="trackListContainer" class="list">
|
|
<select id="trackList" aria-label="Artist list" size="2" class="list" onchange="select_track(this)">
|
|
</select>
|
|
</div>
|
|
<div id="playerContainer">
|
|
<span id="albumCover"><img alt="Album cover art" src=""></span>
|
|
<span id="playerControls">
|
|
<h4><span id="nowPlayingArtist"></span> - <span id="nowPlayingAlbum"></span></h4>
|
|
<h3 id="nowPlayingTitle"></h3>
|
|
<audio id="player" controls>
|
|
<source id="stream" src="" type="audio/ogg">
|
|
</audio>
|
|
<div>
|
|
<input type="checkbox" name="shuffle" id="shuffle" checked="true">
|
|
<label for="shuffle">Shuffle</label>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|