Skip to content

Commit c95b707

Browse files
SquareScreamYTSquareScreamYT
committed
test
1 parent 5d879e5 commit c95b707

File tree

5 files changed

+309
-0
lines changed

5 files changed

+309
-0
lines changed

‎lerafuga/data/varge.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
[
2+
{
3+
"ros": {
4+
"color": "red",
5+
"options": ["roza", "rol", "ruga"]
6+
}
7+
},
8+
{
9+
"kjero": {
10+
"color": "yellow",
11+
"options": ["karo", "kot", "ker"]
12+
}
13+
},
14+
{
15+
"blau": {
16+
"color": "blue",
17+
"options": ["blin", "ber", "bira"]
18+
}
19+
}
20+
]

‎lerafuga/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Viossa Lerafuga</title>
7+
<meta http-equiv='cache-control' content='no-cache'>
8+
<html lang="en" xml:lang="en" xmlns= "http://www.w3.org/1999/xhtml">
9+
<meta http-equiv='expires' content='0'>
10+
<meta http-equiv='pragma' content='no-cache'>
11+
<meta name="google" content="notranslate">
12+
<meta http-equiv="Content-Language" content="en">
13+
<link href="style.css" rel="stylesheet" type="text/css" />
14+
<!-- discord link thing -->
15+
<meta property="og:title" content="Viossa Lerafuga" />
16+
<meta property="og:type" content="website" />
17+
<meta property="og:url" content="https://sq.is-a.dev/viossa/lerafuga" />
18+
<meta name="theme-color" content="#22d3ee">
19+
</head>
20+
<body>
21+
<div style="display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;">
22+
<h1>Viossa Lerafuga!</h1>
23+
24+
<select id="color-scheme" onchange="changeColorScheme()">
25+
<option value="light">shiro</option>
26+
<option value="dark">kuro</option>
27+
</select>
28+
</div>
29+
30+
<div class="container">
31+
<div class="cardbutton" onclick="redirect('varge')">
32+
<p>Varge</p>
33+
</div>
34+
</div>
35+
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

‎lerafuga/script.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
function changeColorScheme() {
2+
const selectedScheme = document.getElementById("color-scheme").value;
3+
document.body.className = selectedScheme + "-scheme";
4+
localStorage.setItem("colorScheme", selectedScheme);
5+
}
6+
7+
function loadColorScheme() {
8+
const savedScheme = localStorage.getItem("colorScheme");
9+
if (savedScheme) {
10+
document.body.className = savedScheme + "-scheme";
11+
document.getElementById("color-scheme").value = savedScheme;
12+
}
13+
}
14+
15+
function redirect(page) {
16+
window.location.href = page;
17+
}
18+
19+
let currentWordIndex = 0;
20+
let words = [];
21+
22+
async function loadWords() {
23+
const response = await fetch('data/varge.json');
24+
const data = await response.json();
25+
words = data;
26+
showWord();
27+
}
28+
29+
function shuffleArray(array) {
30+
for (let i = array.length - 1; i > 0; i--) {
31+
const j = Math.floor(Math.random() * (i + 1));
32+
[array[i], array[j]] = [array[j], array[i]];
33+
}
34+
return array;
35+
}
36+
37+
function showWord() {
38+
const word = Object.entries(words[currentWordIndex])[0];
39+
const [correctWord, data] = word;
40+
41+
const questionDiv = document.getElementById('question');
42+
questionDiv.style.backgroundColor = data.color;
43+
44+
const optionsDiv = document.getElementById('options');
45+
optionsDiv.innerHTML = '';
46+
47+
let options = [correctWord, ...data.options];
48+
options = shuffleArray(options);
49+
50+
options.forEach(option => {
51+
const button = document.createElement('button');
52+
button.className = 'option-button';
53+
button.textContent = option;
54+
button.onclick = () => checkAnswer(option, correctWord);
55+
optionsDiv.appendChild(button);
56+
});
57+
}
58+
59+
function checkAnswer(selected, correct) {
60+
if (selected === correct) {
61+
currentWordIndex = (currentWordIndex + 1) % words.length;
62+
showWord();
63+
}
64+
}
65+
66+
document.addEventListener('DOMContentLoaded', () => {
67+
loadColorScheme();
68+
loadWords();
69+
});

