Onboarding

listify-client/src/app/onboarding/onboarding-overlay.component.html

@@ -0,0 +1,42 @@
+@if (onboarding.currentStep(); as step) {
+  <div class="onboarding-layer">
+    @if (targetBox(); as box) {
+      <div class="onboarding-marker" [style]="markerStyle()"></div>
+    }
+
+    <section
+      class="onboarding-panel"
+      [class.mobile-panel]="isMobile()"
+      [style]="panelStyle()"
+      aria-live="polite"
+    >
+      <div class="step-line">
+        <span>Schritt {{ onboarding.currentStepNumber() }} von {{ onboarding.totalSteps }}</span>
+        <button mat-icon-button type="button" aria-label="Onboarding schliessen" (click)="onboarding.skip()">
+          <mat-icon aria-hidden="true">close</mat-icon>
+        </button>
+      </div>
+
+      <h2>{{ step.title }}</h2>
+      <p>{{ step.body }}</p>
+
+      <div class="onboarding-actions">
+        @if (!hasTarget() && step.key !== 'complete') {
+          <button mat-stroked-button type="button" (click)="goToCurrentStep()">
+            <mat-icon aria-hidden="true">my_location</mat-icon>
+            Zum Schritt
+          </button>
+        }
+
+        @if (step.key === 'complete') {
+          <button mat-flat-button type="button" (click)="onboarding.finish()">
+            <mat-icon aria-hidden="true">check</mat-icon>
+            Fertig
+          </button>
+        } @else {
+          <button mat-button type="button" (click)="onboarding.skip()">Ueberspringen</button>
+        }
+      </div>
+    </section>
+  </div>
+}