Files
BeReadyFrontend/src/app/components/challenge-card/challenge-card.component.html
T
2026-04-25 18:49:33 +01:00

62 lines
2.2 KiB
HTML

<div class="bg-white m-4 rounded-2xl border border-amber-200 shadow-sm p-4 space-y-3">
<div class="grid grid-cols-5 items-center">
<h3 class="col-span-4 text-base font-semibold text-gray-900 m-0">
{{ data().label }}
</h3>
</div>
<p class="text-[11px] text-gray-500 leading-relaxed">{{ data().libelle }}</p>
<div class="grid grid-cols-5 items-center">
<span class="col-span-4 text-[11px] text-gray-500">
Aucun malus pour ce défi
</span>
<div class="col-span-1 flex justify-end">
<ion-button
fill="clear"
class="m-0 p-0 min-h-0 text-[11px] font-black bg-black text-white rounded-3xl"
style="--padding-top: 4px; --padding-bottom: 4px;"
(click)="setOpen(true)">
Relever
</ion-button>
</div>
</div>
</div>
<ion-modal [isOpen]="isModalOpen">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-title>Défi Quotidien</ion-title>
<ion-buttons slot="start" style="--ion-color-primary: #0054E9;">
<ion-back-button default-href="" (click)="setOpen(false)"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding m-1" style="--background: #f7f6f2;">
<div class="mt-4 bg-white rounded-2xl shadow-sm p-4 space-y-3">
<div class="grid grid-cols-5 items-center">
<h3 class="col-span-4 text-base font-semibold text-gray-900 m-0">
{{ data().label }}
</h3>
</div>
<p class="text-[11px] text-gray-500 leading-relaxed">{{ data().libelle }}</p>
</div>
<app-tooltip title="Aucun malus si non réalisé"
content="entièrement facultatif et solo. Points réduits comparé à un défi classique."></app-tooltip>
<div class="mb-6">
<app-proof-form #proofForm></app-proof-form>
</div>
<ion-button expand="block" (click)="sendProof(data().id)">Soumettre ma preuve</ion-button>
</ion-content>
</ng-template>
</ion-modal>