89 lines
3.2 KiB
HTML
89 lines
3.2 KiB
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>
|