Skip to content

Commit ed4dda8

Browse files
lklynetlklynet
committed
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
1 parent d81cb41 commit ed4dda8

12 files changed

Lines changed: 180 additions & 153 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div align="center">
2-
<img src="hypernode.svg" width="150" alt="Hypermind Logo" />
2+
<img src="public/hypernode.svg" width="150" alt="Hypermind Logo" />
33
<h1>Hypermind</h1>
44
</div>
55

@@ -51,8 +51,8 @@ A completely decentralized chat system built directly on top of the swarm topolo
5151

5252
### 3. Visualizations
5353
* **Particle Map:** Visualizes approximate peer locations (if enabled).
54-
* **Themes:** Built-in theme switcher (Nord, Solarized, Tokyo Night, etc).<br>
55-
<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" />
54+
* **Themes:** Built-in theme switcher (Hypermind, Hypermind Classic, Nord, Solarized, Tokyo Night, etc).<br>
55+
<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" />
5656

5757
---
5858

‎THEMES.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
# Current themes
22

3-
### Default
3+
### Hypermind (Default)
4+
5+
![Hypermind theme screenshot](assets/images/hypermind-theme.png)
6+
7+
### Hypermind Classic
48

59
![Default theme screenshot](assets/images/default-theme.png)
610

@@ -20,26 +24,22 @@
2024

2125
![Volcano theme screenshot](assets/images/volcano-theme.png)
2226

23-
### Hypermind
24-
25-
![Hypermind theme screenshot](assets/images/hypermind-theme.png)
26-
2727
# Contributing custom themes
2828

