diff --git a/static/pyrite.css b/static/pyrite.css new file mode 100644 index 0000000..fd6bc6f --- /dev/null +++ b/static/pyrite.css @@ -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%; +} diff --git a/static/pyrite-manifest.json b/static/pyrite.webmanifest similarity index 93% rename from static/pyrite-manifest.json rename to static/pyrite.webmanifest index 9c4bf9a..76dd7f6 100644 --- a/static/pyrite-manifest.json +++ b/static/pyrite.webmanifest @@ -6,8 +6,8 @@ "background_color": "#ffffff", "theme_color": "#000000", "description": "A music streaming application.", - "icons": [ + "icons": [{ "src": "/favicon.ico", "sizes": "16x16" - ] + }] } diff --git a/templates/index.html b/templates/index.html index 7f35c46..670c5ce 100644 --- a/templates/index.html +++ b/templates/index.html @@ -2,14 +2,72 @@ Pyrite + + -
- - - -
+
+
+

Pyrite

+
+
+ {% for artist in artists %} + + {% endfor %} +
+
+
+
+
+
+ + + + Album cover art + +

-

+

+ + + + +
+
+ + + +