favicon + new header

project.json

@@ -49,7 +49,8 @@
           {
             "glob": "**/*",
             "input": "public"
-          }
+          },
+          "src/assets"
         ],
         "styles": [
           "src/styles.scss"

src/app/app.component.ts

@@ -9,7 +9,25 @@ import { PopoverService } from './services/popover.service';
 @Component({
   selector: 'app-root',
   template: `
-    <div *ngIf="!isLoggedIn" class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 text-white">
+    <!-- <div *ngIf="!isLoggedIn" class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 text-white">
+      <div class="text-center">
+        <h1 class="text-5xl font-bold mb-4">Master Your Learning</h1>
+        <p class="text-xl mb-8">Learn smarter, not harder. Start your journey today</p>
+        <button (click)="loginWithGoogle()" class="bg-white text-blue-600 px-6 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 flex items-center justify-center">
+          <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+            <path
+              fill="#FFC107"
+              d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
+            />
+            <path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" />
+            <path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0124 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" />
+            <path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 01-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" />
+          </svg>
+          Login with Google
+        </button>
+      </div>
+    </div> -->
+    <div *ngIf="!isLoggedIn" class="min-h-screen flex flex-col items-center justify-center" style="background: linear-gradient(to right, rgba(0, 119, 179, 0.95), rgba(255, 255, 255, 0.95));">
       <div class="text-center">
         <h1 class="text-5xl font-bold mb-4">Master Your Learning</h1>
         <p class="text-xl mb-8">Learn smarter, not harder. Start your journey today</p>
@@ -28,7 +46,7 @@ import { PopoverService } from './services/popover.service';
       </div>
     </div>
 
-    <div *ngIf="isLoggedIn" class="container mx-auto p-4">
+    <!-- <div *ngIf="isLoggedIn" class="container mx-auto p-4">
       <div class="flex justify-center items-center mb-8">
         <h1 class="text-3xl font-bold mx-auto">Haiky Spaced Repetition Training</h1>
         <div class="relative" appClickOutside (clickOutside)="showDropdown = false">
@@ -44,7 +62,39 @@ import { PopoverService } from './services/popover.service';
         </div>
       </div>
       <app-deck-list></app-deck-list>
+    </div> -->
+    <div *ngIf="isLoggedIn" class="bg-white shadow mb-4">
+      <div class="container mx-auto px-4 py-2 flex justify-between items-center">
+        <!-- Logo und Name -->
+        <div class="flex items-center space-x-2">
+          <img src="../assets/logo.svg" alt="Logo" class="w-10 h-10" />
+          <span class="text-xl font-bold">Haiky</span>
+        </div>
+
+        <!-- Navigation -->
+        <div class="hidden md:flex space-x-6">
+          <!-- <a href="#" class="text-gray-700 hover:text-gray-900">Kompakt</a>
+          <a href="#" class="text-gray-700 hover:text-gray-900">Umwandeln</a>
+          <a href="#" class="text-gray-700 hover:text-gray-900">Zusammenführen</a>
+          <a href="#" class="text-gray-700 hover:text-gray-900">Bearbeiten</a>
+          <a href="#" class="text-gray-700 hover:text-gray-900">KI PDF</a> -->
+          <span class="text-xl font-bold">Spaced Repetition Training</span>
+        </div>
+
+        <!-- User-Bereich -->
+        <div appClickOutside class="relative">
+          <img *ngIf="photoURL" [src]="photoURL" alt="User Photo" class="w-10 h-10 rounded-full cursor-pointer" (click)="toggleDropdown()" referrerpolicy="no-referrer" crossorigin="anonymous" />
+          <div *ngIf="!photoURL" class="image-placeholder w-10 h-10 rounded-full cursor-pointer bg-gray-300"></div>
+
+          <!-- Dropdown -->
+          <div *ngIf="showDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-10">
+            <button (click)="logout()" class="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100">Abmelden</button>
+          </div>
+        </div>
+      </div>
     </div>
+    <app-deck-list *ngIf="isLoggedIn"></app-deck-list>
+
     <app-popover
       [visible]="popoverVisible"
       [title]="popoverTitle"

src/assets/logo.svg

@@ -1,54 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
-  <!-- Definitionen für Gradienten und Stile -->
+  <!-- Hintergrund -->
-  <defs>
+  <rect width="40" height="40" fill="#ffffff"/>
-    <!-- Hauptpfeil-Gradient - Intensivere Farben -->
-    <linearGradient id="arrowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#0066FF"/>
-      <stop offset="50%" style="stop-color:#7B00FF"/>
-      <stop offset="100%" style="stop-color:#00FFB3"/>
-    </linearGradient>
-    
-    <!-- Kreisgradienten - Intensivere Farben -->
-    <linearGradient id="circle1Gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#FF0000"/>
-      <stop offset="100%" style="stop-color:#FFD700"/>
-    </linearGradient>
-    
-    <linearGradient id="circle2Gradient" x1="100%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#00FFE0"/>
-      <stop offset="100%" style="stop-color:#1E3DEE"/>
-    </linearGradient>
-    
-    <linearGradient id="circle3Gradient" x1="0%" y1="100%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#FF6B00"/>
-      <stop offset="100%" style="stop-color:#FF0000"/>
-    </linearGradient>
-  </defs>
-
-  <!-- Hintergrund - Dunklerer Hintergrund für mehr Kontrast -->
-  <rect width="40" height="40" fill="#000000"/>
   
-  <!-- Äußerer Kreis - Dickere Linien -->
+  <!-- Basis H - Rot -->
-  <circle cx="20" cy="20" r="16" 
+  <path d="M6 4 H14 V16 H26 V4 H34 V36 H26 V24 H14 V36 H6 Z" fill="#FF4F4F"/>
-          stroke="url(#circle1Gradient)" 
-          stroke-width="2"
-          stroke-dasharray="4,2"
-          fill="none"/>
   
-  <!-- Mittlerer Kreis -->
+  <!-- Grünes Element -->
-  <circle cx="20" cy="20" r="12" 
+  <path d="M6 4 H14 V16 H26 V4 H34 V20 H6 Z" fill="#2ECC40"/>
-          stroke="url(#circle2Gradient)" 
-          stroke-width="1.75"
-          stroke-dasharray="3,1.5"
-          fill="none"/>
   
-  <!-- Innerer Kreis -->
+  <!-- Gelber Bereich -->
-  <circle cx="20" cy="20" r="8" 
+  <path d="M10 8 H16 V16 H24 V8 H30 V32 H24 V24 H16 V32 H10 Z" fill="#FFBE00"/>
-          stroke="url(#circle3Gradient)" 
-          stroke-width="1.5" 
-          fill="none"/>
   
-  <!-- Kleinerer dynamischer Pfeil im innersten Kreis -->
+  <!-- Jadegrüner Bereich -->
-  <path d="M20,14 L18,26 L22,26 Z" 
+  <path d="M12 12 H18 V16 H22 V12 H28 V28 H22 V24 H18 V28 H12 Z" fill="#00C4A7"/>
-        fill="url(#arrowGradient)"/>
+  
+  <!-- Innerstes blaues Element -->
+  <path d="M14 14 H19 V16 H21 V14 H26 V26 H21 V24 H19 V26 H14 Z" fill="#0077B3"/>
 </svg>