Initial commit of static site files

donnees_appareils.csv

@@ -0,0 +1,101 @@
+Tension_Appareil_1,Intensite_Appareil_1,Tension_Appareil_2,Intensite_Appareil_2,Tension_Appareil_3,Intensite_Appareil_3
+229.51454129839928,9.000852739220077,111.53639660955707,0.533267972589872,9.565848990724191,1.9391855097378035
+226.6067179427565,9.570811381439345,116.88440882084548,1.2891486413494657,11.3527318516045,0.8939858759961101
+237.15896243301975,4.721951816560043,114.31253961239443,1.2310947512432517,10.880762164937728,0.41753985550423955
+238.23665780699395,0.3445716890613826,114.87275663171603,2.5723795114713925,5.808777232152037,0.7720736605929451
+220.27386822481807,5.455948636802771,118.28144224779291,2.413692847468229,8.752936867846504,1.6268333413676375
+232.94809568382576,1.058732201701424,116.6116452763114,1.2543986391505333,9.9091453712085,1.1325053073486802
+239.45471427520306,4.577825164738752,113.3993762406029,0.49621688416915516,11.011765653822453,0.9689114674787006
+226.61272734814375,6.7357664543547555,111.18786781451061,0.5339725976570933,7.304551186716218,1.8225922616840917
+230.1229625307746,0.9386047090032287,112.92896867760805,1.7819519619244197,6.084060348412532,0.39571677987601767
+232.53363323845252,9.08716518907516,117.39914664825903,0.43048573345742,7.963562567434527,1.293296272795458
+226.53270281762633,8.0340912264607,112.09930971582064,4.2628244243935685,8.595860820876837,1.0323261613897412
+239.6368664317153,2.299088443334293,115.37371931005367,0.6124223312780424,8.831885963770619,1.8033817151191347
+228.20759330746785,2.60312594809279,112.76458643977006,2.099862549660892,10.85497623145144,1.2282786245145443
+235.6544322371858,0.2557856411990152,113.28335129994043,4.413804505177172,10.476436432914555,1.7751450806697842
+222.82595440914133,2.4712978482060457,116.99935539865797,4.896646161980084,8.666769862934235,0.31907031220204646
+232.97382916591408,6.822058097228061,114.84793032475875,2.213311575788681,7.570115881212496,0.5317870446548791
+226.53902260839368,5.513291295194921,112.01934720064659,0.7875429753889712,7.091866767867918,0.9617041731648152
+229.4758805748929,8.784914054998453,116.80981712766234,0.7818646989885117,6.229858617752105,1.0411949718420621
+238.8416226614468,7.689895672042668,118.6439608291389,0.9484064648901481,9.277631926175559,0.7743162134900957
+235.48578449752787,4.972588356027892,116.57735091498596,1.6308361546749415,7.491776733240263,0.1422305013402146
+227.8311718412963,6.105030912081427,117.49340595618965,0.23958808995644165,11.314040227992578,0.019058681303679603
+233.91145886747503,4.936189750136705,116.38690768661489,3.668144026436328,7.563799379592119,0.3682301076149217
+238.84771552508528,9.478982291082726,118.7572721070793,4.920687529543603,11.721305499492335,1.9839109373626895
+224.99708705765525,3.3223515127446754,112.97681623792089,0.3350199331883481,7.151177751745648,1.7957718982687167
+236.61543316871487,1.8637859518022144,114.2914770288409,4.379853563381855,6.563515729796843,1.4360741072653689
+233.39274162741685,6.016724907728358,118.35227388512908,2.115679763536919,6.114763707579604,0.5361277272492495
+222.46053266275365,8.486868051069623,111.81024346797813,3.8321543278495063,9.709101481716596,1.9012357364222998
+229.2982044305344,7.900738298788036,119.61918446497717,0.13672375345715976,10.12221263861377,1.4991998460746199
+227.2098248824637,3.2068859478946723,115.3298775827716,0.28864707609604584,6.05890365670836,0.2423854930015008
+234.07470998721504,5.806604953501864,112.24875667152921,0.23460026111396626,9.943014808133537,1.4376327600537748
+232.81574545544726,7.176687038667052,112.87309285070974,2.4151251120339348,9.862718321852617,0.11576186302882367
+232.7250161044474,8.89572066178636,110.95554435598577,3.422053415844227,6.50450225251987,0.5468557926892836
+221.16658408194152,4.245969976820902,115.4816710649331,2.9890294760701486,11.838757293794217,0.3732255860252012
+229.17093176523554,6.042799405033284,114.99114777795211,2.5130605773535493,10.791584611953578,1.0924787219028966
+234.05053406237954,5.034690329389095,119.49669117990312,4.091372812716014,9.596936510055656,0.4256416807032856
+222.66518773388927,5.307047788924116,118.48154838340247,2.858489369330225,7.450089938267852,0.049354587982709516
+232.2360181476184,4.5171888652930825,113.37591350987573,4.99489663683351,8.230715888579432,1.8727525478877478
+222.52380790436865,0.7355390780256723,118.99028873703718,4.704359713888646,10.534174275979716,0.673619340800865
+232.78037487356193,9.288740090040813,119.92820229925212,4.58428910240664,6.430093402558377,1.0746774180790803
+223.02025418724276,1.8976285027622621,114.16266718984625,0.8036152560417649,11.07367499105655,0.3167147133894622
+234.1292053015154,6.241421329813066,118.63416433058693,4.6896077909306975,5.759047099779602,1.7964781535158296
+223.937093982389,1.7919219427367112,110.88550750529971,0.5010465397516248,9.074765109995152,1.473482491814749
+231.47533839624955,0.771510815772556,116.42315865824219,3.8808146292207297,5.5160698952966865,0.43093405978062976
+228.10041620965006,2.0882142414153373,118.1964527046907,2.2583618666388303,9.886494625226796,0.0295878953875104
+235.33612979429458,7.681901025316547,117.36518901667054,0.9323602498581028,10.873135562647489,0.1082076926769135
+234.8976201075528,9.650692679435473,113.07751280475975,4.379051432735531,10.643915658934905,0.4005959736587337
+220.32346617439757,7.199739593202648,119.45772685475788,0.6964509549345906,10.94011896511404,0.42032000180139256
+224.95716444410579,4.485101602994101,110.60931274536622,4.775875752533645,10.184574477749788,0.5376742773085673
+231.27636146353686,2.463994523834948,113.86425776263482,4.668838816153936,8.958716221215852,1.6916117705319091
+223.79088798688983,8.306269273632424,114.9670981929367,4.008944661775788,8.894336172066463,0.7343686942652181
+224.93455848671226,8.412263600537397,117.66223502290028,2.7288548276042195,5.263646122283548,1.6149726557405015
+235.9015494070661,6.108548765402556,111.19002946777492,4.40460310674604,9.260615550799592,0.23945794483777155
+223.100977217898,8.690280022180456,114.17679175219887,4.128474291213713,7.250563374352626,1.1557914540134644
+239.96976184337703,5.975397619545438,112.76890715061411,4.295792269125209,6.488831485130074,0.8275838316272771
+239.0773296618044,9.328102654458771,118.03027368789752,3.2921193648178457,7.452490159802553,1.7564636516761754
+233.90009019196341,2.0236875578570097,113.91333843209604,4.899023738130234,10.8636748549978,0.3355546211801643
+223.55017831517702,9.676860073941357,119.1230383456872,4.080429215021905,9.506741704344764,1.7900615807387243
+236.5156799729438,4.776053869900839,112.23666520749025,4.211388789919391,10.059965239473602,1.642001990445183
+222.11262599359782,5.5569880419235105,110.81934478736338,3.6360785441524266,10.391280481996125,1.8289957501322935
+229.2107560776685,3.9291600984391386,111.52809777194945,1.0940938782635257,9.969412727986104,1.6839098963476713
+221.22318942141408,4.943650007291332,119.11776563515407,4.232208373600152,5.7522634907394625,1.5793555411811404
+234.96049807026375,8.983233720977688,118.00290517702281,3.2968040906601246,9.388820577353968,0.4394635492628726
+229.78911300350262,8.187619262021622,119.53884619979182,0.615273185392985,6.667103427857308,1.4009957566721802
+232.18387001181353,4.841977961987246,115.22612486436375,4.44748548037707,6.66401904970009,0.11254872316956263
+225.13241072476265,0.26106160843329623,119.06655907000909,4.703454763886114,10.044530727163345,0.808277622942829
+230.0383255634432,1.6301075227415753,118.84116317496448,3.3411766300520243,11.470349666777299,0.3088989032018164
+222.59868627101784,3.238127708552154,116.68594661392413,0.2740451024320508,11.704267940250636,0.8160428878211744
+222.33673767289602,9.243206692681117,111.25348516845925,3.2708460528288286,5.12680456611095,1.480771080353934
+234.8312024977542,8.205224525368049,116.30713960306745,3.040341343012814,11.683773814486626,1.5391242455555354
+224.1273915021103,8.927548439978722,113.81380567223808,0.6429804208612453,8.429566801006334,1.8075292624084738
+222.51743298744273,3.3125858726905264,117.22372447760787,1.8063271079919676,9.876470438532237,0.9250031859535711
+238.09208809963295,0.37350247308727447,114.14151484669497,4.809561354171447,10.689650750105569,0.1143604157536369
+221.59531582432024,2.3081143733481264,116.12305705081836,0.9355492658762882,7.288512594312677,0.9791982432131651
+222.8131939239641,4.1366575315408864,119.94944035439542,1.6765411545250906,7.839494467794683,1.8115651331159
+236.71030963664379,2.556983628156847,110.37886571672541,1.2543758126128788,8.252993032832409,0.27455569696817606
+222.62263152820165,9.848691679418284,119.23996009407121,2.437043215026081,7.672815981259372,0.8214590665088926
+238.87361791766142,5.085637257696952,114.36771091698924,3.446376137920476,10.242466205688572,0.19753514402806369
+230.4256648160904,3.1335931369288703,118.12304866300568,0.3330121673135532,11.111246276323076,0.18939697676261538
+230.5817886853514,9.010765689059701,116.49470031339754,0.8490835127765309,7.317575534810489,1.7129568742133303
+237.8894519612258,0.9672965370148191,119.30403463026916,4.144692708548768,6.338287029268842,1.5301676265253876
+228.2524592078487,8.880896897333189,118.86285845411747,3.78815864081143,11.548715217031583,1.3826642187373375
+229.9121980995921,4.470853868305013,116.69106002259868,2.930590589429843,6.562285118975956,1.3448240548328452
+224.97639134327727,4.67290340369306,119.65268020027739,4.114288036397216,9.946130202511977,1.458048939517323
+234.84610335266285,8.104512880308748,114.12315445233361,2.324566038540531,11.420962241569583,1.7659071825339776
+230.67442613078643,1.8303250575076102,113.44599079711915,3.4250175970008065,9.804035295494486,1.6401360672375813
+223.00039817225243,7.746595455676744,117.4171325614066,3.6341399164645867,10.970472723651802,0.10780013310303942
+230.73226275496694,3.6120113499470383,116.77531531889395,3.851794581710306,8.610858244410704,1.3192854841924722
+234.380415018996,5.523384293474416,118.42358503457444,1.580814529661469,10.705895586387935,1.84581433533419
+229.11030804297022,6.428361045142283,113.42230127554865,3.8146341263876105,9.03381765732604,1.308255038858338
+224.79282600349495,5.9564533885976605,113.58006814841424,3.777621988438552,5.5309717414872415,0.07004601772470082
+223.7634787221337,4.130442080995589,116.62325070391611,2.181650481176701,5.584809402447621,1.817651888221946
+227.0302455395079,7.6746100523889496,110.45980756438854,1.5220453779039507,11.436771821911805,0.8007182168626995
+221.02726373325007,2.2559421723252857,114.2678274473009,2.445294118078169,7.066989161948305,1.0719565369683481
+238.49011528576523,9.714274757070134,111.84270524691196,2.054117396179221,7.80789881535735,0.23158966284240318
+230.80293913819725,0.23004965296663044,113.15106416804484,1.1206389755939152,8.718862891522202,1.566198629925453
+223.21562263616346,1.4158694975486696,116.51611179726814,0.3343017135355706,10.71516399652621,1.809673617679199
+222.36437050198705,0.8821693453519205,117.14980779231765,0.33227169803894524,6.586377541526026,0.04493707036288648
+235.2585379794028,6.9049655710097815,119.0138711044466,1.4115938983669003,11.694548339152183,1.2187004910797257
+226.35944515813085,8.066574354914048,116.50826524365236,2.4390580295981064,8.279925666265036,0.9772981052776286
+231.96954259052606,7.469032824158897,115.5867991565946,1.1831989668386527,10.50884253308907,0.46963607043795164

