more changes to home page

20 files changed, 241 insertions, 81 deletions

diff --git a/static/css/en/login-area.css b/static/css/en/login-area.css
index c339605f..1e18972e 100644
--- a/static/css/en/login-area.css
+++ b/static/css/en/login-area.css
@@ -1,10 +1,6 @@
 #login-area {
-  background-image: -webkit-image-set(url("../../images/core/sidebar/[email protected]") 1x,
-      url("../../images/core/sidebar/[email protected]") 2x,
-      url("../../images/core/sidebar/[email protected]") 3x);
-  background-image: image-set(url("../../images/core/sidebar/[email protected]") 1x,
-      url("../../images/core/sidebar/[email protected]") 2x,
-      url("../../images/core/sidebar/[email protected]") 3x);
+  background-image: url("../../images/core/sidebar/[email protected]");
+  background-image: url("../../images/core/sidebar/[email protected]");
 }
 
 #login-area>#register-now-button {
diff --git a/static/css/ja/login-area.css b/static/css/ja/login-area.css
index 4404eada..475b239b 100644
--- a/static/css/ja/login-area.css
+++ b/static/css/ja/login-area.css
@@ -1,10 +1,6 @@
 #login-area {
-  background-image: -webkit-image-set(url("../../images/core/sidebar/[email protected]") 1x,
-      url("../../images/core/sidebar/[email protected]") 2x,
-      url("../../images/core/sidebar/[email protected]") 3x);
-  background-image: image-set(url("../../images/core/sidebar/[email protected]") 1x,
-      url("../../images/core/sidebar/[email protected]") 2x,
-      url("../../images/core/sidebar/[email protected]") 3x);
+  background-image: url("../../images/core/sidebar/[email protected]");
+  background-image: url("../../images/core/sidebar/[email protected]");
 }
 
 #login-area>#register-now-button {
diff --git a/static/css/shared/core.css b/static/css/shared/core.css
index 884ddbbf..06e571f3 100644
--- a/static/css/shared/core.css
+++ b/static/css/shared/core.css
@@ -1,24 +1,46 @@
 /* Reset and Base Styles */
+@font-face {
+  font-family: 'TheHeart';
+  src: url('../../fonts/THEHEART.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Yomogi';
+  src: url('../../fonts/YOMOGI.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: "Mali", sans-serif;
-  font-size: 11px;
   outline: none;
   border: none;
-}
-
-/* Root Variables */
-:root {
-  --resolution-multiplier: 1;
+  color: #fff;
 }
 
 /* HTML and Body Base */
 html {
   background-color: #000;
   color: #fff;
-  min-width: 1024px;
+  min-width: 1200px;
+}
+
+html[lang='en'],
+html[lang='en'] input,
+.en {
+  font-family: 'TheHeart', sans-serif;
+  font-size: 14px;
+}
+
+html[lang='ja'],
+html[lang='ja'] input,
+.ja {
+  font-family: 'Yomogi', sans-serif;
+  font-size: 12px;
 }
 
 body {
@@ -33,10 +55,23 @@ hr {
   background: #fff;
 }
 
-a:visited {
+a {
+  color: #fff;
+  text-decoration: none;
+}
+
+a:link,
+a:visited,
+a:hover,
+a:active {
   color: #fff;
 }
 
+a:hover {
+  text-decoration: underline;
+}
+
+/* Image Styles */
 img {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
@@ -46,6 +81,16 @@ img {
   image-rendering: crisp-edges;
 }
 
+#video-background {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  z-index: -100;
+  object-fit: cover;
+}
+
 /* Video Overlay */
 #video-overlay {
   position: fixed;
@@ -54,7 +99,7 @@ img {
   width: 100%;
   height: 100%;
   background-color: #000;
-  opacity: 0.35;
+  opacity: 0.5;
   z-index: -99;
 }
 
@@ -62,7 +107,7 @@ img {
 #body-wrapper {
   position: relative;
   z-index: 1;
-  width: 1000px;
+  width: 1200px;
   margin: 0 auto;
 }
 
@@ -70,6 +115,44 @@ img {
   display: flex;
 }
 
+/* SCANLINES */
+#scanlines {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 300;
+  opacity: 0.18;
+}
+
+#scanlines:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .4) 50%);
+  background-size: 100% 4px;
+  will-change: background, background-size;
+  animation: scanlines 0.2s linear infinite;
+}
+
+@keyframes scanlines {
+  from {
+    background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .4) 50%);
+    background-size: 100% 4px;
+  }
+
+  to {
+    background: linear-gradient(to bottom, rgba(0, 0, 0, .4) 50%, transparent 50%);
+    background-size: 100% 4px;
+  }
+}
+
 /* Sidebar and Main Content */
 #left-sidebar {
   width: 200px;
