From e064c92a5cca0273a4012ca1fa48b14a9dece7a7 Mon Sep 17 00:00:00 2001
From: Piet Ostendorp <piet@ostendorp-online.de>
Date: Fri, 28 Nov 2025 19:15:46 +0100
Subject: [PATCH] UI improvements and stepper logic updates

Enhanced home page with gradient button and arrow styling, updated main stepper to show confirmed state for last step, and adjusted global stepper options. Fixed movie search observable initialization timing. Minor layout and validation UI tweaks in ticket and test components. Disabled mobile access for employee ticket validation route.
---
 src/app/app-routing-module.ts                  |  2 +-
 src/app/home/home.component.css                | 13 +++++++++++++
 src/app/home/home.component.html               | 18 +++++++++++++++++-
 src/app/main/main.component.css                |  9 +++++++--
 src/app/main/main.component.html               |  8 ++++++--
 src/app/main/main.component.ts                 | 11 +++++++++--
 src/app/movie-search/movie-search.component.ts | 10 +++++-----
 src/app/test/test.component.html               |  1 +
 .../ticket-small/ticket-small.component.html   |  2 +-
 .../ticket-validation.component.html           |  4 ++--
 10 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/src/app/app-routing-module.ts b/src/app/app-routing-module.ts
index c9fa9fe..d9783f1 100644
--- a/src/app/app-routing-module.ts
+++ b/src/app/app-routing-module.ts
@@ -61,7 +61,7 @@ const routes: Routes = [
         path: 'employee/validation/ticket',
         component: TicketValidationComponent,
         canActivate: [AuthGuard],
-        data: { roles: ['employee'], allowMobile: true  },
+        data: { roles: ['employee'], allowMobile: false  },
       },
       {
         path: 'employee/validation/ticket/:ticketId',
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
index 3b83a8f..72a6abc 100644
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
@@ -13,3 +13,16 @@
 }
 
 .animate-fade-logo { animation: fade 1.5s 0.5s ease forwards; opacity: 0; }
+
+.arrow {
+  font-size: 30px;
+  height: 30px;
+  width: 30px;
+  color:#9f9fa9;
+
+  &:is(:where(.group):hover *) {
+    @media (hover: hover) {
+      color: #db2777;
+    }
+  }
+}
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index cd1a3aa..ae55682 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -9,11 +9,27 @@
       </div>
       <div class="text-left flex flex-col justify-center">
         <h1 class="text-6xl font-bold animate-fadeUp">InfiniMotion</h1>
-        <h2 class="text-4xl font-bold animate-fadeUp-delay bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
+        <h2 class="text-4xl font-bold animate-fadeUp-delay bg-linear-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
           Absolut war gestern, Bewegung ist heute!
         </h2>
       </div>
     </div>
+<div class="mt-5 ml-48 flex">
+  <a routerLink="/schedule" class="group relative inline-flex items-center gap-2 cursor-pointer">
+    <!-- Text mit Gradient & Unterstreichung -->
+    <span class="relative text-3xl font-bold bg-clip-text text-transparent bg-linear-to-r from-zinc-400 to-zinc-400 transition-all duration-300 ease-in-out group-hover:from-indigo-500 group-hover:to-pink-600">
+      Jetzt erkunden
+      <!-- Unterstreichung nur unter Text -->
+      <span class="absolute left-0 -bottom-1 h-1 w-0 bg-linear-to-r from-indigo-500 to-pink-600 rounded transition-all duration-300 ease-in-out group-hover:w-full"></span>
+    </span>
+
+    <!-- Pfeil separat mit Textfarbe des Gradients -->
+    <mat-icon class="arrow transform transition-transform duration-300 ease-in-out group-hover:translate-x-2 group-hover:-rotate-45">
+      arrow_right_alt
+    </mat-icon>
+  </a>
+</div>
+
   </div>
 
   <div class="absolute bottom-5 left-5 text-gray-400 z-10">
