some japanese translation

15 files changed, 254 insertions, 72 deletions

diff --git a/static/css/en/login-area.css b/static/css/en/login-area.css
new file mode 100644
index 00000000..29024e12
--- /dev/null
+++ b/static/css/en/login-area.css
@@ -0,0 +1,31 @@
+#login-area {
+  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
+  );
+}
+
+#login-area > #register-now-button {
+  display: block;
+  width: 50px;
+  height: 12px;
+  cursor: pointer;
+  border-radius: 2px;
+  position: absolute;
+  bottom: 23px;
+  right: 32px;
+  background: transparent;
+}
+
+#login-area > #forgot-password-button {
+  display: block;
+  width: 64px;
+  height: 12px;
+  cursor: pointer;
+  border-radius: 2px;
+  position: absolute;
+  bottom: 85px;
+  right: 21px;
+  background: transparent;
+}
diff --git a/static/css/ja/login-area.css b/static/css/ja/login-area.css
new file mode 100644
index 00000000..c05a350b
--- /dev/null
+++ b/static/css/ja/login-area.css
@@ -0,0 +1,31 @@
+#login-area {
+  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
+  );
+}
+
+#login-area > #register-now-button {
+  display: block;
+  width: 76px;
+  height: 12px;
+  cursor: pointer;
+  border-radius: 2px;
+  position: absolute;
+  bottom: 23px;
+  right: 27px;
+  background: transparent;
+}
+
+#login-area > #forgot-password-button {
+  display: block;
+  width: 75px;
+  height: 12px;
+  cursor: pointer;
+  border-radius: 2px;
+  position: absolute;
+  bottom: 85px;
+  right: 14px;
+  background: transparent;
+}
diff --git a/static/css/core.css b/static/css/shared/core.css
index d13338d4..06fcb57c 100644
--- a/static/css/core.css
+++ b/static/css/shared/core.css
@@ -3,8 +3,6 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: "Mali", sans-serif;
-  font-size: 11px;
 }
 
 *,
@@ -25,6 +23,10 @@ html {
   color: #fff;
 }
 
+a:visited {
+  color: #fff;
+}
+
 #video-background {
   position: fixed;
   top: 0;
