From: [oceane] <[e21497@eps-marche.be]>
Date: Thu, 26 Feb 2026 20:16:45 +0000 (+0100)
Subject: Mise à jour du module web
X-Git-Url: https://git.digitality.be/?a=commitdiff_plain;h=951ccbf0c5bbf61b71d9b46e98c84ddf96c6629b;p=pdw25-26

Mise à jour du module web
---

diff --git a/Wallette/web/index.html b/Wallette/web/index.html
index 158435e..982c565 100644
--- a/Wallette/web/index.html
+++ b/Wallette/web/index.html
@@ -29,6 +29,33 @@
         Portefeuille Bitcoin
     </h1>
 
+<!-- COMPTE UTILISATEUR -->
+<div class="card p-4 mb-4">
+<h5>Compte utilisateur</h5>
+
+<div class="row g-3 align-items-end">
+
+<div class="col-md-4">
+<label class="form-label">User Id</label>
+<input id="userIdInput" class="form-control" placeholder="user-123">
+</div>
+
+<div class="col-md-2">
+<button id="saveUserBtn" class="btn btn-outline-light w-100">Enregistrer</button>
+</div>
+
+<div class="col-md-2">
+<button id="connectBtn" class="btn btn-success w-100">Connecter</button>
+</div>
+
+<div class="col-md-2">
+<button id="disconnectBtn" class="btn btn-danger w-100">Déconnecter</button>
+</div>
+
+<div class="col-md-2 text-end">
+<span id="connStatus" class="badge bg-secondary">Statut : off</span>
+</div>
+
     <!-- Choix crypto + adresse -->
     <div class="card p-4 mb-4">
         <div class="mb-3">
diff --git a/Wallette/web/script.js b/Wallette/web/script.js
index 2beb11b..2decdf7 100644
--- a/Wallette/web/script.js
+++ b/Wallette/web/script.js
@@ -20,7 +20,9 @@ onAlert(function(alert) {
   if (!list) return;
 
   const li = document.createElement('li');
+
   li.className = 'list-group-item bg-transparent text-white';
+
   // Si l'alerte est un objet, essaye d'afficher message et type
   if (typeof alert === 'object') {
     li.textContent = (alert.message ? alert.message : JSON.stringify(alert));
@@ -28,6 +30,50 @@ onAlert(function(alert) {
     li.textContent = String(alert);
   }
 
+   // 1) Supprimer "Aucune alerte" si présent
+  const placeholder = document.getElementById('noAlerts');
+  if (placeholder) placeholder.remove();
+
+  // 2) Appliquer couleur selon BUY / SELL / HOLD
+  if (typeof alert === 'object' && alert.action) {
+    const action = alert.action.toUpperCase();
+    if (action === 'BUY') li.classList.add('buy');
+    else if (action === 'SELL') li.classList.add('sell');
+    else li.classList.add('hold');
+  }
+
+  // 3) Mettre à jour le bloc signal (si présent)
+  if (typeof alert === 'object') {
+    const box = document.getElementById('signalBox');
+    const actionEl = document.getElementById('signalAction');
+    const critEl = document.getElementById('signalCriticality');
+    const confEl = document.getElementById('signalConfidence');
+    const reasonEl = document.getElementById('signalReason');
+
+    if (box && actionEl && critEl && confEl && reasonEl) {
+      const action = alert.action || 'HOLD';
+      box.className = 'signal-box ' + action.toLowerCase();
+      actionEl.textContent = action;
+      critEl.textContent = alert.alertLevel || 'INFO';
+      confEl.textContent =
+        typeof alert.confidence === 'number'
+          ? Math.round(alert.confidence * 100) + '%'
+          : '—';
+      reasonEl.textContent = alert.reason || alert.message || '—';
+    }
+  }
+
+  // 4) Notification popup simple (si container existe)
+  const popupContainer = document.getElementById('popupContainer');
+  if (popupContainer) {
+    const pop = document.createElement('div');
+    pop.className = 'notification-popup';
+    pop.textContent = li.textContent;
+    popupContainer.appendChild(pop);
+
+    setTimeout(() => pop.remove(), 6000);
+  }
+
   // Préfixer pour voir les nouvelles alertes en haut
   list.prepend(li);
 });
diff --git a/Wallette/web/styles.css b/Wallette/web/styles.css
index 90538a6..4168b2b 100644
--- a/Wallette/web/styles.css
+++ b/Wallette/web/styles.css
@@ -65,4 +65,37 @@ select.form-select {
 select.form-select option {
     background-color: #0f172a;
     color: white;
+}
+
+.list-group-item {
+    background: transparent;
+    border-color: rgba(255,255,255,0.08);
+}
+
+.list-group-item.buy {
+    background: rgba(22,163,74,0.12);
+    border-left: 4px solid #4ade80;
+}
+
+.list-group-item.sell {
+    background: rgba(220,38,38,0.12);
+    border-left: 4px solid #f87171;
+}
+
+.list-group-item.hold {
+    background: rgba(234,179,8,0.12);
+    border-left: 4px solid #fde047;
+}
+
+.notification-popup {
+    background: rgba(15,23,42,0.95);
+    border-radius:10px;
+    padding:12px;
+    box-shadow:0 10px 25px rgba(0,0,0,0.4);
+    animation: slideIn .3s ease;
+}
+
+@keyframes slideIn {
+    from { transform:translateY(20px); opacity:0; }
+    to { transform:translateY(0); opacity:1; }
 }
\ No newline at end of file