70 lines
3.6 KiB
HTML
70 lines
3.6 KiB
HTML
<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>
|