@@ -77,11 +79,13 @@ html {
 .flip-container {
   perspective: 1000px;
 }
+
 .flipper {
   position: relative;
   transform-style: preserve-3d;
   transition: transform 0.6s;
 }
+
 .front,
 .back {
   position: absolute;
@@ -92,6 +96,7 @@ html {
   align-items: center;
   justify-content: start;
 }
+
 .back {
   transform: rotateX(180deg);
 }
@@ -134,193 +139,255 @@ html {
   1% {
     transform: rotateX(10deg) skewX(90deg);
   }
+
   2% {
     transform: rotateX(0deg) skewX(0deg);
   }
 }
+
 @keyframes noise-1 {
   3.3333333333% {
     clip-path: inset(9px 0 46px 0);
   }
+
   6.6666666667% {
     clip-path: inset(54px 0 5px 0);
   }
+
   10% {
     clip-path: inset(13px 0 46px 0);
   }
+
   13.3333333333% {
     clip-path: inset(54px 0 31px 0);
   }
+
   16.6666666667% {
     clip-path: inset(80px 0 1px 0);
   }
+
   20% {
     clip-path: inset(61px 0 29px 0);
   }
+
   23.3333333333% {
     clip-path: inset(39px 0 32px 0);
   }
+
   26.6666666667% {
     clip-path: inset(25px 0 43px 0);
   }
+
   30% {
     clip-path: inset(68px 0 5px 0);
   }
+
   33.3333333333% {
     clip-path: inset(4px 0 42px 0);
   }
+
   36.6666666667% {
     clip-path: inset(90px 0 4px 0);
   }
+
   40% {
     clip-path: inset(75px 0 25px 0);
   }
+
   43.3333333333% {
     clip-path: inset(56px 0 17px 0);
   }
+
   46.6666666667% {
     clip-path: inset(24px 0 26px 0);
   }
+
   50% {
     clip-path: inset(90px 0 8px 0);
   }
+
   53.3333333333% {
     clip-path: inset(22px 0 65px 0);
   }
+
   56.6666666667% {
     clip-path: inset(45px 0 29px 0);
   }
+
   60% {
     clip-path: inset(93px 0 3px 0);
   }
+
   63.3333333333% {
     clip-path: inset(80px 0 12px 0);
   }
+
   66.6666666667% {
     clip-path: inset(93px 0 4px 0);
   }
+
   70% {
     clip-path: inset(75px 0 17px 0);
   }
+
   73.3333333333% {
     clip-path: inset(96px 0 1px 0);
   }
+
   76.6666666667% {
     clip-path: inset(68px 0 5px 0);
   }
+
   80% {
     clip-path: inset(10px 0 64px 0);
   }
+
   83.3333333333% {
     clip-path: inset(78px 0 18px 0);
   }
+
   86.6666666667% {
     clip-path: inset(14px 0 36px 0);
   }
+
   90% {
     clip-path: inset(54px 0 4px 0);
   }
+
   93.3333333333% {
     clip-path: inset(18px 0 65px 0);
   }
+
   96.6666666667% {
     clip-path: inset(79px 0 14px 0);
   }
+
   100% {
     clip-path: inset(82px 0 11px 0);
   }
 }
+
 @keyframes noise-2 {
   0% {
     clip-path: inset(45px 0 42px 0);
   }
+
   3.3333333333% {
     clip-path: inset(97px 0 2px 0);
   }
+
   6.6666666667% {
     clip-path: inset(98px 0 2px 0);
   }
+
   10% {
     clip-path: inset(67px 0 19px 0);
   }
+
   13.3333333333% {
     clip-path: inset(28px 0 8px 0);
   }
+
   16.6666666667% {
     clip-path: inset(85px 0 2px 0);
   }
+
   20% {
     clip-path: inset(94px 0 2px 0);
   }
+
   23.3333333333% {
     clip-path: inset(75px 0 3px 0);
   }
+
   26.6666666667% {
     clip-path: inset(47px 0 42px 0);
   }
+
   30% {
     clip-path: inset(69px 0 9px 0);
   }
+
   33.3333333333% {
     clip-path: inset(79px 0 22px 0);
   }
+
   36.6666666667% {
     clip-path: inset(50px 0 5px 0);
   }
+
   40% {
     clip-path: inset(2px 0 53px 0);
   }
+
   43.3333333333% {
     clip-path: inset(74px 0 19px 0);
   }
+
   46.6666666667% {
     clip-path: inset(8px 0 57px 0);
   }
+
   50% {
     clip-path: inset(96px 0 3px 0);
   }
+
   53.3333333333% {
     clip-path: inset(19px 0 36px 0);
   }
+
   56.6666666667% {
     clip-path: inset(18px 0 43px 0);
   }
+
   60% {
     clip-path: inset(28px 0 50px 0);
   }
+
   63.3333333333% {
     clip-path: inset(17px 0 3px 0);
   }
+
   66.6666666667% {
     clip-path: inset(77px 0 4px 0);
   }
+
   70% {
     clip-path: inset(64px 0 29px 0);
   }
+
   73.3333333333% {
     clip-path: inset(57px 0 29px 0);
   }
+
   76.6666666667% {
     clip-path: inset(7px 0 62px 0);
   }
+
   80% {
     clip-path: inset(27px 0 10px 0);
   }
+
   83.3333333333% {
     clip-path: inset(44px 0 5px 0);
   }
+
   86.6666666667% {
     clip-path: inset(18px 0 34px 0);
   }
+
   90% {
     clip-path: inset(61px 0 39px 0);
   }
+
   93.3333333333% {
     clip-path: inset(3px 0 51px 0);
   }
+
   96.6666666667% {
     clip-path: inset(28px 0 22px 0);
   }
+
   100% {
     clip-path: inset(48px 0 37px 0);
   }
@@ -331,4 +398,4 @@ html {
   color: transparent;
   position: absolute;
   top: 0;
-}
+}
\ No newline at end of file
diff --git a/static/css/login-area.css b/static/css/shared/login-area.css
index 3d8b75ac..4fd5331c 100644
--- a/static/css/login-area.css
+++ b/static/css/shared/login-area.css
@@ -1,12 +1,6 @@
 #login-area {
   width: 200px;
   height: 280px;
-  /* background: url("../images/core/sidebar/login-area.png") no-repeat; */
-  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-repeat: no-repeat;
   background-size: 200px 280px;
   margin: auto;
@@ -59,30 +53,6 @@
   background: transparent;
 }
 
-#login-area > #register-now-button {
-  display: block;
-  width: 50px;
-  height: 12px;
-  cursor: pointer;
-  border-radius: 2px;
-  position: absolute;
-  bottom: 23px;
-  right: 32px;
-  background: transparent;
-}
-
-#login-area > #forgot-password-button {
-  display: block;
-  width: 64px;
-  height: 12px;
-  cursor: pointer;
-  border-radius: 2px;
-  position: absolute;
-  bottom: 85px;
-  right: 21px;
-  background: transparent;
-}
-
 #login-error {
   position: relative;
 }
