Déploiement initial propre

README.md

@@ -1,10 +1,12 @@
 ---
 title: Surveillance
-emoji: 🏆
-colorFrom: yellow
-colorTo: gray
+emoji: 📊
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Surveillance des Appareils ⚡️
+
+Un tableau de bord moderne et interactif.

donnees_appareils (1).csv

@@ -0,0 +1,101 @@
+Date,Heure,Tension_Appareil_1,Intensite_Appareil_1,Tension_Appareil_2,Intensite_Appareil_2,Tension_Appareil_3,Intensite_Appareil_3
+2026-04-23,08:00:06,238.24237053874856,4.1233654655592495,118.52414710768348,0.3107675008031418,11.948495986560236,1.8686544255275641
+2026-04-24,03:21:21,225.88771895257642,2.89154614194826,114.98642580523182,1.5896629867445042,8.422488389274054,1.7812429673478027
+2026-04-25,02:07:23,228.91427928313502,1.1564696199900566,119.18684861732709,1.9927431597759553,7.009532960477481,0.6435801611147194
+2026-04-26,21:24:02,233.4433073978193,2.1785065674133484,115.02932487527073,3.59140245278919,7.762688441754072,1.8103400501226654
+2026-04-27,03:02:22,230.8113846202428,3.069036510823898,118.3913748309249,0.6473702954738019,11.673205891323205,0.557127388564572
+2026-04-28,20:22:56,239.79351162525614,5.451729532231843,116.53731912627042,0.11295816765267963,11.406567152333107,1.2913833365822365
+2026-04-29,15:47:59,231.43677886816118,7.213751475214312,119.12186049408092,4.85992715866982,10.776619358274846,0.9574063786607157
+2026-04-30,12:34:45,238.46004898040866,7.714951746287941,115.88075987020088,4.772783518664961,7.844209952044718,0.6399166004402641
+2026-05-01,23:54:36,227.47378180997757,6.827221693126766,113.32010568496891,4.369929156991701,6.950538436208043,1.13118552037927
+2026-05-02,14:38:13,235.87693326927416,5.911744332309307,110.7556803621727,3.080042773178867,6.541995101894974,0.5273837839410488
+2026-05-03,15:51:32,222.17546845465733,9.589450344634514,110.68671853124006,1.6084153109744137,11.892455708591756,0.9012947722120924
+2026-05-04,23:02:56,228.7317449008221,6.620485534988387,118.84894953171863,0.2908633413049994,8.015502183117466,0.4992071875088722
+2026-05-05,06:12:01,223.7445900387769,9.45665698458101,118.97952846182545,4.654579882335255,6.34685115680359,1.2981131539789594
+2026-05-06,05:28:11,231.7662317471984,3.75762620154392,117.98560251915379,1.054183566001765,10.29309707795231,0.3106630715117218
+2026-05-07,19:00:27,221.58219236803262,6.130345162241472,113.99854026485218,1.0351493137554466,6.051699974855556,1.1953721063278229
+2026-05-08,20:03:55,224.8345501477698,9.697958060370139,117.5947040922393,3.2115117753039355,5.476028770949307,1.4709866768834334
+2026-05-09,03:35:15,226.3995334797387,5.893417967250199,113.94541732839231,1.9030938174289114,5.955069202594792,1.6091769677956496
+2026-05-10,23:29:11,232.27093441466243,7.342658202322273,114.17319195618623,3.7538336086144826,11.003044304963549,0.6316743569538399
+2026-05-11,20:57:31,231.07492218015696,2.3612022719146237,112.91634577741372,1.3537020988983945,8.576521320083351,0.33723999810814304
+2026-05-12,20:35:13,226.32054125690803,3.6857083040290632,117.67750107191597,2.79321584850176,7.831759231736586,0.21260718226817035
+2026-05-13,15:46:20,236.04265618643274,8.837673285792848,116.37340899890664,1.6307963990206469,11.7997817913445,0.22248437665300308
+2026-05-14,19:30:51,236.4182909570723,1.862707773994227,116.3881046007144,0.8429617071377753,6.404698772338069,1.1816466670242833
+2026-05-15,20:44:41,230.95404801350213,4.274534982955481,110.66173264585477,2.4597653719160544,8.207170859590825,0.17625461667146847
+2026-05-16,13:15:17,225.75225035386788,1.7647734906090355,113.92203379386211,0.5404013332391924,11.32849916156517,0.49337165460508275
+2026-05-17,20:51:32,227.11232314299767,3.871190022602514,116.30874784009424,1.911609338858654,5.618383036374968,0.25644240721836226
+2026-05-18,15:04:31,232.1268851677169,5.8689888071121725,118.6318952646886,4.41503509158094,6.899640531784286,0.2843764010348313
+2026-05-19,22:15:56,220.25578983679003,2.468501252610391,113.11057198668868,2.5769839990427004,6.9419590539469915,1.6122385024646098
+2026-05-20,13:46:50,236.8769732091084,7.726232895176497,118.24850399756437,0.8910199906399667,7.863244747688963,1.2530989429292045
+2026-05-21,10:53:43,234.59124102513545,4.531135578492671,110.01796460538388,3.3812364512066404,6.620088628666576,0.07266610055016923
+2026-05-22,19:19:44,223.99700056079135,2.0834679455427048,118.6963185488041,1.0975465241953795,9.484224714693951,1.6061522648799818
+2026-05-23,06:08:35,227.6472426790773,0.49683869483522547,113.47499691760169,1.8635749006699895,5.466135184676979,1.808101077147677
+2026-05-24,07:17:28,235.998798065555,6.658946145688082,115.19378352164084,1.6456725694603989,10.80942119011831,1.6166181879599342
+2026-05-25,21:44:35,225.80794031130222,3.3685879876710128,114.29282623212099,2.2259370481121,9.880633834442627,0.508987766429182
+2026-05-26,14:22:40,223.69370783185238,8.203210939265203,113.84338658002453,3.873669411529133,6.683555645178963,0.4419628297692145
+2026-05-27,15:44:10,233.8981769279626,2.4010933758757376,116.38235791393231,3.327765001147545,6.939875126213533,1.8477325432138672
+2026-05-28,16:07:44,224.24552445085365,1.1231074661884994,117.42263037933392,1.6785498675999684,7.9832198871007405,1.8137560870288125
+2026-05-29,20:44:50,237.32159170900457,7.811981951993395,112.2453333009088,3.7670787069985177,5.0294126640636865,0.5027103919778946
+2026-05-30,02:37:08,232.38547410058027,3.7488315531245977,111.38564669039468,2.274232251838185,11.391578596210469,0.9341551835494757
+2026-05-31,05:22:59,234.14609922298678,7.571529597660097,119.65572184320948,1.6870059456779314,6.885234118880218,1.3820626728813434
+2026-06-01,15:42:10,220.54131863107136,1.3949369544136048,117.89215890614733,4.485917518671939,7.219098196675208,1.6237499524839931
+2026-06-02,07:07:20,230.57783568436946,1.1768615678086853,118.92904699342026,1.9155489416032763,7.798798791743378,0.9509260315038278
+2026-06-03,06:12:59,223.7434635369335,2.576037237616107,112.47487337003147,4.9581969006127755,11.379943023082577,1.616469441392636
+2026-06-04,06:36:11,228.95366340836117,2.5819390972633385,118.00326576280091,4.351874162364097,5.319431307314149,0.12589471287235984
+2026-06-05,21:31:53,227.04450615694878,5.566333849176037,119.22733988980616,0.05793427011049999,5.499458926116852,0.3009098241557261
+2026-06-06,10:52:12,235.06335101731887,8.408014974195892,118.37515936253146,2.349232635752817,5.311833356941374,0.3939167291510762
+2026-06-07,10:47:58,223.4542449870012,4.705294837782151,117.96009591669926,3.8816610757010794,6.857819186254769,1.1769056760718
+2026-06-08,20:21:20,226.4014967271528,7.894144712688916,110.77214593965675,1.3690262618071625,9.926688489161961,1.9255063951972837
+2026-06-09,20:39:05,220.65678158282347,8.765989188284856,115.92295088044327,2.0683914948441364,6.192587236514911,0.6068766305277287
+2026-06-10,15:12:30,239.8502148543052,1.691801213305957,115.93850275250556,4.638072986079115,8.202904659460945,0.4906741861449728
+2026-06-11,19:12:41,228.52162209420865,1.2231297636279774,113.61630013772943,4.953894282321095,10.470200902755067,1.8879054161951863
+2026-06-12,15:52:04,221.4164310074177,2.0037560524664135,118.54073196829803,2.222048151898998,10.267594909665615,0.1733421799265714
+2026-06-13,17:24:32,230.9182553427414,6.394257319282148,115.92465487108062,3.321281835162497,8.208297321260671,0.9536151584258928
+2026-06-14,06:37:11,238.58106675339036,9.720520042752705,110.53801688181954,4.2411163045582425,7.997827746209701,0.2907237530400539
+2026-06-15,21:58:03,223.38768877566005,7.069319137528664,113.59015236422486,0.052860618259429004,10.789228567353216,0.39293956477955083
+2026-06-16,01:16:46,229.1172010726916,4.235075587544706,113.32472577418729,3.756333274597506,8.284537128761633,0.6457622784292476
+2026-06-17,05:35:01,227.24781470575465,1.134093867102742,111.27711049473876,1.8953309711519692,11.86507024373213,0.4266978984766081
+2026-06-18,02:18:16,235.16004210692068,8.084775082107646,110.13595558616784,2.0737568555649872,11.247347926736987,1.9054884257608562
+2026-06-19,17:58:26,234.244487964199,5.848561760661991,116.23614073541117,2.995158309627882,5.768627496293773,0.9646998655739172
+2026-06-20,18:45:43,236.60965652020008,1.5761950957861521,116.03902550217312,1.2613402741785205,11.113641864376032,0.9164191381900223
+2026-06-21,00:43:59,227.69292871227756,2.7704547410125113,115.54450109843582,3.8944570273181243,7.8144593008985295,1.3084338866833642
+2026-06-22,12:21:21,234.98340465927174,7.933406507099771,118.45389814480605,1.978864269958872,5.727184723345244,1.4725480928682244
+2026-06-23,19:28:03,234.90549417558378,5.519047802060941,111.9126924777277,3.5350751065160737,8.79431785617885,0.6468399754313876
+2026-06-24,06:08:22,226.56757034879706,4.264588301889388,115.5539427118466,4.523496454550999,7.429513188698197,1.2671300485272325
+2026-06-25,08:54:33,231.97399402891935,9.293001501286842,116.81067031341526,0.1771645259747952,10.804560930233011,1.3324507313946305
+2026-06-26,09:33:38,226.7434709358123,5.708351468715321,113.35755412084207,2.5452610496322268,7.407866098199118,1.0482890134968468
+2026-06-27,11:47:03,234.17385731281047,9.206238180095758,111.9619536171827,3.9366710004401964,6.6175238337035465,0.8452733278583174
+2026-06-28,12:25:34,222.83665569854108,4.457422504435594,116.10015728456601,4.9333897173778025,10.730904326166815,0.789040258942227
+2026-06-29,20:08:30,220.19257127137547,0.4806506941314226,119.88421252387501,0.15229164663993977,11.464150155668328,0.3326017179956251
+2026-06-30,08:21:09,226.65484047635192,4.198478521103905,110.91778977820394,3.303030455513387,10.918733895916603,0.7170160686762137
+2026-07-01,09:17:32,227.64709321821078,9.898689196680655,116.8050691082243,2.4004287268926645,10.859202691851223,1.2786525749949567
+2026-07-02,18:48:32,228.2325853926209,3.20540306057854,113.4323237170425,2.9760938055081323,6.278327026088014,1.8987375899051728
+2026-07-03,16:01:54,229.93391615079923,8.214707121127333,113.11263787653833,4.7378448797474615,6.629864047446728,1.9561797522148192
+2026-07-04,10:29:36,228.62332989284357,4.953872013035524,114.75671434435974,3.647875987152767,9.255132821784759,1.8196806088641204
+2026-07-05,05:57:23,236.99926958978222,3.7600995520645255,113.52956283770585,4.848236114792964,6.769696794194659,0.5852933140814878
+2026-07-06,03:01:29,223.76925708314542,6.311996678785665,111.07767655155331,2.7474695248637317,8.270053810583297,0.7925244001568492
+2026-07-07,01:25:55,239.88535480641227,7.960645343872257,110.85029513299725,2.547123942335186,9.60842989257145,0.7834496536925303
+2026-07-08,14:07:45,226.04844719974005,0.23469188578515993,118.37480017084773,1.5078171880071887,8.119288196286785,0.9964871052599019
+2026-07-09,14:51:00,223.7462563152084,6.822134987740639,114.34141334578688,3.4013690156406198,5.748531520829619,1.785502555683167
+2026-07-10,19:38:47,227.0294707146225,9.178468135309984,111.5729568649347,3.259959177248934,8.982949156519139,1.5962128616944453
+2026-07-11,22:46:13,232.71651366826853,7.544309478354474,114.90445235292466,2.6205642509904403,11.367459637083527,1.6809064053447311
+2026-07-12,03:38:15,221.74314420140539,5.296869776253701,110.53456031269026,4.562204947456871,10.783332902677639,0.3183299241629698
+2026-07-13,01:16:10,233.78754624482582,2.6424679924534495,116.79852816757663,3.96586550401205,11.466964536479718,0.3725115403618145
+2026-07-14,19:11:42,239.61098002624064,1.5279720719194498,117.15696977416157,2.243978023449767,11.724547745080294,0.6220942887031555
+2026-07-15,10:09:33,235.8779723216568,7.806158136622621,119.59792335496843,3.807527341244607,6.7724876905475355,1.912160896050434
+2026-07-16,08:03:15,233.16513643853145,8.930720236174915,116.9305495954676,2.8516016726601294,9.057641720732708,0.5278369752121385
+2026-07-17,19:15:03,227.9541960109868,3.462230160827131,119.64802822081464,1.9697045087276601,5.549847992309002,0.3645423786098518
+2026-07-18,12:25:46,229.51701641455168,2.9911778152331765,117.66514705670238,1.4929905784107418,10.693041549249799,0.45990595790718763
+2026-07-19,13:45:40,237.81120138587966,9.801186368489864,113.37904768493323,1.5651632178310901,9.82675627781733,0.2602615992456164
+2026-07-20,09:07:11,231.80838090172134,5.094084359595668,110.40277574061471,1.044598581898568,11.405598851743042,1.7010408540727517
+2026-07-21,05:40:34,237.30810077972455,1.6267392648185848,112.74563712796215,2.6341761850568366,9.006984203884917,1.959983468481367
+2026-07-22,02:19:13,231.2054533094133,4.929321700377632,112.66354284122478,3.430591205625706,8.38748185112204,0.5680828830756329
+2026-07-23,04:39:25,236.82746436132703,1.3201196115108131,118.93250043593162,0.5311042020827986,9.717020206402431,0.4951988510880453
+2026-07-24,16:08:58,221.746527805341,3.2170623913742933,114.53917685000975,2.8838817777606547,9.733855488849597,1.152246163353368
+2026-07-25,03:22:41,223.42256848826545,7.5267174188610415,119.6152576245938,0.45940865991810886,9.372796058379944,1.7004299453457528
+2026-07-26,22:57:16,228.01046138603533,6.512620176772765,113.3226603632091,0.1346330665565244,9.07707638612257,0.46272598319561625
+2026-07-27,17:39:08,236.9400774464923,6.917038961968372,118.56662500328173,2.070923477002363,11.465033422614002,0.6877101758135057
+2026-07-28,22:28:21,224.19239586115768,2.49908116184951,118.98190141336447,4.419313355463803,7.029930659371971,0.617280076896534
+2026-07-29,00:25:41,227.69805167803472,7.627477919778126,112.92890178785012,2.943239635363772,6.421274877480931,0.5535769950483078
+2026-07-30,00:26:06,225.59087781574536,2.6801341422217773,115.52877698586742,2.5431597862465547,7.628112378025362,0.915998453231309
+2026-07-31,22:16:08,238.47982059031668,2.0136788731911888,117.80186853737816,3.829190200742163,6.8888585647226,0.9074734344771114