‎lerafuga/style.css

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
@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');
2+
@font-face {
3+
font-family: 'SF Pro Rounded';
4+
font-style: normal;
5+
font-weight: 400;
6+
src: url("https://raw.githubusercontent.com/SquareScreamYT/sf-fonts/master/SF-Pro-Rounded-Light.otf") format("opentype");
7+
}
8+
9+
:root {
10+
--bg-color: #f8fafc;
11+
--text-color: #0f172a;
12+
--bg-color-dark: #f1f5f9;
13+
--bg-color-darker: #e2e8f0;
14+
--bg-color-darkest: #cbd5e0;
15+
--border-color: #64748b;
16+
--border-color-dark: #475569;
17+
--link-color: #818cf8;
18+
}
19+
20+
.light-scheme {
21+
--bg-color: #f8fafc;
22+
--text-color: #0f172a;
23+
--bg-color-dark: #f1f5f9;
24+
--bg-color-darker: #e2e8f0;
25+
--bg-color-darkest: #cbd5e0;
26+
--border-color: #64748b;
27+
--border-color-dark: #475569;
28+
--link-color: #818cf8;
29+
}
30+
.dark-scheme {
31+
--bg-color: #0f172a;
32+
--text-color: #f8fafc;
33+
--bg-color-dark: #1e293b;
34+
--bg-color-darker: #334155;
35+
--bg-color-darkest: #4c586b;
36+
--border-color: #64748b;
37+
--border-color-dark: #94a3b8;
38+
--link-color: #818cf8;
39+
}
40+
41+
select {
42+
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;
43+
appearance: none;
44+
-webkit-appearance: none;
45+
-moz-appearance: none;
46+
background-color: var(--bg-color-darker);
47+
color: var(--text-color);
48+
padding: 10px;
49+
font-size: 1em;
50+
border: none;
51+
border-radius: 25px;
52+
cursor: pointer;
53+
outline: none;
54+
width: 70px;
55+
text-align: center;
56+
display: inline-block;
57+
box-shadow: none;
58+
transition: background-color 0.3s ease;
59+
margin-left: 10px;
60+
margin-top: 10px;
61+
}
62+
select:hover {
63+
background-color: var(--bg-color-darkest);
64+
}
65+
select:focus {
66+
outline: none;
67+
}
68+
69+
html {
70+
height: 100%;
71+
width: 100%;
72+
overflow-x:hidden
73+
}
74+
75+
body {
76+
background-color: var(--bg-color);
77+
color: var(--text-color);
78+
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;
79+
margin-left: 10vw;
80+
margin-right: 10vw;
81+
margin-top: 20px;
82+
margin-bottom: 20px;
83+
padding: 2vh;
84+
transition: background-color 0.3s ease;
85+
height: calc(100vh - 20px);
86+
display: flex;
87+
flex-direction: column;
88+
box-sizing: border-box;
89+
}
90+
91+
h1, p {
92+
color: var(--text-color);
93+
margin-bottom: 20px;
94+
}
95+
96+
.container {
97+
flex-grow: 1;
98+
max-height: 80vh;
99+
width: 100%;
100+
margin-top: 20px;
101+
background-color: var(--bg-color-dark);
102+
border-radius: 30px;
103+
padding: 20px;
104+
box-sizing: border-box;
105+
transition: background-color 0.3s ease;
106+
}
107+
108+
.cardbutton {
109+
height: 50px;
110+
background-color: var(--bg-color-darker);
111+
border-radius: 15px;
112+
padding: 20px;
113+
box-sizing: border-box;
114+
transition: background-color 0.3s ease;
115+
}
116+
.cardbutton:hover {
117+
background-color: var(--bg-color-darkest);
118+
}
119+
120+
.flashcard {
121+
display: flex;
122+
flex-direction: column;
123+
align-items: center;
124+
gap: 20px;
125+
}
126+
127+
.question {
128+
font-size: 2em;
129+
padding: 20px;
130+
border-radius: 10px;
131+
margin-bottom: 20px;
132+
text-align: center;
133+
}
134+
135+
.options {
136+
display: flex;
137+
gap: 10px;
138+
flex-wrap: wrap;
139+
justify-content: center;
140+
}
141+
142+
.option-button {
143+
padding: 10px 20px;
144+
border: none;
145+
border-radius: 8px;
146+
background-color: var(--bg-color-darker);
147+
color: var(--text-color);
148+
cursor: pointer;
149+
font-family: inherit;
150+
font-size: 1.1em;
151+
transition: background-color 0.3s;
152+
}
153+
154+
.option-button:hover {
155+
background-color: var(--bg-color-darkest);
156+
}

‎lerafuga/varge.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Viossa Lerafuga - Varge</title>
7+
<link href="style.css" rel="stylesheet" type="text/css" />
8+
</head>
9+
<body>
10+
<div style="display: flex; justify-content: space-between; align-items: center;">
11+
<h1>Varge</h1>
12+
<select id="color-scheme" onchange="changeColorScheme()">
13+
<option value="light">shiro</option>
14+
<option value="dark">kuro</option>
15+
</select>
16+
</div>
17+
18+
<div class="container">
19+
<div id="flashcard" class="flashcard">
20+
<div id="question" class="question"></div>
21+
<div id="options" class="options"></div>
22+
</div>
23+
</div>
24+
<script src="script.js"></script>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)