Add dimmed viewing mode via minimize button

- Minimize button now toggles a comfortable viewing filter
- Applies brightness(0.5) contrast(1.25) sepia(0.6)
- Smooth 0.3s transition between modes
- Persists choice in localStorage
- Creates warm, dimmed aesthetic while keeping XP theme

Click minimize to toggle between bright and dimmed modes.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
knight 2025-11-05 00:43:08 -05:00
parent 261a77935f
commit b096e2aeeb
3 changed files with 37 additions and 1 deletions

View File

@ -1,4 +1,35 @@
(() => { (() => {
// Dim mode toggle (minimize button)
const minimizeBtn = document.getElementById("minimizeBtn");
function getDimMode() {
return localStorage.getItem("dim-mode") === "true";
}
function setDimMode(enabled) {
if (enabled) {
document.body.classList.add("dimmed");
} else {
document.body.classList.remove("dimmed");
}
localStorage.setItem("dim-mode", enabled.toString());
}
function toggleDimMode() {
const current = document.body.classList.contains("dimmed");
setDimMode(!current);
}
// Initialize dim mode
if (getDimMode()) {
document.body.classList.add("dimmed");
}
// Listen for minimize button click
if (minimizeBtn) {
minimizeBtn.addEventListener("click", toggleDimMode);
}
let qs = new URLSearchParams(window.location.search); let qs = new URLSearchParams(window.location.search);
const qInput = document.getElementById("q"); const qInput = document.getElementById("q");
const channelDropdown = document.getElementById("channelDropdown"); const channelDropdown = document.getElementById("channelDropdown");

View File

@ -13,7 +13,7 @@
<div class="title-bar"> <div class="title-bar">
<div class="title-bar-text">This Little Corner — Elastic Search</div> <div class="title-bar-text">This Little Corner — Elastic Search</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button aria-label="Minimize"></button> <button id="minimizeBtn" aria-label="Minimize"></button>
<button aria-label="Maximize"></button> <button aria-label="Maximize"></button>
<button aria-label="Close"></button> <button aria-label="Close"></button>
</div> </div>

View File

@ -37,6 +37,11 @@ body {
background: teal; background: teal;
padding: 0; padding: 0;
margin: 0; margin: 0;
transition: filter 0.3s ease;
}
body.dimmed {
filter: brightness(0.5) contrast(1.25) sepia(0.6);
} }
/* Mobile responsiveness */ /* Mobile responsiveness */