added some test pages to the frontend

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@quasar/extras": "^1.16.4",
+        "@vueuse/gesture": "^2.0.0",
         "quasar": "^2.16.0",
         "vue": "^3.4.18",
         "vue-router": "^4.0.0"
@@ -1295,9 +1296,9 @@
       }
     },
     "node_modules/@quasar/app-vite": {
-      "version": "2.3.0",
+      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@quasar/app-vite/-/app-vite-2.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@quasar/app-vite/-/app-vite-2.4.0.tgz",
-      "integrity": "sha512-AHMRa5cdZ/TmV9mJ0jg/fbTMaMtFDfxvOjuPHL75AH6cZHECkXZ7ndTdVM0mU3i6lYwWf8Rx5OEi/PCwAMYJng==",
+      "integrity": "sha512-nfdcfERQ1bdUFsgXfYexgUAGBrsRHuzlik5p58cKGpYXiwUZZN6mJhN8VxU/zGT0GYHHiNIZlb67N+R52NYd6Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1308,7 +1309,7 @@
         "@types/compression": "^1.7.5",
         "@types/cordova": "^11.0.3",
         "@types/express": "^4.17.21",
-        "@vitejs/plugin-vue": "^5.1.4",
+        "@vitejs/plugin-vue": "^6.0.1",
         "archiver": "^7.0.1",
         "chokidar": "^3.6.0",
         "ci-info": "^4.0.0",
@@ -1336,14 +1337,14 @@
         "serialize-javascript": "^6.0.2",
         "tinyglobby": "^0.2.10",
         "ts-essentials": "^9.4.2",
-        "vite": "^6.1.0",
+        "vite": "^7.0.3",
         "webpack-merge": "^6.0.1"
       },
       "bin": {
         "quasar": "bin/quasar.js"
       },
       "engines": {
-        "node": "^30 || ^28 || ^26 || ^24 || ^22 || ^20 || ^18",
+        "node": "^30 || ^28 || ^26 || ^24 || ^22 || ^20",
         "npm": ">= 6.14.12",
         "yarn": ">= 1.17.3"
       },
@@ -1447,6 +1448,13 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.29",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.29.tgz",
+      "integrity": "sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.50.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.50.0.tgz",
@@ -1927,16 +1935,19 @@
       }
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "5.2.4",
+      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
-      "integrity": "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==",
+      "integrity": "sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-beta.29"
+      },
       "engines": {
-        "node": "^18.0.0 || >=20.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "vite": "^5.0.0 || ^6.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
         "vue": "^3.2.25"
       }
     },
@@ -2061,6 +2072,53 @@
       "integrity": "sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==",
       "license": "MIT"
     },
+    "node_modules/@vueuse/gesture": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/gesture/-/gesture-2.0.0.tgz",
+      "integrity": "sha512-+F0bhhd8j+gxHaXG4fJgfokrkFfWenQ10MtrWOJk68B5UaTwtJm4EpsZFiVdluA3jpKExG6H+HtroJpvO7Qx0A==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.6.0",
+        "consola": "^3.2.3",
+        "upath": "^2.0.1",
+        "vue-demi": "*"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.1",
+        "vue": "^2.0.0 || >=3.0.0-rc.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/gesture/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -2197,7 +2255,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -2351,7 +2408,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -2434,7 +2490,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -2652,7 +2707,6 @@
       "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",
@@ -2896,6 +2950,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/consola": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
+      "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -3793,7 +3856,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -3939,7 +4001,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -4034,7 +4095,6 @@
       "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"
@@ -4300,7 +4360,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -4329,7 +4388,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4349,7 +4407,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -4391,7 +4448,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -4968,7 +5024,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5295,7 +5350,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -5591,7 +5645,6 @@
       "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"
@@ -6770,14 +6823,14 @@
       "license": "MIT"
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.14",
+      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
-      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.4",
+        "fdir": "^6.5.0",
-        "picomatch": "^4.0.2"
+        "picomatch": "^4.0.3"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -6834,7 +6887,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -6962,6 +7014,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/upath": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -7038,24 +7100,24 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.3.5",
+      "version": "7.1.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.5.tgz",
-      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "integrity": "sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
-        "fdir": "^6.4.4",
+        "fdir": "^6.5.0",
-        "picomatch": "^4.0.2",
+        "picomatch": "^4.0.3",
-        "postcss": "^8.5.3",
+        "postcss": "^8.5.6",
-        "rollup": "^4.34.9",
+        "rollup": "^4.43.0",
-        "tinyglobby": "^0.2.13"
+        "tinyglobby": "^0.2.15"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
@@ -7064,14 +7126,14 @@
         "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@types/node": "^20.19.0 || >=22.12.0",
         "jiti": ">=1.21.0",
-        "less": "*",
+        "less": "^4.0.0",
         "lightningcss": "^1.21.0",
-        "sass": "*",
+        "sass": "^1.70.0",
-        "sass-embedded": "*",
+        "sass-embedded": "^1.70.0",
-        "stylus": "*",
+        "stylus": ">=0.54.8",
-        "sugarss": "*",
+        "sugarss": "^5.0.0",
         "terser": "^5.16.0",
         "tsx": "^4.8.1",
         "yaml": "^2.4.2"

