mirror of
https://github.com/lklynet/hypermind.git
synced 2026-05-03 17:40:29 +00:00
Merge pull request #41 from owennewo-dev/custom-css-themes
feat: additional themes
This commit is contained in:
LKLY
+1
-1
@@ -1,4 +1,4 @@
|
||||
node_modules
|
||||
data
|
||||
.DS_Store
|
||||
.env
|
||||
.env
|
||||
@@ -92,6 +92,7 @@ These features are disabled by default. Set them to `true` to enable.
|
||||
|----------|---------|-------------|
|
||||
| `ENABLE_CHAT` | `false` | Enables the decentralized chat system. |
|
||||
| `ENABLE_MAP` | `false` | Enables map visualization features. |
|
||||
| `ENABLE_THEMES` | `true` | Controls the theme switcher function ([THEMES.md](THEMES.md))
|
||||
|
||||
### Refinement
|
||||
Tune the network parameters to fit your system resources. The defaults are safe for most users. Don't change unless you know what you're doing.
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
# Current themes
|
||||
|
||||
### Default
|
||||
|
||||
|
||||
|
||||
### Tokyo Night
|
||||
|
||||
|
||||
|
||||
### Nord Dark
|
||||
|
||||
|
||||
|
||||
### Solarized Light
|
||||
|
||||
|
||||
|
||||
### Volcano
|
||||
|
||||
|
||||
|
||||
# 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).
|
||||
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',
|
||||
'tokyo-night.css',
|
||||
'nord-dark.css',
|
||||
'solarized-light.css',
|
||||
'volcano.css',
|
||||
'new-theme.css' /* always add to the end of the list
|
||||
];
|
||||
```
|
||||
4. Change the colors as you desire. Reference [`index.html`](public/index.html) and [`style.css`](public/style.css) as needed.
|
||||
5. Test changes by running `npm install` then `npm start` in a terminal.
|
||||
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!
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
@@ -10,6 +10,7 @@ services:
|
||||
# --- Add-ons ---
|
||||
# - ENABLE_CHAT=false # Enable decentralized chat
|
||||
# - ENABLE_MAP=false # Enable peer map visualization
|
||||
# - ENABLE_THEMES=true # Enable theme switcher button
|
||||
|
||||
# --- Refinements ---
|
||||
# - MAX_PEERS=50000 # Max peers to track in memory
|
||||
|
||||
+43
-2
@@ -4,6 +4,10 @@ const canvas = document.getElementById('network');
|
||||
const ctx = canvas.getContext('2d');
|
||||
let particles = [];
|
||||
|
||||
function getThemeColor(varName) {
|
||||
return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
|
||||
}
|
||||
|
||||
function resize() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
@@ -32,7 +36,7 @@ class Particle {
|
||||
draw() {
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fillStyle = '#4ade80';
|
||||
ctx.fillStyle = getThemeColor('--color-particle');
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
@@ -55,7 +59,7 @@ const updateParticles = (count) => {
|
||||
const animate = () => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.strokeStyle = 'rgba(74, 222, 128, 0.15)';
|
||||
ctx.strokeStyle = getThemeColor('--color-particle-link');
|
||||
ctx.lineWidth = 1;
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
for (let j = i + 1; j < particles.length; j++) {
|
||||
@@ -489,3 +493,40 @@ countEl.classList.add('loaded');
|
||||
updateParticles(initialCount);
|
||||
animate();
|
||||
|
||||
const themes = [
|
||||
'default.css',
|
||||
'tokyo-night.css',
|
||||
'nord-dark.css',
|
||||
'solarized-light.css',
|
||||
'volcano.css'
|
||||
];
|
||||
|
||||
let currentThemeIndex = 0;
|
||||
|
||||
function loadSavedTheme() {
|
||||
const savedTheme = localStorage.getItem('hypermind-theme');
|
||||
if (savedTheme) {
|
||||
const themeLink = document.getElementById('theme-css');
|
||||
themeLink.href = `/themes/${savedTheme}`;
|
||||
currentThemeIndex = themes.indexOf(savedTheme);
|
||||
if (currentThemeIndex === -1) currentThemeIndex = 0;
|
||||
} else {
|
||||
const themeLink = document.getElementById('theme-css');
|
||||
const currentTheme = themeLink.href.split('/').pop();
|
||||
currentThemeIndex = themes.indexOf(currentTheme);
|
||||
if (currentThemeIndex === -1) currentThemeIndex = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function cycleTheme() {
|
||||
currentThemeIndex = (currentThemeIndex + 1) % themes.length;
|
||||
const newTheme = themes[currentThemeIndex];
|
||||
const themeLink = document.getElementById('theme-css');
|
||||
themeLink.href = `/themes/${newTheme}`;
|
||||
localStorage.setItem('hypermind-theme', newTheme);
|
||||
}
|
||||
|
||||
document.getElementById('theme-switcher').addEventListener('click', cycleTheme);
|
||||
|
||||
loadSavedTheme();
|
||||
|
||||
|
||||
+5
-1
@@ -4,6 +4,7 @@
|
||||
<title>Hypermind</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=palette" /> <link rel="stylesheet" href="/themes/tokyo-night.css" id="theme-css">
|
||||
<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>
|
||||
@@ -14,7 +15,7 @@
|
||||
<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">hypermind</a>
|
||||
powered by <a href="https://github.com/lklynet/hypermind" target="_blank" class="footer-link">hypermind</a>
|
||||
</div>
|
||||
<div class="debug">
|
||||
ID: {{ID}}<br>
|
||||
@@ -75,6 +76,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="theme-switcher" class="theme-btn {{THEMES_CLASS}}" title="Cycle Themes">
|
||||
<span class="material-symbols-outlined">palette</span>
|
||||
</button>
|
||||
<div id="terminal" class="terminal hidden">
|
||||
<button id="terminal-toggle" class="terminal-toggle" title="Toggle Chat">▼</button>
|
||||
<div id="system-status-bar" class="system-status-bar"></div>
|
||||
|
||||
+98
-38
@@ -6,8 +6,8 @@ body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: #111;
|
||||
color: #eee;
|
||||
background: var(--color-bg-main);
|
||||
color: var(--color-text-default);
|
||||
margin: 0;
|
||||
transition: padding-bottom 0.3s ease;
|
||||
}
|
||||
@@ -21,31 +21,51 @@ body.chat-collapsed {
|
||||
}
|
||||
|
||||
.container { text-align: center; position: relative; z-index: 10; }
|
||||
|
||||
#network { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
|
||||
.count { font-size: 8rem; font-weight: bold; color: #4ade80; transition: color 0.2s; visibility: hidden; }
|
||||
|
||||
.count { font-size: 8rem; font-weight: bold; color: var(--color-count); transition: color 0.2s; visibility: hidden; }
|
||||
|
||||
.count.loaded { visibility: visible; }
|
||||
.label { font-size: 1.5rem; color: #9ca3af; margin-top: 1rem; }
|
||||
|
||||
.label { font-size: 1.5rem; color: var(--color-text-main-label); margin-top: 1rem; }
|
||||
|
||||
.footer {
|
||||
margin: 2rem auto 0;
|
||||
font-size: 0.9rem;
|
||||
color: #9ca3af;
|
||||
color: var(--color-text-footer);
|
||||
}
|
||||
|
||||
.debug {
|
||||
font-size: 0.8rem;
|
||||
color: #9ca3af;
|
||||
color: var(--color-text-debug);
|
||||
margin: 1rem auto 0;
|
||||
}
|
||||
.debug-link { color: #9ca3af; border-bottom: 1px dotted #9ca3af; cursor: pointer; }
|
||||
.debug-link:hover { color: #e5e7eb; }
|
||||
a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
|
||||
|
||||
.debug-link { color: var(--color-text-debug-link); border-bottom: 1px dotted var(--color-text-debug-link); cursor: pointer; transition: color 0.2s, border-color 0.2s;}
|
||||
|
||||
.debug-link:hover { color: var(--color-text-debug-link-hover); border-color : var(--color-text-debug-link-hover); }
|
||||
|
||||
a { color: var(--color-text-anchor-link); text-decoration: none; border-bottom: 1px dotted var(--color-text-anchor-link); }
|
||||
|
||||
.pulse { animation: pulse 0.5s ease-in-out; }
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); color: #fff; }
|
||||
50% { transform: scale(1.1); color: var(--color-pulse); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.footer a {
|
||||
border-bottom: 1px dotted var(--color-text-footer);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: var(--color-text-footer-hover);
|
||||
border-color: var(--color-text-footer-hover);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
@@ -54,17 +74,20 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
background: var(--color-bg-overlay);
|
||||
}
|
||||
|
||||
.modal.active { display: flex; align-items: center; justify-content: center; }
|
||||
|
||||
.modal-content {
|
||||
background: #111;
|
||||
border: 1px solid #222;
|
||||
background: var(--color-modal-bg);
|
||||
border: 1px solid var(--color-modal-border);
|
||||
padding: 2rem;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-content.map-content {
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
@@ -84,7 +107,7 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
|
||||
|
||||
.modal-title {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
color: var(--color-modal-title);
|
||||
margin-bottom: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
@@ -96,32 +119,69 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
|
||||
right: 1.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #9ca3af;
|
||||
color: var(--color-modal-close-btn);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: var(--color-modal-close-btn-hover);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
}
|
||||
.close-btn:hover { color: #fff; }
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
border-bottom: 1px solid var(--color-modal-stat-div);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.stat-row:last-child { border-bottom: none; }
|
||||
.stat-label { color: #4b5563; }
|
||||
|
||||
.stat-label { color: var(--color-modal-stat-label); }
|
||||
|
||||
.stat-value {
|
||||
color: #9ca3af;
|
||||
color: var(--color-modal-stat-value);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
text-align: center;
|
||||
font-size: 0.7rem;
|
||||
color: #333;
|
||||
color: var(--color-modal-footer);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.theme-btn {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
left: 1.5rem;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.theme-btn .material-symbols-outlined {
|
||||
color: var(--color-theme-toggle);
|
||||
font-size: 28px;
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.theme-btn:hover .material-symbols-outlined {
|
||||
color: var(--color-theme-toggle-hover);
|
||||
}
|
||||
|
||||
.terminal {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@@ -130,8 +190,8 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
|
||||
width: 800px;
|
||||
max-width: 100%;
|
||||
height: 250px;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
border: 1px solid #333;
|
||||
background: var(--color-terminal-bg);
|
||||
border: 1px solid var(--color-terminal-border);
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
z-index: 100;
|
||||
@@ -139,9 +199,9 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
color: #4ade80;
|
||||
color: var(--color-terminal-text-default);
|
||||
font-size: 12px;
|
||||
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 -4px 12px var(--color-terminal-shadow);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -162,11 +222,11 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
|
||||
top: -24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
border: 1px solid #333;
|
||||
background: var(--color-terminal-bg);
|
||||
border: 1px solid var(--color-terminal-border);
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
color: #4ade80;
|
||||
color: var(--color-terminal-tab-arrow);
|
||||
cursor: pointer;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
@@ -178,17 +238,18 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.terminal-toggle:hover {
|
||||
color: #fff;
|
||||
background: #222;
|
||||
color: var(--color-terminal-tab-arrow-hover);
|
||||
background: var(--color-terminal-tab-bg-hover);
|
||||
}
|
||||
|
||||
.system-status-bar {
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
color: #666;
|
||||
color: var(--color-terminal-status-message);
|
||||
font-style: italic;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -204,7 +265,7 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #333 transparent;
|
||||
scrollbar-color: var(--color-terminal-scrollbar) transparent;
|
||||
}
|
||||
|
||||
.terminal-output::-webkit-scrollbar {
|
||||
@@ -216,38 +277,37 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
|
||||
}
|
||||
|
||||
.terminal-output::-webkit-scrollbar-thumb {
|
||||
background-color: #333;
|
||||
background-color: var(--color-terminal-scrollbar);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.terminal-output::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #444;
|
||||
background-color: var(--color-terminal-scrollbar-hover);
|
||||
}
|
||||
|
||||
.terminal-input-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid #333;
|
||||
border-top: 1px solid var(--color-terminal-input-divider);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
margin-right: 10px;
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
#terminal-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #fff;
|
||||
color: var(--color-terminal-input-text);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.msg-system {
|
||||
color: #666;
|
||||
color: var(--color-terminal-status-message);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -256,5 +316,5 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
color: #ddd;
|
||||
color: var(--color-terminal-output-message);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
:root {
|
||||
--color-count: #4ade80;
|
||||
--color-particle: #4ade80;
|
||||
--color-particle-link: rgba(74, 222, 128, 0.15);
|
||||
--color-pulse: #fff;
|
||||
--color-theme-toggle: #4ade80;
|
||||
--color-theme-toggle-hover: #fff;
|
||||
--color-bg-main: #111;
|
||||
--color-bg-overlay: rgba(0, 0, 0, 0.8);
|
||||
|
||||
--color-text-default: #eee;
|
||||
--color-text-main-label: #9ca3af;
|
||||
--color-text-footer: #4b5563;
|
||||
--color-text-footer-hover: #9ca3af;
|
||||
--color-text-debug: #4b5563;
|
||||
--color-text-debug-link: #4b5563;
|
||||
--color-text-debug-link-hover: #9ca3af;
|
||||
--color-text-anchor-link: #4b5563;
|
||||
|
||||
--color-modal-bg: #111;
|
||||
--color-modal-border: #222;
|
||||
--color-modal-title: #666;
|
||||
--color-modal-close-btn: #333;
|
||||
--color-modal-close-btn-hover: #666;
|
||||
--color-modal-stat-div: #1a1a1a;
|
||||
--color-modal-stat-label: #4b5563;
|
||||
--color-modal-stat-value: #9ca3af;
|
||||
--color-modal-footer: #333;
|
||||
|
||||
--color-terminal-bg: rgba(0, 0, 0, 0.9);
|
||||
--color-terminal-border: #333;
|
||||
--color-terminal-shadow: rgba(0, 0, 0, 0.3);
|
||||
--color-terminal-input-text: #fff;
|
||||
--color-terminal-input-divider: #333;
|
||||
--color-terminal-output-message: #ddd;
|
||||
--color-terminal-tab-arrow: #4ade80;
|
||||
--color-terminal-tab-arrow-hover: #fff;
|
||||
--color-terminal-tab-bg-hover: #222;
|
||||
--color-terminal-status-message: #666;
|
||||
--color-terminal-scrollbar: #333;
|
||||
--color-terminal-scrollbar-hover: #444;
|
||||
--color-terminal-text-default: #4ade80;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
:root {
|
||||
--color-count: #88c0d0;
|
||||
--color-particle: #8fbcbb;
|
||||
--color-particle-link: rgba(143, 188, 187, 0.15);
|
||||
--color-pulse: #eceff4;
|
||||
--color-theme-toggle: #88c0d0;
|
||||
--color-theme-toggle-hover: #eceff4;
|
||||
--color-bg-main: #2e3440;
|
||||
--color-bg-overlay: rgba(46, 52, 64, 0.8);
|
||||
|
||||
--color-text-default: #eee;
|
||||
--color-text-main-label: #5e81ac;
|
||||
--color-text-footer: #81a1c1;
|
||||
--color-text-footer-hover: #5e81ac;
|
||||
--color-text-debug: #81a1c1;
|
||||
--color-text-debug-link: #81a1c1;
|
||||
--color-text-debug-link-hover: #5e81ac;
|
||||
--color-text-anchor-link: #81a1c1;
|
||||
|
||||
--color-modal-bg: #2e3440;
|
||||
--color-modal-border: #434c5e;
|
||||
--color-modal-title: #88c0d0;
|
||||
--color-modal-close-btn: #434c5e;
|
||||
--color-modal-close-btn-hover: #5e81ac;
|
||||
--color-modal-stat-div: #434c5e;
|
||||
--color-modal-stat-label: #8fbcbb;
|
||||
--color-modal-stat-value: #5e81ac;
|
||||
--color-modal-footer: #434c5e;
|
||||
|
||||
--color-terminal-bg: rgba(46, 52, 64, 0.9);
|
||||
--color-terminal-border: #434c5e;
|
||||
--color-terminal-shadow: rgba(0, 0, 0, 0.3);
|
||||
--color-terminal-input-text: #88c0d0;
|
||||
--color-terminal-input-divider: #434c5e;
|
||||
--color-terminal-output-message: #88c0d0;
|
||||
--color-terminal-tab-arrow: #88c0d0;
|
||||
--color-terminal-tab-arrow-hover: #eceff4;
|
||||
--color-terminal-tab-bg-hover: #434c5e;
|
||||
--color-terminal-status-message: #4c566a;
|
||||
--color-terminal-scrollbar: #434c5e;
|
||||
--color-terminal-scrollbar-hover: #4c566a;
|
||||
--color-terminal-text-default: #88c0d0;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
:root {
|
||||
--color-count: #073642;
|
||||
--color-particle: #268bd2;
|
||||
--color-particle-link: rgba(38, 138, 210, 0.15);
|
||||
--color-pulse: #93a1a1;
|
||||
--color-theme-toggle: #073642;
|
||||
--color-theme-toggle-hover: #93a1a1;
|
||||
--color-bg-main: #eee8d5;
|
||||
--color-bg-overlay: rgba(238, 232, 213, 0.8);
|
||||
|
||||
--color-text-default: #eee;
|
||||
--color-text-main-label: #b58900;
|
||||
--color-text-footer: #657b83;
|
||||
--color-text-footer-hover: #b58900;
|
||||
--color-text-debug: #657b83;
|
||||
--color-text-debug-link: #657b83;
|
||||
--color-text-debug-link-hover: #b58900;
|
||||
--color-text-anchor-link: #657b83;
|
||||
|
||||
--color-modal-bg: #eee8d5;
|
||||
--color-modal-border: #073642;
|
||||
--color-modal-title: #073642;
|
||||
--color-modal-close-btn: #073642;
|
||||
--color-modal-close-btn-hover: #b58900;
|
||||
--color-modal-stat-div: #073642;
|
||||
--color-modal-stat-label: #b58900;
|
||||
--color-modal-stat-value: #268bd2;
|
||||
--color-modal-footer: #073642;
|
||||
|
||||
--color-terminal-bg: rgba(238, 232, 213, 0.8);
|
||||
--color-terminal-border: #93a1a1;
|
||||
--color-terminal-shadow: rgba(0, 0, 0, 0.3);
|
||||
--color-terminal-input-text: #073642;
|
||||
--color-terminal-input-divider: #93a1a1;
|
||||
--color-terminal-output-message: #073642;
|
||||
--color-terminal-tab-arrow: #268bd2;
|
||||
--color-terminal-tab-arrow-hover: #fdf6e3;
|
||||
--color-terminal-tab-bg-hover: #93a1a1;
|
||||
--color-terminal-status-message: #586e75;
|
||||
--color-terminal-scrollbar: #93a1a1;
|
||||
--color-terminal-scrollbar-hover: #586e75;
|
||||
--color-terminal-text-default: #268bd2;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
:root {
|
||||
--color-count: #f7768e;
|
||||
--color-particle: #ff9e64;
|
||||
--color-particle-link: rgba(255, 157, 100, 0.15);
|
||||
--color-pulse: #b4f9f8;
|
||||
--color-theme-toggle: #f7768e;
|
||||
--color-theme-toggle-hover: #b4f9f8;
|
||||
--color-bg-main: #1a1b26;
|
||||
--color-bg-overlay: rgba(26, 27, 38, 0.8);
|
||||
|
||||
--color-text-default: #eee;
|
||||
--color-text-main-label: #bb9af7;
|
||||
--color-text-footer: #9aa5ce;
|
||||
--color-text-footer-hover: #bb9af7;
|
||||
--color-text-debug: #9aa5ce;
|
||||
--color-text-debug-link: #9aa5ce;
|
||||
--color-text-debug-link-hover: #bb9af7;
|
||||
--color-text-anchor-link: #9aa5ce;
|
||||
|
||||
--color-modal-bg: #1a1b26;
|
||||
--color-modal-border: #414868;
|
||||
--color-modal-title: #f7768e;
|
||||
--color-modal-close-btn: #414868;
|
||||
--color-modal-close-btn-hover: #bb9af7;
|
||||
--color-modal-stat-div: #414868;
|
||||
--color-modal-stat-label: #bb9af7;
|
||||
--color-modal-stat-value: #ff9e64;
|
||||
--color-modal-footer: #414868;
|
||||
|
||||
--color-terminal-bg: rgba(26, 27, 38, 0.9);
|
||||
--color-terminal-border: #414868;
|
||||
--color-terminal-shadow: rgba(0, 0, 0, 0.3);
|
||||
--color-terminal-input-text: #b4f9f8;
|
||||
--color-terminal-input-divider: #414868;
|
||||
--color-terminal-output-message: #b4f9f8;
|
||||
--color-terminal-tab-arrow: #ff9e64;
|
||||
--color-terminal-tab-arrow-hover: #b4f9f8;
|
||||
--color-terminal-tab-bg-hover: #414868;
|
||||
--color-terminal-status-message: #565f89;
|
||||
--color-terminal-scrollbar: #414868;
|
||||
--color-terminal-scrollbar-hover: #565f89;
|
||||
--color-terminal-text-default: #ff9e64;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
:root {
|
||||
--color-count: #00bcd4;
|
||||
--color-particle: #f78c6c;
|
||||
--color-particle-link: rgba(247, 140, 108, 0.15);
|
||||
--color-pulse: #ffd0aa;
|
||||
--color-theme-toggle: #00bcd4;
|
||||
--color-theme-toggle-hover: #ffd0aa;
|
||||
--color-bg-main: #390000;
|
||||
--color-bg-overlay: rgba(57, 0, 0, 0.8);
|
||||
|
||||
--color-text-default: #eee;
|
||||
--color-text-main-label: #ffd0aa;
|
||||
--color-text-footer: #7F6451;
|
||||
--color-text-footer-hover: #ffd0aa;
|
||||
--color-text-debug: #7F6451;
|
||||
--color-text-debug-link: #7F6451;
|
||||
--color-text-debug-link-hover: #ffd0aa;
|
||||
--color-text-anchor-link: #7F6451;
|
||||
|
||||
--color-modal-bg: #390000;
|
||||
--color-modal-border: #ffd0aa;
|
||||
--color-modal-title: #ffd0aa;
|
||||
--color-modal-close-btn: #ffd0aa;
|
||||
--color-modal-close-btn-hover: #00bcd4;
|
||||
--color-modal-stat-div: #550000;
|
||||
--color-modal-stat-label: #7F6451;
|
||||
--color-modal-stat-value: #00bcd4;
|
||||
--color-modal-footer: #7F6451;
|
||||
|
||||
--color-terminal-bg: rgba(57, 0, 0, 0.9);
|
||||
--color-terminal-border: #7F6451;
|
||||
--color-terminal-shadow: rgba(0, 0, 0, 0.3);
|
||||
--color-terminal-input-text: #ffd0aa;
|
||||
--color-terminal-input-divider: #7F6451;
|
||||
--color-terminal-output-message: #ffd0aa;
|
||||
--color-terminal-tab-arrow: #00bcd4;
|
||||
--color-terminal-tab-arrow-hover: #ffd0aa;
|
||||
--color-terminal-tab-bg-hover: #7F6451;
|
||||
--color-terminal-status-message: #7f3c3c;
|
||||
--color-terminal-scrollbar: #7f3c3c;
|
||||
--color-terminal-scrollbar-hover: #00bcd4;
|
||||
--color-terminal-text-default: #ffd0aa;
|
||||
}
|
||||
@@ -29,6 +29,7 @@ const DIAGNOSTICS_INTERVAL = 10000;
|
||||
const PORT = process.env.PORT || 3000;
|
||||
const ENABLE_CHAT = process.env.ENABLE_CHAT === "true";
|
||||
const ENABLE_MAP = process.env.ENABLE_MAP === 'true';
|
||||
const ENABLE_THEMES = process.env.ENABLE_THEMES !== "false";
|
||||
const CHAT_RATE_LIMIT = parseInt(process.env.CHAT_RATE_LIMIT) || 5000;
|
||||
const VISUAL_LIMIT = parseInt(process.env.VISUAL_LIMIT) || 500;
|
||||
|
||||
@@ -49,6 +50,7 @@ module.exports = {
|
||||
PORT,
|
||||
ENABLE_CHAT,
|
||||
ENABLE_MAP,
|
||||
ENABLE_THEMES,
|
||||
CHAT_RATE_LIMIT,
|
||||
VISUAL_LIMIT,
|
||||
};
|
||||
|
||||
+2
-1
@@ -3,7 +3,7 @@ const fs = require("fs");
|
||||
const path = require("path");
|
||||
const crypto = require("crypto");
|
||||
const { signMessage } = require("../core/security");
|
||||
const { ENABLE_CHAT, ENABLE_MAP, CHAT_RATE_LIMIT, VISUAL_LIMIT } = require("../config/constants");
|
||||
const { ENABLE_CHAT, ENABLE_MAP, ENABLE_THEMES, CHAT_RATE_LIMIT, VISUAL_LIMIT } = require("../config/constants");
|
||||
|
||||
const HTML_TEMPLATE = fs.readFileSync(
|
||||
path.join(__dirname, "../../public/index.html"),
|
||||
@@ -22,6 +22,7 @@ const setupRoutes = (app, identity, peerManager, swarm, sseManager, diagnostics)
|
||||
.replace(/\{\{ID\}\}/g, "..." + identity.id.slice(-8))
|
||||
.replace(/\{\{DIRECT\}\}/g, directPeers)
|
||||
.replace(/\{\{MAP_CLASS\}\}/g, ENABLE_MAP ? '' : 'hidden')
|
||||
.replace(/\{\{THEMES_CLASS\}\}/g, ENABLE_THEMES ? '' : 'hidden')
|
||||
.replace(/\{\{VISUAL_LIMIT\}\}/g, VISUAL_LIMIT);
|
||||
|
||||
res.send(html);
|
||||
|
||||
Reference in New Issue
Block a user