feat: Style main result

i18next-parser.config.js

@@ -8,4 +8,6 @@ module.exports = {
     locales: ['en', 'de'],
     output: 'public/i18n/$LOCALE.json',
     input: [ 'src/*.js', 'public/*.html', ],
+    keepRemoved: [/dynamic.*/], //prefixing a key with dynamic. will make it not disappear upon calling i18next
+
 }

package-lock.json

@@ -10,15 +10,14 @@
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.7.2",
+        "@telemetrydeck/sdk": "^2.0.4",
         "bulma": "^1.0.3",
-        "bulma-tooltip": "^3.0.2",
         "i18next": "^23.12.2",
         "i18next-browser-languagedetector": "^8.0.0",
         "i18next-http-backend": "^2.5.2",
         "sass-migrator": "^2.3.1"
       },
       "devDependencies": {
-        "@creativebulma/bulma-tooltip": "^1.2.0",
         "css-loader": "^7.1.2",
         "i18next-parser": "^9.3.0",
         "sass": "^1.86.3",
@@ -41,13 +40,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@creativebulma/bulma-tooltip": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@creativebulma/bulma-tooltip/-/bulma-tooltip-1.2.0.tgz",
-      "integrity": "sha512-ooImbeXEBxf77cttbzA7X5rC5aAWm9UsXIGViFOnsqB+6M944GkB28S5R4UWRqjFd2iW4zGEkEifAU+q43pt2w==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -943,6 +935,15 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@telemetrydeck/sdk": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@telemetrydeck/sdk/-/sdk-2.0.4.tgz",
+      "integrity": "sha512-x4S83AqSo6wvLJ6nRYdyJEqd9qmblUdBgsTRrjH5z++b9pnf2NMc8NpVAa48KIB1pRuP/GTGzXxVYdNoie/DVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.5",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
@@ -1602,6 +1603,21 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/bl/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/body-parser": {
       "version": "1.20.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
@@ -1627,6 +1643,19 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/body-parser/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/bonjour-service": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.3.0.tgz",
@@ -1826,13 +1855,6 @@
       "integrity": "sha512-9eVXBrXwlU337XUXBjIIq7i88A+tRbJYAjXQjT/21lwam+5tpvKF0R7dCesre9N+HV9c6pzCNEPKrtgvBBes2g==",
       "license": "MIT"
     },
-    "node_modules/bulma-tooltip": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/bulma-tooltip/-/bulma-tooltip-3.0.2.tgz",
-      "integrity": "sha512-CsT3APjhlZScskFg38n8HYL8oYNUHQtcu4sz6ERarxkUpBRbk9v0h/5KAvXeKapVSn2dp9l7bOGit5SECP8EWQ==",
-      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-      "license": "MIT"
-    },
     "node_modules/bundle-name": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
@@ -1955,42 +1977,20 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/cheerio/node_modules/parse5": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
-      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "entities": "^4.5.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
     "node_modules/chokidar": {
-      "version": "3.6.0",
+      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "anymatch": "~3.1.2",
+        "readdirp": "^4.0.1"
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
       },
       "engines": {
-        "node": ">= 8.10.0"
+        "node": ">= 14.16.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
       }
     },
     "node_modules/chrome-trace-event": {
@@ -2053,11 +2053,14 @@
       }
     },
     "node_modules/commander": {
-      "version": "2.20.3",
+      "version": "12.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/compressible": {
       "version": "2.0.18",
@@ -2091,6 +2094,27 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/compression/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2121,6 +2145,27 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/content-disposition/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/content-type": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
@@ -2455,9 +2500,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.136",
+      "version": "1.5.137",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.136.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.137.tgz",
-      "integrity": "sha512-kL4+wUTD7RSA5FHx5YwWtjDnEEkIIikFgWHR4P6fqjw1PPLlqYkxeOb++wAauAssat0YClCy8Y3C5SxgSkjibQ==",
+      "integrity": "sha512-/QSJaU2JyIuTbbABAo/crOs+SuAZLS+fVVS10PVrIT9hrRkmZl8Hb0xPSkKRUUWHQtYzXHpQUW3Dy5hwMzGZkA==",
       "dev": true,
       "license": "ISC"
     },
@@ -2485,19 +2530,6 @@
         "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
       }
     },
-    "node_modules/encoding-sniffer/node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
@@ -2771,6 +2803,27 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/express/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3121,16 +3174,16 @@
       }
     },
     "node_modules/glob-parent": {
-      "version": "5.1.2",
+      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "is-glob": "^4.0.1"
+        "is-glob": "^4.0.3"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=10.13.0"
       }
     },
     "node_modules/glob-stream": {
@@ -3153,19 +3206,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob-stream/node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
@@ -3203,50 +3243,6 @@
         "through2": "^2.0.1"
       }
     },
-    "node_modules/gulp-sort/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/gulp-sort/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/gulp-sort/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "node_modules/gulp-sort/node_modules/through2": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "readable-stream": "~2.3.6",
-        "xtend": "~4.0.1"
-      }
-    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -3331,39 +3327,6 @@
         "wbuf": "^1.1.0"
       }
     },
-    "node_modules/hpack.js/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/hpack.js/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/hpack.js/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/htmlparser2": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
@@ -3455,6 +3418,19 @@
         }
       }
     },
