diff --git a/.gitignore b/.gitignore index c2658d7..7021b89 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules/ +.claude/ diff --git a/README.md b/README.md index 76ba56d..059aee4 100644 --- a/README.md +++ b/README.md @@ -7,19 +7,45 @@ Technik: reines HTML, CSS und JavaScript ohne Frameworks. ``` Tischlerei-Staffenberger/ -├── index.html # Startseite (Landing Page) -├── pictures.html # Bildergalerie mit Filter -├── shop.html # Kleiner Shop (Anfragen per E-Mail) -├── impressum.html # Impressum mit Platzhalterdaten +├── index.html # Generiert von scripts/build.js – nicht direkt bearbeiten +├── pictures.html # (dito) +├── shop.html # (dito) +├── impressum.html # (dito) +├── templates/ # Editierbare Quelldateien der obigen Seiten +├── partials/ # header.html / footer.html, in alle Seiten eingebunden +├── shop-item-template.html # Vorlage für einzelne Shop-Artikel (manuell kopieren) ├── README.md ├── css/ │ └── style.css # Ein zentrales Stylesheet ├── js/ -│ └── script.js # Navigation, Galerie-Filter, Shop-Anfragen +│ └── script.js # Navigation, Galerie-Filter, Lightbox, Shop-Anfragen +├── scripts/ +│ ├── build.js # Baut templates/ + partials/ zu den Root-HTML-Dateien +│ └── optimize-images.js # Erzeugt WebP/JPEG-Varianten aus images/fotowebsite/ └── images/ - └── .gitkeep # Ordner für eigene Bilder (optional) + ├── fotowebsite/ # Original-Fotos (Rohmaterial, unkomprimiert) + └── optimized/ # Generierte WebP/JPEG-Varianten (von optimize-images.js) ``` +### Seiten bearbeiten (Templates + Build) + +Header und Footer sind identisch auf allen Seiten und liegen daher nur einmal in +`partials/header.html` bzw. `partials/footer.html`. Die eigentlichen Seiteninhalte +liegen als Quelldateien in `templates/` und enthalten an der Stelle von Header/Footer +nur eine Markierung wie ``. + +**Wichtig:** `index.html`, `pictures.html`, `shop.html` und `impressum.html` im +Hauptverzeichnis sind generierte Dateien – Änderungen daran gehen beim nächsten Build +verloren. Bitte immer in `templates/` bzw. `partials/` bearbeiten, danach: + +```bash +npm run build +``` + +Das schreibt die fertigen, statischen HTML-Dateien ins Hauptverzeichnis. Diese +generierten Dateien werden weiterhin mit committed – der Webhost braucht keinen +eigenen Build-Schritt, es wird nach wie vor nur reines HTML/CSS/JS ausgeliefert. + ## Lokal ausführen Die Seite besteht nur aus statischen Dateien. Sie können sie so starten: @@ -57,9 +83,9 @@ Von dort aus funktionieren alle Links, Schriftarten und Platzhalter-Bilder. ## Anpassungen -- **Impressum & Kontakt:** In `impressum.html` und im Footer aller Seiten die Platzhalterdaten (Name, Adresse, Telefon, E-Mail, USt-ID) durch echte Angaben ersetzen. -- **Shop-Anfragen:** In `js/script.js` die E-Mail-Adresse in der Zeile mit `mailto:` durch Ihre echte Adresse ersetzen. -- **Bilder:** Aktuell werden Platzhalter von [picsum.photos](https://picsum.photos) genutzt. Eigene Fotos in den Ordner `images/` legen und in `pictures.html` bzw. `shop.html` die `src`-Pfade anpassen (z.B. `images/kuche-1.jpg`). +- **Impressum & Kontakt:** In `templates/impressum.html` und `partials/footer.html` die Angaben (Name, Adresse, Telefon, E-Mail, UID-Nummer) pflegen, danach `npm run build`. +- **Shop-Anfragen:** In `js/script.js` die E-Mail-Adresse in der Zeile mit `mailto:` anpassen. +- **Bilder:** Eigene Fotos nach Kategorie in `images/fotowebsite/{kitchen,outdoor,custom}/` ablegen, dann `npm run optimize-images` ausführen, um die WebP/JPEG-Varianten in `images/optimized/` zu erzeugen. Anschließend in `templates/pictures.html` das neue `
`-Element ergänzen (nach vorhandenem Muster kopieren) und `npm run build` ausführen. ## Seitenüberblick diff --git a/css/style.css b/css/style.css index 361e5fd..de49f13 100644 --- a/css/style.css +++ b/css/style.css @@ -1,720 +1,720 @@ -/* ============================================ - Tischlerei Staffenberger - Main Stylesheet - Traditional, warm, responsive design - ============================================ */ - -/* --- Google Fonts --- */ -@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap'); - -/* --- CSS Custom Properties --- */ -:root { - /* Warm wood & earth tones */ - --color-wood-dark: #3d2914; - --color-wood-medium: #5c4033; - --color-wood-light: #8b7355; - --color-beige: #e8dfd4; - --color-beige-light: #f5f0e8; - --color-cream: #faf8f5; - /* Accent */ - --color-accent: #2d4a3e; - --color-accent-hover: #3d5a4e; - /* Neutrals */ - --color-text: #2c2419; - --color-text-muted: #5a5248; - --color-border: #d4c9bc; - /* Typography */ - --font-heading: 'Cormorant Garamond', Georgia, serif; - --font-body: 'Source Sans 3', 'Segoe UI', sans-serif; - /* Spacing & layout */ - --max-width: 960px; - --spacing-xs: 0.5rem; - --spacing-sm: 1rem; - --spacing-md: 1.5rem; - --spacing-lg: 2rem; - --spacing-xl: 3rem; - --radius: 4px; - --shadow: 0 2px 8px rgba(61, 41, 20, 0.08); -} - -/* --- Reset & Base --- */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -body { - margin: 0; - font-family: var(--font-body); - font-size: 1rem; - line-height: 1.6; - color: var(--color-text); - background-color: var(--color-cream); -} - -img { - max-width: 100%; - height: auto; - display: block; -} - -a { - color: var(--color-accent); - text-decoration: none; -} - -a:hover { - color: var(--color-accent-hover); - text-decoration: underline; -} - -/* --- Layout wrapper --- */ -.layout { - max-width: var(--max-width); - margin: 0 auto; - padding: 0 var(--spacing-md); -} - -/* ============================================ - Header & Hero Banner (widescreen image) - ============================================ */ -.site-header { - position: relative; - color: var(--color-beige); - border-bottom: 3px solid var(--color-wood-light); -} - -/* Full-width hero image container; fixed aspect/height for responsive look */ -.hero-banner { - position: relative; - width: 100%; - min-height: 40vh; - max-height: 60vh; - height: 50vh; - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -/* Background image: carpentry/woodworking – optimized WebP with JPEG fallback */ -.hero-banner .hero-image { - position: absolute; - inset: 0; - background-image: url('../images/optimized/banner-1920w.jpg'); - background-image: image-set( - url('../images/optimized/banner-1920w.webp') type('image/webp'), - url('../images/optimized/banner-1920w.jpg') type('image/jpeg') - ); - background-size: cover; - background-position: center; - background-repeat: no-repeat; -} - -@media (max-width: 640px) { - .hero-banner .hero-image { - background-image: url('../images/optimized/banner-800w.jpg'); - background-image: image-set( - url('../images/optimized/banner-800w.webp') type('image/webp'), - url('../images/optimized/banner-800w.jpg') type('image/jpeg') - ); - } -} - -/* Dark overlay so title and nav stay readable */ -.hero-banner .hero-overlay { - position: absolute; - inset: 0; - background: rgba(45, 33, 20, 0.5); - pointer-events: none; -} - -/* Logo above title in hero banner */ -.hero-logo { - width: clamp(60px, 9vw, 90px); - height: auto; - margin: 0 auto var(--spacing-sm); - filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4)); -} - -/* Centered title and subtitle on top of the image */ -.hero-text { - position: relative; - z-index: 1; - text-align: center; - padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md); - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; -} - -.hero-text h1 { - margin: 0; - font-family: var(--font-heading); - font-size: clamp(1.75rem, 4vw, 2.5rem); - font-weight: 700; - letter-spacing: 0.02em; - color: var(--color-beige-light); - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); -} - -.hero-text .hero-subtitle { - margin: var(--spacing-xs) 0 0; - font-size: clamp(0.9rem, 2vw, 1.05rem); - color: var(--color-beige); - opacity: 0.95; - font-weight: 400; -} - -/* Main Navigation at bottom of banner */ -.hero-banner .main-nav { - position: relative; - z-index: 1; - margin-top: 0; -} - -.main-nav ul { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0; - border-top: 1px solid rgba(232, 223, 212, 0.25); - background: rgba(45, 33, 20, 0.4); -} - -.main-nav li { - margin: 0; -} - -.main-nav a { - display: block; - padding: var(--spacing-sm) var(--spacing-md); - color: var(--color-beige); - text-decoration: none; - font-weight: 500; - transition: background-color 0.2s ease, color 0.2s ease; -} - -.main-nav a:hover { - background-color: rgba(255, 255, 255, 0.1); - color: var(--color-beige-light); - text-decoration: none; -} - -.main-nav a.active { - background-color: var(--color-accent); - color: var(--color-beige-light); -} - -/* ============================================ - Main content area - ============================================ */ -main { - padding: var(--spacing-xl) 0; - min-height: 50vh; -} - -main .layout { - padding: 0 var(--spacing-md); -} - -/* --- Typography in content --- */ -h2 { - font-family: var(--font-heading); - font-size: clamp(1.5rem, 3vw, 2rem); - font-weight: 600; - color: var(--color-wood-dark); - margin: 0 0 var(--spacing-md); - border-bottom: 2px solid var(--color-border); - padding-bottom: var(--spacing-xs); -} - -h3 { - font-family: var(--font-heading); - font-size: 1.25rem; - font-weight: 600; - color: var(--color-wood-medium); - margin: 0 0 var(--spacing-sm); -} - -/* ============================================ - Landing page sections - ============================================ */ -.hero { - text-align: center; - padding: var(--spacing-lg) 0; - background: var(--color-beige-light); - border-radius: var(--radius); - margin-bottom: var(--spacing-xl); - border: 1px solid var(--color-border); -} - -.hero h2 { - border: none; - margin-bottom: var(--spacing-sm); -} - -.hero p { - margin: 0; - max-width: 36em; - margin-left: auto; - margin-right: auto; - color: var(--color-text-muted); -} - -.section { - margin-bottom: var(--spacing-xl); -} - -.section p { - margin: 0 0 var(--spacing-sm); - color: var(--color-text-muted); -} - -/* --- Services grid --- */ -.services-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: var(--spacing-lg); - margin-top: var(--spacing-md); -} - -.service-card { - background: var(--color-beige-light); - border: 1px solid var(--color-border); - border-radius: var(--radius); - padding: var(--spacing-lg); - transition: box-shadow 0.2s ease; -} - -.service-card:hover { - box-shadow: var(--shadow); -} - -.service-card h3 { - margin-top: 0; -} - -/* --- CTA --- */ -.cta-section { - text-align: center; - padding: var(--spacing-xl) 0; -} - -.btn { - display: inline-block; - padding: var(--spacing-sm) var(--spacing-lg); - font-family: var(--font-body); - font-size: 1rem; - font-weight: 600; - color: var(--color-beige-light); - background-color: var(--color-accent); - border: none; - border-radius: var(--radius); - cursor: pointer; - text-decoration: none; - transition: background-color 0.2s ease; -} - -.btn:hover { - background-color: var(--color-accent-hover); - text-decoration: none; - color: var(--color-beige-light); -} - -/* ============================================ - Pictures / Gallery page - ============================================ */ -.gallery-header { - margin-bottom: var(--spacing-lg); -} - -.gallery-filters { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-sm); - margin-bottom: var(--spacing-lg); - justify-content: center; -} - -.gallery-filters button { - padding: var(--spacing-xs) var(--spacing-md); - font-family: var(--font-body); - font-size: 0.95rem; - font-weight: 500; - color: var(--color-wood-medium); - background: var(--color-beige-light); - border: 1px solid var(--color-border); - border-radius: var(--radius); - cursor: pointer; - transition: background-color 0.2s ease, color 0.2s ease; -} - -.gallery-filters button:hover, -.gallery-filters button.active { - background: var(--color-accent); - color: var(--color-beige-light); - border-color: var(--color-accent); -} - -.gallery-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: var(--spacing-md); -} - -.gallery-item { - border-radius: var(--radius); - overflow: hidden; - border: 1px solid var(--color-border); - background: var(--color-beige-light); -} - -.gallery-item img { - width: 100%; - aspect-ratio: 4/3; - object-fit: cover; -} - -.gallery-item figcaption { - display: none; /* Hide gallery item captions (file names/descriptions) */ - padding: var(--spacing-sm); - font-size: 0.9rem; - color: var(--color-text-muted); - text-align: center; -} - -/* Clickable gallery image (cursor + no drag) */ -.gallery-item .gallery-image-link { - display: block; - cursor: pointer; - line-height: 0; -} - -.gallery-item .gallery-image-link img { - pointer-events: none; -} - -/* ============================================ - Lightbox / Modal (Bilder page) - ============================================ */ -.lightbox { - display: none; - position: fixed; - inset: 0; - z-index: 1000; - align-items: center; - justify-content: center; - padding: var(--spacing-md); - background: rgba(0, 0, 0, 0.85); - opacity: 0; - transition: opacity 0.2s ease; -} - -.lightbox.is-open { - display: flex; - opacity: 1; -} - -.lightbox-backdrop { - position: absolute; - inset: 0; - cursor: pointer; -} - -.lightbox-content { - position: relative; - z-index: 1; - max-width: 90vw; - max-height: 85vh; - display: flex; - align-items: center; - justify-content: center; -} - -.lightbox-content img { - max-width: 100%; - max-height: 85vh; - width: auto; - height: auto; - object-fit: contain; - border-radius: var(--radius); - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); -} - -/* Prev / Next navigation buttons */ -.lightbox-prev, -.lightbox-next { - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: 2; - width: 3rem; - height: 3rem; - padding: 0; - font-size: 2.5rem; - line-height: 1; - color: var(--color-beige); - background: rgba(45, 33, 20, 0.55); - border: 1px solid rgba(232, 223, 212, 0.25); - border-radius: var(--radius); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s ease; - user-select: none; -} - -.lightbox-prev:hover, -.lightbox-next:hover { - background: var(--color-accent); -} - -.lightbox-prev { left: var(--spacing-sm); } -.lightbox-next { right: var(--spacing-sm); } - -.lightbox-prev[hidden], -.lightbox-next[hidden] { display: none; } - -/* Close button (X) */ -.lightbox-close { - position: absolute; - top: -2.5rem; - right: 0; - width: 2.25rem; - height: 2.25rem; - padding: 0; - font-size: 1.5rem; - line-height: 1; - color: var(--color-beige); - background: var(--color-wood-medium); - border: 1px solid var(--color-border); - border-radius: var(--radius); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s ease; -} - -.lightbox-close:hover { - background: var(--color-accent); - color: var(--color-beige-light); -} - -/* ============================================ - Shop page - ============================================ */ -.shop-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); - gap: var(--spacing-lg); -} - -.shop-empty-message { - margin: var(--spacing-lg) 0 0; - text-align: center; - color: var(--color-text-muted); - font-size: 1.05rem; -} - -.product-card { - background: var(--color-beige-light); - border: 1px solid var(--color-border); - border-radius: var(--radius); - overflow: hidden; - display: flex; - flex-direction: column; - transition: box-shadow 0.2s ease; -} - -.product-card:hover { - box-shadow: var(--shadow); -} - -.product-card .product-image { - aspect-ratio: 1; - object-fit: cover; - width: 100%; - background: var(--color-beige); -} - -.product-card .product-body { - padding: var(--spacing-md); - flex: 1; - display: flex; - flex-direction: column; -} - -.product-card h3 { - margin: 0 0 var(--spacing-xs); - font-size: 1.15rem; -} - -.product-card .product-desc { - font-size: 0.9rem; - color: var(--color-text-muted); - margin: 0 0 var(--spacing-sm); - flex: 1; -} - -.product-card .product-price { - font-weight: 600; - color: var(--color-wood-dark); - margin-bottom: var(--spacing-sm); -} - -.product-card .btn { - margin-top: auto; - text-align: center; -} - -/* ============================================ - Impressum page - ============================================ */ -.impressum-content { - max-width: 640px; -} - -.impressum-content section { - margin-bottom: var(--spacing-lg); -} - -.impressum-content h2 { - font-size: 1.35rem; - margin-bottom: var(--spacing-sm); -} - -.impressum-content p, -.impressum-content address { - margin: 0 0 var(--spacing-sm); - color: var(--color-text-muted); - font-style: normal; -} - -.impressum-content address { - line-height: 1.7; -} - -/* ============================================ - Footer - ============================================ */ -.site-footer { - background: var(--color-wood-medium); - color: var(--color-beige); - padding: var(--spacing-lg) var(--spacing-md); - margin-top: auto; -} - -.site-footer .layout { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - gap: var(--spacing-md); -} - -.site-footer a { - color: var(--color-beige); -} - -.site-footer a:hover { - color: var(--color-beige-light); - text-decoration: underline; -} - -.footer-contact { - font-size: 0.95rem; -} - -.footer-logo { - width: 48px; - height: auto; - margin-bottom: var(--spacing-xs); - opacity: 0.8; -} - -.footer-contact p { - margin: 0; -} - -.footer-links { - display: flex; - gap: var(--spacing-md); -} - -.footer-links a { - text-decoration: none; -} - -.footer-links a:hover { - text-decoration: underline; -} - -/* ============================================ - Page title (inner pages) - ============================================ */ -.page-title { - font-family: var(--font-heading); - font-size: clamp(1.5rem, 3vw, 2rem); - color: var(--color-wood-dark); - margin: 0 0 var(--spacing-lg); - border-bottom: 2px solid var(--color-border); - padding-bottom: var(--spacing-sm); -} - -/* ============================================ - Responsive adjustments - ============================================ */ -@media (max-width: 640px) { - .hero-banner { - min-height: 35vh; - max-height: 55vh; - height: 45vh; - } - - .hero-text { - padding: var(--spacing-md); - } - - - .main-nav ul { - flex-direction: column; - } - - .main-nav a { - text-align: center; - border-bottom: 1px solid rgba(232, 223, 212, 0.15); - } - - .lightbox-close { - top: var(--spacing-sm); - right: var(--spacing-sm); - } - - .site-footer .layout { - flex-direction: column; - text-align: center; - } - - .footer-links { - justify-content: center; - } - - .gallery-grid { - grid-template-columns: 1fr; - } - - .shop-grid { - grid-template-columns: 1fr; - } -} +/* ============================================ + Tischlerei Staffenberger - Main Stylesheet + Traditional, warm, responsive design + ============================================ */ + +/* --- Google Fonts --- */ +@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap'); + +/* --- CSS Custom Properties --- */ +:root { + /* Warm wood & earth tones */ + --color-wood-dark: #3d2914; + --color-wood-medium: #5c4033; + --color-wood-light: #8b7355; + --color-beige: #e8dfd4; + --color-beige-light: #f5f0e8; + --color-cream: #faf8f5; + /* Accent */ + --color-accent: #2d4a3e; + --color-accent-hover: #3d5a4e; + /* Neutrals */ + --color-text: #2c2419; + --color-text-muted: #5a5248; + --color-border: #d4c9bc; + /* Typography */ + --font-heading: 'Cormorant Garamond', Georgia, serif; + --font-body: 'Source Sans 3', 'Segoe UI', sans-serif; + /* Spacing & layout */ + --max-width: 960px; + --spacing-xs: 0.5rem; + --spacing-sm: 1rem; + --spacing-md: 1.5rem; + --spacing-lg: 2rem; + --spacing-xl: 3rem; + --radius: 4px; + --shadow: 0 2px 8px rgba(61, 41, 20, 0.08); +} + +/* --- Reset & Base --- */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + font-family: var(--font-body); + font-size: 1rem; + line-height: 1.6; + color: var(--color-text); + background-color: var(--color-cream); +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +a { + color: var(--color-accent); + text-decoration: none; +} + +a:hover { + color: var(--color-accent-hover); + text-decoration: underline; +} + +/* --- Layout wrapper --- */ +.layout { + max-width: var(--max-width); + margin: 0 auto; + padding: 0 var(--spacing-md); +} + +/* ============================================ + Header & Hero Banner (widescreen image) + ============================================ */ +.site-header { + position: relative; + color: var(--color-beige); + border-bottom: 3px solid var(--color-wood-light); +} + +/* Full-width hero image container; fixed aspect/height for responsive look */ +.hero-banner { + position: relative; + width: 100%; + min-height: 40vh; + max-height: 60vh; + height: 50vh; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* Background image: carpentry/woodworking – optimized WebP with JPEG fallback */ +.hero-banner .hero-image { + position: absolute; + inset: 0; + background-image: url('../images/optimized/banner-1920w.jpg'); + background-image: image-set( + url('../images/optimized/banner-1920w.webp') type('image/webp'), + url('../images/optimized/banner-1920w.jpg') type('image/jpeg') + ); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +@media (max-width: 640px) { + .hero-banner .hero-image { + background-image: url('../images/optimized/banner-800w.jpg'); + background-image: image-set( + url('../images/optimized/banner-800w.webp') type('image/webp'), + url('../images/optimized/banner-800w.jpg') type('image/jpeg') + ); + } +} + +/* Dark overlay so title and nav stay readable */ +.hero-banner .hero-overlay { + position: absolute; + inset: 0; + background: rgba(45, 33, 20, 0.5); + pointer-events: none; +} + +/* Logo above title in hero banner */ +.hero-logo { + width: clamp(60px, 9vw, 90px); + height: auto; + margin: 0 auto var(--spacing-sm); + filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4)); +} + +/* Centered title and subtitle on top of the image */ +.hero-text { + position: relative; + z-index: 1; + text-align: center; + padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md); + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; +} + +.hero-text h1 { + margin: 0; + font-family: var(--font-heading); + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: 700; + letter-spacing: 0.02em; + color: var(--color-beige-light); + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.hero-text .hero-subtitle { + margin: var(--spacing-xs) 0 0; + font-size: clamp(0.9rem, 2vw, 1.05rem); + color: var(--color-beige); + opacity: 0.95; + font-weight: 400; +} + +/* Main Navigation at bottom of banner */ +.hero-banner .main-nav { + position: relative; + z-index: 1; + margin-top: 0; +} + +.main-nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0; + border-top: 1px solid rgba(232, 223, 212, 0.25); + background: rgba(45, 33, 20, 0.4); +} + +.main-nav li { + margin: 0; +} + +.main-nav a { + display: block; + padding: var(--spacing-sm) var(--spacing-md); + color: var(--color-beige); + text-decoration: none; + font-weight: 500; + transition: background-color 0.2s ease, color 0.2s ease; +} + +.main-nav a:hover { + background-color: rgba(255, 255, 255, 0.1); + color: var(--color-beige-light); + text-decoration: none; +} + +.main-nav a.active { + background-color: var(--color-accent); + color: var(--color-beige-light); +} + +/* ============================================ + Main content area + ============================================ */ +main { + padding: var(--spacing-xl) 0; + min-height: 50vh; +} + +main .layout { + padding: 0 var(--spacing-md); +} + +/* --- Typography in content --- */ +h2 { + font-family: var(--font-heading); + font-size: clamp(1.5rem, 3vw, 2rem); + font-weight: 600; + color: var(--color-wood-dark); + margin: 0 0 var(--spacing-md); + border-bottom: 2px solid var(--color-border); + padding-bottom: var(--spacing-xs); +} + +h3 { + font-family: var(--font-heading); + font-size: 1.25rem; + font-weight: 600; + color: var(--color-wood-medium); + margin: 0 0 var(--spacing-sm); +} + +/* ============================================ + Landing page sections + ============================================ */ +.hero { + text-align: center; + padding: var(--spacing-lg) 0; + background: var(--color-beige-light); + border-radius: var(--radius); + margin-bottom: var(--spacing-xl); + border: 1px solid var(--color-border); +} + +.hero h2 { + border: none; + margin-bottom: var(--spacing-sm); +} + +.hero p { + margin: 0; + max-width: 36em; + margin-left: auto; + margin-right: auto; + color: var(--color-text-muted); +} + +.section { + margin-bottom: var(--spacing-xl); +} + +.section p { + margin: 0 0 var(--spacing-sm); + color: var(--color-text-muted); +} + +/* --- Services grid --- */ +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: var(--spacing-lg); + margin-top: var(--spacing-md); +} + +.service-card { + background: var(--color-beige-light); + border: 1px solid var(--color-border); + border-radius: var(--radius); + padding: var(--spacing-lg); + transition: box-shadow 0.2s ease; +} + +.service-card:hover { + box-shadow: var(--shadow); +} + +.service-card h3 { + margin-top: 0; +} + +/* --- CTA --- */ +.cta-section { + text-align: center; + padding: var(--spacing-xl) 0; +} + +.btn { + display: inline-block; + padding: var(--spacing-sm) var(--spacing-lg); + font-family: var(--font-body); + font-size: 1rem; + font-weight: 600; + color: var(--color-beige-light); + background-color: var(--color-accent); + border: none; + border-radius: var(--radius); + cursor: pointer; + text-decoration: none; + transition: background-color 0.2s ease; +} + +.btn:hover { + background-color: var(--color-accent-hover); + text-decoration: none; + color: var(--color-beige-light); +} + +/* ============================================ + Pictures / Gallery page + ============================================ */ +.gallery-header { + margin-bottom: var(--spacing-lg); +} + +.gallery-filters { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-sm); + margin-bottom: var(--spacing-lg); + justify-content: center; +} + +.gallery-filters button { + padding: var(--spacing-xs) var(--spacing-md); + font-family: var(--font-body); + font-size: 0.95rem; + font-weight: 500; + color: var(--color-wood-medium); + background: var(--color-beige-light); + border: 1px solid var(--color-border); + border-radius: var(--radius); + cursor: pointer; + transition: background-color 0.2s ease, color 0.2s ease; +} + +.gallery-filters button:hover, +.gallery-filters button.active { + background: var(--color-accent); + color: var(--color-beige-light); + border-color: var(--color-accent); +} + +.gallery-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: var(--spacing-md); +} + +.gallery-item { + border-radius: var(--radius); + overflow: hidden; + border: 1px solid var(--color-border); + background: var(--color-beige-light); +} + +.gallery-item img { + width: 100%; + aspect-ratio: 4/3; + object-fit: cover; +} + +.gallery-item figcaption { + display: none; /* Hide gallery item captions (file names/descriptions) */ + padding: var(--spacing-sm); + font-size: 0.9rem; + color: var(--color-text-muted); + text-align: center; +} + +/* Clickable gallery image (cursor + no drag) */ +.gallery-item .gallery-image-link { + display: block; + cursor: pointer; + line-height: 0; +} + +.gallery-item .gallery-image-link img { + pointer-events: none; +} + +/* ============================================ + Lightbox / Modal (Bilder page) + ============================================ */ +.lightbox { + display: none; + position: fixed; + inset: 0; + z-index: 1000; + align-items: center; + justify-content: center; + padding: var(--spacing-md); + background: rgba(0, 0, 0, 0.85); + opacity: 0; + transition: opacity 0.2s ease; +} + +.lightbox.is-open { + display: flex; + opacity: 1; +} + +.lightbox-backdrop { + position: absolute; + inset: 0; + cursor: pointer; +} + +.lightbox-content { + position: relative; + z-index: 1; + max-width: 90vw; + max-height: 85vh; + display: flex; + align-items: center; + justify-content: center; +} + +.lightbox-content img { + max-width: 100%; + max-height: 85vh; + width: auto; + height: auto; + object-fit: contain; + border-radius: var(--radius); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); +} + +/* Prev / Next navigation buttons */ +.lightbox-prev, +.lightbox-next { + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 2; + width: 3rem; + height: 3rem; + padding: 0; + font-size: 2.5rem; + line-height: 1; + color: var(--color-beige); + background: rgba(45, 33, 20, 0.55); + border: 1px solid rgba(232, 223, 212, 0.25); + border-radius: var(--radius); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.2s ease; + user-select: none; +} + +.lightbox-prev:hover, +.lightbox-next:hover { + background: var(--color-accent); +} + +.lightbox-prev { left: var(--spacing-sm); } +.lightbox-next { right: var(--spacing-sm); } + +.lightbox-prev[hidden], +.lightbox-next[hidden] { display: none; } + +/* Close button (X) */ +.lightbox-close { + position: absolute; + top: -2.5rem; + right: 0; + width: 2.25rem; + height: 2.25rem; + padding: 0; + font-size: 1.5rem; + line-height: 1; + color: var(--color-beige); + background: var(--color-wood-medium); + border: 1px solid var(--color-border); + border-radius: var(--radius); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.2s ease; +} + +.lightbox-close:hover { + background: var(--color-accent); + color: var(--color-beige-light); +} + +/* ============================================ + Shop page + ============================================ */ +.shop-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: var(--spacing-lg); +} + +.shop-empty-message { + margin: var(--spacing-lg) 0 0; + text-align: center; + color: var(--color-text-muted); + font-size: 1.05rem; +} + +.product-card { + background: var(--color-beige-light); + border: 1px solid var(--color-border); + border-radius: var(--radius); + overflow: hidden; + display: flex; + flex-direction: column; + transition: box-shadow 0.2s ease; +} + +.product-card:hover { + box-shadow: var(--shadow); +} + +.product-card .product-image { + aspect-ratio: 1; + object-fit: cover; + width: 100%; + background: var(--color-beige); +} + +.product-card .product-body { + padding: var(--spacing-md); + flex: 1; + display: flex; + flex-direction: column; +} + +.product-card h3 { + margin: 0 0 var(--spacing-xs); + font-size: 1.15rem; +} + +.product-card .product-desc { + font-size: 0.9rem; + color: var(--color-text-muted); + margin: 0 0 var(--spacing-sm); + flex: 1; +} + +.product-card .product-price { + font-weight: 600; + color: var(--color-wood-dark); + margin-bottom: var(--spacing-sm); +} + +.product-card .btn { + margin-top: auto; + text-align: center; +} + +/* ============================================ + Impressum page + ============================================ */ +.impressum-content { + max-width: 640px; +} + +.impressum-content section { + margin-bottom: var(--spacing-lg); +} + +.impressum-content h2 { + font-size: 1.35rem; + margin-bottom: var(--spacing-sm); +} + +.impressum-content p, +.impressum-content address { + margin: 0 0 var(--spacing-sm); + color: var(--color-text-muted); + font-style: normal; +} + +.impressum-content address { + line-height: 1.7; +} + +/* ============================================ + Footer + ============================================ */ +.site-footer { + background: var(--color-wood-medium); + color: var(--color-beige); + padding: var(--spacing-lg) var(--spacing-md); + margin-top: auto; +} + +.site-footer .layout { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: var(--spacing-md); +} + +.site-footer a { + color: var(--color-beige); +} + +.site-footer a:hover { + color: var(--color-beige-light); + text-decoration: underline; +} + +.footer-contact { + font-size: 0.95rem; +} + +.footer-logo { + width: 48px; + height: auto; + margin-bottom: var(--spacing-xs); + opacity: 0.8; +} + +.footer-contact p { + margin: 0; +} + +.footer-links { + display: flex; + gap: var(--spacing-md); +} + +.footer-links a { + text-decoration: none; +} + +.footer-links a:hover { + text-decoration: underline; +} + +/* ============================================ + Page title (inner pages) + ============================================ */ +.page-title { + font-family: var(--font-heading); + font-size: clamp(1.5rem, 3vw, 2rem); + color: var(--color-wood-dark); + margin: 0 0 var(--spacing-lg); + border-bottom: 2px solid var(--color-border); + padding-bottom: var(--spacing-sm); +} + +/* ============================================ + Responsive adjustments + ============================================ */ +@media (max-width: 640px) { + .hero-banner { + min-height: 35vh; + max-height: 55vh; + height: 45vh; + } + + .hero-text { + padding: var(--spacing-md); + } + + + .main-nav ul { + flex-direction: column; + } + + .main-nav a { + text-align: center; + border-bottom: 1px solid rgba(232, 223, 212, 0.15); + } + + .lightbox-close { + top: var(--spacing-sm); + right: var(--spacing-sm); + } + + .site-footer .layout { + flex-direction: column; + text-align: center; + } + + .footer-links { + justify-content: center; + } + + .gallery-grid { + grid-template-columns: 1fr; + } + + .shop-grid { + grid-template-columns: 1fr; + } +} diff --git a/impressum.html b/impressum.html index 0c62d9e..3633cd5 100644 --- a/impressum.html +++ b/impressum.html @@ -1,100 +1,110 @@ - - - - - - Impressum – Tischlerei Staffenberger - - - - -
-
- - -
- -

Tischlerei Staffenberger

-

Handwerk mit Tradition

-
- -
-
- -
-
-

Impressum

- -
- -
-

Anbieter

-

Tischlerei Staffenberger

-
- Musterstraße 1
- 12345 Musterort
- Deutschland -
-
- -
-

Kontakt

-

Telefon: 01234 / 567890

-

E-Mail: info@tischlerei-staffenberger.example

-

Bitte ersetzen Sie die Platzhalterdaten durch Ihre echten Angaben.

-
- -
-

Umsatzsteuer-ID

-

Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:

-

DE 123 456 789

-

(Platzhalter – bei fehlender USt-ID bitte weglassen oder durch „Keine“ ersetzen.)

-
- -
-

Verantwortlich für den Inhalt

-

Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:

-
- Max Staffenberger
- Musterstraße 1
- 12345 Musterort -
-
- -
-

Haftungsausschluss

-

Haftung für Inhalte

-

Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.

-

Haftung für Links

-

Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.

-
-
-
-
- - - - - - - + + + + + + Impressum – Tischlerei Staffenberger + + + + + + + + + + + +
+
+ + +
+ +

Tischlerei Staffenberger

+

Handwerk mit Tradition

+
+ +
+
+ +
+
+

Impressum

+ +
+ +
+

Anbieter

+

Tischlerei Staffenberger
Inhaber: Erich Staffenberger

+
+ Hauptstraße 3a
+ 3443 Kreuth
+ Österreich +
+
+ +
+

Kontakt

+

Telefon: 02274 / 8874

+

E-Mail: info@tischlerei-staffenberger.at

+
+ +
+

Gewerberechtliche Angaben

+

Gewerbeberechtigung derzeit in Beantragung. Angaben zu Gewerbewortlaut und zuständiger Gewerbebehörde (Bezirkshauptmannschaft) werden hier ergänzt, sobald die Berechtigung vorliegt.

+

Anwendbare Rechtsvorschrift: Gewerbeordnung 1994 (GewO), abrufbar unter www.ris.bka.gv.at.

+
+ +
+

Umsatzsteuer-Identifikationsnummer (UID)

+

Liegt noch nicht vor und wird ergänzt, sobald vorhanden.

+
+ +
+

Firmenbuchnummer

+

Nicht im Firmenbuch eingetragen.

+
+ +
+

EU-Streitschlichtung

+

Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit, abrufbar unter ec.europa.eu/consumers/odr.

+
+ +
+

Haftungsausschluss

+

Haftung für Inhalte

+

Die Inhalte dieser Website wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann jedoch keine Gewähr übernommen werden.

+

Haftung für Links

+

Diese Website enthält Links zu externen Websites Dritter, auf deren Inhalte kein Einfluss besteht. Für diese fremden Inhalte kann daher keine Gewähr übernommen werden. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.

+
+
+
+
+ + + + + + + diff --git a/index.html b/index.html index 9c9f3c7..dc7c6e4 100644 --- a/index.html +++ b/index.html @@ -1,89 +1,97 @@ - - - - - - Tischlerei Staffenberger – Möbel & Küchen nach Maß - - - - -
-
- - -
- -

Tischlerei Staffenberger

-

Handwerk mit Tradition

-
- -
-
- -
-
- -
-

Willkommen in meiner Werkstatt

-

Seit Jahren fertige ich in meiner kleinen Tischlerei Möbel, Küchen und Objekte für Haus und Garten. Jedes Stück wird in Handarbeit geplant und umgesetzt – zuverlässig und in Ruhe.

-
- - -
-

Über mich

-

Ich bin gelernter Tischler und arbeite als Ein-Mann-Betrieb in der Region. Ob Reparatur, Einzelmöbel oder komplette Küche: Ich berate Sie unverbindlich und setze Ihre Wünsche fachgerecht um.

-
- - -
-

Leistungen

-
-
-

Möbel nach Maß

-

Regale, Schränke, Tische und Sitzmöbel – maßgefertigt für Ihr Zuhause.

-
-
-

Küchen

-

Küchenplanung und -fertigung in Massivholz und mit modernen Oberflächen.

-
-
-

Außenbereich

-

Terassenmöbel, Sichtschutz, Carports und alles für Garten und Terrasse.

-
-
-
- - -
- Kontakt aufnehmen -
-
-
- - - - - - - + + + + + + Tischlerei Staffenberger – Möbel & Küchen nach Maß + + + + + + + + + + + + +
+
+ + +
+ +

Tischlerei Staffenberger

+

Handwerk mit Tradition

+
+ +
+
+ +
+
+ +
+

Willkommen in meiner Werkstatt

+

Seit Jahren fertige ich in meiner kleinen Tischlerei Möbel, Küchen und Objekte für Haus und Garten. Jedes Stück wird in Handarbeit geplant und umgesetzt – zuverlässig und in Ruhe.

+
+ + +
+

Über mich

+

Ich bin gelernter Tischler und arbeite als Ein-Mann-Betrieb in der Region. Ob Reparatur, Einzelmöbel oder komplette Küche: Ich berate Sie unverbindlich und setze Ihre Wünsche fachgerecht um.

+
+ + +
+

Leistungen

+
+
+

Möbel nach Maß

+

Regale, Schränke, Tische und Sitzmöbel – maßgefertigt für Ihr Zuhause.

+
+
+

Küchen

+

Küchenplanung und -fertigung in Massivholz und mit modernen Oberflächen.

+
+
+

Außenbereich

+

Terassenmöbel, Sichtschutz, Carports und alles für Garten und Terrasse.

+
+
+
+ + +
+ Kontakt aufnehmen +
+
+
+ + + + + + + diff --git a/js/script.js b/js/script.js index 07a575d..ee894fe 100644 --- a/js/script.js +++ b/js/script.js @@ -1,186 +1,214 @@ -/** - * Tischlerei Staffenberger - Main JavaScript - * Handles navigation active state, gallery filtering, and lightbox on Bilder page. - */ - -(function () { - 'use strict'; - - /** - * Set active state on the current page's nav link based on URL pathname. - */ - function setActiveNav() { - var navLinks = document.querySelectorAll('.main-nav a'); - var path = window.location.pathname; - var page = path.split('/').pop() || 'index.html'; - - navLinks.forEach(function (link) { - var href = link.getAttribute('href'); - if (!href) return; - var linkPage = href.split('/').pop() || 'index.html'; - if (linkPage === page || (page === '' && linkPage === 'index.html')) { - link.classList.add('active'); - } else { - link.classList.remove('active'); - } - }); - } - - /** - * Gallery filter: show/hide items by data-category. - */ - function initGalleryFilter() { - var filters = document.querySelectorAll('.gallery-filters button'); - var items = document.querySelectorAll('.gallery-item'); - - if (!filters.length || !items.length) return; - - filters.forEach(function (btn) { - btn.addEventListener('click', function () { - var category = this.getAttribute('data-filter'); - - // Update active button - filters.forEach(function (b) { - b.classList.toggle('active', b === btn); - }); - - // Show/hide items - items.forEach(function (item) { - var itemCategory = item.getAttribute('data-category'); - var show = category === 'all' || itemCategory === category; - item.style.display = show ? '' : 'none'; - }); - }); - }); - } - - /** - * Lightbox on Bilder page: open on gallery image click, navigate with swipe / arrow - * keys / prev+next buttons, close via X, backdrop or ESC. - * Respects the active gallery filter – only visible items are part of the sequence. - */ - function initLightbox() { - var lightbox = document.getElementById('lightbox'); - var lightboxImg = document.getElementById('lightbox-img'); - if (!lightbox || !lightboxImg) return; - - var closeBtn = lightbox.querySelector('.lightbox-close'); - var backdrop = lightbox.querySelector('.lightbox-backdrop'); - var prevBtn = lightbox.querySelector('.lightbox-prev'); - var nextBtn = lightbox.querySelector('.lightbox-next'); - - var currentIndex = 0; - var sequence = []; // visible gallery links at the time the lightbox was opened - - function getVisibleLinks() { - return Array.from(document.querySelectorAll('.gallery-item')) - .filter(function (item) { return item.style.display !== 'none'; }) - .map(function (item) { return item.querySelector('.gallery-image-link'); }) - .filter(Boolean); - } - - function showImage(index) { - var link = sequence[index]; - if (!link) return; - currentIndex = index; - lightboxImg.src = link.getAttribute('data-lightbox-src') || link.getAttribute('href'); - lightboxImg.alt = link.getAttribute('data-lightbox-alt') || ''; - var multiple = sequence.length > 1; - if (prevBtn) prevBtn.hidden = !multiple; - if (nextBtn) nextBtn.hidden = !multiple; - } - - function navigate(dir) { - showImage((currentIndex + dir + sequence.length) % sequence.length); - } - - function openLightbox(index) { - sequence = getVisibleLinks(); - showImage(index); - lightbox.classList.add('is-open'); - document.addEventListener('keydown', onKeydown); - } - - function closeLightbox() { - lightbox.classList.remove('is-open'); - document.removeEventListener('keydown', onKeydown); - } - - function onKeydown(e) { - if (e.key === 'Escape') closeLightbox(); - if (e.key === 'ArrowRight') navigate(1); - if (e.key === 'ArrowLeft') navigate(-1); - } - - // Touch swipe - var touchStartX = 0; - lightbox.addEventListener('touchstart', function (e) { - touchStartX = e.changedTouches[0].clientX; - }, { passive: true }); - lightbox.addEventListener('touchend', function (e) { - var dx = e.changedTouches[0].clientX - touchStartX; - if (Math.abs(dx) > 50) navigate(dx < 0 ? 1 : -1); - }, { passive: true }); - - // Open on gallery click - document.querySelectorAll('.gallery-image-link').forEach(function (link) { - link.addEventListener('click', function (e) { - e.preventDefault(); - var visibles = getVisibleLinks(); - var idx = visibles.indexOf(link); - openLightbox(idx >= 0 ? idx : 0); - }); - }); - - if (prevBtn) prevBtn.addEventListener('click', function () { navigate(-1); }); - if (nextBtn) nextBtn.addEventListener('click', function () { navigate(1); }); - if (closeBtn) closeBtn.addEventListener('click', closeLightbox); - if (backdrop) backdrop.addEventListener('click', closeLightbox); - } - - /** - * "Request" buttons on shop page – open mailto with product name in subject. - */ - function initShopRequests() { - var requestBtns = document.querySelectorAll('.product-card .btn[data-product]'); - requestBtns.forEach(function (btn) { - btn.addEventListener('click', function (e) { - var product = this.getAttribute('data-product'); - if (product) { - // Open mail with subject line (no real checkout) – replace email with your address - var mailto = 'mailto:info@tischlerei-staffenberger.example?subject=Anfrage%20Produkt%3A%20' + encodeURIComponent(product); - window.location.href = mailto; - } - }); - }); - } - - /** - * Shop empty state: show message when no products are present. - */ - function initShopEmptyState() { - var emptyMsg = document.getElementById('shop-empty-message'); - var grid = document.getElementById('shop-grid'); - if (!emptyMsg || !grid) return; - - var hasCards = grid.querySelectorAll('.product-card').length > 0; - emptyMsg.hidden = hasCards; - } - - /** - * Run on DOM ready. - */ - function init() { - setActiveNav(); - initGalleryFilter(); - initLightbox(); - initShopRequests(); - initShopEmptyState(); - } - - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', init); - } else { - init(); - } -})(); +/** + * Tischlerei Staffenberger - Main JavaScript + * Handles navigation active state, gallery filtering, and lightbox on Bilder page. + */ + +(function () { + 'use strict'; + + /** + * Set active state on the current page's nav link based on URL pathname. + */ + function setActiveNav() { + var navLinks = document.querySelectorAll('.main-nav a'); + var path = window.location.pathname; + var page = path.split('/').pop() || 'index.html'; + + navLinks.forEach(function (link) { + var href = link.getAttribute('href'); + if (!href) return; + var linkPage = href.split('/').pop() || 'index.html'; + if (linkPage === page || (page === '' && linkPage === 'index.html')) { + link.classList.add('active'); + } else { + link.classList.remove('active'); + } + }); + } + + /** + * Gallery filter: show/hide items by data-category. + */ + function initGalleryFilter() { + var filters = document.querySelectorAll('.gallery-filters button'); + var items = document.querySelectorAll('.gallery-item'); + + if (!filters.length || !items.length) return; + + filters.forEach(function (btn) { + btn.addEventListener('click', function () { + var category = this.getAttribute('data-filter'); + + // Update active button + filters.forEach(function (b) { + b.classList.toggle('active', b === btn); + }); + + // Show/hide items + items.forEach(function (item) { + var itemCategory = item.getAttribute('data-category'); + var show = category === 'all' || itemCategory === category; + item.style.display = show ? '' : 'none'; + }); + }); + }); + } + + /** + * Lightbox on Bilder page: open on gallery image click, navigate with swipe / arrow + * keys / prev+next buttons, close via X, backdrop or ESC. + * Respects the active gallery filter – only visible items are part of the sequence. + */ + function initLightbox() { + var lightbox = document.getElementById('lightbox'); + var lightboxImg = document.getElementById('lightbox-img'); + if (!lightbox || !lightboxImg) return; + + var closeBtn = lightbox.querySelector('.lightbox-close'); + var backdrop = lightbox.querySelector('.lightbox-backdrop'); + var prevBtn = lightbox.querySelector('.lightbox-prev'); + var nextBtn = lightbox.querySelector('.lightbox-next'); + + var currentIndex = 0; + var sequence = []; // visible gallery links at the time the lightbox was opened + var lastFocused = null; // element to restore focus to on close + + function getFocusableEls() { + return [prevBtn, nextBtn, closeBtn].filter(function (el) { + return el && !el.hidden; + }); + } + + function onFocusTrap(e) { + if (e.key !== 'Tab') return; + var focusable = getFocusableEls(); + if (!focusable.length) return; + var first = focusable[0]; + var last = focusable[focusable.length - 1]; + if (e.shiftKey && document.activeElement === first) { + e.preventDefault(); + last.focus(); + } else if (!e.shiftKey && document.activeElement === last) { + e.preventDefault(); + first.focus(); + } + } + + function getVisibleLinks() { + return Array.from(document.querySelectorAll('.gallery-item')) + .filter(function (item) { return item.style.display !== 'none'; }) + .map(function (item) { return item.querySelector('.gallery-image-link'); }) + .filter(Boolean); + } + + function showImage(index) { + var link = sequence[index]; + if (!link) return; + currentIndex = index; + lightboxImg.src = link.getAttribute('data-lightbox-src') || link.getAttribute('href'); + lightboxImg.alt = link.getAttribute('data-lightbox-alt') || ''; + var multiple = sequence.length > 1; + if (prevBtn) prevBtn.hidden = !multiple; + if (nextBtn) nextBtn.hidden = !multiple; + } + + function navigate(dir) { + showImage((currentIndex + dir + sequence.length) % sequence.length); + } + + function openLightbox(index, trigger) { + sequence = getVisibleLinks(); + lastFocused = trigger || document.activeElement; + showImage(index); + lightbox.classList.add('is-open'); + document.addEventListener('keydown', onKeydown); + var focusable = getFocusableEls(); + if (focusable.length) focusable[0].focus(); + } + + function closeLightbox() { + lightbox.classList.remove('is-open'); + document.removeEventListener('keydown', onKeydown); + if (lastFocused && typeof lastFocused.focus === 'function') lastFocused.focus(); + lastFocused = null; + } + + function onKeydown(e) { + if (e.key === 'Escape') closeLightbox(); + if (e.key === 'ArrowRight') navigate(1); + if (e.key === 'ArrowLeft') navigate(-1); + onFocusTrap(e); + } + + // Touch swipe + var touchStartX = 0; + lightbox.addEventListener('touchstart', function (e) { + touchStartX = e.changedTouches[0].clientX; + }, { passive: true }); + lightbox.addEventListener('touchend', function (e) { + var dx = e.changedTouches[0].clientX - touchStartX; + if (Math.abs(dx) > 50) navigate(dx < 0 ? 1 : -1); + }, { passive: true }); + + // Open on gallery click + document.querySelectorAll('.gallery-image-link').forEach(function (link) { + link.addEventListener('click', function (e) { + e.preventDefault(); + var visibles = getVisibleLinks(); + var idx = visibles.indexOf(link); + openLightbox(idx >= 0 ? idx : 0, link); + }); + }); + + if (prevBtn) prevBtn.addEventListener('click', function () { navigate(-1); }); + if (nextBtn) nextBtn.addEventListener('click', function () { navigate(1); }); + if (closeBtn) closeBtn.addEventListener('click', closeLightbox); + if (backdrop) backdrop.addEventListener('click', closeLightbox); + } + + /** + * "Request" buttons on shop page – open mailto with product name in subject. + */ + function initShopRequests() { + var requestBtns = document.querySelectorAll('.product-card .btn[data-product]'); + requestBtns.forEach(function (btn) { + btn.addEventListener('click', function (e) { + var product = this.getAttribute('data-product'); + if (product) { + // Open mail with subject line (no real checkout) – replace email with your address + var mailto = 'mailto:info@tischlerei-staffenberger.at?subject=Anfrage%20Produkt%3A%20' + encodeURIComponent(product); + window.location.href = mailto; + } + }); + }); + } + + /** + * Shop empty state: show message when no products are present. + */ + function initShopEmptyState() { + var emptyMsg = document.getElementById('shop-empty-message'); + var grid = document.getElementById('shop-grid'); + if (!emptyMsg || !grid) return; + + var hasCards = grid.querySelectorAll('.product-card').length > 0; + emptyMsg.hidden = hasCards; + } + + /** + * Run on DOM ready. + */ + function init() { + setActiveNav(); + initGalleryFilter(); + initLightbox(); + initShopRequests(); + initShopEmptyState(); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})(); diff --git a/package.json b/package.json index 75bfed0..da74cca 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "tischlerei-staffenberger", "version": "1.0.0", - "description": "Kleine, statische Website für einen selbstständigen Tischler (Ein-Mann-Betrieb). \r Technik: reines HTML, CSS und JavaScript ohne Frameworks.", - "main": "index.js", + "description": "Kleine, statische Website für einen selbstständigen Tischler (Ein-Mann-Betrieb). Technik: reines HTML, CSS und JavaScript ohne Frameworks.", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "build": "node scripts/build.js", + "optimize-images": "node scripts/optimize-images.js" }, "keywords": [], "author": "", diff --git a/partials/footer.html b/partials/footer.html new file mode 100644 index 0000000..7068594 --- /dev/null +++ b/partials/footer.html @@ -0,0 +1,14 @@ + diff --git a/partials/header.html b/partials/header.html new file mode 100644 index 0000000..ba171e3 --- /dev/null +++ b/partials/header.html @@ -0,0 +1,19 @@ +
+
+ + +
+ +

Tischlerei Staffenberger

+

Handwerk mit Tradition

+
+ +
+
diff --git a/pictures.html b/pictures.html index 6535b28..7e32d73 100644 --- a/pictures.html +++ b/pictures.html @@ -4,6 +4,14 @@ Bilder – Tischlerei Staffenberger + + + + + + + + @@ -48,118 +56,118 @@
- + - - Küche – FotoPosch 307 + + Küche – FotoPosch 307
Küche – FotoPosch 307
- + - - Küche – FotoPosch 317 + + Küche – FotoPosch 317
Küche – FotoPosch 317
- + - - Küche – FotoPosch 318 + + Küche – FotoPosch 318
Küche – FotoPosch 318
- + - - Küche – FotoPosch 419 + + Küche – FotoPosch 419
Küche – FotoPosch 419
- + - - Küche – FotoPosch 420 + + Küche – FotoPosch 420
Küche – FotoPosch 420
- + - - Küche – FotoPosch 421 + + Küche – FotoPosch 421
Küche – FotoPosch 421
- + - - Küche – FotoPosch 422 + + Küche – FotoPosch 422
Küche – FotoPosch 422
- + - - Küche – FotoPosch 423 + + Küche – FotoPosch 423
Küche – FotoPosch 423
- + - - Küche – FotoPosch 424 + + Küche – FotoPosch 424
Küche – FotoPosch 424
- + - - Küche – FotoPosch 425 + + Küche – FotoPosch 425
Küche – FotoPosch 425
- + - - Küche – FotoPosch 426 + + Küche – FotoPosch 426
Küche – FotoPosch 426
- + - - Küche – FotoPosch 427 + + Küche – FotoPosch 427
Küche – FotoPosch 427
- + - - Küche – FotoPosch 428 + + Küche – FotoPosch 428
Küche – FotoPosch 428
@@ -167,127 +175,127 @@
- + - - Außenbereich – FotoPosch 101 + + Außenbereich – FotoPosch 101
Außenbereich – FotoPosch 101
- + - - Außenbereich – FotoPosch 102 + + Außenbereich – FotoPosch 102
Außenbereich – FotoPosch 102
- + - - Außenbereich – FotoPosch 108 + + Außenbereich – FotoPosch 108
Außenbereich – FotoPosch 108
- + - - Außenbereich – FotoPosch 109 + + Außenbereich – FotoPosch 109
Außenbereich – FotoPosch 109
- + - - Außenbereich – FotoPosch 110 + + Außenbereich – FotoPosch 110
Außenbereich – FotoPosch 110
- + - - Außenbereich – FotoPosch 111 + + Außenbereich – FotoPosch 111
Außenbereich – FotoPosch 111
- + - - Außenbereich – FotoPosch 112 + + Außenbereich – FotoPosch 112
Außenbereich – FotoPosch 112
- + - - Außenbereich – FotoPosch 204 + + Außenbereich – FotoPosch 204
Außenbereich – FotoPosch 204
- + - - Außenbereich – FotoPosch 205 + + Außenbereich – FotoPosch 205
Außenbereich – FotoPosch 205
- + - - Außenbereich – FotoPosch 213 + + Außenbereich – FotoPosch 213
Außenbereich – FotoPosch 213
- + - - Außenbereich – FotoPosch 214 + + Außenbereich – FotoPosch 214
Außenbereich – FotoPosch 214
- + - - Außenbereich – FotoPosch 215 + + Außenbereich – FotoPosch 215
Außenbereich – FotoPosch 215
- + - - Außenbereich – FotoPosch 216 + + Außenbereich – FotoPosch 216
Außenbereich – FotoPosch 216
- + - - Außenbereich – FotoPosch 306 + + Außenbereich – FotoPosch 306
Außenbereich – FotoPosch 306
@@ -295,73 +303,73 @@
- + - - Sonderanfertigung – FotoPosch 029 + + Sonderanfertigung – FotoPosch 029
Sonderanfertigung – FotoPosch 029
- + - - Sonderanfertigung – FotoPosch 103 + + Sonderanfertigung – FotoPosch 103
Sonderanfertigung – FotoPosch 103
- + - - Sonderanfertigung – FotoPosch 430 + + Sonderanfertigung – FotoPosch 430
Sonderanfertigung – FotoPosch 430
- + - - Sonderanfertigung – FotoPosch 431 + + Sonderanfertigung – FotoPosch 431
Sonderanfertigung – FotoPosch 431
- + - - Sonderanfertigung – FotoPosch 432 + + Sonderanfertigung – FotoPosch 432
Sonderanfertigung – FotoPosch 432
- + - - Sonderanfertigung – FotoPosch 433 + + Sonderanfertigung – FotoPosch 433
Sonderanfertigung – FotoPosch 433
- + - - Sonderanfertigung – FotoPosch 434 + + Sonderanfertigung – FotoPosch 434
Sonderanfertigung – FotoPosch 434
- + - - Sonderanfertigung – FotoPosch 435 + + Sonderanfertigung – FotoPosch 435
Sonderanfertigung – FotoPosch 435
@@ -388,8 +396,8 @@

Tischlerei Staffenberger

-

Musterstraße 1 · 12345 Musterort

-

Tel.: 01234 / 567890

+

Hauptstraße 3a · 3443 Kreuth

+

Tel.: 02274 / 8874

Impressum diff --git a/scripts/build.js b/scripts/build.js new file mode 100644 index 0000000..a60bac6 --- /dev/null +++ b/scripts/build.js @@ -0,0 +1,39 @@ +/** + * Static page builder for Tischlerei Staffenberger. + * Expands markers in templates/*.html + * with the referenced partial's contents and writes the result to the + * project root (index.html, pictures.html, shop.html, impressum.html). + * + * Run: node scripts/build.js + */ + +'use strict'; + +const fs = require('fs'); +const path = require('path'); + +const PROJECT_ROOT = path.join(__dirname, '..'); +const TEMPLATES_DIR = path.join(PROJECT_ROOT, 'templates'); + +const INCLUDE_RE = /[ \t]*/g; + +function expandIncludes(content) { + return content.replace(INCLUDE_RE, (match, includePath) => { + const partialPath = path.join(PROJECT_ROOT, includePath); + return fs.readFileSync(partialPath, 'utf8').replace(/\n$/, ''); + }); +} + +function main() { + const pages = fs.readdirSync(TEMPLATES_DIR).filter(f => f.endsWith('.html')); + + for (const page of pages) { + const templatePath = path.join(TEMPLATES_DIR, page); + const outputPath = path.join(PROJECT_ROOT, page); + const content = expandIncludes(fs.readFileSync(templatePath, 'utf8')); + fs.writeFileSync(outputPath, content); + console.log(`built ${page}`); + } +} + +main(); diff --git a/scripts/optimize-images.js b/scripts/optimize-images.js index 5eaeee4..ab740aa 100644 --- a/scripts/optimize-images.js +++ b/scripts/optimize-images.js @@ -18,9 +18,9 @@ const OUTPUT_ROOT = path.join(PROJECT_ROOT, 'images', 'optimized'); // Gallery categories: [input subdir, output subdir] const GALLERY_DIRS = [ - ['küche', 'küche'], - ['aussenbereich', 'aussenbereich'], - ['sonderanfertigungen', 'sonderanfertigungen'], + ['kitchen', 'kitchen'], + ['outdoor', 'outdoor'], + ['custom', 'custom'], ]; const GALLERY_SIZES = [800, 1920]; diff --git a/shop-item-template.html b/shop-item-template.html index fb1c3ad..032c2ab 100644 --- a/shop-item-template.html +++ b/shop-item-template.html @@ -1,24 +1,24 @@ - -
- Produktbild (ersetzen) -
-

Artikelname (ersetzen)

-

Kurzbeschreibung (ersetzen). Maße/Material/Details hinzufügen.

-

0,00 €

- Anfragen -
-
- + +
+ Produktbild (ersetzen) +
+

Artikelname (ersetzen)

+

Kurzbeschreibung (ersetzen). Maße/Material/Details hinzufügen.

+

0,00 €

+ Anfragen +
+
+ diff --git a/shop.html b/shop.html index c900ed2..c409ca4 100644 --- a/shop.html +++ b/shop.html @@ -1,62 +1,70 @@ - - - - - - Shop – Tischlerei Staffenberger - - - - -
-
- - -
- -

Tischlerei Staffenberger

-

Handwerk mit Tradition

-
- -
-
- -
-
-

Kleine Serie & Einzelstücke

-

Ausgewählte Stücke können Sie anfragen. Kein Online-Zahlung – wir klären alles per Kontakt.

- - -
- -
-

Zurzeit sind keine Artikel verfügbar.

-
-
- - -
-
-
- -

Tischlerei Staffenberger

-

Musterstraße 1 · 12345 Musterort

-

Tel.: 01234 / 567890

-
-
- Impressum - Start -
-
-
- - - - + + + + + + Shop – Tischlerei Staffenberger + + + + + + + + + + + + +
+
+ + +
+ +

Tischlerei Staffenberger

+

Handwerk mit Tradition

+
+ +
+
+ +
+
+

Kleine Serie & Einzelstücke

+

Ausgewählte Stücke können Sie anfragen. Kein Online-Zahlung – wir klären alles per Kontakt.

+ + +
+ +
+

Zurzeit sind keine Artikel verfügbar.

+
+
+ + +
+
+
+ +

Tischlerei Staffenberger

+

Hauptstraße 3a · 3443 Kreuth

+

Tel.: 02274 / 8874

+
+
+ Impressum + Start +
+
+
+ + + + diff --git a/templates/impressum.html b/templates/impressum.html new file mode 100644 index 0000000..a1898fb --- /dev/null +++ b/templates/impressum.html @@ -0,0 +1,79 @@ + + + + + + Impressum – Tischlerei Staffenberger + + + + + + + + + + + + + +
+
+

Impressum

+ +
+ +
+

Anbieter

+

Tischlerei Staffenberger
Inhaber: Erich Staffenberger

+
+ Hauptstraße 3a
+ 3443 Kreuth
+ Österreich +
+
+ +
+

Kontakt

+

Telefon: 02274 / 8874

+

E-Mail: info@tischlerei-staffenberger.at

+
+ +
+

Gewerberechtliche Angaben

+

Gewerbeberechtigung derzeit in Beantragung. Angaben zu Gewerbewortlaut und zuständiger Gewerbebehörde (Bezirkshauptmannschaft) werden hier ergänzt, sobald die Berechtigung vorliegt.

+

Anwendbare Rechtsvorschrift: Gewerbeordnung 1994 (GewO), abrufbar unter www.ris.bka.gv.at.

+
+ +
+

Umsatzsteuer-Identifikationsnummer (UID)

+

Liegt noch nicht vor und wird ergänzt, sobald vorhanden.

+
+ +
+

Firmenbuchnummer

+

Nicht im Firmenbuch eingetragen.

+
+ +
+

EU-Streitschlichtung

+

Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit, abrufbar unter ec.europa.eu/consumers/odr.

+
+ +
+

Haftungsausschluss

+

Haftung für Inhalte

+

Die Inhalte dieser Website wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann jedoch keine Gewähr übernommen werden.

+

Haftung für Links

+

Diese Website enthält Links zu externen Websites Dritter, auf deren Inhalte kein Einfluss besteht. Für diese fremden Inhalte kann daher keine Gewähr übernommen werden. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.

+
+
+
+
+ + + + + + + diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..1dbd5ec --- /dev/null +++ b/templates/index.html @@ -0,0 +1,66 @@ + + + + + + Tischlerei Staffenberger – Möbel & Küchen nach Maß + + + + + + + + + + + + + + +
+
+ +
+

Willkommen in meiner Werkstatt

+

Seit Jahren fertige ich in meiner kleinen Tischlerei Möbel, Küchen und Objekte für Haus und Garten. Jedes Stück wird in Handarbeit geplant und umgesetzt – zuverlässig und in Ruhe.

+
+ + +
+

Über mich

+

Ich bin gelernter Tischler und arbeite als Ein-Mann-Betrieb in der Region. Ob Reparatur, Einzelmöbel oder komplette Küche: Ich berate Sie unverbindlich und setze Ihre Wünsche fachgerecht um.

+
+ + +
+

Leistungen

+
+
+

Möbel nach Maß

+

Regale, Schränke, Tische und Sitzmöbel – maßgefertigt für Ihr Zuhause.

+
+
+

Küchen

+

Küchenplanung und -fertigung in Massivholz und mit modernen Oberflächen.

+
+
+

Außenbereich

+

Terassenmöbel, Sichtschutz, Carports und alles für Garten und Terrasse.

+
+
+
+ + +
+ Kontakt aufnehmen +
+
+
+ + + + + + + diff --git a/templates/pictures.html b/templates/pictures.html new file mode 100644 index 0000000..b753269 --- /dev/null +++ b/templates/pictures.html @@ -0,0 +1,380 @@ + + + + + + Bilder – Tischlerei Staffenberger + + + + + + + + + + + + + + +
+
+
+

Referenzen & Bilder

+

Einblicke in vergangene Projekte: Küchen, Außenbereich und Sonderanfertigungen.

+
+ + +
+ + + + +
+ + +
+ + +
+ + + + Küche – FotoPosch 307 + + +
Küche – FotoPosch 307
+
+
+ + + + Küche – FotoPosch 317 + + +
Küche – FotoPosch 317
+
+
+ + + + Küche – FotoPosch 318 + + +
Küche – FotoPosch 318
+
+
+ + + + Küche – FotoPosch 419 + + +
Küche – FotoPosch 419
+
+
+ + + + Küche – FotoPosch 420 + + +
Küche – FotoPosch 420
+
+
+ + + + Küche – FotoPosch 421 + + +
Küche – FotoPosch 421
+
+
+ + + + Küche – FotoPosch 422 + + +
Küche – FotoPosch 422
+
+
+ + + + Küche – FotoPosch 423 + + +
Küche – FotoPosch 423
+
+
+ + + + Küche – FotoPosch 424 + + +
Küche – FotoPosch 424
+
+
+ + + + Küche – FotoPosch 425 + + +
Küche – FotoPosch 425
+
+
+ + + + Küche – FotoPosch 426 + + +
Küche – FotoPosch 426
+
+
+ + + + Küche – FotoPosch 427 + + +
Küche – FotoPosch 427
+
+
+ + + + Küche – FotoPosch 428 + + +
Küche – FotoPosch 428
+
+ + +
+ + + + Außenbereich – FotoPosch 101 + + +
Außenbereich – FotoPosch 101
+
+
+ + + + Außenbereich – FotoPosch 102 + + +
Außenbereich – FotoPosch 102
+
+
+ + + + Außenbereich – FotoPosch 108 + + +
Außenbereich – FotoPosch 108
+
+
+ + + + Außenbereich – FotoPosch 109 + + +
Außenbereich – FotoPosch 109
+
+
+ + + + Außenbereich – FotoPosch 110 + + +
Außenbereich – FotoPosch 110
+
+
+ + + + Außenbereich – FotoPosch 111 + + +
Außenbereich – FotoPosch 111
+
+
+ + + + Außenbereich – FotoPosch 112 + + +
Außenbereich – FotoPosch 112
+
+
+ + + + Außenbereich – FotoPosch 204 + + +
Außenbereich – FotoPosch 204
+
+
+ + + + Außenbereich – FotoPosch 205 + + +
Außenbereich – FotoPosch 205
+
+
+ + + + Außenbereich – FotoPosch 213 + + +
Außenbereich – FotoPosch 213
+
+
+ + + + Außenbereich – FotoPosch 214 + + +
Außenbereich – FotoPosch 214
+
+
+ + + + Außenbereich – FotoPosch 215 + + +
Außenbereich – FotoPosch 215
+
+
+ + + + Außenbereich – FotoPosch 216 + + +
Außenbereich – FotoPosch 216
+
+
+ + + + Außenbereich – FotoPosch 306 + + +
Außenbereich – FotoPosch 306
+
+ + +
+ + + + Sonderanfertigung – FotoPosch 029 + + +
Sonderanfertigung – FotoPosch 029
+
+
+ + + + Sonderanfertigung – FotoPosch 103 + + +
Sonderanfertigung – FotoPosch 103
+
+
+ + + + Sonderanfertigung – FotoPosch 430 + + +
Sonderanfertigung – FotoPosch 430
+
+
+ + + + Sonderanfertigung – FotoPosch 431 + + +
Sonderanfertigung – FotoPosch 431
+
+
+ + + + Sonderanfertigung – FotoPosch 432 + + +
Sonderanfertigung – FotoPosch 432
+
+
+ + + + Sonderanfertigung – FotoPosch 433 + + +
Sonderanfertigung – FotoPosch 433
+
+
+ + + + Sonderanfertigung – FotoPosch 434 + + +
Sonderanfertigung – FotoPosch 434
+
+
+ + + + Sonderanfertigung – FotoPosch 435 + + +
Sonderanfertigung – FotoPosch 435
+
+ +
+
+
+ + + + + + + + + + diff --git a/templates/shop.html b/templates/shop.html new file mode 100644 index 0000000..cf99afd --- /dev/null +++ b/templates/shop.html @@ -0,0 +1,39 @@ + + + + + + Shop – Tischlerei Staffenberger + + + + + + + + + + + + + + +
+
+

Kleine Serie & Einzelstücke

+

Ausgewählte Stücke können Sie anfragen. Kein Online-Zahlung – wir klären alles per Kontakt.

+ + +
+ +
+

Zurzeit sind keine Artikel verfügbar.

+
+
+ + + + + + +