test

SquareScreamYT · Nov 11, 2024 · c95b707 · c95b707
1 parent 5d879e5
commit c95b707
Show file tree

Hide file tree

Showing 5 changed files with 309 additions and 0 deletions.
diff --git a/lerafuga/data/varge.json b/lerafuga/data/varge.json
@@ -0,0 +1,20 @@
+[
+  {
+    "ros": {
+      "color": "red",
+      "options": ["roza", "rol", "ruga"]
+    }
+  },
+  {
+    "kjero": {
+      "color": "yellow",
+      "options": ["karo", "kot", "ker"]
+    }
+  },
+  {
+    "blau": {
+      "color": "blue",
+      "options": ["blin", "ber", "bira"]
+    }
+  }
+]
diff --git a/lerafuga/index.html b/lerafuga/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Viossa Lerafuga</title>
+  <meta http-equiv='cache-control' content='no-cache'> 
+  <html lang="en" xml:lang="en" xmlns= "http://www.w3.org/1999/xhtml">
+  <meta http-equiv='expires' content='0'> 
+  <meta http-equiv='pragma' content='no-cache'>
+  <meta name="google" content="notranslate">
+  <meta http-equiv="Content-Language" content="en">
+  <link href="style.css" rel="stylesheet" type="text/css" />
+  <!-- discord link thing -->
+  <meta property="og:title" content="Viossa Lerafuga" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://sq.is-a.dev/viossa/lerafuga" />
+  <meta name="theme-color" content="#22d3ee">
+</head>
+<body>
+  <div style="display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;">
+    <h1>Viossa Lerafuga!</h1>
+
+    <select id="color-scheme" onchange="changeColorScheme()">
+      <option value="light">shiro</option>
+      <option value="dark">kuro</option>
+    </select>
+  </div>
+
+  <div class="container">
+    <div class="cardbutton" onclick="redirect('varge')">
+      <p>Varge</p>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/lerafuga/script.js b/lerafuga/script.js
@@ -0,0 +1,69 @@
+function changeColorScheme() {
+  const selectedScheme = document.getElementById("color-scheme").value;
+  document.body.className = selectedScheme + "-scheme";
+  localStorage.setItem("colorScheme", selectedScheme);
+}
+
+function loadColorScheme() {
+  const savedScheme = localStorage.getItem("colorScheme");
+  if (savedScheme) {
+    document.body.className = savedScheme + "-scheme";
+    document.getElementById("color-scheme").value = savedScheme;
+  }
+}
+
+function redirect(page) {
+  window.location.href = page;
+}
+
+let currentWordIndex = 0;
+let words = [];
+
+async function loadWords() {
+  const response = await fetch('data/varge.json');
+  const data = await response.json();
+  words = data;
+  showWord();
+}
+
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+function showWord() {
+  const word = Object.entries(words[currentWordIndex])[0];
+  const [correctWord, data] = word;
+
+  const questionDiv = document.getElementById('question');
+  questionDiv.style.backgroundColor = data.color;
+
+  const optionsDiv = document.getElementById('options');
+  optionsDiv.innerHTML = '';
+
+  let options = [correctWord, ...data.options];
+  options = shuffleArray(options);
+
+  options.forEach(option => {
+    const button = document.createElement('button');
+    button.className = 'option-button';
+    button.textContent = option;
+    button.onclick = () => checkAnswer(option, correctWord);
+    optionsDiv.appendChild(button);
+  });
+}
+
+function checkAnswer(selected, correct) {
+  if (selected === correct) {
+    currentWordIndex = (currentWordIndex + 1) % words.length;
+    showWord();
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  loadColorScheme();
+  loadWords();
+});
diff --git a/lerafuga/style.css b/lerafuga/style.css
@@ -0,0 +1,156 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lato:wght@300&family=Noto+Color+Emoji:wght@400&display=swap');
+@font-face {
+  font-family: 'SF Pro Rounded';
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://raw.githubusercontent.com/SquareScreamYT/sf-fonts/master/SF-Pro-Rounded-Light.otf") format("opentype");
+}
+
+:root {
+  --bg-color: #f8fafc;
+  --text-color: #0f172a;
+  --bg-color-dark: #f1f5f9;
+  --bg-color-darker: #e2e8f0;
+  --bg-color-darkest: #cbd5e0;
+  --border-color: #64748b;
+  --border-color-dark: #475569;
+  --link-color: #818cf8;
+}
+
+.light-scheme {
+  --bg-color: #f8fafc;
+  --text-color: #0f172a;
+  --bg-color-dark: #f1f5f9;
+  --bg-color-darker: #e2e8f0;
+  --bg-color-darkest: #cbd5e0;
+  --border-color: #64748b;
+  --border-color-dark: #475569;
+  --link-color: #818cf8;
+}
+.dark-scheme {
+  --bg-color: #0f172a;
+  --text-color: #f8fafc;
+  --bg-color-dark: #1e293b;
+  --bg-color-darker: #334155;
+  --bg-color-darkest: #4c586b;
+  --border-color: #64748b;
+  --border-color-dark: #94a3b8;
+  --link-color: #818cf8;
+}
+
+select {
+  font-family: "Nunito", "SF Pro Rounded", "Apple Color Emoji", "Noto Color Emoji", "Lato", system-ui, -apple-system, Roboto, Oxygen, Ubuntu, Cantarell, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif, monospace;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: var(--bg-color-darker);
+  color: var(--text-color);
+  padding: 10px;
+  font-size: 1em;
+  border: none;
+  border-radius: 25px;
+  cursor: pointer;
+  outline: none;
+  width: 70px;
+  text-align: center;
+  display: inline-block;
+  box-shadow: none;
+  transition: background-color 0.3s ease;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+select:hover {
+  background-color: var(--bg-color-darkest);
+}
+select:focus {
+  outline: none;
+}
+
+html {
+  height: 100%;
+  width: 100%;
+  overflow-x:hidden
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-family: "Nunito", "SF Pro Rounded", "Apple Color Emoji", "Noto Color Emoji", "Lato", system-ui, -apple-system, Roboto, Oxygen, Ubuntu, Cantarell, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif, monospace;
+  margin-left: 10vw;
+  margin-right: 10vw;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 2vh;
+  transition: background-color 0.3s ease;
+  height: calc(100vh - 20px); 
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+h1, p {
+  color: var(--text-color);
+  margin-bottom: 20px;
+}
+
+.container {
+  flex-grow: 1;
+  max-height: 80vh;
+  width: 100%;
+  margin-top: 20px;
+  background-color: var(--bg-color-dark);
+  border-radius: 30px;
+  padding: 20px;
+  box-sizing: border-box;
+  transition: background-color 0.3s ease;
+}
+
+.cardbutton {
+  height: 50px;
+  background-color: var(--bg-color-darker);
+  border-radius: 15px;
+  padding: 20px;
+  box-sizing: border-box;
+  transition: background-color 0.3s ease;
+}
+.cardbutton:hover {
+  background-color: var(--bg-color-darkest);
+}
+
+.flashcard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.question {
+  font-size: 2em;
+  padding: 20px;
+  border-radius: 10px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.options {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.option-button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  background-color: var(--bg-color-darker);
+  color: var(--text-color);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 1.1em;
+  transition: background-color 0.3s;
+}
+
+.option-button:hover {
+  background-color: var(--bg-color-darkest);
+}
diff --git a/lerafuga/varge.html b/lerafuga/varge.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Viossa Lerafuga - Varge</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <div style="display: flex; justify-content: space-between; align-items: center;">
+    <h1>Varge</h1>
+    <select id="color-scheme" onchange="changeColorScheme()">
+      <option value="light">shiro</option>
+      <option value="dark">kuro</option>
+    </select>
+  </div>
+
+  <div class="container">
+    <div id="flashcard" class="flashcard">
+      <div id="question" class="question"></div>
+      <div id="options" class="options"></div>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>