diff --git a/src/app/main/main.component.css b/src/app/main/main.component.css
index 1a13e36..468a3e5 100644
--- a/src/app/main/main.component.css
+++ b/src/app/main/main.component.css
@@ -1,6 +1,12 @@
-::ng-deep .mat-step-header .mat-step-icon {
+/* ::ng-deep .mat-step-header .mat-step-icon {
   background-color: #ccc;
   color: white;
+} */
+
+/* Keine Ahnung, wie man sonst die letzte Box grün bekommen soll... */
+::ng-deep .mat-step-header .mat-step-icon {
+  background-color: #30d64c;
+  color: white;
 }
 
 ::ng-deep .mat-step-icon-state-edit {
@@ -8,7 +14,6 @@
   color: white;
 }
 
-
 ::ng-deep .mat-step-icon-state-done {
   background-color: #30d64c !important;
   color: white;
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index dff4f2e..a91fd19 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -96,8 +96,12 @@
       </mat-step>
 
       <mat-step
-        [completed]="isCompleted(5)"
-        [editable]="isEditable(5)">
+        [completed]="true"
+        [editable]="false"
+        state="CONFIRMED">
+        <ng-template matStepperIcon="CONFIRMED">
+          <mat-icon>check</mat-icon>
+        </ng-template>
         <ng-template matStepLabel>
           <span>Sprint #5:&nbsp; &nbsp; Aufbereitung und Optimierung</span>
         </ng-template>
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index 9596873..63e45d2 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -1,13 +1,20 @@
+import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-main',
   standalone: false,
   templateUrl: './main.component.html',
-  styleUrl: './main.component.css'
+  styleUrl: './main.component.css',
+  providers: [
+    {
+      provide: STEPPER_GLOBAL_OPTIONS,
+      useValue: { displayDefaultIndicatorType: false }
+    }
+  ]
 })
 export class MainComponent {
-  currentSprint = 5;
+  currentSprint = 6;
 
   isCompleted(index: number): boolean {
     return index <= this.currentSprint;
diff --git a/src/app/movie-search/movie-search.component.ts b/src/app/movie-search/movie-search.component.ts
index ad27356..69f3075 100644
--- a/src/app/movie-search/movie-search.component.ts
+++ b/src/app/movie-search/movie-search.component.ts
@@ -32,11 +32,6 @@ export class MovieSearchComponent implements OnInit {
 
   ngOnInit() {
     this.loadMovies();
-    this.filteredOptions = this.searchControl.valueChanges.pipe(
-      startWith(''),
-      tap(value => this.movieSearchResult.emit(value || '')),
-      map(value => this._filter(value || ''))
-    );
   }
 
   private _filter(value: string): string[] {
@@ -52,6 +47,11 @@ export class MovieSearchComponent implements OnInit {
         this.options = movies
           .map(movie => movie.title)
           .sort();
+        this.filteredOptions = this.searchControl.valueChanges.pipe(
+          startWith(''),
+          tap(value => this.movieSearchResult.emit(value || '')),
+          map(value => this._filter(value || ''))
+        );
       }),
       catchError(err => {
         console.error('Fehler beim Laden der Filme', err);
diff --git a/src/app/test/test.component.html b/src/app/test/test.component.html
index e69de29..fd4aaf5 100644
--- a/src/app/test/test.component.html
+++ b/src/app/test/test.component.html
@@ -0,0 +1 @@
+<p>Test bestanden!</p>
diff --git a/src/app/ticket-small/ticket-small.component.html b/src/app/ticket-small/ticket-small.component.html
index 8ad4428..e0ce1ad 100644
--- a/src/app/ticket-small/ticket-small.component.html
+++ b/src/app/ticket-small/ticket-small.component.html
@@ -1,4 +1,4 @@
-  <div class="bg-white rounded-md shadow-sm w-full h-fit p-1 flex space-x-1 justify-between items-center">
+  <div class="bg-white rounded-md shadow-sm w-full min-w-[285px] h-fit p-1 flex space-x-1 justify-between items-center">
     <img src="assets/logo.png" class="h-10 border-r-2 pr-0.5 border-dotted border-gray-400" />
     <!-- <mat-icon class="opacity-50 mx-1" style="font-size: 42px; width: 42px; height: 42px">
       local_activity
diff --git a/src/app/ticket-validation/ticket-validation.component.html b/src/app/ticket-validation/ticket-validation.component.html
index 002eb05..1cb74f9 100644
--- a/src/app/ticket-validation/ticket-validation.component.html
+++ b/src/app/ticket-validation/ticket-validation.component.html
@@ -34,9 +34,9 @@
           </mat-form-field>
         </div>
 
-        <!-- @if (formControl.valid || !formControl.touched) {
+        @if (formControl.valid || !formControl.touched) {
           <div class="h-6"></div>
-        } -->
+        }
 
         <button
           mat-button