adding monkeytype

frontend/static/funbox/asl.css

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: "Gallaudet";
+  src: url("/webfonts/GallaudetRegular.woff2") format("woff2");
+}
+
+#wordsWrapper {
+  font-family: "Gallaudet" !important;
+}

frontend/static/funbox/backwards.css

@@ -0,0 +1,11 @@
+#words {
+  direction: rtl;
+}
+
+#words.rightToLeftTest {
+  direction: ltr;
+}
+
+#words.withLigatures .word {
+  unicode-bidi: bidi-override;
+}

frontend/static/funbox/choo_choo.css

@@ -0,0 +1,23 @@
+@keyframes choochoo {
+  0% {
+    transform: rotateZ(0deg);
+  }
+
+  50% {
+    transform: rotateZ(180deg);
+  }
+
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+#words {
+  --correct-letter-animation: choochoo 2s infinite linear;
+  --untyped-letter-animation: choochoo 2s infinite linear;
+}
+
+#words letter,
+#words.withLigatures .word letter {
+  display: inline-block;
+}

frontend/static/funbox/crt.css

@@ -0,0 +1,177 @@
+body.crtmode .customBackground {
+  background: radial-gradient(
+    ellipse,
+    var(--crt-bg-color-shine) 0%,
+    var(--bg-color) 90%
+  );
+}
+
+body.crtmode::after {
+  content: "";
+  display: block;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: 999999999;
+  background-image: repeating-linear-gradient(
+    0deg,
+    var(--crt-bg-color-stripe) 0px,
+    var(--crt-bg-color-stripe) 1px,
+    transparent 2px,
+    transparent 5px
+  );
+  background-size: 50% 5px;
+  opacity: 0.3;
+  mix-blend-mode: color-burn;
+  pointer-events: none;
+}
+
+body.crtmode #scanline {
+  width: 100%;
+  height: 100px;
+  z-index: 1001;
+  position: absolute;
+  bottom: 100%;
+  opacity: 0.1;
+  pointer-events: none;
+  background: linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0) 0%,
+    var(--crt-bg-color-shine) 10%,
+    rgba(0, 0, 0, 0.1) 100%
+  );
+  animation: scanline 10s linear infinite;
+}
+
+body.crtmode header,
+body.crtmode main,
+body.crtmode footer,
+body.crtmode #result,
+body.crtmode #popups,
+body.crtmode [data-ui-element="notifications"],
+body.crtmode #words .word.error,
+body.crtmode #words .word .hints hint,
+body.crtmode input,
+body.crtmode button,
+body.crtmode textarea,
+body.crtmode #bannerCenter .banner {
+  text-shadow:
+    3px 0 1px color-mix(in srgb, currentColor 20%, transparent),
+    -3px 0 color-mix(in srgb, currentColor 30%, transparent),
+    0 0 3px;
+}
+
+body.crtmode #testModesNotice {
+  text-shadow: none;
+}
+
+body.crtmode #testModesNotice .textButton {
+  text-shadow:
+    3px 0 1px var(--crt-sub-color-glow),
+    -3px 0 var(--crt-sub-color-glow),
+    0 0 3px;
+}
+
+body.crtmode #testModesNotice .textButton:hover {
+  text-shadow:
+    3px 0 1px var(--crt-text-color-glow),
+    -3px 0 var(--crt-text-color-glow),
+    0 0 3px;
+}
+
+body.crtmode #testModesNotice .textButton.active {
+  text-shadow:
+    3px 0 1px var(--crt-main-color-glow),
+    -3px 0 var(--crt-main-color-glow),
+    0 0 3px;
+}
+
+body.crtmode #testModesNotice .row {
+  box-shadow:
+    3px 0 1px var(--crt-sub-alt-color-glow),
+    -3px 0 var(--crt-sub-alt-color-glow);
+}
+
+body.crtmode #caret {
+  box-shadow:
+    3px 0 1px var(--crt-caret-color-glow),
+    -3px 0 var(--crt-caret-color-glow);
+}
+
+body.crtmode #paceCaret,
+body.crtmode key,
+body.crtmode #bannerCenter .banner {
+  box-shadow:
+    3px 0 1px var(--crt-sub-color-glow),
+    -3px 0 var(--crt-sub-color-glow);
+}
+
+body.crtmode #caret.banana,
+body.crtmode #caret.carrot,
+body.crtmode #paceCaret.banana,
+body.crtmode #paceCaret.carrot {
+  box-shadow: none;
+}
+
+body.crtmode header [data-ui-element="logo"] svg {
+  filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
+    drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
+}
+
+body.crtmode header [data-ui-element="navAvatar"] svg {
+  filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
+    drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
+}
+
+body.crtmode [data-ui-element="navAvatar"],
+body.crtmode [data-ui-element="userLevel"],
+body.crtmode [data-ui-element="xpBar"],
+body.crtmode header[data-focused] [data-ui-element="logo"] svg {
+  filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
+    drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
+}
+
+body.crtmode [data-ui-element="xpBreakdown"] {
+  backdrop-filter: none;
+  background: var(--bg-color);
+}
+
+body.crtmode .button,
+body.crtmode .scrollToTopButton {
+  box-shadow:
+    3px 0 1px var(--crt-sub-alt-color-glow),
+    -3px 0 var(--crt-sub-alt-color-glow),
+    0 0 3px var(--crt-sub-alt-color-glow);
+}
+
+body.crtmode .button.active,
+body.crtmode .scrollToTopButton.active {
+  box-shadow:
+    3px 0 1px var(--crt-main-color-glow),
+    -3px 0 var(--crt-main-color-glow),
+    0 0 3px;
+}
+
+body.crtmode .button:hover,
+body.crtmode .scrollToTopButton:hover {
+  box-shadow:
+    3px 0 1px var(--crt-text-color-glow),
+    -3px 0 var(--crt-text-color-glow),
+    0 0 3px;
+}
+
+body.crtmode #keymap .keymapKey {
+  box-shadow:
+    3px 0 1px var(--crt-sub-color-glow),
+    -3px 0 var(--crt-sub-color-glow),
+    0 0 3px;
+}
+
+body.crtmode #keymap .keymapKey.activeKey {
+  box-shadow:
+    3px 0 1px var(--crt-main-color-glow),
+    -3px 0 var(--crt-main-color-glow),
+    0 0 3px;
+}