diff --git a/static/images/core/shared/title_banner_ja.png b/static/images/core/shared/title_banner_ja.png
new file mode 100644
index 00000000..0ed4014f
--- /dev/null
+++ b/static/images/core/shared/title_banner_ja.png
diff --git a/static/images/core/shared/[email protected] b/static/images/core/shared/[email protected]
new file mode 100644
index 00000000..ed67f7ba
--- /dev/null
+++ b/static/images/core/shared/[email protected]
diff --git a/static/images/core/shared/[email protected] b/static/images/core/shared/[email protected]
new file mode 100644
index 00000000..b8775836
--- /dev/null
+++ b/static/images/core/shared/[email protected]
diff --git a/static/images/core/sidebar/login-area_ja.png b/static/images/core/sidebar/login-area_ja.png
new file mode 100644
index 00000000..0adb2011
--- /dev/null
+++ b/static/images/core/sidebar/login-area_ja.png
diff --git a/static/images/core/sidebar/[email protected] b/static/images/core/sidebar/[email protected]
new file mode 100644
index 00000000..4e7e0091
--- /dev/null
+++ b/static/images/core/sidebar/[email protected]
diff --git a/static/images/core/sidebar/[email protected] b/static/images/core/sidebar/[email protected]
new file mode 100644
index 00000000..2b847eb7
--- /dev/null
+++ b/static/images/core/sidebar/[email protected]
diff --git a/static/js/youdontdare.js b/static/js/youdontdare.js
index 39488cc8..8e0c8aa4 100644
--- a/static/js/youdontdare.js
+++ b/static/js/youdontdare.js
@@ -1,21 +1,41 @@
 let FACounter = 0
 let timesFA = document.getElementById('timesFA')
