1.0

flask/.env

@@ -0,0 +1,16 @@
+# ================================
+# Configuration Base de Données
+# ================================
+
+DB_HOST=localhost
+DB_PORT=3306
+DB_NAME=Utilisateurs
+DB_USER=python
+DB_PASSWORD=wolaouais
+
+# ================================
+# Options de connexion (optionnel)
+# ================================
+
+DB_CHARSET=utf8mb4
+DB_POOL_SIZE=5

flask/add_user.py

@@ -0,0 +1,51 @@
+import pymysql
+import getpass
+import bcrypt
+from dotenv import load_dotenv
+from datetime import datetime
+import os
+
+load_dotenv()
+
+def init():
+    try:
+        conn = pymysql.connect(
+            host=os.getenv("DB_HOST", "127.0.0.1"),
+            port=int(os.getenv("DB_PORT", 3306)),
+            user=os.getenv("DB_USER"),
+            password=os.getenv("DB_PASSWORD"),
+            database=os.getenv("DB_NAME"),
+            charset=os.getenv("DB_CHARSET", "utf8mb4")
+        )
+        return conn
+
+    except pymysql.err.OperationalError as e:
+        print(f"❌ Erreur de connexion : {e}")
+        return None
+
+def add():
+    conn = init()
+    if conn is None:
+        return False
+
+    username = input("Quel est l'username du nouvel utilisateur : ")
+    password = getpass.getpass("Quel est le password : ")
+
+    # Hashage du mot de passe avec bcrypt
+    hashed = bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt())
+
+    try:
+        cursor = conn.cursor()
+        requete = "INSERT INTO Auth (username, password, created_at) VALUES (%s, %s, %s)"
+        cursor.execute(requete, (username, hashed, datetime.now()))
+        conn.commit()
+        print(f"✅ Utilisateur '{username}' ajouté avec succès !")
+
+    except pymysql.err.IntegrityError:
+        print("❌ Cet utilisateur existe déjà")
+
+    finally:
+        cursor.close()
+        conn.close()
+
+add()

flask/auth.py

@@ -0,0 +1,53 @@
+import pymysql
+import getpass
+import bcrypt
+from dotenv import load_dotenv
+import os
+
+load_dotenv()
+
+def init():
+    try:
+        conn = pymysql.connect(
+            host=os.getenv("DB_HOST", "127.0.0.1"),
+            port=int(os.getenv("DB_PORT", 3306)),
+            user=os.getenv("DB_USER"),
+            password=os.getenv("DB_PASSWORD"),
+            database=os.getenv("DB_NAME"),
+            charset=os.getenv("DB_CHARSET", "utf8mb4")
+        )
+        return conn
+
+    except pymysql.err.OperationalError as e:
+        print(f"❌ Erreur de connexion : {e}")
+        return None
+
+def login(username,password):
+    #username = input("Username : ")
+    #password = getpass.getpass("Mot de passe : ")
+
+    conn = init()
+    if conn is None:
+        return False
+
+    try:
+        cursor = conn.cursor()
+        requete = "SELECT password FROM Auth WHERE username = %s"
+        cursor.execute(requete, (username,))
+        resultat = cursor.fetchone()
+        if resultat and bcrypt.checkpw(password.encode('utf-8'), resultat[0].encode('utf-8')):
+            print("Connexion réussie")
+            return True
+        else:
+            print(" Identifiants incorrects")
+            return False
+
+    except pymysql.err.OperationalError as e:
+        print(f"Erreur : {e}")
+        return False
+
+    finally:
+        cursor.close()
+        conn.close()
+
+

flask/bouton.py

@@ -0,0 +1,22 @@
+from time import *
+from gpiozero import *
+from signal import pause
+
+def led ():
+	print ('led allumé')
+	"""
+	print("One button to turn on or off")
+
+	led = LED(17)
+	btn = Button(20, bounce_time=None)
+
+	while True:
+  		print('turn on')
+  		led.on()
+  		sleep(0.2) # to avoid bouncing
+  		btn.wait_for_press()
+  		print('turn off')
+  		led.off()
+  		sleep(0.2) # to avoid bouncing
+  		btn.wait_for_press()      
+	"""