frontend/package.json

@@ -16,21 +16,22 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.16.4",
+    "@vueuse/gesture": "^2.0.0",
     "quasar": "^2.16.0",
     "vue": "^3.4.18",
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.14.0",
+    "@quasar/app-vite": "^2.1.0",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "autoprefixer": "^10.4.2",
     "eslint": "^9.14.0",
     "eslint-plugin-vue": "^9.30.0",
     "globals": "^15.12.0",
-    "vite-plugin-checker": "^0.9.0",
+    "postcss": "^8.4.14",
-    "@vue/eslint-config-prettier": "^10.1.0",
     "prettier": "^3.3.3",
-    "@quasar/app-vite": "^2.1.0",
+    "vite-plugin-checker": "^0.9.0"
-    "autoprefixer": "^10.4.2",
-    "postcss": "^8.4.14"
   },
   "engines": {
     "node": "^28 || ^26 || ^24 || ^22 || ^20 || ^18",

frontend/src/css/app.scss

@@ -1 +1,38 @@
 // app global css in SCSS form
+img {
+    -webkit-user-drag: none;
+    user-select: none;
+    pointer-events: none;
+}
+
+.full-width {
+    width: 100%;
+}
+
+
+.dart {
+    position: fixed;
+    transform: translate(-50%, -50%);
+    width: 200px;
+    height: auto;
+    z-index: 1;
+}
+
+.dartBoard {
+    width: 90%;
+    max-width: 600px;
+}
+
+.dartBoardDiv {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.numpadBtn {
+    height: 50px;
+    font-size: 1.5rem;
+    padding: 10px;
+}

frontend/src/css/quasar.variables.scss

@@ -12,9 +12,9 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary: #1976d2;
+$primary: #9c27b0;
-$secondary: #26a69a;
+$secondary: #000000;
-$accent: #9c27b0;
+$accent: #1976d2;
 
 $dark: #1d1d1d;
 $dark-page: #121212;

frontend/src/layouts/MainLayout.vue

@@ -1,7 +1,65 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout view="hHh Lpr fFf">
+
+    <!-- HEADER -->
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn flat dense round icon="menu" @click="drawer = !drawer" />
+        <q-toolbar-title>Hackathon 25 | Digitale Helfer für Dart</q-toolbar-title>
+      </q-toolbar>
+    </q-header>
+
+    <!-- SIDEBAR / DRAWER -->
+    <q-drawer v-model="drawer" show-if-above bordered>
+      <q-list>
+
+        <q-item clickable v-ripple to="/">
+          <q-item-section>
+            Home
+          </q-item-section>
+        </q-item>
+
+        <q-expansion-item
+          label="Tests"
+          icon="folder"
+          dense
+          expand-separator
+          switch-toggle-side
+        >
+          <q-list padding>
+
+            <q-item clickable v-ripple to="/test_DartPicker">
+              <q-item-section>
+                Dart Picker
+              </q-item-section>
+            </q-item>
+
+            <q-item clickable v-ripple to="/test_NumbersPage">
+              <q-item-section>
+                Numbers Input
+              </q-item-section>
+            </q-item>
+
+            <q-item clickable v-ripple to="/test_WebSpeechApi">
+              <q-item-section>
+                Web Speech Api
+              </q-item-section>
+            </q-item>
+
+          </q-list>
+        </q-expansion-item>
+      </q-list>
+    </q-drawer>
+
+    <!-- PAGE CONTAINER -->
     <q-page-container>
       <router-view />
     </q-page-container>
+
   </q-layout>
-</template>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const drawer = ref(false)
+</script>

frontend/src/pages/IndexPage.vue

@@ -1,13 +1,13 @@
 <template>
-  <h1 style="text-align:center">
+  <h1 style = "text-align:center">
-    Hackathon 2025
+    Digitale Helfer für Dart
   </h1>
   
   <q-page class="flex flex-center">
     <img
-      alt="Quasar logo"
+      alt = "Quasar logo"
-      src="~assets/quasar-logo-vertical.svg"
+      src = "~assets/quasar-logo-vertical.svg"
-      style="width: 200px; height: 200px"
+      style = "width: 200px; height: 200px"
     />
   </q-page>
 </template>

frontend/src/pages/testDartPickerPage.vue

@@ -0,0 +1,44 @@
+<template>  
+  <img 
+    src = "~assets//dart.svg" 
+    class = "dart" 
+    ref = "mySvg"
+    :style = "{ top: pos.top + 'px', left: pos.left + 'px' }" 
+  />
+
+  <div class = "dartBoardDiv" v-touch-pan.prevent.mouse = "onPan">
+    <p>X: {{ posRelative.top }} Y: {{ posRelative.left }}</p>
+    
+    <img id = "dartBoard" src = "~assets/dartBoard.svg" />
+  </div>
+</template>
+
+<script setup>
+
+import { ref } from 'vue'
+
+const pos = ref({ top: 0, left: 0 })
+const posRelative = ref({ top: 0, left: 0 })
+
+function onPan({ position, isFinal }) {
+  const offset = -50;
+
+  pos.value.top = position.top + offset
+  pos.value.left = position.left
+
+  
+  const dartBoard = document.getElementById('dartBoard')
+  const dartRect = dartBoard.getBoundingClientRect()
+
+  const centerTop = dartRect.top + dartRect.height / 2
+  const centerLeft = dartRect.left + dartRect.width / 2
+
+  posRelative.value.top = Math.round(position.top - centerTop + offset)
+  posRelative.value.left = Math.round(position.left - centerLeft)
+
+  if (isFinal) {
+    console.log("end")
+  }
+}
+
+</script>

frontend/src/pages/testNumbersPage.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class = "q-pa-lg" style = "max-width: 900px; margin: auto;">
+
+    <q-input
+        filled
+        v-model = "inputValue"
+        label = ""
+        readonly
+    />
+
+
+    <div class = "q-gutter-md">
+        <div class = "row q-gutter-md">
+            <q-btn
+                color = "primary"
+                unelevated
+                class = "col numpadBtn"
+                @click = "appendNumber(1)"
+            >1</q-btn>
+
+            <q-btn
+                color = "primary"
+                unelevated
+                class = "col numpadBtn"
+                @click = "appendNumber(2)"
+            >2</q-btn>
+
+            <q-btn
+                color = "primary"
+                unelevated
+                class = "col numpadBtn"
+                @click = "appendNumber(3)"
+            >3</q-btn>
+        </div>
+
+        <div class = "row q-gutter-md">
+            <q-btn
+                color = "primary"
+                unelevated
+                class = "col numpadBtn"
+                @click = "appendNumber(4)"
+            >4</q-btn>
+
+            <q-btn
+                color = "primary"
+                unelevated
+                class = "col numpadBtn"
+                @click = "appendNumber(5)"
+            >5</q-btn>
+
+            <q-btn
+                color = "primary"
+                unelevated
+                class = "col numpadBtn"
+                @click = "appendNumber(6)"
+            >6</q-btn>
+        </div>
+
+        <div class = "row q-gutter-md">
+            <q-btn
+                color = "primary"
+                unelevated
+                class = "col numpadBtn"
+                @click = "appendNumber(7)"
+            >7</q-btn>
+
+            <q-btn
+                color = "primary"
+                unelevated
+                class = "col numpadBtn"
+                @click = "appendNumber(8)"
+            >8</q-btn>
+
+            <q-btn
+                color = "primary"
+                unelevated
+                class = "col numpadBtn"
+                @click = "appendNumber(9)"
+            >9</q-btn>
+        </div>
+
+        <div class = "row q-gutter-md">
+            <q-btn
+                color = "primary"
+                unelevated
+                class = "col numpadBtn"
+                @click = "appendNumber(0)"
+            >0</q-btn>
+        </div>
+    </div>
+
+
+    <q-btn
+        label = "Enter"
+        color = "secondary"
+        class = "q-mt-md full-width"
+        @click = "onEnter"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const inputValue  =  ref('')
+
+function appendNumber(num) {
+    inputValue.value +=  num
+}
+
+function onEnter() {
+    console.log(inputValue.value)
+    inputValue.value  =  ''
+}
+</script>

frontend/src/pages/testWebSpeechApi.vue

@@ -0,0 +1,48 @@
+<template>
+  <q-page class="flex flex-center">
+    <div class="q-pa-md">
+      <q-btn @click="startRecognition" label="Start" color="primary" />
+      <p class="q-mt-md">Result: {{ transcript }}</p>
+    </div>
+  </q-page>
+</template>
+
+<script>
+// ich glaube das wird hiermit nicht funktonieren
+
+export default {
+  name: 'TestWebSpeechApi',
+  data() {
+    return {
+      transcript: '',
+      recognition: null
+    }
+  },
+  methods: {
+    startRecognition() {
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
+      
+      if (!SpeechRecognition) {
+        this.transcript = 'Speech Recognition not supported in this browser!'
+        return
+      }
+
+      this.recognition = new SpeechRecognition()
+      this.recognition.lang = 'en-EN'
+      this.recognition.interimResults = false
+      this.recognition.maxAlternatives = 1
+
+      this.recognition.onresult = (event) => {
+        this.transcript = event.results[0][0].transcript
+      }
+
+      this.recognition.onerror = (event) => {
+        this.transcript = 'Error: ' + event.error
+      }
+
+      this.recognition.start()
+    }
+  }
+}
+
+</script>

frontend/src/router/routes.js

@@ -2,7 +2,12 @@ const routes = [
   {
     path: '/',
     component: () => import('layouts/MainLayout.vue'),
-    children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
+    children: [
+      { path: '', component: () => import('pages/IndexPage.vue') },
+      { path: 'test_DartPicker', component: () => import('pages/testDartPickerPage.vue') },
+      { path: 'test_NumbersPage', component: () => import('pages/testNumbersPage.vue') },
+      { path: 'test_WebSpeechApi', component: () => import('pages/testWebSpeechApi.vue') }
+    ],
   },
 
   // Always leave this as last one,