i made the header and something extra

23 files changed, 550 insertions, 27 deletions

diff --git a/apps/core/views.py b/apps/core/views.py
index 359a1c86..90554d10 100644
--- a/apps/core/views.py
+++ b/apps/core/views.py
@@ -3,6 +3,10 @@ from thatcomputerscientist.utils import i18npatterns
 
 
 def home(request):
+    META = {
+        "title": "Home",
+    }
     LANGUAGE_CODE = i18npatterns(request.LANGUAGE_CODE)
+    request.meta.update(META)
 
     return render(request, f"{LANGUAGE_CODE}/core/home.html")
diff --git a/middleware/globalmetamiddleware.py b/middleware/globalmetamiddleware.py
index 197dd210..1a9a1d6b 100644
--- a/middleware/globalmetamiddleware.py
+++ b/middleware/globalmetamiddleware.py
@@ -8,6 +8,7 @@ class GlobalMetaMiddleware:
     def __call__(self, request):
         request.meta = {
             # Default General Meta Tags
+            "title": "Shifoo",
             "description": "Welcome to the home of Shifoo. This is my personal website where I share all of my thoughts, ideas, and experiences.",
             "image": "https://shi.foo/static/images/favicons/android-chrome-512x512.png",
             "url": "{}://{}{}".format(request.scheme, request.get_host(), request.path),
diff --git a/static/audio/present-day-heh.mp3 b/static/audio/present-day-heh.mp3
new file mode 100644
index 00000000..b504a88a
--- /dev/null
+++ b/static/audio/present-day-heh.mp3
diff --git a/static/css/core.css b/static/css/core.css
new file mode 100644
index 00000000..d13338d4
--- /dev/null
+++ b/static/css/core.css
@@ -0,0 +1,334 @@
+/* Shared CSS File */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Mali", sans-serif;
+  font-size: 11px;
+}
+
+*,
+input,
+button {
+  outline: none;
+  border: none;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  background: #fff;
+}
+
+html {
+  background-color: #000;
+  color: #fff;
+}
+
+#video-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
+  z-index: -100;
+}
+
+#video-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  opacity: 0.35;
+  z-index: -99;
+}
+
+#body-wrapper {
+  position: relative;
+  z-index: 1;
+  width: 1000px;
+  margin: 0 auto;
+}
+
+#content-wrapper {
+  display: flex;
+}
+
+#left-sidebar {
+  width: 200px;
+  border-top: 1px solid #fff;
+  border-top-left-radius: 14px;
+}
+
+#main-content {
+  width: 580px;
+  padding: 0 20px;
+  border-top: 1px solid #fff;
+}
+
+#right-sidebar {
+  width: 200px;
+  border-top: 1px solid #fff;
+}
+
+.flip-container {
+  perspective: 1000px;
+}
+.flipper {
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 0.6s;
+}
+.front,
+.back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+.back {
+  transform: rotateX(180deg);
+}
+
+.glitch,
+.glow {
+  color: #dfbfbf;
+  position: relative;
+  font-size: 18px;
+  font-weight: bold;
+  animation: glitch 5s 5s infinite;
+}
+
+.glitch::before,
+.glow::before {
+  content: attr(data-text);
+  position: absolute;
+  left: -2px;
+  text-shadow: -5px 0 magenta;
+  background: black;
+  overflow: hidden;
+  top: 0;
+  animation: noise-1 3s linear infinite alternate-reverse,
+    glitch 5s 5.05s infinite;
+}
+
+.glitch::after,
+.glow::after {
+  content: attr(data-text);
+  position: absolute;
+  left: 2px;
+  text-shadow: -5px 0 lightgreen;
+  background: black;
+  overflow: hidden;
+  top: 0;
+  animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
+}
+
+@keyframes glitch {
+  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);
+  }
+}
+
+.glow {
+  text-shadow: 0 0 1000px #dfbfbf;
+  color: transparent;
+  position: absolute;
+  top: 0;
+}
diff --git a/static/css/login-area.css b/static/css/login-area.css
index a707919c..3d8b75ac 100644
--- a/static/css/login-area.css
+++ b/static/css/login-area.css
@@ -1,31 +1,38 @@
 #login-area {
-  width: 250px;
-  height: 350px;
-  background: url("../images/backgrounds/login-area.png") no-repeat;
-  background-size: 250px 350px;
+  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;
   padding: 0px;
   border: 0px;
   position: relative;
+  top: -65px;
 }
 
 #login-form {
   display: block;
-  padding-top: 151px;
-  padding-left: 20px;
-  padding-right: 20px;
+  position: relative;
+  top: 118px;
 }
 
 #login-form input[type="text"],
 #login-form input[type="password"] {
   display: block;