flask/main.py

@@ -0,0 +1,30 @@
+from flask import Flask,render_template,request, jsonify
+from bouton import led
+import time
+import os
+import auth  
+app = Flask(__name__)
+@app.route("/")
+def index():
+    return  render_template("index.html")
+
+@app.route("/login", methods=["POST"])
+def login():
+    data = request.get_json()
+    succes = auth.login(data["username"], data["password"])
+    if succes:
+        return jsonify({"success": True, "message": "Connexion réussie"})
+	
+    else:
+        return jsonify({"success": False, "message": "Identifiants incorrects"})
+@app.route("/dashboard")
+def dashboard():
+	return render_template("dashboard.html")
+
+@app.route("/led") 
+def call_led():
+	led()
+	return "import bouton réussi" 	
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000)
+

flask/templates/dashboard.html

@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Loustique Home — Dashboard</title>
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet"/>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg: #0a0a0f;
+      --panel: #111118;
+      --border: #1e1e2e;
+      --accent: #7c6aff;
+      --accent2: #ff6ab0;
+      --text: #e8e6f0;
+      --muted: #6b6880;
+      --success: #4ade80;
+      --warning: #fbbf24;
+    }
+
+    body {
+      font-family: 'DM Mono', monospace;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+
+    /* Grid background */
+    body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background-image:
+        linear-gradient(rgba(124,106,255,0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(124,106,255,0.03) 1px, transparent 1px);
+      background-size: 40px 40px;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    .orb { position: fixed; border-radius: 50%; filter: blur(100px); opacity: 0.08; pointer-events: none; z-index: 0; }
+    .orb1 { width: 600px; height: 600px; background: var(--accent); top: -200px; left: -200px; }
+    .orb2 { width: 400px; height: 400px; background: var(--accent2); bottom: -100px; right: -100px; }
+
+    /* ── TOPBAR ── */
+    header {
+      position: relative; z-index: 10;
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 20px 36px;
+      border-bottom: 1px solid var(--border);
+      background: rgba(10,10,15,0.8);
+      backdrop-filter: blur(12px);
+      animation: fadeDown 0.5s ease forwards;
+    }
+
+    @keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+
+    .logo {
+      font-family: 'Syne', sans-serif;
+      font-size: 18px; font-weight: 800;
+      letter-spacing: -0.02em;
+    }
+    .logo span { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+
+    .header-right { display: flex; align-items: center; gap: 20px; }
+
+    .status-dot {
+      display: flex; align-items: center; gap: 8px;
+      font-size: 11px; color: var(--muted); letter-spacing: 0.05em;
+    }
+    .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); animation: pulse 2s infinite; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+    .logout {
+      font-family: 'DM Mono', monospace;
+      font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
+      color: var(--muted); background: none; border: 1px solid var(--border);
+      padding: 6px 14px; border-radius: 2px; cursor: pointer;
+      transition: color 0.2s, border-color 0.2s;
+    }
+    .logout:hover { color: var(--text); border-color: var(--muted); }
+
+    /* ── MAIN ── */
+    main {
+      position: relative; z-index: 1;
+      max-width: 1100px; margin: 0 auto;
+      padding: 40px 36px;
+    }
+
+    .welcome {
+      margin-bottom: 40px;
+      animation: fadeUp 0.5s 0.1s ease both;
+    }
+
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
+
+    .welcome .label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
+    .welcome h1 { font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
+    .welcome h1 span { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+
+    /* ── GRID ── */
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      gap: 16px;
+      margin-bottom: 32px;
+    }
+
+    .card {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 2px;
+      padding: 24px;
+      position: relative;
+      overflow: hidden;
+      animation: fadeUp 0.5s ease both;
+    }
+
+    .card:nth-child(1) { animation-delay: 0.15s; }
+    .card:nth-child(2) { animation-delay: 0.22s; }
+    .card:nth-child(3) { animation-delay: 0.29s; }
+    .card:nth-child(4) { animation-delay: 0.36s; }
+
+    .card::before {
+      content: '';
+      position: absolute; top: 0; left: 0; right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, var(--accent), transparent);
+    }
+
+    .card-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
+    .card-value { font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
+    .card-sub { font-size: 11px; color: var(--muted); margin-top: 6px; }
+
+    .card-icon {
+      position: absolute; top: 20px; right: 20px;
+      width: 32px; height: 32px; opacity: 0.15;
+    }
+
+    /* ── ACTIONS ── */
+    .section-title {
+      font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
+      color: var(--muted); margin-bottom: 16px;
+      display: flex; align-items: center; gap: 10px;
+      animation: fadeUp 0.5s 0.4s ease both;
+    }
+    .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+
+    .actions {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 12px;
+      animation: fadeUp 0.5s 0.45s ease both;
+    }
+
+    .action-btn {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 2px;
+      padding: 18px 20px;
+      cursor: pointer;
+      text-align: left;
+      transition: border-color 0.2s, background 0.2s, transform 0.1s;
+      position: relative; overflow: hidden;
+    }
+    .action-btn:hover { border-color: var(--accent); background: rgba(124,106,255,0.05); }
+    .action-btn:active { transform: scale(0.98); }
+
+    .action-btn .a-label {
+      font-family: 'Syne', sans-serif;
+      font-size: 13px; font-weight: 700;
+      letter-spacing: 0.02em; display: block; margin-bottom: 4px;
+    }
+    .action-btn .a-sub { font-size: 10px; color: var(--muted); letter-spacing: 0.05em; }
+
+    .action-btn .a-arrow {
+      position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
+      color: var(--muted); font-size: 16px;
+      transition: color 0.2s, right 0.2s;
+    }
+    .action-btn:hover .a-arrow { color: var(--accent); right: 12px; }
+
+    /* ── TOAST ── */
+    .toast {
+      position: fixed; bottom: 28px; right: 28px;
+      background: var(--panel); border: 1px solid var(--border);
+      border-radius: 2px; padding: 12px 18px;
+      font-size: 12px; color: var(--text);
+      display: flex; align-items: center; gap: 10px;
+      transform: translateY(20px); opacity: 0;
+      transition: transform 0.3s, opacity 0.3s;
+      z-index: 100;
+    }
+    .toast.show { transform: translateY(0); opacity: 1; }
+    .toast-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
+  </style>
+</head>
+<body>
+  <div class="orb orb1"></div>
+  <div class="orb orb2"></div>
+
+  <header>
+    <div class="logo">Loustique <span>Home</span></div>
+    <div class="header-right">
+      <div class="status-dot"><div class="dot"></div> Système actif</div>
+      <button class="logout" onclick="window.location.href='/'">Déconnexion</button>
+    </div>
+  </header>
+
+  <main>
+    <div class="welcome">
+      <div class="label">Tableau de bord</div>
+      <h1>Bienvenue <span>chez vous.</span></h1>
+    </div>
+
+    <div class="grid">
+      <div class="card">
+        <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+        <div class="card-label">Statut</div>
+        <div class="card-value" style="color: var(--success); font-size:20px;">En ligne</div>
+        <div class="card-sub">Serveur opérationnel</div>
+      </div>
+      <div class="card">
+        <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        <div class="card-label">Heure locale</div>
+        <div class="card-value" id="clock" style="font-size:22px;">--:--</div>
+        <div class="card-sub" id="date-display">--</div>
+      </div>
+      <div class="card">
+        <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+        <div class="card-label">Raspberry Pi</div>
+        <div class="card-value" style="font-size:20px; color: var(--accent);">Actif</div>
+        <div class="card-sub">Flask 3.1</div>
+      </div>
+      <div class="card">
+        <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+        <div class="card-label">Session</div>
+        <div class="card-value" style="font-size:20px;">Authentifiée</div>
+        <div class="card-sub">Accès autorisé</div>
+      </div>
+    </div>
+
+    <div class="section-title">Actions rapides</div>
+
+    <div class="actions">
+      <button class="action-btn" onclick="callLed()">
+        <span class="a-label">💡 LED</span>
+        <span class="a-sub">Contrôler la LED</span>
+        <span class="a-arrow">›</span>
+      </button>
+      <button class="action-btn" onclick="showToast('Fonction à venir...')">
+        <span class="a-label">⚙️ Paramètres</span>
+        <span class="a-sub">Configuration système</span>
+        <span class="a-arrow">›</span>
+      </button>
+      <button class="action-btn" onclick="showToast('Fonction à venir...')">
+        <span class="a-label">📡 Réseau</span>
+        <span class="a-sub">État de la connexion</span>
+        <span class="a-arrow">›</span>
+      </button>
+    </div>
+  </main>
+
+  <div class="toast" id="toast">
+    <div class="toast-dot"></div>
+    <span id="toast-text">Action effectuée</span>
+  </div>
+
+  <script>
+    // Horloge
+    function updateClock() {
+      const now = new Date();
+      document.getElementById("clock").textContent =
+        now.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" });
+      document.getElementById("date-display").textContent =
+        now.toLocaleDateString("fr-FR", { weekday: "long", day: "numeric", month: "long" });
+    }
+    updateClock();
+    setInterval(updateClock, 1000);
+
+    // LED
+    async function callLed() {
+      try {
+        const res = await fetch("/led");
+        const text = await res.text();
+        showToast("LED activée !");
+      } catch {
+        showToast("Erreur lors de l'appel LED.");
+      }
+    }
+
+    // Toast
+    function showToast(msg) {
+      const toast = document.getElementById("toast");
+      document.getElementById("toast-text").textContent = msg;
+      toast.classList.add("show");
+      setTimeout(() => toast.classList.remove("show"), 3000);
+    }
+  </script>
+</body>
+</html>

flask/templates/index.html

@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Connexion</title>
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet"/>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg: #0a0a0f;
+      --panel: #111118;
+      --border: #1e1e2e;
+      --accent: #7c6aff;
+      --accent2: #ff6ab0;
+      --text: #e8e6f0;
+      --muted: #6b6880;
+      --success: #4ade80;
+      --error: #f87171;
+    }
+
+    body {
+      font-family: 'DM Mono', monospace;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+
+    body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background-image:
+        linear-gradient(rgba(124,106,255,0.04) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(124,106,255,0.04) 1px, transparent 1px);
+      background-size: 40px 40px;
+      animation: gridShift 20s linear infinite;
+      pointer-events: none;
+    }
+
+    @keyframes gridShift {
+      0% { transform: translate(0, 0); }
+      100% { transform: translate(40px, 40px); }
+    }
+
+    .orb { position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.15; pointer-events: none; }
+    .orb1 { width: 500px; height: 500px; background: var(--accent); top: -150px; left: -150px; animation: float1 12s ease-in-out infinite; }
+    .orb2 { width: 400px; height: 400px; background: var(--accent2); bottom: -100px; right: -100px; animation: float2 15s ease-in-out infinite; }
+
+    @keyframes float1 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
+    @keyframes float2 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-30px,-40px); } }
+
+    .card {
+      position: relative;
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 2px;
+      padding: 48px 44px;
+      width: 420px;
+      max-width: 95vw;
+      animation: cardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    @keyframes cardIn { to { opacity: 1; transform: translateY(0); } }
+
+    .card::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: 2px;
+      background: linear-gradient(90deg, var(--accent), var(--accent2));
+    }
+
+    .tag { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
+    .tag::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--accent); }
+
+    h1 { font-family: 'Syne', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 8px; }
+    h1 span { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+
+    .subtitle { font-size: 12px; color: var(--muted); margin-bottom: 36px; letter-spacing: 0.02em; }
+
+    .field { margin-bottom: 20px; }
+
+    label { display: block; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
+
+    input {
+      width: 100%;
+      background: rgba(255,255,255,0.03);
+      border: 1px solid var(--border);
+      border-radius: 2px;
+      padding: 12px 14px;
+      font-family: 'DM Mono', monospace;
+      font-size: 13px;
+      color: var(--text);
+      outline: none;
+      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
+    }
+    input:focus { border-color: var(--accent); background: rgba(124,106,255,0.05); box-shadow: 0 0 0 3px rgba(124,106,255,0.1); }
+    input::placeholder { color: var(--muted); }
+
+    button {
+      width: 100%;
+      margin-top: 28px;
+      padding: 14px;
+      background: var(--accent);
+      border: none;
+      border-radius: 2px;
+      font-family: 'Syne', sans-serif;
+      font-size: 13px;
+      font-weight: 700;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: #fff;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      transition: background 0.2s, transform 0.1s;
+    }
+    button:hover { background: #6a58ee; }
+    button:active { transform: scale(0.98); }
+    button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+    button.loading::after {
+      content: '';
+      position: absolute; inset: 0;
+      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
+      animation: shimmer 1.2s infinite;
+    }
+    @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
+
+    .message {
+      margin-top: 16px; padding: 10px 14px; border-radius: 2px;
+      font-size: 12px; letter-spacing: 0.03em;
+      display: none; align-items: center; gap: 8px;
+    }
+    .message.success { display: flex; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); color: var(--success); }
+    .message.error   { display: flex; background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.2); color: var(--error); }
+
+    .footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 10px; color: var(--muted); text-align: center; letter-spacing: 0.05em; }
+  </style>
+</head>
+<body>
+  <div class="orb orb1"></div>
+  <div class="orb orb2"></div>
+
+  <div class="card">
+    <div class="tag">Authentification</div>
+    <h1>Loustique Home</span></h1>
+    <p class="subtitle">Connectez-vous pour accéder à votre espace.</p>
+
+    <div class="field">
+      <label for="username">Identifiant</label>
+      <input type="text" id="username" placeholder="votre_nom" autocomplete="username" />
+    </div>
+
+    <div class="field">
+      <label for="password">Mot de passe</label>
+      <input type="password" id="password" placeholder="••••••••" autocomplete="current-password" />
+    </div>
+
+    <button id="btn" onclick="handleLogin()">Se connecter</button>
+
+    <div class="message" id="msg">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path id="icon-path"/>
+      </svg>
+      <span id="msg-text"></span>
+    </div>
+
+    <div class="footer">Accès réservé aux Utilisateurs étant ajoutés par les loustiques</div>
+  </div>
+
+  <script>
+    ["username", "password"].forEach(id => {
+      document.getElementById(id).addEventListener("keydown", e => {
+        if (e.key === "Enter") handleLogin();
+      });
+    });
+
+    async function handleLogin() {
+      const username = document.getElementById("username").value.trim();
+      const password = document.getElementById("password").value;
+      const btn      = document.getElementById("btn");
+
+      document.getElementById("msg").className = "message";
+
+      if (!username || !password) {
+        showMessage("error", "Veuillez remplir tous les champs.");
+        return;
+      }
+
+      btn.disabled = true;
+      btn.classList.add("loading");
+      btn.textContent = "Vérification...";
+
+      try {
+        const res  = await fetch("/login", {    // ← adapte si ta route est différente
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ username, password })
+        });
+        const data = await res.json();
+
+        if (data.success) {
+          showMessage("success", data.message || "Connexion réussie !");
+           window.location.href = "/dashboard"; 
+        } else {
+          showMessage("error", data.message || "Identifiants incorrects.");
+        }
+      } catch {
+        showMessage("error", "Impossible de contacter le serveur.");
+      } finally {
+        btn.disabled = false;
+        btn.classList.remove("loading");
+        btn.textContent = "Se connecter";
+      }
+    }
+
+    function showMessage(type, text) {
+      const msg  = document.getElementById("msg");
+      const path = document.getElementById("icon-path");
+      document.getElementById("msg-text").textContent = text;
+      msg.className = "message " + type;
+      path.setAttribute("d", type === "success"
+        ? "M20 6L9 17l-5-5"
+        : "M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm0 6v4m0 4h.01"
+      );
+    }
+  </script>
+</body>
+</html>