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;