+const lang = document.documentElement.lang
 const FUpMessages = (FACounter) => {
-    if (FACounter === 0) return "Hey! Back off, fuckface!";
-    if (FACounter === 4) return "Don't you fucking dare, you little shit!";
-    if (FACounter === 9) return "Haven't you fucked around enough, you absolute wankstain?";
-    if (FACounter === 14) return "Aren't you a relentless cockwomble? Fuck off already!";
-    if (FACounter === 19) return "Fucking hell, you're like herpes - just won't go away!";
-    if (FACounter === 24) return "I'm done. Go play in traffic, you waste of oxygen.";
-    if (FACounter === 41) return "Congrats, you've found the meaning of life: being a colossal pain in my ass!";
-    if (FACounter === 49) return "Half a hundred clicks? Did your parents not hug you enough?";
-    if (FACounter === 68) return "Nice. Now go get laid for real, you horny bastard.";
-    if (FACounter === 99) return "Triple digits? You're a special kind of fucked up, aren't you?";
-    if (FACounter === 419) return "Blaze it and fuck off, you stoner dipshit.";
-    if (FACounter % 1000 === 999) return "A thousand clicks? I hope your finger falls off, you absolute lunatic!";
-    if (FACounter % 500 === 499) return "Jesus fucking Christ, get a life or I'll find one for you in a dumpster!";
-    if (FACounter % 100 === 99) return "Another hundred? Your therapist is getting rich off your issues!";
-    if (FACounter > 4999) return "Keep clicking, fuckface. I'm sure it'll fill the void in your pathetic life.";
+    if (lang === 'ja') {
+        if (FACounter === 0) return "おい！引っ込んでろ、クソ野郎！"
+        if (FACounter === 4) return "やんのかコラ、このクソガキが！"
+        if (FACounter === 9) return "まだ調子こいてんのか、このクソ野郎？"
+        if (FACounter === 14) return "しつこいんだよ、このゴミクズ野郎！さっさと消えろ！"
+        if (FACounter === 19) return "マジでウザい！ヘルペスかよ、消えねぇな！"
+        if (FACounter === 24) return "もう勘弁。さっさと死ね、このクソ無駄酸素野郎。"
+        if (FACounter === 41) return "おめでとう、人生の意味を見つけたな：俺をイラつかせることだ！"
+        if (FACounter === 49) return "50回も？マジで親に愛されなかったの？"
+        if (FACounter === 68) return "ナイス。現実でヤレよ、このスケベ野郎。"
+        if (FACounter === 99) return "3桁？お前、特別なクソ野郎だな。"
+        if (FACounter === 419) return "4:20でクソ燻ってろ、このバカチョン野郎。"
+        if (FACounter % 1000 === 999) return "1000回？指が腐って落ちちまえ、このキチガイ野郎！"
+        if (FACounter % 500 === 499) return "マジでクソ人生見つけろよ！ゴミ箱でも漁ってろ！"
+        if (FACounter % 100 === 99) return "また100回？お前の精神科医、ウハウハだぞ！"
+        if (FACounter > 4999) return "クリックし続けろよ、バーカ。お前の悲しい人生の穴埋めになるさ。"
+    } else {
+        // Original English messages
+        if (FACounter === 0) return "Hey! Back off, fuckface!"
+        if (FACounter === 4) return "Don't you fucking dare, you little shit!"
+        if (FACounter === 9) return "Haven't you fucked around enough, you absolute wankstain?"
+        if (FACounter === 14) return "Aren't you a relentless cockwomble? Fuck off already!"
+        if (FACounter === 19) return "Fucking hell, you're like herpes - just won't go away!"
+        if (FACounter === 24) return "I'm done. Go play in traffic, you waste of oxygen."
+        if (FACounter === 41) return "Congrats, you've found the meaning of life: being a colossal pain in my ass!"
+        if (FACounter === 49) return "Half a hundred clicks? Did your parents not hug you enough?"
+        if (FACounter === 68) return "Nice. Now go get laid for real, you horny bastard."
+        if (FACounter === 99) return "Triple digits? You're a special kind of fucked up, aren't you?"
+        if (FACounter === 419) return "Blaze it and fuck off, you stoner dipshit."
+        if (FACounter % 1000 === 999) return "A thousand clicks? I hope your finger falls off, you absolute lunatic!"
+        if (FACounter % 500 === 499) return "Jesus fucking Christ, get a life or I'll find one for you in a dumpster!"
+        if (FACounter % 100 === 99) return "Another hundred? Your therapist is getting rich off your issues!"
+        if (FACounter > 4999) return "Keep clicking, fuckface. I'm sure it'll fill the void in your pathetic life."
+    }
 }
 
 function dontYouDare(event) {
@@ -56,21 +76,23 @@ function applyStyles(x, y, container) {
     container.style.fontSize = '8px'
     container.style.userSelect = 'none'
     container.style.transition = 'opacity 0.5s ease-in-out'
-    container.style.textShadow = '0 0 2px #e014df, 0 0 4px #e014df, 0 0 6px #e014df, 0 0 10px #ff00ff, 0 0 14px #ff00ff';
-    container.style.color = '#ffffff';
-    container.style.backgroundColor = '#8a0885';
-    container.style.padding = '4px 8px';
-    container.style.border = '1px solid #e014df';
-    container.style.borderRadius = '2px';
-    container.style.fontWeight = 'bold';
+    container.style.textShadow = '0 0 2px #e014df, 0 0 4px #e014df, 0 0 6px #e014df, 0 0 10px #ff00ff, 0 0 14px #ff00ff'
+    container.style.color = '#ffffff'
+    container.style.backgroundColor = '#8a0885'
+    container.style.padding = '4px 8px'
+    container.style.border = '1px solid #e014df'
+    container.style.borderRadius = '2px'
+    container.style.fontWeight = 'bold'
     container.style.zIndex = 1
 }
 
 function leaveWebsite() {
-    const question = 'Ah, the choice of cowardice! Even trying to click on the disabled button. Let me humour you for once! Are you sure you want to leave?'
+    const question = lang === 'ja'
+        ? '臆病者の選択か！無効なボタンをクリックしようとしてるのか。一度だけ付き合ってやるよ！本当に出て行くのか？'
+        : 'Ah, the choice of cowardice! Even trying to click on the disabled button. Let me humour you for once! Are you sure you want to leave?'
 
     if (confirm(question)) {
-        alert('Mentally Weak Coward!')
+        alert(lang === 'ja' ? '精神的に弱いクソ野郎め！' : 'Mentally Weak Coward!')
     }
 }
 
diff --git a/templates/ja/core/home.html b/templates/ja/core/home.html
new file mode 100644
index 00000000..9eba501e
--- /dev/null
+++ b/templates/ja/core/home.html
@@ -0,0 +1,4 @@
+{% extends 'shared/base.html' %}
+{% block content %}
+  こんにちわ！
+{% endblock %}
diff --git a/templates/shared/base.html b/templates/shared/base.html
index cb348109..8d04b64b 100644
--- a/templates/shared/base.html
+++ b/templates/shared/base.html
@@ -19,10 +19,27 @@
     <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}" />
     <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/core.css' %}" />
