Taevas/kanaguessr
Taevas/kanaguessr
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finish rearranging stuff

Browse source
This commit is contained in:
Taevas 2023-03-05 21:56:19 +01:00
parent d798b68848
commit 4a83856cf9
2 changed files with 85 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

67
index.css
View file

@ -31,7 +31,8 @@ p {
}
button {
margin: 5px;
margin-left: 5px;
margin-right: 5px;
min-width: 100px;
}
@ -58,11 +59,12 @@ button {
font-size: 20px;
background-color: black;
line-height: 2em;
width: 15em;
width: fit-content;
height: 2em;
border: 1px solid;
margin-top: 0em;
margin-bottom: 1em;
margin-top: 15px;
padding-left: 100px;
padding-right: 100px;
}
#user_answer {
@ -70,23 +72,37 @@ button {
}
#user_answer * {
font-size: 4vh;
font-size: 30px;
color: white;
background-color: black;
line-height: 10vh;
line-height: 75px;
border: 1px solid;
margin-top: 1em;
margin-bottom: 0px;
width: 15vh;
height: 10vh;
}
#answer_field {
width: 25vw;
width: 50px;
height: 80px;
text-align: center;
}
#submit_answer {
#answer_field {
width: 250px;
}
@media screen and (max-width: 450px) {
#user_answer * {
width: 12vw;
}
#answer_field {
width: 50vw;
}
#correct_answer {
font-size: 5vw;
height: auto;
padding: 2vw 10vw;
}
}
#submit_answer > * {
margin-top: 15px;
}
@ -105,6 +121,21 @@ button {
margin-bottom: 0px;
}
#settings {
margin-top: 10px;
}
#settings > * {
margin-top: 10px;
border: 1px solid white;
border-radius: 25px;
background-color: #171717;
}
label {
font-weight: bold;
}
#allowed {
font-size: 20px;
background-color: black;
@ -117,12 +148,12 @@ button {
}
#misc {
font-size: 20px;
background-color: black;
line-height: 2em;
width: 20em;
height: 2em;
width: fit-content;
padding: 5px;
border: 1px solid;
margin-top: 10px;
margin-top: 15px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}

42
index.html
View file

@ -32,13 +32,43 @@
</div>
</div>
</div>
<div class="container" id="allowed">
<div class="form-check-inline"><label for="h" class="form-check-label" style="color: red"><input type="checkbox" class="form-check-input" id="h" checked>hiragana</label></div>
<div class="form-check-inline"><label for="k" class="form-check-label" style="color: green"><input type="checkbox" class="form-check-input" id="k" checked=>katakana</label></div>
<div class="form-check-inline"><label for="r" class="form-check-label" style="color: blue"><input type="checkbox" class="form-check-input" id="r" checked>romaji</label></div>
<div class="row" id="settings">
<div class="col me-4 ms-4" id="allowed_questions">
<p>Guess:</p>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="hq" checked>
<label for="hq" class="form-check-label" style="color: red">hiragana</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="kq" checked>
<label for="kq" class="form-check-label" style="color: green">katakana</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="rq" checked>
<label for="rq" class="form-check-label" style="color: blue">romaji</label>
</div>
</div>
<div class="col me-4 ms-4" id="allowed_equivalents">
<p>As:</p>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="he" checked>
<label for="he" class="form-check-label" style="color: red">hiragana</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="ke" checked>
<label for="ke" class="form-check-label" style="color: green">katakana</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="re" checked>
<label for="re" class="form-check-label" style="color: blue">romaji</label>
</div>
</div>
</div>
<div class="container" id="misc">
<div class="form-check-inline"><label for="auto" class="form-check-label" style="color: white"><input type="checkbox" class="form-check-input" id="auto">automatically go to next after answer</label></div>
<div class="row" id="misc">
<div>
<input type="checkbox" class="form-check-input" id="auto">
<label for="auto" class="form-check-label" style="color: white">automatically go to next after answer</label>
</div>
</div>
</div>
</body>