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

26
src/components/Footer.astro
View File

@@ -1,5 +1,13 @@
--- ---
// src/components/Footer.astro // src/components/Footer.astro
import { loadWaasConfigs } from '../utils/configLoader';
const { siteConfig } = loadWaasConfigs();
const footer = siteConfig.footer || {
brandDescription: 'Ihr Partner für professionelles Webdesign, Website-Entwicklung und lokale SEO für Kleinbetriebe & KMU.',
copyrightText: 'N&D i-t SOLUTIONS. Alle Rechte vorbehalten.',
showLegalLinks: true
};
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
--- ---
@@ -10,10 +18,10 @@ const currentYear = new Date().getFullYear();
<!-- Brand logo/name --> <!-- Brand logo/name -->
<div> <div>
<a href="#" class="text-lg font-bold tracking-wider text-slate-900 dark:text-white"> <a href="#" class="text-lg font-bold tracking-wider text-slate-900 dark:text-white">
N&D <span class="text-brand-arcticBlue">i-t SOLUTIONS</span> {siteConfig.header?.brandName || 'N&D'} <span class="text-brand-arcticBlue">{siteConfig.header?.brandHighlight || 'i-t SOLUTIONS'}</span>
</a> </a>
<p class="mt-2 text-xs text-slate-500 dark:text-gray-500 max-w-sm"> <p class="mt-2 text-xs text-slate-500 dark:text-gray-500 max-w-sm">
Ihr Partner für professionelles Webdesign, Website-Entwicklung und lokale SEO für Kleinbetriebe & KMU. {footer.brandDescription}
</p> </p>
</div> </div>
@@ -31,13 +39,15 @@ const currentYear = new Date().getFullYear();
<!-- Bottom Copyright & Legal Links --> <!-- Bottom Copyright & Legal Links -->
<div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500 dark:text-gray-500"> <div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500 dark:text-gray-500">
<div> <div>
&copy; {currentYear} N&D i-t SOLUTIONS. Alle Rechte vorbehalten. &copy; {currentYear} {footer.copyrightText}
</div>
<div class="flex gap-6">
<a href="/privacy" class="hover:text-slate-900 dark:hover:text-white transition-colors">Datenschutz</a>
<span class="text-slate-300 dark:text-white/10">|</span>
<a href="/privacy#impressum" class="hover:text-slate-900 dark:hover:text-white transition-colors">Impressum</a>
</div> </div>
{footer.showLegalLinks !== false && (
<div class="flex gap-6">
<a href="/privacy" class="hover:text-slate-900 dark:hover:text-white transition-colors">Datenschutz</a>
<span class="text-slate-300 dark:text-white/10">|</span>
<a href="/privacy#impressum" class="hover:text-slate-900 dark:hover:text-white transition-colors">Impressum</a>
</div>
)}
</div> </div>
</div> </div>
</footer> </footer>

47
src/components/Navbar.astro
View File

@@ -1,16 +1,27 @@
--- ---
// src/components/Navbar.astro // src/components/Navbar.astro
import { FaBars, FaTimes } from 'react-icons/fa'; import { FaBars, FaTimes } from 'react-icons/fa';
import { loadWaasConfigs } from '../utils/configLoader';
const { siteConfig } = loadWaasConfigs();
const header = siteConfig.header || {
brandName: 'N&D',
brandHighlight: 'i-t SOLUTIONS',
ctaText: 'Erstgespräch buchen',
ctaLink: '#contact',
showThemeToggle: true,
glassEffect: true
};
--- ---
<header id="main-header" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 bg-white/30 dark:bg-brand-darkBg/30 backdrop-blur-xl border-b border-slate-200 dark:border-brand-darkBorder"> <header id="main-header" class={`fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 ${header.glassEffect !== false ? 'bg-white/30 dark:bg-brand-darkBg/30 backdrop-blur-xl border-b border-slate-200 dark:border-brand-darkBorder' : 'bg-slate-900 border-b border-white/10'}`}>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-14"> <div class="flex items-center justify-between h-14">
<!-- Logo --> <!-- Logo -->
<a href="#" class="flex items-center gap-2 group"> <a href="#" class="flex items-center gap-2 group">
<span class="text-lg sm:text-xl font-bold tracking-wider text-slate-900 dark:text-white select-none transition-colors duration-300"> <span class="text-lg sm:text-xl font-bold tracking-wider text-slate-900 dark:text-white select-none transition-colors duration-300">
N&D <span class="text-brand-arcticBlue">i-t SOLUTIONS</span> {header.brandName || 'N&D'} <span class="text-brand-arcticBlue">{header.brandHighlight || 'i-t SOLUTIONS'}</span>
</span> </span>
</a> </a>
@@ -23,22 +34,26 @@ import { FaBars, FaTimes } from 'react-icons/fa';
<!-- Right controls --> <!-- Right controls -->
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<!-- Theme Toggle Button (44x44px target) --> {header.showThemeToggle !== false && (
<button id="theme-toggle" class="w-11 h-11 flex items-center justify-center rounded-lg border border-slate-200 dark:border-brand-darkBorder bg-white/50 dark:bg-zinc-900/50 text-slate-700 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label="Farbschema wechseln"> <!-- Theme Toggle Button (44x44px target) -->
<!-- Moon Icon --> <button id="theme-toggle" class="w-11 h-11 flex items-center justify-center rounded-lg border border-slate-200 dark:border-brand-darkBorder bg-white/50 dark:bg-zinc-900/50 text-slate-700 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label="Farbschema wechseln">
<svg id="theme-toggle-dark-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <!-- Moon Icon -->
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> <svg id="theme-toggle-dark-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
</svg> <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
<!-- Sun Icon --> </svg>
<svg id="theme-toggle-light-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <!-- Sun Icon -->
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.46 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path> <svg id="theme-toggle-light-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
</svg> <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.46 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
</button> </svg>
</button>
)}
<!-- CTA button --> <!-- CTA button -->
<a href="#contact" class="hidden sm:inline-flex items-center justify-center px-4 py-2 text-xs font-semibold tracking-wider text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder rounded bg-white/50 dark:bg-zinc-900/50 hover:border-brand-arcticBlue hover:text-brand-arcticBlue transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label="Erstgespräch buchen"> {header.ctaText && (
Erstgespräch buchen <a href={header.ctaLink || "#contact"} class="hidden sm:inline-flex items-center justify-center px-4 py-2 text-xs font-semibold tracking-wider text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder rounded bg-white/50 dark:bg-zinc-900/50 hover:border-brand-arcticBlue hover:text-brand-arcticBlue transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label={header.ctaText}>
</a> {header.ctaText}
</a>
)}
<!-- Mobile menu button (44x44px target) --> <!-- Mobile menu button (44x44px target) -->
<button id="mobile-menu-btn" class="md:hidden w-11 h-11 flex items-center justify-center rounded bg-white dark:bg-zinc-900 text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder hover:bg-slate-50 dark:hover:bg-zinc-800 transition-all focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label="Menü öffnen"> <button id="mobile-menu-btn" class="md:hidden w-11 h-11 flex items-center justify-center rounded bg-white dark:bg-zinc-900 text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder hover:bg-slate-50 dark:hover:bg-zinc-800 transition-all focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label="Menü öffnen">

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

