MeshDD-Bot/static/map.html
ppfeiffer 15955cf8d7 feat: Add Meshtastic bot with web dashboard and live map
Implements full MeshDD-Bot with TCP connection to Meshtastic devices,
SQLite storage for nodes/messages, aiohttp web dashboard with WebSocket
live updates, and Leaflet.js map view with color-coded node markers.
Includes bot commands (!ping, !nodes, !info, !help, !weather, !stats,
!uptime) and automatic version bumping via pre-commit hook.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-15 12:46:32 +01:00

68 lines
2 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MeshDD-Bot Karte</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; }
#map { width: 100vw; height: 100vh; }
.node-popup { font-size: 13px; line-height: 1.6; }
.node-popup strong { color: #0f3460; }
.node-popup .label { color: #666; }
.status-bar {
position: fixed;
top: 10px;
right: 10px;
z-index: 1000;
background: rgba(26, 26, 46, 0.9);
color: #e0e0e0;
padding: 8px 14px;
border-radius: 6px;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
}
.status-bar .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff5252;
}
.status-bar .dot.connected {
background: #00e676;
box-shadow: 0 0 6px #00e676;
}
.back-link {
position: fixed;
top: 10px;
left: 10px;
z-index: 1000;
background: rgba(26, 26, 46, 0.9);
color: #00d4ff;
padding: 8px 14px;
border-radius: 6px;
text-decoration: none;
font-size: 13px;
}
.back-link:hover { background: rgba(26, 26, 46, 1); }
</style>
</head>
<body>
<div id="map"></div>
<a href="/" class="back-link">Dashboard</a>
<div class="status-bar">
<span class="dot" id="statusDot"></span>
<span id="statusText">Verbinde...</span>
<span>|</span>
<span id="nodeCount">0 Nodes</span>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="/static/js/map.js"></script>
</body>
</html>