index.html

@@ -1,19 +1,119 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<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>
+
+                <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>

main.js

@@ -0,0 +1,182 @@
+// main.js
+
+Chart.defaults.color = '#a0aabf';
+Chart.defaults.font.family = "'Outfit', sans-serif";
+
+let rawData = [];
+let voltageChart = null;
+let currentChart = null;
+
+const colors = {
+    app1: 'rgba(0, 240, 255, 1)',   // Neon Blue
+    app2: 'rgba(189, 0, 255, 1)',   // Purple
+    app3: 'rgba(0, 255, 102, 1)',   // Neon Green
+    alert: 'rgba(255, 0, 85, 0.8)'  // Red for alert
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+    loadCSVData();
+    document.getElementById('apply-btn').addEventListener('click', updateDashboard);
+});
+
+function loadCSVData() {
+    Papa.parse('donnees_appareils (1).csv', {
+        download: true,
+        header: true,
+        dynamicTyping: true,
+        skipEmptyLines: true,
+        complete: function(results) {
+            console.log("CSV Parsed:", results.data);
+            rawData = results.data;
+            
+            if (rawData.length > 0) {
+                // Initialiser les dates min et max
+                const dates = rawData.map(d => d.Date).filter(d => d);
+                if (dates.length > 0) {
+                    const minDate = dates[0];
+                    const maxDate = dates[dates.length - 1];
+                    
+                    document.getElementById('start-date').value = minDate;
+                    document.getElementById('end-date').value = maxDate;
+                    document.getElementById('start-date').min = minDate;
+                    document.getElementById('start-date').max = maxDate;
+                    document.getElementById('end-date').min = minDate;
+                    document.getElementById('end-date').max = maxDate;
+                }
+            }
+
+            initializeCharts();
+            updateDashboard();
+        },
+        error: function(err) {
+            console.error("Erreur CSV:", err);
+            alert("Erreur lors de la lecture du fichier 'donnees_appareils (1).csv'.");
+        }
+    });
+}
+
+function initializeCharts() {
+    const ctxVoltage = document.getElementById('voltageChart').getContext('2d');
+    const ctxCurrent = document.getElementById('currentChart').getContext('2d');
+
+    const commonOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: { position: 'top', labels: { color: '#fff', usePointStyle: true, boxWidth: 8 } },
+            tooltip: { mode: 'index', intersect: false, backgroundColor: 'rgba(20, 25, 40, 0.9)', titleColor: '#fff', bodyColor: '#a0aabf', borderColor: 'rgba(255,255,255,0.1)', borderWidth: 1 },
+            annotation: { annotations: {} }
+        },
+        scales: {
+            x: { grid: { color: 'rgba(255, 255, 255, 0.05)' }, title: { display: true, text: 'Date / Heure' } },
+            y: { grid: { color: 'rgba(255, 255, 255, 0.05)' } }
+        },
+        elements: { line: { tension: 0.4, borderWidth: 2 }, point: { radius: 0, hitRadius: 10, hoverRadius: 6 } },
+        interaction: { mode: 'nearest', axis: 'x', intersect: false }
+    };
+
+    voltageChart = new Chart(ctxVoltage, {
+        type: 'line', data: { labels: [], datasets: [] },
+        options: { ...commonOptions, scales: { ...commonOptions.scales, y: { ...commonOptions.scales.y, title: { display: true, text: 'Tension (V)' } } } }
+    });
+
+    currentChart = new Chart(ctxCurrent, {
+        type: 'line', data: { labels: [], datasets: [] },
+        options: { ...commonOptions, scales: { ...commonOptions.scales, y: { ...commonOptions.scales.y, title: { display: true, text: 'Intensité (A)' } } } }
+    });
+}
+
+function updateDashboard() {
+    if (!rawData || rawData.length === 0) return;
+
+    const startDateStr = document.getElementById('start-date').value;
+    const endDateStr = document.getElementById('end-date').value;
+    const selectedAppareil = document.querySelector('input[name="appareil"]:checked').value;
+    const threshVol = parseFloat(document.getElementById('threshold-voltage').value);
+    const threshCur = parseFloat(document.getElementById('threshold-current').value);
+
+    // Filtrer par date
+    let filteredData = rawData;
+    if (startDateStr && endDateStr) {
+        filteredData = rawData.filter(d => {
+            if (!d.Date) return false;
+            // On peut comparer directement les strings YYYY-MM-DD
+            return d.Date >= startDateStr && d.Date <= endDateStr;
+        });
+    }
+
+    const labels = filteredData.map(d => `${d.Date} ${d.Heure}`);
+
+    // Calcul des sommes et préparation des datasets
+    let sumVoltage = 0;
+    let sumCurrent = 0;
+    
+    let voltDatasets = [];
+    let currDatasets = [];
+
+    // Fonction d'aide pour ajouter un dataset et cumuler les sommes
+    const processAppareil = (appNum, color) => {
+        const keyVol = `Tension_Appareil_${appNum}`;
+        const keyCur = `Intensite_Appareil_${appNum}`;
+        
+        const volData = filteredData.map(d => {
+            const val = parseFloat(d[keyVol]) || 0;
+            sumVoltage += val;
+            return val;
+        });
+        
+        const curData = filteredData.map(d => {
+            const val = parseFloat(d[keyCur]) || 0;
+            sumCurrent += val;
+            return val;
+        });
+
+        voltDatasets.push(createDataset(`Tension App ${appNum}`, volData, color));
+        currDatasets.push(createDataset(`Intensité App ${appNum}`, curData, color));
+    };
+
+    if (selectedAppareil === '1' || selectedAppareil === 'all') processAppareil(1, colors.app1);
+    if (selectedAppareil === '2' || selectedAppareil === 'all') processAppareil(2, colors.app2);
+    if (selectedAppareil === '3' || selectedAppareil === 'all') processAppareil(3, colors.app3);
+
+    // Mise à jour de l'UI des sommes
+    document.getElementById('sum-voltage').innerText = sumVoltage.toLocaleString('fr-FR', {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ' V';
+    document.getElementById('sum-current').innerText = sumCurrent.toLocaleString('fr-FR', {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ' A';
+
+    // Mise à jour des graphiques
+    voltageChart.data.labels = labels;
+    voltageChart.data.datasets = voltDatasets;
+    setAlertAnnotation(voltageChart, threshVol);
+    voltageChart.update();
+
+    currentChart.data.labels = labels;
+    currentChart.data.datasets = currDatasets;
+    setAlertAnnotation(currentChart, threshCur);
+    currentChart.update();
+}
+
+function createDataset(label, data, color) {
+    return {
+        label: label,
+        data: data,
+        borderColor: color,
+        backgroundColor: color.replace('1)', '0.1)'),
+        fill: true,
+        pointBackgroundColor: color,
+        pointBorderColor: '#fff',
+    };
+}
+
+function setAlertAnnotation(chartInstance, thresholdValue) {
+    if (!isNaN(thresholdValue) && thresholdValue > 0) {
+        chartInstance.options.plugins.annotation.annotations = {
+            line1: {
+                type: 'line', yMin: thresholdValue, yMax: thresholdValue,
+                borderColor: colors.alert, borderWidth: 2, borderDash: [5, 5],
+                label: { display: true, content: 'SEUIL ALERTE', position: 'end', backgroundColor: colors.alert, color: '#fff', font: { size: 10, weight: 'bold' } }
+            }
+        };
+    } else {
+        chartInstance.options.plugins.annotation.annotations = {};
+    }
+}

style.css

@@ -1,28 +1,144 @@
+/* Previous root variables */
+:root {
+    --bg-color: #0b0f19;
+    --panel-bg: rgba(20, 25, 40, 0.6);
+    --panel-border: rgba(255, 255, 255, 0.1);
+    --text-primary: #ffffff;
+    --text-secondary: #a0aabf;
+    --accent-blue: #00f0ff;
+    --accent-purple: #bd00ff;
+    --accent-green: #00ff66;
+    --accent-red: #ff0055;
+    --font-main: 'Outfit', sans-serif;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    background-color: var(--bg-color);
+    color: var(--text-primary);
+    font-family: var(--font-main);
+    min-height: 100vh;
+    overflow-x: hidden;
+    position: relative;
+}
+
+.background-orbs {
+    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden;
+}
+
+.orb {
+    position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5; animation: float 20s infinite ease-in-out;
+}
+
+.orb-1 { width: 400px; height: 400px; background: var(--accent-purple); top: -100px; left: -100px; }
+.orb-2 { width: 300px; height: 300px; background: var(--accent-blue); bottom: -50px; right: -50px; animation-delay: -5s; }
+.orb-3 { width: 250px; height: 250px; background: var(--accent-green); top: 40%; left: 50%; animation-delay: -10s; opacity: 0.3; }
+
+@keyframes float {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33% { transform: translate(30px, -50px) scale(1.1); }
+    66% { transform: translate(-20px, 20px) scale(0.9); }
+}
+
+.container { max-width: 1400px; margin: 0 auto; padding: 2rem; }
+
+.glass-panel {
+    background: var(--panel-bg);
+    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--panel-border); border-radius: 20px;
+    padding: 1.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+header { text-align: center; margin-bottom: 2rem; }
+header h1 {
+    font-size: 2.5rem; font-weight: 800;
+    background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem;
 }
+header p { color: var(--text-secondary); font-size: 1.1rem; }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.dashboard { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; }
+
+.controls { display: flex; flex-direction: column; gap: 2rem; height: fit-content; }
+.controls h2 { font-size: 1.5rem; font-weight: 600; border-bottom: 1px solid var(--panel-border); padding-bottom: 1rem; }
+.control-group { display: flex; flex-direction: column; gap: 0.8rem; }
+.control-group label { font-weight: 600; color: var(--accent-blue); font-size: 1.1rem; }
+
+.date-inputs { display: flex; flex-direction: column; gap: 1rem; }
+.input-wrapper { display: flex; flex-direction: column; gap: 0.3rem; }
+.label-mini { font-size: 0.85rem; color: var(--text-secondary); }
+
+input[type="number"], input[type="date"] {
+    width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--panel-border);
+    color: white; padding: 0.8rem; border-radius: 10px; font-family: var(--font-main);
+    font-size: 1rem; outline: none; transition: all 0.3s ease;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Chrome/Webkit specific for date icon */
+::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
+
+input:focus { border-color: var(--accent-blue); box-shadow: 0 0 10px rgba(0, 240, 255, 0.2); }
+
+/* Radio buttons stylisés */
+.radio-inputs { display: flex; flex-direction: column; gap: 0.8rem; }
+.radio-label {
+    display: flex; align-items: center; gap: 0.8rem; cursor: pointer; color: var(--text-primary);
+    font-size: 1rem; transition: color 0.3s;
+}
+.radio-label:hover { color: var(--accent-blue); }
+.radio-label input[type="radio"] { display: none; }
+.custom-radio {
+    width: 20px; height: 20px; border: 2px solid var(--text-secondary); border-radius: 50%;
+    display: inline-block; position: relative; transition: all 0.3s ease;
+}
+.radio-label input[type="radio"]:checked + .custom-radio {
+    border-color: var(--accent-blue); box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
+}
+.radio-label input[type="radio"]:checked + .custom-radio::after {
+    content: ''; width: 10px; height: 10px; background: var(--accent-blue);
+    border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.threshold-inputs { display: flex; flex-direction: column; gap: 1rem; }
+
+.glow-on-hover {
+    padding: 1rem; border: none; outline: none; color: #fff;
+    background: linear-gradient(45deg, var(--accent-blue), var(--accent-purple));
+    cursor: pointer; position: relative; z-index: 0; border-radius: 10px;
+    font-size: 1.1rem; font-weight: 600; font-family: var(--font-main); transition: transform 0.2s ease;
+}
+.glow-on-hover:hover { transform: translateY(-2px); }
+.glow-on-hover:before {
+    content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+    position: absolute; top: -2px; left:-2px; background-size: 400%; z-index: -1; filter: blur(5px);
+    width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite;
+    opacity: 0; transition: opacity .3s ease-in-out; border-radius: 10px;
 }
+.glow-on-hover:hover:before { opacity: 1; }
+.glow-on-hover:after {
+    z-index: -1; content: ''; position: absolute; width: 100%; height: 100%;
+    background: linear-gradient(45deg, var(--accent-blue), var(--accent-purple));
+    left: 0; top: 0; border-radius: 10px;
+}
+@keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } }
+
+.main-content { display: flex; flex-direction: column; gap: 2rem; }
+
+.summary-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
+.summary-card { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; }
+.summary-card h3 { color: var(--text-secondary); font-size: 1.2rem; margin-bottom: 1rem; font-weight: 400; }
+.sum-value { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); text-shadow: 0 0 20px rgba(0, 240, 255, 0.4); }
+#sum-voltage { background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+#sum-current { background: linear-gradient(90deg, var(--accent-green), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+
+
+.charts-area { display: flex; flex-direction: column; gap: 2rem; }
+.chart-container { height: 400px; display: flex; flex-direction: column; }
+.chart-container h2 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--text-primary); }
+canvas { flex-grow: 1; width: 100% !important; height: 100% !important; }
 
-.card p:last-child {
-	margin-bottom: 0;
+@media (max-width: 900px) {
+    .dashboard { grid-template-columns: 1fr; }
+    .summary-cards { grid-template-columns: 1fr; }
 }