2929
1. Fork `main` and clone locally to your device.
30-
2. Create a copy of `default.css` (or any other existing theme file).
30+
2. Create a copy of `hypermind.css` (or any other existing theme file).
3131
Rename the file `new-theme.css` replacing "new-theme" with the actual name of your theme.
3232
Filename may not include capitals or spaces (use dashes `-`).
3333
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`.
3434
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.
3535
```js
3636
const themes = [
37-
'default.css',
37+
'hypermind.css',
38+
'hypermind-classic.css',
3839
'tokyo-night.css',
3940
'nord-dark.css',
4041
'solarized-light.css',
4142
'volcano.css',
42-
'hypermind.css',
4343
'new-theme.css' /* always add to the end of the list
4444
];
4545
```
@@ -48,4 +48,4 @@
4848
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.
4949
7. Create a pull request titled `theme: add *name of theme*`.
5050
51-
#### Thank you for contributing to Hypermind!
51+
#### Thank you for contributing to Hypermind!

‎hypermind2.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎hypernode.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "hypermind",
3-
"version": "0.11.1",
3+
"version": "0.12.0",
44
"description": "A decentralized P2P counter of active deployments",
55
"main": "server.js",
66
"scripts": {

‎public/app.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -818,12 +818,12 @@ updateParticles(initialCount);
818818
animate();
819819

820820
const themes = [
821-
"default.css",
821+
"hypermind.css",
822+
"hypermind-classic.css",
822823
"tokyo-night.css",
823824
"nord-dark.css",
824825
"solarized-light.css",
825826
"volcano.css",
826-
"hypermind.css",
827827
];
828828

829829
let currentThemeIndex = 0;

‎public/favicon.ico‎

-15 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 157 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,181 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<title>Hypermind</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<link rel="icon" href="/hypernode.svg" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
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"
11+
rel="stylesheet"
12+
/>
13+
<link
14+
rel="stylesheet"
15+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=palette"
16+
/>
17+
<script>
18+
(function () {
19+
var savedTheme =
20+
localStorage.getItem("hypermind-theme") || "hypermind.css";
21+
document.write(
22+
'<link rel="stylesheet" href="/themes/' +
23+
savedTheme +
24+
'" id="theme-css">'
25+
);
26+
})();
27+
</script>
28+
<link rel="stylesheet" href="/style.css" />
29+
<link
30+
rel="stylesheet"
31+
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
32+
/>
33+
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
34+
<script src="/js/lists.js"></script>
35+
<script src="/js/screenname.js"></script>
36+
<script type="module" src="/js/commands.js"></script>
37+
<script src="/js/sound-manager.js"></script>
38+
<script src="/js/version-checker.js"></script>
39+
</head>
340

4-
<head>
5-
<title>Hypermind</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<link rel="icon" href="/hypernode.svg" />
8-
<link rel="stylesheet"
9-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=palette" />
10-
<script>
11-
(function () {
12-
var savedTheme =
13-
localStorage.getItem("hypermind-theme") || "default.css";
14-
document.write(
15-
'<link rel="stylesheet" href="/themes/' +
16-
savedTheme +
17-
'" id="theme-css">'
18-
);
19-
})();
20-
</script>
21-
<link rel="stylesheet" href="/style.css" />
22-
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
23-
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
24-
<script src="/js/lists.js"></script>
25-
<script src="/js/screenname.js"></script>
26-
<script type="module" src="/js/commands.js"></script>
27-
<script src="/js/sound-manager.js"></script>
28-
<script src="/js/version-checker.js"></script>
29-
</head>
30-
31-
<body data-version="{{VERSION}}">
32-
<div id="version-notification" class="version-notification">
33-
<div class="version-content">
34-
<span class="version-text">New version available!</span>
35-
<a href="#" target="_blank" class="update-link">View Release</a>
36-
<button class="dismiss-btn" title="Dismiss">×</button>
41+
<body data-version="{{VERSION}}">
42+
<div id="version-notification" class="version-notification">
43+
<div class="version-content">
44+
<span class="version-text">New version available!</span>
45+
<a href="#" target="_blank" class="update-link">View Release</a>
46+
<button class="dismiss-btn" title="Dismiss">×</button>
47+
</div>
3748
</div>
38-
</div>
3949

40-
<canvas id="network" data-visual-limit="{{VISUAL_LIMIT}}"></canvas>
41-
<div class="container">
42-
<div id="count" class="count" data-initial-count="{{COUNT}}">
43-
{{COUNT}}
44-
</div>
45-
<div class="label">Active Nodes</div>
46-
<div class="footer">
47-
powered by
48-
<a href="https://github.com/lklynet/hypermind" target="_blank" class="footer-link">hypermind</a>
49-
</div>
50-
<div class="debug">
51-
ID: <span id="my-screenname">{{ID}}</span><br />
52-
Direct Connections: <span id="direct">{{DIRECT}}</span><br />
53-
Total Unique: <span id="total-unique">{{TOTAL_UNIQUE}}</span><br />
54-
<span class="debug-link" onclick="openDiagnostics()">diagnostics</span>
55-
<span id="map-container" class="{{MAP_CLASS}}">
56-
|
57-
<span class="debug-link" id="map-link" onclick="openMap()">map</span></span>
50+
<canvas id="network" data-visual-limit="{{VISUAL_LIMIT}}"></canvas>
51+
<div class="container">
52+
<div id="count" class="count" data-initial-count="{{COUNT}}">
53+
{{COUNT}}
54+
</div>
55+
<div class="label">Active Nodes</div>
56+
<div class="footer">
57+
powered by
58+
<a
59+
href="https://github.com/lklynet/hypermind"
60+
target="_blank"
61+
class="footer-link"
62+
>hypermind</a
63+
>
64+
</div>
65+
<div class="debug">
66+
ID: <span id="my-screenname">{{ID}}</span><br />
67+
Direct Connections: <span id="direct">{{DIRECT}}</span><br />
68+
Total Unique: <span id="total-unique">{{TOTAL_UNIQUE}}</span><br />
69+
<span class="debug-link" onclick="openDiagnostics()">diagnostics</span>
70+
<span id="map-container" class="{{MAP_CLASS}}">
71+
|
72+
<span class="debug-link" id="map-link" onclick="openMap()"
73+
>map</span
74+
></span
75+
>
76+
</div>
5877
</div>
59-
</div>
6078

61-
<div id="mapModal" class="modal">
62-
<div class="modal-content map-content">
63-
<button class="close-btn" onclick="closeMap()">×</button>
64-
<div id="map"></div>
79+
<div id="mapModal" class="modal">
80+
<div class="modal-content map-content">
81+
<button class="close-btn" onclick="closeMap()">×</button>
82+
<div id="map"></div>
83+
</div>
6584
</div>
66-
</div>
6785

68-
<div id="diagnosticsModal" class="modal">
69-
<div class="modal-content">
70-
<button class="close-btn" onclick="closeDiagnostics()">×</button>
71-
<div class="modal-title">Diagnostics</div>
72-
<div class="stat-row">
73-
<span class="stat-label">ID</span>
74-
<span class="stat-value" id="diag-id" style="
86+
<div id="diagnosticsModal" class="modal">
87+
<div class="modal-content">
88+
<button class="close-btn" onclick="closeDiagnostics()">×</button>
89+
<div class="modal-title">Diagnostics</div>
90+
<div class="stat-row">
91+
<span class="stat-label">ID</span>
92+
<span
93+
class="stat-value"
94+
id="diag-id"
95+
style="
7596
font-size: 0.8em;
7697
white-space: nowrap;
7798
overflow: hidden;
7899
text-overflow: ellipsis;
79100
direction: rtl;
80101
max-width: 300px;
81102
display: block;
82-
">{{FULL_ID}}</span>
83-
</div>
84-
<div class="stat-row">
85-
<span class="stat-label">Heartbeats Received</span>
86-
<span class="stat-value" id="diag-heartbeats-rx">0</span>
87-
</div>
88-
<div class="stat-row">
89-
<span class="stat-label">Heartbeats Relayed</span>
90-
<span class="stat-value" id="diag-heartbeats-tx">0</span>
103+
"
104+
>{{FULL_ID}}</span
105+
>
106+
</div>
107+
<div class="stat-row">
108+
<span class="stat-label">Heartbeats Received</span>
109+
<span class="stat-value" id="diag-heartbeats-rx">0</span>
110+
</div>
111+
<div class="stat-row">
112+
<span class="stat-label">Heartbeats Relayed</span>
113+
<span class="stat-value" id="diag-heartbeats-tx">0</span>
114+
</div>
115+
<div class="stat-row">
116+
<span class="stat-label">New Peers Added</span>
117+
<span class="stat-value" id="diag-new-peers">0</span>
118+
</div>
119+
<div class="stat-row">
120+
<span class="stat-label">Duplicate/Old Seq</span>
121+
<span class="stat-value" id="diag-dup-seq">0</span>
122+
</div>
123+
<div class="stat-row">
124+
<span class="stat-label">Invalid PoW</span>
125+
<span class="stat-value" id="diag-invalid-pow">0</span>
126+
</div>
127+
<div class="stat-row">
128+
<span class="stat-label">Invalid Signatures</span>
129+
<span class="stat-value" id="diag-invalid-sig">0</span>
130+
</div>
131+
<div class="stat-row">
132+
<span class="stat-label">Bandwidth In</span>
133+
<span class="stat-value" id="diag-bandwidth-in">0 KB</span>
134+
</div>
135+
<div class="stat-row">
136+
<span class="stat-label">Bandwidth Out</span>
137+
<span class="stat-value" id="diag-bandwidth-out">0 KB</span>
138+
</div>
139+
<div class="stat-row">
140+
<span class="stat-label">LEAVE Messages</span>
141+
<span class="stat-value" id="diag-leave">0</span>
142+
</div>
143+
<div class="update-time" id="last-update">last 10 seconds</div>
91144
</div>
92-
<div class="stat-row">
93-
<span class="stat-label">New Peers Added</span>
94-
<span class="stat-value" id="diag-new-peers">0</span>
95-
</div>
96-
<div class="stat-row">
97-
<span class="stat-label">Duplicate/Old Seq</span>
98-
<span class="stat-value" id="diag-dup-seq">0</span>
99-
</div>
100-
<div class="stat-row">
101-
<span class="stat-label">Invalid PoW</span>
102-
<span class="stat-value" id="diag-invalid-pow">0</span>
103-
</div>
104-
<div class="stat-row">
105-
<span class="stat-label">Invalid Signatures</span>
106-
<span class="stat-value" id="diag-invalid-sig">0</span>
107-
</div>
108-
<div class="stat-row">
109-
<span class="stat-label">Bandwidth In</span>
110-
<span class="stat-value" id="diag-bandwidth-in">0 KB</span>
111-
</div>
112-
<div class="stat-row">
113-
<span class="stat-label">Bandwidth Out</span>
114-
<span class="stat-value" id="diag-bandwidth-out">0 KB</span>
115-
</div>
116-
<div class="stat-row">
117-
<span class="stat-label">LEAVE Messages</span>
118-
<span class="stat-value" id="diag-leave">0</span>
119-
</div>
120-
<div class="update-time" id="last-update">last 10 seconds</div>
121145
</div>
122-
</div>
123146

124-
<button id="theme-switcher" class="theme-btn {{THEMES_CLASS}}" title="Cycle Themes">
125-
<span class="material-symbols-outlined">palette</span>
126-
</button>
127-
<div id="theme-notification" class="theme-notification hidden"></div>
128-
<div id="terminal" class="terminal hidden">
129-
<div id="terminal-resizer" class="terminal-resizer"></div>
130-
<button id="terminal-toggle" class="terminal-toggle" title="Toggle Chat">
131-
▼
147+
<button
148+
id="theme-switcher"
149+
class="theme-btn {{THEMES_CLASS}}"
150+
title="Cycle Themes"
151+
>
152+
<span class="material-symbols-outlined">palette</span>
132153
</button>
133-
<div id="system-status-bar" class="system-status-bar"></div>
134-
<div id="terminal-output" class="terminal-output"></div>
135-
<div class="terminal-input-line">
136-
<span class="prompt">&gt;</span>
137-
<input type="text" id="terminal-input" maxlength="140" placeholder="Broadcast..." autocomplete="off" />
154+
<div id="theme-notification" class="theme-notification hidden"></div>
155+
<div id="terminal" class="terminal hidden">
156+
<div id="terminal-resizer" class="terminal-resizer"></div>
157+
<button id="terminal-toggle" class="terminal-toggle" title="Toggle Chat">
158+
▼
159+
</button>
160+
<div id="system-status-bar" class="system-status-bar"></div>
161+
<div id="terminal-output" class="terminal-output"></div>
162+
<div class="terminal-input-line">
163+
<span class="prompt">&gt;</span>
164+
<input
165+
type="text"
166+
id="terminal-input"
167+
maxlength="140"
168+
placeholder="Broadcast..."
169+
autocomplete="off"
170+
/>
171+
</div>
138172
</div>
139-
</div>
140173

141-
<div id="contextMenu" class="context-menu">
142-
<div class="context-menu-item" id="contextWhisper">Whisper</div>
143-
<div class="context-menu-item" id="contextBlock">Block</div>
144-
</div>
145-
146-
<script src="/app.js"></script>
147-
</body>
174+
<div id="contextMenu" class="context-menu">
175+
<div class="context-menu-item" id="contextWhisper">Whisper</div>
176+
<div class="context-menu-item" id="contextBlock">Block</div>
177+
</div>
148178

179+
<script src="/app.js"></script>
180+
</body>
149181
</html>

0 commit comments

Comments
 (0)