added cookie notification

dark.css

@@ -21,4 +21,12 @@ body {
 
 .footer {
     background-color: #404142;
+}
+
+.modal-header {
+    border-bottom: 1px solid #323233;
+}
+
+.modal-content {
+    background-color: #404142;
 }

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">

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);
+    });
+}

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();
+        setCookie("dark", $(this).prop('checked'), 365);
-        date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
+        window.location.hash = "";
-        document.cookie = "dark=" + $(this).prop('checked') + ";expires=" + date.toUTCString();
         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();
 }

style.css

@@ -118,6 +118,10 @@ body {
     margin-bottom: 10px;
 }
 
+.alert {
+    margin-top: 1rem;
+}
+
 @media (min-width: 1200px) {
     .navbar {
         width: 1200px;