Integrate XP.css for Windows XP aesthetic

- Add XP.css framework via CDN
- Restructure HTML with XP window components
- Use fieldsets for grouped controls
- Add classic window with title bar and status bar
- Replace dark mode with XP theme
- Update custom CSS to complement XP.css styling
- Use system colors (ButtonFace, Window, etc.)
- Add classic teal background
- Maintain all existing functionality

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-04 23:10:43 -05:00
parent 178f6fa5e5
commit bada8bdcea
3 changed files with 277 additions and 399 deletions

View File

@@ -1,42 +1,4 @@
(() => {
// Theme management
const themeToggle = document.getElementById("themeToggle");
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
function getTheme() {
const saved = localStorage.getItem("theme");
if (saved) return saved;
return prefersDark.matches ? "dark" : "light";
}
function setTheme(theme) {
document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("theme", theme);
if (themeToggle) {
themeToggle.textContent = theme === "dark" ? "☀️ Light Mode" : "🌙 Dark Mode";
}
}
function toggleTheme() {
const current = document.documentElement.getAttribute("data-theme") || "light";
setTheme(current === "dark" ? "light" : "dark");
}
// Initialize theme
setTheme(getTheme());
// Listen for theme toggle
if (themeToggle) {
themeToggle.addEventListener("click", toggleTheme);
}
// Listen for system theme changes
prefersDark.addEventListener("change", (e) => {
if (!localStorage.getItem("theme")) {
setTheme(e.matches ? "dark" : "light");
}
});
let qs = new URLSearchParams(window.location.search);
const qInput = document.getElementById("q");
const channelDropdown = document.getElementById("channelDropdown");