feat: Add sus (translations missing)

public/i18n/de.json

@@ -22,6 +22,8 @@
   "source-code": "Quellcode",
   "give-feedback": "Feedback geben",
   "feedback": "Feedback",
+  "sus-title": "Bewerte den Rechner",
+  "submit": "Absenden",
   "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

@@ -22,6 +22,8 @@
   "source-code": "Source Code",
   "give-feedback": "Give Feedback",
   "feedback": "Feedback",
+  "sus-title": "Rate the calculator",
+  "submit": "Submit",
   "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

@@ -261,7 +261,8 @@
                     <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">
+                        <a class="js-modal-trigger is-text is-link" data-target="modal-feedback"
+                           data-i18n="give-feedback">
                             Feedback geben
                         </a>
                     </li>
@@ -274,21 +275,37 @@
 <div id="modal-feedback" class="modal">
 
     <div class="modal-background"></div>
-        <div class="modal-card">
+    <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 class="section">
+                <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 class="section">
+                <h1 class="title" data-i18n="sus-title">Bewerte den Rechner</h1>
+                <form id="sus-form">
+                    <!--- Questions here --->
+                        <div class="control" id="sus-control">
+                            <button class="button is-primary" type="submit" data-i18n="submit">Absenden</button>
+                        </div>
+
+                </form>
+                <div id="response-message" class="notification is-hidden"></div>
+            </div>
+
         </div>
     </div>