feat: Add feedback modal

public/i18n/de.json

@@ -20,6 +20,8 @@
   "the-vdrd": "VdRD e.V.",
   "imprint": "Impressum",
   "source-code": "Quellcode",
+  "give-feedback": "Feedback geben",
+  "feedback": "Feedback",
   "failed-base-area": "Die Mindestgrundfläche des Käfigs muss {{ MINIMUM_BASE_AREA }}m² (also z.B. 100x50cm) betragen.",
   "failed-overall-area": "Die Gesamtfläche im Käfig ist zu klein.",
   "failed-fall-height": "Die mögliche Fallhöhe darf nicht mehr als {{ maximum_fall_height }}cm betragen.",

public/i18n/en.json

@@ -20,6 +20,8 @@
   "the-vdrd": "VdRD r.V.",
   "imprint": "Imprint",
   "source-code": "Source Code",
+  "give-feedback": "Give Feedback",
+  "feedback": "Feedback",
   "failed-base-area": "The base area of the cage must not be below {{ MINIMUM_BASE_AREA }}m².",
   "failed-overall-area": "The overall area in the cage is to small.",
   "failed-fall-height": "The possible fall height between floors must not be above {{ maximum_fall_height }}cm.",

public/index.html

@@ -260,12 +260,40 @@
                     <li class="footer-link"><a href="https://vdrd.de/impressum" data-i18n="imprint">Impressum</a></li>
                     <li class="footer-link"><a href="https://codeberg.org/moanos/rettenrechner" data-i18n="source-code">Quellcode</a>
                     </li>
+                    <li class="footer-link">
+                        <a class="js-modal-trigger is-text is-link" data-target="modal-feedback" data-i18n="give-feedback">
+                            Feedback geben
+                        </a>
+                    </li>
                 </ul>
             </div>
         </div>
     </div>
 </div>
 
+<div id="modal-feedback" class="modal">
+
+    <div class="modal-background"></div>
+        <div class="modal-card">
+        <header class="modal-card-head">
+            <h2 data-i18n="feedback" class="modal-card-title">Feedback</h2>
+            <button class="delete" aria-label="close"></button>
+        </header>
+        <div class="modal-card-body">
+            <p>
+                Wir freuen uns sehr, wenn du uns Feedback zu unserem Rattenrechner gibst!
+                Der einfachste Weg das zu tun ist per E-Mail an <a
+                    href="mailto:webmaster@vdrd.de">webmaster@vdrd.de</a>.
+            </p>
+            <p>
+                Der Code dieser Website ist <a href="https://codeberg.org/moanos/rettenrechner">öffentlich einsehbar.</a>
+                Gerne kannst du auch direkt dort <a href="https://codeberg.org/moanos/rettenrechner/issues">einen Issue</a> eröffnen!
+            </p>
+        </div>
+    </div>
+
+</div>
+
 <script src="./bundle.js"></script>
 
 </body>

src/feedback.js

@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Functions to open and close a modal
+    function openModal($el) {
+        $el.classList.add('is-active');
+    }
+
+    function closeModal($el) {
+        $el.classList.remove('is-active');
+    }
+
+    function closeAllModals() {
+        (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+            closeModal($modal);
+        });
+    }
+
+    // Add a click event on buttons to open a specific modal
+    (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+        const modal = $trigger.dataset.target;
+        const $target = document.getElementById(modal);
+
+        $trigger.addEventListener('click', () => {
+            openModal($target);
+        });
+    });
+
+    // Add a click event on various child elements to close the parent modal
+    (document.querySelectorAll('.modal-background, .modal-close, .delete, .button') || []).forEach(($close) => {
+        const $target = $close.closest('.modal');
+
+        $close.addEventListener('click', () => {
+            closeModal($target);
+        });
+    });
+
+    // Add a keyboard event to close all modals
+    document.addEventListener('keydown', (event) => {
+        if (event.key === "Escape") {
+            closeAllModals();
+        }
+    });
+});

src/index.js

@@ -5,6 +5,7 @@ import '@fortawesome/fontawesome-free/js/fontawesome'
 import '@fortawesome/fontawesome-free/js/solid'
 import '@fortawesome/fontawesome-free/js/regular'
 import '@fortawesome/fontawesome-free/js/brands'
+import './feedback'
 import './main.scss';
 
 /////////////////