New color scheme and improved linebreaks

config.ini

@@ -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!

game.py

@@ -61,8 +61,14 @@ def log_the_request(response):
 
 @app.route("/")
 def hello():
-    title = config.get('main', 'title')
+    lang = config.get('i18n', 'lang')
-    separator = config.get('main', 'separator')
+    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()]

static/css/ab.css

@@ -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;
+    border-color: #E7E5E2;
-    color: #e8e6e3;
+    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);
+    background-color: #8FA3A9;
-    color: #eeeeee;
+    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;
+    background-color: #F7D214;
-    color: black;
+    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;
+    background-color: #243233;
-    color: gold;
+    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);
+    background-color: #8FA3A9;
-    color: #eeeeee;
+    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;

templates/index.html

@@ -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>