Added Frontend

frontend/components/mobile/FloatingActionButton.vue

@@ -0,0 +1,66 @@
+<script setup>
+const props = defineProps({
+  label: {
+    type: String,
+    required: false,
+    default: null
+  },
+  icon: {
+    type: String,
+    required: false
+  },
+  variant: {
+    type: String,
+    default: "solid"
+  },
+  color: {
+    type: String,
+    default: "primary"
+  },
+  pos: {
+    type: Number,
+    default: 6 // Abstand von unten in Rem (6 = 1.5rem * 6 = 9rem)
+  }
+})
+
+const emit = defineEmits(["click"])
+</script>
+
+<template>
+  <!-- Wrapper für Position + Animation -->
+  <div
+      class="fixed right-5 z-40 transition-all"
+      :style="{ bottom: `calc(${props.pos}rem + env(safe-area-inset-bottom))` }"
+  >
+    <UButton
+        id="fab"
+        :icon="props.icon"
+        :label="props.label"
+        :variant="props.variant"
+        :color="props.color"
+        @click="emit('click')"
+        class="
+          fab-base
+          shadow-xl
+          hover:shadow-2xl
+          active:scale-95
+          transition
+        "
+    />
+  </div>
+</template>
+
+<style scoped>
+/* FAB Basis */
+.fab-base {
+  @apply rounded-full px-5 py-4 text-lg font-semibold;
+
+  /* Wenn nur ein Icon vorhanden ist → runder Kreis */
+  /* Wenn Label + Icon → Extended FAB */
+}
+
+/* Optional: Auto-Kreisen wenn kein Label */
+#fab:not([label]) {
+  @apply w-14 h-14 p-0 flex items-center justify-center text-2xl;
+}
+</style>