+    "node_modules/http-proxy-middleware/node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/hyperdyperid": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz",
@@ -3540,24 +3516,14 @@
         "yarn": ">=1"
       }
     },
-    "node_modules/i18next-parser/node_modules/commander": {
-      "version": "12.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
-      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/iconv-lite": {
-      "version": "0.4.24",
+      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
       "engines": {
         "node": ">=0.10.0"
@@ -3784,13 +3750,13 @@
       }
     },
     "node_modules/is-plain-obj": {
-      "version": "3.0.0",
+      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
-      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -4344,9 +4310,9 @@
       }
     },
     "node_modules/open": {
-      "version": "10.1.0",
+      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/open/-/open-10.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/open/-/open-10.1.1.tgz",
-      "integrity": "sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==",
+      "integrity": "sha512-zy1wx4+P3PfhXSEPJNtZmJXfhkkIaxU1VauWIrDZw1O7uJRDRJtKr9n3Ic4NgbA16KyOxOXO2ng9gYwCdXuSXA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4419,6 +4385,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/parse5-htmlparser2-tree-adapter": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz",
@@ -4433,19 +4412,6 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
-    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/parse5": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
-      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "entities": "^4.5.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
     "node_modules/parse5-parser-stream": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
@@ -4459,19 +4425,6 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
-    "node_modules/parse5-parser-stream/node_modules/parse5": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
-      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "entities": "^4.5.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -4798,32 +4751,47 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/readable-stream": {
+    "node_modules/raw-body/node_modules/iconv-lite": {
-      "version": "3.6.2",
+      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "inherits": "^2.0.3",
+        "safer-buffer": ">= 2.1.2 < 3"
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
       }
     },
     "node_modules/readdirp": {
-      "version": "3.6.0",
+      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
       "engines": {
-        "node": ">=8.10.0"
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/rechoir": {
@@ -4998,24 +4966,10 @@
       }
     },
     "node_modules/safe-buffer": {
-      "version": "5.2.1",
+      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
       "license": "MIT"
     },
     "node_modules/safer-buffer": {
@@ -5099,36 +5053,6 @@
         "node": ">=10.12.0"
       }
     },
-    "node_modules/sass/node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/sass/node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/schema-utils": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
@@ -5480,19 +5404,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/sort-keys/node_modules/is-plain-obj": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
-      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -5581,6 +5492,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/spdy-transport/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/spdy/node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -5648,13 +5574,13 @@
       }
     },
     "node_modules/string_decoder": {
-      "version": "1.3.0",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "safe-buffer": "~5.2.0"
+        "safe-buffer": "~5.1.0"
       }
     },
     "node_modules/style-loader": {
@@ -5784,6 +5710,13 @@
         }
       }
     },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/text-decoder": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz",
@@ -5807,6 +5740,17 @@
         "tslib": "^2"
       }
     },
+    "node_modules/through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -6094,19 +6038,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/vinyl-fs/node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/vinyl-sourcemap": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-2.0.0.tgz",
@@ -6362,6 +6293,57 @@
         }
       }
     },
+    "node_modules/webpack-dev-server/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/webpack-merge": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
@@ -6425,19 +6407,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/whatwg-mimetype": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",

package.json

@@ -21,7 +21,6 @@
   "author": "Julian-Samuel Gebühr",
   "license": "AGPL-3.0-or-later",
   "devDependencies": {
-    "@creativebulma/bulma-tooltip": "^1.2.0",
     "css-loader": "^7.1.2",
     "i18next-parser": "^9.3.0",
     "sass": "^1.86.3",
@@ -32,12 +31,12 @@
     "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@telemetrydeck/sdk": "^2.0.4",
     "bulma": "^1.0.3",
-    "bulma-tooltip": "^3.0.2",
     "i18next": "^23.12.2",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",
-    "sass-migrator": "^2.3.1",
+    "sass-migrator": "^2.3.1"
-    "@fortawesome/fontawesome-free": "^6.7.2"
   }
 }

public/i18n/de.json

