Spaces:
Configuration error
Configuration error
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tableau de Bord - Appareils</title> | |
| <!-- Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"> | |
| <!-- Chart.js --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script> | |
| <!-- PapaParse for CSV reading --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="background-orbs"> | |
| <div class="orb orb-1"></div> | |
| <div class="orb orb-2"></div> | |
| <div class="orb orb-3"></div> | |
| </div> | |
| <div class="container"> | |
| <header class="glass-panel"> | |
| <h1>Monitoring des Appareils</h1> | |
| <p>Analyse de la tension et de l'intensité en temps réel</p> | |
| </header> | |
| <main class="dashboard"> | |
| <aside class="controls glass-panel"> | |
| <h2>Paramètres</h2> | |
| <div class="control-group"> | |
| <label>Période (Dates)</label> | |
| <div class="date-inputs"> | |
| <div class="input-wrapper"> | |
| <span class="label-mini">Début</span> | |
| <input type="date" id="start-date"> | |
| </div> | |
| <div class="input-wrapper"> | |
| <span class="label-mini">Fin</span> | |
| <input type="date" id="end-date"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <label>Appareil</label> | |
| <div class="radio-inputs"> | |
| <label class="radio-label"> | |
| <input type="radio" name="appareil" value="all" checked> | |
| <span class="custom-radio"></span> | |
| Tous | |
| </label> | |
| <label class="radio-label"> | |
| <input type="radio" name="appareil" value="1"> | |
| <span class="custom-radio"></span> | |
| Appareil 1 | |
| </label> | |
| <label class="radio-label"> | |
| <input type="radio" name="appareil" value="2"> | |
| <span class="custom-radio"></span> | |
| Appareil 2 | |
| </label> | |
| <label class="radio-label"> | |
| <input type="radio" name="appareil" value="3"> | |
| <span class="custom-radio"></span> | |
| Appareil 3 | |
| </label> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <label>Seuil d'Alerte</label> | |
| <div class="threshold-inputs"> | |
| <div class="input-wrapper"> | |
| <span class="label-mini">Tension (V)</span> | |
| <input type="number" id="threshold-voltage" placeholder="ex: 235"> | |
| </div> | |
| <div class="input-wrapper"> | |
| <span class="label-mini">Intensité (A)</span> | |
| <input type="number" id="threshold-current" placeholder="ex: 8"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="control-group" id="upload-group" style="display: none;"> | |
| <label id="upload-label" class="alert-text">Fichier CSV introuvable. Veuillez le charger :</label> | |
| <div class="input-wrapper"> | |
| <input type="file" id="csv-upload" accept=".csv" class="file-input"> | |
| </div> | |
| </div> | |
| <button id="apply-btn" class="glow-on-hover">Appliquer les filtres</button> | |
| </aside> | |
| <section class="main-content"> | |
| <div class="summary-cards"> | |
| <div class="summary-card glass-panel"> | |
| <h3>Somme des Tensions</h3> | |
| <p id="sum-voltage" class="sum-value">0.00 V</p> | |
| </div> | |
| <div class="summary-card glass-panel"> | |
| <h3>Somme des Intensités</h3> | |
| <p id="sum-current" class="sum-value">0.00 A</p> | |
| </div> | |
| </div> | |
| <div class="charts-area"> | |
| <div class="chart-container glass-panel"> | |
| <h2>Évolution des Tensions</h2> | |
| <canvas id="voltageChart"></canvas> | |
| </div> | |
| <div class="chart-container glass-panel"> | |
| <h2>Évolution des Intensités</h2> | |
| <canvas id="currentChart"></canvas> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> | |