ppfeiffer
d5ea4eee4a
Replace custom CSS layout with Bootstrap 5.3, add Bootstrap Icons, responsive card grid for stats, improved nodes table with hardware column, and styled message list. Online nodes highlighted in green. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
114 lines
5.1 KiB
HTML
114 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MeshDD-Bot Dashboard</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-sm bg-body-tertiary border-bottom">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/">
|
|
<i class="bi bi-broadcast-pin text-info me-2"></i>MeshDD-Bot
|
|
</a>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<a href="/map" target="_blank" class="btn btn-outline-info btn-sm">
|
|
<i class="bi bi-map me-1"></i>Karte
|
|
</a>
|
|
<span class="badge d-flex align-items-center gap-2" id="statusBadge">
|
|
<span class="status-dot" id="statusDot"></span>
|
|
<span id="statusText">Verbinde...</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid py-3">
|
|
<!-- Stats Cards -->
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-6 col-md-3">
|
|
<div class="card text-center border-info border-opacity-25">
|
|
<div class="card-body py-3">
|
|
<div class="fs-2 fw-bold text-info" id="statNodes">0</div>
|
|
<div class="text-body-secondary small">Nodes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="card text-center border-success border-opacity-25">
|
|
<div class="card-body py-3">
|
|
<div class="fs-2 fw-bold text-success" id="statPositions">0</div>
|
|
<div class="text-body-secondary small">Mit Position</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="card text-center border-warning border-opacity-25">
|
|
<div class="card-body py-3">
|
|
<div class="fs-2 fw-bold text-warning" id="statMessages">0</div>
|
|
<div class="text-body-secondary small">Nachrichten</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="card text-center border-primary border-opacity-25">
|
|
<div class="card-body py-3">
|
|
<div class="fs-2 fw-bold text-primary" id="statTextMessages">0</div>
|
|
<div class="text-body-secondary small">Textnachrichten</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panels -->
|
|
<div class="row g-3">
|
|
<!-- Nodes Table -->
|
|
<div class="col-lg-7">
|
|
<div class="card">
|
|
<div class="card-header d-flex align-items-center">
|
|
<i class="bi bi-router me-2 text-info"></i>
|
|
<span class="fw-semibold">Nodes</span>
|
|
<span class="badge bg-info ms-auto" id="nodeCountBadge">0</span>
|
|
</div>
|
|
<div class="card-body p-0 table-responsive" style="max-height: 500px; overflow-y: auto;">
|
|
<table class="table table-hover table-sm mb-0 align-middle">
|
|
<thead class="table-dark sticky-top">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>ID</th>
|
|
<th>Hardware</th>
|
|
<th class="text-center">SNR</th>
|
|
<th class="text-center">Batterie</th>
|
|
<th class="text-end">Zuletzt gesehen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="nodesTable"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages -->
|
|
<div class="col-lg-5">
|
|
<div class="card">
|
|
<div class="card-header d-flex align-items-center">
|
|
<i class="bi bi-chat-dots me-2 text-warning"></i>
|
|
<span class="fw-semibold">Nachrichten</span>
|
|
</div>
|
|
<div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
|
|
<div class="list-group list-group-flush" id="messagesList"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/js/dashboard.js"></script>
|
|
</body>
|
|
</html>
|