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, 194 insertions, 380 deletions

diff --git a/static/css/shared/core.css b/static/css/shared/core.css
index 06fcb57c..884ddbbf 100644
--- a/static/css/shared/core.css
+++ b/static/css/shared/core.css
@@ -1,42 +1,52 @@
-/* Shared CSS File */
+/* Reset and Base Styles */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-}
-
-*,
-input,
-button {
+  font-family: "Mali", sans-serif;
+  font-size: 11px;
   outline: none;
   border: none;
 }
 
-hr {
-  border: 0;
-  height: 1px;
-  background: #fff;
+/* Root Variables */
+:root {
+  --resolution-multiplier: 1;
 }
 
+/* HTML and Body Base */
 html {
   background-color: #000;
   color: #fff;
+  min-width: 1024px;
+}
+
+body {
+  min-height: 100vh;
+  overflow-x: hidden;
+  position: relative;
+}
+
+/* Element Styles */
+hr {
+  height: 1px;
+  background: #fff;
 }
 
 a:visited {
   color: #fff;
 }
 
-#video-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  object-fit: cover;
-  z-index: -100;
+img {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
 }
 
+/* Video Overlay */
 #video-overlay {
   position: fixed;
   top: 0;
@@ -48,6 +58,7 @@ a:visited {
   z-index: -99;
 }
 
+/* Layout Structure */
 #body-wrapper {
   position: relative;
   z-index: 1;
@@ -59,6 +70,7 @@ a:visited {
   display: flex;
 }
 
+/* Sidebar and Main Content */
 #left-sidebar {
   width: 200px;
   border-top: 1px solid #fff;
@@ -74,328 +86,4 @@ a:visited {
 #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;
 }
\ No newline at end of file
diff --git a/static/css/shared/kawaiibeats.css b/static/css/shared/kawaiibeats.css
new file mode 100644
index 00000000..ca4ce155
--- /dev/null
+++ b/static/css/shared/kawaiibeats.css
@@ -0,0 +1,106 @@
+/* Kawaii Beats Player Container */
+.kawaiibeats {
+    width: 200px;
+    height: 320px;
+    position: relative;
+    left: 20px;
+    top: 6px;
+    background-image: url("../../images/kawaiibeats/kawaii_beats.gif");
+    background-size: 200px 320px;
+    background-repeat: no-repeat;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.kawaiibeats::after {
+    content: "";
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    width: 160px;
+    height: 280px;
+    background-color: black;
+    opacity: 0.75;
+    z-index: -1;
+}
+
+/* Track Information */
+#song-title {
+    position: absolute;
+    top: 25px;
+    left: 20px;
+    width: 160px;
+    font-weight: bold;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#song-artist-album {
+    position: absolute;
+    top: 40px;
+    left: 25px;
+    width: 150px;
+    font-size: 10px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Player Elements */
+#song-cover {
+    position: absolute;
+    top: 65px;
+    left: 30px;
+    width: 140px;
+    height: 140px;
+}
+
+#song-visualizer {
+    position: absolute;
+    top: 190px;
+    left: 30px;
+}
+
+#custom-seekbar {
+    position: absolute;
+    top: 220px;
+    left: 30px;
+    cursor: pointer;
+}
+
+#song-time {
+    position: absolute;
+    top: 240px;
+    left: 30px;
+    width: 140px;
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+}
+
+/* Player Controls */
+#song-controls {
+    position: absolute;
+    top: 260px;
+    left: 30px;
+    width: 140px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+#song-controls button {
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+    background: none;
+    border: none;
+}
+
+#song-controls button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/static/css/shared/login-area.css b/static/css/shared/login-area.css
index 4fd5331c..680e95c3 100644
--- a/static/css/shared/login-area.css
+++ b/static/css/shared/login-area.css
@@ -1,15 +1,17 @@
+/* Login Area Container */
 #login-area {
   width: 200px;
   height: 280px;
