49 lines
1.8 KiB
HTML
49 lines
1.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en" class="dark">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<meta name="theme-color" content="#232022" />
|
||
|
|
<meta
|
||
|
|
name="description"
|
||
|
|
content="Interactive demonstration of the @jason/ui-kit design system, components, themes, product shell, and marketing blocks."
|
||
|
|
/>
|
||
|
|
<link
|
||
|
|
rel="icon"
|
||
|
|
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23232022'/%3E%3Ccircle cx='32' cy='32' r='12' fill='%23DCBB4F'/%3E%3C/svg%3E"
|
||
|
|
/>
|
||
|
|
<title>@jason/ui-kit — Interactive Demo</title>
|
||
|
|
<script>
|
||
|
|
(() => {
|
||
|
|
try {
|
||
|
|
const stored = localStorage.getItem("jason-ui-theme") || "system";
|
||
|
|
const mode =
|
||
|
|
stored === "system"
|
||
|
|
? matchMedia("(prefers-color-scheme: light)").matches
|
||
|
|
? "light"
|
||
|
|
: "dark"
|
||
|
|
: stored;
|
||
|
|
const root = document.documentElement;
|
||
|
|
root.classList.remove("light", "dark");
|
||
|
|
root.classList.add(mode);
|
||
|
|
root.style.colorScheme = mode;
|
||
|
|
document
|
||
|
|
.querySelector('meta[name="theme-color"]')
|
||
|
|
?.setAttribute("content", mode === "light" ? "#FAF8F4" : "#232022");
|
||
|
|
} catch {}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="root">
|
||
|
|
<noscript>
|
||
|
|
<main style="max-width: 40rem; margin: 4rem auto; padding: 1.5rem; font-family: system-ui, sans-serif;">
|
||
|
|
<h1>JavaScript is required</h1>
|
||
|
|
<p>This interactive UI kit demonstration uses React and needs JavaScript enabled.</p>
|
||
|
|
</main>
|
||
|
|
</noscript>
|
||
|
|
</div>
|
||
|
|
<script type="module" src="/showcase/main.tsx"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|