diff --git a/assets/images/background-1990.gif b/assets/images/background-1990.gif new file mode 100644 index 0000000..bc720e6 Binary files /dev/null and b/assets/images/background-1990.gif differ diff --git a/assets/js/page.js b/assets/js/page.js index 8fb6b36..9c86226 100644 --- a/assets/js/page.js +++ b/assets/js/page.js @@ -1,7 +1,10 @@ +import Cookies from 'js-cookie'; + document.addEventListener("readystatechange", event => { if(event.target.readyState === 'complete') { initOverflow(); initExternalLinks(); + initNinetiesToggle(); } }); @@ -12,6 +15,19 @@ function initOverflow() { } } +function initNinetiesToggle() { + document.querySelector('.nineties-toggle').addEventListener('click', function() { + let body = document.querySelector('body'); + if (body.classList.contains('nineties')) { + body.classList.remove('nineties'); + Cookies.remove('nineties'); + } else { + body.classList.add('nineties'); + Cookies.set('nineties', true, { sameSite: 'strict' }); + } + }) +} + function initExternalLinks() { document.querySelectorAll('a').forEach(elem => { if(isExternalURL(elem.getAttribute('href'))) { diff --git a/assets/scss/base.scss b/assets/scss/base.scss index 9055055..75bfb22 100644 --- a/assets/scss/base.scss +++ b/assets/scss/base.scss @@ -15,6 +15,23 @@ body { font-family: $font; height: 100%; margin: 0 10px; + + &.nineties { + color: $black; + background-image: url("../images/background-1990.gif"); + font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif; + + a{ + color: $black; + } + } + + .nineties-toggle { + position: absolute; + top: 0; + right: 0; + } + a { color: $orange; } diff --git a/package-lock.json b/package-lock.json index 180d4c0..ae2d912 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3621,6 +3621,11 @@ } } }, + "js-cookie": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.0.tgz", + "integrity": "sha512-oUbbplKuH07/XX2YD2+Q+GMiPpnVXaRz8npE7suhBH9QEkJe2W7mQ6rwuMXHue3fpfcftQwzgyvGzIHyfCSngQ==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", diff --git a/package.json b/package.json index 24cf504..63cd67e 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "lib": "lib" }, "dependencies": { - "bootstrap": "^5.1.0" + "bootstrap": "^5.1.0", + "js-cookie": "^3.0.0" }, "devDependencies": { "@symfony/webpack-encore": "^1.5.0", diff --git a/src/Controller/DefaultController.php b/src/Controller/DefaultController.php index 576bad5..fca2dc5 100644 --- a/src/Controller/DefaultController.php +++ b/src/Controller/DefaultController.php @@ -18,6 +18,8 @@ class DefaultController extends Controller return $this->render('/page.html.twig', [ 'header' => $page['header'], 'content' => $page['content'], - 'title' => $page['title']], $page['status']); + 'title' => $page['title'], + 'nineties' => (isset($_COOKIE['nineties'])) + ], $page['status']); } } \ No newline at end of file diff --git a/templates/base.html.twig b/templates/base.html.twig index 25e6dc6..9fb8399 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -11,7 +11,8 @@ - + +
{% if nineties %}My eyes hurt{% else %}Take me back in time{% endif %}
{% block content %}{% endblock %} {% block extrahtml %}{% endblock %}