206 lines
10 KiB
HTML
206 lines
10 KiB
HTML
<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>
|
|
</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;
|
|
}
|
|
|
|
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 applyTheme(theme) {
|
|
const isDark = theme === "dark";
|
|
document.documentElement.classList.toggle("dark", isDark);
|
|
document.body.dataset.theme = isDark ? "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");
|
|
});
|
|
}
|
|
|
|
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);
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
continue;
|
|
}
|
|
}
|
|
setTimeout(check, 300);
|
|
}
|
|
|
|
function onReady() {
|
|
const timestamp = new Date().getTime();
|
|
window.location.href = `${detectedProtocol}://localhost:9337/?nocache=${timestamp}`;
|
|
}
|
|
|
|
async function syncThemeFromConfig() {
|
|
try {
|
|
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) {}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|