public/src/components/ListView.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import {ref} from "vue"
+import {ref, watch} from "vue"
 import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
 import GottesdienstCard from "@/components/GottesdienstCard.vue"
 
+const STORAGE_KEY = "miniplan_list_tutorial_seen"
+
 const props = defineProps<{
     gottesdienste: Gottesdienst[]
     ministranten: SimplifiedMinistrant[]
@@ -22,6 +24,12 @@ const emit = defineEmits<{
 }>()
 
 const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
+const showTutorial = ref(!localStorage.getItem(STORAGE_KEY))
+
+function dismissTutorial() {
+    showTutorial.value = false
+    localStorage.setItem(STORAGE_KEY, "true")
+}
 
 function countXMarks(miniId: number): number {
     return props.marks.filter(m => m.mid === miniId && m.value === 1).length
@@ -81,6 +89,19 @@ function countXMarks(miniId: number): number {
                 </button>
             </div>
         </template>
+
+        <div class="tutorial-overlay" v-if="showTutorial" @click.self="dismissTutorial">
+            <div class="tutorial-card">
+                <h3><i class="icon">info</i> Listenansicht</h3>
+                <ul>
+                    <li><strong>Gottesdienste</strong> sind als Karten dargestellt – jede Karte zeigt Datum, Uhrzeit und Rückmeldungen.</li>
+                    <li>Klicke auf dein <strong>Kästchen</strong> in der Karte, um deine Teilnahme anzugeben: <span class="chip cross">✓</span> dabei, <span class="chip minus">✗</span> nicht dabei.</li>
+                    <li>Die <strong>Rückmeldungen</strong> der anderen siehst du aufgeklappt unter „X Rückmeldungen".</li>
+                    <li v-if="admin">Als Admin siehst du zusätzlich den <strong>Ministranten-Tab</strong> und kannst Markierungen direkt anklicken.</li>
+                </ul>
+                <button @click="dismissTutorial">Verstanden!</button>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -263,6 +284,67 @@ function countXMarks(miniId: number): number {
     }
 }
 
+.tutorial-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 16px;
+
+    .tutorial-card {
+        background: #fff;
+        border-radius: 12px;
+        padding: 28px 32px;
+        max-width: 440px;
+        width: 100%;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+
+        h3 {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin: 0 0 16px;
+            font-size: 20px;
+
+            i {
+                font-size: 26px;
+                color: #555;
+            }
+        }
+
+        ul {
+            margin: 0 0 20px;
+            padding: 0 0 0 18px;
+            line-height: 1.7;
+            font-size: 15px;
+            color: #333;
+
+            li {
+                margin-bottom: 6px;
+            }
+        }
+
+        .chip {
+            display: inline-block;
+            padding: 0 6px;
+            border-radius: 4px;
+            font-size: 13px;
+            font-weight: 700;
+
+            &.cross { background: #d1fcd1; color: #045b04; }
+            &.minus { background: #fdd5d5; color: #690b0b; }
+        }
+
+        button {
+            display: flex;
+            margin-left: auto;
+        }
+    }
+}
+
 .import-btn {
     display: flex;
     width: 100%;