-  background-repeat: no-repeat;
-  background-size: 200px 280px;
-  margin: auto;
-  padding: 0px;
-  border: 0px;
   position: relative;
   top: -65px;
+  margin: auto;
+  background-repeat: no-repeat;
+  background-size: 200px 280px;
+  padding: 0;
+  border: 0;
 }
 
+/* Login Form */
 #login-form {
   display: block;
   position: relative;
@@ -19,22 +21,14 @@
 #login-form input[type="text"],
 #login-form input[type="password"] {
   display: block;
-  margin: 10px auto;
   width: 144px;
-  font-size: 11px;
+  margin: 10px auto;
   padding: 4px 8px;
-  background: transparent;
+  font-size: 11px;
+  font-weight: bold;
   color: #4a2e6f;
+  background: transparent;
   border-radius: 4px;
-  font-weight: bold;
-}
-
-/* Reset auto fill */
-#login-form input:-webkit-autofill,
-#login-form input:-webkit-autofill:hover,
-#login-form input:-webkit-autofill:focus,
-#login-form input:-webkit-autofill:active {
-  transition: background-color 1s ease-in 2000s;
 }
 
 #login-form input::placeholder {
@@ -43,52 +37,78 @@
 }
 
 #login-form input[type="submit"] {
-  width: 106px;
-  height: 22px;
-  cursor: pointer;
   position: absolute;
   top: 96px;
   left: 48px;
-  border-radius: 2px;
+  width: 106px;
+  height: 22px;
   background: transparent;
+  border-radius: 2px;
+  cursor: pointer;
 }
 
+/* Autofill Override */
+#login-form input:-webkit-autofill,
+#login-form input:-webkit-autofill:hover,
+#login-form input:-webkit-autofill:focus,
+#login-form input:-webkit-autofill:active {
+  transition: background-color 1s ease-in 2000s;
+}
+
+/* Error Messages */
 #login-error {
   position: relative;
 }
 
-#login-error > .RFEERR {
+#login-error>.messageBox {
+  position: absolute;
+  top: -100px;
+  left: -140px;
+  z-index: 2;
+  width: 250px;
+  height: 166px;
+  background-size: 250px 166px;
+}
+
+#login-error>.RFEERR {
   background: url("../images/backgrounds/login-messages/RFEERR.png") no-repeat;
 }
 
-#login-error > .IUOPERR {
+#login-error>.IUOPERR {
   background: url("../images/backgrounds/login-messages/IUOPERR.png") no-repeat;
 }
 
-#login-error > .ENVERR {
+#login-error>.ENVERR {
   background: url("../images/backgrounds/login-messages/ENVERR.png") no-repeat;
 }
 
-#login-error > .VESENDERR {
-  background: url("../images/backgrounds/login-messages/VESENDERR.png")
-    no-repeat;
+#login-error>.VESENDERR {
+  background: url("../images/backgrounds/login-messages/VESENDERR.png") no-repeat;
 }
 
-#login-error > .VESENT {
+#login-error>.VESENT {
   background: url("../images/backgrounds/login-messages/VESENT.png") no-repeat;
 }
 
-#login-error > .VESUCCESS {
-  background: url("../images/backgrounds/login-messages/VESUCCESS.png")
-    no-repeat;
+#login-error>.VESUCCESS {
+  background: url("../images/backgrounds/login-messages/VESUCCESS.png") no-repeat;
 }
 
-#login-error > .messageBox {
+/* Login Area Button Styles */
+#login-area>#register-now-button,
+#login-area>#forgot-password-button {
+  display: block;
+  height: 12px;
+  cursor: pointer;
+  border-radius: 2px;
   position: absolute;
-  background-size: 250px 166px;
-  width: 250px;
-  height: 166px;
-  top: -100px;
-  left: -140px;
-  z-index: 2;
+  background: transparent;
 }
+
+#login-area>#register-now-button {
+  bottom: 23px;
+}
+
+#login-area>#forgot-password-button {
+  bottom: 85px;
+}
\ No newline at end of file