added ranking

This commit is contained in:
2026-03-26 17:55:23 +01:00
parent 373daa876a
commit 57b82b4d3f
4 changed files with 119 additions and 8 deletions
+3 -1
View File
@@ -8,7 +8,9 @@ export const routes: Routes = [
path: '',
loadComponent: () => import('./components/navbar/navbar.component').then(m => m.NavbarComponent),
children: [
{path: 'home', loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent)},
{
path: 'home',
loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent)},
{
path: 'groups',
loadComponent: () => import('./pages/groups/groups.component').then(m => m.GroupsComponent)
@@ -1,8 +1,4 @@
<ion-app>
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom" style="
--background: #FFFFFF;
--color: #C0C0C0;
@@ -25,5 +21,4 @@
<ion-icon name="people-outline"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-app>
</ion-tabs>
@@ -0,0 +1,111 @@
<ion-header class="bg-white">
<p class="text-center font-bold">Classement général</p>
</ion-header>
<ion-content style="--background: #f7f6f2;">
<div class="rounded-3xl pl-5 m-3 relative bg-white h-full overflow-scroll">
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center rounded-full bg-yellow-400">1</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-300">2</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center rounded-full bg-amber-600">3</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center">4</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center">5</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center">6</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center">7</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center">8</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center">9</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center">10</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center">11</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center">12</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
<div class="flex items-center gap-10">
<p class="w-8 h-8 flex items-center justify-center">13</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
</div>
<p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
</div>
</div>
</ion-content>
+4 -1
View File
@@ -1,10 +1,13 @@
import {Component} from '@angular/core';
import {IonicModule} from "@ionic/angular";
@Component({
selector: 'app-ranking',
templateUrl: './ranking.component.html',
styleUrls: ['./ranking.component.scss'],
imports: []
imports: [
IonicModule
]
})
export class RankingComponent {
}