Initialise le dépôt Bonpoint avec docs et prototype web.

Structure docs/, web/ (app Node existante) et mobile/ (placeholder Flutter).
2026-06-12 11:39:51 +02:00
commit c4ebb5b2d8
40 changed files with 5630 additions and 0 deletions
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="#667eea">
+  <title>Bons Points</title>
+  <link rel="manifest" href="/manifest.json">
+  <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">
+  <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="Bons Points">
+  <meta name="mobile-web-app-capable" content="yes">
+  <link rel="stylesheet" href="/css/style.css?v=34">
+</head>
+<body>
+  <div class="container">
+    <a href="/" class="btn-retour">
+      <svg class="btn-retour-icone" width="18" height="18" viewBox="0 0 24 24"
+           fill="none" stroke="currentColor" stroke-width="2.5"
+           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <polyline points="15 18 9 12 15 6"/>
+      </svg>
+      Retour
+    </a>
+
+    <div id="fiche" class="cacher">
+      <div class="fiche-entete">
+        <div id="avatar-grand" class="avatar-cercle fiche-avatar-centre"></div>
+        <div id="score-bandeau" class="score-bandeau"></div>
+      </div>
+
+      <div class="fiche-section">
+        <h3>Mon historique</h3>
+        <div id="historique"></div>
+      </div>
+
+      <a id="lien-boutique" class="btn-boutique">🛍️ Dépenser mes points</a>
+    </div>
+
+    <p id="erreur" class="erreur-page cacher">Enfant introuvable</p>
+  </div>
+
+  <script>
+    const PHOTOS = {
+      Ariana: '/photos/ariana.png',
+      Pablo: '/photos/pablo.png',
+      'Hélia': '/photos/helia.png',
+    };
+
+    function slug(prenom) {
+      return prenom.toLowerCase()
+        .normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+    }
+
+    const prenomUrl = window.location.pathname.split('/').pop();
+
+    function afficherHistorique(mouvements) {
+      const cont = document.getElementById('historique');
+
+      if (!mouvements.length) {
+        cont.innerHTML = '<p class="historique-vide">Aucun mouvement pour l\'instant</p>';
+        return;
+      }
+
+      cont.innerHTML = mouvements.map((m) => {
+        const date = new Date(m.cree_le + 'Z').toLocaleString('fr-FR', {
+          day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
+        });
+        const cls = m.delta >= 0 ? 'delta-positif' : 'delta-negatif';
+        const signe = m.delta > 0 ? '+' : '';
+        const libelle = m.recompense || m.regle || m.note || '?';
+        const icone = m.icone_recompense || m.icone || '';
+        const type = m.recompense_id ? 'achat' : (m.delta >= 0 ? 'gain' : 'perte');
+
+        return `
+          <div class="historique-item historique-${type}">
+            <span class="historique-libelle">${icone} ${libelle}</span>
+            <span class="historique-droite">
+              <span class="${cls}">${signe}${m.delta}</span>
+              <span class="historique-date">${date}</span>
+            </span>
+          </div>
+        `;
+      }).join('');
+    }
+
+    async function charger() {
+      try {
+        const res = await fetch(`/api/public/enfant/${prenomUrl}`);
+        if (!res.ok) throw new Error('introuvable');
+
+        const data = await res.json();
+        const e = data.enfant;
+
+        document.getElementById('avatar-grand').style.borderColor = e.couleur;
+        document.getElementById('avatar-grand').innerHTML =
+          `<img src="${PHOTOS[e.prenom]}" alt="${e.prenom}">`;
+
+        const bandeau = document.getElementById('score-bandeau');
+        bandeau.innerHTML = `
+          <span class="score-bandeau-nom">${e.prenom}</span>
+          <span class="score-bandeau-pts" style="color:${e.couleur}">
+            ${e.score} points
+          </span>
+        `;
+        bandeau.style.borderColor = e.couleur;
+
+        document.getElementById('lien-boutique').href =
+          `/boutique/${slug(e.prenom)}`;
+
+        document.title = `${e.prenom} — Bons Points`;
+        afficherHistorique(data.mouvements);
+        document.getElementById('fiche').classList.remove('cacher');
+      } catch {
+        document.getElementById('erreur').classList.remove('cacher');
+      }
+    }
+
+    charger();
+    setInterval(charger, 30000);
+  </script>
+  <script src="/js/pwa.js" defer></script>
+</body>
+</html>