Solitude: Welcome Page Done! Reponds based on `visited` Cookie

4 files changed, 656 insertions, 19 deletions

diff --git a/static/@solitude/css/welcome/audio.css b/static/@solitude/css/welcome/audio.css
index ca5b144c..5e0d0c58 100644
--- a/static/@solitude/css/welcome/audio.css
+++ b/static/@solitude/css/welcome/audio.css
@@ -139,4 +139,3 @@
 .track {
   letter-spacing: 0.1rem;
 }
-
diff --git a/static/@solitude/css/welcome/button.css b/static/@solitude/css/welcome/button.css
new file mode 100644
index 00000000..48dc5b2e
--- /dev/null
+++ b/static/@solitude/css/welcome/button.css
@@ -0,0 +1,68 @@
+.button {
+  --offset: 10px;
+  --border-size: 2px;
+  display: block;
+  position: relative;
+  padding: 1.5em 3em;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: #7679f5;
+  text-transform: uppercase;
+  letter-spacing: 0.25em;
+  outline: none;
+  cursor: pointer;
+  font-weight: bold;
+  border-radius: 0;
+  box-shadow: inset 0 0 0 var(--border-size) currentcolor;
+  transition: background 0.8s ease;
+}
+.button:hover {
+  background: rgba(100, 0, 0, 0.03);
+}
+.button__horizontal,
+.button__vertical {
+  position: absolute;
+  top: var(--horizontal-offset, 0);
+  right: var(--vertical-offset, 0);
+  bottom: var(--horizontal-offset, 0);
+  left: var(--vertical-offset, 0);
+  transition: transform 0.8s ease;
+  will-change: transform;
+}
+.button__horizontal::before,
+.button__vertical::before {
+  content: "";
+  position: absolute;
+  border: inherit;
+}
+.button__horizontal {
+  --vertical-offset: calc(var(--offset) * -1);
+  border-top: var(--border-size) solid currentcolor;
+  border-bottom: var(--border-size) solid currentcolor;
+}
+.button__horizontal::before {
+  top: calc(var(--vertical-offset) - var(--border-size));
+  bottom: calc(var(--vertical-offset) - var(--border-size));
+  left: calc(var(--vertical-offset) * -1);
+  right: calc(var(--vertical-offset) * -1);
+}
+.button:hover .button__horizontal {
+  transform: scaleX(0);
+}
+.button__vertical {
+  --horizontal-offset: calc(var(--offset) * -1);
+  border-left: var(--border-size) solid currentcolor;
+  border-right: var(--border-size) solid currentcolor;
+}
+.button__vertical::before {
+  top: calc(var(--horizontal-offset) * -1);
+  bottom: calc(var(--horizontal-offset) * -1);
+  left: calc(var(--horizontal-offset) - var(--border-size));
+  right: calc(var(--horizontal-offset) - var(--border-size));
+}
+.button:hover .button__vertical {
+  transform: scaleY(0);
+}
diff --git a/static/@solitude/css/welcome/glitch.css b/static/@solitude/css/welcome/glitch.css
new file mode 100644
index 00000000..6b8c8987
--- /dev/null
+++ b/static/@solitude/css/welcome/glitch.css
@@ -0,0 +1,574 @@
+.glitch {
+  position: relative;
+  color: #fff;
+  font-size: 10rem;
+  font-family: "Share", cursive;
+}
+
+.line:not(:first-child) {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.line:nth-child(1) {
+  -webkit-animation: clip 3000ms -300ms linear infinite,
+    glitch1 500ms -80ms linear infinite;
+  animation: clip 3000ms -300ms linear infinite,
+    glitch1 500ms -80ms linear infinite;
+}
+@-webkit-keyframes glitch1 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(4px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(5px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(0px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes glitch1 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(4px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(5px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(0px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.line:nth-child(2) {
+  -webkit-animation: clip 3000ms -600ms linear infinite,
+    glitch2 500ms -433ms linear infinite;
+  animation: clip 3000ms -600ms linear infinite,
+    glitch2 500ms -433ms linear infinite;
+}
+@-webkit-keyframes glitch2 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(3px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(-3px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(4px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes glitch2 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(3px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(-3px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(4px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.line:nth-child(3) {
+  -webkit-animation: clip 3000ms -900ms linear infinite,
+    glitch3 500ms -664ms linear infinite;
+  animation: clip 3000ms -900ms linear infinite,
+    glitch3 500ms -664ms linear infinite;
+}
+@-webkit-keyframes glitch3 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(4px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(5px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(-2px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes glitch3 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(4px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(5px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(-2px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.line:nth-child(4) {
+  -webkit-animation: clip 3000ms -1200ms linear infinite,
+    glitch4 500ms -276ms linear infinite;
+  animation: clip 3000ms -1200ms linear infinite,
+    glitch4 500ms -276ms linear infinite;
+}
+@-webkit-keyframes glitch4 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(-3px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(2px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(-2px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes glitch4 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(-3px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(2px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(-2px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.line:nth-child(5) {
+  -webkit-animation: clip 3000ms -1500ms linear infinite,
+    glitch5 500ms -180ms linear infinite;
+  animation: clip 3000ms -1500ms linear infinite,
+    glitch5 500ms -180ms linear infinite;
+}
+@-webkit-keyframes glitch5 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(-2px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(-4px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(2px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes glitch5 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(-2px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(-4px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(2px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.line:nth-child(6) {
+  -webkit-animation: clip 3000ms -1800ms linear infinite,
+    glitch6 500ms -954ms linear infinite;
+  animation: clip 3000ms -1800ms linear infinite,
+    glitch6 500ms -954ms linear infinite;
+}
+@-webkit-keyframes glitch6 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(-3px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(-4px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(1px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes glitch6 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(-3px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(-4px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(1px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.line:nth-child(7) {
+  -webkit-animation: clip 3000ms -2100ms linear infinite,
+    glitch7 500ms -377ms linear infinite;
+  animation: clip 3000ms -2100ms linear infinite,
+    glitch7 500ms -377ms linear infinite;
+}
+@-webkit-keyframes glitch7 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(2px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(-1px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(-1px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes glitch7 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(2px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(-1px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(-1px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.line:nth-child(8) {
+  -webkit-animation: clip 3000ms -2400ms linear infinite,
+    glitch8 500ms -104ms linear infinite;
+  animation: clip 3000ms -2400ms linear infinite,
+    glitch8 500ms -104ms linear infinite;
+}
+@-webkit-keyframes glitch8 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(1px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(-2px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(4px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes glitch8 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(1px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(-2px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(4px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.line:nth-child(9) {
+  -webkit-animation: clip 3000ms -2700ms linear infinite,
+    glitch9 500ms -606ms linear infinite;
+  animation: clip 3000ms -2700ms linear infinite,
+    glitch9 500ms -606ms linear infinite;
+}
+@-webkit-keyframes glitch9 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(1px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(-4px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(2px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes glitch9 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(1px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(-4px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(2px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.line:nth-child(10) {
+  -webkit-animation: clip 3000ms -3000ms linear infinite,
+    glitch10 500ms -560ms linear infinite;
+  animation: clip 3000ms -3000ms linear infinite,
+    glitch10 500ms -560ms linear infinite;
+}
+@-webkit-keyframes glitch10 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(-1px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(1px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(1px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes glitch10 {
+  0% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(0);
+    color: #fff;
+  }
+  85% {
+    transform: translateX(-1px);
+    color: #4e9a26;
+  }
+  90% {
+    transform: translateX(1px);
+    color: #ac1212;
+  }
+  95% {
+    transform: translateX(1px);
+    color: #fff;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@-webkit-keyframes clip {
+  0% {
+    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
+    clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
+  }
+  100% {
+    -webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
+    clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
+  }
+}
+
+@keyframes clip {
+  0% {
+    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
+    clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
+  }
+  100% {
+    -webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
+    clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
+  }
+}
diff --git a/static/@solitude/css/welcome/welcome.css b/static/@solitude/css/welcome/welcome.css
index 22a1a747..b4fcde6c 100644
--- a/static/@solitude/css/welcome/welcome.css
+++ b/static/@solitude/css/welcome/welcome.css
@@ -11,6 +11,8 @@
 */
 @import url("https://fonts.googleapis.com/css2?family=Handlee&family=Poppins:wght@400&family=Share:wght@700&display=swap");
 @import url(audio.css);
+@import url(button.css);
+@import url(glitch.css);
 :root {
   --button-height: 0.5rem;
   --button-color: #edd;
@@ -42,7 +44,6 @@
   min-height: 100%;
   height: 100%;
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.15);
   z-index: -99;
 }
 
@@ -52,6 +53,14 @@
   align-items: center;
   justify-content: center;
   min-height: 100vh;
+  background: repeating-linear-gradient(
+    0deg,
+    #0e0d0e77 25%,
+    #0e0d0e77 50%,
+    #17181977 50%,
+    #17181977 75%
+  );
+  background-size: 10px 10px;
 }
 
 .cwrapper {
@@ -78,21 +87,8 @@ p {
   margin-top: 10rem;
 }
 
-.description {
-  font-family: "Share", sans-serif;
-  font-size: 1rem;
-  margin-top: -4rem;
-  letter-spacing: 0.1rem;
+@media only screen and (max-width: 600px) {
+  .glitch {
+    font-size: 5rem;
+  }
 }
-
-.text-box {
-  font-family: "Share", cursive;
-}
-
-.text-box > h1 {
-  margin: 0;
-	font-size: 10rem;
-	color: rgb(255 255 255 / 60%);
-	padding: .5em;
-}
-