Lightyear enhancements and font styling changes

Supersonic-Music · Dec 4, 2023 · 9239cb7 · 9239cb7
1 parent f4e7a14
commit 9239cb7
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 7 deletions.
diff --git a/main.py b/main.py
@@ -58,6 +58,12 @@ def artist_albums(artist):
     albums = sorted([item for item in os.listdir(artist_dir) if os.path.isdir(os.path.join(artist_dir, item))])
     return render_template('artist_albums.html', artist=artist, albums=albums)
 
+@app.route('/lightyear/')
+def lightyear():
+    PROGRAM_NAME = ProgramData.PROGRAM_NAME
+    print(lightyear_stats)
+    return render_template('lightyear.html', PROGRAM_NAME=PROGRAM_NAME, songs_listened_to=lightyear_stats[0][0]['songs_listened_to'], albums_listened_to=lightyear_stats[0][0]['albums_listened_to'], artists_listened_to=lightyear_stats[0][0]['artists_listened_to'], artists=lightyear_stats[1])
+
 # Create a route to list songs for a specific album
 @app.route('/<artist>/<album>/')
 def album_songs(artist, album):

diff --git a/static/css/style.css b/static/css/style.css
@@ -1,9 +1,18 @@
+@font-face {
+    font-family: "Raleway";
+    src: url("../fonts/Raleway-VariableFont_wght.ttf");
+}
+
 body {
-    font-family: sans-serif;
+    font-family: Raleway;
     background-color: #181a1b;
     color: white;
 }
 
+.num {
+    font-family: sans-serif;
+}
+
 h1 {
     color: transparent;
     background-image: linear-gradient(to right, white, white);

diff --git a/static/fonts/Raleway-VariableFont_wght.ttf b/static/fonts/Raleway-VariableFont_wght.ttf
diff --git a/templates/index.html b/templates/index.html
@@ -12,15 +12,17 @@ <h1>
     <h2>Stats</h2>
     <h3>Collection Stats</h3>
     <ul style="border-width: 0.2rem; border-radius: 10px; border-style: solid; display: inline-block; width: 30rem;">
-        <b><li><p>Number of Artists:<i> {{ number_of_artists }}</i></p></li></b>
-        <b><li><p>Number of Albums:<i> {{ number_of_albums }}</i></p></li></b>
-        <b><li><p>Number of Songs:<i> {{ number_of_songs }}</i></p></li></b>
+        <b><li><p>Number of Artists:<i class="num"> {{ number_of_artists }}</i></p></li></b>
+        <b><li><p>Number of Albums:<i class="num"> {{ number_of_albums }}</i></p></li></b>
+        <b><li><p>Number of Songs:<i class="num"> {{ number_of_songs }}</i></p></li></b>
     </ul>
     <h3>Lightyear Stats</h3>
     <ul class="gradient-border" style="border-width: 0.2rem; border-radius: 10px; border-style: solid; display: inline-block; width: 30rem;">
-        <b><li><p>Songs Listened to:~<i>{{ lightyear_songs_listened_to }}</i></p></li></b>
-        <b><li><p>Artists Listened to:~<i>{{ lightyear_artists_listened_to }}</i></p></li></b>
-        <b><li><p>Albums Listened to:~<i>{{ lightyear_albums_listened_to }}</i></p></li></b>
+        <b><li><p>Songs Listened to:~<i class="num">{{ lightyear_songs_listened_to }}</i></p></li></b>
+        <b><li><p>Artists Listened to:~<i class="num">{{ lightyear_artists_listened_to }}</i></p></li></b>
+        <b><li><p>Albums Listened to:~<i class="num">{{ lightyear_albums_listened_to }}</i></p></li></b>
+        <a class="backbutton" href="/lightyear/"><b>More Stats...</b></a>
+        <br>
     </ul>
     <h2>Artists</h2>
     <ul>

diff --git a/templates/lightyear.html b/templates/lightyear.html
@@ -0,0 +1,30 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
+    <title>{{ PROGRAM_NAME }}</title>
+</head>
+<body>
+    <center>
+        <a class="backbutton" href="/"><b>Back</b></a>
+        <br>
+        <h1>{{ PROGRAM_NAME }} - Lightyear</h1>
+        <p>Songs Listened To: <b class="num">{{ songs_listened_to }}</b></p>
+        <p>Artists Listened To: <b class="num">{{ artists_listened_to }}</b></p>
+        <p>Albums Listened To: <b class="num">{{ albums_listened_to }}</b></p>
+        <p>Artists: {{ lightyear_artists }}</p>
+    </center>
+</body>
+</html>
+<style>
+    p {
+        font-size: 4.5rem;
+    }
+    h1 {
+        font-size: 6rem;
+    }
+    .backbutton {
+        font-size: 3rem;
+    }
+</style>