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

@@ -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',

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;
+    }
+  }
+}

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">

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;

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>

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;

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);

src/app/test/test.component.html

@@ -0,0 +1 @@
+<p>Test bestanden!</p>

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

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