@@ -203,11 +203,12 @@ const { siteConfig, themeConfig } = loadWaasConfigs();
</div> </div>
</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"> <div id="tab-panel-style" class="hidden space-y-6">
<!-- Glassmorphism & Theme Styles -->
<div class="glass-panel rounded-xl p-4 space-y-4"> <div class="glass-panel rounded-xl p-4 space-y-4">
<h3 class="text-xs font-bold text-sky-400 uppercase tracking-wider"> <h3 class="text-xs font-bold text-sky-400 uppercase tracking-wider">
Globales Farbtheme &amp; Styling Glassmorphism &amp; Theme Presets
</h3> </h3>
<div class="space-y-3"> <div class="space-y-3">
@@ -220,16 +221,64 @@ const { siteConfig, themeConfig } = loadWaasConfigs();
</select> </select>
</div> </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> <div>
<label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Glass Border Radius</label> <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"> <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-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> <option value="rounded-2xl">Extra Large (24px)</option>
</select> </select>
</div> </div>
</div> </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> </div>
<!-- TAB 3: ERWEITERT (Animationen, Custom CSS & Z_index) --> <!-- TAB 3: ERWEITERT (Animationen, Custom CSS & Z_index) -->
@@ -495,6 +544,24 @@ const { siteConfig, themeConfig } = loadWaasConfigs();
saveBtn.disabled = true; saveBtn.disabled = true;
saveBtn.textContent = 'Wird gespeichert...'; 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 { try {
await fetch('/api/update-config', { await fetch('/api/update-config', {
method: 'POST', method: 'POST',

29
src/utils/configLoader.ts
View File

@@ -24,6 +24,19 @@ export interface SectionConfig {
export interface SiteConfig { export interface SiteConfig {
siteName: string; siteName: string;
metaDescription: string; metaDescription: string;
header?: {
brandName?: string;
brandHighlight?: string;
ctaText?: string;
ctaLink?: string;
showThemeToggle?: boolean;
glassEffect?: boolean;
};
footer?: {
brandDescription?: string;
copyrightText?: string;
showLegalLinks?: boolean;
};
hero: { hero: {
badge: string; badge: string;
title: string; title: string;
@@ -59,6 +72,9 @@ export interface SiteConfig {
export interface ThemeConfig { export interface ThemeConfig {
activePreset: string; activePreset: string;
glassBlur?: string; // 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
glassOpacity?: number; // 0.1 to 0.9
glassBorderRadius?: string; // 'rounded-lg' | 'rounded-xl' | 'rounded-2xl'
customColors?: { customColors?: {
bg?: string; bg?: string;
accent?: string; accent?: string;
@@ -79,6 +95,19 @@ export interface SmtpConfig {
export const FALLBACK_SITE_CONFIG: SiteConfig = { export const FALLBACK_SITE_CONFIG: SiteConfig = {
siteName: 'N&D IT Solutions', siteName: 'N&D IT Solutions',
metaDescription: 'High-Performance Webdesign & Digital Solutions - 100% DSGVO-konform.', metaDescription: 'High-Performance Webdesign & Digital Solutions - 100% DSGVO-konform.',
header: {
brandName: 'N&D',
brandHighlight: 'i-t SOLUTIONS',
ctaText: 'Erstgespräch buchen',
ctaLink: '#contact',
showThemeToggle: true,
glassEffect: true
},
footer: {
brandDescription: 'Ihr Partner für professionelles Webdesign, Website-Entwicklung und lokale SEO für Kleinbetriebe & KMU.',
copyrightText: 'N&D i-t SOLUTIONS. Alle Rechte vorbehalten.',
showLegalLinks: true
},
hero: { hero: {
badge: 'š Waas Enterprise Baukastensystem', badge: 'š Waas Enterprise Baukastensystem',
title: 'Maßgeschneiderte Webseiten. Digital im Griff.', title: 'Maßgeschneiderte Webseiten. Digital im Griff.',