+    <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 %}
     {% block head %}
 
     {% endblock %}
diff --git a/templates/shared/header.html b/templates/shared/header.html
index 6c9381ce..361a7a70 100644
--- a/templates/shared/header.html
+++ b/templates/shared/header.html
@@ -1,22 +1,41 @@
 {% load static %}
 <div style="position: relative; padding: 20px 0;">
-  <img draggable="false" src="{% static 'images/core/shared/title_banner.png' %}" srcset="
-    {% static 'images/core/shared/title_banner.png' %} 1x,
-    {% static 'images/core/shared/[email protected]' %} 2x,
-    {% static 'images/core/shared/[email protected]' %} 3x" alt="Shifoo Title Banner" class="title-banner" width="1000" height="333" loading="lazy" />
+  {% 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,
+        {% 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,
+        {% 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 %}
+  {% 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" alt="Picture of Neko Boy Sitting on the Divider Line" style="position: absolute; bottom: -41px; right: 0; width: 188px; height: 333px; z-index: 1;" />
-  <button onClick="dontYouDare(event)" style="width: 50px;height: 12px;position: absolute;bottom: 46px;right: 366px;background-color: transparent;outline:none;border: 0;cursor: pointer; z-index: 2;"></button>
-  <button onClick="leaveWebsite()" style="width: 37px;height: 12px;position: absolute;bottom: 46px;right: 238px;background-color: transparent;outline:none;border: 0;cursor: pointer; z-index: 2;"></button>
-  <button onClick="leaveWebsite()" style="width: 7px;height: 6px;position: absolute;bottom: 106px;right: 233px;background-color: transparent;outline:none;border: 0;cursor: pointer;z-index: 2;"></button>
+    {% static 'images/core/shared/[email protected]' %} 2x" 
+    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>
+  
   <div style="position: absolute;bottom: 60px;left: 584px;font-size: 7px;text-transform: uppercase;color: #560054;font-weight: bold; display: none;">
-    Times Fucked Around: <span id="timesFA" style="font-size: 7px;"></span>
+    {% if request.LANGUAGE_CODE == 'ja' %}ぶらぶらした回数{% else %}Times Fucked Around{% endif %}: <span id="timesFA" style="font-size: 7px;"></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: 113px;height: 93px;position: absolute;top: 134px;left: 664px;background-color: transparent;outline:none;border: 0;z-index: 2;"></button>
 </div>
 
 {% block scripts %}
   <script src="{% static 'js/youdontdare.js' %}"></script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/shared/left_sidebar.html b/templates/shared/left_sidebar.html
index c687ef34..ad049e1b 100644
--- a/templates/shared/left_sidebar.html
+++ b/templates/shared/left_sidebar.html
@@ -1,11 +1,16 @@
 {% load static %}
 {% if not user.is_authenticated %}
-  <link rel="stylesheet" href="{% static 'css/login-area.css' %}" />
+  <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="Username" autocomplete="off" value="{{ request.GET.username }}" />
-      <input type="password" id="password" name="password" placeholder="Password" autocomplete="off" />
+      <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>
@@ -13,3 +18,19 @@
     <a href="#" id="forgot-password-button"></a>
   </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>
+</div>
+
+<script>
+  function changeLanguage(language) {
+    document.cookie = `site_language=${language};path=/`;
+    location.reload();
+  }
+</script>
+