frontend/static/funbox/earthquake.css

@@ -0,0 +1,47 @@
+@keyframes shake_dat_ass {
+  0% {
+    transform: translate(1px, 1px) rotate(0deg);
+  }
+  10% {
+    transform: translate(-1px, -2px) rotate(-1deg);
+  }
+  20% {
+    transform: translate(-3px, 0px) rotate(1deg);
+  }
+  30% {
+    transform: translate(3px, 2px) rotate(0deg);
+  }
+  40% {
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    transform: translate(3px, 1px) rotate(-1deg);
+  }
+  80% {
+    transform: translate(-1px, -1px) rotate(1deg);
+  }
+  90% {
+    transform: translate(1px, 2px) rotate(0deg);
+  }
+  100% {
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+#words {
+  --correct-letter-animation: shake_dat_ass 0.25s infinite linear;
+  --untyped-letter-animation: shake_dat_ass 0.25s infinite linear;
+  --incorrect-letter-animation: shake_dat_ass 0.25s infinite linear;
+  --extra-letter-animation: shake_dat_ass 0.25s infinite linear;
+}
+
+#words letter,
+#words.withLigatures .word letter {
+  display: inline-block;
+}

frontend/static/funbox/mirror.css

@@ -0,0 +1,3 @@
+main {
+  transform: scaleX(-1);
+}

frontend/static/funbox/nausea.css

