2025-12-07 19:32:53 +02: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"
|
|
|
|
|
/>
|
|
|
|
|
<meta name="theme-color" content="#151313" />
|
|
|
|
|
<link rel="preload" href="/ibm-plex-mono-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin />
|
|
|
|
|
<title>OpenChamber Desktop</title>
|
2025-12-17 12:57:09 +02:00
|
|
|
<script>
|
|
|
|
|
// Blocking script to detect and apply theme before first paint
|
|
|
|
|
(function() {
|
|
|
|
|
var themeMode = localStorage.getItem('themeMode');
|
|
|
|
|
var isDark;
|
|
|
|
|
if (themeMode === 'dark') {
|
|
|
|
|
isDark = true;
|
|
|
|
|
} else if (themeMode === 'light') {
|
|
|
|
|
isDark = false;
|
|
|
|
|
} else {
|
|
|
|
|
// 'system' or not set - use system preference
|
|
|
|
|
isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
|
}
|
|
|
|
|
document.documentElement.classList.add(isDark ? 'dark' : 'light');
|
|
|
|
|
document.documentElement.style.setProperty('color-scheme', isDark ? 'dark' : 'light');
|
|
|
|
|
// Store for use in inline styles
|
|
|
|
|
window.__INITIAL_THEME_DARK__ = isDark;
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
2025-12-07 19:32:53 +02:00
|
|
|
<style>
|
|
|
|
|
@font-face {
|
|
|
|
|
font-family: 'IBM Plex Mono';
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
src: url('/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
|
|
|
|
|
font-display: block;
|
|
|
|
|
}
|
2025-12-17 12:57:09 +02:00
|
|
|
/* Theme-aware color scheme */
|
|
|
|
|
html.dark {
|
2025-12-07 19:32:53 +02:00
|
|
|
color-scheme: dark;
|
|
|
|
|
}
|
2025-12-17 12:57:09 +02:00
|
|
|
html.light {
|
|
|
|
|
color-scheme: light;
|
|
|
|
|
}
|
2025-12-07 19:32:53 +02:00
|
|
|
html,
|
|
|
|
|
body,
|
|
|
|
|
#root {
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
|
|
|
background-color: transparent;
|
2025-12-17 12:57:09 +02:00
|
|
|
}
|
2025-12-21 22:59:06 +02:00
|
|
|
/* Theme-aware colors for loading screen */
|
|
|
|
|
html.dark {
|
|
|
|
|
--splash-stroke: white;
|
|
|
|
|
--splash-face-fill: rgba(255, 255, 255, 0.15);
|
|
|
|
|
--splash-cell-fill: rgba(255, 255, 255, 0.35);
|
|
|
|
|
--splash-logo-fill: white;
|
2025-12-17 12:57:09 +02:00
|
|
|
}
|
2025-12-21 22:59:06 +02:00
|
|
|
html.light {
|
|
|
|
|
--splash-stroke: black;
|
|
|
|
|
--splash-face-fill: rgba(0, 0, 0, 0.15);
|
|
|
|
|
--splash-cell-fill: rgba(0, 0, 0, 0.4);
|
|
|
|
|
--splash-logo-fill: black;
|
2025-12-07 19:32:53 +02:00
|
|
|
}
|
|
|
|
|
.loading {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2025-12-21 22:59:06 +02:00
|
|
|
@keyframes logo-pulse {
|
|
|
|
|
0%, 100% { opacity: 1; }
|
|
|
|
|
50% { opacity: 0.4; }
|
2025-12-07 19:32:53 +02:00
|
|
|
}
|
2025-12-21 22:59:06 +02:00
|
|
|
.logo-pulse {
|
|
|
|
|
animation: logo-pulse 3s ease-in-out infinite;
|
2025-12-07 19:32:53 +02:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="h-full">
|
|
|
|
|
<div id="root" class="h-full">
|
2025-12-21 22:59:06 +02:00
|
|
|
<div class="loading">
|
|
|
|
|
<svg width="180" height="180" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="OpenChamber loading">
|
|
|
|
|
<!-- Left face with stroke -->
|
|
|
|
|
<path d="M50 50 L8.432 26 L8.432 74 L50 98 Z" fill="var(--splash-face-fill)" stroke="var(--splash-stroke)" stroke-width="2" stroke-linejoin="round"/>
|
|
|
|
|
<!-- Left face grid cells -->
|
|
|
|
|
<path d="M50 50 L39.608 44 L39.608 56 L50 62 Z" fill="var(--splash-cell-fill)" opacity="0.2"/>
|
|
|
|
|
<path d="M39.608 44 L29.216 38 L29.216 50 L39.608 56 Z" fill="var(--splash-cell-fill)" opacity="0.45"/>
|
|
|
|
|
<path d="M29.216 38 L18.824 32 L18.824 44 L29.216 50 Z" fill="var(--splash-cell-fill)" opacity="0.15"/>
|
|
|
|
|
<path d="M18.824 32 L8.432 26 L8.432 38 L18.824 44 Z" fill="var(--splash-cell-fill)" opacity="0.55"/>
|
|
|
|
|
<path d="M50 62 L39.608 56 L39.608 68 L50 74 Z" fill="var(--splash-cell-fill)" opacity="0.35"/>
|
|
|
|
|
<path d="M39.608 56 L29.216 50 L29.216 62 L39.608 68 Z" fill="var(--splash-cell-fill)" opacity="0.1"/>
|
|
|
|
|
<path d="M29.216 50 L18.824 44 L18.824 56 L29.216 62 Z" fill="var(--splash-cell-fill)" opacity="0.5"/>
|
|
|
|
|
<path d="M18.824 44 L8.432 38 L8.432 50 L18.824 56 Z" fill="var(--splash-cell-fill)" opacity="0.25"/>
|
|
|
|
|
<path d="M50 74 L39.608 68 L39.608 80 L50 86 Z" fill="var(--splash-cell-fill)" opacity="0.4"/>
|
|
|
|
|
<path d="M39.608 68 L29.216 62 L29.216 74 L39.608 80 Z" fill="var(--splash-cell-fill)" opacity="0.3"/>
|
|
|
|
|
<path d="M29.216 62 L18.824 56 L18.824 68 L29.216 74 Z" fill="var(--splash-cell-fill)" opacity="0.45"/>
|
|
|
|
|
<path d="M18.824 56 L8.432 50 L8.432 62 L18.824 68 Z" fill="var(--splash-cell-fill)" opacity="0.15"/>
|
|
|
|
|
<path d="M50 86 L39.608 80 L39.608 92 L50 98 Z" fill="var(--splash-cell-fill)" opacity="0.55"/>
|
|
|
|
|
<path d="M39.608 80 L29.216 74 L29.216 86 L39.608 92 Z" fill="var(--splash-cell-fill)" opacity="0.2"/>
|
|
|
|
|
<path d="M29.216 74 L18.824 68 L18.824 80 L29.216 86 Z" fill="var(--splash-cell-fill)" opacity="0.35"/>
|
|
|
|
|
<path d="M18.824 68 L8.432 62 L8.432 74 L18.824 80 Z" fill="var(--splash-cell-fill)" opacity="0.1"/>
|
|
|
|
|
<!-- Right face with stroke -->
|
|
|
|
|
<path d="M50 50 L91.568 26 L91.568 74 L50 98 Z" fill="var(--splash-face-fill)" stroke="var(--splash-stroke)" stroke-width="2" stroke-linejoin="round"/>
|
|
|
|
|
<!-- Right face grid cells -->
|
|
|
|
|
<path d="M50 50 L60.392 44 L60.392 56 L50 62 Z" fill="var(--splash-cell-fill)" opacity="0.3"/>
|
|
|
|
|
<path d="M60.392 44 L70.784 38 L70.784 50 L60.392 56 Z" fill="var(--splash-cell-fill)" opacity="0.15"/>
|
|
|
|
|
<path d="M70.784 38 L81.176 32 L81.176 44 L70.784 50 Z" fill="var(--splash-cell-fill)" opacity="0.45"/>
|
|
|
|
|
<path d="M81.176 32 L91.568 26 L91.568 38 L81.176 44 Z" fill="var(--splash-cell-fill)" opacity="0.25"/>
|
|
|
|
|
<path d="M50 62 L60.392 56 L60.392 68 L50 74 Z" fill="var(--splash-cell-fill)" opacity="0.5"/>
|
|
|
|
|
<path d="M60.392 56 L70.784 50 L70.784 62 L60.392 68 Z" fill="var(--splash-cell-fill)" opacity="0.35"/>
|
|
|
|
|
<path d="M70.784 50 L81.176 44 L81.176 56 L70.784 62 Z" fill="var(--splash-cell-fill)" opacity="0.1"/>
|
|
|
|
|
<path d="M81.176 44 L91.568 38 L91.568 50 L81.176 56 Z" fill="var(--splash-cell-fill)" opacity="0.4"/>
|
|
|
|
|
<path d="M50 74 L60.392 68 L60.392 80 L50 86 Z" fill="var(--splash-cell-fill)" opacity="0.2"/>
|
|
|
|
|
<path d="M60.392 68 L70.784 62 L70.784 74 L60.392 80 Z" fill="var(--splash-cell-fill)" opacity="0.55"/>
|
|
|
|
|
<path d="M70.784 62 L81.176 56 L81.176 68 L70.784 74 Z" fill="var(--splash-cell-fill)" opacity="0.3"/>
|
|
|
|
|
<path d="M81.176 56 L91.568 50 L91.568 62 L81.176 68 Z" fill="var(--splash-cell-fill)" opacity="0.15"/>
|
|
|
|
|
<path d="M50 86 L60.392 80 L60.392 92 L50 98 Z" fill="var(--splash-cell-fill)" opacity="0.45"/>
|
|
|
|
|
<path d="M60.392 80 L70.784 74 L70.784 86 L60.392 92 Z" fill="var(--splash-cell-fill)" opacity="0.25"/>
|
|
|
|
|
<path d="M70.784 74 L81.176 68 L81.176 80 L70.784 86 Z" fill="var(--splash-cell-fill)" opacity="0.4"/>
|
|
|
|
|
<path d="M81.176 68 L91.568 62 L91.568 74 L81.176 80 Z" fill="var(--splash-cell-fill)" opacity="0.2"/>
|
|
|
|
|
<!-- Top face - open -->
|
|
|
|
|
<path d="M50 2 L8.432 26 L50 50 L91.568 26 Z" fill="none" stroke="var(--splash-stroke)" stroke-width="2" stroke-linejoin="round"/>
|
|
|
|
|
<!-- OpenCode logo on top face -->
|
|
|
|
|
<g class="logo-pulse" transform="matrix(0.866, 0.5, -0.866, 0.5, 50, 26) scale(0.75)">
|
|
|
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M-16 -20 L16 -20 L16 20 L-16 20 Z M-8 -12 L-8 12 L8 12 L8 -12 Z" fill="var(--splash-logo-fill)"/>
|
|
|
|
|
<path d="M-8 -4 L8 -4 L8 12 L-8 12 Z" fill="var(--splash-logo-fill)" fill-opacity="0.4"/>
|
|
|
|
|
</g>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
2025-12-07 19:32:53 +02:00
|
|
|
</div>
|
|
|
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
