5:<meta name="viewport" content="width=device-width, initial-scale=1.0">
9:<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
10:<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
11:<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
13:/* Leaflet custom marker styles */
20:.leaflet-popup-content-wrapper{border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
21:.leaflet-popup-content{margin:12px 16px;font-family:var(--font-sans)}
38:    <div class="nav-section-label">Dashboard</div>
39:    <a class="nav-item active" onclick="switchView('dashboard')" id="navDashboard">
42:    <a class="nav-item" onclick="switchView('map')" id="navMap">
43:      <i class="ti ti-map-2"></i>Interactive WebGIS Map
47:    <div class="nav-section-label">Data Collection</div>
48:    <a class="nav-item" onclick="switchView('form')" id="navForm">
52:    <div class="nav-section-label">Exposure Modules</div>
53:    <a class="nav-item" onclick="switchView('form');openSection('secA')" id="navExposure">
54:      <i class="ti ti-map-pin"></i>Exposure Inventory
56:    <a class="nav-item" onclick="switchView('form');openSection('secB')" id="navSoil">
59:    <a class="nav-item" onclick="switchView('form');openSection('secC')" id="navRock">
62:    <a class="nav-item" onclick="switchView('form');openSection('secD')" id="navDisc">
65:    <a class="nav-item" onclick="switchView('form');openSection('secE')" id="navSlope">
69:    <div class="nav-section-label">Geothermal Module</div>
70:    <a class="nav-item" onclick="switchView('form');openSection('secH')" id="navGeothermal">
74:    <a class="nav-item" onclick="switchView('form');openSection('secI')" id="navGradient">
78:    <div class="nav-section-label">Advanced Modules</div>
79:    <a class="nav-item" onclick="switchView('form');openSection('secJ')" id="navLandslide">
82:    <a class="nav-item" onclick="switchView('form');openSection('secF')" id="navSampling">
85:    <a class="nav-item" onclick="switchView('form');openSection('secK')" id="navGeochem">
89:    <a class="nav-item" onclick="switchView('form');openSection('secL')" id="navGeophys">
94:    <div class="nav-section-label">Classification</div>
95:    <a class="nav-item" onclick="switchView('form');openSection('secM')" id="navRMR">
96:      <i class="ti ti-chart-bar"></i>Rock Mass (RMR/Q/GSI)
99:    <div class="nav-section-label">System</div>
100:    <a class="nav-item" onclick="switchView('alerts')" id="navAlerts">
104:    <a class="nav-item" onclick="switchView('docs')" id="navDocs">
107:    <a class="nav-item" onclick="switchView('form');openSection('secG')" id="navPhotos">
113:      FastAPI · React · Leaflet<br>
138:      <div class="view-tabs">
139:        <button class="view-tab active" onclick="switchView('dashboard')" id="tabDashboard">
142:        <button class="view-tab" onclick="switchView('map')" id="tabMap">
143:          <i class="ti ti-map-2"></i> WebGIS Map
145:        <button class="view-tab" onclick="switchView('form')" id="tabForm">
148:        <button class="view-tab" onclick="switchView('alerts')" id="tabAlerts">
151:        <button class="view-tab" onclick="switchView('docs')" id="tabDocs">
159:      <div id="viewDashboard">
164:              <div class="metric-card-icon teal"><i class="ti ti-map-pin"></i></div>
212:        <!-- Chart Row 1: Theme Distribution + Hazard Levels -->
213:        <div class="chart-row">
214:          <div class="chart-panel">
215:            <div class="chart-panel-header">
217:                <div class="chart-panel-title">Theme Distribution</div>
218:                <div class="chart-panel-subtitle">Observations by interconnected theme</div>
221:            <div class="chart-panel-body">
222:              <canvas id="themeChart" height="220"></canvas>
225:          <div class="chart-panel">
226:            <div class="chart-panel-header">
228:                <div class="chart-panel-title">Hazard Level Distribution</div>
229:                <div class="chart-panel-subtitle">Slope stability risk assessment</div>
232:            <div class="chart-panel-body">
233:              <canvas id="hazardChart" height="220"></canvas>
238:        <!-- Chart Row 2: Geothermal Stats + Observation Timeline -->
239:        <div class="chart-row">
240:          <div class="chart-panel">
241:            <div class="chart-panel-header">
243:                <div class="chart-panel-title">Geothermal Manifestation Stats</div>
244:                <div class="chart-panel-subtitle">Temperature & pH by type</div>
247:            <div class="chart-panel-body">
248:              <canvas id="geothermalChart" height="220"></canvas>
251:          <div class="chart-panel">
252:            <div class="chart-panel-header">
254:                <div class="chart-panel-title">Observation Timeline</div>
255:                <div class="chart-panel-subtitle">Daily data collection progress</div>
258:            <div class="chart-panel-body">
259:              <canvas id="timelineChart" height="220"></canvas>
265:        <div class="chart-row">
266:          <div class="chart-panel">
267:            <div class="chart-panel-header">
269:                <div class="chart-panel-title">Recent Alerts</div>
270:                <div class="chart-panel-subtitle">Anomalous progress detection</div>
272:              <button class="btn" style="font-size:11px;padding:4px 10px" onclick="switchView('alerts')">View All</button>
274:            <div class="chart-panel-body">
