i made the header and something extra

16 files changed, 445 insertions, 26 deletions

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