safouane.bazzi/ecocharge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update project echo files

Browse Source
This commit is contained in:
Anismahi
2026-03-19 07:28:11 +01:00
parent 93409b6f71
commit 17026018a9
14 changed files with 1397 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
templates/admin_dashboard.html Normal file
View File

@@ -0,0 +1,283 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EcoCharge — Dashboard Admin</title>
<style>
/* ── Variables de couleur ── */
:root {
--vert: #2ecc71;
--bleu: #1a1a2e;
--gris: #16213e;
--blanc: #f0f4f8;
--muted: #7f8c8d;
}
/* ── Reset simple ── */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bleu);
font-family: 'Segoe UI', sans-serif;
color: var(--blanc);
min-height: 100vh;
padding: 40px 20px;
}
/* ── Conteneur principal centré ── */
.conteneur {
max-width: 640px;
margin: 0 auto;
}
/* ── En-tête de la page ── */
.entete {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 36px;
}
.entete-titre {
display: flex;
align-items: center;
gap: 12px;
}
.entete-titre span {
font-size: 36px;
}
.entete-titre h1 {
font-size: 24px;
color: var(--vert);
letter-spacing: 2px;
}
.entete-titre p {
font-size: 13px;
color: var(--muted);
margin-top: 2px;
}
/* ── Lien de déconnexion ── */
.deconnexion {
color: var(--muted);
text-decoration: none;
font-size: 14px;
border: 1px solid #2c3e50;
padding: 8px 14px;
border-radius: 8px;
transition: color 0.2s, border-color 0.2s;
}
.deconnexion:hover {
color: #e74c3c;
border-color: #e74c3c;
}
/* ── Carte blanche contenant le formulaire ── */
.carte {
background-color: var(--gris);
border-radius: 16px;
padding: 36px 32px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.carte h2 {
font-size: 17px;
color: var(--blanc);
margin-bottom: 6px;
}
.carte>p {
color: var(--muted);
font-size: 14px;
margin-bottom: 32px;
}
/* ── Séparateur entre les champs ── */
.separateur {
border: none;
border-top: 1px solid #2c3e50;
margin: 28px 0;
}
/* ── Chaque groupe label + input + description ── */
.champ {
margin-bottom: 28px;
}
.champ-entete {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 6px;
}
.champ label {
color: var(--blanc);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Petite description sous le label */
.champ-info {
color: var(--muted);
font-size: 12px;
}
/* Ligne input + unité */
.input-ligne {
display: flex;
align-items: center;
gap: 10px;
}
.champ input {
flex: 1;
padding: 12px 16px;
border-radius: 8px;
border: 1px solid #2c3e50;
background-color: #0f3460;
color: var(--blanc);
font-size: 16px;
outline: none;
transition: border-color 0.2s;
}
.champ input:focus {
border-color: var(--vert);
}
/* Unité affichée à droite (%, °C, W) */
.unite {
color: var(--muted);
font-size: 15px;
min-width: 24px;
}
/* ── Bouton Sauvegarder ── */
.bouton {
width: 100%;
padding: 14px;
background-color: var(--vert);
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
letter-spacing: 1px;
margin-top: 8px;
transition: background-color 0.2s;
}
.bouton:hover {
background-color: #27ae60;
}
/* ── Message de confirmation Flask/Jinja ── */
.succes {
background-color: rgba(46, 204, 113, 0.15);
border: 1px solid var(--vert);
color: var(--vert);
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
margin-bottom: 24px;
text-align: center;
}
</style>
</head>
<body>
<div class="conteneur">
<!-- ── En-tête avec titre et bouton déconnexion ── -->
<div class="entete">
<div class="entete-titre">
<span>⚡</span>
<div>
<h1>ECOCHARGE</h1>
<p>Panneau d'administration</p>
</div>
</div>
<!-- Lien vers la route Flask /admin/logout -->
<a class="deconnexion" href="/admin/logout">🚪 Déconnexion</a>
</div>
<!-- ── Carte principale ── -->
<div class="carte">
<h2>Seuils d'alerte</h2>
<p>Modifiez les valeurs puis cliquez sur "Sauvegarder".</p>
<!-- Formulaire — action vers la route Flask /admin/dashboard -->
<form method="POST" action="/admin/dashboard">
<!-- ── Champ 1 : batterie minimum ── -->
<div class="champ">
<div class="champ-entete">
<label for="min_battery">🔋 Tension batterie minimum</label>
</div>
<p class="champ-info">Alerte si la tension de la batterie descend sous ce seuil.</p>
<br>
<div class="input-ligne">
<input type="number" id="min_battery" name="min_battery" value="{{ settings.min_battery }}"
min="0" required>
<span class="unite">V</span>
</div>
</div>
<hr class="separateur">
<!-- ── Champ 2 : température maximum ── -->
<div class="champ">
<div class="champ-entete">
<label for="max_temp">🌡️ Température maximum</label>
</div>
<p class="champ-info">Alerte si la température dépasse cette valeur.</p>
<br>
<div class="input-ligne">
<input type="number" id="max_temp" name="max_temp" value="{{ settings.max_temp }}" min="0"
max="100" required>
<span class="unite">°C</span>
</div>
</div>
<hr class="separateur">
<!-- ── Champ 3 : puissance minimum ── -->
<div class="champ">
<div class="champ-entete">
<label for="min_power">☀️ Puissance minimum</label>
</div>
<p class="champ-info">Alerte si la production solaire descend sous ce seuil.</p>
<br>
<div class="input-ligne">
<input type="number" id="min_power" name="min_power" value="{{ settings.min_power }}" min="0"
required>
<span class="unite">W</span>
</div>
</div>
<button class="bouton" type="submit">💾 Sauvegarder</button>
</form>
</div>
</div>
</body>
</html>

189
templates/index.html Normal file
View File

@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="fr" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Station Solaire | Dashboard PRO</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<nav class="navbar shadow-sm mb-4 py-3">
<div class="container-fluid px-4">
<span class="navbar-brand mb-0 h1 fw-bold text-light d-flex align-items-center">
<i class="bi bi-lightning-charge-fill text-warning me-2 fs-3"></i>
Station Solaire Autonome
</span>
<div
class="d-flex align-items-center bg-dark bg-opacity-50 px-3 py-2 rounded-pill border border-secondary border-opacity-25">
<span id="status-text" class="me-3 fw-semibold small text-uppercase tracking-wide">Système en
ligne</span>
<div id="system-status" class="status-dot rounded-circle pulse-online"></div>
</div>
</div>
</nav>
<div class="container-fluid px-4">
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-meteo rounded-3">
<div class="card-body d-flex flex-column p-4">
<h5 class="card-title fw-bold mb-4" style="color: #38bdf8;">
<i class="bi bi-cloud-sun me-2"></i>Météo & Env.
</h5>
<div class="mb-3 pb-3 border-bottom border-secondary border-opacity-50 text-center">
<span class="badge bg-dark border border-secondary text-secondary mb-2">Via API Web
(Serveur)</span>
<div class="d-flex justify-content-center align-items-center mt-2">
<i id="api-icon" class="bi bi-brightness-high text-warning display-4 me-3"></i>
<div class="text-start">
<h3 class="mb-0 fw-bold data-value" id="api-temp">--°C</h3>
<small class="text-secondary text-uppercase fw-bold" id="api-desc">En
attente...</small>
</div>
</div>
</div>
<div class="text-center mt-auto mb-3">
<span class="badge bg-dark border border-secondary text-secondary mb-3">Capteur Local
(DHT11)</span>
<div class="row">
<div class="col-6 border-end border-secondary border-opacity-25">
<h3 class="fw-bold data-value mb-0" id="temp-val">--</h3>
<p class="text-secondary small text-uppercase mt-1 fw-bold"><i
class="bi bi-thermometer-half"></i> Temp</p>
</div>
<div class="col-6">
<h3 class="fw-bold data-value mb-0" id="hum-val">--</h3>
<p class="text-secondary small text-uppercase mt-1 fw-bold"><i
class="bi bi-droplet"></i> Hum</p>
</div>
</div>
</div>
<button class="btn btn-outline-danger btn-sm mt-auto w-100" id="btn-test">
<i class="bi bi-wifi-off"></i> Simuler Coupure
</button>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-solaire rounded-3">
<div class="card-body p-4 d-flex flex-column">
<h5 class="card-title fw-bold mb-4" style="color: #fbbf24;">
<i class="bi bi-sun me-2"></i>Production Solaire
</h5>
<div class="gauge-container mx-auto">
<svg class="gauge-bg" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="90" />
</svg>
<svg class="gauge-fill" viewBox="0 0 200 200">
<defs>
<linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#f59e0b" />
<stop offset="100%" stop-color="#facc15" />
</linearGradient>
</defs>
<circle cx="100" cy="100" r="90" />
</svg>
<div class="gauge-value">
<span class="number" id="powerValue">0</span>
<span class="unit">W</span>
</div>
</div>
<div class="stats mt-auto">
<div class="stat-card">
<div class="stat-label">Tension (Upv)</div>
<div class="stat-value" id="voltage">0 <span class="stat-unit">V</span></div>
</div>
<div class="stat-card">
<div class="stat-label">Courant (Ipv)</div>
<div class="stat-value" id="current">0 <span class="stat-unit">A</span></div>
</div>
<div class="stat-card">
<div class="stat-label">Luminosité</div>
<div class="stat-value" id="lux">0 <span class="stat-unit">Lux</span></div>
</div>
<div class="stat-card">
<div class="stat-label">Rendement</div>
<div class="stat-value" id="efficiency">0 <span class="stat-unit">%</span></div>
</div>
</div>
<div class="sol-status-bar mt-3">
<div class="sol-status-dot"></div>
<span class="sol-status-text">Système connecté — MPPT actif</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-batterie rounded-3">
<div class="card-body p-4 d-flex flex-column">
<h5 class="card-title fw-bold mb-4" style="color: #34d399;">
<i class="bi bi-battery-charging me-2"></i>État Batterie
</h5>
<div class="d-flex flex-column align-items-center justify-content-center flex-grow-1">
<div class="battery-circle" id="bat-circle">
<div class="battery-inner">
<span class="bat-percent" id="bat-val">--%</span>
<small class="text-secondary text-uppercase fw-bold">SoC</small>
</div>
</div>
</div>
<div class="mt-4 text-center">
<div class="badge bg-dark border border-secondary text-secondary w-100 py-2"
id="bat-alert-badge">
<i class="bi bi-check-circle text-success" id="bat-alert-icon"></i> <span
id="bat-alert">Système Normal</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-admin rounded-3">
<div class="card-body p-4 d-flex flex-column">
<h5 class="card-title fw-bold mb-4" style="color: #f87171;">
<i class="bi bi-sliders me-2"></i>Administration
</h5>
<div class="d-flex flex-column h-100 justify-content-center mt-auto gap-3">
<a href="/admin/dashboard"
class="btn btn-outline-danger w-100 py-3 fw-bold rounded-3 d-flex flex-column align-items-center shadow-sm">
<i class="bi bi-gear-fill display-4 mb-2"></i>
<span>Paramètres Système</span>
</a>
<a href="/admin/logout" class="btn btn-dark border-secondary w-100 text-secondary mt-2">
<i class="bi bi-box-arrow-right me-2"></i>Déconnexion
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>

174
templates/login.html Normal file
View File

@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EcoCharge — Connexion</title>
<style>
/* ── Variables de couleur ── */
:root {
--vert: #2ecc71;
--bleu: #1a1a2e;
--gris: #16213e;
--blanc: #f0f4f8;
--rouge: #e74c3c;
}
/* ── Reset simple ── */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ── Fond de page ── */
body {
background-color: var(--bleu);
font-family: 'Segoe UI', sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Carte de connexion ── */
.carte {
background-color: var(--gris);
padding: 48px 40px;
border-radius: 16px;
width: 100%;
max-width: 400px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
/* ── Logo / en-tête ── */
.logo {
text-align: center;
margin-bottom: 32px;
}
.logo-icone {
font-size: 48px;
display: block;
margin-bottom: 8px;
}
.logo h1 {
color: var(--vert);
font-size: 26px;
letter-spacing: 2px;
}
.logo p {
color: #7f8c8d;
font-size: 13px;
margin-top: 4px;
}
/* ── Champs du formulaire ── */
.champ {
margin-bottom: 20px;
}
.champ label {
display: block;
color: var(--blanc);
font-size: 13px;
margin-bottom: 6px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.champ input {
width: 100%;
padding: 12px 16px;
border-radius: 8px;
border: 1px solid #2c3e50;
background-color: #0f3460;
color: var(--blanc);
font-size: 15px;
outline: none;
transition: border-color 0.2s;
}
/* Met en valeur le champ actif */
.champ input:focus {
border-color: var(--vert);
}
/* ── Message d'erreur Flask/Jinja ── */
.erreur {
background-color: rgba(231, 76, 60, 0.15);
border: 1px solid var(--rouge);
color: var(--rouge);
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
margin-bottom: 20px;
text-align: center;
}
/* ── Bouton de connexion ── */
.bouton {
width: 100%;
padding: 13px;
background-color: var(--vert);
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
letter-spacing: 1px;
transition: background-color 0.2s;
}
.bouton:hover {
background-color: #27ae60;
}
</style>
</head>
<body>
<div class="carte">
<!-- En-tête avec icône et nom du projet -->
<div class="logo">
<span class="logo-icone">⚡</span>
<h1>ECOCHARGE</h1>
<p>Interface d'administration</p>
</div>
<!-- Message d'erreur affiché si Flask envoie une erreur -->
{% if error %}
<div class="erreur">
{{ error }}
</div>
{% endif %}
<!-- Formulaire de connexion — action vers la route Flask /admin/login -->
<form method="POST" action="/admin/login">
<div class="champ">
<label for="username">Identifiant</label>
<input type="text" id="username" name="username" placeholder="admin" required autocomplete="username">
</div>
<div class="champ">
<label for="password">Mot de passe</label>
<input type="password" id="password" name="password" placeholder="••••••••" required
autocomplete="current-password">
</div>
<button class="bouton" type="submit">Se connecter</button>
</form>
</div>
</body>
</html>