create static

static/questions.json

@@ -0,0 +1 @@
+[[], [], [], [], [], [], [], [], []]

static/random.js

@@ -0,0 +1,89 @@
+// Funktion, um eine zufällige Frage auszuwählen
+function getRandomQuestion() {
+  randomIndex = Math.floor(Math.random() * wordLists[0].length);
+  while (usedIndices.includes(randomIndex)){
+    if (usedIndices.length != wordLists[0].length){
+      randomIndex = Math.floor(Math.random() * wordLists[0].length);
+    }
+    else {
+      usedIndices = [];
+      randomIndex = Math.floor(Math.random() * wordLists[0].length);
+    }
+  }
+
+  usedIndices.push (randomIndex)
+  const randomQuestion = wordLists.map(list => {
+    return list[randomIndex];
+  });
+
+  return randomQuestion;
+}
+
+const randomizeButton = document.getElementById("randomize-button");
+const scrollingWordsBoxes = document.querySelectorAll(".scrolling-words-box ul");
+const permQuestions = document.querySelectorAll(".perm-questions h1")
+var usedIndices = [];
+var dur = 3800;
+var run = 0;
+
+randomizeButton.addEventListener("click", function () {
+  scrollingWordsBoxes.forEach((box, index) => {
+    if (index!=0){
+    box.style.animation = `scrollUp 1.5s forwards ${-(6/(index+3))}s 3`;
+  }
+    else {
+      box.style.animation = `scrollUp 1.5s forwards 2`;
+    }
+  });
+
+  
+  permQuestions.forEach((text, index) => {
+    if (dur == 10) {
+      (index == 1) ? text.classList.remove ("fade-ani-u") : text.classList.remove ("fade-ani");
+      void text.offsetWidth;
+    }
+    else {
+      text.classList.remove ("erst");
+      void text.offsetWidth;
+      (index == 1) ? text.classList.add ("fadeIn-ani-u") : text.classList.add ("fadeIn-ani");
+    }
+    });
+  
+
+  
+
+  setTimeout(function () {
+    const randomQuestionWords = getRandomQuestion();
+
+    scrollingWordsBoxes.forEach(box => {
+      box.innerHTML = '';
+      box.classList.remove ("scroll-animating")
+      void box.offsetWidth;
+    });
+    
+
+    scrollingWordsBoxes.forEach((box, index) => {
+      const newQuestionItem = document.createElement("li");
+      newQuestionItem.textContent = randomQuestionWords[index];
+      box.appendChild(newQuestionItem);
+
+      newQuestionItem.style.opacity = 0;
+
+      permQuestions.forEach((text, index) => {
+        if (run >= 2){
+          (index == 1) ? text.classList.remove ("fadeIn-ani-u") : text.classList.remove ("fadeIn-ani");
+          (index == 1) ? text.classList.add ("fade-ani-u") : text.classList.add ("fade-ani");
+          console.log(run);
+        }
+        });
+
+
+      setTimeout(function () {
+        newQuestionItem.style.animation = "scrollUp 0.2s forwards 1";
+        box.classList.add("scroll-animating");
+      }, index * 90); 
+      dur = 10;
+    });
+  }, dur); 
+  run += 1;
+});

static/style.css

