added some test pages to the frontend

frontend/src/pages/IndexPage.vue

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