@@ -1,5 +1,6 @@
 {
-  "app-name": "Käfigrechner",
+  "title": "VdRD Käfigrechner für Ratten",
+  "app-name": "VdRD Käfigrechner für Ratten",
   "how-many-rats-does-this-cage-fit": "Wie viele Ratten passen in den Käfig?",
   "what-cage-should-i-get": "Käfiggröße rechnen",
   "check-existing-cage": "Käfig prüfen",
@@ -9,8 +10,25 @@
   "height-cm": "Höhe (cm)",
   "full-floors": "Vollebenen",
   "result": "Ergebnis",
+  "input-data-num-rats": "Bitte gib erst die Maße des Käfigs ein, dann siehst du hier die Anzahl der Ratten die hineinpassen.",
   "number-of-rats": "Anzahl an Ratten",
+  "please-input-cage-calc": "Stell ein für wie viel Ratten der Käfig sein soll, danach siehst du hier das Ergebnis.",
+  "please-input-cage-check": "Bitte gib erst die Maße des Käfigs und die Anzahl an Ratten ein. Danach siehst du hier, ob der Käfig passt.",
+  "give-feedback": "Feedback geben",
   "change-language": "Sprache ändern",
+  "information-on-rat-husbandry": "Information",
+  "basic-rat-info": "Basiswissen Ratten",
+  "cage": "Käfig",
+  "food": "Ernährung",
+  "adopting-rats": "Ratten adoptieren",
+  "about": "Über uns",
+  "the-vdrd": "VdRD e.V.",
+  "imprint": "Impressum",
+  "source-code": "Quellcode",
+  "feedback": "Feedback",
+  "sus-title": "Bewerte den Rechner",
+  "explanation-feedback": "Vielen Dank, dass du uns Feedback gibst! Dein Feedback hilft uns den Rechner zu verbessern. Wir sammeln dabei keinerlei persönliche Daten. Du tust uns einfach nur einen großen Gefallen!",
+  "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.",
@@ -25,5 +43,23 @@
   "minimum-length-short-side": "Die kurze Seite des Käfig muss mindestens {{ minimum_length_short_side }}cm lang sein.",
   "cage-complies-with-all-criteria": "Der Käfig erfüllt alle Kriterien!",
   "cage-for-x-rats": "Käfig für {{ num_rats }} Ratten",
-  "overall-area": "Die Gesamtfläche für {{ numRats }} Ratten muss mindestens {{ minimumOverallArea }}m² betragen."
+  "overall-area": "Die Gesamtfläche für {{ numRats }} Ratten muss mindestens {{ minimumOverallArea }}m² betragen.",
+  "strongly-disagree": "Stimme gar nicht zu",
+  "strongly-agree": "Stimme voll zu",
+  "submit-success": "Erfolgreich abgesendet!",
+  "submit-error": "Fehler beim Absenden!",
+  "network-error": "Fehler bei der Datenübertragung!",
+  "dynamic.sus-question-easy-to-use": "Ich finde der Käfigrechner ist einfach zu nutzen.",
+  "dynamic.sus-question-unnecessarily-complex": "Ich finde den Käfigrechner unnötig komplex.",
+  "dynamic.sus-question-need-support-of-technical-person": "Ich glaube ich brauche die Hilfe eine Technik-Person umd den Rechner zu nutzen.",
+  "dynamic.sus-question-well-integrated": "Ich finde, dass die verschiedenen Funktionen des Rechners gut integriert sind.",
+  "dynamic.sus-question-inconsistency": "Ich finde, dass es im Rechner zu viele Inkonsistenzen gibt.",
+  "dynamic.sus-question-learn-quickly": "Ich vermute, dass die meisten Leute schnell lernen den Rechner zu benutzen",
+  "dynamic.sus-question-cumbersome": "Ich finde den Rechner umständlich zu nutzen.",
+  "dynamic.sus-question-confident": "Ich habe mich bei der Nutzung des Rechners sehr sicher gefühlt.",
+  "dynamic.sus-question-trust": "Ich vertraue den Ergebnissen des Rechners.",
+  "dynamic.question-whats-missing": "Welche Funktion fehlt dir?",
+  "dynamic.question-pain-points": "Was muss aus deiner Sicht am Rechner geändert werden?",
+  "dynamic.question-other-feedback": "Was willst du uns sonst mitteilen?",
+  "dynamic.submit-success": "Erfolgreich abgesendet!"
 }

public/i18n/en.json

@@ -1,5 +1,6 @@
 {
-  "app-name": "Cage Calculator",
+  "title": "VdRD Rat Cage Calculator",
+  "app-name": "VdRD Rat Cage Calculator",
   "how-many-rats-does-this-cage-fit": "How many rats does this cage fit?",
   "what-cage-should-i-get": "Calculate cage size",
   "check-existing-cage": "Check cage",
@@ -9,8 +10,25 @@
   "height-cm": "Height (cm)",
   "full-floors": "Full floors",
   "result": "Result",
+  "input-data-num-rats": "Please input them measurements of the cage. Then you will see the number of rats allowed.",
   "number-of-rats": "Number of Rats",
+  "please-input-cage-calc": "First put in how many rats should fit the cage. After that come back here.",
+  "please-input-cage-check": "First put in how many rats should fit the cage and the cages measurements. After that come back here to see if they fit.",
+  "give-feedback": "Give Feedback",
   "change-language": "Change language",
+  "information-on-rat-husbandry": "Information",
+  "basic-rat-info": "Basic Rat Information",
+  "cage": "Cage",
+  "food": "Food",
+  "adopting-rats": "Adopting Rats",
+  "about": "About",
+  "the-vdrd": "VdRD r.V.",
+  "imprint": "Imprint",
+  "source-code": "Source Code",
+  "feedback": "Feedback",
+  "sus-title": "Rate the calculator",
+  "explanation-feedback": "Thank you for giving us feedback! We will use your feedback to improve 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.",
@@ -25,5 +43,22 @@
   "minimum-length-short-side": "The short side of the cage must be at least {{ minimum_length_short_side }}cm.",
   "cage-complies-with-all-criteria": "This cage complies with all criteria!",
   "cage-for-x-rats": "Cage for {{ num_rats }} rats",
-  "overall-area": "The overall area in the cage must be above {{ minimumOverallArea }}m² for {{ numRats }} rats."
+  "overall-area": "The overall area in the cage must be above {{ minimumOverallArea }}m² for {{ numRats }} rats.",
+  "strongly-disagree": "Strongly Disagree",
+  "strongly-agree": "Strongly Agree",
+  "submit-success": "Successfully submitted!",
+  "submit-error": "Error when submitting the form!",
+  "network-error": "Network error when submitting the form!",
+  "dynamic.sus-question-easy-to-use": "I thought the calculator is easy to use.",
+  "dynamic.sus-question-unnecessarily-complex": "I find the calculator unnecessarily complex.",
+  "dynamic.sus-question-need-support-of-technical-person": "I think that I need the support of a technical person to be able to use the calculator.",
+  "dynamic.sus-question-well-integrated": "I found various functions in the calculator were well integrated",
+  "dynamic.sus-question-inconsistency": "I thought there was too much inconsistency in the calculator",
+  "dynamic.sus-question-learn-quickly": "I would imagine that most people would learn to use the calculator very quickly",
+  "dynamic.sus-question-cumbersome": "I found the calculator very cumbersome to use",
+  "dynamic.sus-question-confident": "I felt very confident using the calculator",
+  "dynamic.sus-question-trust": "I trust the results of the calculator.",
+  "dynamic.question-whats-missing": "What functionality do you feel is missing?",
+  "dynamic.question-pain-points": "What do you thing needs to be changed?",
+  "dynamic.question-other-feedback": "What else do you want to tell us?"
 }

