kodi/podman-mvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat (ui): Light/Dark Theme added Complete

Browse Source
This commit is contained in:
kodi
2026-03-04 07:48:58 +01:00
parent ebefd2d80c
commit 6bf30db62c
6 changed files with 224 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/html/index.html
+25 -5
View File
@@ -48,16 +48,16 @@
<span class="navIcon">🏠</span><span class="navLabel">Dashboard</span>
</div>
<div class="tab" id="tab-containers" onclick="setTab('containers')" title="Containers">
<span class="navIcon">📦</span><span class="navLabel">Containers</span>
<span class="navIcon">📦</span><span class="navLabel">Containers</span><span class="navCount" id="countNavContainers">-</span>
</div>
<div class="tab" id="tab-networks" onclick="setTab('networks')" title="Netwerk">
<span class="navIcon">🌐</span><span class="navLabel">Netwerk</span>
<span class="navIcon">🌐</span><span class="navLabel">Netwerk</span><span class="navCount" id="countNavNetworks">-</span>
</div>
<div class="tab" id="tab-images" onclick="setTab('images')" title="Images">
<span class="navIcon">📦</span><span class="navLabel">Images</span>
<span class="navIcon">📦</span><span class="navLabel">Images</span><span class="navCount" id="countNavImages">-</span>
</div>
<div class="tab" id="tab-files" onclick="setTab('files')" title="Files">
<span class="navIcon">📁</span><span class="navLabel">Files</span>
<span class="navIcon">📁</span><span class="navLabel">Files</span><span class="navCount" id="countNavFiles">-</span>
</div>
</div>
</aside>
@@ -486,6 +486,22 @@
return `<span class="badge">${esc(s || 'unknown')}</span>`;
}
function updateNavCount(id, value) {
const el = document.getElementById(id);
if (!el) return;
el.textContent = Number.isFinite(Number(value)) ? String(value) : '-';
}
function renderStateBox(type, title, message) {
const t = type === 'error' ? 'error' : (type === 'empty' ? 'empty' : 'info');
return `
<div class="stateBox ${t}">
<div class="stateTitle">${esc(title || 'Status')}</div>
<div class="stateText">${esc(message || '')}</div>
</div>
`;
}
// ---- Modal ----
function showModal(title, content) {
document.getElementById('modalTitle').textContent = title;
@@ -522,7 +538,10 @@
document.getElementById('tab-' + tab).classList.add('active');
document.querySelectorAll('[id^="view-"]').forEach(v => v.style.display='none');
document.getElementById('view-' + tab).style.display = '';
const view = document.getElementById('view-' + tab);
view.style.display = '';
view.classList.remove('viewAnim');
requestAnimationFrame(() => view.classList.add('viewAnim'));
if (tab === 'files') {
filesRefresh();
}
@@ -610,6 +629,7 @@
const list = Array.isArray(containers) ? containers : (containers?.containers || []);
const cCount = list.length;
document.getElementById('countContainers').textContent = cCount;
updateNavCount('countNavContainers', cCount);
}
setApiState(true, 'API: OK');
setLastRefreshNow();