added animations

config.ini

@@ -6,6 +6,7 @@ timezone = Europe/Berlin
 mail = abgame@21x9.org
 separator_char = ;
 theme = dark
+animations = 1
 
 [i18n]
 lang = de

game.py

@@ -98,6 +98,7 @@ def hello():
     help4 = config.get('i18n', 'help_4')
     url = config.get('main', 'base_url')
     theme = config.get('main', 'theme')
+    animations = config.get('main', 'animations')
     ablines = []
 
     now = datetime.now(tz=tz)
@@ -119,7 +120,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, help_4=help4)
+    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, animations=animations)
 
 def getContent():
     lines = [a.strip() for a in open("ab.txt", "r").readlines()]

static/css/animations.css

@@ -0,0 +1,32 @@
+
+label.a.slide {
+    animation-duration: 1s;
+    animation-name: slideinfromleft;
+    position: relative;
+}
+
+@keyframes slideinfromleft {
+    from {
+        left: -640px;
+    }
+
+    to {
+        left: 0;
+    }
+}
+
+label.b.slide {
+    animation-duration: 1s;
+    animation-name: slideinfromright;
+    position: relative;
+}
+
+@keyframes slideinfromright {
+    from {
+        left: 640px;
+    }
+
+    to {
+        left: 0;
+    }
+}

templates/base.html

@@ -12,6 +12,9 @@
     <script type="text/javascript" src="/js/shortcut.js?t={{ epoch }}"></script>
     <link rel="stylesheet" type="text/css" href="/css/base.css?t={{ epoch }}">
     <link rel="stylesheet" type="text/css" href="/css/colors.css?t={{ epoch }}">
+    {%- if animations == "1" or animations == "true" %}
+    <link rel="stylesheet" type="text/css" href="/css/animations.css?t={{ epoch }}">
+    {%- endif %}
     <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
     <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">

templates/index.html

@@ -6,10 +6,10 @@
         {%- 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" title="{{ question['A'] }}"> A)&nbsp;{{ question['A'] }}</label>
+            <label for="a{{ id.value }}" class="a slide" title="{{ question['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" title="{{ question['B'] }}">B)&nbsp;{{ question['B'] }}</label>
+            <label for="b{{ id.value }}" class="b slide" title="{{ question['B'] }}">B)&nbsp;{{ question['B'] }}</label>
         </div>
         <hr>
         {%- endfor %}