Sostituito frontend-angular-new con frontend-angular

2026-08-10 13:28:05 +02:00
parent 6d52968c28
commit f4afaf0792
78 changed files with 7510 additions and 2321 deletions
@@ -0,0 +1,4 @@
+/* Activity component styles */
+:host {
+  display: block;
+}
@@ -0,0 +1,69 @@
+<div class="min-h-screen pb-32">
+  <header class="fixed top-0 left-0 w-full z-50 bg-background/80 backdrop-blur-md flex justify-between items-center px-6 py-4">
+    <div class="flex items-center gap-3">
+      <button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors" [routerLink]="['/']">
+        <mat-icon class="text-primary">arrow_back</mat-icon>
+      </button>
+      <h1 class="font-headline font-black tracking-tight text-xl text-primary">Activity</h1>
+    </div>
+    <button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors">
+      <mat-icon class="text-primary">search</mat-icon>
+    </button>
+  </header>
+
+  <main class="pt-24 px-6 max-w-2xl mx-auto">
+    <!-- Stats -->
+    <div class="grid grid-cols-2 gap-4 mb-8">
+      <div class="bg-surface-container-low p-6 rounded-2xl flex flex-col justify-between aspect-square border border-black/5">
+        <mat-icon class="text-primary text-3xl">celebration</mat-icon>
+        <div>
+          <p class="text-3xl font-headline font-bold">12</p>
+          <p class="text-sm text-on-surface-variant font-medium">New Alerts</p>
+        </div>
+      </div>
+      <div class="bg-secondary-container p-6 rounded-2xl flex flex-col justify-between aspect-square border border-black/5">
+        <mat-icon class="text-secondary text-3xl">trending_up</mat-icon>
+        <div>
+          <p class="text-3xl font-headline font-bold text-secondary">84%</p>
+          <p class="text-sm text-secondary/80 font-medium">Win Rate</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Timeline -->
+    <div class="space-y-12">
+      <section>
+        <h2 class="text-xs font-headline font-extrabold uppercase tracking-widest text-on-surface-variant mb-8 px-2">Recent Activity</h2>
+        <div class="space-y-10">
+          @for (activity of activities(); track $index) {
+            <div class="relative pl-16">
+              <div class="absolute left-0 top-0 w-12 h-12 rounded-full flex items-center justify-center shadow-lg z-10"
+                   [ngClass]="{
+                     'bg-secondary-container text-secondary': activity.type === 'win',
+                     'bg-error-container text-error': activity.type === 'loss',
+                     'bg-tertiary-container text-tertiary': activity.type === 'group_joined'
+                   }">
+                <mat-icon style="font-variation-settings: 'FILL' 1;">
+                  {{ activity.type === 'win' ? 'trophy' : activity.type === 'loss' ? 'trending_down' : 'group_add' }}
+                </mat-icon>
+              </div>
+              <div class="absolute left-6 top-12 bottom-[-40px] w-0.5 bg-surface-container"></div>
+              <div class="bg-surface p-5 rounded-2xl soft-shadow border border-black/5">
+                <p class="leading-relaxed">
+                  @if (activity.type === 'win') {
+                    You won the <span class="font-bold">{{ activity.title }}!</span> {{ activity.amount }} Arena Points have been credited.
+                  } @else if (activity.type === 'loss') {
+                    You lost the <span class="font-bold">{{ activity.title }}.</span> {{ activity.amount }} Arena Points have been deducted.
+                  } @else {
+                    You joined the <span class="font-bold">{{ activity.title }}</span> challenge.
+                  }
+                </p>
+                <p class="mt-3 text-[11px] font-medium text-on-surface-variant/50">{{ activity.timestamp }}</p>
+              </div>
+            </div>
+          }
+        </div>
+      </section>
+    </div>
+  </main>
+</div>
@@ -0,0 +1,18 @@
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatIconModule} from '@angular/material/icon';
+import {RouterModule} from '@angular/router';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {UserService} from '../../services/user';
+
+@Component({
+  selector: 'app-activity',
+  imports: [CommonModule, MatIconModule, RouterModule],
+  templateUrl: './activity.html',
+  styleUrl: './activity.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Activity {
+  private userService = inject(UserService);
+  activities = toSignal(this.userService.getActivities(), {initialValue: []});
+}