Merge branch 'main' of git.infinimotion.de:infinimotion/frontend

2025-11-19 16:37:56 +01:00
parent f37d9b4478 1ef223c199
commit cf917b580e
40 changed files with 828 additions and 341 deletions
--- a/src/app/app-module.ts
+++ b/src/app/app-module.ts
@@ -23,6 +23,10 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatDialogClose, MatDialogTitle, MatDialogContent, MatDialogActions } from "@angular/material/dialog";
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableModule } from '@angular/material/table';

 import { HeaderComponent } from './header/header.component';
 import { HomeComponent } from './home/home.component';
@@ -62,6 +66,8 @@ import { PurchaseSuccessComponent } from './purchase-success/purchase-success.co
 import { PurchaseFailedComponent } from './purchase-failed/purchase-failed.component';
 import { TicketSmallComponent } from './ticket-small/ticket-small.component';
 import { TicketListComponent } from './ticket-list/ticket-list.component';
+import { StatisticsComponent } from './statistics/statistics.component';
+import { ZoomWarningComponent } from './zoom-warning/zoom-warning.component';
 import { PricelistComponent } from './pricelist/pricelist.component';


@@ -106,6 +112,8 @@ import { PricelistComponent } from './pricelist/pricelist.component';
    PurchaseFailedComponent,
    TicketSmallComponent,
    TicketListComponent,
