Added help and improved i18n

config.ini

@@ -11,6 +11,11 @@ theme = dark
 lang = de
 more = Weiter »»»
 title = A oder B
+mailtext = Einreichen!
+help_title = Hilfe
+help_1 = Wähle die Antworten durch Klicken oder mit der Tastatur (a/b) aus. Sobald alle Antworten ausgewählt wurden, werden nach einer kurzen Wartezeit automatisch neue Fragen geladen.
+help_2 = Möchtest du nicht alle Fragen beantworten, klicke einfach auf die Schaltfläche "Weiter" unten rechts.
+help_3 = Diese Webseite zeichnet keine Daten auf und verwendet keine Cookies.
 separator = oder
 questions_prefix = Es gibt derzeit
 questions_suffix = Fragen.

game.py

@@ -90,6 +90,11 @@ def hello():
     separator = config.get('i18n', 'separator')
     separator_char = config.get('main', 'separator_char')
     mail = config.get('main', 'mail')
+    mailtext = config.get('i18n', 'mailtext')
+    help = config.get('i18n', 'help_title')
+    help1 = config.get('i18n', 'help_1')
+    help2 = config.get('i18n', 'help_2')
+    help3 = config.get('i18n', 'help_3')
     url = config.get('main', 'base_url')
     theme = config.get('main', 'theme')
     ablines = []
@@ -113,7 +118,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, mailto=mail, more=more, questions_prefix=questions_prefix, questions_suffix=questions_suffix, send_questions=send_questions, lang=lang, url=url, desc=desc, theme=theme)
+    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, url=url, desc=desc, theme=theme, mailtext=mailtext, help=help, help_1=help1, help_2=help2, help_3=help3)
 
 def getContent():
     lines = [a.strip() for a in open("ab.txt", "r").readlines()]

static/css/base.css

@@ -17,6 +17,34 @@ a {
     color: var(--fg-lnk);
 }
 
+strong {
+    font-weight: bolder;
+    font-size: large;
+}
+
+a #help {
+    height: 0;
+    overflow: hidden;
+    text-decoration: none;
+}
+
+a:hover #help {
+    position: absolute;
+    height: auto;
+    width: 420px;
+    top: 75px;
+    margin: auto;
+    padding: 20px;
+    overflow: visible;
+    text-decoration: none;
+    background-color: var(--bg-a);
+    color: var(--fg-a);
+    border: 4px solid var(--bg);
+    border-radius: 25px;
+    display: inline-block;
+    text-align: center;
+}
+
 #header {
     border-radius: 10px;
     text-align: center;

templates/index.html

@@ -17,7 +17,25 @@
             <div id="questions">
                 {{ questions_prefix }} {{ num_lines }} {{ questions_suffix }}
                 <br>
-                <a href="mailto:{{ mailto }}">Einreichen!</a>
+                <a href="mailto:{{ mailto }}">{{ mailtext }}</a> - 
+                <a href="">Hilfe?
+                    <div id="help">
+                        <strong>{{ help }}</strong>
+                        <p>{{ help_1 }}</p>
+                        {%- if help_2 %}
+                        <p>{{ help_2 }}</p>
+                        {%- endif %}
+                        {%- if help_3 %}
+                        <p>{{ help_3 }}</p>
+                        {%- endif %}
+                        {%- if help_4 %}
+                        <p>{{ help_4 }}</p>
+                        {%- endif %}
+                        {%- if help_5 %}
+                        <p>{{ help_5 }}</p>
+                        {%- endif %}
+                    </div>
+                </a>
             </div>
 {% include 'toggle.html' %}            
             <form action="/" method="get">