added cookie notification

This commit is contained in:
Ellpeck 2018-12-30 16:38:14 +01:00
parent b92948525b
commit 5602011629
5 changed files with 39 additions and 4 deletions

View file

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

View file

@ -79,6 +79,9 @@
</div> </div>
</div> </div>
<!-- Cookie notification -->
<script src="scripts/cookies.js"></script>
<!-- Projects --> <!-- Projects -->
<a class="anchor" id="projects"></a> <a class="anchor" id="projects"></a>
<div class="list-display rounded"> <div class="list-display rounded">

13
scripts/cookies.js Normal file
View file

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

View file

@ -1,11 +1,13 @@
let dark = getCookie("dark") === "true"; let dark = getCookie("dark") === "true";
let cookieNotification = getCookie("notification") !== "true";
if (dark) { if (dark) {
document.write('<link rel="stylesheet" href="dark.css">') document.write('<link rel="stylesheet" href="dark.css">')
} }
$(function () { $(function () {
let openModals = function (hash) { let openModals = function (hash) {
if (hash.length > 1) { if (hash && hash.length > 1) {
if (hash === '#impressum') { if (hash === '#impressum') {
$('#impressum-modal').modal('show'); $('#impressum-modal').modal('show');
} }
@ -27,9 +29,8 @@ $(function () {
let mode = $('#dark-mode'); let mode = $('#dark-mode');
mode.prop('checked', dark); mode.prop('checked', dark);
mode.on('click', function () { 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(); location.reload();
}); });
}); });
@ -41,4 +42,10 @@ function getCookie(key) {
let start = c.indexOf(key + "=") + key.length + 1; let start = c.indexOf(key + "=") + key.length + 1;
let end = c.indexOf(";", start); let end = c.indexOf(";", start);
return c.substring(start, end < 0 ? c.length : end); 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();
} }

View file

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