@@ -0,0 +1,49 @@
+@keyframes nausea {
+  0% {
+    transform: rotateY(-15deg) skewY(10deg) rotateX(-15deg) scaleX(1.2)
+      scaleY(0.9);
+  }
+
+  25% {
+    transform: rotateY(15deg) skewY(-10deg) rotateX(15deg) scaleX(1) scaleY(0.8);
+  }
+
+  50% {
+    transform: rotateY(-15deg) skewY(10deg) rotateX(-15deg) scaleX(0.9)
+      scaleY(0.9);
+  }
+
+  75% {
+    transform: rotateY(15deg) skewY(-10deg) rotateX(15deg) scaleX(1.5)
+      scaleY(1.1);
+  }
+
+  100% {
+    transform: rotateY(-15deg) skewY(10deg) rotateX(-15deg) scaleX(1.2)
+      scaleY(0.9);
+  }
+}
+
+#typingTest {
+  animation: nausea 7s infinite cubic-bezier(0.5, 0, 0.5, 1);
+}
+
+header {
+  transform: rotate(2deg);
+  perspective: 500px;
+}
+
+footer {
+  transform: rotate(-2deg);
+  perspective: 500px;
+}
+
+body {
+  overflow: hidden;
+}
+
+#wordsInput {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}

frontend/static/funbox/read_ahead.css

@@ -0,0 +1,5 @@
+#words:not(.read_ahead_disabled) .word.active:nth-of-type(n + 2),
+#words:not(.read_ahead_disabled) .word.active:nth-of-type(n + 2) + .word {
+  --untyped-letter-color: transparent;
+  --untyped-letter-animation: none;
+}

frontend/static/funbox/read_ahead_easy.css

@@ -0,0 +1,4 @@
+#words:not(.read_ahead_disabled) .word.active:nth-of-type(n + 2) {
+  --untyped-letter-color: transparent;
+  --untyped-letter-animation: none;
+}

frontend/static/funbox/read_ahead_hard.css

@@ -0,0 +1,9 @@
+#words:not(.read_ahead_disabled) .word.active:nth-of-type(n + 2),
+#words:not(.read_ahead_disabled) .word.active:nth-of-type(n + 2) + .word,
+#words:not(.read_ahead_disabled)
+  .word.active:nth-of-type(n + 2)
+  + .word
+  + .word {
+  --untyped-letter-color: transparent;
+  --untyped-letter-animation: none;
+}

frontend/static/funbox/round_round_baby.css

@@ -0,0 +1,27 @@
+@keyframes woah {
+  0% {
+    transform: rotateZ(0deg);
+  }
+
+  50% {
+    transform: rotateZ(180deg);
+  }
+
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+#typingTest {
+  animation: woah 5s infinite linear;
+}
+
+body {
+  overflow: hidden;
+}
+
+#wordsInput {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}

frontend/static/funbox/simon_says.css

@@ -0,0 +1,3 @@
+#words {
+  --untyped-letter-color: transparent !important;
+}

frontend/static/funbox/space_balls.css

@@ -0,0 +1,26 @@
+:root {
+  --bg-color: #000000;
+  --main-color: #ffffff;
+  --caret-color: #ffffff;
+  --sub-color: rgba(255, 255, 255, 0.1);
+  --text-color: #ffd100;
+  --error-color: #da3333;
+  --error-extra-color: #791717;
+  --colorful-error-color: #da3333;
+  --colorful-error-extra-color: #791717;
+}
+
+body {
+  background-image: url("https://media0.giphy.com/media/5VD0q2EDp2gvNQVCIN/giphy.gif");
+  background-size: cover;
+  background-position: center;
+}
+
+main {
+  perspective: 500px;
+  overflow: hidden;
+}
+
+main .page {
+  transform: rotateX(35deg);
+}

frontend/static/funbox/tts.css

@@ -0,0 +1,3 @@
+#words {
+  --untyped-letter-color: transparent !important;
+}

frontend/static/funbox/upside_down.css

@@ -0,0 +1,3 @@
+main {
+  transform: scaleX(-1) scaleY(-1);
+}