mirror of
https://github.com/cesanta/mongoose.git
synced 2026-10-05 15:43:48 +07:00
186 lines
8.4 KiB
HTML
186 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="uPlot.min.css">
|
|
<!-- Mongoose device dashboard -->
|
|
<script src="https://cdn.jsdelivr.net/gh/cesanta/mongoose@master/resources/dashboard.js"></script>
|
|
<script>
|
|
Dashboard.init({
|
|
debug: true,
|
|
data: {
|
|
temperature: 25,
|
|
humidity: 60,
|
|
voltage: 12.5,
|
|
current: 4.2,
|
|
power: 52.5,
|
|
speed: 100,
|
|
},
|
|
});
|
|
</script>
|
|
<script src="main.js" defer></script>
|
|
<script src="uPlot.iife.min.js" defer></script>
|
|
<title>My Dashboard</title>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="header-container">
|
|
<div class="header-left">
|
|
<nav class="nav-tabs" role="tablist" aria-label="Primary tabs">
|
|
<img src="logo.svg" alt="Logo" class="logo" />
|
|
<a href="#overview" id="tab-overview" class="nav-link nav-link-active" role="tab" aria-controls="overview" aria-selected="true">
|
|
<svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 11.5 12 4l9 7.5" />
|
|
<path d="M5 10.5V20h14v-9.5" />
|
|
</svg>
|
|
Overview
|
|
</a>
|
|
<a href="#settings" id="tab-settings" class="nav-link" role="tab" aria-controls="settings" aria-selected="false" tabindex="-1">
|
|
<svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-.4-1.1 1.7 1.7 0 0 0-1-.6 1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H2.8a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.1-.4 1.7 1.7 0 0 0 .6-1 1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6c.38-.16.72-.4 1-.7.26-.3.4-.69.4-1.1V2.8a2 2 0 1 1 4 0v.1c0 .41.14.8.4 1.1.28.3.62.54 1 .7a1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.16.38.4.72.7 1 .3.26.69.4 1.1.4h.1a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.1.4 1.7 1.7 0 0 0-.7 1z" />
|
|
</svg>
|
|
Settings
|
|
</a>
|
|
<a href="#firmware" id="tab-firmware" class="nav-link" role="tab" aria-controls="firmware" aria-selected="false" tabindex="-1">
|
|
<svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 3v10" />
|
|
<path d="m8 9 4 4 4-4" />
|
|
<rect x="4" y="17" width="16" height="4" rx="2" />
|
|
</svg>
|
|
Firmware Update
|
|
</a>
|
|
<a href="#events" id="tab-events" class="nav-link" role="tab" aria-controls="events" aria-selected="false" tabindex="-1">
|
|
<svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M8 7h8" />
|
|
<path d="M8 12h8" />
|
|
<path d="M8 17h5" />
|
|
<rect x="4" y="4" width="16" height="16" rx="3" />
|
|
</svg>
|
|
Events
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<div class="header-actions">
|
|
<div class="connection-badge" aria-label="connection active">
|
|
<span class="connection-label">live</span>
|
|
<span class="connection-dot" aria-hidden="true"></span>
|
|
</div>
|
|
<nav class="nav-tabs">
|
|
<div class="nav-link">
|
|
<svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
|
<circle cx="12" cy="7" r="4" />
|
|
</svg>
|
|
<span>admin</span>
|
|
<svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
|
<path d="M16 17l5-5-5-5" />
|
|
<path d="M21 12H9" />
|
|
</svg>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<main class="tab-stage">
|
|
<section id="overview" class="tab-panel tab-panel-active" role="tabpanel" aria-labelledby="tab-overview">
|
|
<div class="overview-grid" aria-label="Device metrics overview">
|
|
<article class="metric-tile">
|
|
<div class="metric-label">Temperature</div>
|
|
<div class="metric-value">
|
|
<span class="metric-number">24.8</span>
|
|
<span class="metric-unit">°C</span>
|
|
</div>
|
|
<div class="metric-status metric-status-good">Stable — within target range</div>
|
|
</article>
|
|
<article class="metric-tile">
|
|
<div class="metric-label">Humidity</div>
|
|
<div class="metric-value">
|
|
<span class="metric-number">51</span>
|
|
<span class="metric-unit">%</span>
|
|
</div>
|
|
<div class="metric-status metric-status-good">+2% in the last hour</div>
|
|
</article>
|
|
<article class="metric-tile">
|
|
<div class="metric-label">CPU Load</div>
|
|
<div class="metric-value">
|
|
<span class="metric-number">37</span>
|
|
<span class="metric-unit">%</span>
|
|
</div>
|
|
<div class="metric-status metric-status-warn">Moderate load</div>
|
|
</article>
|
|
<article class="metric-tile">
|
|
<div class="metric-label">Free Memory</div>
|
|
<div class="metric-value">
|
|
<span class="metric-number">182</span>
|
|
<span class="metric-unit">KB</span>
|
|
</div>
|
|
<div class="metric-status metric-status-good">Healthy headroom</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="detail-row">
|
|
|
|
<!-- Sensor History Chart -->
|
|
<div class="panel chart-panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<div class="panel-title">Sensor History</div>
|
|
</div>
|
|
<div class="chart-legend">
|
|
<div class="legend-item"><span class="legend-dot legend-dot-color1"></span>Temperature</div>
|
|
<div class="legend-item"><span class="legend-dot legend-dot-color2"></span>Humidity</div>
|
|
</div>
|
|
</div>
|
|
<div id="chart"></div>
|
|
</div>
|
|
|
|
<!-- Controls Panel -->
|
|
<div class="panel controls-panel">
|
|
<div class="panel-title">Controls</div>
|
|
<div class="controls-list">
|
|
<div class="control-row">
|
|
<div class="control-info">
|
|
<div class="control-name">Cooling Fan</div>
|
|
<div class="control-desc">PWM controlled output</div>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked>
|
|
<span class="toggle-track"></span>
|
|
</label>
|
|
</div>
|
|
<div class="control-row">
|
|
<div class="control-info">
|
|
<div class="control-name">Relay Channel 1</div>
|
|
<div class="control-desc">Auxiliary load output</div>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked>
|
|
<span class="toggle-track"></span>
|
|
</label>
|
|
</div>
|
|
<div class="control-row">
|
|
<div class="control-info">
|
|
<div class="control-name">Relay Channel 2</div>
|
|
<div class="control-desc">Safety-controlled line</div>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox">
|
|
<span class="toggle-track"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<section id="settings" class="tab-panel" role="tabpanel" aria-labelledby="tab-settings" hidden></section>
|
|
<section id="firmware" class="tab-panel" role="tabpanel" aria-labelledby="tab-firmware" hidden></section>
|
|
<section id="events" class="tab-panel" role="tabpanel" aria-labelledby="tab-events" hidden></section>
|
|
</main>
|
|
</body>
|
|
</html>
|