second commit
This commit is contained in:
parent
9bfe8e0996
commit
4b7d917a21
83
static/pyrite.css
Normal file
83
static/pyrite.css
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-template-rows: auto 1fr auto auto;
|
||||||
|
grid-template-areas:
|
||||||
|
"h h h"
|
||||||
|
"a b c"
|
||||||
|
"f f f";
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
grid-area: h;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"]:checked+div {
|
||||||
|
background: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
#artist_list {
|
||||||
|
grid-area: a;
|
||||||
|
}
|
||||||
|
|
||||||
|
#album_list {
|
||||||
|
grid-area: b;
|
||||||
|
}
|
||||||
|
|
||||||
|
#track_list {
|
||||||
|
grid-area: c;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player_container {
|
||||||
|
grid-area: f;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cover_art {
|
||||||
|
padding-right: 1em;
|
||||||
|
padding-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
max-height: 30vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_item {
|
||||||
|
height: 2em;
|
||||||
|
margin: 0.25em;
|
||||||
|
padding: 0.25em;
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_item:hover {
|
||||||
|
background: lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album_year, .track_length {
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
@ -6,8 +6,8 @@
|
||||||
"background_color": "#ffffff",
|
"background_color": "#ffffff",
|
||||||
"theme_color": "#000000",
|
"theme_color": "#000000",
|
||||||
"description": "A music streaming application.",
|
"description": "A music streaming application.",
|
||||||
"icons": [
|
"icons": [{
|
||||||
"src": "/favicon.ico",
|
"src": "/favicon.ico",
|
||||||
"sizes": "16x16"
|
"sizes": "16x16"
|
||||||
]
|
}]
|
||||||
}
|
}
|
||||||
|
|
@ -2,14 +2,72 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Pyrite</title>
|
<title>Pyrite</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./static/pyrite.css">
|
||||||
<script type="text/javascript" src="./static/pyrite.js"></script>
|
<script type="text/javascript" src="./static/pyrite.js"></script>
|
||||||
<script>window.onload = init;</script>
|
<script>window.onload = init;</script>
|
||||||
|
<link rel="manifest" href="./static/pyrite.webmanifest">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<main>
|
||||||
<audio id="player" controls></audio>
|
<header>
|
||||||
<button id="play-btn" onclick="playTrack()">Play</button>
|
<h1>Pyrite</h1>
|
||||||
<button id="pause-btn" onclick="pauseTrack()">Pause</button>
|
</header>
|
||||||
</div>
|
<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">
|
||||||
|
<span id="playlist_container">
|
||||||
|
<select id="playlist" onchange="select_playlist(event)">
|
||||||
|
{% for playlist in playlists %}
|
||||||
|
<option value="{{ playlist }}"{% if playlist == request.cookies.get('playlist') %} selected{% endif %}>{{ playlist }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
<span id="cover_art"><img alt="Album cover art" src=""></span>
|
||||||
|
<span id="player_controls">
|
||||||
|
<h4><span id="now_playing_artist"></span> - <span id="now_playing_album"></span></h4>
|
||||||
|
<h3 id="now_playing_title"></h3>
|
||||||
|
<audio id="player" controls></audio>
|
||||||
|
<button id="play-btn" onclick="playTrack()">Play</button>
|
||||||
|
<button id="pause-btn" onclick="pauseTrack()">Pause</button>
|
||||||
|
</span>
|
||||||
|
</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="$cover_art_url"><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>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user