mirror of
https://github.com/lklynet/hypermind.git
synced 2026-05-03 09:30:36 +00:00
lklynet
209 lines
7.4 KiB
HTML
209 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Hypermind</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="icon" href="/hypernode.svg" />
|
||
<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=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=palette"
|
||
/>
|
||
<script>
|
||
(function () {
|
||
var savedTheme =
|
||
localStorage.getItem("hypermind-theme") || "hypermind.css";
|
||
document.write(
|
||
'<link rel="stylesheet" href="/themes/' +
|
||
savedTheme +
|
||
'" id="theme-css">'
|
||
);
|
||
})();
|
||
</script>
|
||
<link rel="stylesheet" href="/style.css" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||
/>
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script src="/js/lists.js"></script>
|
||
<script src="/js/screenname.js"></script>
|
||
<script type="module" src="/js/commands.js"></script>
|
||
<script src="/js/sound-manager.js"></script>
|
||
<script src="/js/version-checker.js"></script>
|
||
</head>
|
||
|
||
<body data-version="{{VERSION}}">
|
||
<div id="version-notification" class="version-notification">
|
||
<div class="version-content">
|
||
<span class="version-text">New version available!</span>
|
||
<a href="#" target="_blank" class="update-link">View Release</a>
|
||
<button class="dismiss-btn" title="Dismiss">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<canvas id="network" data-visual-limit="{{VISUAL_LIMIT}}"></canvas>
|
||
<div class="container">
|
||
<div id="count" class="count" data-initial-count="{{COUNT}}">
|
||
{{COUNT}}
|
||
</div>
|
||
<div class="label">Active Nodes</div>
|
||
<div class="footer">
|
||
powered by
|
||
<a
|
||
href="https://github.com/lklynet/hypermind"
|
||
target="_blank"
|
||
class="footer-link"
|
||
>hypermind</a
|
||
>
|
||
</div>
|
||
<div class="debug">
|
||
ID: <span id="my-screenname">{{ID}}</span><br />
|
||
Direct Connections: <span id="direct">{{DIRECT}}</span><br />
|
||
Total Unique: <span id="total-unique">{{TOTAL_UNIQUE}}</span><br />
|
||
<span class="debug-link" onclick="openDiagnostics()">diagnostics</span>
|
||
<span id="map-container" class="{{MAP_CLASS}}">
|
||
|
|
||
<span class="debug-link" id="map-link" onclick="openMap()"
|
||
>map</span
|
||
></span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="mapModal" class="modal">
|
||
<div class="modal-content map-content">
|
||
<button class="close-btn" onclick="closeMap()">×</button>
|
||
<div id="map"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="diagnosticsModal" class="modal">
|
||
<div class="modal-content">
|
||
<button class="close-btn" onclick="closeDiagnostics()">×</button>
|
||
<div class="modal-title">Diagnostics</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">ID</span>
|
||
<span
|
||
class="stat-value"
|
||
id="diag-id"
|
||
style="
|
||
font-size: 0.8em;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
direction: rtl;
|
||
max-width: 300px;
|
||
display: block;
|
||
"
|
||
>{{FULL_ID}}</span
|
||
>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">Version</span>
|
||
<span class="stat-value" id="diag-version">{{VERSION}}</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">Heartbeats Received</span>
|
||
<span class="stat-value" id="diag-heartbeats-rx">0</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">Heartbeats Relayed</span>
|
||
<span class="stat-value" id="diag-heartbeats-tx">0</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">New Peers Added</span>
|
||
<span class="stat-value" id="diag-new-peers">0</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">Duplicate/Old Seq</span>
|
||
<span class="stat-value" id="diag-dup-seq">0</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">Invalid PoW</span>
|
||
<span class="stat-value" id="diag-invalid-pow">0</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">Invalid Signatures</span>
|
||
<span class="stat-value" id="diag-invalid-sig">0</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">LEAVE Messages</span>
|
||
<span class="stat-value" id="diag-leave">0</span>
|
||
</div>
|
||
|
||
<div id="bandwidthOverlay" class="bandwidth-overlay">
|
||
<div class="bandwidth-title">Bandwidth</div>
|
||
<div class="bandwidth-graph-container">
|
||
<canvas id="bandwidthGraph"></canvas>
|
||
</div>
|
||
<div class="bandwidth-footer">
|
||
<div class="bandwidth-legend">
|
||
<div class="legend-item">
|
||
<span class="legend-color" style="background: #60a5fa"></span>
|
||
<span class="stat-value"
|
||
>In: <span id="current-in">0 KB</span></span
|
||
>
|
||
</div>
|
||
<div class="legend-item">
|
||
<span class="legend-color" style="background: #f97316"></span>
|
||
<span class="stat-value"
|
||
>Out: <span id="current-out">0 KB</span></span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="time-pills">
|
||
<button class="time-pill" data-value="300">5m</button>
|
||
<button class="time-pill" data-value="1800">30m</button>
|
||
<button class="time-pill" data-value="all">All</button>
|
||
<button class="close-btn" onclick="toggleBandwidthGraph()">
|
||
−
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="update-time" id="last-update">last 10 seconds</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
id="theme-switcher"
|
||
class="theme-btn {{THEMES_CLASS}}"
|
||
title="Cycle Themes"
|
||
>
|
||
<span class="material-symbols-outlined">palette</span>
|
||
</button>
|
||
<div id="theme-notification" class="theme-notification hidden"></div>
|
||
<div id="terminal" class="terminal hidden">
|
||
<div id="terminal-resizer" class="terminal-resizer"></div>
|
||
<button id="terminal-toggle" class="terminal-toggle" title="Toggle Chat">
|
||
▼
|
||
</button>
|
||
<div id="system-status-bar" class="system-status-bar"></div>
|
||
<div id="terminal-output" class="terminal-output"></div>
|
||
<div class="terminal-input-line">
|
||
<span class="prompt">></span>
|
||
<input
|
||
type="text"
|
||
id="terminal-input"
|
||
maxlength="140"
|
||
placeholder="Broadcast..."
|
||
autocomplete="off"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="contextMenu" class="context-menu">
|
||
<div class="context-menu-item" id="contextWhisper">Whisper</div>
|
||
<div class="context-menu-item" id="contextBlock">Block</div>
|
||
</div>
|
||
|
||
<script src="/app.js"></script>
|
||
</body>
|
||
</html>
|