diff --git a/README.md b/README.md index 99b1f05..b4ed40a 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ 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).
- Default Nord Solarized Tokyo Night Volcano + Default Nord Solarized Tokyo Night Volcano Hypermind --- diff --git a/THEMES.md b/THEMES.md index ba034d6..f020290 100644 --- a/THEMES.md +++ b/THEMES.md @@ -20,6 +20,10 @@ ![Volcano theme screenshot](assets/images/volcano-theme.png) +### Hypermind + +![Hypermind theme screenshot](assets/images/hypermind-theme.png) + # Contributing custom themes 1. Fork `main` and clone locally to your device. @@ -35,6 +39,7 @@ 'nord-dark.css', 'solarized-light.css', 'volcano.css', + 'hypermind.css', 'new-theme.css' /* always add to the end of the list ]; ``` diff --git a/assets/images/hypermind-theme.png b/assets/images/hypermind-theme.png new file mode 100644 index 0000000..6ca8c66 Binary files /dev/null and b/assets/images/hypermind-theme.png differ diff --git a/package.json b/package.json index 4d0f4f4..ad9d208 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hypermind", - "version": "0.10.0", + "version": "0.11.0", "description": "A decentralized P2P counter of active deployments", "main": "server.js", "scripts": { diff --git a/public/app.js b/public/app.js index 59a4194..ad8c4f7 100644 --- a/public/app.js +++ b/public/app.js @@ -823,11 +823,39 @@ const themes = [ "nord-dark.css", "solarized-light.css", "volcano.css", + "hypermind.css", ]; let currentThemeIndex = 0; +let notificationTimeout; + +function showThemeNotification(themeName) { + const notification = document.getElementById("theme-notification"); + if (!notification) return; + + const displayName = themeName + .replace(".css", "") + .split("-") + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(" "); + + notification.innerText = `Theme: ${displayName}`; + notification.classList.remove("hidden"); + + notification.offsetHeight; + + notification.classList.add("show"); + + if (notificationTimeout) clearTimeout(notificationTimeout); + + notificationTimeout = setTimeout(() => { + notification.classList.remove("show"); + setTimeout(() => { + notification.classList.add("hidden"); + }, 300); + }, 2000); +} -// Initialize currentThemeIndex based on the theme loaded by index.html const currentThemeLink = document.getElementById("theme-css"); if (currentThemeLink) { const currentThemeName = currentThemeLink.href.split("/").pop(); @@ -856,6 +884,7 @@ function cycleTheme() { localStorage.setItem("hypermind-theme", newTheme); btn.disabled = false; btn.style.opacity = ""; + showThemeNotification(newTheme); }; newLink.onerror = () => { diff --git a/public/index.html b/public/index.html index 5c27fbe..b5734c0 100644 --- a/public/index.html +++ b/public/index.html @@ -124,6 +124,7 @@ +