kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore: Counter now embedded with Stimulus

Browse Source 
Before this commit, Counter js was autonomous. Now it's registered
like a controller in Stimulus.
This commit is contained in:
kbe
2025-08-17 23:47:07 +02:00
parent ba3f36a5e8
commit 07a6694883
6 changed files with 68 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/views/pages/home.html.erb
View File

@@ -37,7 +37,7 @@
<div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative">
<div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-400 via-indigo-400 to-pink-400 bg-clip-text text-transparent mb-3">
<span class="counter" data-target="2473">0</span>
<span class="counter" data-controller="counter" data-counter-target-value="127">0</span>
</div>
<p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium">
Événements organisés
@@ -53,7 +53,7 @@
<div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative">
<div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-400 via-indigo-400 to-pink-400 bg-clip-text text-transparent mb-3">
<span class="counter" data-target="15420">0</span>+
<span class="counter" data-controller="counter" data-counter-target-value="1433">0</span>+
</div>
<p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium">
Membres actifs
@@ -69,7 +69,7 @@
<div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative">
<div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-400 via-indigo-400 to-pink-400 bg-clip-text text-transparent mb-3">
<span class="counter" data-target="4.8" data-decimal="true">0</span>/5
<span class="counter" data-controller="counter" data-counter-target-value="4.4" data-counter-decimal-value="true">0</span>/5
</div>
<p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium">
Note moyenne des soirées
@@ -84,28 +84,28 @@
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12">
<div class="text-center">
<div class="text-3xl font-bold text-purple-300">
<span class="counter" data-target="89">0</span>%
<span class="counter" data-controller="counter" data-counter-target-value="79">0</span>%
</div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Taux de remplissage</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-300">
<span class="counter" data-target="12">0</span>
<span class="counter" data-controller="counter" data-counter-target-value="12">0</span>
</div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Arrondissements</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-300">
<span class="counter" data-target="156">0</span>
<span class="counter" data-controller="counter" data-counter-target-value="156">0</span>
</div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Établissements partenaires</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-300">
<span class="counter" data-target="98">0</span>%
<span class="counter" data-controller="counter" data-counter-target-value="98">0</span>%
</div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Satisfaction client</p>
</div>