public/index.html

@@ -2,7 +2,7 @@
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="UTF-8">
-    <title>Käfigrechner</title>
+    <title data-i18n="title">VdRD Käfigrechner</title>
     <meta content="width=device-width, initial-scale=1" name="viewport"/>
     <meta name="description"
           content="Rechner für die Größe eines Rattenkäfigs basierend auf den Empfehlungen des VdRD e.V.">
@@ -17,7 +17,7 @@
     <div class="navbar-brand">
         <div class="navbar-item">
             <img src="assets/img/logo_vdrd.png" alt="VdRD Log">
-            <h1 data-i18n="app-name" class="title is-3">Käfigrechner</h1>
+            <h1 data-i18n="app-name" class="title is-3">VdRD Käfigrechner für Ratten</h1>
         </div>
     </div>
 </div>
@@ -62,6 +62,7 @@
                 <h2 class="title is-4"><label data-i18n="cage-measurements"
                                               for="form-cage-measurements">Käfigmaße</label></h2>
                 <form>
+                    <div class="field">
                         <label for="num-rats-width" class="label" data-i18n="width-cm">Breite (cm)</label>
                         <p class="control has-icons-left">
                             <input class="input" type="number" id="num-rats-width" placeholder="100 cm">
@@ -69,7 +70,9 @@
                               <i class="fas fa-ruler-horizontal"></i>
                             </span>
                         </p>
+                    </div>
 
+                    <div class="field">
                         <label for="num-rats-depth" class="label" data-i18n="depth-cm">Tiefe (cm)</label>
                         <p class="control has-icons-left">
                             <input class="input" type="number" id="num-rats-depth" placeholder="50 cm">
@@ -77,7 +80,9 @@
                               <i class="fas fa-ruler"></i>
                             </span>
                         </p>
+                    </div>
 
+                    <div class="field">
                         <label for="num-rats-height" class="label" data-i18n="height-cm">Höhe (cm)</label>
                         <p class="control has-icons-left">
                             <input class="input" type="number" id="num-rats-height" placeholder="120 cm">
@@ -85,25 +90,17 @@
                               <i class="fas fa-ruler-vertical"></i>
                             </span>
                         </p>
-
-                    <div class="columns">
-                        <div class="column">
-                            <label for="num-rats-numFullFloors" class="label"
-                                   data-i18n="full-floors">Vollebenen</label>
-                            <span data-tooltip="Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.">
-                            <svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none"
-                                 stroke="currentColor">
-                    <path d="M9.00026 12.6C9.00026 12.6 9.00026 12.1224 9.00026 11.5333V8.86666C9.00026 8.57211 8.76148 8.33333 8.46693 8.33333H7.93359"
-                          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-                    <path d="M8.73346 5.26666C8.58619 5.26666 8.4668 5.38605 8.4668 5.53333C8.4668 5.68061 8.58619 5.8 8.73346 5.8C8.88074 5.8 9.00013 5.68061 9.00013 5.53333C9.00013 5.38605 8.88074 5.26666 8.73346 5.26666V5.26666"
-                          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-                    <path fill-rule="evenodd" clip-rule="evenodd"
-                          d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
-                          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-                </svg>
-                        </span>
-                            <input type="number" id="num-rats-numFullFloors" value="3" step="1">
                     </div>
+
+                    <div class="field">
+                        <label for="num-rats-numFullFloors" class="label" data-i18n="full-floors">
+                            Vollebenen
+                        </label>
+
+                        <input class="control" type="number" id="num-rats-numFullFloors" value="3" step="1">
+                        <p class="help">Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des
+                            Käfigbodens.</p>
+
                     </div>
                 </form>
             </div>
@@ -111,10 +108,16 @@
         <div class="card-footer is-fullwidth">
             <div class="card result-card" id="num-rats-result-card">
                 <div class="card-header">
-                    <h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
+                    <h2 class="card-header-title title is-2 is-centered" data-i18n="result">Ergebnis</h2>
                 </div>
                 <div class="card-content">
-                    <div id="num-rats-resultsDiv"></div>
+                    <div class="is-size-5" id="num-rats-resultsDiv">
+                        <p data-i18n="input-data-num-rats">
+                            Bitte gib erst die Maße ein, dann siehst du hier die Anzahl
+                            der Ratten die hineinpassen.
+                        </p>
+
+                    </div>
                 </div>
             </div>
         </div>
@@ -137,10 +140,12 @@
             <div class="card-footer is-fullwidth">
                 <div class="card result-card" id="cage-calc-result-card">
                     <div class="card-header">
-                        <h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
+                        <h2 class="card-header-title title is-2 is-centered" data-i18n="result">Ergebnis</h2>
                     </div>
                     <div class="card-content">
-                        <div id="cageCalcResultsDiv"></div>
+                        <div class="is-size-5" id="cageCalcResultsDiv"></div>
+                        <p data-i18n="please-input-cage-calc">Stell ein für wie viel Ratten der Käfig sein soll, danach
+                            siehst du hier das Ergebnis</p>
                     </div>
                 </div>
             </div>
@@ -154,6 +159,7 @@
                                               for="form-cage-measurements">Käfigmaße</label></h2>
                 <form id="form-cage-measurements" class="form-measurements">
 
+                    <div class="field">
                         <label for="width" class="label" data-i18n="width-cm">Breite (cm)</label>
                         <p class="control has-icons-left">
                             <input class="input" type="number" id="width" placeholder="100 cm">
@@ -161,7 +167,9 @@
                               <i class="fas fa-ruler-horizontal"></i>
                             </span>
                         </p>
+                    </div>
 
+                    <div class="field">
                         <label for="depth" class="label" data-i18n="depth-cm">Tiefe (cm)</label>
                         <p class="control has-icons-left">
                             <input class="input" type="number" id="depth" placeholder="50 cm">
@@ -169,7 +177,9 @@
                               <i class="fas fa-ruler"></i>
                             </span>
                         </p>
+                    </div>
 
+                    <div class="field">
                         <label for="height" class="label" data-i18n="height-cm">Höhe (cm)</label>
                         <p class="control has-icons-left">
                             <input class="input" type="number" id="height" placeholder="120 cm">
@@ -177,30 +187,28 @@
                               <i class="fas fa-ruler-vertical"></i>
                             </span>
                         </p>
+                    </div>
 
                     <div class="columns">
                         <div class="column">
+                            <div class="field">
                                 <label for="numFullFloors" class="label"
                                        data-i18n="full-floors">Vollebenen</label>
-                            <span data-tooltip="Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.">
+
-                            <svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none"
+                                <input class="control" type="number" id="numFullFloors" value="3" step="1">
-                                 stroke="currentColor">
+                                <p class="help">Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive
-                    <path d="M9.00026 12.6C9.00026 12.6 9.00026 12.1224 9.00026 11.5333V8.86666C9.00026 8.57211 8.76148 8.33333 8.46693 8.33333H7.93359"
+                                    des Käfigbodens.</p>
-                          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                            </div>
-                    <path d="M8.73346 5.26666C8.58619 5.26666 8.4668 5.38605 8.4668 5.53333C8.4668 5.68061 8.58619 5.8 8.73346 5.8C8.88074 5.8 9.00013 5.68061 9.00013 5.53333C9.00013 5.38605 8.88074 5.26666 8.73346 5.26666V5.26666"
-                          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-                    <path fill-rule="evenodd" clip-rule="evenodd"
-                          d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
-                          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-                </svg>
-                        </span>
-                            <input type="number" id="numFullFloors" value="3" step="1">
                         </div>
 
                         <div class="column">
-                            <label for="numRats" id="labelNumRats" data-i18n="number-of-rats">Anzahl an
+
+                            <div class="field">
+                                <label class="label" for="numRats" id="labelNumRats" data-i18n="number-of-rats">Anzahl
+                                    an
                                     Ratten</label>
-                            <input type="range" min="3" max="15" value="4" class="slider" id="numRats">
+                                <input type="range" min="3" max="15" value="4" class="control slider" id="numRats">
+                            </div>
                         </div>
                     </div>
                 </form>
@@ -209,27 +217,112 @@
         <div class="card-footer is-fullwidth">
             <div class="card result-card" id="result-card">
                 <div class="card-header">
-                    <h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
+                    <h2 class="card-header-title title is-2 is-centered" data-i18n="result">Ergebnis</h2>
                 </div>
                 <div class="card-content">
-                    <div id="resultsDiv"></div>
+                    <div id="resultsDiv">
+                        <p data-i18n="please-input-cage-check">Bitte gib erst die Maße des Käfigs und die Anzahl an
+                            Ratten ein. Danach siehst du hier, ob der Käfig passt.</p>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
 
-<script src="./bundle.js"></script>
+<button class="button is-primary floating js-modal-trigger" data-target="modal-feedback"
+        data-i18n="give-feedback"></button>
 
-<div class="footer">
+<div class="footer" aria-label="Footer">
+    <div class="columns">
+        <div class="column">
+            <div class="block">
+                <img class="footer-logo" src="assets/img/logo_ausgeschrieben.png"
+                     alt="Logo Verein der Rattenliebhaber und -halter Deutschland e.v.">
+            </div>
+            <div class="block">
                 <div class="language-switcher">