-  margin: 0px auto 18px auto;
-  width: 180px;
-  font-size: 12px;
+  margin: 10px auto;
+  width: 144px;
+  font-size: 11px;
   padding: 4px 8px;
   background: transparent;
-  color: #fff;
+  color: #4a2e6f;
   border-radius: 4px;
+  font-weight: bold;
 }
 
 /* Reset auto fill */
@@ -37,41 +44,42 @@
 }
 
 #login-form input::placeholder {
-  color: #dcdcdc;
+  color: #4a2e6f;
+  font-weight: normal;
 }
 
 #login-form input[type="submit"] {
-  width: 131px;
-  height: 26px;
+  width: 106px;
+  height: 22px;
   cursor: pointer;
   position: absolute;
-  bottom: 55px;
-  left: 61px;
+  top: 96px;
+  left: 48px;
   border-radius: 2px;
   background: transparent;
 }
 
 #login-area > #register-now-button {
   display: block;
-  width: 60px;
+  width: 50px;
   height: 12px;
   cursor: pointer;
   border-radius: 2px;
   position: absolute;
-  bottom: 30px;
-  right: 40px;
+  bottom: 23px;
+  right: 32px;
   background: transparent;
 }
 
 #login-area > #forgot-password-button {
   display: block;
-  width: 80px;
+  width: 64px;
   height: 12px;
   cursor: pointer;
   border-radius: 2px;
   position: absolute;
-  bottom: 106px;
-  right: 26px;
+  bottom: 85px;
+  right: 21px;
   background: transparent;
 }
 
