added some test pages to the frontend

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;
-$secondary: #26a69a;
-$accent: #9c27b0;
+$primary: #9c27b0;
+$secondary: #000000;
+$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">
-    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>

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,