added privacy message

private/js/modules/privacy.js

@@ -0,0 +1,33 @@
+$(function() {
+    var $body = $('body');
+    var $privacy_message = $('#privacy-message');
+
+    var cookie_name = 'tracking-accepted';
+
+    window.privacy_accepted = getCookie(cookie_name);
+
+    if (window.privacy_accepted === null) {
+        $privacy_message.removeAttr('style');
+
+        $body.on('click', '.privacy_action--accept', function(event) {
+            event.preventDefault();
+            setCookie(cookie_name, true, 360);
+            $privacy_message.remove();
+            $body.trigger('enable_tracking');
+        });
+
+        $body.on('click', '.privacy_action--decline', function(event) {
+            event.preventDefault();
+            setCookie(cookie_name, false, 360);
+            $privacy_message.remove();
+        });
+
+        $body.on('click', '.privacy_action--close', function(event) {
+            event.preventDefault();
+            $privacy_message.remove();
+        });
+    } else {
+        window.privacy_accepted = window.privacy_accepted === 'true';
+        $privacy_message.remove();
+    }
+});

private/scss/main.scss

@@ -19,6 +19,7 @@
 @import "modules/_content.scss";
 @import "modules/_admin_editor.scss";
 @import "modules/_control-panel.scss";
+@import "modules/_privacy.scss";
 @import "modules/plugins/_quote.scss";
 @import "modules/plugins/_slider.scss";
 @import "modules/plugins/_section.scss";
@@ -36,4 +37,4 @@
 @import "modules/plugins/_highlight_list.scss";
 @import "modules/plugins/_timetable.scss";
 @import "modules/plugins/_reference_list.scss";
-@import "modules/plugins/_form.scss";
+@import "modules/plugins/_form.scss";

private/scss/modules/_privacy.scss

@@ -0,0 +1,103 @@
+#privacy-message {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba($white, 0.9);
+  z-index: 10;
+  padding: em(20px) em(60px);
+  @media screen and (max-width: $large_breakpoint) {
+    padding: em(20px);
+  }
+}
+
+.privacy-message__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: em(60px);
+  height: 100%;
+  transform: none;
+  transition: transform 0.3s;
+  &:before, &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 2px;
+    margin-top: -1px;
+    margin-left: em(-10px);
+    width: em(20px);
+    background: $black;
+    transform: rotate(45deg);
+  }
+  &:after {
+    transform: rotate(-45deg);
+  }
+  &:hover {
+    transform: scale(1.1);
+  }
+  @media screen and (max-width: $large_breakpoint) {
+    height: em(60px);
+    &:before, &:after {
+      height: 1px;
+      margin-top: 0;
+    }
+  }
+}
+
+.privacy-message__frame {
+  max-width: em(1200px);
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+  padding-right: em(400px);
+  p {
+    margin: 0;
+    color: $black;
+    font-size: em(14px);
+    padding-right: em(40px);
+    line-height: 1.4;
+    a {
+      color: $green;
+      transition: color 0.3s;
+      &:hover {
+        color: $black;
+      }
+    }
+  }
+  @media screen and (max-width: $large_breakpoint) {
+    padding-right: 0;
+  }
+}
+
+.privacy-message__actions {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 100%;
+  max-width: em(400px);
+  font-size: 0;
+  transform: translateY(-50%);
+  .button {
+    display: inline-block;
+    width: 48%;
+    &:first-child {
+      margin-right: 4%;
+    }
+  }
+  @media screen and (max-width: $large_breakpoint) {
+    position: relative;
+    margin-top: em(20px);
+    transform: none;
+  }
+  @media screen and (max-width: $small_breakpoint) {
+    .button {
+      width: 100%;
+      &:first-child {
+        margin-bottom: em(10px);
+      }
+    }
+  }
+}

private/scss/modules/plugins/_form.scss

@@ -59,6 +59,7 @@
   text-align: center;
   font-size: em(16px);
   text-transform: uppercase;
+  text-decoration: none;
   background: $green;
   border-radius: 0;
   color: $white;

src/project/templates/main.html

@@ -167,6 +167,30 @@
         </div>
     </div>
 
+    <div id="privacy-message" style="display: none;">
+        <div class="privacy-message__frame">
+            <p>
+                {% page_url 'imprint' as privacy_url %}
+                {% blocktrans with privacy_url=privacy_url %}
+                    Um diese Webseite optimal gestalten und fortlaufend verbessern zu können, verwenden wir Cookies.
+                    Weitere Informationen finden Sie in unserer
+                    <a href="{{ privacy_url }}">Datenschutzerklärung im Impressum</a>.
+                {% endblocktrans %}
+            </p>
+            <div class="privacy-message__actions">
+                <a href="#" class="button button--small button--ghost privacy_action--decline">
+                    <span class="button__icon">{% include 'project/assets/close.svg' %}</span>
+                    <span class="button__text">{% trans 'Ablehnen' %}</span>
+                </a>
+                <a href="#" class="button button--small privacy_action--accept">
+                    <span class="button__icon">{% include 'project/assets/tick.svg' %}</span>
+                    <span class="button__text">{% trans 'Akzeptieren' %}</span>
+                </a>
+            </div>
+        </div>
+        <a href="#" class="privacy-message__close privacy_action--close"></a>
+    </div>
+
     <script type="text/javascript" src="{% static 'js/lib.js' %}"></script>
     <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
 
@@ -174,5 +198,35 @@
 
     {% render_block "js" %}
     {{ ALDRYN_SNAKE.render_tail }}
+
+    <script>
+      $(function() {
+        var init_google_analytics = function() {
+          (function(i, s, o, g, r, a, m) {
+            i['GoogleAnalyticsObject'] = r;
+            i[r] = i[r] || function() {
+              (i[r].q = i[r].q || []).push(arguments)
+            }, i[r].l = 1 * new Date();
+            a = s.createElement(o),
+              m = s.getElementsByTagName(o)[0];
+            a.async = 1;
+            a.src = g;
+            m.parentNode.insertBefore(a, m)
+          })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+
+          ga('create', 'UA-116863155-1', 'auto');
+          ga('set', 'anonymizeIp', true);
+          ga('send', 'pageview');
+        };
+
+        if (window.privacy_accepted) {
+          init_google_analytics();
+        }
+
+        $('body').on('enable_tracking', function() {
+          init_google_analytics();
+        });
+      });
+    </script>
 </body>
 </html>