Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(waas-engine): add editable Header, Footer & Glassmorphism design controls in editor Inspector

Browse Source
This commit is contained in:
Daniel S
2026-08-08 23:52:22 +02:00
parent 4c165d8107
commit 92a75cf289
4 changed files with 148 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/pages/admin/editor.astro
View File

@@ -203,11 +203,12 @@ const { siteConfig, themeConfig } = loadWaasConfigs();
</div>
</div>
<!-- TAB 2: STIL (Layout, Typographie, Farbung & Glows) -->
<!-- TAB 2: STIL (Layout, Header, Footer & Glassmorphism) -->
<div id="tab-panel-style" class="hidden space-y-6">
<!-- Glassmorphism & Theme Styles -->
<div class="glass-panel rounded-xl p-4 space-y-4">
<h3 class="text-xs font-bold text-sky-400 uppercase tracking-wider">
Globales Farbtheme &amp; Styling
Glassmorphism &amp; Theme Presets
</h3>
<div class="space-y-3">
@@ -220,16 +221,64 @@ const { siteConfig, themeConfig } = loadWaasConfigs();
</select>
</div>
<div>
<label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Glass Backdrop Blur</label>
<select id="style-blur-select" class="w-full glass-panel bg-slate-900 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-400">
<option value="blur-sm">Subtle (blur-sm 4px)</option>
<option value="blur-md">Medium (blur-md 8px)</option>
<option value="blur-xl" selected>Ultra Glass (blur-xl 20px)</option>
<option value="blur-3xl">Max Aurora (blur-3xl 60px)</option>
</select>
</div>
<div>
<label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Glass Border Radius</label>
<select id="style-radius-select" class="w-full glass-panel bg-slate-900 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-400">
<option value="rounded-lg">Medium (12px)</option>
<option value="rounded-xl">Large (16px)</option>
<option value="rounded-xl" selected>Large (16px)</option>
<option value="rounded-2xl">Extra Large (24px)</option>
</select>
</div>
</div>
</div>
<!-- Header Bearbeiten -->
<div class="glass-panel rounded-xl p-4 space-y-4">
<h3 class="text-xs font-bold text-sky-400 uppercase tracking-wider">
Header &amp; Navigation Bearbeiten
</h3>
<div class="space-y-3">
<div>
<label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Marken-Name / Logo</label>
<input type="text" id="header-brand-name" value={siteConfig.header?.brandName || 'N&D'} class="w-full glass-panel bg-slate-900 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-400" />
</div>
<div>
<label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Marken Highlight</label>
<input type="text" id="header-brand-highlight" value={siteConfig.header?.brandHighlight || 'i-t SOLUTIONS'} class="w-full glass-panel bg-slate-900 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-400" />
</div>
<div>
<label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">CTA Button Text</label>
<input type="text" id="header-cta-text" value={siteConfig.header?.ctaText || 'Erstgespräch buchen'} class="w-full glass-panel bg-slate-900 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-400" />
</div>
</div>
</div>
<!-- Footer Bearbeiten -->
<div class="glass-panel rounded-xl p-4 space-y-4">
<h3 class="text-xs font-bold text-sky-400 uppercase tracking-wider">
Footer &amp; Reconstitution Bearbeiten
</h3>
<div class="space-y-3">
<div>
<label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Footer Beschreibung</label>
<textarea id="footer-description" class="w-full h-16 glass-panel bg-slate-900 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-400">{siteConfig.footer?.brandDescription || 'Ihr Partner für professionelles Webdesign.'}</textarea>
</div>
<div>
<label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Copyright Text</label>
<input type="text" id="footer-copyright" value={siteConfig.footer?.copyrightText || 'N&D i-t SOLUTIONS. Alle Rechte vorbehalten.'} class="w-full glass-panel bg-slate-900 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-400" />
</div>
</div>
</div>
</div>
<!-- TAB 3: ERWEITERT (Animationen, Custom CSS & Z_index) -->
@@ -495,6 +544,24 @@ const { siteConfig, themeConfig } = loadWaasConfigs();
saveBtn.disabled = true;
saveBtn.textContent = 'Wird gespeichert...';
// Collect Header Inputs
const brandName = document.getElementById('header-brand-name')?.value;
const brandHighlight = document.getElementById('header-brand-highlight')?.value;
const ctaText = document.getElementById('header-cta-text')?.value;
if (!siteConfigState.header) siteConfigState.header = {};
if (brandName !== undefined) siteConfigState.header.brandName = brandName;
if (brandHighlight !== undefined) siteConfigState.header.brandHighlight = brandHighlight;
if (ctaText !== undefined) siteConfigState.header.ctaText = ctaText;
// Collect Footer Inputs
const footerDesc = document.getElementById('footer-description')?.value;
const footerCopy = document.getElementById('footer-copyright')?.value;
if (!siteConfigState.footer) siteConfigState.footer = {};
if (footerDesc !== undefined) siteConfigState.footer.brandDescription = footerDesc;
if (footerCopy !== undefined) siteConfigState.footer.copyrightText = footerCopy;
try {
await fetch('/api/update-config', {
method: 'POST',