diff --git a/static/css/styles.css b/static/css/styles.css
index 15cdd367..775ab13f 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -295,15 +295,11 @@ blockquote {
   box-sizing: border-box;
   border-radius: 8px;
   text-align: left !important;
-<<<<<<< HEAD
-  overflow-x: scroll;
-=======
   overflow-x: auto;
 
   // Custom Horizontal Scrollbar
   scrollbar-width: thin;
   scrollbar-color: #311b4f #311b4f26;
->>>>>>> 164950f013807651da5dca224a70fadef6986953
 }
 
 .comment {
diff --git a/static/extra/player_skin.wsz b/static/extra/player_skin.wsz
new file mode 100644
index 00000000..23a10c59
--- /dev/null
+++ b/static/extra/player_skin.wsz
diff --git a/static/fonts/CozetteVector.woff b/static/fonts/CozetteVector.woff
new file mode 100644
index 00000000..6bba1ded
--- /dev/null
+++ b/static/fonts/CozetteVector.woff
diff --git a/static/images/core/shared/neko_sitting.png b/static/images/core/shared/neko_sitting.png
new file mode 100644
index 00000000..65fce257
--- /dev/null
+++ b/static/images/core/shared/neko_sitting.png
diff --git a/static/images/core/shared/[email protected] b/static/images/core/shared/[email protected]
new file mode 100644
index 00000000..304d64c4
--- /dev/null
+++ b/static/images/core/shared/[email protected]
diff --git a/static/images/core/shared/title_banner.png b/static/images/core/shared/title_banner.png
new file mode 100644
index 00000000..0444f73c
--- /dev/null
+++ b/static/images/core/shared/title_banner.png
diff --git a/static/images/core/shared/[email protected] b/static/images/core/shared/[email protected]
new file mode 100644
index 00000000..9689acab
--- /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..a056725d
--- /dev/null
+++ b/static/images/core/shared/[email protected]
diff --git a/static/images/core/sidebar/login-area.png b/static/images/core/sidebar/login-area.png
new file mode 100644
index 00000000..0e1e3f1a
--- /dev/null
+++ b/static/images/core/sidebar/login-area.png
diff --git a/static/images/core/sidebar/[email protected] b/static/images/core/sidebar/[email protected]
new file mode 100644
index 00000000..2fbbf9c3
--- /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..9898e63f
--- /dev/null
+++ b/static/images/core/sidebar/[email protected]
diff --git a/static/js/youdontdare.js b/static/js/youdontdare.js
new file mode 100644
index 00000000..39488cc8
--- /dev/null
+++ b/static/js/youdontdare.js
@@ -0,0 +1,81 @@
+let FACounter = 0
+let timesFA = document.getElementById('timesFA')
+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.";
+}
+
+function dontYouDare(event) {
+    if (timesFA.parentElement.style.display === 'none') {
+        timesFA.parentElement.style.display = 'block'
+    }
+
+    const previousFAButton = document.getElementById('FAButton')
+    if (previousFAButton) {
+        document.body.removeChild(previousFAButton)
+    }
+    const FAButton = document.createElement('div')
+    FAButton.id = 'FAButton'
+    FAButton.textContent = FUpMessages(FACounter)
+
+    if (FAButton.textContent) {
+        applyStyles(event.clientX, event.clientY, FAButton)
+        document.body.appendChild(FAButton)
+    }
+    FACounter += 1
+    timesFA.innerText = FACounter
+    setTimeout(() => {
+        FAButton.style.opacity = 0
+        setTimeout(() => {
+            try {
+                document.body.removeChild(FAButton)
+            } catch {
+                // pass
+            }
+        }, 100)
+    }, 6000)
+}
+
+function applyStyles(x, y, container) {
+    container.style.position = 'absolute'
+    container.style.top = `${y}px`
+    container.style.left = `${x}px`
+    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.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?'
+
+    if (confirm(question)) {
+        alert('Mentally Weak Coward!')
+    }
+}
+
+function stopAndPlayPresentDay() {
+    const audio = document.getElementById('presentDayAudio')
+    audio.currentTime = 0
+    audio.play()
+}
diff --git a/static/videos/background_.mp4 b/static/videos/background_.mp4
new file mode 100644
index 00000000..f9072baf
--- /dev/null
+++ b/static/videos/background_.mp4
diff --git a/templates/en/core/home.html b/templates/en/core/home.html
index 6319fc44..ff1b24b8 100644
--- a/templates/en/core/home.html
+++ b/templates/en/core/home.html
@@ -1 +1,4 @@
-welcome to core
+{% extends 'shared/base.html' %}
+{% block content %}
+  Hello
+{% endblock %}
diff --git a/templates/shared/base.html b/templates/shared/base.html
new file mode 100644
index 00000000..cb348109
--- /dev/null
+++ b/templates/shared/base.html
@@ -0,0 +1,55 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="{{ request.LANGUAGE_CODE }}">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="title" content="Shifoo - {{ request.meta.title }}" />
+    <meta name="description" content="{{ request.meta.description }}" />
+    <meta name="image" content="{{ request.meta.image }}" />
+    <meta name="url" content="{{ request.meta.url }}" />
+    <meta property="og:title" content="Shifoo - {{ request.meta.title }}" />
+    <meta property="og:description" content="{{ request.meta.description }}" />
+    <meta property="og:image" content="{{ request.meta.image }}" />
+    <meta property="og:url" content="{{ request.meta.url }}" />
+    <meta property="robots" content="{{ request.meta.robots }}" />
+    <title>Shifoo - {{ request.meta.title }}</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-touch-icon.png' %}" />
+    <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 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" />
+    {% block head %}
+
+    {% endblock %}
+  </head>
+  <body>
+    <video autoplay muted loop id="video-background" preload="auto">
+      <source src="{% static 'videos/background_.mp4' %}" type="video/mp4" />
+    </video>
+    <div id="video-overlay"></div>
+    <div id="body-wrapper">
+      {% include 'shared/header.html' %}
+      <div id="content-wrapper">
+        <div id="left-sidebar">
+          {% include 'shared/left_sidebar.html' %}
+        </div>
+        <div id="main-content">
+          {% block content %}
+
+          {% endblock %}
+        </div>
+        <div id="right-sidebar">
+          {% include 'shared/right_sidebar.html' %}
+        </div>
+      </div>
+    </div>
+  </body>
+  {% block scripts %}
+
+  {% endblock %}
+</html>
diff --git a/templates/shared/header.html b/templates/shared/header.html
new file mode 100644
index 00000000..6c9381ce
--- /dev/null
+++ b/templates/shared/header.html
@@ -0,0 +1,22 @@
+{% 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" />
+  <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>
+  <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>
+  </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>
+</div>
+
+{% block scripts %}
+  <script src="{% static 'js/youdontdare.js' %}"></script>
+{% endblock %}
diff --git a/templates/shared/left_sidebar.html b/templates/shared/left_sidebar.html
new file mode 100644
index 00000000..c687ef34
--- /dev/null
+++ b/templates/shared/left_sidebar.html
@@ -0,0 +1,15 @@
+{% load static %}
+{% if not user.is_authenticated %}
+  <link rel="stylesheet" href="{% static 'css/login-area.css' %}" />
+  <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="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 %}
diff --git a/templates/shared/right_sidebar.html b/templates/shared/right_sidebar.html
new file mode 100644
index 00000000..fb2ede6d
--- /dev/null
+++ b/templates/shared/right_sidebar.html
@@ -0,0 +1,4 @@
+<div style="margin: 18px 0 12px 0;">
+  <div class="glitch" data-text="KAWAII BEATS">KAWAII BEATS</div>
+  <div class="glow">KAWAII BEATS</div>
+</div>