Files
hypermind/public/index.html
T
lklynet ed4dda8614 feat(ui): update theme system and improve UI consistency
- Rename default theme to hypermind and add hypermind-classic theme
- Update theme colors and ordering in theme selector
- Add Google Sans fonts and update terminal font styling
- Move sound command status to system status bar
- Update documentation and screenshots for new themes
- Cleaned up branding images
2026-01-12 10:14:46 -05:00

182 lines
6.3 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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">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">Bandwidth In</span>
<span class="stat-value" id="diag-bandwidth-in">0 KB</span>
</div>
<div class="stat-row">
<span class="stat-label">Bandwidth Out</span>
<span class="stat-value" id="diag-bandwidth-out">0 KB</span>
</div>
<div class="stat-row">
<span class="stat-label">LEAVE Messages</span>
<span class="stat-value" id="diag-leave">0</span>
</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">&gt;</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>