File size: 3,617 Bytes
7a077a3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JalGuard - Analytics</title>
<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=Manrope:wght@400;600;700;800&family=Sora:wght@600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/static/css/styles.css" />
</head>
<body>
<header class="nav">
<div class="nav-inner">
<div class="brand"><span class="brand-dot"></span>JalGuard Control Suite</div>
<nav class="nav-links">
<a class="nav-link" data-page="dashboard" href="/dashboard">Dashboard</a>
<a class="nav-link" data-page="scenario" href="/scenario-builder">Scenario Builder</a>
<a class="nav-link" data-page="analytics" href="/analytics">Analytics & Reports</a>
<a class="nav-link" data-page="admin" href="/admin-panel">Admin Panel</a>
</nav>
<a class="profile-link" id="profileLink" href="/settings">JG</a>
</div>
</header>
<main class="wrap">
<section class="status-bar">
<div class="status-pill">FastAPI<strong id="statusFastAPI">-</strong></div>
<div class="status-pill">Simulation Engine<strong id="statusOpenEnv">-</strong></div>
<div class="status-pill">AI Assistant<strong id="statusAssistant">-</strong></div>
<div class="status-pill">Current Task<strong id="statusTask">-</strong></div>
</section>
<section class="quick-actions">
<button class="btn" data-qa="start">Start Episode</button>
<button class="btn secondary" data-qa="reset">Reset</button>
<button class="btn accent" data-qa="ask-ai">Ask AI</button>
<button class="btn ghost" data-qa="download">Download Report</button>
</section>
<section class="grid">
<article class="card" style="grid-column: span 12;">
<h3>Episode Summary</h3>
<p id="episodeSummary" class="desc"></p>
<div class="form-row">
<button id="refreshAnalytics" class="btn">Refresh</button>
<button id="exportJson" class="btn secondary">Export JSON</button>
<button id="exportCsv" class="btn accent">Export CSV</button>
<span class="tag">Update Mode: <strong id="chartModeLabel">-</strong></span>
</div>
</article>
<article class="card" style="grid-column: span 6; min-height: 300px;">
<h3>Tank + Chlorine History</h3>
<div style="height:240px;"><canvas id="tankChart"></canvas></div>
</article>
<article class="card" style="grid-column: span 6; min-height: 300px;">
<h3>Reward Timeline</h3>
<div style="height:240px;"><canvas id="rewardChart"></canvas></div>
</article>
<article class="card" style="grid-column: span 12;">
<h3>Assistant vs Manual Decisions</h3>
<table class="table">
<thead><tr><th>Metric</th><th>Value</th></tr></thead>
<tbody id="comparisonBody"></tbody>
</table>
</article>
</section>
</main>
<a class="help-fab" href="/docs" title="Help">?</a>
<div class="toast-wrap" id="toastWrap"></div>
<div class="modal" id="onboardModal"><div class="modal-content"><h3>Quick Onboarding</h3><p id="onboardBody"></p><button id="onboardNext" class="btn">Next</button></div></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/js/analytics.js"></script>
</body>
</html>
|