b5b85df2e5
- Enable Tailwind darkMode: 'class' with system preference detection - Add shared Layout component with sidebar navigation, dark mode toggle, and mobile hamburger menu - Add global CSS: focus-visible rings, smooth transitions, custom scrollbar, entrance animations - Update all authenticated pages to use Layout wrapper via App.tsx route restructure - Responsive improvements: stack headers on mobile, responsive padding, modal safe areas - Add fade-in animations for stat cards and scale-in for modals - 11 tests added for Layout component. All 430 tests pass.
28 lines
923 B
HTML
28 lines
923 B
HTML
<!doctype html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>PromptLooper</title>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script>
|
|
// Detect system dark mode preference and apply before first paint
|
|
(function () {
|
|
var d = document.documentElement;
|
|
try {
|
|
var stored = localStorage.getItem("pl-theme");
|
|
if (stored === "light") { d.classList.remove("dark"); }
|
|
else if (stored === "dark") { d.classList.add("dark"); }
|
|
else if (!window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
d.classList.remove("dark");
|
|
}
|
|
} catch (e) {
|
|
// localStorage may be unavailable — keep dark default
|
|
}
|
|
})();
|
|
</script>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|