Add vertical bar chart UI with Hono mock server

2026-08-18 13:22:17 +00:00 · 2026-06-22 18:50:24 +05:30
parent 335cdfdea8
commit 0d8dbf1368
5 changed files with 186 additions and 4 deletions
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Zone Temperatures</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #f5f5f5;
+      padding: 2rem;
+      color: #333;
+    }
+    h1 { margin-bottom: 2rem; font-size: 1.5rem; font-weight: 600; }
+    #zones {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1.5rem;
+    }
+    .zone-card {
+      background: #fff;
+      border-radius: 12px;
+      padding: 1.25rem;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+    }
+    .zone-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      margin-bottom: 1rem;
+    }
+    .zone-name { font-weight: 600; font-size: 1rem; }
+    .zone-temp { font-size: 1.25rem; font-weight: 700; color: #2563eb; }
+    .zone-time { font-size: 0.75rem; color: #888; margin-left: 0.5rem; }
+    .bar-chart {
+      display: flex;
+      align-items: flex-end;
+      gap: 4px;
+      height: 120px;
+      padding-top: 0.5rem;
+    }
+    .bar-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      height: 100%;
+    }
+    .bar {
+      width: 100%;
+      max-width: 40px;
+      background: #2563eb;
+      border-radius: 4px 4px 0 0;
+      min-height: 4px;
+      transition: height 0.3s ease;
+    }
+    .bar-label {
+      font-size: 0.6rem;
+      color: #888;
+      margin-top: 4px;
+      white-space: nowrap;
+    }
+    .zone-empty {
+      font-size: 0.85rem;
+      color: #aaa;
+      text-align: center;
+      padding: 2rem 0;
+    }
+  </style>
+</head>
+<body>
+  <h1>Zone Temperature Monitor</h1>
+  <div id="zones"></div>
+  <script type="module" src="/src/ui.js"></script>
+</body>
+</html>