add half-working client

2025-05-05 00:15:12 +02:00
parent 776ee8d637
commit bfa0ba8edf
13 changed files with 782 additions and 38 deletions
--- a/client/style.scss
+++ b/client/style.scss
@@ -0,0 +1,151 @@
+@use "sass:color";
+
+body {
+  font-family: Arial;
+  background-color: black;
+  color: white;
+  margin: 0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.idle {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+
+  h1 {
+    transition: .5s ease transform, .5s ease opacity;
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+
+  h2 {
+    transition: .5s ease opacity;
+    color: grey;
+    font-size: 1em;
+    margin: 0;
+    opacity: 0;
+    font-weight: normal;
+  }
+
+  .logos {
+    display: flex;
+    margin-top: 10em;
+    width: 40rem;
+    justify-content: center;
+
+    .logo {
+      transition: .5s ease-out transform, .5s ease-out opacity;
+      width: 15em;
+      transform: translateY(100%);
+      opacity: 0;
+      margin: 0 1em;
+    }
+  }
+}
+
+.video {
+  display: block;
+
+  video {
+    transition: 1s linear opacity;
+    width: 100vw;
+    height: 100vh;
+    object-fit: contain;
+    opacity: 0;
+  }
+}
+
+.main {
+  transition: .5s ease opacity;
+  opacity: 0;
+}
+
+.question {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+  margin-bottom: 5em;
+
+  p {
+    transition: .5s ease opacity;
+    font-size: 2em;
+    opacity: 0;
+  }
+
+  .link {
+    display: flex;
+    align-items: center;
+    height: fit-content;
+    margin-top: 1em;
+    margin-bottom: 2em;
+
+    .qr {
+      display: block;
+      margin-left: 2em;
+      width: 7em;
+      height: 7em;
+    }
+  }
+}
+
+.subtitles {
+  display: flex;
+  width: 90%;
+  justify-content: space-between;
+  margin: 0 auto;
+
+  .lang {
+    display: block;
+    width: 100%;
+    margin: 0 2em;
+    overflow: hidden;
+  }
+}
+
+.scrolling-textbox {
+  $line-height: 2rem;
+
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  padding-top: $line-height;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  width: 100%;
+
+  .paragraph {
+    transition: .5s ease color, .5s ease transform, .5s ease opacity;
+    display: flex;
+    font-size: $line-height;
+    flex-wrap: wrap;
+    margin: 0;
+    transform: translateY(0);
+    width: 100%;
+    max-width: 100%;
+
+    .word {
+      transition: .2s ease opacity, .2s ease transform;
+      margin: 0;
+      margin-right: .5ch;
+    }
+  }
+
+  .previous {
+    position: absolute;
+    transition: .5s ease transform, .5s ease opacity;
+    color: grey;
+    transform: translateY(-100%);
+  }
+}
+
+.scrolling-textbox::-webkit-scrollbar {
+  display: none;
+}