feat: add style to webui

server/frontend/public/assets/css/main.css

@@ -0,0 +1,146 @@
+:root {
+  --color-bg: #f7f6f2;
+  --color-surface: #f9f8f5;
+  --color-surface-2: #ffffff;
+  --color-text: #28251d;
+  --color-text-muted: #7a7974;
+  --color-text-faint: #bab9b4;
+  --color-border: #bab9b4;
+  --color-text-inverse: #f9f8f4;
+  --color-primary: #01696f;
+  --color-primary-hover: #0c4e54;
+  --color-chart: #01696f;
+  --font-body: "Ubuntu", "Helvetica", "Arial", sans-serif;
+  --content-width: 1200px;
+  --radius: 1rem;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  scroll-behavior: smooth;
+}
+
+body {
+  color: var(--color-text);
+  background-color: var(--color-bg);
+}
+
+header {
+  background-color: var(--color-surface-2);
+  color: var(--color-primary);
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding-bottom: 0.3rem;
+  padding-top: 0.3rem;
+  & h1 {
+    padding-left: 3rem;
+  }
+}
+
+main {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--content-width);
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem;
+  justify-content: center;
+
+  button {
+    cursor: pointer;
+    align-self: center;
+
+    &.btn-primary {
+      padding: 0.75rem;
+      background: var(--color-primary);
+      color: var(--color-text-inverse);
+      border-radius: var(--radius);
+      border: 1px solid var(--color-primary-hover);
+      font-weight: bold;
+      font-size: 1.25rem;
+
+      &:hover {
+        background: var(--color-primary-hover);
+      }
+
+      &:active {
+        opacity: 0.85;
+      }
+    }
+  }
+
+  fieldset {
+    background: var(--color-surface);
+    border-radius: var(--radius);
+    border-color: var(--color-text-faint);
+    border-width: 1px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 0.5rem;
+    align-self: center;
+
+    label {
+      color: var(--color-text-muted);
+    }
+
+    legend {
+      color: var(--color-text-faint);
+    }
+
+    input,
+    select {
+      height: 2rem;
+      padding: 0 0.75rem;
+      background: var(--color-surface-2);
+      border: 1px solid var(--color-border);
+      border-radius: 0.5rem;
+      color: var(--color-text);
+    }
+
+    .filter-field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      align-items: center;
+    }
+  }
+}
+
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+  gap: 1rem;
+
+  dl {
+    background: var(--color-surface);
+    border: 1px solid var(--color-text-faint);
+    border-radius: var(--radius);
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    align-items: center;
+
+    dt {
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    dd {
+      font-size: 2rem;
+      font-weight: bold;
+      color: var(--color-text);
+      font-variant-numeric: tabular-nums;
+      line-height: 1.1;
+      margin-left: 0;
+    }
+  }
+}

server/frontend/public/assets/js/chart.js

@@ -1,8 +1,11 @@
 function renderChart(points) {
   const canvas = document.getElementById("consumption-chart");
 
-  const labels = points.map(p => formatPeriod(p.period));
+  const labels = points.map((p) => formatPeriod(p.period));
-  const data = points.map(p => p.delta_m3);
+  const data = points.map((p) => p.delta_m3);
+
+  const style  = getComputedStyle(document.documentElement);
+  const accent = style.getPropertyValue('--color-chart').trim();
 
   let chart = new Chart(canvas, {
     type: "bar",
@@ -11,15 +14,29 @@ function renderChart(points) {
       datasets: [
         {
           label: "Consommation (m³)",
-          data
+          data,
+          backgroundColor: accent + 'cc',
+          borderColor: accent,
+          borderWidth: '1px'
         },
       ],
     },
     options: {
       responsive: true,
       scales: {
+        x: {
+          grid: { display: false },
+          ticks: {
+            color: style.getPropertyValue("--color-text-muted").trim()
+          },
+        },
         y: {
           beginAtZero: true,
+          grid: { color: style.getPropertyValue("--color-border").trim() },
+          ticks: {
+            color: style.getPropertyValue("--color-text-muted").trim(),
+            callback: (v) => v.toFixed(2)
+          },
         },
       },
     },

server/frontend/public/index.html

@@ -14,17 +14,18 @@
 
     <main>
       <section class="filters">
+        <button class="btn-primary" id="btn-refresh">Actualiser</button>
         <fieldset>
-          <legend>Période</legend>
+          <legend>Paramètres</legend>
-          <div>
+          <div class="filter-field">
             <label for="date-start">Du</label>
             <input type="date" id="date-start" name="date-start" />
           </div>
-          <div>
+          <div class="filter-field">
             <label for="date-end">Au</label>
             <input type="date" id="date-end" name="date-end" />
           </div>
-          <div>
+          <div class="filter-field">
             <label for="granularity">Granularité</label>
             <select id="granularity" name="granularity">
               <option value="hour">Heure</option>
@@ -34,7 +35,6 @@
             </select>
           </div>
         </fieldset>
-        <button class="btn-primary" id="btn-refresh">Actualiser</button>
       </section>
 
       <section class="kpis">