phase 4 ready for review

2026-08-17 16:57:38 +01:00
parent 5e80204e34
commit 1a6840d16c
5 changed files with 933 additions and 4 deletions
@@ -1 +1,88 @@
-<!DOCTYPE html><html><head><title>hagfish</title></head><body><h1>hagfish</h1><p>Frontend coming in Phase 4.</p></body></html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
+  <title>Fisheries Dashboard — FLÓ</title>
+
+  <script>
+    (function () {
+      var stored = localStorage.getItem('poc-theme');
+      var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light');
+      document.documentElement.setAttribute('data-theme', theme);
+    })();
+  </script>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+
+  <nav>
+    <a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
+    <a href="/" class="nav-brand">
+      FLÓ <span class="brand-sep">/</span> <span class="brand-sub">HAGFISH</span>
+    </a>
+  </nav>
+
+  <main class="page-body">
+    <div class="dashboard">
+      <div id="loading-overlay" class="loading-overlay">
+        <span>Loading fisheries data…</span>
+      </div>
+
+      <div class="filters">
+        <div class="filter-group">
+          <label for="species">Species</label>
+          <select id="species"><option value="">All</option></select>
+        </div>
+        <div class="filter-group">
+          <label for="zone">Zone</label>
+          <select id="zone"><option value="">All</option></select>
+        </div>
+        <div class="filter-group">
+          <label for="gear">Gear</label>
+          <select id="gear"><option value="">All</option></select>
+        </div>
+        <div class="filter-group">
+          <label for="month_from">From</label>
+          <select id="month_from"><option value="">All</option></select>
+        </div>
+        <div class="filter-group">
+          <label for="month_to">To</label>
+          <select id="month_to"><option value="">All</option></select>
+        </div>
+        <button class="apply-btn" id="apply-filters">Apply</button>
+      </div>
+
+      <div id="empty-state" class="empty-state" style="display:none;">
+        <p>No data available for the selected filters.</p>
+        <p>Try adjusting your filters or running an ingestion.</p>
+      </div>
+
+      <div id="charts-grid" class="charts-grid" style="display:none;">
+        <div class="chart-container full-width">
+          <div class="chart-title">Total Landings (Mass & Value)</div>
+          <div id="chart-line" style="width:100%; height:300px;"></div>
+        </div>
+        <div class="chart-container">
+          <div class="chart-title">Top Species by Value</div>
+          <div id="chart-donut" style="width:100%; height:300px;"></div>
+        </div>
+        <div class="chart-container">
+          <div class="chart-title">Landings by Month (Stacked by Species)</div>
+          <div id="chart-bar" style="width:100%; height:300px;"></div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>