2026-02-28 00:48:37 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
2026-02-28 01:27:37 +00:00
|
|
|
<title>jfx example</title>
|
2026-02-28 00:48:37 +00:00
|
|
|
<style>
|
2026-02-28 00:56:59 +00:00
|
|
|
:root {
|
|
|
|
|
--bg: #f5f5f5;
|
|
|
|
|
--bg-surface: #fff;
|
|
|
|
|
--bg-surface-alt: #fafafa;
|
|
|
|
|
--text: #111;
|
|
|
|
|
--text-secondary: #666;
|
|
|
|
|
--text-muted: #888;
|
|
|
|
|
--text-body: #444;
|
|
|
|
|
--border: #d0d0d0;
|
|
|
|
|
--border-light: #e0e0e0;
|
|
|
|
|
--accent: #4f46e5;
|
|
|
|
|
--code-bg: #1e1e2e;
|
|
|
|
|
--code-fg: #cdd6f4;
|
|
|
|
|
}
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
|
:root {
|
|
|
|
|
--bg: #1a1a2e;
|
|
|
|
|
--bg-surface: #232340;
|
|
|
|
|
--bg-surface-alt: #2a2a4a;
|
|
|
|
|
--text: #e0e0e0;
|
|
|
|
|
--text-secondary: #a0a0b0;
|
|
|
|
|
--text-muted: #808090;
|
|
|
|
|
--text-body: #c0c0d0;
|
|
|
|
|
--border: #3a3a5a;
|
|
|
|
|
--border-light: #333355;
|
|
|
|
|
--accent: #818cf8;
|
|
|
|
|
--code-bg: #11111b;
|
|
|
|
|
--code-fg: #cdd6f4;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-02-28 00:48:37 +00:00
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
2026-02-28 00:56:59 +00:00
|
|
|
body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); }
|
|
|
|
|
|
|
|
|
|
/* Shiki dual theme */
|
|
|
|
|
.shiki,
|
|
|
|
|
.shiki span { color: var(--shiki-light); background-color: var(--shiki-light-bg); }
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
|
.shiki,
|
|
|
|
|
.shiki span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Code block padding */
|
|
|
|
|
.shiki { padding: 16px; border-radius: 8px; }
|
2026-02-28 00:48:37 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="root"></div>
|
|
|
|
|
<script type="module" src="./frontend.tsx"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