index.html

@@ -1,19 +1,126 @@
-<!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>
+
+                <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>

main.js

@@ -0,0 +1,234 @@
+// 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);
+    document.getElementById('csv-upload').addEventListener('change', handleFileUpload);
+});
+
+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;
+            
+            // Vérifier si le CSV est valide (s'il contient bien la colonne 'Date')
+            // PapaParse peut parfois lire une page d'erreur 404 comme un CSV
+            if (rawData.length === 0 || !rawData[0] || !rawData[0].hasOwnProperty('Date')) {
+                console.warn("Le fichier CSV est introuvable ou invalide. Affichage de l'upload manuel.");
+                document.getElementById('upload-group').style.display = 'block';
+                return;
+            }
+            
+            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);
+            document.getElementById('upload-group').style.display = 'block';
+            console.log("Affichage du champ de chargement manuel activé.");
+        }
+    });
+}
+
+function handleFileUpload(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    Papa.parse(file, {
+        header: true,
+        dynamicTyping: true,
+        skipEmptyLines: true,
+        complete: function(results) {
+            console.log("Uploaded CSV Parsed:", results.data);
+            rawData = results.data;
+            
+            if (rawData.length > 0) {
+                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;
+                }
+            }
+
+            if (!voltageChart || !currentChart) {
+                initializeCharts();
+            }
+            updateDashboard();
+            
+            document.getElementById('upload-label').innerText = "Fichier chargé avec succès !";
+            document.getElementById('upload-label').style.color = "#00ff66";
+        },
+        error: function(err) {
+            console.error("Erreur lors du parse du fichier uploadé:", err);
+            alert("Erreur lors de la lecture du fichier uploadé.");
+        }
+    });
+}
+
+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,169 @@
+/* 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; }
+
+.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;
+}
+
+/* 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%);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.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; }
+
+.alert-text {
+    color: var(--accent-red);
+    font-size: 0.9rem;
+    font-weight: 600;
+    line-height: 1.4;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.file-input {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--accent-red);
+    color: white;
+    padding: 0.8rem;
+    border-radius: 10px;
+    font-family: var(--font-main);
+    font-size: 0.9rem;
+    outline: none;
+    transition: all 0.3s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.file-input:focus {
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@media (max-width: 900px) {
+    .dashboard { grid-template-columns: 1fr; }
+    .summary-cards { grid-template-columns: 1fr; }
 }