aknuth/vokabeltraining
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

#7 Anzeige nächstes Training, formatting

Browse Source
This commit is contained in:
Andreas Knuth
2025-01-18 12:01:48 +00:00
parent ad4b5de1d2
commit d17578d123
6 changed files with 177 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/app/app.component.ts
View File

@@ -1,21 +1,46 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { DeckListComponent } from './deck-list.component';
@Component({
selector: 'app-root',
template: `
<div class="container mx-auto p-4">
<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 Vocabulary</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="container mx-auto p-4">
<h1 class="text-3xl font-bold text-center mb-8">Vocabulary Training</h1>
<app-deck-list></app-deck-list>
</div>
`,
standalone: true,
imports: [CommonModule, DeckListComponent]
imports: [CommonModule, DeckListComponent],
})
export class AppComponent {
title = 'vocabulary-training';
ngOnInit(): void {
isLoggedIn = false; // Zustand für den Login-Status
// Mock-Funktion für Google Login
loginWithGoogle() {
// Hier würde die eigentliche Google Login-Logik stehen
// Zum Beispiel mit Angular Fire oder einer anderen Bibliothek
// Für dieses Beispiel simulieren wir den Login:
this.isLoggedIn = true;
console.log('Logged in with Google');
}
}
}