-        <label aria-hidden="false" style="display: none" data-i18n="change-language"></label>
+                    <label for="locale-switcher" class="footer-title title label" data-i18n="change-language">Sprache
+                        ändern</label>
                     <select data-i18n-switcher class="select" id="locale-switcher">
                         <option value="en">English</option>
                         <option value="de">Deutsch</option>
                     </select>
                 </div>
+            </div>
+        </div>
+        <div class="column">
+            <div class="block">
+                <h3 class="footer-title title" data-i18n="information-on-rat-husbandry">Informationen zur
+                    Rattenhaltung</h3>
+                <ul class="footer-links">
+                    <li class="footer-link"><a href="https://vdrd.de/vor-der-anschaffung/" data-i18n="basic-rat-info">Grundwissen
+                        Rattenhaltung</a></li>
+                    <li class="footer-link"><a href="https://vdrd.de/das-rattenheim/" data-i18n="cage">Käfig</a></li>
+                    <li class="footer-link"><a href="https://vdrd.de/ernaehrung/" data-i18n="food">Ernährung</a></li>
+                    <li class="footer-link"><a href="https://vdrd.de/anzahl-geschlecht-und-bezugsquelle/"
+                                               data-i18n="adopting-rats">Ratten adoptieren</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="column">
+            <div class="block">
+                <h3 class="footer-title title" data-i18n="about">Über uns</h3>
+                <ul class="footer-links">
+                    <li class="footer-link"><a href="https://vdrd.de/" data-i18n="the-vdrd">Der VdRD e.V.</a></li>
+                    <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">
+            <h1 class="title" data-i18n="sus-title">Bewerte den Rechner</h1>
+            <p class="is-spaced mb-4" data-i18n="explanation-feedback"></p>
+            <form id="sus-form">
+                <!--- Questions here --->
+                <div class="control" id="sus-control">
+                    <button class="button is-primary is-fullwidth" type="submit" data-i18n="submit">Absenden</button>
+                </div>
+
+            </form>
+            <div id="response-message" class="notification is-hidden mt-3"></div>
+        </div>
+
+
+        <div class="modal-card-foot">
+
+            <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>
 </html>

src/feedback.js

@@ -0,0 +1,47 @@
+import {send} from './telemetry';
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Functions to open and close a modal
+    function openModal($el) {
+        $el.classList.add('is-active');
+        send("Modal.open", {
+            modal: $el.id
+        });
+    }
+
+    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') || []).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

@@ -1,11 +1,14 @@
 import i18next from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import HttpApi from "i18next-http-backend";
-import '@fortawesome/fontawesome-free/js/fontawesome'
+import '@fortawesome/fontawesome-free/js/fontawesome';
-import '@fortawesome/fontawesome-free/js/solid'
+import '@fortawesome/fontawesome-free/js/solid';
-import '@fortawesome/fontawesome-free/js/regular'
+import '@fortawesome/fontawesome-free/js/regular';
-import '@fortawesome/fontawesome-free/js/brands'
+import '@fortawesome/fontawesome-free/js/brands';
+import './feedback.js';
 import './main.scss';
+import {send} from './telemetry';
+import './sus.js';
 
 /////////////////
 // TRANSLATION //
