Improved help

config.ini

@@ -15,7 +15,8 @@ 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.
+help_3 = Klicke/tippe außerhalb dieses Fensters oder bewege die Maus, um fortzufahren.
+help_4 = Diese Webseite zeichnet keine Daten auf und verwendet keine Cookies.
 separator = oder
 questions_prefix = Es gibt derzeit
 questions_suffix = Fragen.

game.py

@@ -95,6 +95,7 @@ def hello():
     help1 = config.get('i18n', 'help_1')
     help2 = config.get('i18n', 'help_2')
     help3 = config.get('i18n', 'help_3')
+    help4 = config.get('i18n', 'help_4')
     url = config.get('main', 'base_url')
     theme = config.get('main', 'theme')
     ablines = []
@@ -118,7 +119,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, mailtext=mailtext, help=help, help_1=help1, help_2=help2, help_3=help3)
+    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, help_4=help4)
 
 def getContent():
     lines = [a.strip() for a in open("ab.txt", "r").readlines()]

static/css/base.css

@@ -30,9 +30,10 @@ a #help {
 
 a:hover #help {
     position: absolute;
+    top: 65px;
+    left: 50%;
     height: auto;
-    width: 420px;
-    top: 75px;
+    width: 50%;
     margin: auto;
     padding: 20px;
     overflow: visible;
@@ -43,6 +44,7 @@ a:hover #help {
     border-radius: 25px;
     display: inline-block;
     text-align: center;
+    transform: translate(-50%);
 }
 
 #header {
@@ -236,7 +238,6 @@ input[type="radio"] {
 
     .toggle_label {
         min-width: 100%;
-        ;
     }
 }
 
@@ -289,6 +290,10 @@ input[type="radio"] {
     a {
         color: var(--fg-lnk) !important;
     }
+
+    a:hover #help {
+        width: 80%;
+    }
 }
 
 #toggle_checkbox {

templates/index.html

@@ -18,7 +18,7 @@
                 {{ questions_prefix }} {{ num_lines }} {{ questions_suffix }}
                 <br>
                 <a href="mailto:{{ mailto }}">{{ mailtext }}</a> - 
-                <a href="">Hilfe?
+                <a href="#">Hilfe?
                     <div id="help">
                         <strong>{{ help }}</strong>
                         <p>{{ help_1 }}</p>
@@ -31,9 +31,6 @@
                         {%- if help_4 %}
                         <p>{{ help_4 }}</p>
                         {%- endif %}
-                        {%- if help_5 %}
-                        <p>{{ help_5 }}</p>
-                        {%- endif %}
                     </div>
                 </a>
             </div>