stuff still all over the place; added a music player and a resolution based scaler — now in a brainfucked stated - going to sleep

3 files changed, 29 insertions, 24 deletions

diff --git a/templates/shared/base.html b/templates/shared/base.html
index 8d04b64b..32e495c1 100644
--- a/templates/shared/base.html
+++ b/templates/shared/base.html
@@ -22,24 +22,8 @@
     <link type="text/css" rel="stylesheet" href="{% static 'css/shared/core.css' %}" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    {% if request.LANGUAGE_CODE == 'ja' %}
-    <link href="https://fonts.googleapis.com/css2?family=Yuji+Boku&display=swap" rel="stylesheet">
-    <style>
-      * {
-        font-family: "Yuji Boku", sans-serif;
-        font-size: 11px;
-        letter-spacing: 0cap;
-      }
-    </style>
-    {% else %}
     <link href="https://fonts.googleapis.com/css2?family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
-    <style>
-      * {
-        font-family: "Mali", sans-serif;
-        font-size: 11px;
-      }
-    </style>
-    {% endif %}
+    <script src="{% static 'js/shared/resolutionScaling.js' %}"></script>
     {% block head %}
 
     {% endblock %}
diff --git a/templates/shared/header.html b/templates/shared/header.html
index 361a7a70..f30b7790 100644
--- a/templates/shared/header.html
+++ b/templates/shared/header.html
@@ -2,16 +2,16 @@
 <div style="position: relative; padding: 20px 0;">
   {% if request.LANGUAGE_CODE == 'ja' %}
     {% with banner_image='images/core/shared/title_banner_ja' %}
-      <img draggable="false" src="{% static banner_image|add:'@2x.png' %}" srcset="
-        {% static banner_image|add:'@2x.png' %} 1x,
+      <img draggable="false" src="{% static banner_image|add:'.png' %}" srcset="
+        {% static banner_image|add:'.png' %} 1x,
         {% static banner_image|add:'@2x.png' %} 2x,
         {% static banner_image|add:'@3x.png' %} 3x"
         alt="Shifoo Title Banner" class="title-banner" width="1000" height="333" loading="lazy" />
     {% endwith %}
   {% else %}
     {% with banner_image='images/core/shared/title_banner' %}
-      <img draggable="false" src="{% static banner_image|add:'@2x.png' %}" srcset="
-        {% static banner_image|add:'@2x.png' %} 1x,
+      <img draggable="false" src="{% static banner_image|add:'.png' %}" srcset="
+        {% static banner_image|add:'.png' %} 1x,
         {% static banner_image|add:'@2x.png' %} 2x,
         {% static banner_image|add:'@3x.png' %} 3x"
         alt="Shifoo Title Banner" class="title-banner" width="1000" height="333" loading="lazy" />
diff --git a/templates/shared/right_sidebar.html b/templates/shared/right_sidebar.html
index fb2ede6d..653e9f66 100644
--- a/templates/shared/right_sidebar.html
+++ b/templates/shared/right_sidebar.html
@@ -1,4 +1,25 @@
-<div style="margin: 18px 0 12px 0;">
-  <div class="glitch" data-text="KAWAII BEATS">KAWAII BEATS</div>
-  <div class="glow">KAWAII BEATS</div>
+{% load static %}
+
+{% block head %}
+<link rel="stylesheet" href="{% static 'css/shared/kawaiibeats.css' %}">
+{% endblock head %}
+
+<div class="kawaiibeats">
+    <p id="song-title">Loading...</p>
+    <p id="song-artist-album">Loading...</p>
+    <img onerror="this.src=getRandomArtwork()" id="song-cover" alt="Song Cover">
+    <canvas id="song-visualizer" width="140" height="30"></canvas>
+    <div id="song-time">
+      <span id="song-time-elapsed">0:00</span>
+      <span id="song-time-total">0:00</span>
+    </div>
+    <div id="song-controls">
+        <button id="song-prev">&lt;</button>
+        <button id="song-play">&#9658;</button>
+        <button id="song-next">&gt;</button>
+    </div>
 </div>
+
+{% block scripts %}
+<script src="{% static 'js/musicPlayer.js' %}"></script>
+{% endblock scripts %}
\ No newline at end of file