mirror of
https://github.com/lklynet/hypermind.git
synced 2026-05-03 01:20:30 +00:00
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
This commit is contained in:
lklynet
@@ -1,5 +1,5 @@
|
||||
<div align="center">
|
||||
<img src="hypernode.svg" width="150" alt="Hypermind Logo" />
|
||||
<img src="public/hypernode.svg" width="150" alt="Hypermind Logo" />
|
||||
<h1>Hypermind</h1>
|
||||
</div>
|
||||
|
||||
@@ -51,8 +51,8 @@ A completely decentralized chat system built directly on top of the swarm topolo
|
||||
|
||||
### 3. Visualizations
|
||||
* **Particle Map:** Visualizes approximate peer locations (if enabled).
|
||||
* **Themes:** Built-in theme switcher (Nord, Solarized, Tokyo Night, etc).<br>
|
||||
<img src="assets/images/default-theme.png" width="100" alt="Default" /> <img src="assets/images/nord-dark-theme.png" width="100" alt="Nord" /> <img src="assets/images/solarized-light-theme.png" width="100" alt="Solarized" /> <img src="assets/images/tokyo-night-theme.png" width="100" alt="Tokyo Night" /> <img src="assets/images/volcano-theme.png" width="100" alt="Volcano" /> <img src="assets/images/hypermind-theme.png" width="100" alt="Hypermind" />
|
||||
* **Themes:** Built-in theme switcher (Hypermind, Hypermind Classic, Nord, Solarized, Tokyo Night, etc).<br>
|
||||
<img src="assets/images/hypermind-theme.png" width="100" alt="Hypermind" /> <img src="assets/images/default-theme.png" width="100" alt="Hypermind Classic" /> <img src="assets/images/nord-dark-theme.png" width="100" alt="Nord" /> <img src="assets/images/solarized-light-theme.png" width="100" alt="Solarized" /> <img src="assets/images/tokyo-night-theme.png" width="100" alt="Tokyo Night" /> <img src="assets/images/volcano-theme.png" width="100" alt="Volcano" />
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
# Current themes
|
||||
|
||||
### Default
|
||||
### Hypermind (Default)
|
||||
|
||||
|
||||
|
||||
### Hypermind Classic
|
||||
|
||||
|
||||
|
||||
@@ -20,26 +24,22 @@
|
||||
|
||||
|
||||
|
||||
### Hypermind
|
||||
|
||||
|
||||
|
||||
# Contributing custom themes
|
||||
|
||||
1. Fork `main` and clone locally to your device.
|
||||
2. Create a copy of `default.css` (or any other existing theme file).
|
||||
2. Create a copy of `hypermind.css` (or any other existing theme file).
|
||||
Rename the file `new-theme.css` replacing "new-theme" with the actual name of your theme.
|
||||
Filename may not include capitals or spaces (use dashes `-`).
|
||||
Only add `dark` or `light` to the filename if the theme you are creating is based on a popular theme (solarized, nord, etc) that has dark and light versions. If a theme does not have two versions, or if a theme is completely made up by you, do not add `dark` or `light`.
|
||||
3. Edit the `const themes` block in [`app.js`](public/app.js) with the filename of your new theme so that when you press the theme cycle button in the bottom left corner of the UI, your new theme will appear as one of the options.
|
||||
```js
|
||||
const themes = [
|
||||
'default.css',
|
||||
'hypermind.css',
|
||||
'hypermind-classic.css',
|
||||
'tokyo-night.css',
|
||||
'nord-dark.css',
|
||||
'solarized-light.css',
|
||||
'volcano.css',
|
||||
'hypermind.css',
|
||||
'new-theme.css' /* always add to the end of the list
|
||||
];
|
||||
```
|
||||
@@ -48,4 +48,4 @@
|
||||
6. Once you have finished creating your theme, edit [`THEMES.md`](THEMES.md) to include the name of your theme and a fullscreen screenshot in 16:9 aspect ratio at the bottom of the list. Ensure to match existing formatting.
|
||||
7. Create a pull request titled `theme: add *name of theme*`.
|
||||
|
||||
#### Thank you for contributing to Hypermind!
|
||||
#### Thank you for contributing to Hypermind!
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 32 KiB |
@@ -1 +0,0 @@
|
||||
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700" width="700" height="700"><style>.a{opacity:.99;fill:#b5bd68}</style><path fill-rule="evenodd" class="a" d="m337.9 0.8c12.3 0.3 19.6 1.2 27.3 3.3 5.7 1.6 14.5 4.7 19.5 7 5 2.3 12 6.2 15.6 8.7 3.5 2.4 10.3 8 14.9 12.4 4.6 4.4 11.4 12.3 15.1 17.6 3.7 5.3 8.1 12.5 9.9 16.1 1.8 3.6 4.8 11.4 6.6 17.5 1.9 6.1 4 16 4.8 22.1 1.1 8.1 1.1 14.4 0.1 23.4-0.8 6.9-3.7 19.5-6.5 28.6-2.8 8.9-5.7 20.6-6.4 26-0.9 6.4-0.9 13.8-0.1 21.4 0.6 6.5 2.1 16.4 3.3 22.1 1.1 5.8 3.8 16.1 5.8 23.1 2.1 7 6.2 19 9.1 26.7 2.9 7.6 8.1 20.4 11.6 28.2 3.5 7.9 9.8 21 14 29.3 4.2 8.2 11.7 21.6 16.6 29.9 4.8 8.2 11.7 19.3 15.3 24.6 3.6 5.4 10.3 14.8 15 20.8 4.7 6.1 11.2 14.2 14.4 18.1 3.3 3.8 11.5 11.6 18.3 17.2 6.8 5.7 16.1 12.3 20.8 14.8 4.6 2.4 14.4 5.9 21.7 7.7 7.4 1.8 17 4.7 21.5 6.4 4.4 1.6 12.5 5.6 17.8 8.7 5.4 3.1 13.9 9.6 18.9 14.3 5 4.8 12.1 13 15.7 18.3 3.7 5.2 8 12.2 9.6 15.4 1.7 3.2 4.1 9.1 5.5 13 1.3 3.9 3.3 11.3 4.4 16.3 1.1 5 2 15.2 2 22.7 0 7.9-0.9 18-2.1 24-1.2 5.8-3.4 13.7-5 17.6-1.6 3.9-5.5 11.7-8.7 17.3-3.2 5.6-9.4 14.1-13.7 18.9-4.4 4.7-12 11.6-16.9 15.3-5 3.7-13.4 8.9-18.8 11.5-5.3 2.7-14.1 6-19.4 7.4-5.4 1.4-16.5 2.9-24.7 3.3-11.2 0.5-18 0.1-26.7-1.5-6.4-1.2-16.1-3.9-21.4-6-5.4-2.1-14.2-6.7-19.5-10.3-5.4-3.5-13-9.3-16.9-12.8-4-3.4-11.3-12-16.4-19.1-5.1-7.1-13.2-17.1-18.2-22.1-4.9-5-12.8-11.9-17.4-15.2-4.7-3.3-14-9-20.8-12.7-6.8-3.7-17.9-9.1-24.7-11.9-6.8-2.8-18.2-7.2-25.3-9.7-7.2-2.5-20.9-6.8-30.6-9.5-9.6-2.8-27.2-7.1-39-9.7-11.8-2.5-29.9-5.9-40.3-7.5-15.6-2.4-24.3-2.9-50.7-2.9-29 0-32.7 0.2-42.2 2.9-5.7 1.6-13.9 4.6-18.2 6.7-4.3 2.1-13.1 7.2-19.5 11.4-7.4 4.8-15.9 8.9-23.4 11.4-10.5 3.5-13.3 3.9-28.6 3.9-14.2 0-18.3-0.5-26-3.1-5-1.7-13.2-5.1-18.2-7.7-6.3-3.3-12.4-8.1-20.1-15.8-7.5-7.6-12.6-14-15.8-20.2-2.6-5-6.1-13.5-7.8-18.9-2.6-8.2-3-12.4-3-27.3 0.1-15.7 0.4-18.6 3.7-27.9 1.9-5.7 6-14.5 8.9-19.5 3-5 9.3-12.9 14.1-17.6 4.8-4.6 11.8-10.3 15.7-12.6 3.8-2.3 10.4-5.7 14.7-7.4 4.3-1.8 15.1-4.5 24.1-6 8.9-1.5 18.9-3.8 22.1-5 3.2-1.2 10.5-4.9 16.2-8.2 5.7-3.4 15.1-10.1 20.7-14.9 5.7-4.9 15.6-15 21.9-22.5 6.4-7.5 16.9-21.6 23.3-31.2 6.4-9.7 15.3-24.9 19.8-33.8 4.6-9 10.4-22.1 13.1-29.3 2.6-7.1 6.3-19.1 8.2-26.6 2.9-11.7 3.4-16.3 3.3-31.9-0.1-16.7-0.5-19.6-5-36.3-4.3-16.2-4.9-20.5-5.5-37.7-0.5-16.9-0.2-21.1 2.2-31.2 1.5-6.5 4.7-15.8 7-20.8 2.3-5 7.1-13.4 10.6-18.7 3.6-5.3 10.6-13.5 15.6-18.2 5-4.8 11.7-10.5 14.9-12.7 3.2-2.2 8.8-5.5 12.4-7.3 3.6-1.7 10.6-4.6 15.6-6.2 5-1.7 12.3-3.8 16.2-4.7 4.5-1 13.5-1.5 24.1-1.2zm-41.6 249.7c-6.5 4-15.8 10.6-20.7 14.7-4.9 4-13.1 11.7-18.1 17.1-5 5.3-12.6 14.1-16.9 19.5-4.3 5.3-12.4 16.7-18.1 25.3-5.7 8.6-15.2 25.6-21.1 37.7-6 12.2-12.6 27.4-14.7 33.8-2.1 6.4-4.6 15.8-5.5 20.8-0.9 5-1.3 13.8-1 19.5 0.4 7.3 1.5 12.5 3.8 17.5 1.8 4 5.8 10 9 13.5 3.2 3.5 9 8.6 12.9 11.2 4 2.7 11.3 6.9 16.3 9.4 5 2.6 12.9 6.2 17.5 8.2 4.7 2 14.3 5.6 21.5 8 7.1 2.5 20.9 6.4 30.5 8.8 9.7 2.4 23.7 5.6 31.2 7.1 7.5 1.5 20.4 3.5 28.6 4.6 8.2 1 23.7 2.6 34.5 3.4 10.7 0.8 24.7 1.1 31.1 0.6 6.5-0.4 15.5-1.4 20.2-2.2 4.6-0.7 12.5-2.5 17.5-3.9 5-1.5 10.7-3.5 12.7-4.5 2-1 6-4 9-6.7 2.9-2.6 6.6-7.5 8.1-10.7 2.4-5.1 2.7-8.2 2.6-25.3-0.1-18-0.5-20.9-4.7-37.1-2.5-9.6-7.5-25.4-11.2-35.1-3.6-9.6-9.2-23.3-12.3-30.5-3.1-7.1-10.5-22.1-16.4-33.1-6-11.1-15.3-27.2-20.7-35.8-5.5-8.6-13.3-20.1-17.4-25.6-4.1-5.6-13.2-15.9-20.2-23-9.4-9.7-14.6-13.9-20.4-16.6-6.9-3.2-9.6-3.7-22.1-4-12.2-0.3-15.8 0.2-24.1 2.9-5.3 1.7-15 6.5-21.4 10.5z"/></svg>
|
||||
|
Before Width: | Height: | Size: 3.4 KiB |
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hypermind",
|
||||
"version": "0.11.1",
|
||||
"version": "0.12.0",
|
||||
"description": "A decentralized P2P counter of active deployments",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
|
||||
+2
-2
@@ -818,12 +818,12 @@ updateParticles(initialCount);
|
||||
animate();
|
||||
|
||||
const themes = [
|
||||
"default.css",
|
||||
"hypermind.css",
|
||||
"hypermind-classic.css",
|
||||
"tokyo-night.css",
|
||||
"nord-dark.css",
|
||||
"solarized-light.css",
|
||||
"volcano.css",
|
||||
"hypermind.css",
|
||||
];
|
||||
|
||||
let currentThemeIndex = 0;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
+158
-126
@@ -1,77 +1,98 @@
|
||||
<!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>
|
||||
|
||||
<head>
|
||||
<title>Hypermind</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/hypernode.svg" />
|
||||
<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") || "default.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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<canvas id="network" data-visual-limit="{{VISUAL_LIMIT}}"></canvas>
|
||||
<div class="container">
|
||||
<div id="count" class="count" data-initial-count="{{COUNT}}">
|
||||
{{COUNT}}
|
||||
<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 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="
|
||||
<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;
|
||||
@@ -79,71 +100,82 @@
|
||||
direction: rtl;
|
||||
max-width: 300px;
|
||||
display: block;
|
||||
">{{FULL_ID}}</span>
|
||||
"
|
||||
>{{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 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
|
||||
id="theme-switcher"
|
||||
class="theme-btn {{THEMES_CLASS}}"
|
||||
title="Cycle Themes"
|
||||
>
|
||||
<span class="material-symbols-outlined">palette</span>
|
||||
</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 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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@@ -4,12 +4,9 @@ export const soundCommand = {
|
||||
if (window.SoundManager) {
|
||||
const enabled = window.SoundManager.toggle();
|
||||
const status = enabled ? "enabled" : "disabled";
|
||||
const output = document.getElementById("terminal-output");
|
||||
if (output) {
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML = `<span style="color: #aaa">[SYSTEM] Sound effects ${status}</span>`;
|
||||
output.appendChild(div);
|
||||
output.scrollTop = output.scrollHeight;
|
||||
const statusBar = document.getElementById("system-status-bar");
|
||||
if (statusBar) {
|
||||
statusBar.innerText = `[SYSTEM] Sound effects ${status}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -226,7 +226,7 @@ a { color: var(--color-text-anchor-link); text-decoration: none; border-bottom:
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
z-index: 100;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-family: 'Google Sans Code', "Courier New", Courier, monospace;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
@@ -274,7 +274,7 @@ a { color: var(--color-text-anchor-link); text-decoration: none; border-bottom:
|
||||
border-radius: 8px 8px 0 0;
|
||||
color: var(--color-terminal-tab-arrow);
|
||||
cursor: pointer;
|
||||
font-family: monospace;
|
||||
font-family: 'Google Sans Code', monospace;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
z-index: 101;
|
||||
|
||||
@@ -20,12 +20,12 @@
|
||||
--color-modal-bg: #191716;
|
||||
--color-modal-border: #0f0e0d;
|
||||
--color-modal-title: #8c4f4a;
|
||||
--color-modal-close-btn: #0f0e0d;
|
||||
--color-modal-close-btn: #65788f;
|
||||
--color-modal-close-btn-hover: #8c4f4a;
|
||||
--color-modal-stat-div: #0f0e0d;
|
||||
--color-modal-stat-label: #65788f;
|
||||
--color-modal-stat-value: #a17e3e;
|
||||
--color-modal-footer: #0f0e0d;
|
||||
--color-modal-footer: #8c4f4a;
|
||||
|
||||
--color-terminal-bg: rgba(25, 23, 22, 0.9);
|
||||
--color-terminal-border: #0f0e0d;
|
||||
|
||||
Reference in New Issue
Block a user