From a8db69786a71fc309d7527644a04dca99af215f9 Mon Sep 17 00:00:00 2001
From: lubiana <lubiana@hannover.ccc.de>
Date: Mon, 14 Jul 2025 19:08:17 +0200
Subject: [PATCH] add mono mode

---
 assets/javascript/emoji-footprint.js | 7 ++++++-
 assets/styles/modes.css              | 4 ++++
 templates/base.html.twig             | 4 ++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/assets/javascript/emoji-footprint.js b/assets/javascript/emoji-footprint.js
index 238377b..8e29ae0 100644
--- a/assets/javascript/emoji-footprint.js
+++ b/assets/javascript/emoji-footprint.js
@@ -1,6 +1,11 @@
 // Sparkle effect on mouse move
 document.addEventListener('mousemove', function (e) {
-    const emojis = ['✨', '💖', '🌟', '💅', '🦄', '🎉', '🌈'];
+    let emojis = ['✨', '💖', '🌟', '💅', '🦄', '🎉', '🌈'];
+    const htmlElement = document.documentElement;
+
+    if (htmlElement.getAttribute('data-website-mode') === 'mono') {
+        emojis = ['🦇', '🦹', '🌙', '⚰️', '🕯️'];
+    }
     const sparkle = document.createElement('div');
     sparkle.className = 'emoji-footprint';
     sparkle.textContent = emojis[Math.floor(Math.random() * emojis.length)];
diff --git a/assets/styles/modes.css b/assets/styles/modes.css
index 39dd41e..f43d9d3 100644
--- a/assets/styles/modes.css
+++ b/assets/styles/modes.css
@@ -307,6 +307,10 @@
     animation: discoFlash 0.3s infinite, wiggle 0.2s infinite;
 }
 
+[data-website-mode="mono"] body {
+    filter: grayscale(1);
+}
+
 /* Enhanced mode styles (for future use) */
 [data-website-mode="enhanced"] .btn {
     background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 3a14f40..75fae8c 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -26,6 +26,10 @@
                             <li class="nav-item"><a class="nav-link" href="https://git.hannover.ccc.de/lubiana/futtern/issues/new" target="_blank">Create Issue</a></li>
                         </ul>
                         <div class="btn-group ms-auto" role="group" aria-label="Mode selection">
+                            <input type="radio" class="btn-check" name="mode" id="mono" autocomplete="off">
+                            <label class="btn btn-outline-primary" for="mono">
+                                Mono
+                            </label>
                             <input type="radio" class="btn-check" name="mode" id="normal" autocomplete="off" checked>
                             <label class="btn btn-outline-primary" for="normal">
                               Normal