@@ -18,7 +21,7 @@ async function initI18next() {
         .init({
             supportedLngs: ["en", "de"],
             nonExplicitSupportedLngs: true,
-            fallbackLng: "en",
+            fallbackLng: "de",
             debug: true,
             backend: {
                 loadPath: "/i18n/{{lng}}.json",
@@ -343,18 +346,31 @@ function formatCriteria(criteria) {
 function updateCageCheck() {
     labelNumRats.innerHTML = i18next.t("cage-for-x-rats", {"num_rats": ratSlider.value});
 
-    const width = inputWidth.value
+    const width = inputWidth.value;
-    const depth = inputDepth.value
+    const depth = inputDepth.value;
-    const height = inputHeight.value
+    const height = inputHeight.value;
     const dimensions = new Dimensions(width / 100, depth / 100, height / 100);
     const validator = new Validator();
-    const failed_checks = validator.cageCheck(dimensions, ratSlider.value, fullFloorNum.value);
+    const numRats = ratSlider.value;
+    const numFullFloors = fullFloorNum.value;
+
+
+    const failed_checks = validator.cageCheck(dimensions, numRats, numFullFloors);
     let resultsDiv = document.getElementById("resultsDiv");
 
     const result = getResultFromChecks(failed_checks);
 
     resultsDiv.innerHTML = "";
     resultsDiv.appendChild(result);
+
+    // Send telemetry
+    send("Update.CageCheck", {
+        width: width,
+        depth: depth,
+        height: height,
+        numRats: numRats,
+        numFullFloors: numFullFloors
+    });
 }
 
 function updateCageCalc() {
@@ -362,8 +378,11 @@ function updateCageCalc() {
     cageCalcLabelNumRats.innerHTML = i18next.t("cage-for-x-rats", {"num_rats": numRats});
     const validator = new Validator();
     let criteria = validator.STATIC_CRITERIA;
-    let minimumOverallArea = validator.overallAreaNeeded(cageCalcRatSlider.value);
+    let minimumOverallArea = validator.overallAreaNeeded(numRats);
-    criteria[CRITERIA_OVERALL_AREA] = i18next.t('overall-area', {"numRats": numRats, "minimumOverallArea": minimumOverallArea});
+    criteria[CRITERIA_OVERALL_AREA] = i18next.t('overall-area', {
+        "numRats": numRats,
+        "minimumOverallArea": minimumOverallArea
+    });
 
     let resultsDiv = document.getElementById("cageCalcResultsDiv");
 
@@ -372,18 +391,25 @@ function updateCageCalc() {
     resultsDiv.innerHTML = "";
     resultsDiv.appendChild(result);
 
+    // Send telemetry
+    send("Update.CageCalc", {
+        numRats: numRats,
+    });
+
+
 }
 
 function updateNumRatsCalculator() {
 
-    const width = numRatsCalculatorInputWidth.value
+    const width = numRatsCalculatorInputWidth.value;
-    const depth = numRatsCalculatorInputDepth.value
+    const depth = numRatsCalculatorInputDepth.value;
-    const height = numRatsCalculatorInputHeight.value
+    const height = numRatsCalculatorInputHeight.value;
+    const numFullFloors = numRatsNumFullFloors.value;
     const dimensions = new Dimensions(width / 100, depth / 100, height / 100);
     const validator = new Validator();
-    const failed_checks = validator.failCageNumberIndependent(dimensions, fullFloorNum.value);
+    const failed_checks = validator.failCageNumberIndependent(dimensions, numFullFloors);
 
-    let overallArea = validator.getOverallArea(dimensions, numRatsNumFullFloors.value);
+    let overallArea = validator.getOverallArea(dimensions, numFullFloors);
     let allowedNumRats;
     try {
         allowedNumRats = validator.allowedNumberOfRats(overallArea);
@@ -400,9 +426,18 @@ function updateNumRatsCalculator() {
 
     resultsDiv.innerHTML = "";
     const p = document.createElement('p');
-    p.textContent = i18next.t("cage-for-x-rats", {"num_rats": allowedNumRats});
+    p.textContent = i18next.t("cage-for-x-rats", {"num_rats": Math.floor(allowedNumRats)});
+    p.className = " is-size-5 has-text-weight-semibold"
     resultsDiv.appendChild(p);
     resultsDiv.appendChild(result);
-}
 
-const validator = new Validator();
+
+
+    // Send telemetry
+    send("Update.NumRatsCalc", {
+        width: width,
+        depth: depth,
+        height: height,
+        numFullFloors: numFullFloors
+    });
+}

src/main.scss

@@ -32,6 +32,10 @@ body {
   height: 1.5rem;
 }
 
+.footer-logo {
+  height: 5rem;
+}
+
 // Import the Google Font
 @import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
 
@@ -62,3 +66,108 @@ body {
     opacity: 1;
   }
 }
+
+/*
+TOOLTIP
+Reused from Notfellchen
+ */
+
+.tooltip {
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+}
+
+.tooltip:hover .tooltiptext {
+  display: flex;
+  opacity: 1;
+  visibility: visible;
+}
+
+.tooltip .tooltiptext {
+  border-radius: 4px;
+  bottom: calc(100% + 0.6em + 2px);
+  box-shadow: 0px 2px 4px #07172258;
+  background-color: var(--primary-dark-one);
+  color: var(--secondary-light-one);
+  font-size: 0.68rem;
+  justify-content: center;
+  line-height: 1.35em;
+  padding: 0.5em 0.7em;
+  position: absolute;
+  text-align: center;
+  width: 7rem;
+  z-index: 1;
+  display: flex;
+  opacity: 0;
+  transition: all 0.3s ease-in;
+  visibility: hidden;
+}
+
+.tooltip .tooltiptext::before {
+  border-width: 0.6em 0.8em 0;
+  border-color: transparent;
+  border-top-color: var(--primary-dark-one);
+  content: "";
+  display: block;
+  border-style: solid;
+  position: absolute;
+  top: 100%;
+}
+
+/* Makes the tooltip fly from above */
+.tooltip.top .tooltiptext {
+  margin-bottom: 8px;
+}
+
+.tooltip.top:hover .tooltiptext {
+  margin-bottom: 0;
+}
+
+/* Make adjustments for bottom */
+.tooltip.bottom .tooltiptext {
+  top: calc(100% + 0.6em + 2px);
+  margin-top: 8px;
+}
+
+.tooltip.bottom:hover .tooltiptext {
+  margin-top: 0;
+}
+
+.tooltip.bottom .tooltiptext::before {
+  transform: rotate(180deg);
+  /* 100% of the height of .tooltip */
+  bottom: 100%;
+}
+
+.tooltip:not(.top) .tooltiptext {
+  bottom: auto;
+
+}
+
+.tooltip:not(.top) .tooltiptext::before {
+  top: auto;
+}
+
+
+// SUS Slider
+
+.sus-slider {
+  width: 100%;
+}
+
+.slider-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+  margin-top: 0.25rem;
+}
+
+// FLOATING BUTTON
+
+.floating {
+  position: fixed;
+  border-radius: 0.3rem;
+  bottom: 4.5rem;
+  right: 1rem;
+}

src/sus.js

@@ -0,0 +1,107 @@
+import i18next from "i18next";
+
+const scaleQuestions = [
+    "sus-question-easy-to-use", // I thought CageCalc is easy to use
+    "sus-question-unnecessarily-complex", // I find CageCalc unnecessarily complex
+    "sus-question-need-support-of-technical-person", // I think that I need the support of a technical person to be able to use CageCalc
+    "sus-question-well-integrated", // I found various functions in CageCalc were well integrated
+    "sus-question-inconsistency", // I thought there was too much inconsistency in CageCalc
+    "sus-question-learn-quickly", // I would imagine that most people would learn to use CageCalc very quickly
+    "sus-question-cumbersome", // I found CageCalc very cumbersome to use
+    "sus-question-confident", // I felt very confident using CageCalc
+    "sus-question-trust", // I felt very confident using CageCalc
+];
+
+const freetextQuestions = [
+    "question-whats-missing", // Welche Funktion fehlt dir?
+    "question-pain-points", // Was muss aus deiner Sicht an XX geändert werden?
+    "question-other-feedback" // Was willst du uns mitgeben?
+]
+
+function prepareQuestionnaire() {
+    const form = document.getElementById("sus-form");
+
+    scaleQuestions.forEach((key, index) => {
+        const field = document.createElement("div");
+        field.className = "field";
+        field.id = key;
+        field.innerHTML = `
+          <label class="label" data-i18n="dynamic.${key}"></label>
+          <p class="control">
+            <input class="sus-slider" type="range" min="1" max="5" step="1" name=${key} required>
+            <div class="slider-labels">
+              <span data-i18n="strongly-disagree">${i18next.t('strongly-disagree')}</span>
+              <span data-i18n="strongly-agree">${i18next.t('strongly-agree')}</span>
+            </div>
+          </p>
+        `;
+        form.insertBefore(field, form.querySelector('#sus-control'));
+    });
+
+    freetextQuestions.forEach((key, index) => {
+        const field = document.createElement("div");
+        field.classList.add("field");
+        field.id = key;
+        field.innerHTML = `
+            <label class="label" data-i18n="dynamic.${key}"></label>
+            <p class="control">
+                <input class="input" type="text" name=${key}/>
+            </p>
+                `
+        form.insertBefore(field, form.querySelector('#sus-control'));
+    })
+    return form;
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+    let form = prepareQuestionnaire();
+    form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const formData = new FormData(form);
+        const jsonData = {};
+
+        for (let [key, value] of formData.entries()) {
+            if (key.startsWith("sws-question")) {
+                jsonData[key] = parseInt(value, 10);
+            } else {
+                jsonData[key] = value;
+            }
+
+        }
+
+        try {
+            const response = await fetch("https://storandom.hyteck.de/submit", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(jsonData)
+            });
+
+            const messageDiv = document.getElementById("response-message");
+
+            if (response.ok) {
+                messageDiv.classList.add("is-success");
+                messageDiv.innerHTML = i18next.t("submit-success");
+            } else {
+                messageDiv.classList.add("is-danger");
+                messageDiv.innerHTML = i18next.t("submit-error");
+            }
+
+            messageDiv.classList.remove("is-hidden");
+
+        } catch (error) {
+            const messageDiv = document.getElementById("response-message");
+            messageDiv.classList.add("is-danger");
+            messageDiv.removeAttribute("data-i18n");
+            messageDiv.setAttribute("data-i18n", "");
+            messageDiv.innerHTML = i18next.t("network-error");
+            let errorP = document.createElement("p");
+            errorP.className = "error";
+            errorP.innerText = error;
+            messageDiv.appendChild(errorP);
+            messageDiv.classList.remove("is-hidden");
+        }
+    });
+});

src/telemetry.js

@@ -0,0 +1,57 @@
+import TelemetryDeck from '@telemetrydeck/sdk';
+
+
+///////////////
+// TELEMETRY //
+///////////////
+
+// Telemetry Deck only collects fully anonymized data!
+
+const getCookieValueOrNull = (name) => {
+    const cookie = document.cookie
+        .split(";")
+        .map(c => c.trim())
+        .find(c => c.startsWith(name + "="));
+    return cookie ? cookie.split("=")[1] : null;
+};
+
+function getOrCreateUUID() {
+    let cookie_val = getCookieValueOrNull("id");
+    if (
+        cookie_val
+    ) {
+        return cookie_val;
+    } else {
+        let uuid =crypto.randomUUID();
+        const days = 365;
+        const expires = new Date(Date.now() + days * 864e5).toUTCString();
+        document.cookie = `id=${uuid}; expires=${expires}`;
+        return uuid;
+    }
+}
+
+// Send Test Signals when running locally
+function init() {
+    const appId = "E453AAB8-B1AD-4F3E-87DF-97FC3A0400B9";
+    if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
+        const td = new TelemetryDeck({
+            appID: appId,
+            clientUser: getOrCreateUUID(),
+            testMode: true
+        });
+        return td;
+    } else {
+        const td = new TelemetryDeck({
+            appID: appId,
+            clientUser: getOrCreateUUID()
+        });
+        return td;
+    }
+}
+
+let td = init();
+
+
+export function send(type, payload) {
+    td.signal(type, payload);
+}