feat(soutenir): barre d'objectif de don (nom de domaine dédié, 10 €)
All checks were successful
Deploy info-canicule / deploy (push) Successful in 1m29s
All checks were successful
Deploy info-canicule / deploy (push) Successful in 1m29s
Affiche un goal concret en haut de /soutenir. Valeurs en dur dans le frontmatter (goalRaised / goalTarget) à éditer à la main quand un don arrive — pas de branchement Ko-fi. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
95340c1228
commit
6315793c90
1 changed files with 41 additions and 0 deletions
|
|
@ -2,6 +2,12 @@
|
||||||
import Base from '../layouts/Base.astro';
|
import Base from '../layouts/Base.astro';
|
||||||
|
|
||||||
export const prerender = false;
|
export const prerender = false;
|
||||||
|
|
||||||
|
const goalLabel = "Location d'un nom de domaine dédié";
|
||||||
|
const goalTarget = 10;
|
||||||
|
const goalRaised = 0;
|
||||||
|
const goalCurrency = '€';
|
||||||
|
const goalPercent = Math.min(100, Math.round((goalRaised / goalTarget) * 100));
|
||||||
---
|
---
|
||||||
|
|
||||||
<Base
|
<Base
|
||||||
|
|
@ -18,6 +24,41 @@ export const prerender = false;
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="container-tight pt-6">
|
||||||
|
<div class="rounded-xl border border-canicule-200 bg-white p-5 shadow-sm">
|
||||||
|
<div class="flex items-baseline justify-between gap-3">
|
||||||
|
<div>
|
||||||
|
<p class="text-xs font-semibold uppercase tracking-wide text-canicule-700">
|
||||||
|
Objectif de don en cours
|
||||||
|
</p>
|
||||||
|
<p class="mt-1 text-base font-semibold text-slate-900">{goalLabel}</p>
|
||||||
|
</div>
|
||||||
|
<p class="shrink-0 text-sm tabular-nums text-slate-600">
|
||||||
|
<span class="font-bold text-slate-900">{goalRaised} {goalCurrency}</span>
|
||||||
|
<span class="text-slate-400"> / {goalTarget} {goalCurrency}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-3 h-3 w-full overflow-hidden rounded-full bg-slate-100">
|
||||||
|
<div
|
||||||
|
class="h-full rounded-full bg-canicule-500 transition-all"
|
||||||
|
style={`width: ${goalPercent}%`}
|
||||||
|
role="progressbar"
|
||||||
|
aria-valuenow={goalPercent}
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuemax="100"
|
||||||
|
aria-label={`${goalPercent}% de l'objectif atteint`}
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="mt-2 text-xs text-slate-500">
|
||||||
|
{goalPercent}% atteint — une fois l'objectif rempli, le nom de domaine dédié sera réservé
|
||||||
|
pour un an.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="container-tight py-8 prose prose-slate max-w-none">
|
<section class="container-tight py-8 prose prose-slate max-w-none">
|
||||||
<h2>Don libre via Ko-fi</h2>
|
<h2>Don libre via Ko-fi</h2>
|
||||||
<p>
|
<p>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue