From 56020116299565de397e2ecc59d4cc56b3db0473 Mon Sep 17 00:00:00 2001
From: Ellpeck <megamaximal@gmail.com>
Date: Sun, 30 Dec 2018 16:38:14 +0100
Subject: [PATCH] added cookie notification

---
 dark.css           |  8 ++++++++
 index.html         |  3 +++
 scripts/cookies.js | 13 +++++++++++++
 scripts/main.js    | 15 +++++++++++----
 style.css          |  4 ++++
 5 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 scripts/cookies.js

diff --git a/dark.css b/dark.css
index 44b993c..70ce8f3 100644
--- a/dark.css
+++ b/dark.css
@@ -21,4 +21,12 @@ body {
 
 .footer {
     background-color: #404142;
+}
+
+.modal-header {
+    border-bottom: 1px solid #323233;
+}
+
+.modal-content {
+    background-color: #404142;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 397e2ea..06c601d 100644
--- a/index.html
+++ b/index.html
@@ -79,6 +79,9 @@
             </div>
         </div>
 
+        <!-- Cookie notification -->
+        <script src="scripts/cookies.js"></script>
+
         <!-- Projects -->
         <a class="anchor" id="projects"></a>
         <div class="list-display rounded">
diff --git a/scripts/cookies.js b/scripts/cookies.js
new file mode 100644
index 0000000..05e2553
--- /dev/null
+++ b/scripts/cookies.js
@@ -0,0 +1,13 @@
+if (cookieNotification) {
+    let notif = "";
+    notif += '<div class="alert alert-danger alert-dismissible fade show" role="alert">';
+    notif += "This site uses <strong>cookies</strong> for the dark mode toggle. It only tracks if you have the dark mode enabled or not, and if you've dismissed this information before, so there's really not much else to say. Have a nice day!";
+    notif += '<button type="button" class="close" data-dismiss="alert" id="notif-close">';
+    notif += '<span>&times;</span>';
+    notif += '</button></div>';
+    document.write(notif);
+
+    $("#notif-close").on("click", function () {
+        setCookie("notification", "true", 365);
+    });
+}
\ No newline at end of file
diff --git a/scripts/main.js b/scripts/main.js
index 58c952e..b61b302 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -1,11 +1,13 @@
 let dark = getCookie("dark") === "true";
+let cookieNotification = getCookie("notification") !== "true";
+
 if (dark) {
     document.write('<link rel="stylesheet" href="dark.css">')
 }
 
 $(function () {
     let openModals = function (hash) {
-        if (hash.length > 1) {
+        if (hash && hash.length > 1) {
             if (hash === '#impressum') {
                 $('#impressum-modal').modal('show');
             }
@@ -27,9 +29,8 @@ $(function () {
     let mode = $('#dark-mode');
     mode.prop('checked', dark);
     mode.on('click', function () {
-        var date = new Date();
-        date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
-        document.cookie = "dark=" + $(this).prop('checked') + ";expires=" + date.toUTCString();
+        setCookie("dark", $(this).prop('checked'), 365);
+        window.location.hash = "";
         location.reload();
     });
 });
@@ -41,4 +42,10 @@ function getCookie(key) {
     let start = c.indexOf(key + "=") + key.length + 1;
     let end = c.indexOf(";", start);
     return c.substring(start, end < 0 ? c.length : end);
+}
+
+function setCookie(key, value, days) {
+    var date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    document.cookie = key + "=" + value + "; expires=" + date.toUTCString();
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index 61e5b9f..a311ac9 100644
--- a/style.css
+++ b/style.css
@@ -118,6 +118,10 @@ body {
     margin-bottom: 10px;
 }
 
+.alert {
+    margin-top: 1rem;
+}
+
 @media (min-width: 1200px) {
     .navbar {
         width: 1200px;