zink/animated_wallpaper
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add toggle for debug panel (collapse/expand)

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-07 12:14:49 +02:00
1 parent dee6134181
commit 615c40a245
1 file changed
+54 -20
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+54 -20
View File
@@ -35,6 +35,26 @@
border-bottom: 1px solid rgba(230, 223, 209, 0.3); border-bottom: 1px solid rgba(230, 223, 209, 0.3);
padding-bottom: 4px; padding-bottom: 4px;
margin-bottom: 6px; margin-bottom: 6px;
cursor: pointer;
user-select: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.debug-title-toggle {
font-size: 0.8em;
color: var(--icon);
margin-left: 8px;
}
.debug-content {
overflow: hidden;
transition: max-height 0.3s ease;
}
.debug-content.collapsed {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
} }
.debug-section { .debug-section {
font-size: 1em; font-size: 1em;
@@ -268,26 +288,28 @@
<body> <body>
<div id="vanta"></div> <div id="vanta"></div>
<div id="debug-panel"> <div id="debug-panel">
<div class="debug-title">DEBUG - Palette: Ash</div> <div class="debug-title" onclick="toggleDebugPanel()"><span>DEBUG - Palette: Ash</span><span class="debug-title-toggle" id="debug-toggle-icon">▼</span></div>
<div class="debug-row"><span class="debug-label">Time:</span> <span id="dbg-time">--</span></div> <div id="debug-content" class="debug-content">
<div class="debug-row"><span class="debug-label">Day%:</span> <span id="dbg-day">--</span></div> <div class="debug-row"><span class="debug-label">Time:</span> <span id="dbg-time">--</span></div>
<div class="debug-row"><span class="debug-label">Weather:</span> <span id="dbg-weather">--</span></div> <div class="debug-row"><span class="debug-label">Day%:</span> <span id="dbg-day">--</span></div>
<div class="debug-row"><span class="debug-label">Theme:</span> <span id="dbg-theme">--</span></div> <div class="debug-row"><span class="debug-label">Weather:</span> <span id="dbg-weather">--</span></div>
<div class="debug-row"><span class="debug-label">Speed:</span> <span id="dbg-speed">--</span></div> <div class="debug-row"><span class="debug-label">Theme:</span> <span id="dbg-theme">--</span></div>
<div class="debug-row"><span class="debug-label">Transition:</span> <span id="dbg-trans">--</span></div> <div class="debug-row"><span class="debug-label">Speed:</span> <span id="dbg-speed">--</span></div>
<div class="debug-section">Effective theme</div> <div class="debug-row"><span class="debug-label">Transition:</span> <span id="dbg-trans">--</span></div>
<div class="debug-row"><span class="libel">skyColor</span> <div class="swatch" id="dbg-t-sky"></div> <span class="hex" id="dbg-h-sky">--</span></div> <div class="debug-section">Effective theme</div>
<div class="debug-row"><span class="libel">cloudColor</span> <div class="swatch" id="dbg-t-cloud"></div> <span class="hex" id="dbg-h-cloud">--</span></div> <div class="debug-row"><span class="libel">skyColor</span> <div class="swatch" id="dbg-t-sky"></div> <span class="hex" id="dbg-h-sky">--</span></div>
<div class="debug-row"><span class="libel">lightColor</span> <div class="swatch" id="dbg-t-sunLight"></div> <span class="hex" id="dbg-h-sunLight">--</span></div> <div class="debug-row"><span class="libel">cloudColor</span> <div class="swatch" id="dbg-t-cloud"></div> <span class="hex" id="dbg-h-cloud">--</span></div>
<div class="debug-row"><span class="libel">bgColor</span> <div class="swatch" id="dbg-t-bg"></div> <span class="hex" id="dbg-h-bg">--</span></div> <div class="debug-row"><span class="libel">lightColor</span> <div class="swatch" id="dbg-t-sunLight"></div> <span class="hex" id="dbg-h-sunLight">--</span></div>
<div class="debug-section">Vanta colors</div> <div class="debug-row"><span class="libel">bgColor</span> <div class="swatch" id="dbg-t-bg"></div> <span class="hex" id="dbg-h-bg">--</span></div>
<div class="debug-row"><span class="libel">skyColor</span> <div class="swatch" id="dbg-v-sky"></div> <span class="hex" id="dbg-vh-sky">--</span></div> <div class="debug-section">Vanta colors</div>
<div class="debug-row"><span class="libel">cloudColor</span> <div class="swatch" id="dbg-v-cloud"></div> <span class="hex" id="dbg-vh-cloud">--</span></div> <div class="debug-row"><span class="libel">skyColor</span> <div class="swatch" id="dbg-v-sky"></div> <span class="hex" id="dbg-vh-sky">--</span></div>
<div class="debug-row"><span class="libel">lightColor</span> <div class="swatch" id="dbg-v-sunLight"></div> <span class="hex" id="dbg-vh-sunLight">--</span></div> <div class="debug-row"><span class="libel">cloudColor</span> <div class="swatch" id="dbg-v-cloud"></div> <span class="hex" id="dbg-vh-cloud">--</span></div>
<div class="debug-row"><span class="libel">bgColor</span> <div class="swatch" id="dbg-v-bg"></div> <span class="hex" id="dbg-vh-bg">--</span></div> <div class="debug-row"><span class="libel">lightColor</span> <div class="swatch" id="dbg-v-sunLight"></div> <span class="hex" id="dbg-vh-sunLight">--</span></div>
<div class="debug-section">Theme table</div> <div class="debug-row"><span class="libel">bgColor</span> <div class="swatch" id="dbg-v-bg"></div> <span class="hex" id="dbg-vh-bg">--</span></div>
<div id="dbg-theme-table" class="theme-table"></div> <div class="debug-section">Theme table</div>
<div id="dbg-color-table" class="theme-table"></div> <div id="dbg-theme-table" class="theme-table"></div>
<div id="dbg-color-table" class="theme-table"></div>
</div>
</div> </div>
<div id="info-panel"> <div id="info-panel">
<svg id="analog-clock" viewBox="0 0 280 280"> <svg id="analog-clock" viewBox="0 0 280 280">
@@ -1117,6 +1139,18 @@ var weatherThemes = {
return (now.getTime() - startOfDay.getTime()) / 86400000; return (now.getTime() - startOfDay.getTime()) / 86400000;
} }
function toggleDebugPanel() {
var content = document.getElementById('debug-content');
var icon = document.getElementById('debug-toggle-icon');
if (content.style.display === 'none') {
content.style.display = '';
icon.textContent = '▼';
} else {
content.style.display = 'none';
icon.textContent = '▶';
}
}
function updateDebug(t, palette, vantaColors, themeName, realDayProgress) { function updateDebug(t, palette, vantaColors, themeName, realDayProgress) {
var now = new Date(); var now = new Date();
var hh = now.getHours(), mm = now.getMinutes(), ss = now.getSeconds(); var hh = now.getHours(), mm = now.getMinutes(), ss = now.getSeconds();