iou1name/Pyrite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

second commit

Browse Source
This commit is contained in:
iou1name 2024-10-30 12:53:42 -04:00
parent 9bfe8e0996
commit 4b7d917a21
3 changed files with 148 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
static/pyrite.css Normal file
View 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%;
}

4
static/pyrite-manifest.json → static/pyrite.webmanifest
View File

@ -6,8 +6,8 @@
"background_color": "#ffffff",
"theme_color": "#000000",
"description": "A music streaming application.",
"icons": [
"icons": [{
"src": "/favicon.ico",
"sizes": "16x16"
]
}]
}

60
templates/index.html
View File

@ -2,14 +2,72 @@
<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>
<link rel="manifest" href="./static/pyrite.webmanifest">
</head>
<body>
<div>
<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">
<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>
</html>