@@ -77,8 +160,13 @@ img {
   border-top-left-radius: 14px;
 }
 
+.left-sidebar {
+  position: relative;
+  top: -65px;
+}
+
 #main-content {
-  width: 580px;
+  width: 780px;
   padding: 0 20px;
   border-top: 1px solid #fff;
 }
diff --git a/static/css/shared/left-sidebar.css b/static/css/shared/left-sidebar.css
new file mode 100644
index 00000000..a962b239
--- /dev/null
+++ b/static/css/shared/left-sidebar.css
@@ -0,0 +1,50 @@
+@font-face {
+    font-family: 'SweetFairy';
+    src: url('../../fonts/SWEETFAIRY.otf') format('opentype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+/* Navigation Links */
+.navigation-links {
+    margin: 24px 0px;
+}
+
+.navigation-title {
+    font-family: 'SweetFairy', sans-serif;
+    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px #623795) drop-shadow(0px 1px 1px #623795);
+    color: #623795;
+}
+
+.navigation-title-container {
+    background-color: #311B4F;
+    padding: 10px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+}
+
+html[lang='en'] .navigation-title {
+    font-size: 18px;
+}
+
+html[lang='ja'] .navigation-title {
+    font-size: 14px;
+}
+
+.navigation-item {
+    display: flex;
+    align-items: center;
+    margin: 4px 0px;
+}
+
+.navigation-items-container {
+    background-color: #f4f1e90f;
+    padding: 10px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+.navigation-item img {
+    width: 20px;
+    margin-right: 8px;
+}
\ No newline at end of file
diff --git a/static/css/shared/login-area.css b/static/css/shared/login-area.css
index 680e95c3..f0b90d47 100644
--- a/static/css/shared/login-area.css
+++ b/static/css/shared/login-area.css
@@ -3,7 +3,6 @@
   width: 200px;
   height: 280px;
   position: relative;
-  top: -65px;
   margin: auto;
   background-repeat: no-repeat;
   background-size: 200px 280px;
@@ -24,7 +23,7 @@
   width: 144px;
   margin: 10px auto;
   padding: 4px 8px;
-  font-size: 11px;
+  font-size: 16px;
   font-weight: bold;
   color: #4a2e6f;
   background: transparent;
diff --git a/static/fonts/SWEETFAIRY.otf b/static/fonts/SWEETFAIRY.otf
new file mode 100644
index 00000000..15c24f45
--- /dev/null
+++ b/static/fonts/SWEETFAIRY.otf
diff --git a/static/fonts/THEHEART.ttf b/static/fonts/THEHEART.ttf
new file mode 100644
index 00000000..a3612b9b
--- /dev/null
+++ b/static/fonts/THEHEART.ttf
diff --git a/static/fonts/YOMOGI.ttf b/static/fonts/YOMOGI.ttf
new file mode 100644
index 00000000..3c5091ad
--- /dev/null
+++ b/static/fonts/YOMOGI.ttf
diff --git a/static/images/core/icons/changelanguage.png b/static/images/core/icons/changelanguage.png
new file mode 100644
index 00000000..d2f4df83
--- /dev/null
+++ b/static/images/core/icons/changelanguage.png
diff --git a/static/images/core/icons/home.png b/static/images/core/icons/home.png
new file mode 100644
index 00000000..0bfbd03c
--- /dev/null
+++ b/static/images/core/icons/home.png
diff --git a/static/images/core/icons/journalofrandomthoughts.png b/static/images/core/icons/journalofrandomthoughts.png
new file mode 100644
index 00000000..845863a2
--- /dev/null
+++ b/static/images/core/icons/journalofrandomthoughts.png
diff --git a/static/images/core/icons/shrines.png b/static/images/core/icons/shrines.png
new file mode 100644
index 00000000..f0000eba
--- /dev/null
+++ b/static/images/core/icons/shrines.png
diff --git a/static/images/core/icons/socialify.png b/static/images/core/icons/socialify.png
new file mode 100644
index 00000000..8c8e7945
--- /dev/null
+++ b/static/images/core/icons/socialify.png
diff --git a/static/images/site/icons/pencil.gif b/static/images/core/icons/weblog.gif
index 53bb81db..53bb81db 100644
--- a/static/images/site/icons/pencil.gif
+++ b/static/images/core/icons/weblog.gif
diff --git a/static/js/youdontdare.js b/static/js/shared/headerEasterEggs.js
index c2a27ac1..c2a27ac1 100644
--- a/static/js/youdontdare.js
+++ b/static/js/shared/headerEasterEggs.js
diff --git a/static/js/musicPlayer.js b/static/js/shared/kawaiiBeatsPlayer.js
index bf1586b9..f7a20746 100644
--- a/static/js/musicPlayer.js
+++ b/static/js/shared/kawaiiBeatsPlayer.js
@@ -29,7 +29,7 @@ const SEEKBAR_CONFIG = {
 };
 
 const STORE_LIMIT = artworkCollection.length;
-const MIN_SCREEN_WIDTH = 1600;
+const MIN_SCREEN_WIDTH = 2800;
 
 // Audio Context and Core Variables
 let audioContext;
@@ -537,4 +537,3 @@ async function init() {
 }
 
 init();
-
diff --git a/templates/shared/base.html b/templates/shared/base.html
index 32e495c1..0957de5a 100644
--- a/templates/shared/base.html
+++ b/templates/shared/base.html
@@ -20,10 +20,6 @@
     <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}" />
     <link rel="manifest" href="{% static 'images/favicons/site.webmanifest' %}" />
     <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 />
-    <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" />
-    <script src="{% static 'js/shared/resolutionScaling.js' %}"></script>
     {% block head %}
 
     {% endblock %}
@@ -33,6 +29,7 @@
       <source src="{% static 'videos/background_.mp4' %}" type="video/mp4" />
     </video>
     <div id="video-overlay"></div>
+    <div id="scanlines"></div>
     <div id="body-wrapper">
       {% include 'shared/header.html' %}
       <div id="content-wrapper">
diff --git a/templates/shared/header.html b/templates/shared/header.html
index f30b7790..13e2ab6d 100644
--- a/templates/shared/header.html
+++ b/templates/shared/header.html
@@ -1,41 +1,27 @@
 {% load static %}
 <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:'.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 %}
+      <img draggable="false" src="{% static 'images/core/shared/[email protected]' %}" alt="Shifoo Title Banner" class="title-banner" width="1200" height="400" loading="lazy" />
   {% else %}
-    {% with banner_image='images/core/shared/title_banner' %}
-      <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 %}
+      <img draggable="false" src="{% static 'images/core/shared/[email protected]' %}" alt="Shifoo Title Banner" class="title-banner" width="1200" height="400" loading="lazy" />
   {% endif %}
   
-  <img draggable="false" src="{% static 'images/core/shared/neko_sitting.png' %}" srcset="
-    {% static 'images/core/shared/neko_sitting.png' %} 1x,
-    {% static 'images/core/shared/[email protected]' %} 2x" 
+  <img draggable="false" src="{% static 'images/core/shared/[email protected]' %}" 
     alt="Picture of Neko Boy Sitting on the Divider Line" 
     style="position: absolute; bottom: -41px; right: {% if request.LANGUAGE_CODE == 'ja' %}-16px{% else %}0{% endif %}; width: 188px; height: 333px; z-index: 1;" />
   
-  <button onclick="dontYouDare(event)" style="width: {% if request.LANGUAGE_CODE == 'ja' %}56px{% else %}50px{% endif %};height: 12px;position: absolute;bottom: {% if request.LANGUAGE_CODE == 'ja' %}47px{% else %}46px{% endif %};right: {% if request.LANGUAGE_CODE == 'ja' %}360px{% else %}366px{% endif %};background-color: transparent;outline:none;border: 0;cursor: pointer;z-index: 2;"></button>
-  <button onclick="leaveWebsite()" style="width: 37px;height: 12px;position: absolute;bottom: {% if request.LANGUAGE_CODE == 'ja' %}47px{% else %}46px{% endif %};right: {% if request.LANGUAGE_CODE == 'ja' %}145px{% else %}238px{% endif %};background-color: transparent;outline:none;border: 0;cursor: pointer;z-index: 2;"></button>
-  <button onclick="leaveWebsite()" style="width: 7px;height: 6px;position: absolute;bottom: {% if request.LANGUAGE_CODE == 'ja' %}107px{% else %}106px{% endif %};right: {% if request.LANGUAGE_CODE == 'ja' %}141px{% else %}233px{% endif %};background-color: transparent;outline:none;border: 0;cursor: pointer;z-index: 2;"></button>
+  <button onclick="dontYouDare(event)" style="width: {% if request.LANGUAGE_CODE == 'ja' %}67px{% else %}60px{% endif %};height: 16px;position: absolute;bottom: {% if request.LANGUAGE_CODE == 'ja' %}51px{% else %}50px{% endif %};right: {% if request.LANGUAGE_CODE == 'ja' %}432px{% else %}439px{% endif %};background-color: transparent;outline:none;border: 0;cursor: pointer;z-index: 2;"></button>
+  <button onclick="leaveWebsite()" style="width: 46px;height: 16px;position: absolute;bottom: {% if request.LANGUAGE_CODE == 'ja' %}51px{% else %}50px{% endif %};right: {% if request.LANGUAGE_CODE == 'ja' %}174px{% else %}285px{% endif %};background-color: transparent;outline:none;border: 0;cursor: pointer;z-index: 2;"></button>
+  <button onclick="leaveWebsite()" style="width: 9px;height: 10px;position: absolute;bottom: {% if request.LANGUAGE_CODE == 'ja' %}121px{% else %}122px{% endif %};right: {% if request.LANGUAGE_CODE == 'ja' %}169px{% else %}280px{% endif %};background-color: transparent;outline:none;border: 0;cursor: pointer;z-index: 2;"></button>
   
-  <div style="position: absolute;bottom: 60px;left: 584px;font-size: 7px;text-transform: uppercase;color: #560054;font-weight: bold; display: none;">
-    {% if request.LANGUAGE_CODE == 'ja' %}ぶらぶらした回数{% else %}Times Fucked Around{% endif %}: <span id="timesFA" style="font-size: 7px;"></span>
+  <div style="position: absolute;bottom: 68px;left: 704px;font-size: 11px;text-transform: uppercase;color: #560054;font-weight: bold; display: none;">
+    {% if request.LANGUAGE_CODE == 'ja' %}ぶらぶらした回数{% else %}Times Fucked Around{% endif %}: <span id="timesFA" style="font-size: 11px;"></span>
   </div>
   
   <audio src="{% static 'audio/present-day-heh.mp3' %}" id="presentDayAudio" preload="auto"></audio>
-  <button onclick="stopAndPlayPresentDay(event)" style="width: 113px;height: 93px;position: absolute;top: 134px;left: 664px;background-color: transparent;outline:none;border: 0;z-index: 2;"></button>
+  <button onclick="stopAndPlayPresentDay(event)" style="width: 126px;height: 93px;position: absolute;top: 164px;left: 800px;background-color: transparent;outline:none;border: 0;z-index: 2;cursor: pointer;"></button>
 </div>
 
 {% block scripts %}
-  <script src="{% static 'js/youdontdare.js' %}"></script>
+  <script src="{% static 'js/shared/headerEasterEggs.js' %}"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/shared/left_sidebar.html b/templates/shared/left_sidebar.html
index ad049e1b..c0b378cf 100644
--- a/templates/shared/left_sidebar.html
+++ b/templates/shared/left_sidebar.html
@@ -1,30 +1,79 @@
 {% load static %}
-{% if not user.is_authenticated %}
-  <link rel="stylesheet" href="{% static 'css/shared/login-area.css' %}" />
-  {% if request.LANGUAGE_CODE == 'ja' %}
-    <link rel="stylesheet" href="{% static 'css/ja/login-area.css' %}" />
-  {% else %}
-    <link rel="stylesheet" href="{% static 'css/en/login-area.css' %}" />
+<div class="left-sidebar">
+  {% if not user.is_authenticated %}
+    <link rel="stylesheet" href="{% static 'css/shared/login-area.css' %}" />
+    {% if request.LANGUAGE_CODE == 'ja' %}
+      <link rel="stylesheet" href="{% static 'css/ja/login-area.css' %}" />
+    {% else %}
+      <link rel="stylesheet" href="{% static 'css/en/login-area.css' %}" />
+    {% endif %}
+    <div id="login-area">
+      <form method="post" action="#" id="login-form">
+        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" />
+        <input type="text" id="username" name="username" placeholder="{% if request.LANGUAGE_CODE == 'ja' %}ユーザー名{% else %}Username{% endif %}" autocomplete="off" value="{{ request.GET.username }}" />
+        <input type="password" id="password" name="password" placeholder="{% if request.LANGUAGE_CODE == 'ja' %}パスワード{% else %}Password{% endif %}" autocomplete="off" />
+        <input type="hidden" name="next" value="{{ request.path }}" />
+        <input type="submit" value="" />
+      </form>
+      <a href="#" id="register-now-button"></a>
+      <a href="#" id="forgot-password-button"></a>
+    </div>
   {% endif %}
-  <div id="login-area">
-    <form method="post" action="#" id="login-form">
-      <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" />
-      <input type="text" id="username" name="username" placeholder="{% if request.LANGUAGE_CODE == 'ja' %}ユーザー名{% else %}Username{% endif %}" autocomplete="off" value="{{ request.GET.username }}" />
-      <input type="password" id="password" name="password" placeholder="{% if request.LANGUAGE_CODE == 'ja' %}パスワード{% else %}Password{% endif %}" autocomplete="off" />
-      <input type="hidden" name="next" value="{{ request.path }}" />
-      <input type="submit" value="" />
-    </form>
-    <a href="#" id="register-now-button"></a>
-    <a href="#" id="forgot-password-button"></a>
+
+  <link rel="stylesheet" href="{% static 'css/shared/left-sidebar.css' %}" />
+
+  <!-- Navigation -->
+  <div class="navigation-links">
+    <div class="navigation-title-container">
+      <h1 class="navigation-title">{% if request.LANGUAGE_CODE == 'ja' %}ナビゲーション{% else %}Navigation{% endif %}</h1>
+    </div>
+    <div class="navigation-items-container">
+      <div class="navigation-item">
+        <img src={% static 'images/core/icons/home.png' %} alt="Home Icon" />
+        <a href="#home">{% if request.LANGUAGE_CODE == 'ja' %}ホーム{% else %}Home{% endif %}</a>
+      </div>
+      <div class="navigation-item">
+        <img src="{% static 'images/core/icons/journalofrandomthoughts.png' %}" alt="Journal of Random Thoughts Icon" />
+        <a href="#journalofrandomthoughts">{% if request.LANGUAGE_CODE == 'ja' %}ランダム思考のジャーナル{% else %}Journal of Random Thoughts{% endif %}</a>
+      </div>
+      <div class="navigation-item">
+        <img src="{% static 'images/core/icons/weblog.gif' %}" alt="Weblog Icon" />
+        <a href="#weblog">{% if request.LANGUAGE_CODE == 'ja' %}ウェブログ{% else %}Weblog{% endif %}</a>
+      </div>
+      <div class="navigation-item">
+        <img src="{% static 'images/core/icons/shrines.png' %}" alt="Shrines Icon" />
+        <a href="#shrines">{% if request.LANGUAGE_CODE == 'ja' %}神社{% else %}Shrines{% endif %}</a>
+      </div>
+      <div class="navigation-item {% if request.LANGUAGE_CODE == 'ja' %}en{% else %}ja{% endif %}">
+        <img src="{% static 'images/core/icons/changelanguage.png' %}" alt="Change Language Icon" />
+        <a href="#" onclick="changeLanguage({% if request.LANGUAGE_CODE == 'ja' %}'en'{% else %}'ja'{% endif %})">
+          {% if request.LANGUAGE_CODE == 'ja' %}English (英語){% else %}日本語 (Japanese){% endif %}
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="navigation-links">
+    <div class="navigation-title-container">
+      <h1 class="navigation-title">{% if request.LANGUAGE_CODE == 'ja' %}シリアルエクスペリメンツ：シフー{% else %}Serial Experiments: Shifoo{% endif %}</h1>
+    </div>
+    <div class="navigation-items-container">
+      <div class="navigation-item">
+        <img src="{% static 'images/core/icons/socialify.png' %}" alt="Socialify Icon" />
+        <a href="#socialify">{% if request.LANGUAGE_CODE == 'ja' %}ソーシャリファイ{% else %}Socialify{% endif %}</a>
+      </div>  
+    </div> 
   </div>
-{% endif %}
-
-<div style="display: flex;">
-  <img src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExbjZscHIzaDFmbDNwc2xkaWwxMmNrNGJ5eDd4aGowbTZkb2F3dXF4MCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/AqcfW6opza0r1eznPc/giphy.webp"
-    alt="language change animation" width="24px" height="24px" style="margin-right: 10px;" />
-  <a href="" onclick="changeLanguage({% if request.LANGUAGE_CODE == 'ja' %}'en'{% else %}'ja'{% endif %})">
-    {% if request.LANGUAGE_CODE == 'ja' %}English{% else %}日本語{% endif %}
-  </a>
+
+
+
+  {% comment %} <div style="display: flex;">
+    <img src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExbjZscHIzaDFmbDNwc2xkaWwxMmNrNGJ5eDd4aGowbTZkb2F3dXF4MCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/AqcfW6opza0r1eznPc/giphy.webp"
+      alt="language change animation" width="24px" height="24px" style="margin-right: 10px;" />
+    <a href="" onclick="changeLanguage({% if request.LANGUAGE_CODE == 'ja' %}'en'{% else %}'ja'{% endif %})">
+      {% if request.LANGUAGE_CODE == 'ja' %}English{% else %}日本語{% endif %}
+    </a>
+  </div> {% endcomment %}
 </div>
 
 <script>
diff --git a/templates/shared/right_sidebar.html b/templates/shared/right_sidebar.html
index 653e9f66..ce096a89 100644
--- a/templates/shared/right_sidebar.html
+++ b/templates/shared/right_sidebar.html
@@ -21,5 +21,5 @@
 </div>
 
 {% block scripts %}
-<script src="{% static 'js/musicPlayer.js' %}"></script>
+<script src="{% static 'js/shared/kawaiiBeatsPlayer.js' %}"></script>
 {% endblock scripts %}
\ No newline at end of file