+    StatisticsComponent,
+    ZoomWarningComponent,
    PricelistComponent,
  ],
  imports: [
@@ -135,6 +143,10 @@ import { PricelistComponent } from './pricelist/pricelist.component';
    NgxMaskDirective,
    NgxMaskPipe,
    QRCodeComponent,
+    MatBadgeModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatTableModule,
  ],
  providers: [
    provideBrowserGlobalErrorListeners(),
--- a/src/app/app-routing-module.ts
+++ b/src/app/app-routing-module.ts
@@ -8,12 +8,13 @@ import { ScheduleComponent } from './schedule/schedule.component';
 import { TheaterOverlayComponent} from './theater-overlay/theater-overlay.component';
 import { MovieImporterComponent } from './movie-importer/movie-importer.component';
 import { AuthGuard } from './auth.guard';
+import {StatisticsComponent} from './statistics/statistics.component';
 import { PricelistComponent } from './pricelist/pricelist.component';

 const routes: Routes = [
  // Seiten ohne Layout
  { path: 'landing', component: HomeComponent },
-  { path: 'poc-model', component: PocModelComponent },
+  { path: 'poc-model', component: PocModelComponent, data: { allowMobile: true } },

  // Seiten mit MainLayout
  {
@@ -28,7 +29,13 @@ const routes: Routes = [
        canActivate: [AuthGuard],
        data: { roles: ['admin'] }, // Array von erlaubten Rollen. Derzeit gäbe es 'admin' und 'employee'
      },
-      { path: 'selection/performance/:id', component: TheaterOverlayComponent},
+      { path: 'performance/:performanceId/checkout', component: TheaterOverlayComponent},
+      {
+        path: 'admin/statistics',
+        component: StatisticsComponent,
+        canActivate: [AuthGuard],
+        data: { roles: ['admin'] }, // Array von erlaubten Rollen. Derzeit gäbe es 'admin' und 'employee'
+      },
      { path: 'prices', component: PricelistComponent },
    ],
  },
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1 +1,2 @@
+<app-zoom-warning></app-zoom-warning>
 <router-outlet />
--- a/src/app/device-detection.service.ts
+++ b/src/app/device-detection.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DeviceDetectionService {
+  private _isMobile: boolean;
+
+  constructor() {
+    this._isMobile = this.checkIfMobile();
+  }
+
+  isMobile(): boolean {
+    return this._isMobile;
+  }
+
+  private checkIfMobile(): boolean {
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isMobileUA = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
+    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    const isSmallScreen = window.innerWidth < 768;
+
+    return isMobileUA || (isTouchDevice && isSmallScreen);
+  }
+
+  recheckDevice(): void {
+    this._isMobile = this.checkIfMobile();
+  }
+}
--- a/src/app/http.service.ts
+++ b/src/app/http.service.ts
@@ -1,4 +1,13 @@
-import { Kinosaal, Sitzplatz, Vorstellung, Film, OmdbSearch, Bestellung, Eintrittskarte } from '@infinimotion/model-frontend';
+import {
+  Kinosaal,
+  Sitzplatz,
+  Vorstellung,
+  Film,
+  OmdbSearch,
+  Bestellung,
+  Eintrittskarte,
+  StatisticsFilm, StatisticsVorstellung
+} from '@infinimotion/model-frontend';
 import { HttpClient } from "@angular/common/http";
 import { inject, Injectable } from "@angular/core";
 import { Observable } from "rxjs";
@@ -44,6 +53,12 @@ export class HttpService {
  }


+  /* POST /api/order-transaction/create */
+  saveAddOrder(req: {order:Bestellung, tickets:Eintrittskarte[]}): Observable<{order:Bestellung, tickets:Eintrittskarte[]}> {
+    return this.http.post<{order: Bestellung, tickets: Eintrittskarte[]}>(`${this.baseUrl}order-transaction/create`, req);
+  }
+
+
  /* Eintrittskarte APIs */

  /* GET /api/eintrittskarte/{id} */
@@ -154,8 +169,12 @@ export class HttpService {
  /* Show-Seats APIs */

  /* GET /api/show-seats/{show} */
-  getSeatsByShowId(show: number): Observable<{seats:Sitzplatz[], reserved:Sitzplatz[], booked:Sitzplatz[]}> {
-    return this.http.get<{seats:Sitzplatz[], reserved:Sitzplatz[], booked:Sitzplatz[]}>(`${this.baseUrl}show-seats/${show}`);
+  getSeatsByShowId(show: number): Observable<{ seats: Sitzplatz[], reserved: Sitzplatz[], booked: Sitzplatz[] }> {
+    return this.http.get<{
+      seats: Sitzplatz[],
+      reserved: Sitzplatz[],
+      booked: Sitzplatz[]
+    }>(`${this.baseUrl}show-seats/${show}`);
  }


@@ -164,12 +183,25 @@ export class HttpService {
  /* GET /api/importer/search */
  searchMovie(query: string): Observable<OmdbSearch> {
    return this.http.get<OmdbSearch>(`${this.baseUrl}importer/search`, {
-      params: { title: query }
+      params: {title: query}
    });
  }

  /* POST /api/importer/import */
  importMovie(imdbId: string): Observable<Film> {
-      return this.http.post<Film>(`${this.baseUrl}importer/import?id=${imdbId}`, {})
+    return this.http.post<Film>(`${this.baseUrl}importer/import?id=${imdbId}`, {})
+  }
+
+
+  /* Statistics APIs */
+
+  /* GET /api/statistics/movies */
+  getMovieStatistics(): Observable<StatisticsFilm[]> {
+    return this.http.get<StatisticsFilm[]>(`${this.baseUrl}statistics/movies`)
+  }
+
+  /* GET /api/statistics/shows */
+  getShowStatistics(): Observable<StatisticsVorstellung[]> {
+    return this.http.get<StatisticsVorstellung[]>(`${this.baseUrl}statistics/shows`)
  }
 }
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -1,11 +1,11 @@
-<div class="flex flex-row items-center justify-center gap-8 h-1/1">
-  <div class="max-w-xl m-auto">
+<div class="flex items-center h-1/1 justify-center space-x-30">
+  <div class="max-w-xl">
    <section class="felx flex-row">
      <div class="flex items-center">
        <h1 class="text-3xl font-bold">
          Willkommen bei
        </h1>
-        <div class="bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent text-3xl font-bold">
+        <div class="bg-linear-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent text-3xl font-bold">
          &nbsp;InfiniMotion
        </div>
        <h1 class="text-3xl font-bold">! 🎬</h1>
@@ -41,7 +41,7 @@
            Wir haben uns bei Gestaltung und Stil bewusst an bestehenden Kinowebsites orientiert.
            Dabei handelt es sich um eine rein stilistische Anlehnung; diese Seite verfolgt keinerlei kommerzielle Zwecke und dient ausschließlich universitären Zwecken.
            Marken, Designs oder Funktionalitäten, die bekannten Anbietern ähneln, sind nicht als Kopie zum Wettbewerb gedacht, sondern als pragmatische Inspirationsquelle im Rahmen der Praxisarbeit.
-            <a href="https://infinimotion.de" target="_blank" class="bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
+            <a href="https://infinimotion.de" target="_blank" class="bg-linear-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
              https://infinimotion.de
            </a>
            wird zum Projektende offline genommen.
@@ -52,57 +52,57 @@
    </section>
  </div>

-  <div class="max-w-md mr-60 mt-10">
-  <mat-vertical-stepper [linear]="false" [selectedIndex]="5" class="always-open-stepper">
+  <div class="mt-10">
+    <mat-vertical-stepper [linear]="false" [selectedIndex]="5" class="always-open-stepper">

-    <mat-step
-      [completed]="isCompleted(0)"
-      [editable]="isEditable(0)">
-      <ng-template matStepLabel>
-        <span>Sprint #0:&nbsp; &nbsp; Planung, Installation und Vorbereitung</span>
-      </ng-template>
-    </mat-step>
+      <mat-step
+        [completed]="isCompleted(0)"
+        [editable]="isEditable(0)">
+        <ng-template matStepLabel>
+          <span>Sprint #0:&nbsp; &nbsp; Planung, Installation und Vorbereitung</span>
+        </ng-template>
+      </mat-step>

-    <mat-step
-      [completed]="isCompleted(1)"
-      [editable]="isEditable(1)">
-      <ng-template matStepLabel>
-        <span>Sprint #1:&nbsp; &nbsp; Programmübersicht</span>
-      </ng-template>
-    </mat-step>
+      <mat-step
+        [completed]="isCompleted(1)"
+        [editable]="isEditable(1)">
+        <ng-template matStepLabel>
+          <span>Sprint #1:&nbsp; &nbsp; Programmübersicht</span>
+        </ng-template>
+      </mat-step>

-    <mat-step
-      [completed]="isCompleted(2)"
-      [editable]="isEditable(2)">
-      <ng-template matStepLabel>
-        <span>Sprint #2:&nbsp; &nbsp; Kinosäle anzeigen</span>
-      </ng-template>
-    </mat-step>
+      <mat-step
+        [completed]="isCompleted(2)"
+        [editable]="isEditable(2)">
+        <ng-template matStepLabel>
+          <span>Sprint #2:&nbsp; &nbsp; Kinosäle anzeigen</span>
+        </ng-template>
+      </mat-step>

-    <mat-step
-      [completed]="isCompleted(3)"
-      [editable]="isEditable(3)">
-      <ng-template matStepLabel>
-        <span>Sprint #3:&nbsp; &nbsp; Vorstellungstickets reservieren und buchen</span>
-      </ng-template>
-    </mat-step>
+      <mat-step
+        [completed]="isCompleted(3)"
+        [editable]="true">
+        <ng-template matStepLabel>
+          <span>Sprint #3:&nbsp; &nbsp; Vorstellungstickets reservieren und buchen</span>
+        </ng-template>
+      </mat-step>

-    <mat-step
-      [completed]="isCompleted(4)"
-      [editable]="isEditable(4)">
-      <ng-template matStepLabel>
-        <span>Sprint #4:&nbsp; &nbsp; Statistiken auswerten und anzeigen</span>
-      </ng-template>
-    </mat-step>
+      <mat-step
+        [completed]="isCompleted(4)"
+        [editable]="isEditable(4)">
+        <ng-template matStepLabel>
+          <span>Sprint #4:&nbsp; &nbsp; Statistiken auswerten und anzeigen</span>
+        </ng-template>
+      </mat-step>

-    <mat-step
-      [completed]="isCompleted(5)"
-      [editable]="isEditable(5)">
-      <ng-template matStepLabel>
-        <span>Sprint #5:&nbsp; &nbsp; Aufbereitung und Optimierung</span>
-      </ng-template>
-    </mat-step>
-
-  </mat-vertical-stepper>
+      <mat-step
+        [completed]="isCompleted(5)"
+        [editable]="isEditable(5)">
+        <ng-template matStepLabel>
+          <span>Sprint #5:&nbsp; &nbsp; Aufbereitung und Optimierung</span>
+        </ng-template>
+      </mat-step>

+    </mat-vertical-stepper>
+  </div>
 </div>
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
  styleUrl: './main.component.css'
 })
 export class MainComponent {
-  currentSprint = 3;
+  currentSprint = 4;

  isCompleted(index: number): boolean {
    return index <= this.currentSprint;
--- a/src/app/menu-header/menu-header.component.html
+++ b/src/app/menu-header/menu-header.component.html
@@ -3,8 +3,8 @@
    @if ( icon() ) {
      <mat-icon style="font-size: 35px; width: 35px; height: 35px; opacity: 50%;">{{ icon() }}</mat-icon>
    }
-    <p class="text-2xl font-medium pl-2 bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
-      {{ title() }}
+    <p class="text-2xl font-medium pl-2 bg-linear-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
+      {{ label() }}
    </p>
  </div>
  @if ( searchBar() ) {
--- a/src/app/menu-header/menu-header.component.ts
+++ b/src/app/menu-header/menu-header.component.ts
@@ -7,7 +7,7 @@ import { Component, input, output } from '@angular/core';
  styleUrl: './menu-header.component.css'
 })
 export class MenuHeaderComponent {
-  title = input.required<string>();
+  label = input.required<string>();
  icon = input<string>();

  searchBar = input<boolean>(false);
--- a/src/app/movie-importer/movie-importer.component.html
+++ b/src/app/movie-importer/movie-importer.component.html
@@ -1,4 +1,4 @@
-<app-menu-header title="Film aus IMDb importieren" icon="cloud_download"></app-menu-header>
+<app-menu-header label="Film aus IMDb importieren" icon="cloud_download"></app-menu-header>

 <div class="w-6/10 m-auto my-20">
  <form class="movie-search-form w-full" (ngSubmit)="DoSubmit()">
--- a/src/app/movie-performance/movie-performance.component.html
+++ b/src/app/movie-performance/movie-performance.component.html
@@ -1,6 +1,6 @@
 <a [routerLink]="route" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105">

-  <div class="bg-gradient-to-r from-indigo-500 to-pink-600 w-full text-center text-white font-medium rounded-t-md py-0.5 px-2">
+  <div class="bg-linear-to-r from-indigo-500 to-pink-600 w-full text-center text-white font-medium rounded-t-md py-0.5 px-2">
    <p>{{ hall() }}</p>
  </div>

--- a/src/app/movie-performance/movie-performance.component.ts
+++ b/src/app/movie-performance/movie-performance.component.ts
@@ -15,7 +15,7 @@ export class MoviePerformanceComponent implements OnInit {
  route: string = '';

  ngOnInit() {
-    this.route = `../selection/performance/${this.id()}`;
+    this.route = `../performance/${this.id()}/checkout`;
  }

  startTime = computed(() =>
--- a/src/app/movie-search/movie-search.component.html
+++ b/src/app/movie-search/movie-search.component.html
@@ -1,16 +1,22 @@
-<form class="movie-search-form w-88">
-  <mat-form-field class="w-full" subscriptSizing="dynamic">
-    <mat-label>Film suchen</mat-label>
-    <input class="w-full" type="text" matInput [formControl]="searchControl" [matAutocomplete]="auto" (click)="searchControl.setValue('')">
+<div class="flex items-center space-x-4">

-    <!-- @if (searchControl.hasError('filmNotFound')) { -->
-      <!-- <mat-error>Film existiert nicht</mat-error> -->
-    <!-- } -->
+  @if (searchControl.value && searchControl.value.length > 0) {
+    <button mat-icon-button #tooltip="matTooltip" matTooltip="Filter löschen" matTooltipPosition="above" class="w-11! h-11! opacity-50" (click)="searchControl.setValue('')">
+      <mat-icon style="font-size: 25px; width: 25px; height: 25px;">filter_alt_off</mat-icon>
+    </button>
+  }

-    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
-      @for (option of filteredOptions | async; track option) {
-        <mat-option [value]="option">{{option}}</mat-option>
-      }
-    </mat-autocomplete>
-  </mat-form-field>
-</form>
+  <form class="movie-search-form w-88">
+    <mat-form-field class="w-full" subscriptSizing="dynamic">
+      <mat-label>Film suchen</mat-label>
+      <input class="w-full" type="text" matInput [formControl]="searchControl" [matAutocomplete]="auto">
+
+      <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+        @for (option of filteredOptions | async; track option) {
+          <mat-option [value]="option">{{option}}</mat-option>
+        }
+      </mat-autocomplete>
+    </mat-form-field>
+  </form>
+
+</div>
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -12,6 +12,7 @@ export class NavbarComponent {
    {label: 'Programm', path: '/schedule'},
    {label: 'Preise', path: '/prices'},
    {label: 'Film importieren', path: '/admin/movie-importer'},
+    {label: 'Statistiken', path: '/admin/statistics'},
  ]

  private auth = inject(AuthService)
--- a/src/app/order/order.component.ts
+++ b/src/app/order/order.component.ts
@@ -161,37 +161,31 @@ export class OrderComponent {


  submitOrder(order: Bestellung, seats: Sitzplatz[], performance: Vorstellung, mode: SubmissionMode) {
-    this.httpService.addOrder(order).pipe(
-      // Order erstellen
-      switchMap(createdOrder => {

-        // Tickets parallel erstellen
-        const ticketObservables = seats.map(seat => {
-          const ticket = this.generateNewTicketObject(performance, seat, createdOrder);
-          return this.httpService.addTicket(ticket);
-        });
+    // Tickets anlegen
+    const tickets = seats.map(seat => {
+      return this.generateNewTicketObject(performance, seat, order);
+    });

-        // Warten bis alles fertig sind
-        return forkJoin(ticketObservables).pipe(
-          tap(createdTickets => {
-            // Success Handling
-            if (mode === 'reservation') {
-              this.orderState.set({
-                status: 'reservation-success',
-                order: createdOrder
-              });
-            } else {
-              this.orderState.set({
-                status: 'purchase-success',
-                tickets: createdTickets
-              });
-            }
+    // Transaktionssicher Sitzplatzbuchung
+    this.httpService.saveAddOrder({order, tickets}).pipe(
+      tap(createdOrderAndTickets => {
+        // Success Handling
+        if (mode === 'reservation') {
+          this.orderState.set({
+            status: 'reservation-success',
+            order: createdOrderAndTickets.order
+          });
+        } else {
+          this.orderState.set({
+            status: 'purchase-success',
+            tickets: createdOrderAndTickets.tickets
+          });
+        }

-            this.selectedSeatsService.commit();
-            this.loadingService.hide();
-            this.showConfetti();
-          })
-        );
+        this.selectedSeatsService.commit();
+        this.loadingService.hide();
+        this.showConfetti();
      }),
      catchError(err => {
        // Error handling
--- a/src/app/performance-info/performance-info.component.html
+++ b/src/app/performance-info/performance-info.component.html
@@ -13,7 +13,7 @@
      <h3 class="opacity-75">{{ getStartTimeString() }} • {{ performance().hall.name }}</h3>
      <h1 class="font-semibold mb-0.5">{{ movie().title }}</h1>
      <div class="flex items-center">
-        <app-movie-rating [rating]="movie().rating" class="rounded-sm shadow-xs px-1 py-0.25 text-sm"></app-movie-rating>
+        <app-movie-rating [rating]="movie().rating" class="rounded-sm shadow-xs px-1 py-px text-sm"></app-movie-rating>
        <app-movie-duration [duration]="movie().duration" [showIcon]="false" class="ml-1.5 opacity-75"></app-movie-duration>
      </div>
  </div>
--- a/src/app/purchase-failed/purchase-failed.component.html
+++ b/src/app/purchase-failed/purchase-failed.component.html
@@ -6,6 +6,6 @@
  <p class="text-center">Leider konnten Ihre Sitzplätze nicht gekauft werden. Dies kann passieren, wenn andere Nutzer zeitgleich versucht haben, dieselben Sitzplätze zu kaufen.</p>

  <button mat-button matButton="filled" class="error-button mt-4 w-80">Erneut versuchen</button>
-  <button routerLink="/schedule" mat-button matButton="outlined" color="accent" class="error-button w-80">Zurück zur Programmauswahl</button>
+  <button routerLink="/schedule" mat-button matButton="outlined" color="accent" class="error-button w-80 mt-1">Zurück zur Programmauswahl</button>
 </div>

--- a/src/app/purchase-success/purchase-success.component.html
+++ b/src/app/purchase-success/purchase-success.component.html
@@ -2,10 +2,10 @@
  <h1 class="text-xl font-bold">Vielen Dank für Ihren Einkauf!</h1>
  <p class="text-center">Ihre Sitzplätze wurden erfolgreich gebucht.</p>

-  <app-ticket-list [tickets]="tickets()" class="w-8/10"></app-ticket-list>
+  <app-ticket-list [tickets]="tickets()" class="w-8/10 my-4"></app-ticket-list>

-  <button mat-button disabled="true" matButton="filled" class="success-button w-80 mt-2">Tickets herunterladen</button>
-  <button routerLink="/schedule" mat-button matButton="outlined" color="accent" class="success-button w-80">Zurück zur Programmauswahl</button>
+  <button mat-button disabled="true" matButton="filled" class="success-button w-80 mt-4">Tickets herunterladen</button>
+  <button routerLink="/schedule" mat-button matButton="outlined" color="accent" class="success-button w-80 mt-1">Zurück zur Programmauswahl</button>

 </div>

--- a/src/app/reservation-failed/reservation-failed.component.html
+++ b/src/app/reservation-failed/reservation-failed.component.html
@@ -6,6 +6,6 @@
  <p class="text-center">Leider konnten Ihre Sitzplätze nicht reserviert werden. Dies kann passieren, wenn andere Nutzer gleichzeitig versucht haben, dieselben Sitzplätze zu reservieren.</p>

  <button mat-button matButton="filled" class="error-button mt-4 w-80">Erneut versuchen</button>
-  <button routerLink="/schedule" mat-button matButton="outlined" color="accent" class="error-button w-80">Zurück zur Programmauswahl</button>
+  <button routerLink="/schedule" mat-button matButton="outlined" color="accent" class="error-button w-80 mt-1">Zurück zur Programmauswahl</button>
 </div>

--- a/src/app/reservation-success/reservation-success.component.html
+++ b/src/app/reservation-success/reservation-success.component.html
@@ -1,17 +1,15 @@
 <div class="bg-green-200 rounded-md shadow-sm w-full h-fit p-6 py-8 items-center justify-center flex flex-col space-y-2">
  <h1 class="text-xl font-bold">Reservierung erfolgreich!</h1>
-  <!-- <p class="text-center">Ihre Sitzplätze wurden reserviert. </p> -->

  <p class="text-center">Ihre Sitzplätze wurden erfolgreich reserviert. Bitte nennen sie den folgenden Code an der Kasse, um Ihre Reservierung in eine Buchung umzuwandeln.</p>
  <div class="bg-white text-5xl font-mono rounded-md shadow-sm w-fit h-fit p-4 py-2 my-4">
    <strong>{{ order().code }}</strong>
  </div>

-  <button routerLink="/schedule" mat-button matButton="filled" class="success-button mt-4 w-80">Zurück zur Programmauswahl</button>
-  <button [disabled]="true" mat-button matButton="outlined" color="accent" class="success-button w-80">Tickets jetzt online bezahlen</button>
-  <div class="text-green-500 cursor-pointer w-fit mt-1" (click)="cancelReservation()">
+  <button [disabled]="true" mat-button matButton="filled" color="accent" class="success-button mt-2 w-80">Tickets jetzt online bezahlen</button>
+  <button routerLink="/schedule" mat-button matButton="outlined" class="success-button mb-4 w-80 mt-1">Zurück zur Programmauswahl</button>
+  <div class="text-green-500 cursor-pointer w-fit mt-2" (click)="cancelReservation()">
    Reservierung stornieren
  </div>

 </div>
-
--- a/src/app/schedule/schedule.component.css
+++ b/src/app/schedule/schedule.component.css
@@ -5,3 +5,7 @@
 ::ng-deep .mat-mdc-tab .mdc-tab-indicator__content--underline {
  border-color: #6366f1 !important; /* indigo-500 */
 }
+
+.mat-badge-content {
+    background: #dd2979;
+}
--- a/src/app/schedule/schedule.component.html
+++ b/src/app/schedule/schedule.component.html
@@ -1,20 +1,25 @@
-<app-menu-header title="Programmübersicht" icon="event" [searchBar]="true" (movieSearchResult)="movieSearchResult = $event"></app-menu-header>
+<app-menu-header label="Programmübersicht" icon="event" [searchBar]="true" (movieSearchResult)="movieSearchResult = $event"></app-menu-header>

 <mat-tab-group mat-stretch-tabs>
  @for (dateInfo of dates; track dateInfo.date; let i = $index) {
    <mat-tab [label]="dateInfo.label">
+      <ng-template mat-tab-label>
+        <span [matBadge]="getMovieCount(i)" matBadgeOverlap="false" [matBadgeHidden]="!isSearch() || getMovieCount(i) === 0" [class]="(isSearch() && getMovieCount(i) === 0)? 'text-gray-300' : ''">
+          {{ dateInfo.label }}
+        </span>
+      </ng-template>
      @if (getMovieCount(i) > 0) {
-        @if (hasSearchResults(i)) {
-          @for (group of dateInfo.performances; track group.movie.id) {
-            @if (group.movie.title.toLowerCase().includes(movieSearchResult.toLowerCase())) {
-              <app-movie-schedule-info [movieGroup]="group"></app-movie-schedule-info>
-            }
+        @for (group of dateInfo.performances; track group.movie.id) {
+          @if (group.movie.title.toLowerCase().includes(movieSearchResult.toLowerCase())) {
+            <app-movie-schedule-info [movieGroup]="group"></app-movie-schedule-info>
          }
-        } @else {
-          <app-movie-schedule-no-search-result [search]="movieSearchResult" [date]="dates[i].date" ></app-movie-schedule-no-search-result>
        }
      } @else {
-        <app-movie-schedule-empty></app-movie-schedule-empty>
+        @if (isSearch()) {
+          <app-movie-schedule-no-search-result [search]="movieSearchResult" [date]="dates[i].date"></app-movie-schedule-no-search-result>
+        } @else {
+          <app-movie-schedule-empty></app-movie-schedule-empty>
+        }
      }
    </mat-tab>
  }
--- a/src/app/schedule/schedule.component.ts
+++ b/src/app/schedule/schedule.component.ts
@@ -31,15 +31,7 @@ export class ScheduleComponent implements OnInit {
    this.loadPerformances(this.bookableDays);
  }

-  hasSearchResults(dateIndex: number): boolean {
-    if (!this.movieSearchResult) return true;
-
-    return this.dates[dateIndex].performances.some(group =>
-      group.movie.title.toLowerCase().includes(this.movieSearchResult.toLowerCase())
-    );
-  }
-
-  generateDates(bookableDays: number) {
+  private generateDates(bookableDays: number) {
    const today = new Date();
    for (let i = 0; i < bookableDays; i++) {
      const date = new Date(today);
@@ -58,7 +50,7 @@ export class ScheduleComponent implements OnInit {
    }
  }

-  loadPerformances(bookableDays: number) {
+  private loadPerformances(bookableDays: number) {
    this.loading.show();
    const filter = this.generateDateFilter(bookableDays);
    this.http.getPerformacesByFilter(filter).pipe(
@@ -75,22 +67,21 @@ export class ScheduleComponent implements OnInit {
    ).subscribe();
  }

-private generateDateFilter(bookableDays: number): string[] {
-  const startDate = new Date();
-  const endDate = new Date();
-  endDate.setDate(startDate.getDate() + bookableDays - 1);
+  private generateDateFilter(bookableDays: number): string[] {
+    const startDate = new Date();
+    const endDate = new Date();
+    endDate.setDate(startDate.getDate() + bookableDays - 1);

-  const startStr = startDate.toISOString().split('T')[0] + 'T00:00:00';
-  const endStr = endDate.toISOString().split('T')[0] + 'T23:59:59';
+    const startStr = startDate.toISOString().split('T')[0] + 'T00:00:00';
+    const endStr = endDate.toISOString().split('T')[0] + 'T23:59:59';

-  return [
-    `ge;start;date;${startStr}`,
-    `le;start;date;${endStr}`,
-  ];
-}
+    return [
+      `ge;start;date;${startStr}`,
+      `le;start;date;${endStr}`,
+    ];
+  }

-
-  assignPerformancesToDates() {
+  private assignPerformancesToDates() {

    // Gruppieren nach Datum
    const groupedByDate: { [key: string]: Vorstellung[] } = {};
@@ -133,6 +124,22 @@ private generateDateFilter(bookableDays: number): string[] {
  }

  getMovieCount(index: number): number {
-    return this.dates[index].performances.length;
+    if (!this.dates[index]?.performances) {
+      return 0;
+    }
+
+    const performances = this.dates[index].performances;
+
+    if (!this.isSearch()) {
+      return performances.length;
+    }
+
+    return performances.filter(group =>
+      group.movie.title.toLowerCase().includes(this.movieSearchResult.toLowerCase())
+    ).length;
+  }
+
+  isSearch(): boolean {
+    return !!this.movieSearchResult && this.movieSearchResult.trim() !== '';
  }
 }
--- a/src/app/seat-row/seat-row.component.css
+++ b/src/app/seat-row/seat-row.component.css
@@ -1 +1,6 @@
-
+.empty-seat-space {
+  width: 30px;
+  /* Keine Ahnung, wo die zusätzlichen 6.5px herkommen müssen. Wir sonst dünner angezeigt */
+  height: 36.5px;
+  /* height: 30px; */
+}
--- a/src/app/seat-row/seat-row.component.html
+++ b/src/app/seat-row/seat-row.component.html
@@ -1,3 +1,8 @@
@for (entry of rowSeatList(); track $index) {
-  <app-seat class="my-1" [state]="entry.state" [seat]="entry.seat"></app-seat>
+
+  @if (entry.seat != null && entry.state != null) {
+    <app-seat class="my-1" [seat]="entry.seat" [state]="entry.state" ></app-seat>
+  } @else {
+    <div class="empty-seat-space my-1 mx-0.5"></div>
+  }
 }
--- a/src/app/seat-row/seat-row.component.ts
+++ b/src/app/seat-row/seat-row.component.ts
@@ -9,5 +9,5 @@ import {TheaterSeatState} from '../model/theater-seat-state.model';
  styleUrl: './seat-row.component.css'
 })
 export class SeatRowComponent {
-  rowSeatList = input.required<{ seat: Sitzplatz, state: TheaterSeatState }[]>();
+  rowSeatList = input.required<{ seat: Sitzplatz | null, state: TheaterSeatState | null }[]>();
 }
--- a/src/app/statistics/statistics.component.css
+++ b/src/app/statistics/statistics.component.css
--- a/src/app/statistics/statistics.component.html
+++ b/src/app/statistics/statistics.component.html
@@ -0,0 +1,85 @@
+<app-menu-header label="Statistiken"></app-menu-header>
+
+  <div class="table-table-container">
+
+    <table mat-table [dataSource]="movies" class="example-table">
+
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef>ID</th>
+        <td mat-cell *matCellDef="let row">{{row.movieId}}</td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="title">
+        <th mat-header-cell *matHeaderCellDef>Titel</th>
+        <td mat-cell *matCellDef="let row">{{row.movieTitle}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="earnings">
+        <th mat-header-cell *matHeaderCellDef>
+          Umsatz
+        </th>
+        <td mat-cell *matCellDef="let row">{{(row.earnings/100).toFixed(2)}} €</td>
+      </ng-container>
+
+      <ng-container matColumnDef="tickets">
+        <th mat-header-cell *matHeaderCellDef>
+          Gebuchte Tickets
+        </th>
+        <td mat-cell *matCellDef="let row">{{row.tickets}}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="moviesDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: moviesDisplayedColumns;"></tr>
+    </table>
+  </div>
+
+  <mat-paginator [length]="movieResultsLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
+
+
+<div class="show-table-container">
+
+  <table mat-table [dataSource]="shows" class="example-table">
+
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef>ID</th>
+      <td mat-cell *matCellDef="let row">{{row.showId}}</td>
+    </ng-container>
+
+
+    <ng-container matColumnDef="hall">
+      <th mat-header-cell *matHeaderCellDef>Kinosaal</th>
+      <td mat-cell *matCellDef="let row">{{row.showHallName}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="movie_title">
+      <th mat-header-cell *matHeaderCellDef>Film Name</th>
+      <td mat-cell *matCellDef="let row">{{row.movieTitle}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="date">
+      <th mat-header-cell *matHeaderCellDef>Datum</th>
+      <td mat-cell *matCellDef="let row">{{formatDate(row.showStart)}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="earnings">
+      <th mat-header-cell *matHeaderCellDef>
+        Umsatz
+      </th>
+      <td mat-cell *matCellDef="let row">{{(row.earnings/100).toFixed(2)}} €</td>
+    </ng-container>
+
+    <ng-container matColumnDef="tickets">
+      <th mat-header-cell *matHeaderCellDef>
+        Gebuchte Tickets
+      </th>
+      <td mat-cell *matCellDef="let row">{{row.tickets}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="showsDisplayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: showsDisplayedColumns;"></tr>
+  </table>
+</div>
+
+<mat-paginator [length]="showsResultLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
+
--- a/src/app/statistics/statistics.component.ts
+++ b/src/app/statistics/statistics.component.ts
@@ -0,0 +1,56 @@
+import {Component, inject} from '@angular/core';
+import {HttpService} from '../http.service';
+import {
+  StatisticsFilm,
+  StatisticsVorstellung,
+} from '@infinimotion/model-frontend';
+import {LoadingService} from '../loading.service';
+import {firstValueFrom, forkJoin} from 'rxjs';
+
+@Component({
+  selector: 'app-statistics',
+  standalone: false,
+  templateUrl: './statistics.component.html',
+  styleUrl: './statistics.component.css',
+})
+export class StatisticsComponent {
+  private http = inject(HttpService);
+  protected movies: StatisticsFilm[] = [];
+  protected shows: StatisticsVorstellung[] = [];
+  protected moviesDisplayedColumns: string[] = ['id', 'title', 'earnings', 'tickets'];
+  protected showsDisplayedColumns: string[] = ['id', 'hall', 'movie_title', 'date', 'earnings', 'tickets'];
+  protected movieResultsLength: number = 0;
+  protected showsResultLength: number = 0;
+
+  private loading = inject(LoadingService);
+
+  ngOnInit(): void {
+    this.loading.show()
+    this.loadData().then();
+  }
+
+  async loadData() {
+    let movieRequest = this.http.getMovieStatistics();
+    let showRequest = this.http.getShowStatistics();
+    let movieResponse = await firstValueFrom(movieRequest);
+    let showResponse = await firstValueFrom(showRequest);
+    this.movies = movieResponse
+    this.shows = showResponse
+    if (this.movies.length / 30 < 1) {
+      this.movieResultsLength = 1;
+    } else {
+      this.movieResultsLength = Math.ceil(this.movies.length / 30);
+    }
+    if (this.shows.length / 30 < 1) {
+      this.showsResultLength = 1;
+    } else {
+      this.showsResultLength = Math.ceil(this.shows.length / 30);
+    }
+    this.loading.hide();
+  }
+
+  formatDate(date: Date) {
+    return new Date(date).toLocaleString("de");
+  }
+
+}
--- a/src/app/theater-layout/theater-layout.component.html
+++ b/src/app/theater-layout/theater-layout.component.html
@@ -3,12 +3,12 @@
    Leinwand
  </p>
 </div>
-<div>
+<div class="mb-5">
  @for (row of seatsPerRow(); track $index) {
    <div class="flex items-center justify-between">

      <!-- Speaker -->
-      <div class="shrink-0 pl-25">
+      <div class="shrink-0 pl-20">
        @if ($index % 4 === 0) {
          <mat-icon class="material-symbols-outlined opacity-25" style="font-size: 30px; width: 30px; height: 30px">
            speaker
@@ -25,7 +25,7 @@
      <app-seat-row class="flex justify-center" [rowSeatList]="row"></app-seat-row>

      <!-- Speaker -->
-      <div class="shrink-0 pr-25">
+      <div class="shrink-0 pr-20">
        @if ($index % 4 === 0) {
          <mat-icon class="material-symbols-outlined opacity-25 mirrored" style="font-size: 30px; width: 30px; height: 30px">
            speaker
--- a/src/app/theater-layout/theater-layout.component.ts
+++ b/src/app/theater-layout/theater-layout.component.ts
@@ -10,7 +10,7 @@ import {TheaterSeatState} from '../model/theater-seat-state.model';
  styleUrl: './theater-layout.component.css'
 })
 export class TheaterLayoutComponent {
-  seatsPerRow = input.required<{ seat: Sitzplatz, state: TheaterSeatState }[][]>();
+  seatsPerRow = input.required<{ seat: Sitzplatz | null, state: TheaterSeatState | null }[][]>();

  protected selectedSeatsService = inject(SelectedSeatsService);
 }
--- a/src/app/theater-overlay/theater-overlay.component.html
+++ b/src/app/theater-overlay/theater-overlay.component.html
@@ -1,8 +1,8 @@
-<app-menu-header title="Vorstellungstickets kaufen" icon="local_activity" [backToSchedule]="true"></app-menu-header>
+<app-menu-header label="Vorstellungstickets kaufen" icon="local_activity" [backToSchedule]="true"></app-menu-header>

-<div class="flex justify-between h-100">
+<div class="flex h-fit">

-  <div class="w-7/10 p-10 h-188">
+  <div class="w-7/10 p-10 h-fit">
    <div>
      @if (!performance && (loading.loading$ | async)){
        <div class="w-full h-full flex items-center justify-center mt-70">
@@ -18,6 +18,6 @@
    </div>
  </div>

-  <app-order class="m-10 mr-20 w-3/10" [performance]="performance" [seatCategories]="seatCategories"></app-order>
+  <app-order class="mt-10 mr-30 w-3/10" [performance]="performance" [seatCategories]="seatCategories"></app-order>

 </div>
--- a/src/app/theater-overlay/theater-overlay.component.ts
+++ b/src/app/theater-overlay/theater-overlay.component.ts
@@ -25,7 +25,8 @@ export class TheaterOverlayComponent implements OnInit, OnDestroy  {
  readonly loading = inject(LoadingService);

  showId!: number;
-  seatsPerRow = signal<{ seat: Sitzplatz, state: TheaterSeatState }[][]>([]);
+  orderId?: string;
+  seatsPerRow = signal<{ seat: Sitzplatz | null, state: TheaterSeatState | null }[][]>([]);
  performance: Vorstellung | undefined;
  seatCategories: Sitzkategorie[] = [];

@@ -33,7 +34,8 @@ export class TheaterOverlayComponent implements OnInit, OnDestroy  {
  private isInitialLoad = signal(true);

  ngOnInit() {
-    this.showId = Number(this.route.snapshot.paramMap.get('id')!);
+    this.showId = Number(this.route.snapshot.paramMap.get('performanceId')!);
+    this.orderId = this.route.snapshot.queryParams['paramName'];
    this.selectedSeatService.clearSelection();
    this.selectedSeatService.setSeatSelectable(true);

@@ -90,12 +92,13 @@ export class TheaterOverlayComponent implements OnInit, OnDestroy  {
  }

  converter(resp: { seats: Sitzplatz[], reserved: Sitzplatz[], booked: Sitzplatz[] }): {
-    seat: Sitzplatz,
-    state: TheaterSeatState
+    seat: Sitzplatz | null,
+    state: TheaterSeatState | null
  }[][] {
-    let rows: { seat: Sitzplatz, state: TheaterSeatState }[][] = [];
+    let rows: { seat: Sitzplatz | null, state: TheaterSeatState | null }[][] = [];
    const categoryMap = new Map<number, Sitzkategorie>();

+    // Sitzplätze sammeln
    resp.seats.forEach(seat => {
      if (!rows[seat.row.position]) {
        rows[seat.row.position] = [];
@@ -114,9 +117,50 @@ export class TheaterOverlayComponent implements OnInit, OnDestroy  {

    this.seatCategories = Array.from(categoryMap.values()).sort((a, b) => a.id - b.id);

-    rows = rows.filter(row => row.length > 0).sort((a, b) => a[0].seat.row.position - b[0].seat.row.position);
-    rows.forEach(row => row.sort((a, b) => a.seat.position - b.seat.position));
-    return rows;
+    rows = rows.filter(row => row && row.length > 0).sort((a, b) => a[0].seat!.row.position - b[0].seat!.row.position);
+
+    if (rows.length === 0) {
+      return [];
+    }
+
+    // Leere Plätze auffüllen
+    const filledSeats: { seat: Sitzplatz | null, state: TheaterSeatState | null }[][] = [];
+
+    rows.forEach(row => {
+      row.sort((a, b) => a.seat!.position - b.seat!.position)
+
+      const minPos = row[0].seat!.position;
+      const maxPos = row[row.length - 1].seat!.position;
+      const filledRow: { seat: Sitzplatz | null, state: TheaterSeatState | null }[] = [];
+
+      for (let pos = minPos; pos <= maxPos; pos++) {
+        const existingSeat = row.find(s => s.seat!.position === pos);
+        if (existingSeat) {
+          filledRow.push(existingSeat);
+        } else {
+          filledRow.push({ seat: null, state: null });
+        }
+      }
+
+      filledSeats.push(filledRow);
+    });
+
+    // Leere Reihen auffüllen
+    const minRowPos = rows[0][0].seat!.row.position;
+    const maxRowPos = rows[rows.length - 1][0].seat!.row.position;
+    const filledRows: { seat: Sitzplatz | null, state: TheaterSeatState | null }[][] = [];
+
+    let processedIndex = 0;
+    for (let rowPos = minRowPos; rowPos <= maxRowPos; rowPos++) {
+      if (processedIndex < filledSeats.length && filledSeats[processedIndex][0].seat!.row.position === rowPos) {
+        filledRows.push(filledSeats[processedIndex]);
+        processedIndex++;
+      } else {
+        filledRows.push([{ seat: null, state: null }]);
+      }
+    }
+
+    return filledRows;
  }

  refreshSeats(): void {
--- a/src/app/zoom-detection.service.ts
+++ b/src/app/zoom-detection.service.ts
@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ZoomDetectionService {
+  private zoomLevel$ = new BehaviorSubject<number>(this.getZoomLevel());
+
+  constructor() {
+    // Zoom-Änderungen überwachen
+    fromEvent(window, 'resize')
+      .pipe(debounceTime(200))
+      .subscribe(() => {
+        this.zoomLevel$.next(this.getZoomLevel());
+      });
+  }
+
+  getZoomLevel(): number {
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    return devicePixelRatio;
+  }
+
+  getZoomLevel$() {
+    return this.zoomLevel$.asObservable();
+  }
+
+  isZoomOutOfRange(minZoom: number = 0.95, maxZoom: number = 1.05): boolean {
+    const currentZoom = this.getZoomLevel();
+    return currentZoom < minZoom || currentZoom > maxZoom;
+  }
+}
--- a/src/app/zoom-warning/zoom-warning.component.css
+++ b/src/app/zoom-warning/zoom-warning.component.css
@@ -0,0 +1,14 @@
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.zoom-info-box {
+  animation: slideIn 0.3s ease-out;
+}
--- a/src/app/zoom-warning/zoom-warning.component.html
+++ b/src/app/zoom-warning/zoom-warning.component.html
@@ -0,0 +1,81 @@
+@if (isOutOfRange && !isDismissed && !isMobile) {
+  <div class="zoom-info-box fixed bottom-5 right-5 z-9999 w-[500px] bg-amber-300 border-4 border-dashed rounded-md shadow-lg p-6 py-8 items-center justify-center flex flex-col space-y-2 origin-bottom-right transition-all duration-300" [style.transform]="getCompensationTransform()">
+    <button
+      (click)="dismissWarning()"
+      class="absolute top-2 right-2 w-10 h-10 flex items-center justify-center rounded-full hover:bg-amber-400 transition-colors"
+      aria-label="Warnung schließen">
+      <span class="text-3xl leading-none">×</span>
+    </button>
+
+    <div class="relative mb-5">
+      <mat-icon class="material-symbols-outlined" style="font-size: 100px; width: 100px; height: 100px">
+        screenshot_monitor
+      </mat-icon>
+      <mat-icon class="material-symbols-outlined absolute top-[calc(50%-9px)] left-1/2 -translate-x-1/2 -translate-y-1/2" style="font-size: 30px; width: 30px; height: 30px">
+        warning
+      </mat-icon>
+    </div>
+
+    <h1 class="text-xl font-bold">Browser-Zoom nicht optimal!</h1>
+    <p class="text-center">Ihr Browser-Zoom ist auf <strong>{{ currentZoomPercentage }}%</strong> eingestellt.<br>Für die beste Darstellung empfehlen wir <strong>100%</strong>.</p>
+
+    <div class="mt-4 text-sm space-y-3 w-full">
+      <div class="bg-white/50 rounded p-3">
+        <p class="font-semibold mb-2">Browser-Zoom zurücksetzen:</p>
+        <div class="space-y-1 ml-1">
+          <p class="flex items-center gap-1.5">
+            <kbd class="px-2 py-1 bg-white rounded shadow border border-gray-500 font-mono text-xs">Strg</kbd>
+            <span>/</span>
+            <kbd class="px-2 py-1 bg-white rounded shadow border border-gray-500 font-mono text-xs">⌘</kbd>
+            <span>+</span>
+            <kbd class="px-2 py-1 bg-white rounded shadow border border-gray-500 font-mono text-xs">0</kbd>
+            <span class="px-1">(Windows, Linux / Mac)</span>
+          </p>
+        </div>
+      </div>
+
+      <div class="bg-white/50 rounded p-3">
+        <p class="font-semibold mb-2">Windows-Skalierung prüfen:</p>
+        <ol class="list-decimal ml-6 space-y-1">
+          <li>Öffnen Sie die <strong>Windows-Einstellungen</strong></li>
+          <li>Navigieren Sie zu <strong>System</strong> → <strong>Bildschirm</strong></li>
+          <li>Setzen Sie unter <strong>"Skalierung"</strong> den Wert auf <strong>100%</strong></li>
+        </ol>
+      </div>
+    </div>
+  </div>
+}
+
+@if (showMobileWarning) {
+  <div class="header z-99999 px-8 pt-4 pb-3 relative bg-white text-center">
+    <div class="flex items-center justify-center space-x-4 transition m-auto">
+      <img src="assets/logo.png" class="h-10 w-10 transform scale-175 translate-y-px" />
+      <h1 class="text-3xl font-semibold tracking-wide">InfiniMotion</h1>
+    </div>
+  </div>
+  <div class="fixed inset-0 z-99998 bg-amber-300 flex items-center justify-center p-6">
+    <div class="max-w-md w-full text-center space-y-6 mt-10">
+      <div class="relative inline-block">
+        <mat-icon class="material-symbols-outlined" style="font-size: 120px; width: 120px; height: 120px">
+          screenshot_monitor
+        </mat-icon>
+        <mat-icon class="material-symbols-outlined absolute top-[calc(50%-11px)] left-1/2 -translate-x-1/2 -translate-y-1/2" style="font-size: 35px; width: 35px; height: 35px">
+          warning
+        </mat-icon>
+      </div>
+
+      <h1 class="text-2xl font-bold text-gray-800">Nur am PC verfügbar</h1>
+
+      <p class="text-base text-gray-700">
+        Diese Anwendung ist für die Nutzung am <strong>Desktop-PC</strong> optimiert und kann auf mobilen Geräten nicht verwendet werden.
+      </p>
+
+      <div class="text-xs text-gray-600 mt-12">
+        <p>Deine derzeitige URL:</p>
+        <p class="font-mono bg-white/70 px-3 py-2 rounded mt-1 break-all">
+          {{ currentUrl }}
+        </p>
+      </div>
+    </div>
+  </div>
+}
--- a/src/app/zoom-warning/zoom-warning.component.ts
+++ b/src/app/zoom-warning/zoom-warning.component.ts
@@ -0,0 +1,100 @@
+import { DeviceDetectionService } from './../device-detection.service';
+import { Component, HostListener, inject, OnDestroy, OnInit } from '@angular/core';
+import { filter, Subject, takeUntil } from 'rxjs';
+import { ZoomDetectionService } from '../zoom-detection.service';
+import { NavigationEnd, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-zoom-warning',
+  standalone: false,
+  templateUrl: './zoom-warning.component.html',
+  styleUrl: './zoom-warning.component.css',
+})
+export class ZoomWarningComponent implements OnInit, OnDestroy {
+  currentZoomPercentage = 100;
+  isOutOfRange = false;
+  isDismissed = false;
+  isMobile = false;
+  showMobileWarning = false;
+  currentUrl = '';
+
+  private destroy$ = new Subject<void>();
+  private currentZoomLevel = 1;
+  private lastZoomLevel = 0;
+
+  zoomDetectionService = inject(ZoomDetectionService);
+  deviceDetectionService = inject(DeviceDetectionService)
+
+  constructor(private router: Router) {
+    this.isMobile = this.deviceDetectionService.isMobile();
+    this.currentUrl = window.location.href;
+    this.checkIfShouldShowMobileWarning();
+  }
+
+  ngOnInit() {
+    this.router.events
+      .pipe(
+        filter(event => event instanceof NavigationEnd),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(() => {
+        this.checkIfShouldShowMobileWarning();
+      });
+
+    if (!this.isMobile) {
+      this.updateZoomInfo();
+
+      this.zoomDetectionService.getZoomLevel$()
+        .pipe(takeUntil(this.destroy$))
+        .subscribe((newZoomLevel) => {
+          if (Math.abs(newZoomLevel - this.lastZoomLevel) > 0.01) {
+            this.lastZoomLevel = newZoomLevel;
+            this.isDismissed = false;
+            this.updateZoomInfo();
+          }
+        });
+    }
+  }
+
+  private checkIfShouldShowMobileWarning() {
+    if (!this.isMobile) {
+      this.showMobileWarning = false;
+      return;
+    }
+
+    const currentRoute = this.router.routerState.root;
+    const allowMobile = this.getRouteData(currentRoute, 'allowMobile');
+
+    this.showMobileWarning = !allowMobile;
+  }
+
+  private getRouteData(route: any, key: string): any {
+    while (route) {
+      if (route.snapshot?.data?.[key] !== undefined) {
+        return route.snapshot.data[key];
+      }
+      route = route.firstChild;
+    }
+    return false;
+  }
+
+  private updateZoomInfo() {
+    this.currentZoomLevel = this.zoomDetectionService.getZoomLevel();
+    this.currentZoomPercentage = Math.round(this.currentZoomLevel * 100);
+    this.isOutOfRange = this.zoomDetectionService.isZoomOutOfRange();
+  }
+
+  getCompensationTransform(): string {
+    const scale = 1 / this.currentZoomLevel;
+    return `scale(${scale})`;
+  }
+
+  dismissWarning() {
+    this.isDismissed = true;
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}