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:
parent
261a77935f
commit
b096e2aeeb
@ -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");
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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 */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user