disclaimer

server.py

@@ -3,7 +3,8 @@ import time
 from random import shuffle, randint
 
 import sass
-from flask import render_template, send_from_directory, abort, session, jsonify, make_response, redirect, url_for
+from flask import render_template, send_from_directory, abort, session, jsonify, make_response, redirect, url_for, \
+    request
 from flask_limiter import Limiter
 from flask_limiter.util import get_remote_address
 from flask_session import Session
@@ -64,7 +65,8 @@ def index(site=None):
         page=paginated_query.get_page(),
         questions=paginated_query.get_object_list(),
         site=site_element,
-        voted=session["voted"] if "voted" in session and not config.make_cacheable else None
+        voted=session["voted"] if "voted" in session and not config.make_cacheable else None,
+        infohidden="hide" in request.cookies
     )
 
 
@@ -82,7 +84,8 @@ def question(slug):
         "detail.html",
         question=question,
         answers=answers,
-        voted=session["voted"] if "voted" in session and not config.make_cacheable else None
+        voted=session["voted"] if "voted" in session and not config.make_cacheable else None,
+        infohidden="hide" in request.cookies
     )
 
 
@@ -124,7 +127,8 @@ def quiz(difficulty):
         question=question,
         stats=session["quiz"][difficulty] if "quiz" in session else {"total": 0, "correct": 0},
         difficulty=difficulty,
-        choices=sites
+        choices=sites,
+        infohidden="hide" in request.cookies
     )
 
 

templates/base.html

@@ -40,9 +40,29 @@
     {% block body %}{% endblock %}
     <footer>
         <div><a href="https://lw1.at/i">Imprint and Privacy Policy</a></div>
+        <div ><a href="#" id="showdisclaimer">Disclaimer</a></div>
         <div><a href="https://lw1.at/" target="_blank">About me and other projects</a></div>
     </footer>
 </div>
+<div id="infowrapper"{% if infohidden %} style="display: none"{% endif %}>
+    <div>
+        <span id="closeinfo" class="close" aria-label="Close" role="button" tabindex="1">&times;</span>
+        <p>
+            This site is not affiliated with Stack Exchange, Stack Overflow or any of their family of sites.
+            Site names and logos are &copy; Stack Overflow Inc.
+            The data used to produce this page and therefore all data on this site is licensed under
+            <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA 3.0</a>.
+        </p>
+        <p>
+            The content of this website shouldn't be taken too seriously as everything got randomly generated based on
+            original questions and answers.
+        </p>
+        <footer>
+            <div><a href="https://lw1.at/i">Imprint and Privacy Policy</a></div>
+            <div><a href="https://lw1.at/" target="_blank">About me and other projects</a></div>
+        </footer>
+    </div>
+</div>
 <script src="{{ url_for('static', filename='js/app.js') }}?hash={{ git_hash }}"></script>
 <script src="{{ url_for('static', filename='js/awesomplete.min.js') }}?hash={{ git_hash }}"></script>
 

web/static/js/app.js

@@ -31,6 +31,8 @@ document.addEventListener("DOMContentLoaded", function (event) {
     var header = document.getElementsByClassName("siteheader")[0];
     var next = document.getElementById("next");
     var choices = document.getElementById("quizchoices");
+    var info = document.getElementById("infowrapper");
+    var close = document.getElementById("closeinfo");
     var selectedSite, headerimg, headertitle, entered;
 
     function toast(type, message) {
@@ -189,4 +191,11 @@ document.addEventListener("DOMContentLoaded", function (event) {
             }
         });
     }
+    close.addEventListener("click", function (ev) {
+        info.style.display = "none";
+        document.cookie = "hide = 1;secure";
+    });
+    document.getElementById("showdisclaimer").addEventListener("click", function (ev) {
+        info.style.display = "block"
+    })
 });

web/static/sass/style.scss

@@ -341,3 +341,34 @@ html.quiz {
     }
   }
 }
+
+#infowrapper {
+  position: fixed;
+  bottom: 20px;
+  right: auto;
+  left: auto;
+  width: 100%;
+  padding: 0 10px;
+  > div {
+    position: relative;
+    margin: 0 auto;
+    max-width: 130.0rem;
+    background: lightyellow;
+    padding: 25px;
+    box-shadow: 2px 2px 5px 0 rgba(50, 50, 50, 0.4);
+    p:last-of-type {
+      margin: 0;
+    }
+    .close {
+      position: absolute;
+      padding: 10px;
+      top: 0;
+      right: 0;
+      font-size: 20px;
+      cursor: pointer;
+    }
+    footer {
+      padding: 1rem 0 0;
+    }
+  }
+}