RNS-Things/MeshChatX
2
0
Fork 0
Code Issues 8 Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

1.0.0

Browse Source
This commit is contained in:
ivan
2026-01-01 15:25:23 -06:00
parent 9df89fe862
commit 23dbe7b789
52 changed files with 4540 additions and 2999 deletions
Download Patch File Download Diff File Expand all files Collapse all files

328
electron/loading.html
View File

@@ -1,161 +1,205 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="color-scheme" content="light dark">
<title>MeshChatX</title>
<script src="./assets/js/tailwindcss/tailwind-v3.4.3-forms-v0.5.7.js"></script>
</head>
<body class="min-h-screen bg-slate-100 text-gray-900 antialiased dark:bg-zinc-950 dark:text-zinc-50 transition-colors">
<div class="absolute inset-0 -z-10 overflow-hidden">
<div class="absolute -left-32 -top-40 h-80 w-80 rounded-full bg-gradient-to-br from-blue-500/30 via-indigo-500/20 to-purple-500/30 blur-3xl dark:from-blue-600/25 dark:via-indigo-600/25 dark:to-purple-600/25"></div>
<div class="absolute -right-24 top-20 h-64 w-64 rounded-full bg-gradient-to-br from-emerald-400/30 via-cyan-500/20 to-blue-500/30 blur-3xl dark:from-emerald-500/25 dark:via-cyan-500/25 dark:to-blue-500/25"></div>
</div>
<main class="relative flex min-h-screen items-center justify-center px-6 py-10">
<div class="w-full max-w-xl">
<div class="rounded-3xl border border-slate-200/80 bg-white/80 shadow-2xl backdrop-blur-xl ring-1 ring-white/60 dark:border-zinc-800/70 dark:bg-zinc-900/70 dark:ring-zinc-800/70 transition-colors">
<div class="p-8 space-y-6">
<div class="flex items-center gap-4">
<div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 via-indigo-500 to-purple-500 shadow-lg ring-4 ring-white/60 dark:ring-zinc-800/70">
<img class="h-10 w-10 object-contain" src="./assets/images/logo.png" alt="MeshChatX logo">
</div>
<div class="space-y-1">
<p class="text-xs uppercase tracking-[0.2em] text-blue-600 dark:text-blue-300">MeshChatX</p>
<div class="text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">MeshChatX</div>
<div class="text-sm text-gray-600 dark:text-gray-300">Custom fork by Sudo-Ivan</div>
</div>
</div>
<div class="flex items-center justify-between rounded-2xl border border-dashed border-slate-200/90 bg-slate-50/70 px-4 py-3 text-sm text-gray-700 dark:border-zinc-800/80 dark:bg-zinc-900/70 dark:text-gray-200 transition-colors">
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-blue-500 animate-pulse"></span>
<span>Preparing your node</span>
</div>
<div class="inline-flex items-center gap-2 rounded-full bg-blue-100/80 px-3 py-1 text-xs font-semibold text-blue-700 shadow-sm dark:bg-blue-900/50 dark:text-blue-200">
<span class="h-2 w-2 rounded-full bg-blue-500"></span>
<span id="status-text">Starting services</span>
</div>
</div>
<div class="flex items-center gap-4">
<div class="relative inline-flex h-14 w-14 items-center justify-center">
<span class="absolute inset-0 rounded-full border-4 border-blue-500/25 dark:border-blue-500/20"></span>
<span class="absolute inset-0 animate-spin rounded-full border-4 border-transparent border-t-blue-500 dark:border-t-blue-400"></span>
<span class="absolute inset-2 rounded-full bg-blue-500/10 dark:bg-blue-500/15"></span>
</div>
<div class="flex-1 space-y-1">
<div class="text-base font-medium text-gray-900 dark:text-white">Loading services</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Waiting for the MeshChatX API to come online.</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div class="rounded-2xl border border-slate-200/90 bg-white/70 p-4 dark:border-zinc-800/80 dark:bg-zinc-900/70 transition-colors">
<div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Version</div>
<div class="mt-1 text-lg font-semibold text-gray-900 dark:text-white" id="app-version">v0.0.0</div>
</div>
<div class="rounded-2xl border border-slate-200/90 bg-white/70 p-4 text-right dark:border-zinc-800/80 dark:bg-zinc-900/70 transition-colors">
<div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Status</div>
<div class="mt-1 text-lg font-semibold text-emerald-600 dark:text-emerald-300" id="status-badge">Booting</div>
</div>
</div>
</div>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="color-scheme" content="light dark" />
<title>MeshChatX</title>
<script src="./assets/js/tailwindcss/tailwind-v3.4.3-forms-v0.5.7.js"></script>
</head>
<body
class="min-h-screen bg-slate-100 text-gray-900 antialiased dark:bg-zinc-950 dark:text-zinc-50 transition-colors"
>
<div class="absolute inset-0 -z-10 overflow-hidden">
<div
class="absolute -left-32 -top-40 h-80 w-80 rounded-full bg-gradient-to-br from-blue-500/30 via-indigo-500/20 to-purple-500/30 blur-3xl dark:from-blue-600/25 dark:via-indigo-600/25 dark:to-purple-600/25"
></div>
<div
class="absolute -right-24 top-20 h-64 w-64 rounded-full bg-gradient-to-br from-emerald-400/30 via-cyan-500/20 to-blue-500/30 blur-3xl dark:from-emerald-500/25 dark:via-cyan-500/25 dark:to-blue-500/25"
></div>
</div>
</div>
</main>
<script>
const statusText = document.getElementById("status-text");
const statusBadge = document.getElementById("status-badge");
<main class="relative flex min-h-screen items-center justify-center px-6 py-10">
<div class="w-full max-w-xl">
<div
class="rounded-3xl border border-slate-200/80 bg-white/80 shadow-2xl backdrop-blur-xl ring-1 ring-white/60 dark:border-zinc-800/70 dark:bg-zinc-900/70 dark:ring-zinc-800/70 transition-colors"
>
<div class="p-8 space-y-6">
<div class="flex items-center gap-4">
<div
class="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 via-indigo-500 to-purple-500 shadow-lg ring-4 ring-white/60 dark:ring-zinc-800/70"
>
<img
class="h-10 w-10 object-contain"
src="./assets/images/logo.png"
alt="MeshChatX logo"
/>
</div>
<div class="space-y-1">
<p class="text-xs uppercase tracking-[0.2em] text-blue-600 dark:text-blue-300">
MeshChatX
</p>
<div class="text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">
MeshChatX
</div>
<div class="text-sm text-gray-600 dark:text-gray-300">Custom fork by Sudo-Ivan</div>
</div>
</div>
applyTheme(detectPreferredTheme());
showAppVersion();
check();
listenForSystemThemeChanges();
<div
class="flex items-center justify-between rounded-2xl border border-dashed border-slate-200/90 bg-slate-50/70 px-4 py-3 text-sm text-gray-700 dark:border-zinc-800/80 dark:bg-zinc-900/70 dark:text-gray-200 transition-colors"
>
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-blue-500 animate-pulse"></span>
<span>Preparing your node</span>
</div>
<div
class="inline-flex items-center gap-2 rounded-full bg-blue-100/80 px-3 py-1 text-xs font-semibold text-blue-700 shadow-sm dark:bg-blue-900/50 dark:text-blue-200"
>
<span class="h-2 w-2 rounded-full bg-blue-500"></span>
<span id="status-text">Starting services</span>
</div>
</div>
async function showAppVersion() {
const appVersion = await window.electron.appVersion();
document.getElementById("app-version").innerText = "v" + appVersion;
}
<div class="flex items-center gap-4">
<div class="relative inline-flex h-14 w-14 items-center justify-center">
<span
class="absolute inset-0 rounded-full border-4 border-blue-500/25 dark:border-blue-500/20"
></span>
<span
class="absolute inset-0 animate-spin rounded-full border-4 border-transparent border-t-blue-500 dark:border-t-blue-400"
></span>
<span class="absolute inset-2 rounded-full bg-blue-500/10 dark:bg-blue-500/15"></span>
</div>
<div class="flex-1 space-y-1">
<div class="text-base font-medium text-gray-900 dark:text-white">Loading services</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
Waiting for the MeshChatX API to come online.
</div>
</div>
</div>
function detectPreferredTheme() {
try {
const storedTheme = localStorage.getItem("meshchat.theme") || localStorage.getItem("meshchatx.theme");
if (storedTheme === "dark" || storedTheme === "light") {
return storedTheme;
<div class="grid grid-cols-2 gap-4 text-sm">
<div
class="rounded-2xl border border-slate-200/90 bg-white/70 p-4 dark:border-zinc-800/80 dark:bg-zinc-900/70 transition-colors"
>
<div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
Version
</div>
<div class="mt-1 text-lg font-semibold text-gray-900 dark:text-white" id="app-version">
v0.0.0
</div>
</div>
<div
class="rounded-2xl border border-slate-200/90 bg-white/70 p-4 text-right dark:border-zinc-800/80 dark:bg-zinc-900/70 transition-colors"
>
<div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
Status
</div>
<div
class="mt-1 text-lg font-semibold text-emerald-600 dark:text-emerald-300"
id="status-badge"
>
Booting
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
const statusText = document.getElementById("status-text");
const statusBadge = document.getElementById("status-badge");
applyTheme(detectPreferredTheme());
showAppVersion();
check();
listenForSystemThemeChanges();
async function showAppVersion() {
const appVersion = await window.electron.appVersion();
document.getElementById("app-version").innerText = "v" + appVersion;
}
} catch (e) {}
return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
function applyTheme(theme) {
const isDark = theme === "dark";
document.documentElement.classList.toggle("dark", isDark);
document.body.dataset.theme = isDark ? "dark" : "light";
}
function detectPreferredTheme() {
try {
const storedTheme =
localStorage.getItem("meshchat.theme") || localStorage.getItem("meshchatx.theme");
if (storedTheme === "dark" || storedTheme === "light") {
return storedTheme;
}
} catch (e) {}
return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
}
function listenForSystemThemeChanges() {
if (!window.matchMedia) {
return;
}
const media = window.matchMedia("(prefers-color-scheme: dark)");
media.addEventListener("change", (event) => {
applyTheme(event.matches ? "dark" : "light");
});
}
function applyTheme(theme) {
const isDark = theme === "dark";
document.documentElement.classList.toggle("dark", isDark);
document.body.dataset.theme = isDark ? "dark" : "light";
}
let detectedProtocol = "http";
async function check() {
const protocols = ["https", "http"];
for (const protocol of protocols) {
try {
const result = await fetch(`${protocol}://localhost:9337/api/v1/status`, {
cache: "no-store",
});
const status = result.status;
const data = await result.json();
if (status === 200 && data.status === "ok") {
detectedProtocol = protocol;
statusText.innerText = "Launching UI";
statusBadge.innerText = "Ready";
syncThemeFromConfig();
setTimeout(onReady, 200);
function listenForSystemThemeChanges() {
if (!window.matchMedia) {
return;
}
} catch (e) {
continue;
const media = window.matchMedia("(prefers-color-scheme: dark)");
media.addEventListener("change", (event) => {
applyTheme(event.matches ? "dark" : "light");
});
}
}
setTimeout(check, 300);
}
function onReady() {
const timestamp = (new Date()).getTime();
window.location.href = `${detectedProtocol}://localhost:9337/?nocache=${timestamp}`;
}
let detectedProtocol = "http";
async function syncThemeFromConfig() {
try {
const response = await fetch(`${detectedProtocol}://localhost:9337/api/v1/config`, { cache: "no-store" });
if (!response.ok) {
return;
async function check() {
const protocols = ["https", "http"];
for (const protocol of protocols) {
try {
const result = await fetch(`${protocol}://localhost:9337/api/v1/status`, {
cache: "no-store",
});
const status = result.status;
const data = await result.json();
if (status === 200 && data.status === "ok") {
detectedProtocol = protocol;
statusText.innerText = "Launching UI";
statusBadge.innerText = "Ready";
syncThemeFromConfig();
setTimeout(onReady, 200);
return;
}
} catch (e) {
continue;
}
}
setTimeout(check, 300);
}
const config = await response.json();
if (config && (config.theme === "dark" || config.theme === "light")) {
applyTheme(config.theme);
function onReady() {
const timestamp = new Date().getTime();
window.location.href = `${detectedProtocol}://localhost:9337/?nocache=${timestamp}`;
}
async function syncThemeFromConfig() {
try {
localStorage.setItem("meshchat.theme", config.theme);
const response = await fetch(`${detectedProtocol}://localhost:9337/api/v1/config`, {
cache: "no-store",
});
if (!response.ok) {
return;
}
const config = await response.json();
if (config && (config.theme === "dark" || config.theme === "light")) {
applyTheme(config.theme);
try {
localStorage.setItem("meshchat.theme", config.theme);
} catch (e) {}
}
} catch (e) {}
}
} catch (e) {}
}
</script>
</body>
</html>
</script>
</body>
</html>