New color scheme and improved linebreaks

This commit is contained in:
root 2023-06-03 11:22:06 +02:00
parent 67165256fe
commit 7a21696822
4 changed files with 70 additions and 28 deletions

View File

@ -1,5 +1,13 @@
[main]
title = A oder B
separator = oder
separator_char = ;
timezone = Europe/Berlin
mail = abgame@21x9.org
[i18n]
lang = de
more = Mehr Fragen
title = A oder B
separator = oder
questions_prefix = Es gibt derzeit
questions_suffix = Fragen.
send_questions = Einreichen!

12
game.py
View File

@ -61,8 +61,14 @@ def log_the_request(response):
@app.route("/")
def hello():
title = config.get('main', 'title')
separator = config.get('main', 'separator')
lang = config.get('i18n', 'lang')
title = config.get('i18n', 'title')
mail = config.get('main', 'mail')
more = config.get('i18n', 'more')
questions_prefix = config.get('i18n', 'questions_prefix')
questions_suffix = config.get('i18n', 'questions_suffix')
send_questions = config.get('i18n', 'send_questions')
separator = config.get('i18n', 'separator')
separator_char = config.get('main', 'separator_char')
ablines = []
@ -84,7 +90,7 @@ def hello():
with open("ab.txt", "r") as f:
num_lines = sum(1 for _ in f)
return render_template('index.html', title=title, separator=separator, content=ablines, num_lines=num_lines, epoch=epoch)
return render_template('index.html', title=title, separator=separator, content=ablines, num_lines=num_lines, epoch=epoch, mailto=mail, more=more, questions_prefix=questions_prefix, questions_suffix=questions_suffix, send_questions=send_questions, lang=lang)
def getContent():
lines = [a.strip() for a in open("ab.txt", "r").readlines()]

View File

@ -1,32 +1,36 @@
body {
font-family: 'Courier New', Courier, monospace;
background-color: rgb(19, 21, 22);
background-color: #333333;
}
html, body {
border-color: #736b5e;
color: #e8e6e3;
border-color: #E7E5E2;
color: #E7E5E2;
}
hr {
display: none;
}
a {
color: #F7D214;
}
#header {
border-radius: 10px;
text-align: center;
width: 100%;
padding-top: 25px;
padding-bottom: 25px;
background-color: rgb(79, 86, 89);
color: #eeeeee;
background-color: #8FA3A9;
color: #243233;
font-weight: bold;
}
#content {
min-width: 400px;
max-width: 900px;
width: 50%;
width: 65%;
margin: 0;
position: absolute;
top: 50%;
@ -42,7 +46,7 @@ hr {
align-items: center;
display: flex;
padding: 5px;
background-color: rgb(83, 97, 111);
background-color: #89A6C0;
}
.a {
@ -52,12 +56,17 @@ hr {
padding: 25px;
border-radius: 10px;
border: 1px solid transparent;
background-color: gold;
color: black;
background-color: #F7D214;
color: #243233;
font-weight: bold;
text-align:left;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
text-indent: -30px;
padding-left: 50px;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
}
.b {
@ -67,12 +76,17 @@ hr {
padding: 25px;
border-radius: 10px;
border: 1px solid transparent;
background-color: black;
color: gold;
background-color: #243233;
color: #F7D214;
font-weight: bold;
text-align:left;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
text-indent: -30px;
padding-left: 50px;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
}
input[type="radio"] {
@ -87,9 +101,9 @@ input[type="radio"] {
}
.ab input:checked + label {
background-color: cornsilk;
background-color: #B3472B;
border: 1px solid #000000;
color: #333333;
color: #E7E5E2;
}
.separator {
@ -102,6 +116,7 @@ input[type="radio"] {
display: flex;
justify-content: center;
align-items: center;
color: #E7E5E2;
}
#footer {
@ -116,7 +131,7 @@ input[type="radio"] {
border-radius: 10px;
padding-top: 25px;
padding-bottom: 25px;
color: #eeeeee;
color: #F7D214;
font-weight: bold;
}
@ -128,15 +143,28 @@ input[type="radio"] {
border-radius: 10px;
padding-top: 25px;
padding-bottom: 25px;
background-color: rgb(79, 86, 89);
color: #eeeeee;
background-color: #8FA3A9;
color: #243233;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
font-size: medium;
display: block;
cursor: pointer;
}
@media only screen and (max-width:480px) {
@media only screen and (max-width:1600px) {
#content {
min-width: 75%;
}
}
@media only screen and (max-width:1280px) {
#content {
min-width: 95%;
}
}
@media only screen and (max-width:640px) {
#content {
min-width: 95%;
transform: none;
@ -144,7 +172,7 @@ input[type="radio"] {
top: 5px;
left: 50%;
transform: translate(-50%);
}
}
#next {
min-width: 100%;

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="de">
<html lang="{{ lang }}">
<head>
<title>{{ title }}</title>
<link rel="stylesheet" type="text/css" href="/css/ab.css?t={{ epoch }}">
@ -22,19 +22,19 @@
{%- set id.value = id.value + 1 %}
<div class="ab">
<input type="radio" id="a{{ id.value }}" class="a" name="group-{{ id.value }}">
<label for="a{{ id.value }}" class="a"> A) {{ question['A'] }}</label>
<label for="a{{ id.value }}" class="a"> A)&nbsp;{{ question['A'] }}</label>
<div class="separator">{{ separator }}</div>
<input type="radio" id="b{{ id.value }}" class="b" name="group-{{ id.value }}">
<label for="b{{ id.value }}" class="b">B) {{ question['B'] }}</label>
<label for="b{{ id.value }}" class="b">B)&nbsp;{{ question['B'] }}</label>
</div>
<hr>
{%- endfor %}
<div id="footer">
<div id="questions">Es gibt derzeit {{ num_lines }} Fragen.</div>
<div id="questions">{{ questions_prefix }} {{ num_lines }} {{ questions_suffix }}<br><a href="mailto:{{ mailto }}">Einreichen!</a></div>
<div class="separator">&nbsp;</div>
<form action="/" method="get">
<input type="hidden" name="t" value="{{ epoch }}">
<button id="next" type="submit">Neue Fragen</button>
<button id="next" type="submit">{{ more }}</button>
</form>
</div>
</div>