2026-05-08 12:22:59 +03:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en" class="h-full">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
|
|
|
|
<title>OpenChamber Mini Chat</title>
|
2026-06-10 00:20:23 +03:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// Apply theme + splash colors before first paint so the window opens on a
|
|
|
|
|
// branded splash instead of flashing white while React/CSS load.
|
|
|
|
|
(function() {
|
|
|
|
|
try {
|
|
|
|
|
var themeMode = localStorage.getItem('themeMode');
|
|
|
|
|
var variant = localStorage.getItem('selectedThemeVariant');
|
|
|
|
|
var useSystem = localStorage.getItem('useSystemTheme');
|
|
|
|
|
var isDark;
|
|
|
|
|
|
|
|
|
|
if (themeMode === 'dark') {
|
|
|
|
|
isDark = true;
|
|
|
|
|
} else if (themeMode === 'light') {
|
|
|
|
|
isDark = false;
|
|
|
|
|
} else if (themeMode === 'system' || useSystem === null || useSystem === 'true') {
|
|
|
|
|
isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
|
} else if (variant === 'light' || variant === 'dark') {
|
|
|
|
|
isDark = variant === 'dark';
|
|
|
|
|
} else {
|
|
|
|
|
isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.documentElement.classList.add(isDark ? 'dark' : 'light');
|
|
|
|
|
document.documentElement.setAttribute('data-splash-variant', isDark ? 'dark' : 'light');
|
|
|
|
|
document.documentElement.style.setProperty('color-scheme', isDark ? 'dark' : 'light');
|
|
|
|
|
|
|
|
|
|
var splashBgLight = localStorage.getItem('splashBgLight');
|
|
|
|
|
var splashFgLight = localStorage.getItem('splashFgLight');
|
|
|
|
|
var splashBgDark = localStorage.getItem('splashBgDark');
|
|
|
|
|
var splashFgDark = localStorage.getItem('splashFgDark');
|
|
|
|
|
|
|
|
|
|
if (splashBgLight) document.documentElement.style.setProperty('--splash-background-light', splashBgLight);
|
|
|
|
|
if (splashFgLight) document.documentElement.style.setProperty('--splash-stroke-light', splashFgLight);
|
|
|
|
|
if (splashBgDark) document.documentElement.style.setProperty('--splash-background-dark', splashBgDark);
|
|
|
|
|
if (splashFgDark) document.documentElement.style.setProperty('--splash-stroke-dark', splashFgDark);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.warn('Failed to apply theme:', error);
|
|
|
|
|
}
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
/* A plain themed backdrop — no logo. The mini-chat content renders its
|
|
|
|
|
own (single) OpenChamber cube in its empty state, so a cube here would
|
|
|
|
|
briefly show a second, differently-sized one before handing off. The
|
|
|
|
|
backdrop matches bg-background, so fading it out is seamless. */
|
|
|
|
|
:root {
|
|
|
|
|
--splash-background-dark: #151313;
|
|
|
|
|
--splash-background-light: #FFFCF0;
|
|
|
|
|
--splash-background: var(--splash-background-dark);
|
|
|
|
|
}
|
|
|
|
|
html[data-splash-variant='light'] { --splash-background: var(--splash-background-light); }
|
|
|
|
|
html[data-splash-variant='dark'] { --splash-background: var(--splash-background-dark); }
|
|
|
|
|
|
|
|
|
|
#initial-loading {
|
|
|
|
|
background-color: var(--splash-background);
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
transition: opacity 0.3s ease-out;
|
|
|
|
|
}
|
|
|
|
|
#initial-loading.fade-out {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
2026-05-08 12:22:59 +03:00
|
|
|
<script type="module" src="/src/mini-chat-main.tsx"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="h-full bg-background text-foreground">
|
2026-06-10 00:20:23 +03:00
|
|
|
<div id="root" class="h-full">
|
|
|
|
|
<!-- Themed backdrop until the mini-chat React app is ready (dismissed in
|
|
|
|
|
ElectronMiniChatApp). No logo here on purpose — the content renders
|
|
|
|
|
the single OpenChamber cube itself. -->
|
|
|
|
|
<div id="initial-loading"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// Safety net: never let the splash hang if the app fails to dismiss it.
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
var loading = document.getElementById('initial-loading');
|
|
|
|
|
if (loading) {
|
|
|
|
|
loading.classList.add('fade-out');
|
|
|
|
|
setTimeout(function() { loading.remove(); }, 300);
|
|
|
|
|
}
|
|
|
|
|
}, 8000);
|
|
|
|
|
</script>
|
2026-05-08 12:22:59 +03:00
|
|
|
</body>
|
|
|
|
|
</html>
|