@@ -0,0 +1,308 @@
+@charset "UTF-8";
+body {
+  height: 100vh;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  background-color: #858585;
+  color: #ffff40;
+  font-family: 'Daimler CS';
+  font-weight: bold;
+  overflow-y: hidden;
+}
+
+form{
+  position: fixed;
+  width:75%;
+  bottom: 25%;
+  align-content: end;
+}
+
+a {
+  color: #ffff40;
+  font-size: 80%;
+}
+
+input[type=text] {
+  width: 100%;
+  height: 15%;
+  size: 200%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  font-size: 20px;
+  box-sizing: border-box;
+}
+
+.corner {
+  bottom:8.8%;
+  left: 93%;
+  font-size: 1rem;
+}
+
+.questionList {
+  margin-top: 20px;
+  padding-bottom: 20px;
+}
+
+.wholeQuestion {
+  margin: 10px 0;
+}
+
+.questionListContainer {
+  height: 50%;
+  font-size: 25px;
+  margin-bottom: 30%;
+  margin-top: 20%;
+  overflow-y: auto;
+  width: 75%;
+}
+
+.scrolling-words-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  /* Hinzugefügte Eigenschaft für den Zeilenumbruch */
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  /* Geänderte Ausrichtung, um die Divs in der Mitte auszurichten */
+  font-size: 2rem;
+  font-weight: 900;
+}
+
+.scrolling-words-box {
+  height: 3rem;
+  margin: 0.3125rem;
+  /* Geringfügige Anpassung des Abstands zwischen den Divs */
+  overflow: hidden;
+}
+
+.scrolling-words-box ul {
+  margin: 0;
+  padding: 0;
+}
+
+.scrolling-words-box ul li {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  height: 2.5rem;
+  list-style: none;
+}
+
+.scroll-animating {
+  font-size: 160%;
+  /* Schriftgröße um 50% vergrößern */
+  -webkit-transition: font-size 0.4s;
+  transition: font-size 0.4s;
+  /* Übergangseffekt für Schriftgröße hinzufügen */
+  -webkit-transition-delay: 0.7s;
+          transition-delay: 0.7s;
+}
+
+
+.title {
+  -webkit-text-stroke: 0.5px #ffff40;
+  font-size: 2.5rem;
+  color: transparent;
+  position: fixed;
+  /* Positionierung fixieren */
+  top: 40px;
+  /* Abstand von unten */
+  left: 50%;
+  /* Horizontal in der Mitte */
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  /* Zurücksetzen auf die Mitte */
+  font-weight: bolder;
+  opacity: 1;
+  text-decoration: none;
+}
+
+h3 {
+  font-size: 1.3rem;
+  position: fixed;
+  /* Positionierung fixieren */
+  bottom: 20px;
+  /* Abstand von unten */
+  left: 50%;
+  /* Horizontal in der Mitte */
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  /* Zurücksetzen auf die Mitte */
+  font-weight: lighter;
+}
+
+button {
+  background-color: transparent;
+  border: 2px solid #ffff40;
+  /* Farbe der Schrift */
+  color: #ffff40;
+  /* Farbe der Schrift */
+  border-radius: 20px;
+  /* Abgerundete Kontur */
+  padding: 10px 20px;
+  /* Größe des Buttons anpassen */
+  font-size: 1.5rem;
+  /* Schriftgröße anpassen */
+  cursor: pointer;
+  position: fixed;
+  /* Positionierung fixieren */
+  bottom: 100px;
+  /* Abstand von unten */
+  left: 50%;
+  /* Horizontal in der Mitte */
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  /* Zurücksetzen auf die Mitte */
+  -webkit-transition: background-color 0.3s, color 0.3s;
+  transition: background-color 0.3s, color 0.3s;
+  /* Übergangseffekt */
+  opacity: 1;
+}
+
+button:hover {
+  background-color: #ffff40;
+  /* Hintergrundfarbe beim Überfahren mit der Maus */
+  color: #000;
+  /* Schriftfarbe beim Überfahren mit der Maus */
+}
+
+h1 {
+  position: fixed;
+  /* Positionierung fixieren */
+  top: 145px;
+  /* Abstand von unten */
+  left: 50%;
+  /* Horizontal in der Mitte */
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  /* Zurücksetzen auf die Mitte */
+}
+
+.lower {
+  top: 240px;
+}
+
+.erst {
+  opacity: 0 !important;
+}
+
+.fadeIn-ani {
+  -webkit-animation: fadeIn 4s forwards;
+          animation: fadeIn 4s forwards;
+}
+
+.fadeIn-ani-u {
+  opacity: 0;
+  -webkit-animation: fadeIn 4s 0.1s forwards;
+          animation: fadeIn 4s 0.1s forwards;
+}
+
+.fade-ani {
+  -webkit-animation: fadeOutIn 1s forwards;
+          animation: fadeOutIn 1s forwards;
+}
+
+.fade-ani-u {
+  -webkit-animation: fadeOutIn 1s 0.1s forwards;
+          animation: fadeOutIn 1s 0.1s forwards;
+}
+
+@-webkit-keyframes scrollUp {
+  from {
+    opacity: 1;
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+
+@keyframes scrollUp {
+  from {
+    opacity: 1;
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+
+@-webkit-keyframes fadeOutIn {
+  0% {
+    opacity: 1;
+  }
+  20% {
+    opacity: 0;
+  }
+  70% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutIn {
+  0% {
+    opacity: 1;
+  }
+  20% {
+    opacity: 0;
+  }
+  70% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  94% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  94% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/*# sourceMappingURL={{ url_for ("static", filename="style.css.map") }} */

static/style.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "style.scss"
+    ],
+    "names": [],
+    "file": "style.css"
+}