Musik/templates/index.html

49 lines
1.4 KiB
HTML
Raw Normal View History

2018-09-12 13:04:00 -04:00
<!DOCTYPE html>
<html>
<head>
<title>Musik</title>
<link rel="stylesheet" type="text/css" href="/static/musik.css">
<script type="text/javascript" src="/static/musik.js"></script>
2019-02-05 11:23:41 -05:00
<script>
const api_uri = "{{ url_for('select') }}";
2019-02-05 11:23:41 -05:00
</script>
2018-09-14 08:02:24 -04:00
<script>window.onload = load;</script>
2018-09-12 13:04:00 -04:00
</head>
<body>
<div id="globalContainer">
<div id="titleContainer"><h1>Musik</h1></div>
2018-09-12 17:52:38 -04:00
<div id="navigationContainer">
2019-02-05 11:23:41 -05:00
<div id="artistListContainer" class="list">
<select id="artistList" size="2" class="list" onchange="select_artist(this)">
2019-02-04 10:06:58 -05:00
{% for artist in artists %}
2019-02-05 11:23:41 -05:00
<option value="{{ artist }}">{{ artist }}</option>
2019-02-04 10:06:58 -05:00
{% endfor %}
</select>
</div>
2019-02-05 11:23:41 -05:00
<div id="albumListContainer" class="list">
<select id="albumList" size="2" class="list" onchange="select_album(this)">
2019-02-04 10:06:58 -05:00
</select>
</div>
2019-02-05 11:23:41 -05:00
<div id="trackListContainer" class="list">
<select id="trackList" size="2" class="list" onchange="select_track(this)">
2019-02-04 10:06:58 -05:00
</select>
</div>
2018-09-12 17:52:38 -04:00
</div>
<div id="playerContainer">
2019-09-11 13:06:14 -04:00
<span id="albumCover"><img src=""></span>
2019-01-11 11:27:25 -05:00
<span id="playerControls">
2019-02-07 09:23:26 -05:00
<h4><span id="nowPlayingArtist"></span> - <span id="nowPlayingAlbum"></span></h4>
<h3 id="nowPlayingTitle"></h3>
2018-09-12 17:52:38 -04:00
<audio id="player" controls>
<source id="stream" src="" type="audio/ogg">
2018-09-12 17:52:38 -04:00
</audio>
<div>
<input type="checkbox" name="shuffle" id="shuffle" checked="true">
<label for="shuffle">Shuffle</label>
</div>
2019-01-11 11:27:25 -05:00
</span>
2018-09-12 17:52:38 -04:00
</div>
2018-09-12 13:04:00 -04:00
</div>
</body>
</html>