knso/preview-auto-lack-design-bergmueller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Anreicherung: Bilder, Logo, Text-Feinarbeit (Cloud-Routine)

Browse Source
This commit is contained in:
webklar-automation
2026-07-26 09:16:16 +00:00
parent 65ffadb480
commit 8e97524bcc
3 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.image-slots.state.json Normal file
View File

@@ -0,0 +1 @@
{"profil-inhaber": {"u": "data:image/webp;base64,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", "s": 1, "x": 0, "y": 0}}

9
assets/logo-placeholder.svg
View File

@@ -1,5 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 48" role="img" aria-label="Logo-Platzhalter">
<rect x="1" y="1" width="258" height="46" rx="8" fill="none" stroke="#f0f0ec" stroke-opacity="0.35" stroke-width="1.5" stroke-dasharray="6 5"/>
<text x="130" y="25" text-anchor="middle" font-family="Archivo, system-ui, sans-serif" font-weight="800" font-size="20" letter-spacing="1" fill="#f0f0ec">IHR&#160;LOGO</text>
<text x="130" y="39" text-anchor="middle" font-family="Archivo, system-ui, sans-serif" font-weight="600" font-size="8" letter-spacing="2" fill="#f0f0ec" fill-opacity="0.55">HIER EIGENES LOGO EINSETZEN</text>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 64" role="img" aria-label="Auto-Lack-Design Bergmüller">
<rect x="6" y="8" width="48" height="48" rx="11" fill="#2FA4F0"/>
<text x="30" y="41" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-weight="800" font-size="23" fill="#FFFFFF" letter-spacing="0.5">AL</text>
<text x="66" y="33" font-family="Arial, Helvetica, sans-serif" font-weight="800" font-size="21" fill="#F5F4F0" letter-spacing="0.4">AUTO-LACK-DESIGN</text>
<text x="67" y="50" font-family="Arial, Helvetica, sans-serif" font-weight="600" font-size="9.5" fill="#9FD1F5" letter-spacing="1.5">KAROSSERIE · LACK · KRAILLING</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 643 B

After

Width:  |  Height:  |  Size: 687 B

12
index.html
View File

@@ -113,7 +113,7 @@
</h1>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: #c5c9ce; max-width: 560px; margin: 0 auto; font-weight: 500;">
Wir reparieren alles! Mit Originalteilen und neuester Technik zu fairen Preisen. Als wäre nichts passiert.
Unfallinstandsetzung, Karosseriebau, Lackierung und Smart Repair – mit Originalteilen und neuester Technik zu fairen Preisen. Als wäre nichts passiert.
</p>
</div>
@@ -229,7 +229,7 @@
<div style="max-width: 760px; margin-bottom: clamp(40px, 6vh, 64px);">
<span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9FD1F5; margin-bottom: 16px;">Referenzen</span>
<h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.1; color: #f5f4f0; font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 18px;">Echte Arbeiten aus unserer Werkstatt</h2>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #c9d6e2; font-weight: 500;">Ein Auszug aus unseren Projekten. Ziehen Sie eigene Fotos (z.&nbsp;B. Vorher/Nachher) einfach per Drag &amp; Drop in die Platzhalter.</p>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #c9d6e2; font-weight: 500;">Ein Auszug aus unseren Projekten – von der unsichtbaren Smart-Repair-Ausbesserung bis zur kompletten Neulackierung.</p>
</div>
<!-- Foto-Galerie — jeder Platzhalter ist per Drag & Drop mit einem eigenen Foto befüllbar -->
@@ -253,7 +253,7 @@
</div>
<p style="margin-top: clamp(28px, 4vh, 44px); text-align: center; font-size: 15px; color: #c9d6e2; font-weight: 500;">Mehr laufende Projekte gibt es auf unserer <a href="" target="_blank" rel="noopener" style="color: #9FD1F5; font-weight: 700;">Facebook-Seite</a>.</p>
<p style="margin-top: clamp(28px, 4vh, 44px); text-align: center; font-size: 15px; color: #c9d6e2; font-weight: 500;">Mehr laufende Projekte gibt es auf unserer <a href="https://www.facebook.com/p/Auto-Lack-Design-100055205112692/" target="_blank" rel="noopener" style="color: #9FD1F5; font-weight: 700;">Facebook-Seite</a>.</p>
</div>
</section>
@@ -276,7 +276,7 @@
<div class="lw-about" style="display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(50px, 8vh, 90px);">
<div style="display: flex; flex-direction: column; gap: 16px;">
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: #f5f4f0;">Hallo, ich bin<br>Stephan Bergmüller,</h3>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Lack- und Karosserie-Experte und Inhaber der Auto-Lack-Design Bergmüller (Inh. Stephan Bergmüller) in Krailling.</p>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Lack- und Karosserie-Experte und Inhaber von Auto-Lack-Design Bergmüller in Krailling – einem Familienbetrieb, der seit über 70 Jahren in dritter Generation für erstklassige Lackier- und Karosseriearbeit steht.</p>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Mit meinem Werkstatt-Team aus professionellen Fachkräften erfülle ich Ihre individuellen Wünsche zum bestmöglichen Preis — von der Smart-Repair bis zur kompletten Restauration.</p>
</div>
<div style="justify-self: center; width: min(340px, 100%);">
@@ -406,7 +406,7 @@
<div style="text-align: right; flex-shrink: 0;">
<p style="font-size: 13px; color: #8fa4b8; font-weight: 500; margin-bottom: 12px;">© 2026 Auto-Lack-Design Bergmüller (Inh. Stephan Bergmüller) · Alle Rechte vorbehalten</p>
<div style="display: flex; justify-content: flex-end; align-items: center; gap: 14px;">
<a href="" target="_blank" rel="noopener" aria-label="Facebook" style="width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; color: #c9d6e2; font-weight: 800; font-size: 15px; transition: background .2s ease, transform .2s ease;" style-hover="background: var(--accent, #2FA4F0); color: #0a1526; transform: scale(1.1);">f</a>
<a href="https://www.facebook.com/p/Auto-Lack-Design-100055205112692/" target="_blank" rel="noopener" aria-label="Facebook" style="width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; color: #c9d6e2; font-weight: 800; font-size: 15px; transition: background .2s ease, transform .2s ease;" style-hover="background: var(--accent, #2FA4F0); color: #0a1526; transform: scale(1.1);">f</a>
<a href="#impressum" style="font-size: 13px; color: #8fa4b8; font-weight: 500;">Impressum</a>
<a href="#datenschutz" style="font-size: 13px; color: #8fa4b8; font-weight: 500;">Datenschutz</a>
</div>
@@ -467,7 +467,7 @@ class Component extends DCLogic {
if (!window.maplibregl) { setTimeout(() => this.initMap(), 250); return; }
// / — Koordinaten des eigenen Standorts eintragen.
// Vorbelegt mit der geografischen Mitte Deutschlands, damit die Karte auch ohne Eintrag funktioniert.
const LNG = 10.4515, LAT = 51.1657;
const LNG = 11.36187, LAT = 48.09480;
const map = new maplibregl.Map({
container: this.mapEl,
style: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",