michael/Athena-Deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Deck and Athena Classic themes

Browse Source
This commit is contained in:
Mikei386
2026-09-29 22:43:16 +02:00
parent c2fcd5c509
commit e63a8aa76f
10 changed files with 157 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+17
View File
@@ -7,10 +7,27 @@ async function api(path,method='GET'){const r=await fetch('/api/v1/'+path,{metho
const metric=(title,value)=>`<div><small>${title}</small><strong>${value}</strong></div>`;
const bar=v=>v==null?'':`<progress max="100" value="${Number(v)}" aria-label="Auslastung"></progress>`;
const placeholders={chat:['Sprachmodelle / Chat','Modellprofile, Laufzeit und Chat','Hier werden später Modellprofile und native llama.cpp-Prozesse verwaltet.'],image:['Bildgenerierung','Worker und Aufträge','Hier entsteht später die Übersicht für Bild-Worker und deren Zustand.'],audio:['Audio','Spracheingabe und Sprachausgabe','Hier werden später getrennte Worker für Erkennung und Ausgabe eingebunden.'],services:['Weitere Dienste','Erweiterbare Dienste','Hier finden später zusätzliche Worker und ihre Schnittstellen Platz.']};
const DECK_THEME_KEY='athena-deck-theme';
const DECK_THEMES=new Set(['deck','athena-classic']);
function applyDeckTheme(theme){
const selected=DECK_THEMES.has(theme)?theme:'deck';
document.documentElement.dataset.theme=selected;
try{localStorage.setItem(DECK_THEME_KEY,selected)}catch(_){}
return selected;
}
try{applyDeckTheme(localStorage.getItem(DECK_THEME_KEY))}catch(_){applyDeckTheme('deck')}
function appearancePage(){
if(view.querySelector('#appearance-page'))return;
view.innerHTML=`<div id="appearance-page"><div class="kicker">EINSTELLUNGEN / DARSTELLUNG</div><h1>Darstellung</h1><p>Wähle die Farben für Athena Deck. Die Auswahl gilt in diesem Browser und wird sofort angewendet.</p><div class="theme-options" role="group" aria-label="Farbschema"><button type="button" class="theme-choice" data-theme-choice="deck" aria-pressed="false"><span class="theme-preview deck-preview"><i></i><i></i><i></i></span><strong>Deck Standard</strong><small>Anthrazit, Salbeigrün und helle Akzente</small></button><button type="button" class="theme-choice" data-theme-choice="athena-classic" aria-pressed="false"><span class="theme-preview classic-preview"><i></i><i></i><i></i></span><strong>Athena Classic</strong><small>Dunkelblau, Cyan und Mint wie im alten Dashboard</small></button></div></div>`;
const sync=()=>view.querySelectorAll('[data-theme-choice]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.themeChoice===document.documentElement.dataset.theme)));
view.querySelectorAll('[data-theme-choice]').forEach(b=>b.addEventListener('click',()=>{applyDeckTheme(b.dataset.themeChoice);sync()}));
sync();
}
async function refresh(){if(refreshing)return;refreshing=true;const page=location.hash.slice(1)||'dashboard';document.querySelectorAll('nav a').forEach(a=>a.classList.toggle('active',a.hash==='#'+page));try{error.textContent='';let html;
if(['video','video-runtime'].includes(page)){VideoUI.runtime();return;}
if(['chat','image','audio','stt','music','voice','video','runtime','runtimes','image-runtime','stt-runtime','tts-runtime','docker-runtime','services'].includes(page)){Studio.render(page);return;}
if(page==='access'){await accessPage();return;}
if(page==='appearance'){appearancePage();return;}
if(page==='network'){await networkPage();return;}
if(page==='dashboard'){DashboardUI.render();return;}
if(page==='home'||page==='endpoint'){await EndpointUI.render(page==='endpoint');return;