Compare commits
No files matched your search
@@ -18,6 +18,46 @@
|
||||
"bin/dev-router.php"
|
||||
],
|
||||
"port": 8080
|
||||
},
|
||||
{
|
||||
"name": "kantsites-pilot",
|
||||
"runtimeExecutable": "powershell",
|
||||
"runtimeArgs": [
|
||||
"-NoProfile",
|
||||
"-Command",
|
||||
"$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/browser-tests/pilot-17c7f81e0ae6/pilot.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantit-media'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8087 -t public bin/dev-router.php"
|
||||
],
|
||||
"port": 8087
|
||||
},
|
||||
{
|
||||
"name": "elektro-bernhard",
|
||||
"runtimeExecutable": "powershell",
|
||||
"runtimeArgs": [
|
||||
"-NoProfile",
|
||||
"-Command",
|
||||
"$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/elektro-bernhard.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/elektro-bernhard-media'; $env:SITE_ORIGIN='http://127.0.0.1:8088'; & php -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8088 -t public bin/dev-router.php"
|
||||
],
|
||||
"port": 8088
|
||||
},
|
||||
{
|
||||
"name": "tagespflege-moldovan",
|
||||
"runtimeExecutable": "powershell",
|
||||
"runtimeArgs": [
|
||||
"-NoProfile",
|
||||
"-Command",
|
||||
"$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/tagespflege-moldovan.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/tagespflege-moldovan-media'; $env:SITE_ORIGIN='http://127.0.0.1:8089'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8089 -t public bin/dev-router.php"
|
||||
],
|
||||
"port": 8089
|
||||
},
|
||||
{
|
||||
"name": "kantit",
|
||||
"runtimeExecutable": "powershell",
|
||||
"runtimeArgs": [
|
||||
"-NoProfile",
|
||||
"-Command",
|
||||
"$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/kantit.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantit-media'; $env:SITE_ORIGIN='http://127.0.0.1:8130'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8130 -t public bin/dev-router.php"
|
||||
],
|
||||
"port": 8130
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -4,6 +4,54 @@ Lokaler CMS-Prototyp für PHP-Webhosting mit erstem visuellen Editor. Symfony 7.
|
||||
|
||||
Die übernommenen Originaldokumente sind `AGENTS.md` und `ENTWICKLUNGSPLAN.md`. Den tatsächlichen Stand enthält `docs/STATUS.md`, Entscheidungen und Datenmodell stehen in `docs/ARCHITECTURE.md`.
|
||||
|
||||
## Einwilligungshinweis gestalten, Nach-oben-Knopf auch bei offener Frage (ab 1.14.1)
|
||||
|
||||
**Der Einwilligungshinweis lässt sich gestalten**, unter **Einstellungen → Einwilligung → Aussehen des Hinweises**: Anordnung (Karte unten in der Mitte, Leiste über die volle Breite, kleine Karte rechts unten), Form (abgerundet, rund, eckig – gilt für Fläche und Knöpfe zusammen), eigene Überschrift und vier Farben (Fläche, Schrift, Knopf „Alle akzeptieren“, Schrift auf dem Knopf), jeweils als `#hex` oder `@schlüssel` aus der Palette. Leer heißt Papier, Tinte und Akzent aus dem Design. Die Fläche trägt einen schmalen Streifen und ein Symbol in der Knopffarbe; „Nur notwendige“ bleibt ein gleich großer Rahmenknopf daneben. Dieselben Farben gelten auf `/einwilligung` und in den Beitragsarchiven.
|
||||
|
||||
**Der Nach-oben-Knopf** war ausgeblendet, solange die Einwilligungsfrage offen stand – auf dem Telefon bleibt sie das oft, und der Knopf kam dort nie. Jetzt setzt er sich auf die Oberkante der Leiste, wo sie die Ecke abdeckt; Browser ohne Ankerpositionierung blenden ihn dort weiter aus. Der reservierte Abstand unten reicht auf schmalen Bildschirmen wieder für die ganze Leiste.
|
||||
|
||||
**Im Designbereich** sind belegte Eigenschaften jetzt in Orange beschriftet, nicht nur mit Punkt und Fettdruck; die Gerätechips D/T/M stehen weiter auseinander, und der Fokusring bleibt in der Lücke.
|
||||
|
||||
## Schriften vom eigenen Server, Hinweise auf jedem Bildschirm (ab 1.14.0)
|
||||
|
||||
**Schriften kommen ausschließlich von deinem Server.** Die Ausgabe verlinkt kein Stylesheet mehr von `fonts.googleapis.com` – weder die öffentliche Seite noch die Editorvorschau, die es bisher bei jedem Aufruf tat. Fehlen die Dateien, zeigt die Website die eingestellte Ersatzschrift und sagt es dir. Geholt werden sie wie bisher einmalig unter **Design → Schriften ausliefern**. Zusätzlich wird jetzt **jeder** Schnitt des Designs vorab geladen: bisher waren es die ersten zwei je Familie, weshalb die Überschriften sichtbar von der Ersatzschrift auf die richtige Schrift sprangen.
|
||||
|
||||
**Offene Hinweise stehen auf jedem Verwaltungsbildschirm**, mit dem Knopf daneben: „Fassung X ist verfügbar“ → *Jetzt aktualisieren*, „Schriftdateien fehlen“ → *Schriften holen*. Keiner der beiden fragt beim Öffnen im Netz nach.
|
||||
|
||||
**System und Update** ist auf dem Telefon benutzbar: Die Seite lief seitlich aus dem Bild, die Sicherungstabelle wird zu gestapelten Blöcken, und die Texte sind knapper – das Kleingedruckte steht zugeklappt.
|
||||
|
||||
**Im Designbereich** zeigen die Gerätechips **D/T/M** jetzt in Orange, welches Gerät einen eigenen Wert trägt; das gerade bearbeitete Gerät hat einen Rahmen statt des bisherigen roten Rings, der am Rand der Spalte abgeschnitten wurde.
|
||||
|
||||
## Öffnungszeiten, Einsatzgebiet und FAQ in den strukturierten Daten (ab 1.14.0)
|
||||
|
||||
Unter **Einstellungen → Unternehmensdaten** gibt es **Öffnungszeiten** (je Wochentag Öffnen und Schließen; leer heißt geschlossen) und das **Einsatzgebiet** (ein Ort je Zeile). Beides erscheint in den strukturierten Daten der Startseite (`openingHoursSpecification`, `areaServed`); gleiche Zeiten werden zu einer Angabe zusammengefasst. Der sichtbare Text auf der Website bleibt unabhängig davon.
|
||||
|
||||
Ein Akkordeon wird per Kästchen **Als FAQ auszeichnen** zur `FAQPage`: die Titel sind die Fragen, die Textbausteine im Eintrag die Antwort. Einträge ohne Text erscheinen nicht. Das gilt nur für Akkordeons mit gesetztem Kästchen – ein Akkordeon mit Leistungen bleibt ein Akkordeon.
|
||||
|
||||
## Mehr Symbole, Menü-Knopf gestalten, Nach-oben-Knopf zuverlässig (ab 1.13.0)
|
||||
|
||||
Der Symbolsatz hat drei Zeichnungen mehr: **Menschen**, **Musik** und **Haus**. Sie stehen überall zur Wahl, wo es Symbole gibt – Symbolbaustein, Symbolkarte und Menüeinträge. Eine am Symbolbaustein eingestellte **Farbe** wirkt jetzt auch wirklich auf die Zeichnung; bisher blieb sie in der Akzentfarbe der Website stecken.
|
||||
|
||||
Der **Menü-Knopf** (der aufklappbare „Menü“-Knopf auf Tablet und Telefon) lässt sich gestalten: Navigation auswählen → **Inhalt → Menü-Knopf** wählt zwischen *Symbol und Text*, *Nur Text* und *Nur Symbol*; „Nur Symbol“ behält den Namen für Vorlesesoftware. Unter **Design → Menü-Knopf** stehen Schriftfarbe, Fläche, Rahmenfarbe, Rahmenstärke, Ecken und Schriftgröße, je Gerät und mit Palettenfarben. Das aufgeklappte Menü legt sich im Kopfbereich als Fläche über die volle Breite unter den Kopf, statt die Kopfzeile auseinanderzuschieben.
|
||||
|
||||
Der **Nach-oben-Knopf** erscheint wieder überall. Er blendete sich über eine Scroll-Animation ein; Browser, die diese Eigenschaft zwar kennen, aber nicht ausführen, ließen ihn dauerhaft unsichtbar. Jetzt entscheidet eine Klasse, die das kleine Scroll-Skript setzt – und ohne JavaScript bleibt der Knopf einfach sichtbar.
|
||||
|
||||
## Soziale Profile (ab 1.12.0)
|
||||
|
||||
Unter **Einstellungen → Unternehmensdaten → Soziale Profile** je Netzwerk eine Adresse eintragen (Facebook, Instagram, LinkedIn, YouTube, TikTok, X, Threads, Pinterest, Xing, WhatsApp, Google-Unternehmensprofil). Das Element **Soziale Profile** (Werkzeugkasten → Bausteine) zeigt sie dann an jeder Stelle – im Kopf- oder Fußbereich, in einer Kontaktsektion – und bestimmt dort Größe, Form (nur Symbol, runde oder eckige Fläche), Anordnung, Beschriftung und ob nur bestimmte Netzwerke erscheinen. Farbe, Abstand und Ausrichtung wie bei jedem Element unter **Design**. Eine Adresse ändern heißt: überall geändert. Die Profile stehen automatisch in den strukturierten Daten (`sameAs`). Ohne Eintrag zeigt das Element auf der Website nichts.
|
||||
|
||||
## Slider-Steuerung auf dem Bild (ab 1.11.4)
|
||||
|
||||
Die Steuerung liegt jetzt auf dem Slider, wie beim Hero-Slider von kant-it.de: runde weiße Pfeile links und rechts in der Mitte, Punkte unten rechts mit dem aktiven Punkt als Strich in der Akzentfarbe, ein kleiner Pause-Knopf daneben, kein Zähler mehr (der bleibt für Vorlesesoftware). Auf Bildschirmen bis 600 px verschwinden die Pfeile, gewischt wird mit dem Finger. Unter **Design → Slider-Steuerung** gibt es zusätzlich „Aktiver Punkt“.
|
||||
|
||||
## Farben der Slider-Steuerung (ab 1.11.3)
|
||||
|
||||
Slider auswählen → **Design → Slider-Steuerung**: Farbe der Punkte, Farbe von Pfeilen und Zähler sowie Hintergrund der Knöpfe, je Gerät und mit Palettenfarben. Ohne eigene Werte sind die Punkte halbtransparent weiß und die Pfeile weiß mit Akzentfarbe. Die Farben gelten auch für die skriptfreien Punkte, die der Browser selbst zeichnet.
|
||||
|
||||
## Slider auf dem iPhone (ab 1.11.2)
|
||||
|
||||
Safari bricht sanftes Weiterblättern in einem einrastenden Slider ab und springt zur vorigen Folie zurück; die Automatik und die Pfeile stotterten deshalb auf dem iPhone. Während der Fahrt ist das Einrasten jetzt ausgeschaltet und wird bei Ankunft auf der Folie wieder eingeschaltet. Die Punkte unter dem Slider sind echte Punkte, der aktive gefüllt, bei unveränderter Trefffläche von 44 px.
|
||||
|
||||
## Kopfbereich beim Scrollen und gleich hohe Karten (ab 1.11.1)
|
||||
|
||||
Der Kopfbereich kann für die gescrollte Seite eigene Farben tragen, wie der transparente Header in Flatsome: Kopfbereich im Editor öffnen, die Sektion wählen, **Design → Hintergrund**. Dort steht unter „Hintergrundfarbe“ die Zeile **„Hintergrundfarbe beim Scrollen“**; dasselbe gibt es für Textfarbe, Rahmenfarbe, Schattenfarbe und Deckkraft. Der normale Wert gilt am Seitenanfang, der Scroll-Wert sobald die Seite mehr als 40 px bewegt wurde, mit weichem Übergang. Für einen durchsichtigen Kopf am Anfang `#ffffff00` als normale Hintergrundfarbe eintragen. Damit der Kopf über der ersten Sektion liegt statt darüber zu stehen, unter **Einstellungen** „Kopfbereich über dem Inhalt schweben lassen“ einschalten; zusammen mit „oben halten“ bleibt er beim Scrollen sichtbar. Ohne JavaScript behält der Kopf seine normalen Farben.
|
||||
@@ -247,6 +295,18 @@ Beim ersten Start von 1.7.0 wird eine vorhandene `.env.local` einmalig mit `.env
|
||||
|
||||
Weitere Symfony-Overlays (`.env.prod`, `.env.prod.local`, `.env.local.php`) werden nicht mehr automatisch geladen. Falls ein Hosting sie bewusst verwendet hat, deren gewünschte Werte vor dem Wechsel in `.env` oder echte Servervariablen übernehmen. Der Installer, Setup und der Admin-Pfad-Befehl erzeugen keine `.env.local` mehr. Rückweg: alten Code und die beiden gesicherten Konfigurationsdateien gemeinsam wiederherstellen.
|
||||
|
||||
### Zweite lokale Referenzwebsite: Elektro Bernhard
|
||||
|
||||
Neben dem Kant-IT-Piloten liegt eine vollständige Kundenwebsite in einer eigenen Installation: Datenbank `var/elektro-bernhard.db`, Medien in `var/elektro-bernhard-media`. Beide werden über Umgebungsvariablen gewählt, die Anwendung selbst bleibt unverändert:
|
||||
|
||||
```
|
||||
DATABASE_URL="sqlite:///<Projektpfad>/var/elektro-bernhard.db" MEDIA_DIRECTORY="<Projektpfad>/var/elektro-bernhard-media" php -S 127.0.0.1:8088 -t public bin/dev-router.php
|
||||
```
|
||||
|
||||
In der App-Vorschau erledigt das die Startkonfiguration `elektro-bernhard` in `.claude/launch.json` (Port 8088).
|
||||
|
||||
Der Bestand wird nicht von Hand gepflegt, sondern aufgebaut: `scripts/seed-elektro-bernhard.php <Ordner mit den Originalbildern>` legt Gestaltung, Medien, Formular, Kopf- und Fußbereich, elf Seiten, vier Menüs, Einstellungen, Weiterleitungen und ein Administratorkonto an. Das Skript weigert sich, wenn die Datenbank schon Seiten enthält oder `DATABASE_URL` nicht auf diese Installation zeigt. `sh scripts/reset-elektro-bernhard.sh <Bilderordner>` wirft die Installation weg, migriert neu und baut sie wieder auf; das Passwort des Kontos steht am Ende der Ausgabe. Vorlage ist das statische Paket `Elektro-Bernhard-Website`; die drei Stellen, an denen der Nachbau bewusst abweicht, stehen in `docs/STATUS.md`.
|
||||
|
||||
Zusätzliche Prüfung mit den lokalen Kant-IT-Inhalten: `node scripts/admin-quality-check.mjs` (PHP über `PHP_BINARY` wählbar). Das Skript benötigt `var/kantit.db` und `var/kantit-media`, erstellt eine eigene Datenbankkopie und ein zufälliges Testkonto darin; es ändert die Pilotdatenbank nicht. Screenshots und Bericht landen in `reports/admin-quality/`.
|
||||
|
||||
Die Livesuche prüft `npm run test:search` mit derselben isolierten Pilotkopie: Eingabe ohne Enter, langsame Antworten, Fehler/Wiederholen, Filter, Browserhistorie, Mediathek, Tastaturfokus, mobile Ansicht und axe. Ergebnisse stehen in `reports/live-search/`. Die allgemeine Verwaltungsprüfung ohne erneuten öffentlichen Bewegungstest startet `npm run test:admin -- --admin-only`.
|
||||
+45
-2
@@ -1,6 +1,49 @@
|
||||
# Architekturentscheidungen
|
||||
|
||||
Stand: 14.09.2026. Arbeitstitel KantSites; Produktname offen.
|
||||
Stand: 15.09.2026. Arbeitstitel KantSites; Produktname offen.
|
||||
|
||||
## ADR 097 – Der Einwilligungshinweis bekommt ein Gesicht, und der Nach-oben-Knopf weicht ihm aus (15.09.2026)
|
||||
|
||||
**Anlass.** Umut gefiel das Banner nicht: nicht gestaltbar, ein kantiger Kasten in Papierfarbe. Und der Nach-oben-Knopf „funktionierte auf dem Handy nicht“ – er war ausgeblendet, solange die Frage offen stand, und auf dem Telefon bleibt sie das oft.
|
||||
|
||||
**Gestaltung aus den Einstellungen, nicht aus dem Editor.** Der Hinweis ist kein Baustein einer Seite, sondern eine Frage der Website; seine Gestaltung gehört deshalb neben seinen Text unter Einstellungen → Einwilligung: Anordnung (`karte`, `leiste`, `ecke`), Form (`weich`, `rund`, `eckig`), Überschrift, vier Farben (Fläche, Schrift, Knopf, Schrift auf dem Knopf). Die Farben nehmen `#hex` oder `@schlüssel` aus der Palette wie der Nach-oben-Knopf; `Theme::cssColor()` löst beides für beide auf. Ausgegeben wird das als `:root{--kant-consent-…}` im gehashten Stylesblock (`Consent::styles()`), die Anordnung als Klasse. Die Form setzt zwei Radien zugleich – Fläche und Knöpfe gehören zusammen; zwei Regler dafür wären zwei, die man gegeneinander verstellt. Leer heißt weiterhin Papier, Tinte und Akzent des Themes.
|
||||
|
||||
**Was gleich bleibt, mit Absicht.** „Nur notwendige“ bleibt ein Rahmenknopf in der Schriftfarbe, genauso groß wie „Alle akzeptieren“, in derselben Zeile – die Farbe des Knopfes ist einstellbar, die Gleichwertigkeit der Antworten nicht. Kein Skript, keine Cookie-Wand.
|
||||
|
||||
**Archiv und Einwilligungsseite.** Beide trugen bisher keine Palette im Kopf. Sie bekommen jetzt Theme- und Hinweisvariablen als gehashten Stylesblock; die Einwilligungsseite erweitert ihre Richtlinie um genau diesen einen Hash.
|
||||
|
||||
**Der Nach-oben-Knopf.** Statt `display:none` bei offener Frage setzt er sich per Ankerpositionierung auf die Oberkante der Leiste (`anchor-name`, `bottom:calc(anchor(top) + 12px)`), wo sie die Ecke abdeckt: bis 799 px bei der Karte, auf jeder Breite bei Leiste und Ecke (`:has()`). Browser ohne Ankerpositionierung blenden ihn dort weiter aus. Damit die Leiste als Anker taugt, steht sie in `page.html.twig` vor dem Knopf. Der reservierte Abstand unten wächst auf 320 px bis 620 px, weil die Leiste dort mit Standardtext bis 290 px hoch ist.
|
||||
|
||||
## ADR 096 – Schriften ausschließlich vom eigenen Server (15.09.2026)
|
||||
|
||||
**Entscheidung.** Die Ausgabe verlinkt kein Stylesheet von `fonts.googleapis.com` mehr, in keinem Pfad. Liegen die Schriftdateien lokal, liefert die Website sie selbst; liegen sie nicht vor, zeigt sie die eingestellte Ersatzschrift. `Theme::googleFontsUrl()` entfällt, und die Richtlinien nennen keinen fremden Schrifthost mehr – öffentlich `font-src 'self'`, in der Verwaltung zusätzlich `style-src 'self'`. Das Herunterladen der Dateien bleibt, wo es hingehört: ein Knopf im Designbereich beziehungsweise `cms:fonts:fetch`, einmalig und von einem Menschen ausgelöst.
|
||||
|
||||
**Warum.** ADR 037ff. hatten den Verweis auf Google als ausdrückliche Entscheidung Umuts stehen lassen, mit dem Selbsthosten als offenem Weg. Seit die Dateien lokal liegen können, ist der Rückfallpfad nur noch eine Falle: er greift genau dann, wenn niemand hinsieht, und gibt dann die IP-Adresse jedes Besuchers an einen Dritten weiter (LG München I, 3 O 17493/20). Vor allem betraf er die Editorvorschau, die `googleFonts` und **kein** `localFonts` bekam und die Schriften deshalb bei jedem Aufruf von Google holte – auf dem Bildschirm, an dem am meisten gearbeitet wird.
|
||||
|
||||
**Folge.** Eine Installation, deren Schriften fehlen, sieht anders aus als vorher: Ersatzschrift statt Wunschschrift. Das ist beabsichtigt und sichtbar gemacht – der Designbereich nennt die fehlenden Schnitte, und seit derselben Fassung sagt es ein Hinweisstreifen auf jedem Verwaltungsbildschirm mit dem Knopf daneben. Ein stilles „lädt halt von Google“ wäre die schlechtere Überraschung.
|
||||
|
||||
**Und das Vorabholen.** Es holte je Familie die ersten zwei Schnitte. Das Kant-IT-Theme nennt Lato 400, 700 und 900, die Überschriften stehen auf 800/900 und landen damit auf dem einzigen Schnitt ohne Vorabholen: er lud erst nach dem Stylesheet, und `font-display:swap` tauschte die Überschrift sichtbar. Jetzt wird jeder Schnitt des Themes vorab geholt, im lateinischen Grundbereich, und die Verweise stehen vor dem Stylesheet. Gemessen: alle Dateien sind vor dem ersten Zeichnen da.
|
||||
|
||||
## ADR 095 – Öffnungszeiten, Einsatzgebiet und FAQ in den strukturierten Daten (14.09.2026)
|
||||
|
||||
`LocalBusiness` nannte Name, Adresse, Telefon, E-Mail und Profile – nicht, wann jemand erreichbar ist und wo er arbeitet. Beides sind Angaben der Website, nicht einer Seite, deshalb stehen sie in den Einstellungen: `openingHours` als Liste `{day, opens, closes}` je Wochentag (Formular: sieben Zeilen mit Uhrzeitfeldern, leer heißt geschlossen; geprüft als `HH:MM`, Schließen nach Öffnen) und `areaServed` als Liste von Ortsnamen (ein Ort je Zeile, höchstens vierzig). `organisation()` fasst Tage mit gleichen Zeiten zu einer `OpeningHoursSpecification` zusammen – Mo–Fr 07:30–17:00 ist eine Angabe, nicht fünf – und gibt `areaServed` als Namensliste aus. Der Text auf der Website bleibt davon unabhängig; niemand soll zwei Wahrheiten pflegen müssen, aber das CMS erzwingt keine.
|
||||
|
||||
Eine FAQ ist dagegen Inhalt einer Seite. Ein Akkordeon ist nicht automatisch eine – die Kennzeichnung `props.faq` (Schema v23, Kästchen „Als FAQ auszeichnen“) macht aus den Einträgen Frage-Antwort-Paare einer `FAQPage`: Titel als Frage, die Textbausteine des Eintrags ohne Auszeichnungen als Antwort; Einträge ohne Text fehlen. Nur was sichtbar auf der Seite steht, steht auch in den Daten – Google verlangt genau das, und eine erfundene Antwort im Markup wäre der schnellste Weg zu einer Abstrafung. Kein Datenbankwechsel; beide Einstellungen fallen auf leere Listen zurück, das Akkordeon ohne Kennzeichnung bleibt ein Akkordeon.
|
||||
## ADR 094 – Drei Symbole mehr, ein Menü-Knopf mit eigener Gestalt, ein Nach-oben-Knopf ohne Scroll-Animation (14.09.2026)
|
||||
|
||||
**Symbole.** Der Satz hatte vierzehn Zeichnungen und keine für Menschen, Musik und Haus – drei Bilder, die eine Pflege- oder Vereinsseite als erstes braucht. Sie kommen als `people`, `music` und `home` hinzu, gezeichnet im selben Strich, weiter als reine Pfadangabe in `blocks/icon.html.twig`. Kein Schemawechsel: `ICONS` ist eine Werteliste, kein Bausteintyp; ein Dokument mit einem neuen Namen ist für ältere Fassungen ungültig, was für Werte dieser Art im Projekt bereits gilt. Ein Test hält Liste und Zeichnungen zusammen, denn ein fehlender Pfad ergibt ein leeres `<path d="">`: unsichtbar, ohne Fehlermeldung.
|
||||
|
||||
**Die Farbe des Symbolbausteins.** Das eingebettete SVG trägt dieselbe Klasse `block-icon` wie seine Hülle und setzte damit `color:var(--accent)` erneut – eine am Block eingestellte Farbe erreichte die Zeichnung nie, und beide bisherigen Nachbauten haben sie mit eigenem CSS überschrieben. `.block-icon .block-icon{color:inherit}` löst es an der Wurzel und trifft ausschließlich das Paar aus Hülle und Zeichnung; Symbole in Karten, Kontaktangaben und Menüs liegen nicht ineinander und bleiben unberührt.
|
||||
|
||||
**Der Menü-Knopf.** Er ist kein eigener Baustein, sondern der Knopf im Menüblock, und war bisher unveränderlich: Striche plus „Menü“, Rahmen in der Textfarbe, 8 px Ecken. Seine Beschriftung wird zu einer Eigenschaft (`burgerLabel`: `both`, `text`, `icon`) – „Nur Symbol“ behält den Namen als `visually-hidden`, denn ein Knopf ohne Namen ist für Vorlesesoftware ein Knopf ohne Zweck. Seine Farben werden zu freien Blockstilen der neuen Gruppe `menu` mit dem Ziel `burger`, wie `img` beim Bild und `controls` beim Slider: der Compiler schreibt `#id .menu-burger>summary{…}`. So bleibt die Gestaltung dort, wo jede andere Gestaltung liegt, statt eine zweite Einstellungsart zu erfinden.
|
||||
|
||||
**Das aufgeklappte Menü im Kopfbereich.** Das `details` klappte inline auf, also innerhalb der schmalen Spalte neben der Marke, und schob den Kopf auseinander; auf dem Telefon sah es aus, als fehle das Menü. Im Kopfbereich – und nur dort, erkennbar an `.site-header` – liegt die geöffnete Fläche jetzt absolut unter dem Kopf über die volle Breite. Außerhalb des Kopfbereichs bleibt es beim Aufklappen im Fluss, weil ein Menü in einer Sektion keinen positionierten Anker hat, auf den es sich verlassen könnte.
|
||||
|
||||
**Der Nach-oben-Knopf.** Er blendete sich über `animation-timeline: scroll(root)` ein, abgesichert mit `@supports`. Ein Browser, der die Eigenschaft kennt, die Zeitachse aber nicht ausführt, besteht die Abfrage und lässt den Knopf im ersten Bild der Animation stehen – bei `animation-fill-mode: both` heißt das dauerhaft unsichtbar. Statt einer Fähigkeitsabfrage entscheidet jetzt eine Klasse: `scrolled.js` setzt `kant-top-armed` sofort und `kant-top-shown` ab der eingestellten Entfernung, das Stylesheet blendet zwischen beiden Zuständen über. Ohne Skript bleibt der Knopf sichtbar – erreichbar ist besser als unsichtbar –, und das Skript wird jetzt auch geladen, wenn nur der Knopf es braucht.
|
||||
|
||||
## ADR 093 – Soziale Profile: einmal gepflegt, überall gezeigt (Dokumentschema v23, 14.09.2026)
|
||||
|
||||
Ein Link zu Instagram im Fuß, derselbe im Kopf, ein dritter in der Kontaktsektion – bisher wären das drei von Hand gesetzte Symbol-Links, und eine geänderte Adresse hätte drei Stellen zu finden. Deshalb gehören die Profile zur Website, nicht zur Seite: `SiteSettings` führt unter `social` je Netzwerk eine HTTPS-Adresse (`SocialProfiles::NETWORKS`, feste Liste, weil jedes Netzwerk ein gezeichnetes Symbol braucht), gepflegt unter Einstellungen → Unternehmensdaten. Der Baustein `social` (v23) trägt nur die Darstellung: Größe aus `ICON_SIZES` als Klasse, Form (Symbol, runde oder eckige Fläche), Anordnung, Beschriftung an oder aus, optional eine Teilmenge der Netzwerke und `newTab`. Farbe, Abstand und Ausrichtung kommen aus den freien Blockstilen wie überall. Die Vorlage liest die Profile über das Twig-Global `siteSettings`, darum braucht die Rekursion in `block.html.twig` keine neue Durchreichvariable. Ohne eingetragene Profile gibt der Block auf der öffentlichen Seite nichts aus und zeigt im Editor einen Hinweis, wo sie einzutragen sind. Die Adressen stehen zugleich in `sameAs` der strukturierten Daten – dieselbe Aussage, ohne zweite Pflege. Symbole sind eigene Umrisszeichnungen im Strich des vorhandenen Symbolsatzes, keine Markenbilder und keine fremde Datei. Kein Datenbankwechsel: `social` ist ein Schlüssel im Einstellungs-JSON und fällt auf eine leere Liste zurück.
|
||||
|
||||
## ADR 092 – Der Kopfbereich kennt einen gescrollten Zustand (14.09.2026)
|
||||
|
||||
@@ -419,7 +462,7 @@ Das Stylesheet steht aus Geschwindigkeitsgründen inline und ist **über seinen
|
||||
|
||||
`Theme` ist die Grundlage darüber: eine frei definierbare Farbpalette, Schriften und die Grundtypografie. Farben werden als `@schlüssel` referenziert und zu CSS-Variablen; eine Farbe zu ändern wirkt überall, wo sie benutzt wird. Die Überschriftengrößen entstehen aus einer modularen Skala, sodass eine Zahl die ganze Hierarchie verschiebt.
|
||||
|
||||
**Google Fonts auf ausdrückliche Entscheidung von Umut.** Das bedeutet eine Anfrage an Google bei jedem Seitenaufruf, mit den bekannten Folgen für Datenschutz und Ladezeit – der Entwicklungsplan verlangt eigentlich lokale Schriften. Umgesetzt ist es so, dass nur die tatsächlich benötigten Schnitte geladen werden und die Richtlinie ihre Hosts nur dann öffnet, wenn wirklich eine Google-Schrift eingestellt ist. Der Weg zum Selbsthosten bleibt offen: es wäre ein zusätzlicher Quelltyp neben `system` und `google`.
|
||||
**Schriften von Google, aber nicht zur Laufzeit.** Eine Familie lässt sich weiterhin bei Google aussuchen; ausgeliefert wird sie aber ausschließlich vom eigenen Server. Die Dateien holt ein Knopf im Designbereich einmalig her, und die Ausgabe verlinkt nie ein fremdes Stylesheet – Näheres in ADR 096.
|
||||
|
||||
Die alten Tokenwerte aus v2 bis v9 bleiben gültig und werden weiterhin gerendert. Blöcke, die noch welche tragen, zeigen sie im Editor in einem eingeklappten Bereich „Klassische Werte dieser Seite“, damit ältere Seiten bearbeitbar bleiben, ohne das neue Panel zu überladen.
|
||||
|
||||
|
||||
+9
-1
@@ -1,5 +1,13 @@
|
||||
# Qualitätsbericht – erster ausführbarer Prototyp
|
||||
|
||||
## Ergänzung: Elektro Bernhard gemessen, 14.09.2026 (1.12.1)
|
||||
|
||||
Lighthouse **13** (`scripts/audit.mjs`, je drei Läufe Mobil und Desktop, Mediane) gegen den lokalen Produktionsmodus der Referenzwebsite Elektro Bernhard (`var/elektro-bernhard.db`, Port 8090), vier Adressen: `/`, `/leistungen`, `/leistungen/notdienst`, `/kontakt`. Ergebnis nach den Korrekturen: **Barrierefreiheit, Best Practices, SEO und agentisches Browsing überall 100**, Leistung überall 100 bis auf die mobile Startseite mit **99** (LCP 2,1 s durch das Hero-Foto als Hintergrund unter Mobildrosselung; CLS 0, TBT 30 ms). Berichte unter `reports/lighthouse-elektro-bernhard-2/`; der erste Lauf davor (`reports/lighthouse-elektro-bernhard/`) zeigte Barrierefreiheit 95–97.
|
||||
|
||||
axe (WCAG 2.0/2.1 A+AA und Best-Practice-Regeln, Playwright, 1440 und 390 px) auf sechs Seiten: **null Verstöße**. Vorher gab es drei echte Befunde, alle behoben: Markennamen `#9aa0a6` auf Weiß (2,6:1 → `#6b7178`, 4,7:1), der rote Link „Kant-IT Solutions“ im dunklen Fuß (3,0:1 → hell), und auf der Leistungsübersicht sprang die Gliederung von H1 auf H3 (jetzt eine H2 vor den Karten). Ein vierter Befund lag im CMS: der Pause-Knopf des Sliders hatte den sichtbaren Text „Pause“, aber den zugänglichen Namen „Automatische Wiedergabe pausieren“ (WCAG 2.5.3); der Name beginnt jetzt mit dem sichtbaren Text. Achtung beim Messen: unmittelbar nach dem Laden meldet axe Kontrastverstöße an Elementen, die gerade eingeblendet werden (halb transparente Zwischenzustände); erst nach dem Durchscrollen und zwei Sekunden Wartezeit sind die Befunde belastbar.
|
||||
|
||||
Maschinenlesbar: `llms.txt`, `robots.txt`, `sitemap.xml` werden ausgeliefert, `LocalBusiness` mit drei `sameAs`-Profilen auf der Startseite, `BreadcrumbList` auf Unterseiten, `og:image` auf allen Inhaltsseiten. Nicht gemessen: Felddaten (LCP/INP/CLS am 75. Perzentil), Screenreader, Firefox/Safari, das tatsächliche Hosting.
|
||||
|
||||
## Ergänzung: Sichtbare leere Layouts, 14.09.2026 (1.6.2)
|
||||
|
||||
30 JavaScript-Tests und 27 PHP-Editor-/Sicherheitstests mit 312 Assertions bestanden. Vollständiger isolierter Chromium-Editortest einschließlich axe ohne Verstöße: direkte Tastatureinfügung in leere Sektionen/Spalten, genaues Drag-and-drop-Ziel und Scrollen am Rand, Spaltenreihenfolge auf Desktop und Mobil, Undo/Redo, Speichern/Neuladen, Veröffentlichung und Konflikte. Die Tests prüfen ausdrücklich, dass die neuen Editorhilfen weder im gespeicherten Blockbaum noch im öffentlichen HTML stehen. Desktop-, Mobil- und Drag-Screenshots visuell geprüft; Bericht unter `reports/editor/result.json`.
|
||||
@@ -247,7 +255,7 @@ Die Messung prüft die gemeinsame öffentliche Ausgabe nach Entfernung der feste
|
||||
- **154 PHP-Tests / 563 Assertions** unter PHP 8.2.12 und PHP 8.4.22 erfolgreich, dazu **15 JavaScript-Modelltests**.
|
||||
- Ein v10-Dokument mit Palettenfarbe, eigenem Farbwert, Abständen je Seite, Ecken je Ecke, Schatten, Buchstabenabstand, Hover-Zustand und eigenem Mobilwert wird Byte für Byte gespeichert und zu blockgenauem CSS: Regel für den Block, eigene Regel für `:hover,:focus-within` und eine Media Query für die schmale Breite.
|
||||
- **Vierzehn abgewiesene Eingaben schreiben nichts.** Darunter gezielt die Ausbruchsversuche: eine Farbe als Funktion (`rgb(1,2,3)`), eine Länge als Ausdruck (`calc(1px + 2px)`), eine angehängte Deklaration (`18px;position:fixed`), ein Schriftschlüssel mit Anführungszeichen und ein Hintergrundbild als Dateipfad. Jeder dieser Werte scheitert am verankerten Muster seines Typs, bevor er gespeichert wird.
|
||||
- **Die Sicherheitsrichtlinie wurde eigens geprüft:** das erzeugte Stylesheet ist über seinen eigenen SHA-256-Hash erlaubt, `unsafe-inline` kommt im Kopf nicht vor, und Skripte bleiben auf Seiten ohne Tabs abgeschaltet. Ohne eingestellte Google-Schrift wird kein fremder Host erlaubt und keiner kontaktiert.
|
||||
- **Die Sicherheitsrichtlinie wurde eigens geprüft:** das erzeugte Stylesheet ist über seinen eigenen SHA-256-Hash erlaubt, `unsafe-inline` kommt im Kopf nicht vor, und Skripte bleiben auf Seiten ohne Tabs abgeschaltet. Ein fremder Schrifthost wird nie erlaubt und nie kontaktiert: Schriften liefert seit 1.14.0 ausschliesslich der eigene Server (ADR 096).
|
||||
- **Acht ungültige Themes** werden abgewiesen, ohne das gespeicherte Theme zu verändern; danach liefert das Theme weiterhin die Voreinstellungen.
|
||||
- Im Editormodell geprüft: Vererbung, einzelnes Zurücksetzen, Entfernen leerer Reste, Kopieren ohne geteilte Objekte und vollständiges Undo.
|
||||
- **Im Browser geprüft wurde nur der Aufbau, nicht die Bedienung.** Im laufenden Editor wurde über das DOM bestätigt, dass das Designpanel aus dem Serverschema entsteht: sieben Gruppen, 58 Felder, 11 Farbwähler, 12 Schieberegler, 34 Einheitenauswahlen. **Es wurde kein Gestaltungsvorgang von Hand ausgeführt**, keine Tastaturbedienung erprobt und keine axe- oder Lighthouse-Messung gemacht. Für ein Werkzeug dieser Größe ist das ein erheblicher Vorbehalt.
|
||||
|
||||
+223
-1
@@ -1,12 +1,234 @@
|
||||
# Projektstatus
|
||||
|
||||
## 1.14.1 – Einwilligungshinweis gestaltbar, Nach-oben-Knopf bei offener Frage, orange Beschriftungen (15.09.2026)
|
||||
|
||||
**Anlass:** Umut wollte das Banner gestaltbar (rund, Farben) und schöner, den Abstand unten korrigiert, belegte Eigenschaften im Editor orange statt nur fett mit Punkt, und Gerätechips, die sich „aktiv überlagern“.
|
||||
|
||||
**Einwilligungshinweis (ADR 097).** Sieben neue Einstellungen: `consentLayout` (karte/leiste/ecke), `consentShape` (weich/rund/eckig), `consentTitle`, `consentColor`, `consentInk`, `consentAccent`, `consentAccentInk`; Farben mit `StyleSchema::COLOR` geprüft, Palette über `Theme::cssColor()` (neu, ersetzt die Kopie im Nach-oben-Knopf). `Consent::styles()` schreibt `:root{--kant-consent-…}` in den gehashten Stylesblock; die Anordnung ist eine Klasse. Neues Grundlayout: Streifen und Symbol in der Knopffarbe, gleich breite Knöpfe, aufklappbares „Einzeln wählen“ mit Pfeil, unterstrichene Rechtslinks; Leiste auf breiten Bildschirmen zweispaltig. Archiv und `/einwilligung` bekommen Theme- und Hinweisvariablen als gehashten Stylesblock – das Archiv trug bisher gar keine Palette.
|
||||
|
||||
**Abstand unten:** 320 px bis 620 px (Leiste bis 299 px hoch), 270 px bis 899 px, 200 px darüber; die Fläche scrollt ab `100dvh − 24px` in sich. Nach-oben-Knopf hebt sich bei Leiste und Ecke auf jeder Breite (`:has()`), bei der Karte bis 799 px.
|
||||
|
||||
**Editor:** belegte Beschriftungen in `--used` (#9d4e0d, 5,6:1); Chips mit 6 px Lücke, Fokusring ohne Versatz, Gruppe `flex:none`. Ein Überlagern der Chips ließ sich in 1.14.0 nicht reproduzieren – am Handy (390 px) liegen die drei Chips bei 22 px Breite mit 6 px Abstand, kein `outline` gezeichnet; die Rückmeldung bezog sich wohl auf den `outline`-Ring von 1.13.0.
|
||||
|
||||
**Geprüft:** PHP 505 Tests grün, darunter neu `testTheConsentQuestionTakesLayoutShapeAndColoursFromTheSettings` (Standard, eigene Werte, unbekannter Palettenschlüssel fällt weg, Einwilligungsseite mit Hash, ungültige Farbe abgewiesen). Chromium: vier Varianten (Karte, Leiste, Ecke rund dunkel, Karte eckig dunkel) auf 1440 und 390 px – Klasse, Radien, Farben und Überschrift stimmen, Nach-oben-Knopf sichtbar, treffbar, ohne Überlappung; `/einwilligung` 200 mit gehashtem `style-src`. Nach-oben-Prüfung auf acht Breiten bestanden. `browser-check.mjs`, `editor-check.mjs` (Einstellungen, Einwilligung) und axe über die Editorseitenleiste bestanden. Screenshots: `reports/consent-look/`, `reports/admin-hints/`.
|
||||
|
||||
**Nicht geprüft:** echtes iOS-Safari; der `@supports not`-Zweig; Lighthouse.
|
||||
|
||||
## Nach-oben-Knopf bei offener Einwilligungsfrage (15.09.2026)
|
||||
|
||||
**Anlass:** Umut meldete, der Nach-oben-Knopf funktioniere auf dem Handy nicht.
|
||||
|
||||
**Befund.** Der Knopf selbst funktioniert auf dem Telefon: In iPhone- und Pixel-Emulation (Chromium), lokal wie auf `web.kant-it.de` (dort bereits 1.14.0 mit `scrolled.js`), erscheint er nach 500 px, ist treffbar, und Tippen springt nach oben – **sobald die Einwilligungsfrage beantwortet ist**. Vorher galt `body.consent-open .scroll-top{display:none}` auf allen Geräten. Live trägt jeder Erstbesuch `consent-open`, und auf dem Telefon bleibt die Leiste unten oft einfach stehen – der Knopf kam dort nie. Kein Fehler im Skript und nicht der alte Safari-Fehler aus 1.13.0.
|
||||
|
||||
**Korrektur (`site.css`, `page.html.twig`).** Der Knopf bleibt bei offener Frage sichtbar. Gemessen deckt die Leiste die rechte Ecke nur bis knapp 800 px ab (bis 620 px volle Breite, 262–285 px hoch; darüber zentriert mit höchstens 620 px). In dieser Stufe setzt sich der Knopf per Ankerpositionierung 12 px auf die Oberkante der Leiste (`anchor-name:--kant-consent`, `bottom:calc(anchor(top) + 12px)`), unabhängig davon, wie hoch ihr Text umbricht. Browser ohne Ankerpositionierung blenden ihn dort weiter aus (`@supports not`). Ab 800 px bleibt er an seinem Platz. Weil ein Anker im Dokument vor dem positionierten Element stehen muss, gibt die Vorlage die Leiste jetzt vor dem Knopf aus.
|
||||
|
||||
**Geprüft:** Chromium, isolierte Kopie der Pilotdatenbank, Einwilligung offen auf 360, 390, 700, 768, 799, 800 und 1440 px sowie beantwortet auf 390 px – in allen acht Fällen sichtbar, keine Überlappung mit der Leiste, treffbar, nach dem Tippen `scrollY` 0. Twig-Lint gültig. PHP-Tests 504 grün, `browser-check.mjs` und `editor-check.mjs` (einschließlich Einwilligungsabläufe) bestanden.
|
||||
|
||||
**Nicht geprüft:** echtes iOS-Safari – WebKit ist für Playwright auf diesem Rechner nicht installiert. Der `@supports not`-Zweig wurde nicht ausgeführt, weil Chromium Ankerpositionierung kann.
|
||||
|
||||
**Nebenbefund, nicht geändert:** Bis 620 px reserviert `body.consent-open` 260 px Abstand unten, die Leiste ist mit Standardtext bis 285 px hoch – auf kleinen Telefonen liegen die letzten rund 25 px der Seite unter der offenen Leiste.
|
||||
|
||||
**Nächster Schritt:** nicht committet und nicht veröffentlicht; live erst mit einem Release (z. B. 1.14.1).
|
||||
|
||||
## 1.14.0 veröffentlicht (15.09.2026)
|
||||
|
||||
Tag `v1.14.0` (Commit `a434e0c`), Release: https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.14.0. Enthält die Schriften vom eigenen Server, den Hinweisstreifen, System und Update auf dem Telefon, die Gerätechips sowie Öffnungszeiten, Einsatzgebiet und FAQ in den strukturierten Daten.
|
||||
|
||||
**Anhänge:** `kantsites-1.14.0.zip` (4,7 MB, SHA-256 `8360566b1eaed670b29f506262953d3b17f95893e23c7f4a940ff6d5e3f62735`), `.sha256`, `install.php` mit eingetragener Prüfsumme. Hochgeladen mit `var/publish-release-1.14.0.py` über den Git-Zugang dieses Rechners, erst als Entwurf, dann veröffentlicht.
|
||||
|
||||
**Geprüft:** 504 PHP-Tests grün; `browser-check.mjs` und `editor-check.mjs` bestanden; HTTP-Archiv-Update 1.12.1 → 1.14.0 `ok`. Nach der Veröffentlichung ohne Anmeldung: alle drei Anhänge bytegleich mit den lokalen Dateien, `/releases/latest` nennt `v1.14.0`, die Installeradresse `…/releases/download/v1.14.0/kantsites-1.14.0.zip` antwortet mit 200.
|
||||
|
||||
**Nächster Schritt:** Update auf `web.kant-it.de` über System → Update aus dem Archiv, danach Migrationen abschließen und `var/kantit.db` mit dem korrigierten Kopfmenü hochladen.
|
||||
|
||||
## Globale Hinweise, der Schriftenknopf und die Gerätechips (15.09.2026)
|
||||
|
||||
**Anlass:** Umut fehlte ein Hinweis, der auch außerhalb der Systemseite sagt, dass etwas zu tun ist; der Knopf „Schriften holen“ sah nicht aus wie die übrigen; und im Designbereich störte ein roter Rahmen an den Gerätechips, der abgeschnitten wirkte.
|
||||
|
||||
**Hinweisstreifen auf jedem Verwaltungsbildschirm (`kant_admin_notices()`, `admin/shell.html.twig`).** Über dem Inhalt steht jetzt, was einen Knopf braucht, und der Knopf gleich daneben: „Fassung X ist verfügbar“ → *Jetzt aktualisieren* (System), „Schriftdateien fehlen: …“ → *Schriften holen* (Design). Keine Zeile davon geht ins Netz – die verfügbare Fassung steht im Protokoll der täglichen Aufgabe `update-check`, die fehlenden Schriften sind ein Blick in den Ordner. Der Updatehinweis erscheint nur für `ROLE_ADMIN`, weil nur die auf die Systemseite dürfen. Warm statt rot: es ist eine Aufgabe, kein Fehler. Auf 390 px bricht der Streifen um, der Knopf rutscht unter den Text.
|
||||
|
||||
**Schriftenknopf.** Er trug gar keine Klasse und war deshalb der einzige Knopf der Verwaltung im Standardaussehen des Browsers. Jetzt `primary` (bzw. `secondary` beim erneuten Holen), und der ganze Abschnitt steht wie alles andere in einer Karte mit Kopf und Körper.
|
||||
|
||||
**Gerätechips D/T/M (`editor.css`).** Der rote Kasten war `outline:2px` mit `outline-offset:1px` auf dem gerade bearbeiteten Gerät. Ein `outline` liegt außerhalb des Kästchens: bei 2 px Abstand lief er unter den Nachbarchip und wurde von der seitlich beschnittenen Sidebar gekappt – daher der abgeschnittene Eindruck. Jetzt zwei Zustände mit zwei Mitteln:
|
||||
|
||||
- **belegt** (dieses Gerät trägt einen eigenen Wert): gefülltes Orange `--used: #9d4e0d`, weiße Schrift – 5,6:1 Kontrast. Dieselbe Farbe trägt der Punkt vor der Beschriftung, damit „hier steht ein eigener Wert“ überall gleich aussieht.
|
||||
- **gerade bearbeitet**: 2 px Rahmen **innen** (`border-width`, kein `outline`), auf belegten Chips zusätzlich ein weißer Innenring. Nichts ragt mehr aus dem Kästchen, nichts wird beschnitten.
|
||||
|
||||
Chips von 19 auf 22 px, Abstand von 2 auf 4 px – auf einen Blick lesbar, welche Geräte an einer Eigenschaft hängen.
|
||||
|
||||
**Geprüft** (isolierte Kopie der Pilotdatenbank, künstlich auf „Lato 300 fehlt“ und „Fassung 9.9.9 verfügbar“ gesetzt): beide Streifen erscheinen auf `/admin`, tragen die richtigen Ziele, und auf 390 px bleibt die Dokumentbreite bei 390. Schriftenknopf trägt `primary`. Chips: belegte auf `rgb(157,78,13)`, bearbeitete mit 2 px Rahmen, kein gezeichnetes `outline` mehr. axe über die Editorseitenleiste ohne Verstöße. PHP-Tests: 498, ein bekannter Fehler (`testAnyPublishedPageCanBecomeTheRootAndEverythingFollows`). Screenshots: `reports/admin-hints/`.
|
||||
|
||||
**Zu beachten:** `admin.css` und `editor.css` hängen an `?v={{ kant_version() }}`. Bis die `VERSION` steigt, liefert der Browser die alten Fassungen aus dem Zwischenspeicher.
|
||||
|
||||
## Schriften nur noch vom eigenen Server, kein sichtbarer Schriftwechsel mehr (14.09.2026)
|
||||
|
||||
**Anlass:** Umut sah im Browser, wie die Schrift kurz von fett auf dünn sprang, und stellte zwei Regeln auf: keine Schriften über Adressen von Google, und kein Nachladen nach dem fertigen Seitenaufbau.
|
||||
|
||||
**Zwei getrennte Ursachen, beide belegt.**
|
||||
|
||||
1. **Der späte Schnitt.** `FontLibrary::preload()` holte je Familie nur die **ersten zwei** Schnitte vorab. Das Kant-IT-Theme nennt Lato 400, 700 und 900; die Überschriften stehen auf 800/900 und landen damit auf Lato 900 – dem einzigen Schnitt ohne Vorabholen. Gemessen am Nachbau: `lato-400` und `lato-700` starteten bei 151 ms, `lato-900` erst bei 156 ms, also nach dem Stylesheet. Mit `font-display:swap` zeichnet der Browser die Überschrift bis dahin in der Ersatzschrift und tauscht sie danach – der gemeldete Sprung. Jetzt wird jeder Schnitt des Themes vorab geholt (lateinischer Grundbereich; die erweiterten Bereiche bleiben draußen).
|
||||
2. **Google in der Editorvorschau.** `EditorController` und `PartialController` gaben der Vorlage `googleFonts` und **kein** `localFonts`. In der Vorschau kamen die Schriften damit bei jedem Aufruf von `fonts.googleapis.com` und `fonts.gstatic.com` – zwei fremde Verbindungen hintereinander, und genau dort arbeitet Umut am meisten. Beide Vorschauen nutzen jetzt dieselben lokalen Dateien wie die öffentliche Seite.
|
||||
|
||||
**Die Regel steht jetzt im Code, nicht in der Einstellung.** `page.html.twig` hat keinen Google-Zweig mehr; fehlen die Schriftdateien, zeigt die Website die Ersatzschrift des Themes. Die Kopfzeilen lassen keinen fremden Schrifthost mehr zu – öffentlich `font-src 'self'`, in der Verwaltung `style-src 'self'; font-src 'self'` statt der bisherigen Ausnahmen für `fonts.googleapis.com`/`fonts.gstatic.com`. `Theme::googleFontsUrl()` ist entfernt; das Herunterladen der Dateien über die Theme-Seite bleibt unverändert und baut seine Adresse selbst. Die Vorabholen-Verweise stehen jetzt **vor** dem Stylesheet, und die Texte auf der Theme-Seite sagen nicht mehr „kommen zurzeit von Google“, sondern „die Dateien fehlen, bis dahin die Ersatzschrift“.
|
||||
|
||||
**Geprüft** (Chromium, kalter Zwischenspeicher, isolierte Kopie der Pilotdatenbank): alle drei Schriftdateien starten bei 96 ms und sind bei 166–168 ms fertig, der erste sichtbare Inhalt erscheint bei 292 ms – die Schriften stehen also vor dem ersten Zeichnen, es gibt nichts mehr zu tauschen. Jede Datei wird genau einmal angefragt. Über die ganze Sitzung – öffentliche Seite, Anmeldung, Seiteneditor mit Vorschau, Bereiche – **keine einzige Anfrage außerhalb des eigenen Servers**. PHP-Tests: 498, ein bekannter Fehler (siehe unten). `npm run test:browser` und der Lighthouse-Lauf sind **nicht** gelaufen.
|
||||
|
||||
**Tests angepasst:** `testFontsAreReadFromGoogleStylesheetAndServedFromHere` prüft jetzt die Ersatzschrift statt des Google-Verweises und alle drei Vorabhol-Dateien; `testThemeDrivesEveryPageAndGoogleFontsOpenTheirOwnPolicy` heißt `…AndNoFontIsEverFetchedFromGoogle` und prüft die engere Kopfzeile. In `testEveryAllowedIconHasADrawingAndTakesItsColourFromTheBlock` stand eine echte Zeilenschaltung im Suchmuster; unter Windows mit `core.autocrlf=true` schlägt das fehl, sobald die Arbeitskopie CRLF trägt. Das Muster nimmt jetzt `\R` und gilt für beide Schreibweisen; die Vorlage selbst bleibt unverändert.
|
||||
|
||||
**Weiterhin offen, nicht von dieser Aufgabe:** `CmsTest::testAnyPublishedPageCanBecomeTheRootAndEverythingFollows` schlägt fehl – der Test erwartet `<a href="/" aria-current="page">Start</a>`, das Menü schreibt seit den Symbolen `<span class="nav-label">` um die Beschriftung.
|
||||
|
||||
## Kopfmenü im Hochformat und die Update-Ansicht auf dem Handy (14.09.2026)
|
||||
|
||||
**Anlass:** Umut meldete, das Mobilmenü im Kopf erscheine nur im Querformat, und bat darum, Texte und Ansichten der Update-Seite fürs Handy zu kürzen.
|
||||
|
||||
**Befund zum Kopfmenü – falsch gebaut, kein Fehler im CMS.** Der Kopfbereich trug zwei Menüblöcke: `area-header-menu` (waagerecht, `mobile: display:none`) und daneben `area-header-burger` (eigener Burger-Block, nur mobil sichtbar). Der veröffentlichte Stand auf `web.kant-it.de` kennt den zweiten Block nicht – abgerufen am 14.09.2026 enthält das Markup dort nur `area-header-menu` samt `@media (max-width:767px){#area-header-menu{display:none}}`. Damit ist im Hochformat (bis 767 px) gar kein Menü da, während im Querformat (768–1024 px) das Standardverhalten `collapse: tablet` denselben Block zum Burger zusammenlegt und ein Knopf erscheint. Genau die gemeldete Beobachtung. In `var/kantit.db` lag zwar ein zweiter Burger-Block, der das Loch stopfte, aber mit eigener Gestaltung: im Hochformat ein 161 px breiter Knopf, im Querformat der 101 px breite des waagerechten Menüs.
|
||||
|
||||
**Behoben in `var/kantit.db`:** ein einziger Menüblock `area-header-menu` mit `collapse: tablet` und `burgerLabel: both`, ohne `display:none` auf Mobil, `burgerFontSize: 14px`; der doppelte Block `area-header-burger` ist entfernt (Kopfbereich Fassung 8, Sicherung `var/kantit.db.vor-kopfmenue-20260914-2244.bak`). Geprüft am laufenden Nachbau: 375 px Hochformat und 844 px Querformat zeigen denselben Knopf („MENÜ“, 101 × 45 px, 14 px), die Liste bleibt in beiden verborgen und die aufklappende Fläche liegt über die volle Breite unter dem Kopf; ab 1025 px stehen die vier Einträge wieder waagerecht. Startkonfiguration `kantit` (Port 8130) in `.claude/launch.json` ergänzt.
|
||||
|
||||
**Update-Ansicht (`templates/admin/system.html.twig`, `public/assets/admin.css`).** Die Seite schob sich auf dem Handy seitlich aus dem Bild: `.stack` ist ein Raster mit automatischer Spalte, und eine automatische Rasterspalte wächst auf die Mindestbreite ihres breitesten Inhalts – eine lange Datenbankpfadangabe reichte. `.stack` bekommt `minmax(0, 1fr)`, `.facts` beide Spalten als `minmax(0, …)` und unter 620 px nur noch eine, `.card-body` und die Prüfpunkte `min-width: 0` samt `overflow-wrap: anywhere`. Die Sicherungstabelle wird unter 620 px zu gestapelten Blöcken (`.table-stack`, Spaltenüberschrift als `data-label`), statt waagerecht zu scrollen. Texte gekürzt und das Kleingedruckte in zugeklappte `<details class="hint">` gelegt, ebenso die älteren 15 der 20 Protokollzeilen.
|
||||
|
||||
**Geprüft:** 390 × 844 mit Touch-Emulation gegen eine isolierte Kopie der Pilotdatenbank (`tests/pilot-fixture.php`, eigenes Zufallskonto): Dokumentbreite 390 statt 492, kein Element mehr breiter als der Inhaltsbereich, Wortzahl der Seite 1017 → 556, axe ohne Verstöße. `/admin`, `/admin/media`, `/admin/menus`, `/admin/forms`, `/admin/theme`, `/admin/settings` bleiben mobil bei 390 px; dieselben Seiten und `/admin/system` bei 1440 px unverändert breit. Screenshots: `reports/system-mobile/`.
|
||||
|
||||
**Bekannter Fehler, nicht von dieser Aufgabe:** `CmsTest::testAnyPublishedPageCanBecomeTheRootAndEverythingFollows` schlägt fehl (498 Tests, 1 Fehler) – der Test erwartet `<a href="/" aria-current="page">Start</a>`, das Menü schreibt seit den Symbolen `<span class="nav-label">` um die Beschriftung. Auch ohne diese Änderungen und mit beiden PHP-Fassungen reproduzierbar.
|
||||
|
||||
**Nächster Schritt:** Umut spielt `var/kantit.db` auf den Server; erst dort ist das Kopfmenü im Hochformat live. Für die Admin-Änderungen die `VERSION` beim nächsten Release erhöhen, sonst liefert der Browser `admin.css?v=1.13.0` weiter aus dem Zwischenspeicher.
|
||||
|
||||
## 1.14.0 – Öffnungszeiten, Einsatzgebiet und FAQ in den strukturierten Daten; Elektro Bernhard aktualisiert (14.09.2026)
|
||||
|
||||
**Anlass:** Umut nannte die tatsächlichen Bürozeiten (Mo–Fr 7:30–17:00), das Einsatzgebiet von Karlsruhe bis Offenburg und wollte die FAQ „mit allem, was notwendig ist“ – das JSON-LD, das das CMS bisher nicht hergab (siehe Lücke in den Einträgen vom Abgleich).
|
||||
|
||||
**Umgesetzt (ADR 095):** Einstellungen `openingHours` und `areaServed` mit Formular unter Unternehmensdaten; `SiteSettings::organisation()` gibt `openingHoursSpecification` (gleiche Zeiten zusammengefasst) und `areaServed` aus. Akkordeon-Eigenschaft `faq` (Schema v23, Kästchen im Editor); `PageController` baut daraus eine `FAQPage` mit Frage und Antwort aus dem sichtbaren Inhalt. Fünf neue Tests: Zusammenfassung und Reihenfolge der Zeiten, Abweisung unvollständiger oder verdrehter Zeiten, FAQPage nur aus gekennzeichneten Akkordeons und nur mit Antwort, Abweisung der Kennzeichnung vor v23, und – nach einem Fund der vollen Suite – dass ein Bildschirm, der die geladenen Einstellungen unverändert zurückgibt (Anlegen der Rechtsseiten, Installer), Öffnungszeiten und Einsatzgebiet nicht löscht.
|
||||
|
||||
**Elektro Bernhard:** Bürozeiten überall Mo–Fr 07:30–17:00 Uhr (Fuß, Kontakt, Beschreibung, FAQ); Einsatzgebiet Baden-Baden, Sinzheim, Hügelsheim, Iffezheim, Bühl, Rastatt, Kuppenheim, Muggensturm, Gaggenau, Gernsbach, Murgtal, Ettlingen, Karlsruhe, Achern, Oberkirch, Offenburg in Text und `areaServed`; FAQ um „Wann ist das Büro erreichbar?“ und „Wie läuft eine Anfrage ab?“ ergänzt und als FAQ gekennzeichnet. Die Öffnungszeiten weichen bewusst von der laufenden Website ab (dort Mo–Do 7:00–16:30, Fr bis 13:00) – Umuts Angabe gilt.
|
||||
|
||||
**Arbeitsweise:** Weil eine parallele Sitzung im Hauptarbeitsbaum dreizehn Dateien offen hatte, darunter Validator, PageController und Editor, entstand diese Änderung im eigenen Worktree `var/wt-faq` auf dem Zweig `oeffnungszeiten-faq` und wurde von dort auf `main` gebracht. Der Hauptarbeitsbaum muss danach `git pull` ausführen.
|
||||
|
||||
## 1.13.0 – Drei Symbole mehr, gestaltbarer Menü-Knopf, Nachbau „Tagespflege Moldovan“ (14.09.2026)
|
||||
|
||||
**Anlass:** Umut ließ die ZIP-Vorlage „Tagespflege Moldovan“ nachbauen. Beim Nachbau fehlten dem Symbolsatz genau die drei Bilder, die die Vorlage zeigt; danach kamen zwei Meldungen vom Telefon: das Menü sei nicht zu sehen, und „Scroll to top“ funktioniere nicht.
|
||||
|
||||
**Nachbau (`scripts/seed-tagespflege-moldovan.php`, `scripts/reset-tagespflege-moldovan.sh`).** Der Onepager aus dem Paket vom 09.09.2026, gebaut aus gewöhnlichen Bausteinen: Kopfleiste mit Telefonzeile, klebender weißer Kopf mit Wortmarke, Hero mit der limettenen Schnittfläche hinter dem Foto (`clip-path` als eigenes CSS auf einer Fläche), Notizkarte und Bildunterschrift, Werteband, Willkommen mit Porträt-Signatur, drei Angebotskarten, Zeitleiste mit Verbindungslinie aus Flächen, dunkler Kontaktbereich mit schräger Fläche, Formularkarte und Fuß mit limettenem Abschluss. Farben, Schriftgrößen, Abstände und Umbrüche sind aus `style.css` übernommen, ebenso die drei Gerätestufen. Eigene Installation: `var/tagespflege-moldovan.db`, `var/tagespflege-moldovan-media`, Bildquellen in `var/tagespflege-moldovan-assets`, Startkonfiguration auf Port 8089. Zwei bewusste Abweichungen: das Formular verschickt serverseitig statt eine Mailto-Nachricht vorzubereiten, und das Markenzeichen liegt als PNG vor, weil die Medienverwaltung JPEG, PNG und WebP nimmt. Impressum und Datenschutz fehlen wie in der Vorlage – für einen Livegang nachzutragen.
|
||||
|
||||
**Symbole (ADR 094).** `people`, `music` und `home` ergänzen den Satz in `DocumentValidator::ICONS`, `blocks/icon.html.twig`, `editor.js` und `menu-editor.js`. Ein Test hält Liste und Zeichnungen zusammen. `.block-icon .block-icon{color:inherit}` lässt die am Block eingestellte Farbe endlich an der Zeichnung ankommen – das eingebettete SVG trug dieselbe Klasse wie seine Hülle und setzte die Akzentfarbe erneut.
|
||||
|
||||
**Menü-Knopf (ADR 094).** Neue Eigenschaft `burgerLabel` (`both`, `text`, `icon`; „Nur Symbol“ behält den Namen als `visually-hidden`) und die neue Stilgruppe `menu` mit dem Ziel `burger`: `burgerColor`, `burgerBackgroundColor`, `burgerBorderColor`, `burgerBorderWidth`, `burgerBorderRadius`, `burgerFontSize`. Der Compiler schreibt `#id .menu-burger>summary{…}`. Im Kopfbereich klappt das Menü als Fläche über die volle Breite unter den Kopf auf statt inline in der schmalen Spalte neben der Marke – das war die gemeldete „unsichtbare“ Navigation.
|
||||
|
||||
**Nach-oben-Knopf (ADR 094).** Die Einblendung hängt nicht mehr an `animation-timeline: scroll()`, sondern an den Klassen `kant-top-armed` und `kant-top-shown`, die `scrolled.js` setzt; das Skript wird jetzt auch geladen, wenn nur dieser Knopf es braucht. Ohne Skript bleibt der Knopf sichtbar.
|
||||
|
||||
**Geprüft:** PHP-Suite 498 Tests (fünf neue: Symbolliste gegen Zeichnungen, drei Knopfvarianten, abgewiesene Variante, Knopffarben am `summary`); einziger Fehlschlag ist der bekannte Altfehler `testAnyPublishedPageCanBecomeTheRoot…`. 33 JavaScript-Tests, Twig-Lint, PHP-Stilprüfung sauber, Editor-Browserprüfung vollständig erfolgreich einschließlich axe. Playwright auf dem Nachbau bei 1440, 900 und 390 px sowie als iPhone 13: Seite gegen die Vorlage verglichen, Menü öffnet als Fläche unter dem Kopf, Sprungziele, 404-Seite, keine Konsolenfehler. Nach-oben-Knopf auf der Elektro-Bernhard-Installation als iPhone geprüft: oben verborgen, ab der Schwelle sichtbar, springt an den Anfang.
|
||||
|
||||
**Veröffentlicht:** Commit `73719ba` und Tag `v1.13.0` auf `origin`; [Release 1.13.0](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.13.0) mit ZIP (3546 Dateien, 4,6 MB), SHA-256-Datei und `install.php`. Das Archiv wurde aus einem sauberen Worktree des Tags gebaut (`var/release-source-1.13.0`), `vendor/` ohne Entwicklungspakete; die einzige `.env` im Archiv ist die Vorlage ohne Geheimnis. Die drei Anhänge wurden anonym von der Releaseadresse geladen und bytegenau mit den gebauten Dateien verglichen; SHA-256 `14e333e0…59dcbf`, identisch mit der Prüfsumme, die `install.php` mitbringt.
|
||||
|
||||
## 1.12.1 – Elektro Bernhard gemessen: Lighthouse und axe (14.09.2026)
|
||||
|
||||
**Anlass:** Umut fragte nach Google-Bewertung, SEO, llms.txt und Barrierefreiheit der neuen Website.
|
||||
|
||||
**Ergebnis:** Lighthouse-Mediane auf vier Seiten, Mobil und Desktop: alles 100, nur die mobile Startseite hat Leistung 99 (LCP 2,1 s durch das Hero-Foto). axe auf sechs Seiten in zwei Breiten: null Verstöße. Details und Messbedingungen in `docs/QUALITY.md`.
|
||||
|
||||
**Behoben:** drei Kontrast-/Gliederungsbefunde in der Website (Skript) und einer im CMS: der Pause-Knopf des Sliders verletzte WCAG 2.5.3 (sichtbarer Text „Pause“, Name „Automatische Wiedergabe pausieren“); `slider.js` bildet den Namen jetzt aus dem sichtbaren Text, `scripts/admin-quality-check.mjs` folgt.
|
||||
|
||||
**Veröffentlicht:** Commit `042aef9` und Tag `v1.12.1` auf `origin`; [Release 1.12.1](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.12.1) mit ZIP (3546 Dateien, 4,6 MB), SHA-256-Datei und `install.php`, gebaut aus dem sauberen Worktree `var/release-source-1.12.1`; alle drei Anhänge anonym geladen und bytegenau verglichen, SHA-256 `c7a2de81…8f1a23`.
|
||||
|
||||
## 1.12.0 – Soziale Profile als Baustein; Elektro Bernhard neu gestaltet (14.09.2026)
|
||||
|
||||
**Anlass:** Umut fand den ersten Nachbau „grauenhaft“, fragte nach dem transparenten Menü und vermisste Social-Icons im CMS – „gescheit“, also einmal zentral gepflegt und überall mit eigener Größe und Farbe einsetzbar.
|
||||
|
||||
**Soziale Profile (Dokumentschema v23, ADR 093).** Unter Einstellungen → Unternehmensdaten gibt es je Netzwerk ein Adressfeld (`SocialProfiles::NETWORKS`: Facebook, Instagram, LinkedIn, YouTube, TikTok, X, Threads, Pinterest, Xing, WhatsApp, Google-Unternehmensprofil; nur HTTPS). Der neue Baustein `social` (Werkzeugkasten → Bausteine → „Soziale Profile“) zeigt sie und bestimmt Größe (die 15 Symbolstufen), Form (nur Symbol, runde oder eckige Fläche), Anordnung, Beschriftung, neuen Tab und optional eine Teilmenge der Netzwerke; Farbe, Hover-Farbe, Abstand und Ausrichtung kommen aus den freien Blockstilen. Die Vorlage liest die Profile über das Twig-Global `siteSettings`, ohne Profile gibt sie nichts aus und zeigt im Editor einen Hinweis. Die Adressen stehen automatisch in `sameAs` der strukturierten Daten. Symbole sind eigene Umrisszeichnungen im Strich des Symbolsatzes. Neue Dateien `src/Content/SocialProfiles.php`, `templates/blocks/social-icon.html.twig`; Änderungen an Validator, Einstellungen, Controller, Vorlagen, `site.css`, Editor (Modell, Eigenschaften, Bibliothekssymbol).
|
||||
|
||||
**Zur Frage nach dem transparenten Menü:** Nein, im ersten Nachbau war der Kopf weiß. Jetzt nutzt die Website den Mechanismus aus 1.11.1: `headerOverlay` und `stickyHeader` an, Kopfsektion mit `#ffffff00` als Hintergrund und Weiß mit Schatten `scrolled`. Das Logo (schwarze Schrift, transparenter Grund) sitzt auf einer weißen Fläche, damit es über dem dunklen Foto lesbar bleibt.
|
||||
|
||||
**Elektro Bernhard neu gestaltet** (`scripts/seed-elektro-bernhard.php`, vollständig neu geschrieben): dunkler Hero mit dem Teamfoto als Hintergrund und Überlagerung, Lato aus dem lokalen Schriftordner, Versal-Kleinzeilen in Rot, Leistungskarten mit Symbolfläche, Schatten und Hover-Lift, Foto mit starkem Schatten neben Text und vier Stärken, Kundenstimmen als Slider mit sechs echten Rezensionen (Punkte, Automatik 7 s), dunkles Solarband mit dunkler Karte, Akkordeon in weichen Kästen, Formular als weiße Karte, jede Unterseite mit dunklem Seitenkopf unter dem schwebenden Kopfbereich, Handlungsaufruf als dunkle Karte, Einblendungen mit gestaffelten Verzögerungen auf allen Abschnitten. Soziale Profile in der Kopfleiste (16 px, nur Symbol, auf dem Telefon ausgeblendet) und im Fuß (20 px, runde Fläche, Hover rot). „Nach oben“-Knopf in Rot. Keine Änderung am CMS-Code außer dem Baustein.
|
||||
|
||||
**Geprüft:** PHP-Suite 492 Tests, davon vier neue für die Profile (Darstellung, Teilmenge, Beschriftung, neuer Tab, sameAs, Abweisung falscher Werte, HTTP-Adresse); einziger Fehlschlag ist der bekannte Altfehler `testAnyPublishedPageCanBecomeTheRoot…`. 33 JavaScript-Tests, Twig-Lint, PHP-Stilprüfung (Fixer angewendet). Editor-Browserprüfung vollständig erfolgreich einschließlich axe. In der App-Vorschau: Startseite von oben bis unten, Kopf transparent und nach Scrollen weiß, Leistungsseite, Einstellungen mit den elf Profilfeldern, Fußbereich im Editor mit geöffnetem Eigenschaftenfeld des Bausteins (Größe, Form, Anordnung, Beschriftung, Tab, Netzwerke, Sichtbarkeit); Mobilansicht 375 px mit Hamburger, Kopfleiste einzeilig. Alle Adressen 200, `/gibtsnicht` 404, `sameAs` mit drei Profilen.
|
||||
|
||||
**Veröffentlicht:** Commit `fd4cb75` und Tag `v1.12.0` auf `origin`; [Release 1.12.0](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.12.0) mit ZIP (3546 Dateien, 4,6 MB), SHA-256-Datei und `install.php`. Das Archiv wurde aus einem sauberen Worktree des Tags gebaut (`var/release-source-1.12.0`), die drei Anhänge anonym von der Releaseadresse geladen und bytegenau mit den gebauten Dateien verglichen; SHA-256 `5cc745f6…d5195e`. Während dieser Arbeit hatte eine parallele Sitzung 1.11.3 und 1.11.4 veröffentlicht und `VERSION` zurückgesetzt; 1.12.0 folgt darauf, weil ein neuer Baustein und ein neues Schema kein Patch sind.
|
||||
|
||||
## Tagespflege Moldovan – getrennte Installation vorbereitet (14.09.2026, Nachbau offen)
|
||||
|
||||
Auftrag: ZIP-Vorlage exakt nachbauen, eigene Datenbank und Medien; ausdrücklich keine CMS-Codeänderung, Inhalte und Gestaltung ausschließlich über die vorhandene Editoroberfläche bearbeitbar aufbauen.
|
||||
|
||||
Vorlage gefunden unter `C:/Users/UmutKantarci/AppData/Local/Temp/codex-file-preview-oZxj9Z/Tagespflege_Moldovan_Website.zip`, sicher nach `var/tagespflege-moldovan-source` entpackt. Enthält einen Onepager, CSS/JS, zwei Fotos und `marke.svg`; die unbenutzte Datei `Schmetterling_Moldovan.png` ist leer. Formular bereitet nur eine Mailto-Nachricht vor, Rechtstexte fehlen in der Vorlage.
|
||||
|
||||
Angelegt: `var/tagespflege-moldovan.db`, alle 15 Migrationen erfolgreich; separates `var/tagespflege-moldovan-media`; Startkonfiguration `tagespflege-moldovan` auf Port 8089. Über die Installationsoberfläche Website-Grundgerüst angelegt. Bestehende `.env` nach den Installeränderungen bytegleich aus der vorher angelegten Sicherung wiederhergestellt; die neue Installation verwendet Prozessvariablen. Keine Änderungen am CMS-Code durch diese Aufgabe.
|
||||
|
||||
Noch offen: Erstes Administratorkonto im geöffneten Browser unter `http://127.0.0.1:8089/install/konto` fertigstellen und anmelden. Automatische Freigabeprüfung wies zuvor den kombinierten Shellbefehl für Kontoanlage und Serverstart ab (keine genauere Begründung); der verworfene Setuphelfer wurde entfernt und nicht ausgeführt. Server separat erfolgreich gestartet. Danach den eigentlichen Nachbau vollständig im Editor durchführen, Medien hochladen, Desktop/Mobil vergleichen und Speichern/Neuladen prüfen. **Noch kein Vorlagennachbau und keine visuelle Abnahme.**
|
||||
|
||||
## 1.11.4 – Slider-Steuerung auf dem Bild wie bei kant-it.de (14.09.2026)
|
||||
|
||||
**Anlass:** Umut wollte nicht die Knopfleiste unter dem Slider, sondern das Design des Hero-Sliders auf www.kant-it.de (eigenes Plugin, kein Flatsome-Slider): runde weiße Pfeile auf dem Bild, Punkte unten rechts mit aktivem Strich in der Akzentfarbe, keine Zählerleiste, Pfeile auf dem Handy aus.
|
||||
|
||||
**Umgesetzt:** `slider.js` legt Slider und Steuerung in eine `.slider-shell` (beim Aufräumen wieder entpackt) und benennt Pfeile und Pause (`slider-prev/next/play`, `data-playing`); `site.css` zeichnet die Steuerung als Ebene über dem Bild: Pfeile 50 px rund mit Chevron, Punkte 9 px (aktiv 28 px Strich), Pause 32 px unten rechts, Zähler nur noch für Vorlesesoftware, Pfeile unter 600 px ausgeblendet. Neue Gestaltungseigenschaft „Aktiver Punkt“ (`sliderDotActiveColor`, `--slider-dot-active`). Der Compiler-Selektor `#id + .slider-controls` gilt in der Shell weiterhin.
|
||||
|
||||
**Geprüft:** Playwright auf der Pilotkopie bei 1600 und 390 px: Pfeile mittig links/rechts (Desktop) bzw. ausgeblendet (Mobil), Punkte und Pause unten rechts innerhalb des Bildes, Screenshots `reports/editor/slider-design-*.png` visuell geprüft. Zwei gezielte PHP-Tests, 33 JavaScript-Tests, Editor-Browserprüfung vollständig erfolgreich.
|
||||
|
||||
**Veröffentlicht:** Commit `cef710d` und Tag `v1.11.4` auf `origin`; [Release 1.11.4](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.11.4). Weil parallel die Arbeit an „Soziale Profile“ (1.12.0) im selben Arbeitsbaum lief, wurden nur die eigenen Hunks committed und das Archiv (3544 Dateien, 4,6 MB) aus einem sauberen Worktree des Tags gebaut; Anhänge anonym heruntergeladen und bytegenau verglichen, SHA-256 `53904dea…9a663b`.
|
||||
|
||||
## Elektro Bernhard: Abgleich mit dem bestehenden Auftritt, SEO nachgezogen (14.09.2026)
|
||||
|
||||
**Anlass:** Umut bat darum, den Nachbau gegen die laufende Website `elektro-bernhard.de` zu halten und SEO nachzuholen.
|
||||
|
||||
**Dabei zwei Falschangaben gefunden und korrigiert.** Das gelieferte HTML-Paket ordnete zwei Google-Rezensionen falsch zu: „Super Firma und einfach tolle Mitarbeiter“ stammt von **Redzepi Samir** (26.10.2024), nicht von Philipp Bender; Philipp Bender (26.11.2024) hat die Architekten-Rezension geschrieben. Der dritte Eintrag des Pakets war eine selbst formulierte Zusammenfassung statt der tatsächlichen Worte. Die Zuordnung ist am DOM der Live-Seite geprüft (`.wprevpro_t1_DIV_1`: erst Text, dann Name, dann Datum), nicht aus der flachen Textfassung geraten. Jetzt stehen drei Rezensionen im Originalwortlaut mit richtigem Namen und Datum; der Hinweis darunter nennt den Stand und sagt ausdrücklich, dass kein Gesamtdurchschnitt ausgewiesen wird.
|
||||
|
||||
**Aus dem bestehenden Auftritt nachgeholt:** die sechs Stärken („Kundenzufriedenheit“, „Qualität“, „Erfahrung“, „Flexibel“, „Professionell“, „Schnell & sauber“), die das Paket zu drei Absätzen Fließtext zusammengezogen hatte – jetzt als Symbolkarten auf der Leistungsübersicht, die dadurch von 8 auf 23 Bausteine wächst. Dazu der Handlungsaufruf „Projekt geplant? Wir sind bereit.“ als `cta`-Baustein auf der Übersicht und auf allen vier Leistungsseiten. Das Einsatzgebiet nennt jetzt auch Kuppenheim, Gaggenau, Gernsbach und Muggensturm – Orte, die der bestehende Auftritt in seinen eigenen Keywords führt.
|
||||
|
||||
**SEO:** `sameAs` mit den drei Profilen, die die Live-Seite selbst verlinkt (Google-Unternehmensprofil, Facebook, Instagram) – sie stehen jetzt in den strukturierten Daten. Unternehmensbeschreibung auf Leistungen, Notdienstnummer und Bürozeiten erweitert; sie ist zugleich die Zusammenfassungszeile in `llms.txt`. Vorschaubild beim Teilen gesetzt (Startseite Teamfoto, Leistungsseiten Installationsmotiv), womit `og:image` und `twitter:card: summary_large_image` ausgeliefert werden statt einer Textkarte. Meta-Beschreibungen liegen zwischen 110 und 159 Zeichen.
|
||||
|
||||
`llms.txt` gab es schon seit dem Aufbau (Einstellung `llmsTxt`); es listet alle zehn indexierbaren Seiten mit Beschreibung.
|
||||
|
||||
**Bewusst nicht per Skript gesetzt:** der Auszug (`excerpt`) je Seite. Das Feld erscheint in der Verwaltung nur bei Beiträgen; ein per SQL geschriebener Wert wäre unsichtbar und würde beim nächsten Speichern der Seitendaten stillschweigend gelöscht. `llms.txt` nimmt ersatzweise die Seitenbeschreibung, und die ist im Editor bearbeitbar.
|
||||
|
||||
**Offene Lücke gegenüber dem HTML-Paket:** dessen JSON-LD enthielt `openingHoursSpecification`, `areaServed`, einen `contactPoint` für den Notdienst sowie `FAQPage` und `Service`. Das CMS kennt diese Felder nicht – es liefert `LocalBusiness` (Name, Adresse, Telefon, E-Mail, `sameAs`) und `BreadcrumbList`. Das nachzurüsten ist eine Kernerweiterung (Einstellungen, `SiteSettings::organisation()`, FAQ aus Akkordeons ableiten) mit eigenem Release, nicht eine Änderung an dieser Website. Noch nicht umgesetzt, nicht beauftragt.
|
||||
|
||||
**Geprüft:** Alle zehn Adressen 200, `/gibtsnicht` 404, `llms.txt` und `sitemap.xml` ausgeliefert; strukturierte Daten, `og:image` und `twitter:card` im Quelltext kontrolliert; Leistungsübersicht, Leistungsseite und Kundenstimmen in der App-Vorschau angesehen; keine Konsolenfehler. Das größte Dokument (Startseite) liegt bei 117 Bausteinen und 27 KiB – Grenze sind 300 und 256 KiB.
|
||||
|
||||
## 1.11.3 – Farben der Slider-Steuerung (14.09.2026)
|
||||
|
||||
**Anlass:** Umut will die Punktfarben am Slider einstellen; auf dem dunklen Hero waren die Standardfarben (dunkle Punkte, weiße Knöpfe) nicht anpassbar.
|
||||
|
||||
**Umgesetzt:** Drei Gestaltungseigenschaften in der neuen Gruppe „Slider-Steuerung“ (`sliderDotColor`, `sliderControlColor`, `sliderControlBackground`) mit dem Ziel `controls`: der Compiler schreibt sie als `--slider-dot`, `--slider-ink`, `--slider-bg` auf den Slider und auf die vom Skript dahinter eingefügte Steuerleiste (`#id,#id + .slider-controls{…}`); `site.css` liest die Variablen für Punkte, Pfeile, Zähler, Knopfhintergrund und die skriptfreien `::scroll-marker`. Die Gruppe erscheint nur an Slidern (`relevantProperty`).
|
||||
|
||||
**Geprüft:** Neuer Test `testSliderControlsTakeTheirColoursFromTheSliderStyle` (Ausgabe mit Hex- und Palettenfarbe). Playwright im Editor der Pilotkopie: Gruppe am Hero-Slider vorhanden, Punktfarbe `#ff0000` gesetzt, Regel in der Vorschau angekommen, Punkt bei „Bewegung abspielen“ rot gezeichnet. 33 JavaScript-Tests, Editor-Browserprüfung vollständig erfolgreich.
|
||||
|
||||
**Veröffentlicht:** Commit `6dc30a4` und Tag `v1.11.3` auf `origin`; [Release 1.11.3](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.11.3) mit ZIP (3548 Dateien), SHA-256-Datei und `install.php` als neuestes stabiles Release; Anhänge anonym heruntergeladen und bytegenau verglichen, SHA-256 `a9536289…f45a24`. Der Commit enthält auch den parallel entstandenen Statuseintrag zur Elektro-Bernhard-Referenzwebsite; deren Skripte sind noch nicht committed.
|
||||
|
||||
## Zweite Referenzwebsite: Elektro Bernhard in eigener Datenbank (14.09.2026)
|
||||
|
||||
**Anlass:** Umut hat das fertige statische Paket `Elektro-Bernhard-Website` (HTML/CSS/JS, erstellt 12.09.2026) geliefert mit dem Auftrag, es vollständig im CMS nachzubauen – eigene Datenbank, eigener Medienordner, im Editor bearbeitbar.
|
||||
|
||||
**Umgesetzt:** Neue Installation neben dem Kant-IT-Piloten, nach demselben Muster: Datenbank `var/elektro-bernhard.db` (alle 15 Migrationen), Medien in `var/elektro-bernhard-media`, Startkonfiguration `elektro-bernhard` auf Port 8088 in `.claude/launch.json`. Aufgebaut wird sie von `scripts/seed-elektro-bernhard.php` (Neuaufbau mit `scripts/reset-elektro-bernhard.sh`), damit der Bestand reproduzierbar ist und nicht von Hand zusammengeklickt werden muss.
|
||||
|
||||
Inhalt: elf Seiten (Startseite, Leistungsübersicht mit vier Leistungsseiten, Kontakt, Solarenergie, Impressum, Datenschutz, 404), Kopf- und Fußbereich als gemeinsame Bereiche, vier Menüs (Haupt, Notdienst, Fuß, Rechtliches), Kontaktformular mit sechs Feldern, drei Bilder aus dem Original in der Mediathek, Palette und Schrift der Vorlage im Design, drei Weiterleitungen. Alles besteht aus vorhandenen Bausteinen – Abschnitt, Zeile, Spalte, Überschrift, Text, Bild, Symbolkarte, Kennzahl, Zitat, Akkordeon, Kontakt, Formular, Brotkrumen, Menü, Rechtszeile, Trennlinie. Kein neuer Bausteintyp, keine Änderung am CMS-Code.
|
||||
|
||||
**Drei Stellen weichen bewusst ab, weil das Schema sie so verlangt:**
|
||||
|
||||
- `/leistungen/…` braucht im CMS eine übergeordnete Seite; die Vorlage hatte nur den Anker `/#service`. Es gibt deshalb zusätzlich eine Leistungsübersicht unter `/leistungen`, und `/service` leitet dorthin.
|
||||
- Eine Weiterleitung zeigt auf einen Pfad, nicht auf ein Sprungziel: `/ueber-uns` landet auf der Startseite, die den Abschnitt trägt, statt auf `/#ueber-uns`.
|
||||
- Ein Button verlinkt nur lokale Pfade, Sprungziele und HTTPS. Die Telefonnummern der Vorlage sind deshalb Kontakt-Bausteine (mit `tel:`-Verweis), gestaltet wie der zweite Button der Vorlage.
|
||||
|
||||
Für drei Feinheiten, die die Gestaltungsfelder nicht erreichen (Symbolfarbe in der Karte, Sternfarbe im Zitat, Pluszeichen im Akkordeon), steht je zwei Zeilen unter „Eigenes CSS“ am Baustein – im Editor sichtbar und änderbar.
|
||||
|
||||
**Geprüft:** Alle elf Adressen antworten mit 200, `/gibtsnicht` mit der eigenen 404-Seite, die drei Weiterleitungen mit 301 auf das erwartete Ziel; `sitemap.xml`, `robots.txt` und `llms.txt` werden ausgeliefert. In der App-Vorschau Startseite von oben bis unten mit der Vorlage verglichen (Hero, Leistungen, Über uns mit Kennzahlen, Marken, Kundenstimmen, Solar, Fragen, Kontakt, Notdienststreifen, Fuß), dazu Leistungsseite und Impressum; auf 375 px Kopfleiste ohne Adresse und Hamburger-Menü mit den vier Originaleinträgen. Im Editor ist die Startseite geladen, der Strukturbaum zeigt den vollständigen Baum, ein Textbaustein lässt sich auswählen und über das Eigenschaftenfeld bearbeiten. Keine Konsolenfehler auf der öffentlichen Seite.
|
||||
|
||||
**Nicht geprüft:** Kein Formularversand (keine Mailzustellung lokal), keine Lighthouse-Messung, kein Livegang. Die Rechtstexte stammen aus der Vorlage; im Datenschutz ist der Abschnitt zum Formular auf den Serverversand des CMS umgeschrieben und als „NOCH ZU PRÜFEN“ markiert, weil Hoster und Aufbewahrungsdauer offen sind.
|
||||
|
||||
## 1.11.2 – Slider stottert nicht mehr auf dem iPhone (14.09.2026)
|
||||
|
||||
**Anlass:** Umuts iPhone-Screenshot des Hero-Sliders („das buggt“). Safari bricht `scrollTo({behavior:'smooth'})` in einem Container mit `scroll-snap-type: x mandatory` ab und rastet auf die vorige Folie zurück; Pfeile und Automatik ruckeln.
|
||||
|
||||
**Umgesetzt:** `slider.js` schaltet das Einrasten für die Fahrt aus und stellt es bei Ankunft am Zielwert wieder her (spätestens nach zwei Sekunden, weil ein Hintergrund-Tab sanftes Scrollen pausiert); bei reduzierter Bewegung weiter sofortiges Springen. Die Punkte der Steuerung sind gezeichnete Punkte (aktiv gefüllt) statt eines Kastens um den Text, Trefffläche bleibt 44 px.
|
||||
|
||||
**Geprüft:** Playwright auf der Pilotkopie bei 375 und 1600 px: „Nächste Folie“ landet exakt auf dem Folienanfang (359 bzw. 666 px), Einrasten danach wieder `x mandatory`, Automatik blättert nach 7 s selbst weiter; 33 JavaScript-Tests. Der Safari-Fall selbst ist hier nicht ausführbar; die Maßnahme ist die dokumentierte Umgehung dieses WebKit-Verhaltens. Editor-Browserprüfung vollständig erfolgreich.
|
||||
|
||||
**Veröffentlicht:** Commit `769b0fa` und Tag `v1.11.2` auf `origin`; [Release 1.11.2](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.11.2) mit ZIP (3549 Dateien), SHA-256-Datei und `install.php` als neuestes stabiles Release; Anhänge anonym heruntergeladen und bytegenau verglichen, SHA-256 `548e1bf0…ba4a07`.
|
||||
|
||||
## 1.11.1 – Kopfbereich mit Scroll-Farben, gleich hohe Karten (14.09.2026)
|
||||
|
||||
**Anlass:** Umut sah auf der Startseite ungleich hohe Karten und wünschte sich für den Kopfbereich einstellbare Transparenz-Effekte beim Scrollen, wie in Flatsome.
|
||||
|
||||
**Umgesetzt:** (1) `.block-iconcard + .block-iconcard` und die verwandten Stapelabstände gelten in `.block-row` nicht mehr; die Karten in einer Zeile sind gleich hoch. (2) Neuer Zustand `scrolled` neben `hover` in der Gestaltung: `StyleSchema::scrollable()` (Hintergrund-, Text-, Rahmen-, Schattenfarbe, Deckkraft), Prüfung im `StyleCompiler`, Ausgabe als `html.is-scrolled #id{…}` mit Übergang; Design-Panel zeigt „… beim Scrollen“ nur im Kopfbereich; `scrolled.js` markiert die Seite ab 40 px, wird nur geladen, wenn der Kopfbereich Scroll-Werte hat (Seiten und Archive, CSP entsprechend); die Editor-Vorschau setzt die Klasse selbst. Neue Einstellung „Kopfbereich über dem Inhalt schweben lassen“ (`headerOverlay`, Klasse `is-overlay`, absolut bzw. fixiert mit „oben halten“). ADR 092.
|
||||
|
||||
**Geprüft:** Neuer Test `testAHeaderCanChangeItsColoursOnceThePageHasScrolled` (Ausgabe, Skript, CSP, Ablehnung unzulässiger Scroll-Werte); PHP-Suite 485 Tests grün bis auf den bekannten Altfehler. In der App-Vorschau: sechs Leistungskarten 227 px, Kundenstimmen 232 px, „Warum“-Karten 191 px, gestapelte Karten behalten 18 px. Scroll-Farbe im Kopfbereich-Editor über das Farbfeld gesetzt, in der Vorschau als Regel angekommen und gespeichert. 33 JavaScript-Tests, Twig-Lint. Editor-Browserprüfung siehe Veröffentlichung.
|
||||
**Geprüft:** Neuer Test `testAHeaderCanChangeItsColoursOnceThePageHasScrolled` (Ausgabe, Skript, CSP, Ablehnung unzulässiger Scroll-Werte); PHP-Suite 485 Tests grün bis auf den bekannten Altfehler. In der App-Vorschau: sechs Leistungskarten 227 px, Kundenstimmen 232 px, „Warum“-Karten 191 px, gestapelte Karten behalten 18 px. Scroll-Farbe im Kopfbereich-Editor über das Farbfeld gesetzt, in der Vorschau als Regel angekommen und gespeichert. 33 JavaScript-Tests, Twig-Lint aller 49 Vorlagen, PHP-Stilprüfung. Editor-Browserprüfung vollständig erfolgreich, einschließlich aller axe-Prüfungen.
|
||||
|
||||
**Veröffentlicht:** Commit `3785d3d` und Tag `v1.11.1` auf `origin`; [Release 1.11.1](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.11.1) mit ZIP (3547 Dateien, 4,7 MB), SHA-256-Datei und `install.php` als neuestes stabiles Release angelegt. Anhänge anonym heruntergeladen und bytegenau mit dem lokalen Build verglichen; SHA-256 `970a12bc…6ff306`.
|
||||
|
||||
## Kant-IT-Startseite: Einblendungen nach Flatsome-Muster in `var/kantit.db` (14.09.2026)
|
||||
|
||||
|
||||
+45
-3
@@ -211,13 +211,37 @@ label { display: block; margin: 18px 0 7px; font-size: 13px; font-weight: 600 }
|
||||
.shell-heading p { font-size: 13px; margin: 7px 0 0; max-width: 62ch }
|
||||
.shell-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
|
||||
.shell-body { padding: 30px 38px 60px; max-width: 1180px; width: 100% }
|
||||
.stack { display: grid; gap: 20px }
|
||||
/* Eine Spalte, die nie breiter wird als der Bildschirm: ohne `minmax(0, 1fr)` waechst
|
||||
die automatische Rasterspalte auf die Mindestbreite ihres breitesten Inhalts - auf dem
|
||||
Handy schiebt eine einzige lange Pfadangabe dann die ganze Seite zur Seite. */
|
||||
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px }
|
||||
|
||||
.notice { padding: 13px 17px; border-radius: 8px; line-height: 1.6; font-size: 13px; margin: 0 }
|
||||
.notice.ok { background: #edf3dc; color: #2c5340; border: 1px solid #c5d89a }
|
||||
.error, .notice.error { background: #fff0eb; color: var(--danger); border: 1px solid #e2b2a7 }
|
||||
.shell-body > .notice { margin-bottom: 4px }
|
||||
|
||||
/* Der Hinweisstreifen ueber jedem Verwaltungsbildschirm: eine Sache, die getan werden will, und
|
||||
gleich daneben der Knopf, der sie tut. Warm statt rot - es ist eine Aufgabe, kein Fehler. */
|
||||
.shell-notice {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px 18px;
|
||||
margin: 0 0 4px;
|
||||
padding: 12px 14px 12px 17px;
|
||||
border: 1px solid #e3cf9b;
|
||||
border-radius: 10px;
|
||||
background: #fdf6e4;
|
||||
color: #5b4412;
|
||||
line-height: 1.6;
|
||||
font-size: 13px;
|
||||
}
|
||||
.shell-notice > span { min-width: 0; flex: 1 1 260px }
|
||||
.shell-notice .secondary { flex: none; border-color: #dcc48a; background: var(--paper); color: #5b4412 }
|
||||
.shell-notice .secondary:hover { background: #fbeecd; border-color: #cbb072 }
|
||||
|
||||
/* ---- cards and sections ---------------------------------------------------------------- */
|
||||
|
||||
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px }
|
||||
@@ -232,7 +256,12 @@ label { display: block; margin: 18px 0 7px; font-size: 13px; font-weight: 600 }
|
||||
}
|
||||
.card-head h2, .card-head h3 { margin: 0 }
|
||||
.card-head .muted { font-size: 12px }
|
||||
.card-body { padding: 8px 22px 24px }
|
||||
.card-body { padding: 8px 22px 24px; min-width: 0 }
|
||||
.card-body code { overflow-wrap: anywhere }
|
||||
/* Das Kleingedruckte einer Karte: zugeklappt, damit auf einem Handy der Knopf oben bleibt. */
|
||||
.hint { margin: 12px 0 0 }
|
||||
.hint > summary { font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 44px; display: flex; align-items: center }
|
||||
.hint[open] > summary { margin-bottom: 2px }
|
||||
/* A heading for a group of rows, outside any card. */
|
||||
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin: 16px 2px -6px }
|
||||
.section-head h2 { margin: 0 }
|
||||
@@ -550,6 +579,18 @@ details.card > summary:hover { background: #fafbf8 }
|
||||
.row.depth-1, .row.depth-2, .row.depth-3 { margin-left: 14px }
|
||||
.login-card { padding: 26px }
|
||||
.login-body { padding: 16px }
|
||||
/* Zwei Rasterspalten aus Bezeichner und Wert sind auf einem Handy eine Spalte zu viel. */
|
||||
.facts { grid-template-columns: minmax(0, 1fr); gap: 2px }
|
||||
.facts dt { margin-top: 10px }
|
||||
.facts dt:first-child { margin-top: 0 }
|
||||
/* Eine sechsspaltige Tabelle passt auf kein Handy. Jede Zeile wird zu einem Block, und die
|
||||
Spaltenueberschrift steht als Bezeichner vor ihrem Wert. */
|
||||
.table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
|
||||
.table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100% }
|
||||
.table-stack tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 10px }
|
||||
.table-stack tbody tr + tr td { border-top: 0 }
|
||||
.table-stack td { display: flex; gap: 14px; justify-content: space-between; align-items: baseline; padding: 5px 0; text-align: right }
|
||||
.table-stack td::before { content: attr(data-label); color: var(--muted); text-align: left; flex: none }
|
||||
}
|
||||
|
||||
/* A group of related checkboxes needs a name of its own, not just a label per box. */
|
||||
@@ -586,11 +627,12 @@ details.card > summary:hover { background: #fafbf8 }
|
||||
|
||||
/* ---- system: preflight, update steps, log ---------------------------------------------- */
|
||||
|
||||
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 14px 0 0; font-size: 13px }
|
||||
.facts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 20px; margin: 14px 0 0; font-size: 13px }
|
||||
.facts dt { color: var(--muted) }
|
||||
.facts dd { margin: 0; overflow-wrap: anywhere }
|
||||
.check-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font-size: 13px; line-height: 1.55 }
|
||||
.check-list li { display: flex; gap: 11px; align-items: flex-start }
|
||||
.check-list li > span { min-width: 0; overflow-wrap: anywhere }
|
||||
.check-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
@@ -18,6 +18,8 @@ export const GROUPS = {
|
||||
image: 'Bild',
|
||||
layout: 'Layout',
|
||||
effect: 'Wirkung',
|
||||
menu: 'Menü-Knopf',
|
||||
slider: 'Slider-Steuerung',
|
||||
};
|
||||
|
||||
// dvh before vh: on a phone 100vh is taller than the screen, 100dvh is what people mean.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export const labels = { section: 'Sektion', row: 'Zeile', column: 'Spalte', heading: 'Überschrift', text: 'Text', image: 'Bild', button: 'Button', gallery: 'Galerie', postlist: 'Beitragsliste', postnav: 'Beitragsnavigation', iconcard: 'Symbolkarte', stat: 'Kennzahl', quote: 'Kundenstimme', logos: 'Logoleiste', cta: 'Aufruf-Band', contact: 'Kontaktdaten', divider: 'Trennlinie', spacer: 'Abstand', accordion: 'Akkordeon', accordionitem: 'Akkordeon-Eintrag', tabs: 'Tabs', tabitem: 'Tab', form: 'Formular', breadcrumb: 'Brotkrumen', menu: 'Navigation', partialref: 'Verknüpfte Sektion', embed: 'Externer Inhalt', icon: 'Symbol', progress: 'Fortschritt', slider: 'Slider' , legal: 'Rechtszeile'};
|
||||
export const icons = { section: '▣', row: '☰', column: '▥', heading: 'H', text: 'T', image: '▧', button: '↗', gallery: '▦', postlist: '☷', postnav: '⇄', iconcard: '◈', stat: '№', quote: '❝', logos: '⬚', cta: '◉', contact: '✆', divider: '—', spacer: '⇳', accordion: '⌵', accordionitem: '·', tabs: '▭', tabitem: '▫', form: '✉', breadcrumb: '⟩', menu: '☰', partialref: '⧉', legal: '§', embed: '⬓', icon: '◆', progress: '▰', slider: '⇄' };
|
||||
export const labels = { section: 'Sektion', row: 'Zeile', column: 'Spalte', heading: 'Überschrift', text: 'Text', image: 'Bild', button: 'Button', gallery: 'Galerie', postlist: 'Beitragsliste', postnav: 'Beitragsnavigation', iconcard: 'Symbolkarte', stat: 'Kennzahl', quote: 'Kundenstimme', logos: 'Logoleiste', cta: 'Aufruf-Band', contact: 'Kontaktdaten', divider: 'Trennlinie', spacer: 'Abstand', accordion: 'Akkordeon', accordionitem: 'Akkordeon-Eintrag', tabs: 'Tabs', tabitem: 'Tab', form: 'Formular', breadcrumb: 'Brotkrumen', menu: 'Navigation', partialref: 'Verknüpfte Sektion', embed: 'Externer Inhalt', icon: 'Symbol', progress: 'Fortschritt', slider: 'Slider', legal: 'Rechtszeile', social: 'Soziale Profile' };
|
||||
export const icons = { section: '▣', row: '☰', column: '▥', heading: 'H', text: 'T', image: '▧', button: '↗', gallery: '▦', postlist: '☷', postnav: '⇄', iconcard: '◈', stat: '№', quote: '❝', logos: '⬚', cta: '◉', contact: '✆', divider: '—', spacer: '⇳', accordion: '⌵', accordionitem: '·', tabs: '▭', tabitem: '▫', form: '✉', breadcrumb: '⟩', menu: '☰', partialref: '⧉', legal: '§', embed: '⬓', icon: '◆', progress: '▰', slider: '⇄', social: '⚭' };
|
||||
// A namespaced type belongs to a plugin this installation may not have. Such blocks stay in the
|
||||
// document, stay selectable and movable, but the editor never edits or fills them.
|
||||
/**
|
||||
@@ -10,7 +10,7 @@ export const icons = { section: '▣', row: '☰', column: '▥', heading: 'H',
|
||||
export const CATEGORIES = [
|
||||
{ name: 'Aufbau', hint: 'Sektion → Zeile → Spalte. Der Inhalt kommt in die Spalte.', types: ['section', 'row', 'column'] },
|
||||
{ name: 'Inhalt', types: ['heading', 'text', 'image', 'button', 'icon', 'divider', 'spacer'] },
|
||||
{ name: 'Bausteine', types: ['iconcard', 'stat', 'quote', 'cta', 'contact', 'logos', 'progress'] },
|
||||
{ name: 'Bausteine', types: ['iconcard', 'stat', 'quote', 'cta', 'contact', 'social', 'logos', 'progress'] },
|
||||
{ name: 'Gruppen', types: ['gallery', 'accordion', 'accordionitem', 'tabs', 'tabitem', 'slider'] },
|
||||
{ name: 'Seite und Daten', types: ['postlist', 'postnav', 'breadcrumb', 'menu', 'form', 'legal', 'partialref', 'embed'] },
|
||||
];
|
||||
@@ -107,6 +107,8 @@ export function createBlock(type) {
|
||||
if (type === 'embed') block.props = { group: 'external', title: '', provider: '', url: '', hint: '', height: 400 };
|
||||
if (type === 'icon') block.props = { icon: 'star', size: 48, decorative: true, label: '', href: '' };
|
||||
if (type === 'progress') block.props = { label: 'Fortschritt', value: 70, showValue: true };
|
||||
// Welche Profile es gibt, steht in den Einstellungen; der Block bringt nur die Darstellung mit.
|
||||
if (type === 'social') block.props = { size: 24, shape: 'plain', layout: 'horizontal', labels: false, networks: [], newTab: true };
|
||||
if (type === 'slider') block.props = { desktopVisible: 3, tabletVisible: 2, mobileVisible: 1, snap: true, dots: true, autoplay: 0 };
|
||||
if (type === 'image') block.props = { src: '/assets/image-placeholder.svg', alt: 'Abstrakte Landschaft als Platzhalter', decorative: false, width: 1000, height: 600 };
|
||||
return block;
|
||||
@@ -125,6 +127,7 @@ export function upgradeForType(document, type) {
|
||||
if (type === 'menu' || type === 'partialref') upgradeDocument(document, 11);
|
||||
if (type === 'embed') upgradeDocument(document, 14);
|
||||
if (['icon', 'progress', 'slider'].includes(type)) upgradeDocument(document, 15);
|
||||
if (type === 'social') upgradeDocument(document, 23);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -255,7 +258,7 @@ export const devices = { desktop: 'Desktop', tablet: 'Tablet', mobile: 'Mobil' }
|
||||
// blieb bei 12 stehen, während Bausteine schon v13 bis v15 verlangten: in einem aktuellen Dokument
|
||||
// liess sich dann gar nichts mehr einfügen, und ein Symbol, ein Slider oder ein externer Inhalt
|
||||
// nirgends. Eine Zahl, an einer Stelle.
|
||||
export const SCHEMA_VERSION = 22;
|
||||
export const SCHEMA_VERSION = 23;
|
||||
|
||||
export const VISIBILITY = { all: 'Auf allen Geräten', desktop: 'Nur Desktop', tablet: 'Nur Tablet', mobile: 'Nur Mobil', 'hide-desktop': 'Auf Desktop ausblenden', 'hide-tablet': 'Auf Tablet ausblenden', 'hide-mobile': 'Auf Mobil ausblenden', hidden: 'Überall ausblenden' };
|
||||
|
||||
@@ -567,8 +570,10 @@ export function copyStyle(document, fromId, toId) {
|
||||
export function relevantProperty(block, key, property) {
|
||||
if (Object.values(block.style ?? {}).some(values => values[key] !== undefined || values.hover?.[key] !== undefined || values.scrolled?.[key] !== undefined)) return true;
|
||||
const container = isContainer(block);
|
||||
if (property.group === 'slider') return block.type === 'slider';
|
||||
if (property.group === 'menu') return block.type === 'menu';
|
||||
if (property.group === 'image') return ['image', 'gallery', 'logos', 'postlist'].includes(block.type);
|
||||
if (property.group === 'text' || key === 'textShadow') return !['image', 'gallery', 'logos', 'spacer', 'divider', 'embed'].includes(block.type);
|
||||
if (['flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'gridColumns', 'gap', 'rowGap', 'columnGap'].includes(key)) return container || ['button', 'menu', 'form', 'postlist', 'contact'].includes(block.type);
|
||||
if (['flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'gridColumns', 'gap', 'rowGap', 'columnGap'].includes(key)) return container || ['button', 'menu', 'form', 'postlist', 'contact', 'social'].includes(block.type);
|
||||
return true;
|
||||
}
|
||||
@@ -3,6 +3,9 @@
|
||||
|
||||
The layout follows the Flatsome UX Builder: a dark bar on top, one sidebar on the left that
|
||||
shows one thing at a time, and the page itself filling the rest. */
|
||||
/* Die Farbe fuer "hier steht ein eigener Wert". Dunkler als der Fokusring, damit weisse
|
||||
Schrift darauf die Kontrastschwelle sicher nimmt (5,6:1). */
|
||||
:root{--used:#9d4e0d}
|
||||
dialog{max-width:450px;width:calc(100% - 40px);padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--ink);box-shadow:0 20px 80px #1b2a2433}
|
||||
dialog::backdrop{background:#172e2966}
|
||||
dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
|
||||
@@ -185,8 +188,10 @@ html:has(>.editor-body){overflow:hidden;height:100%}
|
||||
.design-row{margin-top:14px}
|
||||
.design-row-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
|
||||
.design-row-head label{margin:0;font-size:11px;line-height:1.5;flex:1;min-width:0}
|
||||
.design-own .design-row-head label{color:#2f5d4a;font-weight:700}
|
||||
.design-own .design-row-head label::before{content:'● ';color:var(--accent)}
|
||||
/* Belegte Zeilen tragen dieselbe Farbe wie die belegten Geraetechips - eine Farbe, eine
|
||||
Bedeutung: hier steht ein eigener Wert und nicht der geerbte. */
|
||||
.design-own .design-row-head label{color:var(--used);font-weight:700}
|
||||
.design-own .design-row-head label::before{content:'● ';color:var(--used)}
|
||||
.design-reset-one{font-size:14px;padding:2px 6px;min-height:24px;line-height:1}
|
||||
.design-inherited{font-size:10px;color:var(--muted);margin:5px 0 0;line-height:1.45}
|
||||
.length-control{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:6px}
|
||||
@@ -210,12 +215,21 @@ html:has(>.editor-body){overflow:hidden;height:100%}
|
||||
.side-unit{display:flex;align-items:center;gap:7px;margin-top:7px}
|
||||
.side-unit label{margin:0;font-size:10px;color:var(--muted)}
|
||||
.side-unit-select{flex:1;min-width:0}
|
||||
/* The device chips on a single option: which devices carry an own value, and switch to one. */
|
||||
.device-chips{display:flex;gap:2px;margin-left:auto}
|
||||
.device-chip{width:19px;height:19px;display:grid;place-items:center;padding:0;min-height:0;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--muted);font:700 9px/1 system-ui,sans-serif;cursor:pointer}
|
||||
.device-chip:hover{border-color:var(--accent)}
|
||||
.device-chip-own{background:#eef5e6;border-color:var(--accent);color:var(--accent)}
|
||||
.device-chip[aria-pressed=true]{outline:2px solid var(--ring,#b55b12);outline-offset:1px}
|
||||
/* The device chips on a single option: which devices carry an own value, and switch to one.
|
||||
|
||||
Zwei Zustaende, zwei Mittel. "Belegt" - dieses Geraet traegt einen eigenen Wert - ist die
|
||||
Auskunft, die man ueber die ganze Liste hinweg sucht, und bekommt deshalb die kraeftige Farbe.
|
||||
"Gerade bearbeitet" ist ein Rahmen, und zwar ein Rahmen INNEN: ein `outline` liegt ausserhalb
|
||||
des Kaestchens, laeuft bei 2 px Abstand unter den Nachbarn und wird von der seitlich
|
||||
beschnittenen Spalte gekappt - es sah aus wie ein abgeschnittener roter Kasten. */
|
||||
.device-chips{display:flex;flex:none;gap:6px;margin-left:auto}
|
||||
.device-chip{width:22px;height:22px;display:grid;place-items:center;padding:0;min-height:0;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--muted);font:700 10px/1 system-ui,sans-serif;cursor:pointer}
|
||||
.device-chip:hover{border-color:var(--ink)}
|
||||
.device-chip-own{background:var(--used);border-color:var(--used);color:#fff}
|
||||
.device-chip[aria-pressed=true]{border-width:2px;border-color:var(--ink)}
|
||||
.device-chip-own[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px #fff}
|
||||
/* Der Fokusring bleibt innerhalb der Luecke zwischen zwei Chips - nichts liegt uebereinander. */
|
||||
.device-chip:focus-visible{outline-width:2px;outline-offset:0}
|
||||
.design-side-head{margin-bottom:5px}
|
||||
.design-side-head .design-group-label{margin:0}
|
||||
/* A number field that can be dragged sideways. The cursor is the only announcement it needs. */
|
||||
|
||||
+33
-1
@@ -11,8 +11,10 @@ import { initSliders } from './slider.js';
|
||||
import { VISIBILITY, setVisibility } from './editor-model.js';
|
||||
|
||||
// Mirrors DocumentValidator::ICONS; the server rejects anything outside this list.
|
||||
const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check'];
|
||||
const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check', 'people', 'music', 'home'];
|
||||
const ICON_SIZES = [12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 120, 160, 200, 240];
|
||||
// Mirrors SocialProfiles::NETWORKS; the addresses themselves live in the settings.
|
||||
const SOCIAL_NETWORKS = { facebook: 'Facebook', instagram: 'Instagram', linkedin: 'LinkedIn', youtube: 'YouTube', tiktok: 'TikTok', x: 'X', threads: 'Threads', pinterest: 'Pinterest', xing: 'Xing', whatsapp: 'WhatsApp', google: 'Google-Unternehmensprofil' };
|
||||
|
||||
const root = document.querySelector('#editor');
|
||||
const $ = selector => document.querySelector(selector);
|
||||
@@ -307,6 +309,7 @@ function renderContent(block, panel) {
|
||||
if (key === 'click' || key === 'lightbox') upgradeDocument(doc, 19);
|
||||
if (key === 'newTab') upgradeDocument(doc, 20);
|
||||
if (key === 'collapse') upgradeDocument(doc, 22);
|
||||
if (key === 'faq') upgradeDocument(doc, 23);
|
||||
if (current.type === 'image' && key === 'src') { delete current.props.sources; delete current.props.mediaId; }
|
||||
}, options.choices ? null : `${selected || 'page'}:${key}`);
|
||||
if (key === 'src') imagePreview?.update({ src: input.value });
|
||||
@@ -387,6 +390,7 @@ function renderContent(block, panel) {
|
||||
if (block.type === 'menu') {
|
||||
field('Menüplatz', 'slot', block.props.slot, { choices: { header: 'Hauptnavigation', secondary: 'Zweite Navigation', footer: 'Fußzeile', legal: 'Rechtliches' }, help: 'Welche Einträge gezeigt werden. Gepflegt werden sie unter Menüs.' });
|
||||
field('Menüart', 'layout', block.props.layout || 'horizontal', { choices: { horizontal: 'Waagerecht', vertical: 'Untereinander', burger: 'Aufklappbar (Burger)' }, help: 'Aufklappbar funktioniert ohne JavaScript. Untermenüs klappen in allen Arten per Klick auf, nicht beim Überfahren – das ist auf einem Touchgerät die einzige Art, die funktioniert.' });
|
||||
field('Menü-Knopf', 'burgerLabel', block.props.burgerLabel || 'both', { choices: { both: 'Symbol und Text', text: 'Nur Text', icon: 'Nur Symbol' }, help: 'Wie der aufklappbare Knopf beschriftet ist. „Nur Symbol“ behält den Namen für Vorlesesoftware. Farben, Rahmen und Schriftgröße des Knopfes stehen unter Design → Menü-Knopf.' });
|
||||
field('Automatisch als Hamburger', 'collapse', block.props.collapse || 'tablet', { choices: { tablet: 'Tablet und Mobil (Standard)', mobile: 'Nur Mobil', never: 'Nie' }, help: 'Waagerechte Menüs wechseln standardmäßig bis 1024 px und auf Touchgeräten ohne Maus, auch großen iPads. „Nur Mobil“ gilt bis 767 px. Die Menüarten „Untereinander“ und „Burger“ bleiben unverändert.' });
|
||||
}
|
||||
if (block.type === 'partialref') field('Adresse der Sektion', 'partial', block.props.partial, { help: 'Die Adresse aus der Bereichsverwaltung. Die Sektion wird verknüpft, nicht kopiert: eine Änderung dort wirkt auf allen Seiten, die sie einbinden.' });
|
||||
@@ -398,6 +402,33 @@ function renderContent(block, panel) {
|
||||
if (!block.props.decorative) field('Beschriftung', 'label', block.props.label, { maxLength: 120 });
|
||||
field('Linkziel', 'href', block.props.href || '', { help: 'Optional. Lokaler Pfad, Sprungmarke oder HTTPS-Adresse.' });
|
||||
}
|
||||
if (block.type === 'social') {
|
||||
field('Größe', 'size', String(block.props.size), { number: true, choices: Object.fromEntries(ICON_SIZES.map(size => [String(size), `${size} px`])), help: 'Die Adressen stehen unter Einstellungen → Unternehmensdaten → Soziale Profile. Farbe, Abstand und Ausrichtung unter Design.' });
|
||||
field('Form', 'shape', block.props.shape, { choices: { plain: 'Nur Symbol', circle: 'Runde Fläche', square: 'Eckige Fläche' } });
|
||||
field('Anordnung', 'layout', block.props.layout, { choices: { horizontal: 'Nebeneinander', vertical: 'Untereinander' } });
|
||||
field('Namen anzeigen', 'labels', block.props.labels === true, { checkbox: true, help: 'Ohne Häkchen tragen die Links ihren Namen nur für Screenreader.' });
|
||||
field('In neuem Tab öffnen', 'newTab', block.props.newTab !== false, { checkbox: true });
|
||||
// Eine Auswahl aus den eingetragenen Profilen; keins gewählt heißt alle.
|
||||
const chosen = new Set(block.props.networks ?? []);
|
||||
const group = document.createElement('fieldset'); group.className = 'field-set';
|
||||
const legend = document.createElement('legend'); legend.textContent = 'Nur diese Netzwerke'; group.append(legend);
|
||||
for (const [key, name] of Object.entries(SOCIAL_NETWORKS)) {
|
||||
const label = document.createElement('label'); label.className = 'check-label';
|
||||
const box = document.createElement('input'); box.type = 'checkbox'; box.checked = chosen.has(key);
|
||||
box.id = `social-${block.id}-${key}`; label.htmlFor = box.id;
|
||||
box.addEventListener('change', () => {
|
||||
history.change(doc => {
|
||||
const current = locate(doc.blocks, block.id)?.block; if (!current) return;
|
||||
const set = new Set(current.props.networks ?? []); box.checked ? set.add(key) : set.delete(key);
|
||||
current.props.networks = Object.keys(SOCIAL_NETWORKS).filter(network => set.has(network));
|
||||
});
|
||||
renderTree(); controls(); schedulePreview();
|
||||
});
|
||||
label.append(box, ` ${name}`); group.append(label);
|
||||
}
|
||||
const note = document.createElement('p'); note.className = 'field-help'; note.textContent = 'Ohne Auswahl erscheinen alle eingetragenen Profile.';
|
||||
group.append(note); panel.append(group);
|
||||
}
|
||||
if (block.type === 'progress') {
|
||||
field('Beschriftung', 'label', block.props.label, { maxLength: 120 });
|
||||
field('Wert (%)', 'value', block.props.value, { number: true, help: 'Zwischen 0 und 100. Der Wert steht auch im Markup, nicht nur in der Balkenbreite.' });
|
||||
@@ -422,6 +453,7 @@ function renderContent(block, panel) {
|
||||
if (block.type === 'form') field('Adresse des Formulars', 'form', block.props.form, { help: 'Die Adresse aus der Formularverwaltung, zum Beispiel kontakt. Felder, Empfänger und Einwilligungstext werden dort gepflegt, nicht hier.' });
|
||||
if (block.type === 'tabitem') field('Titel', 'title', block.props.title, { maxLength: 160, help: 'Beschriftung des Tabs. In der Vorschau sind alle Tabs untereinander sichtbar, weil die Vorschau kein JavaScript ausführt.' });
|
||||
if (block.type === 'accordion') {
|
||||
field('Als FAQ auszeichnen', 'faq', block.props?.faq === true, { checkbox: true, help: 'Die Einträge erscheinen als Frage-Antwort-Paare in den strukturierten Daten (FAQPage): der Titel ist die Frage, die Textbausteine im Eintrag sind die Antwort.' });
|
||||
const hint = document.createElement('p'); hint.className = 'field-help';
|
||||
hint.textContent = 'Wähle einen Eintrag, um seinen Titel und Inhalt zu bearbeiten. Texte, Bilder und weitere Elemente gehören in den jeweiligen Eintrag.';
|
||||
const entries = document.createElement('div'); entries.className = 'accordion-entry-list';
|
||||
|
||||
@@ -38,6 +38,7 @@ export const PREVIEWS = {
|
||||
contact: '<rect x="2.5" y="3.5" width="19" height="9" rx="1.5"/><path d="M2.9 4.4l9.1 5 9.1-5"/>',
|
||||
logos: [2.5, 8, 13.5, 19].map(x => `<rect x="${x}" y="5.5" width="4.5" height="5" rx="1.2"/>`).join(''),
|
||||
progress: '<rect x="2" y="6" width="20" height="4" rx="2"/><rect x="2" y="6" width="12" height="4" rx="2" fill="currentColor" stroke="none"/>',
|
||||
social: [4.5, 12, 19.5].map(x => `<circle cx="${x}" cy="8" r="3"/>`).join('') + '<path d="M3.6 8h1.8M11.1 8h1.8M18.6 8h1.8"/>',
|
||||
|
||||
// Gruppen
|
||||
gallery: [2.5, 12.5].flatMap(x => [2.5, 8.5].map(y => `<rect x="${x}" y="${y}" width="9" height="5" rx="1.2"/>`)).join(''),
|
||||
|
||||
@@ -7,7 +7,7 @@ const error = form.querySelector('#menu-error');
|
||||
const history = [];
|
||||
let serial = list.children.length, pendingPage = null, busy = false;
|
||||
const el = (tag, className = '', text = '') => { const node = document.createElement(tag); node.className = className; node.textContent = text; return node; };
|
||||
const iconNames = { app: 'App', web: 'Web', design: 'Gestaltung', network: 'Netzwerk', hardware: 'Computer', shop: 'Shop', support: 'Support', shield: 'Sicherheit', clock: 'Uhr', star: 'Stern', phone: 'Telefon', mail: 'E-Mail', pin: 'Standort', check: 'Haken' };
|
||||
const iconNames = { app: 'App', web: 'Web', design: 'Gestaltung', network: 'Netzwerk', hardware: 'Computer', shop: 'Shop', support: 'Support', shield: 'Sicherheit', clock: 'Uhr', star: 'Stern', phone: 'Telefon', mail: 'E-Mail', pin: 'Standort', check: 'Haken', people: 'Menschen', music: 'Musik', home: 'Haus' };
|
||||
const menuIcons = JSON.parse(form.dataset.icons || '[]');
|
||||
const chrome = () => {
|
||||
const handle = el('button', 'menu-drag-handle'); handle.type = 'button'; handle.dataset.menuDrag = '';
|
||||
|
||||
@@ -8,12 +8,27 @@
|
||||
*/
|
||||
export function initScrolled(doc = document) {
|
||||
const view = doc.defaultView;
|
||||
const root = doc.documentElement;
|
||||
// Der Nach-oben-Knopf blendete sich ueber eine Scroll-Animation ein. Browser, die
|
||||
// `animation-timeline: scroll()` zwar kennen, aber nicht ausfuehren, liessen ihn im ersten
|
||||
// Bild der Animation stehen - unsichtbar, dauerhaft. Deshalb entscheidet jetzt eine Klasse.
|
||||
// Ohne dieses Skript bleibt der Knopf sichtbar: erreichbar ist besser als unsichtbar.
|
||||
const after = parseInt(getComputedStyle(root).getPropertyValue('--kant-top-after'), 10);
|
||||
const schwelle = Number.isFinite(after) && after > 0 ? after : 400;
|
||||
let queued = false;
|
||||
const sync = () => { queued = false; doc.documentElement.classList.toggle('is-scrolled', view.scrollY > 40); };
|
||||
const sync = () => {
|
||||
queued = false;
|
||||
root.classList.toggle('is-scrolled', view.scrollY > 40);
|
||||
root.classList.toggle('kant-top-shown', view.scrollY > schwelle);
|
||||
};
|
||||
const onScroll = () => { if (!queued) { queued = true; view.requestAnimationFrame(sync); } };
|
||||
view.addEventListener('scroll', onScroll, { passive: true });
|
||||
root.classList.add('kant-top-armed');
|
||||
sync();
|
||||
return () => { view.removeEventListener('scroll', onScroll); doc.documentElement.classList.remove('is-scrolled'); };
|
||||
return () => {
|
||||
view.removeEventListener('scroll', onScroll);
|
||||
root.classList.remove('is-scrolled', 'kant-top-armed', 'kant-top-shown');
|
||||
};
|
||||
}
|
||||
|
||||
if (!document.querySelector('#editor')) initScrolled();
|
||||
+99
-26
@@ -126,31 +126,51 @@ p{hyphens:auto}
|
||||
|
||||
/* The consent question. Fixed to the bottom, but it never covers the whole page: the content
|
||||
stays readable while the decision is open, because a wall would make "accept" the only way
|
||||
forward. Accepting and refusing are the same button in the same row. */
|
||||
.consent-bar{position:fixed;inset-inline:12px;bottom:12px;z-index:50;max-width:620px;margin-inline:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:0 18px 50px color-mix(in srgb,var(--ink) 15%,transparent);font-size:14px;line-height:1.6}
|
||||
.kant .consent-bar h2{font-size:16px;margin:0 0 8px}
|
||||
.consent-bar p{margin:0 0 14px}
|
||||
forward. Accepting and refusing are the same button in the same row.
|
||||
|
||||
Aussehen aus den Einstellungen: `--kant-consent-*` im Kopf der Seite (Consent::styles), die
|
||||
Anordnung als Klasse. Ohne Einstellung gilt Papier, Tinte und Akzent des Themes. Ein Wert wie
|
||||
`--k-consent` aus der Palette bleibt als Zwischenstufe erhalten. */
|
||||
.consent-bar{position:fixed;inset-inline:16px;bottom:16px;z-index:50;max-width:640px;max-height:calc(100dvh - 24px);overflow:auto;margin-inline:auto;background:var(--kant-consent-bg,var(--paper));color:var(--kant-consent-ink,var(--ink));border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:var(--kant-consent-radius,18px);padding:22px 24px 20px;box-shadow:0 24px 60px color-mix(in srgb,var(--ink) 22%,transparent);font-size:14px;line-height:1.6;overscroll-behavior:contain}
|
||||
/* Ein schmaler Streifen in der Akzentfarbe oben: die Fläche gehört sichtbar zur Website. */
|
||||
.consent-bar::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
|
||||
.kant .consent-bar h2{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.3;margin:0 0 8px}
|
||||
.consent-icon{flex:none;color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
|
||||
.consent-bar p{margin:0 0 16px;color:color-mix(in srgb,currentColor 82%,transparent)}
|
||||
.consent-actions{display:flex;flex-wrap:wrap;gap:10px}
|
||||
.consent-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;border-radius:8px;border:1px solid var(--k-consent,var(--accent));background:var(--k-consent,var(--accent));color:#fff;font:inherit;font-weight:600;cursor:pointer}
|
||||
.consent-actions .consent-button:last-child{background:var(--paper);color:var(--ink);border-color:var(--line)}
|
||||
.consent-button{display:inline-flex;align-items:center;justify-content:center;flex:1 1 150px;min-height:46px;padding:11px 18px;border-radius:var(--kant-consent-button-radius,10px);border:1.5px solid var(--kant-consent-accent,var(--k-consent,var(--accent)));background:var(--kant-consent-accent,var(--k-consent,var(--accent)));color:var(--kant-consent-accent-ink,#fff);font:inherit;font-weight:600;cursor:pointer;transition:filter .12s,background-color .12s}
|
||||
.consent-decline,.consent-choice{background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 28%,transparent)}
|
||||
.consent-button:hover{filter:brightness(.94)}
|
||||
.consent-button:focus-visible,.consent-bar a:focus-visible,.consent-bar summary:focus-visible,.consent-bar input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
|
||||
.consent-decline:hover,.consent-choice:hover{filter:none;background:color-mix(in srgb,currentColor 7%,transparent)}
|
||||
.consent-button:focus-visible,.consent-bar a:focus-visible,.consent-bar summary:focus-visible,.consent-bar input:focus-visible{outline:3px solid var(--kant-consent-accent,var(--k-consent,var(--accent)));outline-offset:2px}
|
||||
.consent-details{margin-top:14px}
|
||||
.consent-details>summary{cursor:pointer;font-size:13px;font-weight:600;padding:4px 0}
|
||||
.consent-details>summary{cursor:pointer;font-size:13px;font-weight:600;padding:6px 0;list-style:none;display:inline-flex;align-items:center;gap:6px}
|
||||
.consent-details>summary::-webkit-details-marker{display:none}
|
||||
.consent-details>summary::after{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
|
||||
.consent-details[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
|
||||
.consent-details>summary:hover{text-decoration:underline}
|
||||
.consent-groups{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
|
||||
.consent-groups label{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5}
|
||||
.consent-groups input{margin-top:3px;width:18px;height:18px;flex-shrink:0}
|
||||
.consent-choice{margin-top:14px;background:var(--paper);color:var(--ink);border-color:var(--line)}
|
||||
.consent-links{margin:14px 0 0;font-size:12px}
|
||||
.consent-links a{color:var(--accent)}
|
||||
.consent-groups input{margin-top:3px;width:18px;height:18px;flex-shrink:0;accent-color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
|
||||
.consent-choice{margin-top:14px;flex:none;width:auto}
|
||||
.consent-links{margin:14px 0 0;font-size:12px;color:color-mix(in srgb,currentColor 72%,transparent)}
|
||||
.consent-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}
|
||||
.consent-links a:hover{color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
|
||||
/* Leiste: über die ganze Breite am unteren Rand, auf breiten Bildschirmen Text links und Knöpfe
|
||||
rechts. Ecke: eine kleine Karte rechts unten, die den Inhalt kaum verdeckt. */
|
||||
.consent-layout-leiste{inset-inline:0;bottom:0;max-width:none;border-radius:var(--kant-consent-radius,18px) var(--kant-consent-radius,18px) 0 0;border-inline:0;border-bottom:0;padding-inline:max(24px,calc((100% - 1180px) / 2))}
|
||||
@media (min-width:900px){.consent-layout-leiste{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 40px;align-items:center}.consent-layout-leiste .consent-body p{margin-bottom:0}.consent-layout-leiste .consent-form{width:360px;max-width:100%}}
|
||||
.consent-layout-ecke{inset-inline:auto 16px;max-width:400px;margin:0}
|
||||
/* While the question is open the bar is fixed at the bottom, so the page has to end above it -
|
||||
otherwise it covers the last element, and an embed's own consent button sat right underneath.
|
||||
Found by the browser test, which could not click it. */
|
||||
body.consent-open{padding-bottom:260px}
|
||||
Found by the browser test, which could not click it. Auf schmalen Bildschirmen ist die Leiste
|
||||
mit Standardtext bis 290 px hoch; 320 px lassen ihr Luft, ohne einen Bildschirm zu verschenken. */
|
||||
body.consent-open{padding-bottom:320px}
|
||||
@media (min-width:621px){body.consent-open{padding-bottom:270px}}
|
||||
@media (min-width:900px){body.consent-open{padding-bottom:200px}}
|
||||
.consent-page main{max-width:680px;margin-inline:auto;padding:40px 20px}
|
||||
.consent-page .consent-bar{position:static;inset:auto;box-shadow:none;max-width:none;margin-top:24px}
|
||||
@media (max-width:620px){.consent-bar{inset-inline:0;bottom:0;border-radius:14px 14px 0 0;padding:16px}.consent-actions .consent-button{flex:1 1 140px}}
|
||||
.consent-page .consent-bar{position:static;inset:auto;box-shadow:none;max-width:none;max-height:none;margin:24px 0 0;display:block}
|
||||
@media (max-width:620px){.consent-bar,.consent-layout-ecke{inset-inline:0;bottom:0;max-width:none;border-radius:var(--kant-consent-radius,18px) var(--kant-consent-radius,18px) 0 0;border-inline:0;border-bottom:0;padding:18px 18px 16px}.consent-layout-leiste{padding-inline:18px}}
|
||||
|
||||
/* An embedded third party, and what stands in its place until it may load. */
|
||||
.block-embed iframe{display:block;width:100%;border:0;border-radius:10px;background:color-mix(in srgb,var(--ink) 8%,var(--paper))}
|
||||
@@ -178,6 +198,9 @@ body.consent-open{padding-bottom:260px}
|
||||
/* A single icon, sized by class because inline styles are forbidden by the policy. */
|
||||
.block-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);line-height:0}
|
||||
.block-icon svg{width:100%;height:100%;display:block}
|
||||
/* Das eingebettete SVG traegt dieselbe Klasse wie seine Huelle und setzte deshalb die
|
||||
Akzentfarbe erneut - eine am Symbolblock eingestellte Farbe kam nie an. */
|
||||
.block-icon .block-icon{color:inherit}
|
||||
.icon-size-12{width:12px;height:12px}.icon-size-16{width:16px;height:16px}.icon-size-20{width:20px;height:20px}
|
||||
.icon-size-24{width:24px;height:24px}.icon-size-32{width:32px;height:32px}.icon-size-40{width:40px;height:40px}
|
||||
.icon-size-48{width:48px;height:48px}.icon-size-56{width:56px;height:56px}.icon-size-64{width:64px;height:64px}
|
||||
@@ -201,10 +224,34 @@ body.consent-open{padding-bottom:260px}
|
||||
.slider-slide{min-width:0}
|
||||
.block-slider:focus-visible{outline:3px solid var(--accent);outline-offset:6px}/* Mit Punkten braucht es die Rollleiste nicht mehr - sie stand quer unter dem Bild. */
|
||||
.slider-dots{position:relative}
|
||||
@supports selector(::scroll-marker){.slider-dots:not(.slider-controlled){scroll-marker-group:after;scroll-behavior:smooth;padding-bottom:0;scrollbar-width:none;scrollbar-gutter:auto}.slider-dots:not(.slider-controlled)::-webkit-scrollbar{display:none}.slider-dots:not(.slider-controlled)>*::scroll-marker{content:'';width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,currentColor 30%,transparent);margin:0 6px;cursor:pointer}.slider-dots>*::scroll-marker:target-current{background:var(--accent)}.slider-dots::scroll-marker-group{display:flex;justify-content:center;align-items:center;padding:14px 0 2px}}
|
||||
@supports selector(::scroll-marker){.slider-dots:not(.slider-controlled){scroll-marker-group:after;scroll-behavior:smooth;padding-bottom:0;scrollbar-width:none;scrollbar-gutter:auto}.slider-dots:not(.slider-controlled)::-webkit-scrollbar{display:none}.slider-dots:not(.slider-controlled)>*::scroll-marker{content:'';width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--slider-dot,currentColor) 30%,transparent);margin:0 6px;cursor:pointer}.slider-dots>*::scroll-marker:target-current{background:var(--slider-dot,var(--accent))}.slider-dots::scroll-marker-group{display:flex;justify-content:center;align-items:center;padding:14px 0 2px}}
|
||||
.slider-controlled{scrollbar-width:none;scrollbar-gutter:auto}.slider-controlled::-webkit-scrollbar{display:none}
|
||||
.slider-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;min-height:48px;margin-top:8px;padding:4px;font:14px/1.4 system-ui,sans-serif}.slider-controls button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:40px;padding:8px 12px;border:1px solid #b2c2b8;border-radius:7px;background:#fff;color:#193c2d;cursor:pointer;font:inherit}.slider-controls button:focus-visible{outline:3px solid #b55b12;outline-offset:3px}.slider-controls button:hover{background:#e4efe7}.slider-controls button:disabled{opacity:.6;cursor:default}.slider-position{font-variant-numeric:tabular-nums;min-width:44px;text-align:center}.slider-control-dots{display:flex;flex-wrap:wrap;gap:3px}.slider-control-dots button{min-width:30px;padding:5px;border:0;background:transparent;color:inherit;opacity:.5}.slider-control-dots button[aria-pressed=true]{opacity:1;outline:1px solid currentColor;outline-offset:-5px}.slider-controls[hidden]{display:none}
|
||||
@media(max-width:650px){.slider-controls button{min-height:44px;min-width:44px}}
|
||||
/* Die Steuerung liegt auf dem Bild, wie beim Hero-Slider von kant-it.de: runde Pfeile links und
|
||||
rechts, Punkte unten rechts (der aktive als Strich in der Akzentfarbe), Pause klein unten links,
|
||||
kein Zähler. Farben kommen aus der Gestaltung des Sliders (--slider-*). */
|
||||
.slider-shell{position:relative}
|
||||
.slider-controls{position:absolute;inset:0;margin:0;padding:0;pointer-events:none;font:14px/1 system-ui,sans-serif}
|
||||
.slider-controls button{pointer-events:auto;cursor:pointer;font:inherit;padding:0;border:0;background:transparent;color:inherit}
|
||||
.slider-controls button:focus-visible{outline:3px solid var(--slider-dot-active,var(--accent));outline-offset:3px}
|
||||
.slider-controls .slider-prev,.slider-controls .slider-next{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;background:var(--slider-bg,rgba(255,255,255,.9));color:var(--slider-ink,var(--accent));display:flex;align-items:center;justify-content:center;font-size:0;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:background-color .2s,color .2s,transform .2s}
|
||||
.slider-prev{left:24px}.slider-next{right:24px}
|
||||
.slider-prev::before,.slider-next::before{content:'';width:12px;height:12px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:5px}
|
||||
.slider-next::before{transform:rotate(-135deg);margin-left:-5px}
|
||||
.slider-controls .slider-prev:hover,.slider-controls .slider-next:hover{background:var(--slider-dot-active,var(--accent));color:#fff}
|
||||
.slider-prev:disabled,.slider-next:disabled{opacity:.4;cursor:default}
|
||||
.slider-position{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
|
||||
.slider-control-dots{position:absolute;right:70px;bottom:20px;display:flex;gap:3px}
|
||||
.slider-control-dots button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:0;transition:width .25s}
|
||||
.slider-control-dots button::before{content:'';width:9px;height:9px;border-radius:99px;background:var(--slider-dot,rgba(255,255,255,.55));transition:width .25s,background-color .25s}
|
||||
.slider-control-dots button[aria-pressed=true]{width:40px}
|
||||
.slider-control-dots button[aria-pressed=true]::before{width:28px;background:var(--slider-dot-active,var(--accent))}
|
||||
.slider-control-dots button:hover::before{background:var(--slider-dot-active,var(--accent))}
|
||||
.slider-controls .slider-play{position:absolute;right:24px;bottom:16px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:0;display:flex;align-items:center;justify-content:center}
|
||||
.slider-play::before{content:'';width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
|
||||
.slider-play[data-playing=true]::before{width:8px;height:11px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor;margin-left:0}
|
||||
.slider-play:disabled{opacity:.4;cursor:default}
|
||||
.slider-controls[hidden]{display:none}
|
||||
@media(max-width:600px){.slider-controls .slider-prev,.slider-controls .slider-next{display:none}.slider-control-dots{right:54px;bottom:14px}.slider-controls .slider-play{right:14px;bottom:12px}}
|
||||
|
||||
.slide-desktop-1{grid-auto-columns:100%}.slide-desktop-2{grid-auto-columns:calc(50% - 10px)}
|
||||
.slide-desktop-3{grid-auto-columns:calc(33.333% - 14px)}.slide-desktop-4{grid-auto-columns:calc(25% - 15px)}
|
||||
@@ -353,6 +400,16 @@ body.consent-open{padding-bottom:260px}
|
||||
}
|
||||
.menu-burger>summary{min-height:44px;min-width:44px}
|
||||
.menu-burger-body{overflow-wrap:anywhere}
|
||||
/* Im Kopfbereich klappt das Menue als Flaeche unter dem Kopf auf, ueber die volle Breite.
|
||||
Inline geoeffnet stand es sonst in der schmalen Spalte neben der Marke und schob den
|
||||
ganzen Kopf auseinander - auf dem Telefon sah es aus, als fehle das Menue. */
|
||||
.site-header{position:relative}
|
||||
.site-header .menu-burger[open]>summary{border-radius:8px}
|
||||
.site-header .menu-burger-body{position:absolute;left:0;right:0;top:100%;z-index:30;
|
||||
padding:15px max(16px,calc((100% - var(--k-container,1180px)) / 2 + 16px)) 25px;
|
||||
background:var(--paper);box-shadow:0 15px 25px color-mix(in srgb,var(--ink) 12%,transparent)}
|
||||
.site-header .menu-burger-body .menu-list{gap:0}
|
||||
.site-header .menu-burger-body .menu-list a{padding:12px 10px;font-size:16px}
|
||||
/* Visibility never overwrites the block's grid/flex/display settings. */
|
||||
.visibility-hidden{display:none!important}
|
||||
.slider-controls button[hidden]{display:none}
|
||||
@@ -369,14 +426,26 @@ body.consent-open{padding-bottom:260px}
|
||||
.scroll-top:hover{filter:brightness(1.08)}
|
||||
.scroll-top:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
|
||||
@media (max-width:767px){.scroll-top{bottom:16px;right:16px}.scroll-top-links{left:16px;right:auto}}
|
||||
/* Solange der Einwilligungsdialog unten steht, würde der Knopf darauf liegen. */
|
||||
body.consent-open .scroll-top{display:none}
|
||||
@supports (animation-timeline: scroll()){
|
||||
.scroll-top{animation:kant-scroll-top linear both;animation-timeline:scroll(root);animation-range:var(--kant-top-after,400px) calc(var(--kant-top-after,400px) + 160px)}
|
||||
@keyframes kant-scroll-top{from{opacity:0;visibility:hidden;transform:translateY(10px)}to{opacity:1;visibility:visible;transform:none}}
|
||||
/* Beachtet die Website die Browservorgabe (Einstellungen → Bewegung), steht er von Anfang an da. */
|
||||
@media (prefers-reduced-motion: reduce){html.motion-respect .scroll-top{animation:none}}
|
||||
/* Solange die Einwilligungsfrage offen ist, bleibt der Knopf da. Frueher verschwand er ganz -
|
||||
und auf dem Telefon bleibt die Frage oft einfach stehen, der Knopf kam dort also nie.
|
||||
Bis 799 px deckt die Leiste die Ecke ab, in der er steht: dort setzt er sich per
|
||||
Ankerpositionierung auf ihre Oberkante, wie hoch ihr Text auch umbricht. Ab 800 px steht die
|
||||
Leiste zentriert mit Rand, die Ecke bleibt frei. Ein Browser ohne Ankerpositionierung blendet
|
||||
ihn in der schmalen Stufe weiter aus - lieber kein Knopf als einer unter der Leiste. Der Anker
|
||||
muss im Dokument vor dem Knopf stehen; page.html.twig gibt die Leiste deshalb zuerst aus. */
|
||||
.consent-bar{anchor-name:--kant-consent}
|
||||
@media (max-width:799px){
|
||||
@supports (anchor-name:--kant-consent){body.consent-open .scroll-top{position-anchor:--kant-consent;bottom:calc(anchor(top) + 12px)}}
|
||||
@supports not (anchor-name:--kant-consent){body.consent-open .scroll-top{display:none}}
|
||||
}
|
||||
/* Leiste und Ecke decken die Ecke auf jeder Breite ab - dort gilt dasselbe ohne Stufe. */
|
||||
@supports (anchor-name:--kant-consent){body.consent-open:has(.consent-layout-leiste,.consent-layout-ecke) .scroll-top{position-anchor:--kant-consent;bottom:calc(anchor(top) + 12px)}}
|
||||
@supports not (anchor-name:--kant-consent){body.consent-open:has(.consent-layout-leiste,.consent-layout-ecke) .scroll-top{display:none}}
|
||||
/* Sichtbar, sobald der Leser ein Stueck gescrollt hat - gesteuert von scrolled.js ueber
|
||||
`kant-top-armed` und `kant-top-shown`. Ohne Skript bleibt der Knopf einfach sichtbar. */
|
||||
html.kant-top-armed .scroll-top{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,visibility .25s,transform .25s}
|
||||
html.kant-top-armed.kant-top-shown .scroll-top{opacity:1;visibility:visible;transform:none}
|
||||
@media (prefers-reduced-motion: reduce){html.motion-respect .scroll-top{transition:none}}
|
||||
/* Der Bildbetrachter. Die Fläche daneben schließt, das Bild bleibt in seinen Grenzen, und die
|
||||
Bedienknöpfe sind groß genug für einen Daumen. Ohne Skript wird nichts davon gebraucht - dann
|
||||
öffnet der Verweis einfach das große Bild. */
|
||||
@@ -402,3 +471,7 @@ body.consent-open .scroll-top{display:none}
|
||||
}
|
||||
|
||||
.has-anchor{position:relative}.block-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:110px}.nav-label{display:inline-flex;align-items:center;gap:.5em}.nav-label>.block-icon{width:1.1em;height:1.1em;color:inherit;flex:none}
|
||||
|
||||
/* Soziale Profile: eine Symbolreihe, Farbe und Abstand vom Block, Größe als Klasse. */
|
||||
.block-social{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0;padding:0;list-style:none}.block-social.social-vertical{flex-direction:column;align-items:flex-start}.block-social a{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;line-height:1;transition:transform .2s,background-color .2s,opacity .2s}.block-social a:hover{transform:translateY(-2px)}.block-social svg{display:block;flex:none}.block-social.social-labels a{font-size:.875em;font-weight:600}.social-shape-circle a,.social-shape-square a{padding:.5em;background:color-mix(in srgb,currentColor 10%,transparent)}.social-shape-circle a{border-radius:999px}.social-shape-square a{border-radius:.35em}.social-shape-circle a:hover,.social-shape-square a:hover{background:color-mix(in srgb,currentColor 18%,transparent)}.social-labels.social-shape-circle a,.social-labels.social-shape-square a{padding-inline:.8em}.social-size-12 svg{width:12px;height:12px}.social-size-16 svg{width:16px;height:16px}.social-size-20 svg{width:20px;height:20px}.social-size-24 svg{width:24px;height:24px}.social-size-32 svg{width:32px;height:32px}.social-size-40 svg{width:40px;height:40px}.social-size-48 svg{width:48px;height:48px}.social-size-56 svg{width:56px;height:56px}.social-size-64 svg{width:64px;height:64px}.social-size-80 svg{width:80px;height:80px}.social-size-96 svg{width:96px;height:96px}.social-size-120 svg{width:120px;height:120px}.social-size-160 svg{width:160px;height:160px}.social-size-200 svg{width:200px;height:200px}.social-size-240 svg{width:240px;height:240px}
|
||||
@media(prefers-reduced-motion:reduce){html.motion-respect .block-social a{transition:none}html.motion-respect .block-social a:hover{transform:none}}
|
||||
+29
-7
@@ -28,9 +28,25 @@ export function initSliders(doc = document) {
|
||||
available().forEach(i => { const delta = Math.abs(left(slides[i]) - slider.scrollLeft); if (delta < distance) { distance = delta; index = i; } });
|
||||
return index;
|
||||
};
|
||||
let settle = null;
|
||||
const go = index => {
|
||||
if (!available().includes(index)) return;
|
||||
slider.scrollTo({ left: Math.max(0, Math.min(slider.scrollWidth - slider.clientWidth, left(slides[index]))), behavior: reduced() ? 'instant' : 'smooth' });
|
||||
const target = Math.max(0, Math.min(slider.scrollWidth - slider.clientWidth, left(slides[index])));
|
||||
if (reduced()) { slider.scrollTo({ left: target, behavior: 'instant' }); return; }
|
||||
// Safari cancels a smooth scroll on a snapping container and snaps back to the slide it
|
||||
// came from - the slider stutters instead of moving on. Snapping is switched off for the
|
||||
// ride and put back once the movement has settled, on the exact start of a slide, so
|
||||
// restoring it moves nothing.
|
||||
clearInterval(settle);
|
||||
const snap = slider.style.scrollSnapType;
|
||||
slider.style.scrollSnapType = 'none';
|
||||
slider.scrollTo({ left: target, behavior: 'smooth' });
|
||||
// Restored on arrival, or after two seconds if the ride was interrupted - a background tab
|
||||
// pauses smooth scrolling, and snapping must not come back halfway.
|
||||
let ticks = 0;
|
||||
settle = setInterval(() => {
|
||||
if (Math.abs(slider.scrollLeft - target) < 1 || ++ticks > 25) { clearInterval(settle); settle = null; slider.style.scrollSnapType = snap; }
|
||||
}, 80);
|
||||
};
|
||||
const step = direction => {
|
||||
const visible = available(), position = visible.indexOf(active());
|
||||
@@ -40,9 +56,9 @@ export function initSliders(doc = document) {
|
||||
go(direction > 0 ? (last ? visible[0] : visible[Math.min(visible.length - 1, position + 1)]) : (first ? visible.at(-1) : visible[Math.max(0, position - 1)]));
|
||||
};
|
||||
const manual = action => { playing = false; clearTimeout(timer); update(); action(); };
|
||||
const previous = button('←', 'Vorherige Folie', () => manual(() => step(-1)));
|
||||
const previous = button('←', 'Vorherige Folie', () => manual(() => step(-1))); previous.className = 'slider-prev';
|
||||
const count = doc.createElement('span'); count.className = 'slider-position'; controls.append(count);
|
||||
const next = button('→', 'Nächste Folie', () => manual(() => step(1)));
|
||||
const next = button('→', 'Nächste Folie', () => manual(() => step(1))); next.className = 'slider-next';
|
||||
const dots = [];
|
||||
if (slider.classList.contains('slider-dots')) {
|
||||
const group = doc.createElement('div'); group.className = 'slider-control-dots'; controls.append(group);
|
||||
@@ -51,6 +67,7 @@ export function initSliders(doc = document) {
|
||||
});
|
||||
}
|
||||
const play = seconds >= 3 ? button('', 'Automatische Wiedergabe pausieren', () => { playing = !playing; update(); schedule(); }) : null;
|
||||
if (play) play.className = 'slider-play';
|
||||
const update = () => {
|
||||
const visible = available();
|
||||
const fits = visible.length < 2 || slider.scrollWidth <= slider.clientWidth + 2;
|
||||
@@ -58,8 +75,9 @@ export function initSliders(doc = document) {
|
||||
const index = active(); count.textContent = `${Math.max(0, visible.indexOf(index) + 1)} / ${visible.length}`;
|
||||
dots.forEach((dot, i) => { dot.hidden = !visible.includes(i); dot.setAttribute('aria-pressed', String(i === index)); });
|
||||
if (play) {
|
||||
play.textContent = playing ? 'Pause' : 'Wiedergabe';
|
||||
play.setAttribute('aria-label', playing ? 'Automatische Wiedergabe pausieren' : 'Automatische Wiedergabe starten');
|
||||
play.textContent = playing ? 'Pause' : 'Wiedergabe'; play.dataset.playing = String(playing);
|
||||
// Der zugängliche Name beginnt mit dem sichtbaren Text (WCAG 2.5.3): wer „Pause“ liest, kann „Pause“ sagen.
|
||||
play.setAttribute('aria-label', playing ? 'Pause: automatische Wiedergabe anhalten' : 'Wiedergabe: automatisch weiterblättern');
|
||||
play.disabled = reduced(); play.title = reduced() ? 'Automatik ist bei reduzierter Bewegung deaktiviert.' : '';
|
||||
}
|
||||
};
|
||||
@@ -68,7 +86,11 @@ export function initSliders(doc = document) {
|
||||
if (playing && !reduced()) timer = setTimeout(() => { if (playing && !hover && visible && !doc.hidden) step(1); schedule(); }, seconds * 1000);
|
||||
};
|
||||
const pause = () => { playing = false; update(); clearTimeout(timer); };
|
||||
slider.after(controls); slider.classList.add('slider-controlled'); update();
|
||||
// Slider and controls share a positioned shell, so arrows and dots can lie on the picture
|
||||
// the way the Kant-IT hero slider draws them.
|
||||
const shell = doc.createElement('div'); shell.className = 'slider-shell';
|
||||
slider.replaceWith(shell); shell.append(slider, controls);
|
||||
slider.classList.add('slider-controlled'); update();
|
||||
slider.addEventListener('scroll', update, { passive: true, signal });
|
||||
view.addEventListener('resize', update, { passive: true, signal });
|
||||
slider.addEventListener('pointerenter', () => { hover = true; }, { signal });
|
||||
@@ -82,7 +104,7 @@ export function initSliders(doc = document) {
|
||||
const resize = new view.ResizeObserver(update); resize.observe(slider);
|
||||
preference.addEventListener('change', () => { if (reduced()) pause(); update(); }, { signal });
|
||||
schedule();
|
||||
cleanups.push(() => { clearTimeout(timer); events.abort(); observer.disconnect(); resize.disconnect(); controls.remove(); slider.classList.remove('slider-controlled'); delete slider.dataset.enhanced; });
|
||||
cleanups.push(() => { clearTimeout(timer); clearInterval(settle); slider.style.scrollSnapType = ''; events.abort(); observer.disconnect(); resize.disconnect(); controls.remove(); shell.replaceWith(slider); slider.classList.remove('slider-controlled'); delete slider.dataset.enhanced; });
|
||||
});
|
||||
return () => cleanups.forEach(cleanup => cleanup());
|
||||
}
|
||||
|
||||
@@ -72,11 +72,11 @@ try {
|
||||
await page.mouse.move(1, 1); await page.waitForTimeout(7200);
|
||||
console.log('Paused slider:', JSON.stringify(await geometry()), await controls.innerText());
|
||||
assert.ok(Math.abs((await geometry()).left - manual.left) < 2, 'manual navigation pauses autoplay');
|
||||
await controls.getByRole('button', { name: 'Automatische Wiedergabe starten' }).click();
|
||||
await controls.getByRole('button', { name: 'Wiedergabe: automatisch weiterblättern' }).click();
|
||||
await page.mouse.move(1, 1); await page.waitForTimeout(7700);
|
||||
assert.ok(Math.abs((await geometry()).left - manual.left) > 20, 'play resumes after manual operation');
|
||||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||
assert.equal(await controls.getByRole('button', { name: 'Automatische Wiedergabe starten' }).isDisabled(), true);
|
||||
assert.equal(await controls.getByRole('button', { name: 'Wiedergabe: automatisch weiterblättern' }).isDisabled(), true);
|
||||
const reduced = await geometry(); await page.waitForTimeout(7100);
|
||||
assert.ok(Math.abs((await geometry()).left - reduced.left) < 2, 'reduced motion stops autoplay');
|
||||
await controls.getByRole('button', { name: 'Vorherige Folie', exact: true }).click();
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
#!/bin/sh
|
||||
# Wirft die Elektro-Bernhard-Installation weg und baut sie neu auf. Nur fuer den Aufbau gedacht.
|
||||
set -e
|
||||
root="C:/Django Project/KantSites"
|
||||
export DATABASE_URL="sqlite:///$root/var/elektro-bernhard.db"
|
||||
export MEDIA_DIRECTORY="$root/var/elektro-bernhard-media"
|
||||
rm -f "$root/var/elektro-bernhard.db"
|
||||
rm -rf "$root/var/elektro-bernhard-media"
|
||||
php vendor/bin/doctrine-migrations migrate --no-interaction -q
|
||||
php -d memory_limit=512M scripts/seed-elektro-bernhard.php "$1"
|
||||
@@ -0,0 +1,12 @@
|
||||
#!/bin/sh
|
||||
# Wirft die Moldovan-Installation weg und baut sie neu auf. Nur fuer den Aufbau gedacht.
|
||||
set -e
|
||||
root="C:/Django Project/KantSites"
|
||||
php="${PHP_BINARY:-C:/php84/php.exe}"
|
||||
export DATABASE_URL="sqlite:///$root/var/tagespflege-moldovan.db"
|
||||
export MEDIA_DIRECTORY="$root/var/tagespflege-moldovan-media"
|
||||
rm -f "$root/var/tagespflege-moldovan.db"
|
||||
rm -rf "$root/var/tagespflege-moldovan-media"
|
||||
"$php" vendor/bin/doctrine-migrations migrate --no-interaction -q
|
||||
assets="${1:-$root/var/tagespflege-moldovan-assets}"
|
||||
"$php" -d memory_limit=512M scripts/seed-tagespflege-moldovan.php "$assets"
|
||||
@@ -0,0 +1,875 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Baut die Website „Elektro Bernhard“ als Inhalt dieses CMS auf.
|
||||
*
|
||||
* Inhalt: das gelieferte HTML-Paket (12.09.2026), abgeglichen mit elektro-bernhard.de (14.09.2026).
|
||||
* Gestaltung: eigener Entwurf nach dem Muster des laufenden Auftritts – dunkler Kopf über einem
|
||||
* Foto, Karten mit Schatten, Einblendungen, ein Kopfbereich, der über dem Bild schwebt und beim
|
||||
* Scrollen weiß wird. Alles aus gewöhnlichen Bausteinen; kein eigener Baustein, kein Sonderweg.
|
||||
*
|
||||
* Das Skript schreibt ausschließlich in die Datenbank aus DATABASE_URL und in MEDIA_DIRECTORY,
|
||||
* beide müssen auf eine frische, migrierte Installation zeigen (siehe reset-elektro-bernhard.sh).
|
||||
* Erstes Argument: Ordner mit den Originalbildern (logo.webp, hero-1200.webp, electrician-900.webp).
|
||||
*/
|
||||
|
||||
require dirname(__DIR__).'/config/bootstrap.php';
|
||||
|
||||
use App\Content\DocumentValidator;
|
||||
use App\Content\FormRepository;
|
||||
use App\Content\MediaLibrary;
|
||||
use App\Content\MenuRepository;
|
||||
use App\Content\PageRepository;
|
||||
use App\Content\PartialRepository;
|
||||
use App\Content\RedirectRepository;
|
||||
use App\Content\SiteSettings;
|
||||
use App\Content\Theme;
|
||||
use App\Infrastructure\ConnectionFactory;
|
||||
use Symfony\Component\HttpFoundation\File\UploadedFile;
|
||||
|
||||
$root = dirname(__DIR__);
|
||||
$assets = $argv[1] ?? null;
|
||||
if (null === $assets || !is_dir($assets)) {
|
||||
fwrite(STDERR, "Bitte den Ordner mit den Originalbildern als Argument angeben.\n");
|
||||
exit(1);
|
||||
}
|
||||
$url = str_replace('%kernel.project_dir%', str_replace('\\', '/', $root), (string) $_SERVER['DATABASE_URL']);
|
||||
$mediaDirectory = str_replace('%kernel.project_dir%', $root, (string) $_SERVER['MEDIA_DIRECTORY']);
|
||||
if (!str_contains($url, 'elektro-bernhard')) {
|
||||
fwrite(STDERR, "Sicherung: DATABASE_URL muss auf die Elektro-Bernhard-Datenbank zeigen.\n");
|
||||
exit(1);
|
||||
}
|
||||
|
||||
$db = ConnectionFactory::create($url);
|
||||
if (false !== $db->fetchOne('SELECT id FROM page LIMIT 1')) {
|
||||
fwrite(STDERR, "Diese Datenbank enthält bereits Seiten. Abbruch, damit nichts überschrieben wird.\n");
|
||||
exit(1);
|
||||
}
|
||||
|
||||
$media = new MediaLibrary($db, $mediaDirectory);
|
||||
$settings = new SiteSettings($db, $media);
|
||||
$validator = new DocumentValidator();
|
||||
$pages = new PageRepository($db, $validator, $settings);
|
||||
$partials = new PartialRepository($db, $validator);
|
||||
$menus = new MenuRepository($db, $settings);
|
||||
$forms = new FormRepository($db);
|
||||
$theme = new Theme($db);
|
||||
$redirects = new RedirectRepository($db);
|
||||
|
||||
$mail = 'info@elektro-bernhard.de';
|
||||
$buero = '07221 3944909';
|
||||
$notdienst = '0151 25245851';
|
||||
$SCHEMA = 23;
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Bausteine
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
/** Ein Abschnitt mit dem Rhythmus der Seite: 96 px am Schreibtisch, 64 mobil. */
|
||||
$section = static function (string $id, array $children, array $style = [], ?string $anchor = null): array {
|
||||
$basis = ['desktop' => ['padding' => ['top' => '96px', 'bottom' => '96px']], 'mobile' => ['padding' => ['top' => '64px', 'bottom' => '64px']]];
|
||||
foreach ($style as $device => $values) {
|
||||
$basis[$device] = [...($basis[$device] ?? []), ...$values];
|
||||
}
|
||||
$block = ['id' => $id, 'type' => 'section', 'children' => $children, 'style' => $basis];
|
||||
if (null !== $anchor) {
|
||||
$block['anchor'] = $anchor;
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
$row = static function (string $id, array $children, array $design = [], array $style = []): array {
|
||||
$block = ['id' => $id, 'type' => 'row', 'children' => $children];
|
||||
if ([] !== $design) {
|
||||
$block['layout'] = ['design' => $design];
|
||||
}
|
||||
if ([] !== $style) {
|
||||
$block['style'] = $style;
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
$column = static function (string $id, array $children, array $style = [], string $sichtbarkeit = 'all'): array {
|
||||
$block = ['id' => $id, 'type' => 'column', 'children' => $children];
|
||||
if ([] !== $style) {
|
||||
$block['style'] = $style;
|
||||
}
|
||||
if ('all' !== $sichtbarkeit) {
|
||||
$block['layout'] = ['visibility' => $sichtbarkeit];
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
$heading = static function (string $id, string $text, int $level, array $style = []): array {
|
||||
$block = ['id' => $id, 'type' => 'heading', 'props' => ['text' => $text, 'level' => $level]];
|
||||
if ([] !== $style) {
|
||||
$block['style'] = $style;
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
$text = static function (string $id, string $text, array $style = []): array {
|
||||
$block = ['id' => $id, 'type' => 'text', 'props' => ['text' => $text]];
|
||||
if ([] !== $style) {
|
||||
$block['style'] = $style;
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
/** Einblendung und Hover-Bewegung, wie Flatsome sie jedem Element anbietet. */
|
||||
$fx = static function (array $block, string $entrance = 'rise', string $delay = 'none', ?string $hover = null, ?string $shadow = null): array {
|
||||
$effects = ['entrance' => $entrance, 'delay' => $delay];
|
||||
if (null !== $hover) {
|
||||
$effects['hover'] = $hover;
|
||||
}
|
||||
if (null !== $shadow) {
|
||||
$effects['shadow'] = $shadow;
|
||||
}
|
||||
$block['layout'] = [...($block['layout'] ?? []), 'effects' => $effects];
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
/** Die Kleinzeile über einer Überschrift: Versalien, gesperrt, in Rot. */
|
||||
$eyebrow = static fn (string $id, string $inhalt, string $farbe = '@rot'): array => [
|
||||
'id' => $id, 'type' => 'text', 'props' => ['text' => $inhalt],
|
||||
'style' => ['desktop' => ['color' => $farbe, 'fontSize' => '13px', 'fontWeight' => '700', 'letterSpacing' => '0.16em', 'textTransform' => 'uppercase', 'lineHeight' => 1.4, 'margin' => ['bottom' => '16px']]],
|
||||
];
|
||||
|
||||
$button = static function (string $id, string $text, string $href, array $style = [], array $variante = []): array {
|
||||
$block = ['id' => $id, 'type' => 'button', 'props' => ['text' => $text, 'href' => $href]];
|
||||
if ([] !== $style) {
|
||||
$block['style'] = $style;
|
||||
}
|
||||
if ([] !== $variante) {
|
||||
$block['layout'] = ['button' => $variante];
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
$bild = static function (string $id, array $eintrag, string $alt, array $style = [], ?string $caption = null, ?string $href = null): array {
|
||||
$gross = end($eintrag['variants']);
|
||||
$props = [
|
||||
'src' => $gross['src'], 'alt' => $alt, 'decorative' => false, 'width' => $gross['width'], 'height' => $gross['height'],
|
||||
'mediaId' => $eintrag['id'],
|
||||
'sources' => array_map(static fn (array $v): array => ['src' => $v['src'], 'width' => $v['width']], $eintrag['variants']),
|
||||
];
|
||||
if (null !== $caption) {
|
||||
$props['caption'] = $caption;
|
||||
}
|
||||
if (null !== $href) {
|
||||
$props['href'] = $href;
|
||||
$props['click'] = 'link';
|
||||
}
|
||||
$block = ['id' => $id, 'type' => 'image', 'props' => $props];
|
||||
if ([] !== $style) {
|
||||
$block['style'] = $style;
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
$alleEcken = static fn (string $r): array => ['topLeft' => $r, 'topRight' => $r, 'bottomRight' => $r, 'bottomLeft' => $r];
|
||||
$alleSeiten = static fn (string $w): array => ['top' => $w, 'right' => $w, 'bottom' => $w, 'left' => $w];
|
||||
|
||||
/** Eine Karte mit Symbol auf roter Fläche – die Leistungskarte des Auftritts. */
|
||||
$karte = static function (string $id, string $icon, string $titel, string $inhalt, string $href = '') use ($alleEcken, $alleSeiten): array {
|
||||
return [
|
||||
'id' => $id, 'type' => 'iconcard',
|
||||
'props' => ['icon' => $icon, 'title' => $titel, 'text' => $inhalt, 'href' => $href],
|
||||
'style' => ['desktop' => [
|
||||
'backgroundColor' => '@papier', 'color' => '@tinte',
|
||||
'padding' => $alleSeiten('32px'), 'borderWidth' => $alleSeiten('1px'), 'borderStyle' => 'solid', 'borderColor' => '@linie',
|
||||
'borderRadius' => $alleEcken('16px'), 'gap' => '14px',
|
||||
'hover' => ['borderColor' => '@rot'],
|
||||
]],
|
||||
'css' => "& svg{width:54px;height:54px;padding:12px;color:#c8102e;background:#fbe9ec;border-radius:14px}\n& h3{font-size:20px;letter-spacing:-0.01em}\n& p{color:#5d636b;font-size:15.5px}\n& h3 a:hover{color:#c8102e;text-decoration:none}",
|
||||
'layout' => ['effects' => ['shadow' => 'soft', 'hover' => 'lift', 'entrance' => 'rise']],
|
||||
];
|
||||
};
|
||||
|
||||
/** Eine schlanke Zeile mit Symbol, ohne Karte – für Aufzählungen von Stärken. */
|
||||
$punkt = static function (string $id, string $icon, string $titel, string $inhalt, string $farbe = '#c8102e', string $textfarbe = '#5d636b'): array {
|
||||
return [
|
||||
'id' => $id, 'type' => 'iconcard',
|
||||
'props' => ['icon' => $icon, 'title' => $titel, 'text' => $inhalt, 'href' => ''],
|
||||
'style' => ['desktop' => ['padding' => ['top' => '0px', 'right' => '0px', 'bottom' => '0px', 'left' => '0px'], 'borderStyle' => 'none', 'gap' => '6px']],
|
||||
'css' => "& svg{width:26px;height:26px;color:$farbe}\n& h3{font-size:17px}\n& p{color:$textfarbe;font-size:15px}",
|
||||
];
|
||||
};
|
||||
|
||||
$kontaktBlock = static function (string $id, array $props, array $style = []): array {
|
||||
$block = ['id' => $id, 'type' => 'contact', 'props' => ['phone' => $props['phone'] ?? '', 'email' => $props['email'] ?? '', 'address' => $props['address'] ?? '']];
|
||||
if ([] !== $style) {
|
||||
$block['style'] = $style;
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
/** Die sozialen Profile – gepflegt in den Einstellungen, hier nur Größe, Form und Farbe. */
|
||||
$sozial = static function (string $id, int $groesse, string $form, string $farbe, array $extra = []): array {
|
||||
return [
|
||||
'id' => $id, 'type' => 'social',
|
||||
'props' => ['size' => $groesse, 'shape' => $form, 'layout' => 'horizontal', 'labels' => false, 'networks' => [], 'newTab' => true],
|
||||
'style' => ['desktop' => ['color' => $farbe, ...$extra]],
|
||||
];
|
||||
};
|
||||
|
||||
/** Der Handlungsaufruf am Ende einer Seite: dunkle Karte mit rotem Knopf. */
|
||||
$cta = static function (string $id) use ($alleEcken, $alleSeiten): array {
|
||||
return [
|
||||
'id' => $id, 'type' => 'cta',
|
||||
'props' => ['title' => 'Projekt geplant? Wir sind bereit.', 'text' => 'Kontaktieren Sie uns für eine kostenlose Beratung – wir melden uns innerhalb von 24 Stunden.', 'buttonText' => 'Jetzt Kontakt aufnehmen', 'href' => '/kontakt'],
|
||||
'style' => ['desktop' => ['backgroundColor' => '@tinte', 'color' => '@papier', 'padding' => $alleSeiten('44px'), 'borderRadius' => $alleEcken('20px'), 'margin' => ['top' => '56px']], 'mobile' => ['padding' => $alleSeiten('28px')]],
|
||||
'css' => "& h2{font-size:28px;line-height:1.2;letter-spacing:-0.02em;margin:0 0 8px}\n& p{color:#c2c6cc;margin:0}",
|
||||
'layout' => ['effects' => ['entrance' => 'rise']],
|
||||
];
|
||||
};
|
||||
|
||||
// Wiederkehrende Gestaltungswerte.
|
||||
$fliess = ['desktop' => ['color' => '@gedaempft', 'fontSize' => '17px', 'lineHeight' => 1.75]];
|
||||
$fliessHell = ['desktop' => ['color' => '#c2c6cc', 'fontSize' => '17px', 'lineHeight' => 1.75]];
|
||||
$h2Stil = ['desktop' => ['fontSize' => '44px', 'lineHeight' => 1.12, 'letterSpacing' => '-0.03em', 'fontWeight' => '900', 'margin' => ['bottom' => '18px']], 'mobile' => ['fontSize' => '32px']];
|
||||
$h3Stil = ['desktop' => ['fontSize' => '21px', 'lineHeight' => 1.25, 'fontWeight' => '700', 'margin' => ['bottom' => '12px']]];
|
||||
$fussTitel = ['desktop' => ['fontSize' => '13px', 'fontWeight' => '700', 'letterSpacing' => '0.14em', 'textTransform' => 'uppercase', 'color' => '@papier', 'margin' => ['bottom' => '18px']]];
|
||||
$linkStil = ['desktop' => ['fontSize' => '15px', 'fontWeight' => '700', 'color' => '@rot', 'margin' => ['top' => '8px']]];
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Website, Gestaltung, Medien, Formular
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$db->insert('website', ['id' => 'default', 'name' => 'Elektro Bernhard GmbH', 'default_locale' => 'de', 'theme' => '{}']);
|
||||
|
||||
$theme->save(
|
||||
[
|
||||
['key' => 'rot', 'name' => 'Signalrot', 'value' => '#c8102e'],
|
||||
['key' => 'rot-dunkel', 'name' => 'Signalrot dunkel', 'value' => '#a70c25'],
|
||||
['key' => 'rot-hell', 'name' => 'Rot, Fläche', 'value' => '#fbe9ec'],
|
||||
['key' => 'tinte', 'name' => 'Tinte', 'value' => '#151719'],
|
||||
['key' => 'nacht', 'name' => 'Fußbereich', 'value' => '#17191b'],
|
||||
['key' => 'balken', 'name' => 'Kopfleiste', 'value' => '#181a1d'],
|
||||
['key' => 'karte-dunkel', 'name' => 'Dunkle Karte', 'value' => '#24272b'],
|
||||
['key' => 'gedaempft', 'name' => 'Gedämpft', 'value' => '#5d636b'],
|
||||
['key' => 'papier', 'name' => 'Papier', 'value' => '#ffffff'],
|
||||
['key' => 'weich', 'name' => 'Weiches Grau', 'value' => '#f4f5f6'],
|
||||
['key' => 'linie', 'name' => 'Trennlinie', 'value' => '#e2e4e7'],
|
||||
],
|
||||
[
|
||||
// Lato liegt bereits lokal unter public/assets/fonts – keine Anfrage an Google.
|
||||
['key' => 'body', 'name' => 'Fließtext', 'family' => 'Lato', 'source' => 'google', 'weights' => [400, 700, 900], 'fallback' => 'sans-serif'],
|
||||
['key' => 'heading', 'name' => 'Überschriften', 'family' => 'Lato', 'source' => 'google', 'weights' => [700, 900], 'fallback' => 'sans-serif'],
|
||||
],
|
||||
['fontFamily' => 'body', 'headingFontFamily' => 'heading', 'fontSize' => '17px', 'lineHeight' => 1.7, 'color' => '@tinte', 'backgroundColor' => '@papier', 'linkColor' => '@rot', 'containerWidth' => '1240px', 'headingScale' => 1.25, 'linkUnderline' => false],
|
||||
['shape' => 'rounded', 'appearance' => 'solid', 'size' => 'large', 'fontFamily' => 'inherit', 'fontSize' => 13, 'fontWeight' => 700, 'letterSpacing' => 0.6, 'textTransform' => 'uppercase', 'backgroundColor' => '@rot', 'color' => '@papier', 'hoverBackgroundColor' => '@rot-dunkel', 'hoverColor' => '@papier'],
|
||||
);
|
||||
|
||||
$medien = [];
|
||||
foreach ([
|
||||
'logo' => ['logo.webp', 'Elektro Bernhard GmbH – Logo'],
|
||||
'team' => ['hero-1200.webp', 'Team und Firmenfahrzeuge von Elektro Bernhard'],
|
||||
'schaltschrank' => ['electrician-900.webp', 'Elektrofachkraft bei der Arbeit an einem Schaltschrank'],
|
||||
] as $schluessel => [$datei, $alt]) {
|
||||
$pfad = rtrim($assets, '/\\').'/'.$datei;
|
||||
if (!is_file($pfad)) {
|
||||
fwrite(STDERR, "Bild fehlt: $pfad\n");
|
||||
exit(1);
|
||||
}
|
||||
$eintrag = $media->upload(new UploadedFile($pfad, $datei, null, null, true));
|
||||
$media->update($eintrag['id'], ['title' => pathinfo($datei, PATHINFO_FILENAME), 'alt' => $alt, 'archived' => false, 'version' => $eintrag['version']]);
|
||||
$medien[$schluessel] = $media->find($eintrag['id']);
|
||||
echo "Bild übernommen: $datei\n";
|
||||
}
|
||||
|
||||
$forms->save('kontakt', 'Kontaktanfrage', [
|
||||
['name' => 'name', 'type' => 'text', 'label' => 'Name / Firma', 'required' => true],
|
||||
['name' => 'email', 'type' => 'email', 'label' => 'E-Mail', 'required' => true],
|
||||
['name' => 'telefon', 'type' => 'phone', 'label' => 'Telefon', 'required' => false],
|
||||
['name' => 'thema', 'type' => 'select', 'label' => 'Worum geht es?', 'required' => true, 'options' => ['Elektroinstallation', 'Smart Home', 'Beratung & Planung', 'Solarenergie', 'Sonstige Anfrage']],
|
||||
['name' => 'nachricht', 'type' => 'textarea', 'label' => 'Ihre Nachricht', 'required' => true, 'help' => 'Was planen Sie und wo soll das Projekt umgesetzt werden?'],
|
||||
['name' => 'datenschutz', 'type' => 'consent', 'label' => 'Ich habe die Datenschutzhinweise gelesen. Meine Angaben werden zur Bearbeitung meiner Anfrage verwendet.'],
|
||||
], ['recipient' => $mail, 'subject' => 'Neue Anfrage über elektro-bernhard.de', 'success' => 'Vielen Dank. Ihre Anfrage ist angekommen – wir melden uns innerhalb von 24 Stunden.', 'replyToField' => 'email'], 0);
|
||||
echo "Formular angelegt: kontakt\n";
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Kopfbereich: schwebt über dem dunklen Seitenkopf, wird beim Scrollen weiß
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$kopf = [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Kopfbereich', 'description' => 'Erscheint auf jeder Seite über dem Inhalt.',
|
||||
'blocks' => [
|
||||
$section('kopf-leiste', [
|
||||
$row('kopf-leiste-zeile', [
|
||||
$column('kopf-leiste-ort', [
|
||||
$text('kopf-leiste-adresse', 'Ooser Hauptstr. 51 · 76532 Baden-Baden', ['desktop' => ['color' => '#c4c8ce', 'fontSize' => '13px', 'lineHeight' => 1.4]]),
|
||||
], [], 'hide-mobile'),
|
||||
$column('kopf-leiste-rechts', [
|
||||
// Auf dem Telefon bleibt in der Leiste nur die Notdienstnummer; die Profile stehen im Fuß.
|
||||
[...$sozial('kopf-sozial', 16, 'plain', '#c4c8ce', ['hover' => ['color' => '@papier']]), 'layout' => ['visibility' => 'hide-mobile']],
|
||||
['id' => 'kopf-leiste-menue', 'type' => 'menu', 'props' => ['slot' => 'secondary', 'layout' => 'horizontal', 'collapse' => 'never'],
|
||||
'style' => ['desktop' => ['fontSize' => '13px', 'fontWeight' => '700', 'color' => '@papier']]],
|
||||
], ['desktop' => ['display' => 'flex', 'justifyContent' => 'flex-end', 'alignItems' => 'center', 'gap' => '22px'], 'mobile' => ['justifyContent' => 'center']]),
|
||||
], ['desktop' => ['columns' => 'two', 'gap' => 'small'], 'mobile' => ['columns' => 'one']], ['desktop' => ['alignItems' => 'center', 'margin' => ['top' => '0px']]]),
|
||||
], ['desktop' => ['backgroundColor' => '@balken', 'padding' => ['top' => '8px', 'bottom' => '8px'], 'borderWidth' => ['top' => '0px', 'right' => '0px', 'bottom' => '1px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => '#ffffff14'], 'mobile' => ['padding' => ['top' => '8px', 'bottom' => '8px']]]),
|
||||
$section('kopf-haupt', [
|
||||
$row('kopf-haupt-zeile', [
|
||||
$column('kopf-marke', [
|
||||
$bild('kopf-logo', $medien['logo'], 'Elektro Bernhard GmbH – Beratung, Service, Installation, Notdienst',
|
||||
['desktop' => ['maxWidth' => '250px', 'backgroundColor' => '@papier', 'padding' => ['top' => '10px', 'right' => '14px', 'bottom' => '10px', 'left' => '14px'], 'borderRadius' => $alleEcken('10px')], 'mobile' => ['maxWidth' => '200px']], null, '/'),
|
||||
]),
|
||||
$column('kopf-navigation', [
|
||||
['id' => 'kopf-menue', 'type' => 'menu', 'props' => ['slot' => 'header', 'layout' => 'horizontal', 'collapse' => 'tablet'],
|
||||
'style' => ['desktop' => ['justifyContent' => 'flex-end', 'fontWeight' => '700', 'fontSize' => '15px', 'gap' => '30px']]],
|
||||
]),
|
||||
], ['desktop' => ['columns' => 'two', 'gap' => 'medium'], 'mobile' => ['columns' => 'two']], ['desktop' => ['alignItems' => 'center', 'minHeight' => '92px', 'margin' => ['top' => '0px']], 'mobile' => ['minHeight' => '72px']]),
|
||||
], [
|
||||
// Durchsichtig am Seitenanfang, weiß mit Schatten sobald gescrollt wird.
|
||||
'desktop' => ['backgroundColor' => '#ffffff00', 'color' => '@papier', 'padding' => ['top' => '6px', 'bottom' => '6px'],
|
||||
'shadowY' => '10px', 'shadowBlur' => '30px', 'shadowColor' => '#00000000',
|
||||
'scrolled' => ['backgroundColor' => '@papier', 'color' => '@tinte', 'shadowColor' => '#0000001f']],
|
||||
'mobile' => ['padding' => ['top' => '6px', 'bottom' => '6px']],
|
||||
]),
|
||||
],
|
||||
];
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Fußbereich
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$fuss = [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Fußbereich', 'description' => 'Erscheint auf jeder Seite unter dem Inhalt.',
|
||||
'blocks' => [
|
||||
$section('fuss-notdienst', [
|
||||
$row('fuss-notdienst-zeile', [
|
||||
$column('fuss-notdienst-text', [
|
||||
$text('fuss-notdienst-titel', '24h Elektro-Notdienst', ['desktop' => ['fontSize' => '20px', 'fontWeight' => '900', 'color' => '@papier', 'lineHeight' => 1.3]]),
|
||||
$text('fuss-notdienst-zusatz', 'Bei elektrischen Störungen rund um die Uhr für Baden-Baden und die Region erreichbar.', ['desktop' => ['fontSize' => '15px', 'color' => '#ffffffd9', 'margin' => ['top' => '4px']]]),
|
||||
]),
|
||||
$column('fuss-notdienst-nummer', [
|
||||
$kontaktBlock('fuss-notdienst-telefon', ['phone' => $notdienst], ['desktop' => ['fontSize' => '30px', 'fontWeight' => '900', 'color' => '@papier', 'justifyContent' => 'flex-end', 'letterSpacing' => '-0.02em'], 'mobile' => ['fontSize' => '24px', 'justifyContent' => 'flex-start']]),
|
||||
]),
|
||||
], ['desktop' => ['columns' => 'two', 'gap' => 'medium'], 'mobile' => ['columns' => 'one']], ['desktop' => ['alignItems' => 'center', 'margin' => ['top' => '0px']]]),
|
||||
], ['desktop' => ['backgroundColor' => '@rot', 'color' => '@papier', 'padding' => ['top' => '30px', 'bottom' => '30px']], 'mobile' => ['padding' => ['top' => '26px', 'bottom' => '26px']]]),
|
||||
$section('fuss-haupt', [
|
||||
$row('fuss-haupt-zeile', [
|
||||
$column('fuss-marke', [
|
||||
$bild('fuss-logo', $medien['logo'], 'Elektro Bernhard GmbH', ['desktop' => ['maxWidth' => '230px', 'backgroundColor' => '@papier', 'padding' => $alleSeiten('12px'), 'borderRadius' => $alleEcken('10px')]], null, '/'),
|
||||
$text('fuss-marke-text', "Elektroinstallation und Kundenservice\nin Baden-Baden und Umgebung – seit über 35 Jahren.", ['desktop' => ['color' => '#b3b8bf', 'fontSize' => '15px', 'margin' => ['top' => '20px', 'bottom' => '20px']]]),
|
||||
$sozial('fuss-sozial', 20, 'circle', '@papier', ['hover' => ['color' => '@rot']]),
|
||||
]),
|
||||
$column('fuss-website', [
|
||||
$heading('fuss-website-titel', 'Unsere Website', 3, $fussTitel),
|
||||
['id' => 'fuss-website-menue', 'type' => 'menu', 'props' => ['slot' => 'footer', 'layout' => 'vertical'], 'style' => ['desktop' => ['fontSize' => '15px', 'color' => '#c4c8ce']]],
|
||||
]),
|
||||
$column('fuss-kontakt', [
|
||||
$heading('fuss-kontakt-titel', 'Kontakt', 3, $fussTitel),
|
||||
$kontaktBlock('fuss-kontakt-daten', ['phone' => $buero, 'email' => $mail, 'address' => 'Ooser Hauptstr. 51, 76532 Baden-Baden'], ['desktop' => ['fontSize' => '15px', 'color' => '#c4c8ce', 'gap' => '10px']]),
|
||||
]),
|
||||
$column('fuss-zeiten', [
|
||||
$heading('fuss-zeiten-titel', 'Bürozeiten', 3, $fussTitel),
|
||||
$text('fuss-zeiten-text', "Mo–Fr: 07:30–17:00 Uhr\nSa–So: geschlossen", ['desktop' => ['fontSize' => '15px', 'lineHeight' => 1.8, 'color' => '#c4c8ce']]),
|
||||
$text('fuss-zeiten-notdienst', '<strong>Notdienst: 24/7 erreichbar</strong>', ['desktop' => ['fontSize' => '15px', 'color' => '@papier', 'margin' => ['top' => '10px']]]),
|
||||
]),
|
||||
], ['desktop' => ['columns' => 'four', 'gap' => 'large'], 'tablet' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
|
||||
['id' => 'fuss-trenner', 'type' => 'divider', 'style' => ['desktop' => ['borderColor' => '#33373c', 'margin' => ['top' => '56px', 'bottom' => '24px']]]],
|
||||
$row('fuss-schluss', [
|
||||
$column('fuss-schluss-links', [$text('fuss-copyright', '© 2026 Elektro Bernhard GmbH', ['desktop' => ['color' => '#8f959c', 'fontSize' => '13px', 'lineHeight' => 1.8]])]),
|
||||
$column('fuss-schluss-rechts', [
|
||||
['id' => 'fuss-rechtliches', 'type' => 'legal', 'props' => ['label' => 'Rechtliches'], 'style' => ['desktop' => ['color' => '#b3b8bf', 'fontSize' => '13px', 'justifyContent' => 'flex-end', 'padding' => ['right' => '72px']], 'mobile' => ['justifyContent' => 'flex-start', 'padding' => ['right' => '0px']]]],
|
||||
[...$text('fuss-urheber', 'Website von <a href="https://www.kant-it.de/">Kant-IT Solutions</a>', ['desktop' => ['color' => '#8f959c', 'fontSize' => '13px', 'textAlign' => 'right', 'margin' => ['top' => '6px'], 'padding' => ['right' => '72px']], 'mobile' => ['textAlign' => 'left', 'padding' => ['right' => '0px']]]), 'css' => '& a{color:#e8eaed}'],
|
||||
]),
|
||||
], ['desktop' => ['columns' => 'two', 'gap' => 'medium'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
|
||||
], ['desktop' => ['backgroundColor' => '@nacht', 'color' => '#b3b8bf', 'padding' => ['top' => '72px', 'bottom' => '24px']], 'mobile' => ['padding' => ['top' => '52px', 'bottom' => '24px']]]),
|
||||
],
|
||||
];
|
||||
|
||||
$partials->create('header', 'default', 'Kopfbereich', $kopf);
|
||||
$partials->create('footer', 'default', 'Fußbereich', $fuss);
|
||||
echo "Kopf- und Fußbereich angelegt\n";
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Inhalte
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$leistungen = [
|
||||
['elektroinstallation', 'hardware', 'Elektroinstallation', 'Wir planen und installieren die Elektrik in Neubauten und übernehmen Elektroarbeiten bei Sanierungen.'],
|
||||
['smart-home', 'app', 'Smart Home', 'Beleuchtung, Heizung und Sicherheit zentral steuern. Wir beraten Sie, welche Lösung zu Ihrem Gebäude passt.'],
|
||||
['notdienst', 'phone', '24h Notdienst', 'Bei elektrischen Störungen erreichen Sie unseren Notdienst unter '.$notdienst.', auch außerhalb der Bürozeiten.'],
|
||||
['beratung-planung', 'design', 'Beratung & Planung', 'Sie möchten bauen oder umbauen? Wir besprechen mit Ihnen, welche Anschlüsse und Funktionen Sie benötigen.'],
|
||||
];
|
||||
|
||||
$fragen = [
|
||||
['Wo ist Elektro Bernhard im Einsatz?', 'Unser Standort ist in Baden-Baden. Wir betreuen Projekte in Baden-Baden, Sinzheim, Hügelsheim, Iffezheim, Bühl, Rastatt, Kuppenheim, Muggensturm, Gaggenau, Gernsbach und im Murgtal, Ettlingen und Karlsruhe sowie Achern, Oberkirch und Offenburg – von Karlsruhe bis Offenburg. Fragen Sie uns gerne zu Ihrem konkreten Projektort.'],
|
||||
['Übernehmen Sie Neubauten und Sanierungen?', 'Ja. Elektroinstallation für Neu- und Altbauten gehört zu unseren Leistungen. Wir beraten Sie zu Ihrem Vorhaben und planen gemeinsam die passende Umsetzung.'],
|
||||
['Was lässt sich mit Smart Home steuern?', 'Zum Beispiel Beleuchtung, Heizung und Sicherheitsfunktionen. Welche Steuerung zu Ihrem Gebäude passt, klären wir in einer individuellen Beratung.'],
|
||||
['Wie erreiche ich den 24h-Notdienst?', 'Bei einem elektrischen Notfall erreichen Sie unseren Kundendienst rund um die Uhr unter '.$notdienst.'. Für reguläre Projektanfragen erreichen Sie unser Büro unter '.$buero.'.'],
|
||||
['Bieten Sie auch Solaranlagen an?', 'Solarplanung und Installation übernimmt die eigenständige Elektro Bernhard Regenerative Energie GmbH. Das Angebot richtet sich an private Wohnhäuser und Geschäftsgebäude.'],
|
||||
['Wann ist das Büro erreichbar?', 'Montag bis Freitag von 07:30 bis 17:00 Uhr unter '.$buero.'. Außerhalb dieser Zeiten und am Wochenende hilft bei einem elektrischen Notfall der 24h-Notdienst unter '.$notdienst.'.'],
|
||||
['Wie läuft eine Anfrage ab?', 'Sie schildern uns Ihr Vorhaben und den Ort – per Formular, E-Mail oder Telefon. Wir melden uns innerhalb von 24 Stunden, klären offene Fragen und stimmen mit Ihnen einen Termin vor Ort oder ein Angebot ab.'],
|
||||
];
|
||||
|
||||
// Wortlaut, Name und Datum am 14.09.2026 aus den auf elektro-bernhard.de veröffentlichten
|
||||
// Google-Rezensionen übernommen (Zuordnung am DOM geprüft, nicht aus der Textfassung geraten).
|
||||
$stimmen = [
|
||||
['philipp', 'Als Architekt empfehle ich die Firma Bernhard gerne weiter. Zuverlässig, professionell und entspannt. Probleme werden zielführend gelöst und die Wünsche der Bauherren erfüllt. Solche Handwerker gibt es heutzutage leider immer seltener.', 'Philipp Bender', 'Google · 26. November 2024'],
|
||||
['soeren', 'Angefangen vom ersten Planungsgespräch, die Terminierung, Durchführung und Abnahme war ALLES perfekt. Obwohl wir tendenziell eher ein kleineres Projekt hatten, wurde alles sehr professionell und auf die Stunde genau pünktlich umgesetzt.', 'Sören de Vries', 'Google · 26. Oktober 2024'],
|
||||
['michael', 'Das Team hat sauber und gründlich gearbeitet und war immer sehr freundlich. Es wurden vollumfänglich Fragen beantwortet, wir wurden durch das Projekt regelrecht begleitet. Solche Handwerker findet man sehr selten.', 'Michael Pfeil', 'Google · 26. Oktober 2024'],
|
||||
['dijar', 'Ein erstklassiges Unternehmen – extrem zuverlässig und absolut kompetent. Bereits am Sonntag standen die Mitarbeiter, inklusive des Geschäftsführers, persönlich vor Ort. Absolute Empfehlung!', 'Dijar Bislimi', 'Google · 26. Oktober 2024'],
|
||||
['samir', 'Super Firma und einfach tolle Mitarbeiter', 'Redzepi Samir', 'Google · 26. Oktober 2024'],
|
||||
['artur', 'Von der Planung bis zur Ausführung top zufrieden. Sehr empfehlenswert.', 'Artur', 'Google · 9. Mai 2024'],
|
||||
];
|
||||
|
||||
$marken = ['Busch-Jaeger', 'JUNG', 'KNX', 'Gira', 'hager', 'Siedle'];
|
||||
|
||||
// Die sechs Punkte, mit denen der bestehende Auftritt unter „Über uns“ für sich wirbt.
|
||||
$staerken = [
|
||||
['zufriedenheit', 'star', 'Kundenzufriedenheit', 'Im Mittelpunkt steht der Kunde. Unser Ziel ist, Ihre Wünsche zu Ihrer vollsten Zufriedenheit zu erfüllen.'],
|
||||
['qualitaet', 'shield', 'Qualität', 'Ausschließlich Qualitätsware aus deutschen Markenprodukten.'],
|
||||
['erfahrung', 'clock', 'Erfahrung', 'Über 35 Jahre Erfahrung sprechen für sich.'],
|
||||
['flexibel', 'network', 'Flexibel', 'Durch zahlreiche Partner können wir auch bei komplexen Aufgaben schnell reagieren.'],
|
||||
['professionell', 'hardware', 'Professionell', 'Professionelle Werkzeuge für einen reibungslosen Ablauf auf Ihrer Baustelle.'],
|
||||
['sauber', 'check', 'Schnell & sauber', 'Saubere Arbeit in vergleichbar schnellem Arbeitstempo.'],
|
||||
];
|
||||
|
||||
$leistungstexte = [
|
||||
'elektroinstallation' => ['Elektroinstallation in Baden-Baden | Elektro Bernhard', 'Elektroinstallation für Neubau und Altbau', 'Sie bauen neu oder modernisieren ein bestehendes Gebäude? Wir begleiten Ihre Elektroinstallation von der Planung bis zur Umsetzung.', [
|
||||
['Neubau und Altbau', 'Die passende Elektroinstallation beginnt mit Ihren Anforderungen: Welche Räume nutzen Sie wie? Wo benötigen Sie Anschlüsse? Gemeinsam besprechen wir Ihr Vorhaben und schaffen eine Grundlage für die weitere Planung.'],
|
||||
['Material und Ausführung', 'Wir setzen auf Markenprodukte, professionelles Werkzeug und sorgfältige Ausführung. Auch bei komplexeren Aufgaben greifen wir auf unser Partnernetzwerk zurück.'],
|
||||
]],
|
||||
'smart-home' => ['Smart Home in Baden-Baden | Elektro Bernhard', 'Smart Home für Ihr Zuhause', 'Licht, Heizung und Sicherheitsfunktionen intelligent steuern: Wir planen Smart-Home-Lösungen passend zu Ihrem Gebäude und Ihren Gewohnheiten.', [
|
||||
['Was möchten Sie steuern?', 'Im Mittelpunkt steht Ihr Alltag. Wir besprechen, welche Funktionen Sie vereinfachen möchten und wie eine individuelle Steuerung dabei helfen kann.'],
|
||||
['Welche Technik passt zum Gebäude?', 'Bevor wir eine Lösung empfehlen, betrachten wir Ihre Wünsche und die Gegebenheiten vor Ort. So lässt sich klären, welche Technik zu Ihrem Projekt passt.'],
|
||||
]],
|
||||
'notdienst' => ['24h Elektro-Notdienst in Baden-Baden | Elektro Bernhard', '24h Elektro-Notdienst', 'Bei elektrischen Notfällen ist unser Kundendienst rund um die Uhr unter '.$notdienst.' erreichbar. Schildern Sie uns am Telefon das Problem und Ihren Standort.', [
|
||||
['Für die Region erreichbar', 'Unser Einsatzgebiet umfasst Baden-Baden, Sinzheim, Hügelsheim, Iffezheim, Bühl, Rastatt, Kuppenheim, Muggensturm, Gaggenau, Gernsbach und das Murgtal, Ettlingen und Karlsruhe sowie Achern, Oberkirch und Offenburg. Die konkrete Verfügbarkeit für Ihren Standort klären wir im Gespräch.'],
|
||||
['Der direkte Weg zur Hilfe', 'Für einen Notfall nutzen Sie bitte die Notdienstnummer. Das Kontaktformular ist für reguläre Anfragen gedacht und wird nicht durchgehend überwacht.'],
|
||||
]],
|
||||
'beratung-planung' => ['Elektroplanung & Beratung in Baden-Baden | Elektro Bernhard', 'Beratung und Elektroplanung', 'Ob erste Idee oder konkretes Vorhaben: Wir beraten Sie individuell und begleiten die Planung Ihrer Elektrotechnik.', [
|
||||
['Ihr Vorhaben', 'Erzählen Sie uns, was Sie vorhaben. Gemeinsam besprechen wir den Umfang und die Anforderungen Ihres Projekts – vom einzelnen Bereich bis zum Neu- oder Altbau.'],
|
||||
['Ein Ansprechpartner für die Umsetzung', 'Beratung, Planung und Installation greifen bei uns ineinander. Wir stimmen die nächsten Schritte mit Ihnen ab und behalten Ihre Anforderungen im Blick.'],
|
||||
]],
|
||||
];
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Wiederkehrende Abschnitte
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Der dunkle Seitenkopf jeder Unterseite. Er liegt unter dem schwebenden Kopfbereich, deshalb
|
||||
* beginnt sein Inhalt erst 200 px weiter unten; die Brotkrumen stehen darin in Weiß.
|
||||
*/
|
||||
$seitenkopf = static function (string $praefix, string $label, string $h1, string $intro = '', array $zusatz = []) use ($section, $eyebrow, $heading, $text, $fx, $fliessHell): array {
|
||||
$kinder = [
|
||||
['id' => $praefix.'-brotkrumen', 'type' => 'breadcrumb', 'style' => ['desktop' => ['color' => '#ffffffb3', 'margin' => ['bottom' => '28px']]]],
|
||||
$fx($eyebrow($praefix.'-label', $label, '#ff7d90'), 'fade'),
|
||||
$fx($heading($praefix.'-h1', $h1, 1, ['desktop' => ['fontSize' => '56px', 'lineHeight' => 1.08, 'letterSpacing' => '-0.03em', 'fontWeight' => '900', 'color' => '@papier', 'maxWidth' => '820px', 'margin' => ['bottom' => '18px']], 'mobile' => ['fontSize' => '36px']]), 'rise', 'short'),
|
||||
];
|
||||
if ('' !== $intro) {
|
||||
$kinder[] = $fx($text($praefix.'-intro', $intro, ['desktop' => [...$fliessHell['desktop'], 'fontSize' => '19px', 'maxWidth' => '680px']]), 'rise', 'medium');
|
||||
}
|
||||
foreach ($zusatz as $block) {
|
||||
$kinder[] = $fx($block, 'rise', 'long');
|
||||
}
|
||||
|
||||
return $section($praefix.'-kopf', $kinder, [
|
||||
'desktop' => ['backgroundColor' => '@tinte', 'color' => '@papier', 'padding' => ['top' => '200px', 'bottom' => '80px']],
|
||||
'mobile' => ['padding' => ['top' => '166px', 'bottom' => '56px']],
|
||||
]);
|
||||
};
|
||||
|
||||
/** Der schmale Textkörper einer Unterseite. */
|
||||
$textkoerper = static function (string $praefix, array $absaetze, array $vorspann = [], array $schluss = []) use ($section, $heading, $text, $fliess): array {
|
||||
$kinder = $vorspann;
|
||||
foreach ($absaetze as $i => [$titel, $inhalt]) {
|
||||
if ('' !== $titel) {
|
||||
$kinder[] = $heading($praefix.'-h2-'.$i, $titel, 2, ['desktop' => ['fontSize' => '28px', 'lineHeight' => 1.25, 'letterSpacing' => '-0.02em', 'fontWeight' => '900', 'margin' => ['top' => '40px', 'bottom' => '14px']]]);
|
||||
}
|
||||
$kinder[] = $text($praefix.'-p-'.$i, $inhalt, $fliess);
|
||||
}
|
||||
foreach ($schluss as $block) {
|
||||
$kinder[] = $block;
|
||||
}
|
||||
|
||||
return $section($praefix.'-inhalt', $kinder, ['desktop' => ['maxWidth' => '860px', 'padding' => ['top' => '72px', 'bottom' => '96px']], 'mobile' => ['padding' => ['top' => '48px', 'bottom' => '64px']]]);
|
||||
};
|
||||
|
||||
/** Der Kontaktabschnitt – auf Startseite und Kontaktseite derselbe Aufbau. */
|
||||
$kontaktAbschnitt = static function (string $praefix) use ($section, $row, $column, $heading, $text, $eyebrow, $kontaktBlock, $fx, $fliess, $h2Stil, $h3Stil, $alleEcken, $alleSeiten, $buero, $mail): array {
|
||||
return $section($praefix.'-kontakt', [
|
||||
$row($praefix.'-kontakt-zeile', [
|
||||
$column($praefix.'-kontakt-links', [
|
||||
$fx($eyebrow($praefix.'-kontakt-label', 'Kontakt'), 'fade'),
|
||||
$fx($heading($praefix.'-kontakt-titel', 'Wie können wir Ihnen helfen?', 2, $h2Stil), 'rise'),
|
||||
$fx($text($praefix.'-kontakt-text', 'Rufen Sie uns an oder schreiben Sie uns, welche Arbeiten Sie planen. Bitte geben Sie auch den Ort an – wir melden uns innerhalb von 24 Stunden.', $fliess), 'rise', 'short'),
|
||||
$fx($kontaktBlock($praefix.'-kontakt-daten', ['phone' => $buero, 'email' => $mail], ['desktop' => ['fontSize' => '28px', 'fontWeight' => '900', 'letterSpacing' => '-0.02em', 'gap' => '12px', 'margin' => ['top' => '18px', 'bottom' => '30px']], 'mobile' => ['fontSize' => '22px']]), 'rise', 'medium'),
|
||||
$row($praefix.'-kontakt-details', [
|
||||
$column($praefix.'-kontakt-anschrift', [
|
||||
$heading($praefix.'-kontakt-anschrift-titel', 'Hier finden Sie uns', 3, ['desktop' => ['fontSize' => '15px', 'fontWeight' => '700', 'margin' => ['bottom' => '8px']]]),
|
||||
$text($praefix.'-kontakt-anschrift-text', "Elektro Bernhard GmbH\nOoser Hauptstr. 51\n76532 Baden-Baden", ['desktop' => ['fontSize' => '15px', 'lineHeight' => 1.7, 'color' => '@gedaempft']]),
|
||||
$text($praefix.'-kontakt-route', '<a href="https://www.google.com/maps/search/?api=1&query=Elektro+Bernhard+Ooser+Hauptstr.+51+Baden-Baden" target="_blank">Route auf Google Maps →</a>', ['desktop' => ['fontSize' => '15px', 'fontWeight' => '700', 'color' => '@rot', 'margin' => ['top' => '10px']]]),
|
||||
]),
|
||||
$column($praefix.'-kontakt-zeiten', [
|
||||
$heading($praefix.'-kontakt-zeiten-titel', 'Bürozeiten', 3, ['desktop' => ['fontSize' => '15px', 'fontWeight' => '700', 'margin' => ['bottom' => '8px']]]),
|
||||
$text($praefix.'-kontakt-zeiten-text', "Mo–Fr: 07:30–17:00 Uhr\nSa–So: geschlossen", ['desktop' => ['fontSize' => '15px', 'lineHeight' => 1.7, 'color' => '@gedaempft']]),
|
||||
$text($praefix.'-kontakt-zeiten-notdienst', '<strong>Notdienst: 24/7 erreichbar</strong>', ['desktop' => ['fontSize' => '15px', 'margin' => ['top' => '10px']]]),
|
||||
]),
|
||||
], ['desktop' => ['columns' => 'two', 'gap' => 'medium'], 'mobile' => ['columns' => 'one']], ['desktop' => ['borderWidth' => ['top' => '1px', 'right' => '0px', 'bottom' => '0px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => '@linie', 'padding' => ['top' => '26px'], 'margin' => ['top' => '0px']]]),
|
||||
]),
|
||||
$fx($column($praefix.'-kontakt-rechts', [
|
||||
$heading($praefix.'-formular-titel', 'Schreiben Sie uns', 3, $h3Stil),
|
||||
$text($praefix.'-formular-hinweis', 'Für einen Notfall nutzen Sie bitte die Notdienstnummer.', ['desktop' => ['fontSize' => '14px', 'color' => '@gedaempft', 'margin' => ['bottom' => '22px']]]),
|
||||
['id' => $praefix.'-formular', 'type' => 'form', 'props' => ['form' => 'kontakt']],
|
||||
], ['desktop' => ['backgroundColor' => '@papier', 'padding' => $alleSeiten('40px'), 'borderRadius' => $alleEcken('20px')], 'mobile' => ['padding' => $alleSeiten('24px')]]), 'rise', 'short', null, 'strong'),
|
||||
], ['desktop' => ['columns' => 'two', 'gap' => 'large'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
|
||||
], ['desktop' => ['backgroundColor' => '@weich']], 'kontakt');
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Startseite
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$startseite = [
|
||||
'schemaVersion' => $SCHEMA,
|
||||
'title' => 'Elektro Bernhard GmbH',
|
||||
'description' => 'Elektroinstallation, Smart Home und 24h-Notdienst in Baden-Baden, Rastatt und Umgebung. Über 35 Jahre Erfahrung. Jetzt Elektro Bernhard kontaktieren.',
|
||||
'blocks' => [
|
||||
// 1 – Hero: das Teamfoto als Hintergrund, dunkel überlagert, weißer Titel.
|
||||
$section('hero', [
|
||||
$column('hero-text', [
|
||||
$fx($eyebrow('hero-label', 'Elektro Bernhard GmbH · Seit über 35 Jahren', '#ff7d90'), 'fade'),
|
||||
$fx($heading('hero-titel', "Ihr Elektriker in\nBaden-Baden.", 1, ['desktop' => ['fontSize' => '76px', 'lineHeight' => 1.04, 'letterSpacing' => '-0.035em', 'fontWeight' => '900', 'color' => '@papier', 'margin' => ['bottom' => '24px']], 'tablet' => ['fontSize' => '56px'], 'mobile' => ['fontSize' => '40px']]), 'rise', 'short'),
|
||||
$fx($text('hero-intro', 'Ob Neubau, Sanierung oder eine Störung an der Elektrik: Wir kümmern uns darum. Für Privatkunden und Betriebe von Karlsruhe bis Offenburg.', ['desktop' => ['color' => '#ffffffd9', 'fontSize' => '20px', 'lineHeight' => 1.65, 'maxWidth' => '600px', 'margin' => ['bottom' => '34px']], 'mobile' => ['fontSize' => '17px']]), 'rise', 'medium'),
|
||||
$fx($row('hero-aktionen', [
|
||||
$column('hero-aktion-anfrage', [$button('hero-anfrage', 'Anfrage stellen', '/kontakt')]),
|
||||
$column('hero-aktion-telefon', [
|
||||
$kontaktBlock('hero-telefon', ['phone' => $buero], ['desktop' => [
|
||||
'color' => '@papier', 'fontSize' => '15px', 'fontWeight' => '700', 'minHeight' => '54px', 'alignItems' => 'center', 'justifyContent' => 'center',
|
||||
'padding' => ['top' => '14px', 'right' => '24px', 'bottom' => '14px', 'left' => '20px'],
|
||||
'borderWidth' => $alleSeiten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#ffffff66', 'borderRadius' => $alleEcken('8px'),
|
||||
'hover' => ['backgroundColor' => '#ffffff1f', 'borderColor' => '@papier'],
|
||||
]]),
|
||||
]),
|
||||
], ['desktop' => ['columns' => 'auto', 'gap' => 'small'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]), 'rise', 'long'),
|
||||
$fx($row('hero-zahlen', [
|
||||
['id' => 'hero-zahl-jahre', 'type' => 'stat', 'props' => ['value' => '35+', 'label' => 'Jahre Erfahrung']],
|
||||
['id' => 'hero-zahl-team', 'type' => 'stat', 'props' => ['value' => '11', 'label' => 'Mitarbeiter im Team']],
|
||||
['id' => 'hero-zahl-notdienst', 'type' => 'stat', 'props' => ['value' => '24h', 'label' => 'Notdienst erreichbar']],
|
||||
], ['desktop' => ['columns' => 'three', 'gap' => 'medium'], 'mobile' => ['columns' => 'three', 'gap' => 'small']], ['desktop' => ['margin' => ['top' => '56px'], 'padding' => ['top' => '28px'], 'borderWidth' => ['top' => '1px', 'right' => '0px', 'bottom' => '0px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => '#ffffff2e', 'color' => '@papier', 'fontSize' => '36px', 'maxWidth' => '640px'], 'mobile' => ['fontSize' => '24px', 'margin' => ['top' => '36px']]]), 'fade', 'long'),
|
||||
], ['desktop' => ['maxWidth' => '780px']]),
|
||||
], [
|
||||
'desktop' => ['backgroundImage' => $medien['team']['id'], 'backgroundSize' => 'cover', 'backgroundPosition' => 'center', 'overlayColor' => '#0e1013', 'overlayOpacity' => 0.68,
|
||||
'color' => '@papier', 'minHeight' => '92dvh', 'padding' => ['top' => '230px', 'bottom' => '100px'], 'display' => 'flex', 'alignItems' => 'center'],
|
||||
'mobile' => ['padding' => ['top' => '176px', 'bottom' => '64px'], 'minHeight' => 'auto'],
|
||||
]),
|
||||
|
||||
// 2 – Leistungen: vier Karten
|
||||
$section('leistungen', [
|
||||
$row('leistungen-kopf', [
|
||||
$column('leistungen-kopf-titel', [
|
||||
$fx($eyebrow('leistungen-label', 'Unsere Leistungen'), 'fade'),
|
||||
$fx($heading('leistungen-titel', 'Elektrotechnik aus einer Hand', 2, $h2Stil), 'rise'),
|
||||
]),
|
||||
$column('leistungen-kopf-text', [
|
||||
$fx($text('leistungen-intro', 'Wir übernehmen Beratung, Planung und Installation. Auch nach Abschluss der Arbeiten erreichen Sie uns bei Fragen oder Störungen.', ['desktop' => [...$fliess['desktop'], 'maxWidth' => '460px']]), 'rise', 'short'),
|
||||
], ['desktop' => ['alignSelf' => 'flex-end']]),
|
||||
], ['desktop' => ['columns' => 'two', 'gap' => 'large'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px', 'bottom' => '40px']]]),
|
||||
$row('leistungen-raster', array_map(
|
||||
static fn (array $l, int $i): array => [...$karte('leistung-'.$l[0], $l[1], $l[2], $l[3], '/leistungen/'.$l[0]), 'layout' => ['effects' => ['shadow' => 'soft', 'hover' => 'lift', 'entrance' => 'rise', 'delay' => ['none', 'short', 'medium', 'long'][$i]]]],
|
||||
$leistungen, array_keys($leistungen),
|
||||
), ['desktop' => ['columns' => 'four', 'gap' => 'medium'], 'tablet' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
|
||||
], [], 'service'),
|
||||
|
||||
// 3 – Über uns: Foto mit Schatten, daneben Text und die Stärken
|
||||
$section('unternehmen', [
|
||||
$row('ueber-uns-zeile', [
|
||||
$column('ueber-uns-bild-spalte', [
|
||||
$fx($bild('ueber-uns-bild', $medien['schaltschrank'], 'Elektrofachkraft bei der Arbeit an einem Schaltschrank', ['desktop' => ['imageHeight' => '560px', 'objectFit' => 'cover', 'imageRadius' => $alleEcken('20px')], 'mobile' => ['imageHeight' => '340px']]), 'left', 'none', null, 'strong'),
|
||||
], ['desktop' => ['alignSelf' => 'center']]),
|
||||
$column('ueber-uns-text', [
|
||||
$fx($eyebrow('ueber-uns-label', 'Über uns'), 'fade'),
|
||||
$fx($heading('ueber-uns-titel', 'Ein Betrieb mit Tradition – und moderner Technik', 2, $h2Stil), 'rise'),
|
||||
$fx($text('ueber-uns-1', 'Elektro Bernhard kommt ursprünglich aus Hügelsheim. Heute finden Sie uns in der Ooser Hauptstraße 51 in Baden-Baden. Elektroinstallation und Kundenservice gehören seit über 35 Jahren zu unserer Arbeit; 2017 wurde der Betrieb modernisiert – seitdem mit dem Schwerpunkt auf Gebäudetechnik und Smart Home.', $fliess), 'rise', 'short'),
|
||||
$fx($row('staerken-raster', array_map(
|
||||
static fn (array $s): array => $punkt('staerke-'.$s[0], $s[1], $s[2], $s[3]),
|
||||
array_slice($staerken, 0, 4),
|
||||
), ['desktop' => ['columns' => 'two', 'gap' => 'medium'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '10px']]]), 'rise', 'medium'),
|
||||
$fx($text('ueber-uns-link', '<a href="/leistungen">Mehr über unsere Arbeit →</a>', $linkStil), 'fade', 'long'),
|
||||
], ['desktop' => ['alignSelf' => 'center']]),
|
||||
], ['desktop' => ['columns' => 'two', 'gap' => 'large'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
|
||||
], ['desktop' => ['backgroundColor' => '@weich']], 'ueber-uns'),
|
||||
|
||||
// 4 – Kundenstimmen als Slider
|
||||
$section('stimmen', [
|
||||
$row('stimmen-kopf', [
|
||||
$column('stimmen-kopf-titel', [
|
||||
$fx($eyebrow('stimmen-label', 'Google-Bewertungen'), 'fade'),
|
||||
$fx($heading('stimmen-titel', 'Was unsere Kunden sagen', 2, $h2Stil), 'rise'),
|
||||
]),
|
||||
$column('stimmen-kopf-link', [
|
||||
$fx($button('stimmen-link', 'Auf Google bewerten', 'https://g.page/ElektroBernhardbadenbaden', ['desktop' => ['margin' => ['top' => '0px']]], ['desktop' => ['appearance' => 'outline']]), 'fade', 'short'),
|
||||
], ['desktop' => ['display' => 'flex', 'justifyContent' => 'flex-end', 'alignItems' => 'flex-end'], 'mobile' => ['justifyContent' => 'flex-start']]),
|
||||
], ['desktop' => ['columns' => 'two', 'gap' => 'large'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px', 'bottom' => '36px']]]),
|
||||
['id' => 'stimmen-slider', 'type' => 'slider', 'props' => ['desktopVisible' => 3, 'tabletVisible' => 2, 'mobileVisible' => 1, 'snap' => true, 'dots' => true, 'autoplay' => 7],
|
||||
'children' => array_map(static function (array $s) use ($alleEcken, $alleSeiten): array {
|
||||
return [
|
||||
'id' => 'stimme-'.$s[0], 'type' => 'quote',
|
||||
'props' => ['text' => $s[1], 'author' => $s[2], 'role' => $s[3], 'rating' => 5],
|
||||
'style' => ['desktop' => ['backgroundColor' => '@papier', 'padding' => $alleSeiten('30px'), 'borderWidth' => $alleSeiten('1px'), 'borderStyle' => 'solid', 'borderColor' => '@linie', 'borderRadius' => $alleEcken('16px'), 'fontSize' => '16px', 'height' => '100%']],
|
||||
'css' => "& .quote-rating{color:#e8a300;letter-spacing:3px;font-size:15px}\n& figcaption span{display:block;color:#5d636b;font-weight:400;font-size:13px;margin-top:4px}",
|
||||
'layout' => ['effects' => ['shadow' => 'soft']],
|
||||
];
|
||||
}, $stimmen)],
|
||||
$text('stimmen-hinweis', 'Ausgewählte Google-Rezensionen aus 2024. Stand der Auswahl: 14.09.2026. Es wird kein Gesamtdurchschnitt ausgewiesen.', ['desktop' => ['fontSize' => '13px', 'color' => '@gedaempft', 'margin' => ['top' => '24px']]]),
|
||||
]),
|
||||
|
||||
// 5 – Marken
|
||||
$section('marken', [
|
||||
$row('marken-zeile', array_merge(
|
||||
[$column('marken-label-spalte', [$text('marken-label', 'Wir arbeiten mit bewährten Marken', ['desktop' => ['color' => '@gedaempft', 'fontSize' => '13px', 'fontWeight' => '700', 'letterSpacing' => '0.12em', 'textTransform' => 'uppercase']])])],
|
||||
array_map(static fn (string $name, int $i): array => [
|
||||
'id' => 'marke-'.($i + 1), 'type' => 'column',
|
||||
'children' => [['id' => 'marke-name-'.($i + 1), 'type' => 'text', 'props' => ['text' => $name], 'style' => ['desktop' => ['fontSize' => '24px', 'fontWeight' => '900', 'letterSpacing' => '-0.04em', 'color' => '#6b7178', 'textAlign' => 'center'], 'mobile' => ['fontSize' => '20px']]]],
|
||||
], $marken, array_keys($marken)),
|
||||
), [], ['desktop' => ['display' => 'flex', 'flexWrap' => 'wrap', 'alignItems' => 'center', 'justifyContent' => 'space-between', 'gap' => '40px', 'margin' => ['top' => '0px']], 'mobile' => ['gap' => '22px', 'justifyContent' => 'center']]),
|
||||
], ['desktop' => ['padding' => ['top' => '40px', 'bottom' => '40px'], 'borderWidth' => ['top' => '1px', 'right' => '0px', 'bottom' => '1px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => '@linie'], 'mobile' => ['padding' => ['top' => '32px', 'bottom' => '32px']]]),
|
||||
|
||||
// 6 – Solar: dunkles Band
|
||||
$section('energie', [
|
||||
$row('energie-zeile', [
|
||||
$column('energie-text', [
|
||||
$fx($eyebrow('energie-label', 'Regenerative Energie', '#ff7d90'), 'fade'),
|
||||
$fx($heading('energie-titel', 'Sie planen eine Solaranlage?', 2, ['desktop' => [...$h2Stil['desktop'], 'color' => '@papier'], 'mobile' => $h2Stil['mobile']]), 'rise'),
|
||||
$fx($text('energie-intro', 'Solaranlagen für Ihr Zuhause oder Geschäftsgebäude – mit der eigenständigen Elektro Bernhard Regenerative Energie GmbH.', $fliessHell), 'rise', 'short'),
|
||||
$fx($button('energie-knopf', 'Mehr über Solarenergie', '/regenerative-energie', ['desktop' => ['margin' => ['top' => '12px']]]), 'rise', 'medium'),
|
||||
], ['desktop' => ['alignSelf' => 'center']]),
|
||||
$fx($column('energie-liste', [
|
||||
$punkt('energie-punkt-1', 'check', 'Individuelle Solarplanung', 'Auslegung nach Dach, Verbrauch und Ziel.', '#ff7d90', '#c2c6cc'),
|
||||
$punkt('energie-punkt-2', 'check', 'Fachgerechte Installation', 'Montage und Anschluss aus einer Hand.', '#ff7d90', '#c2c6cc'),
|
||||
$punkt('energie-punkt-3', 'check', 'Angebot für Ihr Gebäude', 'Transparent und auf Ihr Vorhaben zugeschnitten.', '#ff7d90', '#c2c6cc'),
|
||||
], ['desktop' => ['backgroundColor' => '@karte-dunkel', 'color' => '@papier', 'padding' => $alleSeiten('36px'), 'borderRadius' => $alleEcken('20px'), 'display' => 'flex', 'flexDirection' => 'column', 'gap' => '22px']]), 'right', 'short'),
|
||||
], ['desktop' => ['columns' => 'two', 'gap' => 'large'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
|
||||
], ['desktop' => ['backgroundColor' => '@tinte', 'color' => '@papier']]),
|
||||
|
||||
// 7 – Häufige Fragen
|
||||
$section('fragen', [
|
||||
$row('fragen-zeile', [
|
||||
$column('fragen-intro', [
|
||||
$fx($eyebrow('fragen-label', 'FAQ'), 'fade'),
|
||||
$fx($heading('fragen-titel', 'Häufige Fragen', 2, $h2Stil), 'rise'),
|
||||
$fx($text('fragen-text', 'Wenn Ihre Frage hier nicht dabei ist, rufen Sie uns gerne an.', ['desktop' => [...$fliess['desktop'], 'maxWidth' => '360px']]), 'rise', 'short'),
|
||||
$fx($kontaktBlock('fragen-telefon', ['phone' => $buero], ['desktop' => ['fontSize' => '18px', 'fontWeight' => '900', 'color' => '@rot', 'margin' => ['top' => '10px']]]), 'rise', 'medium'),
|
||||
]),
|
||||
$column('fragen-liste', [
|
||||
['id' => 'fragen-akkordeon', 'type' => 'accordion', 'props' => ['faq' => true], 'children' => array_map(static function (array $f, int $i) use ($alleEcken): array {
|
||||
return [
|
||||
'id' => 'frage-'.($i + 1), 'type' => 'accordionitem', 'props' => ['title' => $f[0], 'open' => 0 === $i],
|
||||
'style' => ['desktop' => ['backgroundColor' => '@weich', 'borderStyle' => 'none', 'borderRadius' => $alleEcken('14px'), 'padding' => ['top' => '4px', 'right' => '24px', 'bottom' => '4px', 'left' => '24px']]],
|
||||
'css' => "& > summary{font-size:17px;padding:18px 0}\n& > summary::after{color:#c8102e}",
|
||||
'children' => [['id' => 'antwort-'.($i + 1), 'type' => 'text', 'props' => ['text' => $f[1]], 'style' => ['desktop' => ['fontSize' => '15px', 'color' => '@gedaempft', 'lineHeight' => 1.75, 'padding' => ['bottom' => '14px']]]]],
|
||||
];
|
||||
}, $fragen, array_keys($fragen)), 'style' => ['desktop' => ['gap' => '12px']]],
|
||||
]),
|
||||
], ['desktop' => ['columns' => 'two', 'gap' => 'large'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
|
||||
]),
|
||||
|
||||
// 8 – Kontakt
|
||||
$kontaktAbschnitt('start'),
|
||||
],
|
||||
];
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Seiten anlegen und veröffentlichen
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$erstellt = [];
|
||||
$anlegen = static function (string $slug, ?string $elternId, array $dokument, string $seoTitel = '', string $teilbild = '') use ($pages, $db, &$erstellt): string {
|
||||
$id = $pages->createPage($slug, $elternId, 'page', $dokument);
|
||||
// Der Dokumenttitel ist der kurze Name (Brotkrumen, Menüs); der lange steht in „Titel für die Suche“.
|
||||
if ('' !== $seoTitel) {
|
||||
$db->executeStatement('UPDATE page SET seo_title = ? WHERE id = ?', [$seoTitel, $id]);
|
||||
}
|
||||
// Das Bild beim Teilen; im Editor unter „Vorschaubild beim Teilen“.
|
||||
if ('' !== $teilbild) {
|
||||
$db->executeStatement('UPDATE page SET og_media_id = ? WHERE id = ?', [$teilbild, $id]);
|
||||
}
|
||||
$seite = $db->fetchAssociative('SELECT draft_revision_id, version FROM page WHERE id = ?', [$id]);
|
||||
$pages->publish($id, $seite['draft_revision_id'], (int) $seite['version']);
|
||||
$erstellt[$slug] = $id;
|
||||
echo 'Seite angelegt: /'.$db->fetchOne('SELECT path FROM page WHERE id = ?', [$id])."\n";
|
||||
|
||||
return $id;
|
||||
};
|
||||
|
||||
$anlegen('home', null, $startseite, 'Elektriker Baden-Baden | Elektro Bernhard GmbH', $medien['team']['id']);
|
||||
|
||||
// Die Leistungsübersicht: Pfade wie /leistungen/smart-home brauchen im CMS eine Elternseite.
|
||||
$leistungenId = $anlegen('leistungen', null, [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Leistungen',
|
||||
'description' => 'Elektroinstallation, Smart Home, 24h-Notdienst sowie Beratung und Planung von Elektro Bernhard in Baden-Baden.',
|
||||
'blocks' => [
|
||||
$seitenkopf('leistungen-seite', 'Unsere Leistungen', 'Elektrotechnik aus einer Hand', 'Wir übernehmen Beratung, Planung und Installation. Auch nach Abschluss der Arbeiten erreichen Sie uns bei Fragen oder Störungen.'),
|
||||
$section('leistungen-seite-raster-abschnitt', [
|
||||
$fx($heading('leistungen-seite-h2', 'Vier Leistungen, ein Ansprechpartner', 2, ['desktop' => [...$h2Stil['desktop'], 'margin' => ['bottom' => '36px']], 'mobile' => $h2Stil['mobile']]), 'rise'),
|
||||
$row('leistungen-seite-raster', array_map(
|
||||
static fn (array $l, int $i): array => [...$karte('leistungen-seite-'.$l[0], $l[1], $l[2], $l[3], '/leistungen/'.$l[0]), 'layout' => ['effects' => ['shadow' => 'soft', 'hover' => 'lift', 'entrance' => 'rise', 'delay' => ['none', 'short', 'medium', 'long'][$i]]]],
|
||||
$leistungen, array_keys($leistungen),
|
||||
), ['desktop' => ['columns' => 'two', 'gap' => 'medium'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
|
||||
]),
|
||||
$section('leistungen-seite-staerken', [
|
||||
$fx($eyebrow('staerken-label', 'Wer wir sind'), 'fade'),
|
||||
$fx($heading('staerken-titel', 'Warum Elektro Bernhard', 2, $h2Stil), 'rise'),
|
||||
$fx($text('staerken-intro', 'Seit über 35 Jahren Elektroinstallation und Kundenservice – seit der Modernisierung 2017 mit dem Schwerpunkt auf moderner Gebäudetechnik.', ['desktop' => [...$fliess['desktop'], 'maxWidth' => '620px', 'margin' => ['bottom' => '30px']]]), 'rise', 'short'),
|
||||
$row('staerken-alle', array_map(static fn (array $s): array => $fx($punkt('staerke-seite-'.$s[0], $s[1], $s[2], $s[3]), 'rise', 'short'), $staerken),
|
||||
['desktop' => ['columns' => 'three', 'gap' => 'large'], 'tablet' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
|
||||
$cta('leistungen-seite-cta'),
|
||||
], ['desktop' => ['backgroundColor' => '@weich']]),
|
||||
],
|
||||
], 'Leistungen | Elektro Bernhard GmbH', $medien['schaltschrank']['id']);
|
||||
|
||||
foreach ($leistungen as [$slug, $icon, $name, $kurz]) {
|
||||
[$titel, $h1, $intro, $absaetze] = $leistungstexte[$slug];
|
||||
$knopf = 'notdienst' === $slug
|
||||
? $kontaktBlock($slug.'-notdienst-kontakt', ['phone' => $notdienst], ['desktop' => ['fontSize' => '30px', 'fontWeight' => '900', 'color' => '@papier', 'margin' => ['top' => '24px']]])
|
||||
: $button($slug.'-anfrage', 'Projekt anfragen', '/kontakt', ['desktop' => ['margin' => ['top' => '20px']]]);
|
||||
$anlegen($slug, $leistungenId, [
|
||||
'schemaVersion' => $SCHEMA, 'title' => $name, 'description' => $intro,
|
||||
'blocks' => [
|
||||
$seitenkopf($slug, $name, $h1, $intro, [$knopf]),
|
||||
$textkoerper($slug, array_merge($absaetze, [
|
||||
['Ihr Elektriker vor Ort', 'Elektro Bernhard GmbH · Ooser Hauptstr. 51 · 76532 Baden-Baden. Für Baden-Baden, Sinzheim, Hügelsheim, Iffezheim, Bühl, Rastatt, Kuppenheim, Muggensturm, Gaggenau, Gernsbach und das Murgtal, Ettlingen und Karlsruhe sowie Achern, Oberkirch und Offenburg.'],
|
||||
]), [], [
|
||||
$text($slug.'-zurueck', '<a href="/leistungen">Alle Leistungen ansehen →</a>', ['desktop' => [...$linkStil['desktop'], 'margin' => ['top' => '30px']]]),
|
||||
$cta($slug.'-cta'),
|
||||
]),
|
||||
],
|
||||
], $titel, $medien['schaltschrank']['id']);
|
||||
}
|
||||
|
||||
$anlegen('kontakt', null, [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Kontakt & Anfahrt',
|
||||
'description' => 'Elektro Bernhard: Ooser Hauptstr. 51, Baden-Baden. Telefon '.$buero.'. Projekt anfragen oder 24h-Notdienst unter '.$notdienst.' erreichen.',
|
||||
'blocks' => [
|
||||
$seitenkopf('kontakt-seite', 'Kontakt & Anfahrt', 'Kontakt zu Elektro Bernhard', 'Schreiben Sie uns eine Nachricht oder rufen Sie direkt an – wir melden uns innerhalb von 24 Stunden.'),
|
||||
$kontaktAbschnitt('seite'),
|
||||
],
|
||||
], 'Kontakt & Anfahrt | Elektro Bernhard Baden-Baden', $medien['team']['id']);
|
||||
|
||||
$anlegen('regenerative-energie', null, [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Solarenergie',
|
||||
'description' => 'Solaranlagen für Wohnhäuser und Geschäftsgebäude: Planung, Installation und individuelles Angebot der Elektro Bernhard Regenerative Energie GmbH.',
|
||||
'blocks' => [
|
||||
$seitenkopf('solar', 'Elektro Bernhard Regenerative Energie GmbH', 'Solaranlagen planen und installieren', 'Solarplanung und Installation für Ihr Zuhause oder Geschäftsgebäude.', [$button('solar-knopf', 'Solaranlage anfragen', '/kontakt', ['desktop' => ['margin' => ['top' => '20px']]])]),
|
||||
$textkoerper('solar', [
|
||||
['Für Wohnhäuser und Geschäftsgebäude', 'Jedes Gebäude bringt andere Voraussetzungen mit. Die Elektro Bernhard Regenerative Energie GmbH plant und installiert Solaranlagen und erstellt ein maßgeschneidertes Angebot für Ihr Vorhaben.'],
|
||||
['Planung und Installation', 'Beschreiben Sie uns Ihr Gebäude und Ihre Vorstellungen. Auf dieser Grundlage besprechen wir die nächsten Schritte für Ihre Solarplanung.'],
|
||||
['Ihr Ansprechpartner', "<strong>Elektro Bernhard Regenerative Energie GmbH</strong><br>Ooser Hauptstr. 51 · 76532 Baden-Baden<br>Geschäftsführer: Ridvan Kantarci · HRB 741275"],
|
||||
['', 'Die Gesellschaft ist rechtlich eigenständig und unabhängig von der Elektro Bernhard GmbH.'],
|
||||
], [], [
|
||||
$text('solar-kontaktlink', '<a href="/kontakt">Kontakt zur Solarplanung aufnehmen →</a>', ['desktop' => [...$linkStil['desktop'], 'margin' => ['top' => '30px']]]),
|
||||
$cta('solar-cta'),
|
||||
]),
|
||||
],
|
||||
], 'Solarplanung & Installation | Elektro Bernhard Regenerative Energie', $medien['team']['id']);
|
||||
|
||||
$anlegen('impressum', null, [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Impressum',
|
||||
'description' => 'Anbieterangaben und Kontaktinformationen der Elektro Bernhard GmbH und der Elektro Bernhard Regenerative Energie GmbH.',
|
||||
'blocks' => [
|
||||
$seitenkopf('impressum', 'Rechtliche Informationen', 'Impressum'),
|
||||
$textkoerper('impressum', [
|
||||
['Elektro Bernhard GmbH', "Ooser Hauptstr. 51<br>76532 Baden-Baden<br><br>Vertreten durch den Geschäftsführer Ridvan Kantarci.<br><br>Telefon: <a href=\"tel:+4972213944909\">+49 7221 3944909</a><br>E-Mail: <a href=\"mailto:$mail\">$mail</a><br><br>Handelsregister: HRB 731961<br>Umsatzsteuer-Identifikationsnummer: DE 815 618 082"],
|
||||
['Elektro Bernhard Regenerative Energie GmbH', "Eigenständige Gesellschaft, unabhängig von der Elektro Bernhard GmbH.<br>Ooser Hauptstr. 51<br>76532 Baden-Baden<br>Vertreten durch Ridvan Kantarci.<br>Handelsregister: HRB 741275"],
|
||||
['Gestaltung und Umsetzung', '<a href="https://www.kant-it.de/">Kant-IT Solutions</a>'],
|
||||
['Bildnachweise', 'Logo, Teamfoto und Elektroinstallationsmotiv aus dem bestehenden Webauftritt von Elektro Bernhard. Markenbezeichnungen gehören ihren jeweiligen Inhabern.'],
|
||||
]),
|
||||
],
|
||||
], 'Impressum | Elektro Bernhard GmbH');
|
||||
|
||||
$anlegen('datenschutzerklaerung', null, [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Datenschutzhinweise',
|
||||
'description' => 'Informationen zur Verarbeitung personenbezogener Daten bei Elektro Bernhard: Websitebesuch, Kontaktaufnahme und Ihre Rechte.',
|
||||
'blocks' => [
|
||||
$seitenkopf('datenschutz', 'Ihre Daten', 'Datenschutzhinweise', 'Hier erfahren Sie, wie wir Daten beim Besuch unserer Website und bei Ihrer Kontaktaufnahme verarbeiten.'),
|
||||
$textkoerper('datenschutz', [
|
||||
['1. Verantwortlicher', "Elektro Bernhard GmbH, Ooser Hauptstr. 51, 76532 Baden-Baden. Geschäftsführer: Ridvan Kantarci. Telefon: +49 7221 3944909. E-Mail: <a href=\"mailto:$mail\">$mail</a>."],
|
||||
['2. Besuch der Website', 'Beim Aufruf verarbeitet der Hostingdienst technisch erforderliche Verbindungsdaten, insbesondere IP-Adresse, Zeitpunkt, angeforderte Adresse, Browserinformationen und HTTP-Status. Das dient der sicheren Bereitstellung und Fehleranalyse. Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO. Umfang und Dauer der Serverprotokollierung richten sich nach der eingesetzten Hostingkonfiguration.'],
|
||||
['3. Lokale Inhalte und Cookies', 'Die Website selbst setzt keine Analyse- oder Werbecookies ein. Bilder, Schriften und Gestaltung werden vom eigenen Webserver geladen. Es werden keine Trackingdienste oder Karten beim Seitenaufruf eingebettet.'],
|
||||
['4. Kontaktanfragen', 'Wenn Sie uns kontaktieren, verarbeiten wir die von Ihnen angegebenen Kontakt- und Inhaltsdaten zur Bearbeitung Ihrer Anfrage. Rechtsgrundlage ist bei vertragsbezogenen Anfragen Art. 6 Abs. 1 lit. b DSGVO, ansonsten unser berechtigtes Interesse an der Bearbeitung von Anfragen gemäß Art. 6 Abs. 1 lit. f DSGVO.<br><br>Das Kontaktformular dieser Website überträgt Ihre Angaben an unseren Server und versendet sie als E-Mail an uns. NOCH ZU PRÜFEN: Hostinganbieter, Verarbeitungsländer, Auftragsverarbeitung und konkrete Aufbewahrungsdauer ergänzen.<br><br>Wir löschen Anfragedaten, wenn sie für die Bearbeitung nicht mehr erforderlich sind und keine gesetzlichen Aufbewahrungspflichten oder berechtigten Gründe für eine weitere Speicherung bestehen.'],
|
||||
['5. Externe Links', 'Google Maps, Google-Bewertungen und unsere Profile in sozialen Netzwerken sind als Links eingebunden. Erst beim Öffnen eines solchen Links wird die jeweilige externe Website aufgerufen. Dort gelten die Datenschutzinformationen des betreffenden Anbieters.'],
|
||||
['6. Ihre Rechte', "Unter den gesetzlichen Voraussetzungen haben Sie Rechte auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung und Datenübertragbarkeit. Sie können einer Verarbeitung auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO widersprechen. Eine erteilte Einwilligung können Sie mit Wirkung für die Zukunft widerrufen.<br><br>Außerdem können Sie sich bei einer Datenschutzaufsichtsbehörde beschweren, beispielsweise beim Landesbeauftragten für den Datenschutz und die Informationsfreiheit Baden-Württemberg.<br><br>Für Fragen wenden Sie sich bitte an <a href=\"mailto:$mail\">$mail</a>."],
|
||||
]),
|
||||
],
|
||||
], 'Datenschutz | Elektro Bernhard GmbH');
|
||||
|
||||
$fehlerId = $anlegen('404', null, [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Seite nicht gefunden',
|
||||
'description' => 'Die gesuchte Seite existiert nicht oder wurde verschoben. Über die Startseite finden Sie zurück.',
|
||||
'blocks' => [
|
||||
$seitenkopf('fehler', 'Fehler 404', 'Seite nicht gefunden', 'Die gesuchte Seite existiert nicht oder wurde verschoben.', [$button('fehler-knopf', 'Zur Startseite', '/', ['desktop' => ['margin' => ['top' => '20px']]])]),
|
||||
],
|
||||
]);
|
||||
$db->executeStatement('UPDATE page SET robots = ? WHERE id = ?', ['noindex', $fehlerId]);
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Menüs, Einstellungen, Weiterleitungen, Konto
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$seite = static fn (string $label, string $slug, string $anchor = ''): array => ['label' => $label, 'type' => 'page', 'pageId' => $erstellt[$slug], 'anchor' => $anchor, 'children' => []];
|
||||
|
||||
$menus->save('header', 'Hauptnavigation', [
|
||||
$seite('Leistungen', 'leistungen'),
|
||||
$seite('Über uns', 'home', 'ueber-uns'),
|
||||
$seite('Solarenergie', 'regenerative-energie'),
|
||||
$seite('Kontakt', 'kontakt'),
|
||||
], 0);
|
||||
$menus->save('secondary', 'Notdienst', [
|
||||
['label' => '24h Notdienst '.$notdienst, 'type' => 'url', 'url' => 'tel:+4915125245851', 'icon' => 'phone', 'iconPosition' => 'before', 'children' => []],
|
||||
], 0);
|
||||
$menus->save('footer', 'Fußzeile', [
|
||||
$seite('Unsere Leistungen', 'leistungen'),
|
||||
$seite('Das Unternehmen', 'home', 'ueber-uns'),
|
||||
$seite('Regenerative Energie', 'regenerative-energie'),
|
||||
$seite('Kontakt & Anfahrt', 'kontakt'),
|
||||
], 0);
|
||||
$menus->save('legal', 'Rechtliches', [$seite('Impressum', 'impressum'), $seite('Datenschutz', 'datenschutzerklaerung')], 0);
|
||||
echo "Menüs angelegt\n";
|
||||
|
||||
$settings->assignNotFoundPage($fehlerId, '');
|
||||
$settings->save([
|
||||
'legalName' => 'Elektro Bernhard GmbH',
|
||||
'description' => 'Elektrofachbetrieb in Baden-Baden, seit über 35 Jahren. Elektroinstallation für Neu- und Altbau, Smart Home, Beratung und Planung sowie ein 24h-Notdienst unter 0151 25245851. Bürozeiten Mo–Fr 7:30–17:00 Uhr.',
|
||||
'phone' => $buero, 'email' => $mail,
|
||||
'street' => 'Ooser Hauptstr. 51', 'postalCode' => '76532', 'city' => 'Baden-Baden', 'country' => 'DE',
|
||||
// Die Profile, die der bestehende Auftritt selbst verlinkt - einmal hier, gezeigt vom Baustein
|
||||
// „Soziale Profile“ in Kopfleiste und Fuß, geführt als sameAs in den strukturierten Daten.
|
||||
'social' => [
|
||||
'facebook' => 'https://www.facebook.com/elektrobernhardgmbh',
|
||||
'instagram' => 'https://www.instagram.com/elektrobernhardgmbh/',
|
||||
'google' => 'https://g.page/ElektroBernhardbadenbaden',
|
||||
],
|
||||
'hours' => array_fill_keys(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], ['opens' => '07:30', 'closes' => '17:00']),
|
||||
'areaServed' => implode("\n", ['Baden-Baden', 'Sinzheim', 'Hügelsheim', 'Iffezheim', 'Bühl', 'Rastatt', 'Kuppenheim', 'Muggensturm', 'Gaggenau', 'Gernsbach', 'Murgtal', 'Ettlingen', 'Karlsruhe', 'Achern', 'Oberkirch', 'Offenburg']),
|
||||
'localBusiness' => true, 'llmsTxt' => true,
|
||||
// Der Kopfbereich schwebt über dem dunklen Seitenkopf und bleibt beim Scrollen oben.
|
||||
'stickyHeader' => true, 'headerOverlay' => true,
|
||||
'motion' => 'always',
|
||||
'homePath' => 'home', 'privacyPath' => 'datenschutzerklaerung', 'imprintPath' => 'impressum',
|
||||
'consentBanner' => false, 'scrollTop' => true, 'scrollTopColor' => '@rot', 'scrollTopInk' => '@papier', 'postMetaHeader' => true,
|
||||
]);
|
||||
echo "Einstellungen gespeichert\n";
|
||||
|
||||
foreach (['/datenschutz' => '/datenschutzerklaerung', '/service' => '/leistungen', '/ueber-uns' => '/home'] as $von => $nach) {
|
||||
$redirects->save($von, $nach, 301);
|
||||
}
|
||||
echo "Weiterleitungen angelegt\n";
|
||||
|
||||
$passwort = bin2hex(random_bytes(12));
|
||||
$db->insert('cms_user', ['id' => bin2hex(random_bytes(16)), 'username' => 'umut', 'password_hash' => password_hash($passwort, PASSWORD_BCRYPT), 'roles' => '["ROLE_ADMIN"]']);
|
||||
|
||||
echo "\nFertig.\nVerwaltung: Benutzer „umut“, Passwort: $passwort\n";
|
||||
@@ -0,0 +1,909 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Baut die Website „Tagespflege Jacqueline Moldovan“ als Inhalt dieses CMS auf.
|
||||
*
|
||||
* Vorlage ist das gelieferte Paket „Tagespflege_Moldovan_Website.zip“ (09.09.2026): ein Onepager
|
||||
* aus index.html, style.css und script.js. Wortlaut, Farben, Schriftgrößen, Abstände und die
|
||||
* Reihenfolge der Abschnitte sind daraus übernommen. Gebaut ist alles aus gewöhnlichen
|
||||
* Bausteinen – kein eigener Baustein, kein eigenes Skript, keine externe Schrift.
|
||||
*
|
||||
* Zwei Stellen weichen bewusst ab:
|
||||
* - Das Kontaktformular verschickt serverseitig, statt im Mailprogramm des Besuchers eine
|
||||
* vorbereitete E-Mail zu öffnen. Der Hinweistext darunter sagt das entsprechend.
|
||||
* - Das Markenzeichen liegt in der Vorlage als SVG vor; die Medienverwaltung nimmt JPEG, PNG und
|
||||
* WebP. Verwendet wird deshalb marke.png, die verlustfreie Umsetzung derselben Zeichnung.
|
||||
*
|
||||
* Das Skript schreibt ausschließlich in die Datenbank aus DATABASE_URL und in MEDIA_DIRECTORY,
|
||||
* beide müssen auf eine frische, migrierte Installation zeigen (siehe reset-tagespflege-moldovan.sh).
|
||||
* Erstes Argument: der Ordner mit gemeinsam.webp, jacqueline-moldovan.png und marke.png.
|
||||
*/
|
||||
|
||||
require dirname(__DIR__).'/config/bootstrap.php';
|
||||
|
||||
use App\Content\DocumentValidator;
|
||||
use App\Content\FormRepository;
|
||||
use App\Content\MediaLibrary;
|
||||
use App\Content\MenuRepository;
|
||||
use App\Content\PageRepository;
|
||||
use App\Content\PartialRepository;
|
||||
use App\Content\SiteSettings;
|
||||
use App\Content\Theme;
|
||||
use App\Infrastructure\ConnectionFactory;
|
||||
use Symfony\Component\HttpFoundation\File\UploadedFile;
|
||||
|
||||
$root = dirname(__DIR__);
|
||||
$assets = $argv[1] ?? null;
|
||||
if (null === $assets || !is_dir($assets)) {
|
||||
fwrite(STDERR, "Bitte den Ordner mit den Bildern als Argument angeben.\n");
|
||||
exit(1);
|
||||
}
|
||||
$url = str_replace('%kernel.project_dir%', str_replace('\\', '/', $root), (string) $_SERVER['DATABASE_URL']);
|
||||
$mediaDirectory = str_replace('%kernel.project_dir%', $root, (string) $_SERVER['MEDIA_DIRECTORY']);
|
||||
if (!str_contains($url, 'tagespflege-moldovan')) {
|
||||
fwrite(STDERR, "Sicherung: DATABASE_URL muss auf die Moldovan-Datenbank zeigen.\n");
|
||||
exit(1);
|
||||
}
|
||||
|
||||
$db = ConnectionFactory::create($url);
|
||||
if (false !== $db->fetchOne('SELECT id FROM page LIMIT 1')) {
|
||||
fwrite(STDERR, "Diese Datenbank enthält bereits Seiten. Abbruch, damit nichts überschrieben wird.\n");
|
||||
exit(1);
|
||||
}
|
||||
|
||||
$media = new MediaLibrary($db, $mediaDirectory);
|
||||
$settings = new SiteSettings($db, $media);
|
||||
$pages = new PageRepository($db, new DocumentValidator(), $settings);
|
||||
$partials = new PartialRepository($db, new DocumentValidator());
|
||||
$menus = new MenuRepository($db, $settings);
|
||||
$forms = new FormRepository($db);
|
||||
$theme = new Theme($db);
|
||||
|
||||
$mail = 'info@tagespflege-moldovan.com';
|
||||
$telefon = '07221 / 922 7961';
|
||||
$telHref = 'tel:+4972219227961';
|
||||
$SCHEMA = 23;
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Bausteine
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$ecken = static fn (string $r): array => ['topLeft' => $r, 'topRight' => $r, 'bottomRight' => $r, 'bottomLeft' => $r];
|
||||
$seiten = static fn (string $w): array => ['top' => $w, 'right' => $w, 'bottom' => $w, 'left' => $w];
|
||||
$nurOben = static fn (string $w): array => ['top' => $w, 'right' => '0px', 'bottom' => '0px', 'left' => '0px'];
|
||||
$nurUnten = static fn (string $w): array => ['top' => '0px', 'right' => '0px', 'bottom' => $w, 'left' => '0px'];
|
||||
$nurLinks = static fn (string $w): array => ['top' => '0px', 'right' => '0px', 'bottom' => '0px', 'left' => $w];
|
||||
|
||||
$section = static function (string $id, array $children, array $style = [], ?string $anchor = null): array {
|
||||
$block = ['id' => $id, 'type' => 'section', 'children' => $children, 'style' => $style];
|
||||
if (null !== $anchor) {
|
||||
$block['anchor'] = $anchor;
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
/** Der Rhythmus der Vorlage: 100 px am Schreibtisch, 75 auf dem Tablet, 61 auf dem Telefon. */
|
||||
$abschnitt = static function (string $id, array $children, array $style = [], ?string $anchor = null) use ($section): array {
|
||||
$basis = [
|
||||
'desktop' => ['padding' => ['top' => '100px', 'bottom' => '100px']],
|
||||
'tablet' => ['padding' => ['top' => '75px', 'bottom' => '75px']],
|
||||
'mobile' => ['padding' => ['top' => '61px', 'bottom' => '61px']],
|
||||
];
|
||||
foreach ($style as $device => $values) {
|
||||
$basis[$device] = [...($basis[$device] ?? []), ...$values];
|
||||
}
|
||||
|
||||
return $section($id, $children, $basis, $anchor);
|
||||
};
|
||||
|
||||
$row = static function (string $id, array $children, array $design = [], array $style = []): array {
|
||||
$block = ['id' => $id, 'type' => 'row', 'children' => $children];
|
||||
if ([] !== $design) {
|
||||
$block['layout'] = ['design' => $design];
|
||||
}
|
||||
if ([] !== $style) {
|
||||
$block['style'] = $style;
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
/** Eine Zeile, die nebeneinander stellt statt zu rastern – Marke, Signatur, Wertepunkt, Zeitleiste. */
|
||||
$zeile = static function (string $id, array $children, string $gap, array $extra = [], array $mobil = [], array $tablet = []) use ($row): array {
|
||||
$style = ['desktop' => ['display' => 'flex', 'alignItems' => 'center', 'gap' => $gap, 'margin' => ['top' => '0px'], ...$extra]];
|
||||
if ([] !== $tablet) {
|
||||
$style['tablet'] = $tablet;
|
||||
}
|
||||
if ([] !== $mobil) {
|
||||
$style['mobile'] = $mobil;
|
||||
}
|
||||
|
||||
return $row($id, $children, [], $style);
|
||||
};
|
||||
|
||||
$column = static function (string $id, array $children, array $style = [], string $sichtbarkeit = 'all'): array {
|
||||
$block = ['id' => $id, 'type' => 'column', 'children' => $children];
|
||||
if ([] !== $style) {
|
||||
$block['style'] = $style;
|
||||
}
|
||||
if ('all' !== $sichtbarkeit) {
|
||||
$block['layout'] = ['visibility' => $sichtbarkeit];
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
$heading = static function (string $id, string $text, int $level, array $style = [], string $css = ''): array {
|
||||
$block = ['id' => $id, 'type' => 'heading', 'props' => ['text' => $text, 'level' => $level]];
|
||||
if ([] !== $style) {
|
||||
$block['style'] = $style;
|
||||
}
|
||||
if ('' !== $css) {
|
||||
$block['css'] = $css;
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
$text = static function (string $id, string $inhalt, array $style = [], string $css = ''): array {
|
||||
$block = ['id' => $id, 'type' => 'text', 'props' => ['text' => $inhalt]];
|
||||
if ([] !== $style) {
|
||||
$block['style'] = $style;
|
||||
}
|
||||
if ('' !== $css) {
|
||||
$block['css'] = $css;
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
/** Eine reine Fläche: der Strich vor einer Kleinzeile, die Linie der Zeitleiste, die grüne Form. */
|
||||
$flaeche = static function (string $id, array $style, string $css = ''): array {
|
||||
$block = ['id' => $id, 'type' => 'spacer', 'props' => ['size' => 'small'], 'style' => $style];
|
||||
if ('' !== $css) {
|
||||
$block['css'] = $css;
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
$button = static function (string $id, string $text, string $href, array $style = []): array {
|
||||
return ['id' => $id, 'type' => 'button', 'props' => ['text' => $text, 'href' => $href], 'style' => $style];
|
||||
};
|
||||
|
||||
$bild = static function (string $id, array $eintrag, string $alt, array $style = [], ?string $href = null, string $css = ''): array {
|
||||
$gross = end($eintrag['variants']);
|
||||
$props = [
|
||||
'src' => $gross['src'], 'alt' => $alt, 'decorative' => '' === $alt, 'width' => $gross['width'], 'height' => $gross['height'],
|
||||
'mediaId' => $eintrag['id'],
|
||||
'sources' => array_map(static fn (array $v): array => ['src' => $v['src'], 'width' => $v['width']], $eintrag['variants']),
|
||||
];
|
||||
if (null !== $href) {
|
||||
$props['href'] = $href;
|
||||
$props['click'] = 'link';
|
||||
}
|
||||
|
||||
$block = ['id' => $id, 'type' => 'image', 'props' => $props, 'style' => $style];
|
||||
if ('' !== $css) {
|
||||
$block['css'] = $css;
|
||||
}
|
||||
|
||||
return $block;
|
||||
};
|
||||
|
||||
$symbol = static function (string $id, string $name, int $groesse, array $style = []): array {
|
||||
return ['id' => $id, 'type' => 'icon', 'props' => ['icon' => $name, 'size' => $groesse, 'decorative' => true, 'label' => ''], 'style' => $style];
|
||||
};
|
||||
|
||||
/**
|
||||
* Setzt die Einblendungen nach einer Liste, statt sie über das ganze Dokument zu streuen.
|
||||
*
|
||||
* Ein Block mit Einblendung wartet unsichtbar, bis er ins Bild scrollt; was beim Laden schon
|
||||
* sichtbar ist, spielt sofort. Ohne JavaScript steht alles einfach da – die Seite bleibt
|
||||
* vollständig, nur ohne Bewegung.
|
||||
*
|
||||
* @param array<string, array{0: string, 1?: string}> $plan Block-ID => [Art, Verzögerung]
|
||||
*/
|
||||
$einblenden = static function (array $dokument, array $plan): array {
|
||||
$gehen = function (array $bloecke) use (&$gehen, $plan): array {
|
||||
foreach ($bloecke as $i => $block) {
|
||||
if (isset($plan[$block['id'] ?? ''])) {
|
||||
[$art, $verzug] = [...$plan[$block['id']], 'none'];
|
||||
$bloecke[$i]['layout'] = [...($block['layout'] ?? []), 'effects' => ['entrance' => $art, 'delay' => $verzug]];
|
||||
}
|
||||
if (isset($block['children'])) {
|
||||
$bloecke[$i]['children'] = $gehen($block['children']);
|
||||
}
|
||||
}
|
||||
|
||||
return $bloecke;
|
||||
};
|
||||
$dokument['blocks'] = $gehen($dokument['blocks']);
|
||||
|
||||
return $dokument;
|
||||
};
|
||||
|
||||
// Wiederkehrende Gestaltungswerte der Vorlage.
|
||||
$serif = ['fontFamily' => 'heading', 'fontWeight' => '400', 'letterSpacing' => '-0.045em', 'lineHeight' => 1.1];
|
||||
$h2Stil = ['desktop' => [...$serif, 'fontSize' => '53px', 'margin' => ['bottom' => '0px']], 'tablet' => ['fontSize' => '42px'], 'mobile' => ['fontSize' => '38px']];
|
||||
$emGruen = '& em{color:#718f3d;font-weight:400}';
|
||||
$fliess = ['desktop' => ['color' => '@gedaempft', 'fontSize' => '16px', 'lineHeight' => 1.65, 'margin' => ['bottom' => '20px']]];
|
||||
$klein = ['desktop' => ['fontSize' => '11px', 'fontWeight' => '700', 'letterSpacing' => '0.13em', 'color' => '#6a795e', 'lineHeight' => 1.5, 'margin' => ['bottom' => '0px']]];
|
||||
$h3Stil = ['desktop' => ['fontFamily' => 'body', 'fontSize' => '19px', 'fontWeight' => '500', 'letterSpacing' => '-0.025em', 'lineHeight' => 1.35, 'margin' => ['bottom' => '13px']]];
|
||||
|
||||
/** Die Kleinzeile über einer Überschrift: ein kurzer Strich, dann Versalien. */
|
||||
$kleinzeile = static function (string $id, string $inhalt, string $farbe = '#527236', string $strich = '@gruen', string $abstand = '25px') use ($zeile, $flaeche, $text): array {
|
||||
return $zeile($id, [
|
||||
$flaeche($id.'-strich', ['desktop' => ['width' => '24px', 'height' => '3px', 'backgroundColor' => $strich, 'flexShrink' => 0]]),
|
||||
$text($id.'-text', $inhalt, [
|
||||
'desktop' => ['fontSize' => '12px', 'fontWeight' => '700', 'letterSpacing' => '0.16em', 'textTransform' => 'uppercase', 'lineHeight' => 1.7, 'color' => $farbe, 'margin' => ['bottom' => '0px']],
|
||||
'mobile' => ['fontSize' => '11px'],
|
||||
]),
|
||||
], '11px', ['margin' => ['top' => '0px', 'bottom' => $abstand]], ['margin' => ['top' => '0px', 'bottom' => '18px']]);
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Website, Gestaltung, Medien, Formular
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$db->insert('website', ['id' => 'default', 'name' => 'Tagespflege Jacqueline Moldovan', 'default_locale' => 'de', 'theme' => '{}']);
|
||||
|
||||
$theme->save(
|
||||
[
|
||||
['key' => 'tinte', 'name' => 'Tinte', 'value' => '#294655'],
|
||||
['key' => 'blau', 'name' => 'Blau', 'value' => '#2e7595'],
|
||||
['key' => 'blau-dunkel', 'name' => 'Blau dunkel', 'value' => '#245e79'],
|
||||
['key' => 'dunkelblau', 'name' => 'Kontaktbereich', 'value' => '#284f63'],
|
||||
['key' => 'gruen', 'name' => 'Grün', 'value' => '#9abf56'],
|
||||
['key' => 'limette', 'name' => 'Limette', 'value' => '#c0d348'],
|
||||
['key' => 'oliv', 'name' => 'Oliv', 'value' => '#718f3d'],
|
||||
['key' => 'marke', 'name' => 'Markengrün', 'value' => '#83a944'],
|
||||
['key' => 'gedaempft', 'name' => 'Gedämpft', 'value' => '#647078'],
|
||||
['key' => 'blass', 'name' => 'Blass', 'value' => '#f3f6ef'],
|
||||
['key' => 'leiste', 'name' => 'Kopfleiste', 'value' => '#f1f4ee'],
|
||||
['key' => 'sand', 'name' => 'Werteband', 'value' => '#fafbf8'],
|
||||
['key' => 'linie', 'name' => 'Trennlinie', 'value' => '#dce3dd'],
|
||||
['key' => 'papier', 'name' => 'Papier', 'value' => '#ffffff'],
|
||||
],
|
||||
[
|
||||
// Beide Schriften stehen auf jedem Gerät bereit; die Vorlage lädt bewusst keine Webschrift.
|
||||
['key' => 'body', 'name' => 'Fließtext', 'family' => 'Arial', 'source' => 'system', 'weights' => [400, 600, 700], 'fallback' => 'sans-serif'],
|
||||
['key' => 'heading', 'name' => 'Überschriften', 'family' => 'Georgia', 'source' => 'system', 'weights' => [400], 'fallback' => 'serif'],
|
||||
],
|
||||
['fontFamily' => 'body', 'headingFontFamily' => 'heading', 'fontSize' => '16px', 'lineHeight' => 1.65, 'color' => '@tinte', 'backgroundColor' => '@papier', 'linkColor' => '@tinte', 'containerWidth' => '1240px', 'headingScale' => 1.25, 'linkUnderline' => false],
|
||||
['shape' => 'square', 'appearance' => 'solid', 'size' => 'normal', 'fontFamily' => 'inherit', 'fontSize' => 15, 'fontWeight' => 600, 'letterSpacing' => 0, 'textTransform' => 'none', 'backgroundColor' => '@blau', 'color' => '@papier', 'hoverBackgroundColor' => '@blau-dunkel', 'hoverColor' => '@papier'],
|
||||
);
|
||||
echo "Farben, Schriften und Buttons gesetzt\n";
|
||||
|
||||
$medien = [];
|
||||
foreach ([
|
||||
'marke' => ['marke.png', 'Markenzeichen der Tagespflege Jacqueline Moldovan: ein Schmetterling in Grün und Blau'],
|
||||
'gemeinsam' => ['gemeinsam.webp', 'Illustrative Szene: Eine Seniorin und eine Begleiterin lachen gemeinsam an einem Tisch.'],
|
||||
'portraet' => ['jacqueline-moldovan.png', 'Jacqueline Moldovan'],
|
||||
] as $schluessel => [$datei, $alt]) {
|
||||
$pfad = rtrim($assets, '/\\').'/'.$datei;
|
||||
if (!is_file($pfad)) {
|
||||
fwrite(STDERR, "Bild fehlt: $pfad\n");
|
||||
exit(1);
|
||||
}
|
||||
$eintrag = $media->upload(new UploadedFile($pfad, $datei, null, null, true));
|
||||
$media->update($eintrag['id'], ['title' => pathinfo($datei, PATHINFO_FILENAME), 'alt' => $alt, 'archived' => false, 'version' => $eintrag['version']]);
|
||||
$medien[$schluessel] = $media->find($eintrag['id']);
|
||||
echo "Bild übernommen: $datei\n";
|
||||
}
|
||||
|
||||
$forms->save('kontakt', 'Kontaktanfrage', [
|
||||
['name' => 'name', 'type' => 'text', 'label' => 'Ihr Name', 'required' => true],
|
||||
['name' => 'email', 'type' => 'email', 'label' => 'E-Mail-Adresse', 'required' => true],
|
||||
['name' => 'telefon', 'type' => 'phone', 'label' => 'Telefon', 'required' => false, 'help' => 'Für einen persönlichen Rückruf'],
|
||||
['name' => 'nachricht', 'type' => 'textarea', 'label' => 'Ihre Nachricht', 'required' => true, 'help' => 'Erzählen Sie uns, was Ihnen wichtig ist. Bitte keine Angaben zu Gesundheit oder Pflegegrad – das besprechen wir lieber persönlich.'],
|
||||
['name' => 'datenschutz', 'type' => 'consent', 'label' => 'Ich habe die Datenschutzhinweise gelesen. Meine Angaben werden verwendet, um meine Anfrage zu beantworten.'],
|
||||
], ['recipient' => $mail, 'subject' => 'Neue Nachricht über tagespflege-moldovan.com', 'success' => 'Vielen Dank. Ihre Nachricht ist angekommen – wir melden uns bei Ihnen.', 'replyToField' => 'email'], 0);
|
||||
echo "Formular angelegt: kontakt\n";
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Kopfbereich: schmale Leiste, darunter der weiße Kopf, der beim Scrollen oben bleibt
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
/** Die Wortmarke: Schmetterling, darüber „Tagespflege“, darunter der Name. */
|
||||
$wortmarke = static function (string $praefix, string $bildhoehe, string $bildbreite, string $gross, string $klein) use ($zeile, $column, $bild, $text, $medien, $seiten): array {
|
||||
return $zeile($praefix.'-zeile', [
|
||||
$column($praefix.'-bild', [
|
||||
$bild($praefix.'-logo', $medien['marke'], 'Tagespflege Jacqueline Moldovan', [
|
||||
'desktop' => ['maxWidth' => $bildbreite, 'imageHeight' => $bildhoehe, 'objectFit' => 'contain', 'margin' => $seiten('0px')],
|
||||
], '/'),
|
||||
], ['desktop' => ['flexShrink' => 0]]),
|
||||
$column($praefix.'-schrift', [
|
||||
$text($praefix.'-name', 'Tagespflege', ['desktop' => ['fontSize' => $gross, 'fontWeight' => '700', 'letterSpacing' => '-0.04em', 'lineHeight' => 1.3, 'color' => '@marke', 'margin' => ['bottom' => '0px']]]),
|
||||
$text($praefix.'-zusatz', 'Jacqueline Moldovan', ['desktop' => ['fontSize' => $klein, 'color' => '#62676b', 'lineHeight' => 1.3, 'margin' => ['top' => '3px', 'bottom' => '0px']]]),
|
||||
]),
|
||||
], '11px', ['flexShrink' => 0]);
|
||||
};
|
||||
|
||||
$kopf = [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Kopfbereich', 'description' => 'Erscheint auf jeder Seite über dem Inhalt.',
|
||||
'blocks' => [
|
||||
$section('kopf-leiste', [
|
||||
$row('kopf-leiste-zeile', [
|
||||
$column('kopf-leiste-ort', [
|
||||
$text('kopf-leiste-ort-text', 'Mitten in Baden-Baden. Mitten im Leben.', ['desktop' => ['fontSize' => '14px', 'lineHeight' => 1.5, 'margin' => ['bottom' => '0px']]]),
|
||||
], [], 'hide-mobile'),
|
||||
$column('kopf-leiste-kontakt', [
|
||||
$text('kopf-leiste-telefon', '<a href="'.$telHref.'">Ihr direkter Kontakt: '.$telefon.'</a>', [
|
||||
'desktop' => ['fontSize' => '14px', 'lineHeight' => 1.5, 'textAlign' => 'right', 'margin' => ['bottom' => '0px']],
|
||||
'mobile' => ['fontSize' => '12px', 'textAlign' => 'center'],
|
||||
], '& a:hover{text-decoration:underline}'),
|
||||
]),
|
||||
], ['desktop' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], ['desktop' => ['alignItems' => 'center', 'margin' => ['top' => '0px']]]),
|
||||
], [
|
||||
'desktop' => ['backgroundColor' => '@leiste', 'color' => '#506054', 'padding' => ['top' => '8px', 'bottom' => '8px']],
|
||||
]),
|
||||
$section('kopf-haupt', [
|
||||
$row('kopf-haupt-zeile', [
|
||||
$column('kopf-marke', [$wortmarke('kopf-marke', '60px', '40px', '24px', '15px')], ['desktop' => ['flexShrink' => 0]]),
|
||||
$column('kopf-navigation', [
|
||||
['id' => 'kopf-menue', 'type' => 'menu', 'props' => ['slot' => 'header', 'layout' => 'horizontal', 'collapse' => 'mobile', 'burgerLabel' => 'both'],
|
||||
'style' => ['desktop' => [
|
||||
'fontSize' => '15px', 'justifyContent' => 'flex-end', 'display' => 'flex',
|
||||
// Der Menü-Knopf im Zuschnitt der Vorlage: heller Rahmen, kaum gerundet.
|
||||
'burgerColor' => '@tinte', 'burgerBorderColor' => '#d8e0d1', 'burgerBorderRadius' => '3px', 'burgerFontSize' => '14px',
|
||||
]],
|
||||
'css' => "& .menu-list{gap:4px 29px;justify-content:flex-end}\n& .menu-list a{transition:color .2s}\n& .menu-list a:hover{color:#688f30;text-decoration:none}\n& .menu-list>li:last-child>a{border:1px solid #cfd9ce;border-radius:4px;padding:12px 19px}",
|
||||
],
|
||||
], ['desktop' => ['display' => 'flex', 'justifyContent' => 'flex-end', 'alignItems' => 'center']]),
|
||||
], [], [
|
||||
'desktop' => ['display' => 'flex', 'alignItems' => 'center', 'justifyContent' => 'space-between', 'gap' => '25px', 'minHeight' => '100px', 'margin' => ['top' => '0px']],
|
||||
'tablet' => ['minHeight' => '86px'],
|
||||
'mobile' => ['minHeight' => '80px'],
|
||||
]),
|
||||
], [
|
||||
'desktop' => ['backgroundColor' => '#fffffff7', 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#e7ece7', 'padding' => ['top' => '0px', 'bottom' => '0px']],
|
||||
]),
|
||||
],
|
||||
];
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Fußbereich
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$fuss = [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Fußbereich', 'description' => 'Erscheint auf jeder Seite unter dem Inhalt.',
|
||||
'blocks' => [
|
||||
$section('fuss', [
|
||||
$zeile('fuss-oben', [
|
||||
$column('fuss-marke', [$wortmarke('fuss-marke', '51px', '34px', '19px', '13px')], ['desktop' => ['flexShrink' => 0]]),
|
||||
$column('fuss-spruch', [
|
||||
$text('fuss-spruch-text', 'Mit Aufmerksamkeit. Mit Freude. Mit Herz.', [
|
||||
'desktop' => ['fontFamily' => 'heading', 'fontStyle' => 'italic', 'fontSize' => '17px', 'color' => '#737b78', 'textAlign' => 'center', 'margin' => ['bottom' => '0px']],
|
||||
'tablet' => ['maxWidth' => '210px'],
|
||||
'mobile' => ['fontSize' => '15px', 'textAlign' => 'left', 'maxWidth' => '100%'],
|
||||
]),
|
||||
], ['mobile' => ['order' => 3, 'flexBasis' => '100%']]),
|
||||
$column('fuss-nachoben', [
|
||||
$text('fuss-nachoben-text', '<a href="#start">Nach oben ↑</a>', [
|
||||
'desktop' => ['fontSize' => '13px', 'textAlign' => 'right', 'margin' => ['bottom' => '0px']],
|
||||
'mobile' => ['margin' => ['left' => 'auto']],
|
||||
], '& a:hover{text-decoration:underline}'),
|
||||
]),
|
||||
], '25px', ['justifyContent' => 'space-between', 'padding' => ['top' => '37px', 'bottom' => '37px']], ['flexWrap' => 'wrap', 'gap' => '22px', 'padding' => ['top' => '30px', 'bottom' => '30px']]),
|
||||
$zeile('fuss-unten', [
|
||||
$column('fuss-recht', [
|
||||
$text('fuss-copyright', '© 2026 Tagespflege Jacqueline Moldovan', ['desktop' => ['fontSize' => '12px', 'margin' => ['bottom' => '0px']], 'mobile' => ['fontSize' => '11px']]),
|
||||
]),
|
||||
$column('fuss-hinweis', [
|
||||
// Impressum und Datenschutz kommen aus den Einstellungen, nicht aus einem Menü.
|
||||
['id' => 'fuss-rechtliches', 'type' => 'legal', 'props' => ['label' => 'Rechtliches'],
|
||||
'style' => ['desktop' => ['fontSize' => '12px', 'justifyContent' => 'flex-end', 'gap' => '4px'], 'mobile' => ['justifyContent' => 'flex-start']],
|
||||
'css' => "& a:hover{text-decoration:underline}"],
|
||||
]),
|
||||
], '20px', ['justifyContent' => 'space-between', 'alignItems' => 'flex-start', 'borderWidth' => $nurOben('1px'), 'borderStyle' => 'solid', 'borderColor' => '#e7ebe4', 'padding' => ['top' => '18px', 'bottom' => '18px'], 'color' => '#78817b'], ['flexDirection' => 'column', 'gap' => '7px']),
|
||||
], [
|
||||
'desktop' => ['borderWidth' => $nurUnten('7px'), 'borderStyle' => 'solid', 'borderColor' => '@limette', 'padding' => ['top' => '0px', 'bottom' => '0px']],
|
||||
]),
|
||||
],
|
||||
];
|
||||
|
||||
$partials->create('header', 'default', 'Kopfbereich', $kopf);
|
||||
$partials->create('footer', 'default', 'Fußbereich', $fuss);
|
||||
echo "Kopf- und Fußbereich angelegt\n";
|
||||
|
||||
/**
|
||||
* Eine Rechtsseite: Kleinzeile, Titel, Vorspann, dann Absätze mit Zwischenüberschriften.
|
||||
*
|
||||
* Stellen, die nur die Tagespflege selbst beantworten kann, stehen als „NOCH ZU PRÜFEN“ im Text,
|
||||
* statt erfunden zu werden – eine falsche Registerangabe ist schlimmer als eine fehlende.
|
||||
*/
|
||||
$rechtsseite = static function (string $praefix, string $label, string $titel, string $vorspann, array $absaetze) use ($section, $abschnitt, $row, $column, $kleinzeile, $heading, $text, $serif, $emGruen, $nurOben, $nurUnten): array {
|
||||
// Oben ein ruhiges Band in der Farbe des Angebotsbereichs: Kleinzeile, Titel, Vorspann.
|
||||
// Die Sektion bleibt voll breit; die Breite begrenzt erst der Inhalt darin. So steht der
|
||||
// Text auf derselben Kante wie Marke und Menü im Kopf, statt am Fensterrand zu kleben.
|
||||
$kopf = $section($praefix.'-kopf', [
|
||||
[...$kleinzeile($praefix.'-label', $label), 'layout' => ['effects' => ['entrance' => 'fade', 'delay' => 'none']]],
|
||||
[...$heading($praefix.'-h1', $titel, 1, [
|
||||
'desktop' => [...$serif, 'fontSize' => '59px', 'margin' => ['bottom' => '22px']],
|
||||
'tablet' => ['fontSize' => '46px'],
|
||||
'mobile' => ['fontSize' => '40px', 'margin' => ['bottom' => '16px']],
|
||||
], $emGruen), 'layout' => ['effects' => ['entrance' => 'rise', 'delay' => 'short']]],
|
||||
[...$text($praefix.'-vorspann', $vorspann, [
|
||||
'desktop' => ['maxWidth' => '640px', 'fontSize' => '19px', 'lineHeight' => 1.7, 'color' => '@gedaempft', 'margin' => ['bottom' => '0px']],
|
||||
'mobile' => ['fontSize' => '17px'],
|
||||
]), 'layout' => ['effects' => ['entrance' => 'rise', 'delay' => 'medium']]],
|
||||
], [
|
||||
'desktop' => ['backgroundColor' => '@blass', 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '@linie', 'padding' => ['top' => '84px', 'bottom' => '72px']],
|
||||
'tablet' => ['padding' => ['top' => '64px', 'bottom' => '56px']],
|
||||
'mobile' => ['padding' => ['top' => '48px', 'bottom' => '40px']],
|
||||
]);
|
||||
|
||||
// Darunter jeder Punkt als eigene Zeile: Zwischentitel links, Text rechts, getrennt durch
|
||||
// eine feine Linie. Auf dem Telefon untereinander.
|
||||
$punkte = [];
|
||||
foreach ($absaetze as $i => [$zwischentitel, $inhalt]) {
|
||||
$punkte[] = $row($praefix.'-punkt-'.$i, [
|
||||
$column($praefix.'-punkt-'.$i.'-titel', '' === $zwischentitel ? [] : [
|
||||
$heading($praefix.'-h2-'.$i, $zwischentitel, 2, [
|
||||
'desktop' => ['fontFamily' => 'body', 'fontSize' => '17px', 'fontWeight' => '700', 'letterSpacing' => '-0.01em', 'lineHeight' => 1.5, 'color' => '@tinte', 'margin' => ['bottom' => '0px']],
|
||||
]),
|
||||
], [
|
||||
'desktop' => ['flexBasis' => '280px', 'flexShrink' => 0],
|
||||
'tablet' => ['flexBasis' => '220px'],
|
||||
'mobile' => ['flexBasis' => 'auto'],
|
||||
]),
|
||||
$column($praefix.'-punkt-'.$i.'-text', [
|
||||
$text($praefix.'-p-'.$i, $inhalt, [
|
||||
'desktop' => ['fontSize' => '16px', 'lineHeight' => 1.75, 'color' => '@gedaempft', 'margin' => ['bottom' => '0px']],
|
||||
], "& a{color:#2e7595;text-decoration:underline;text-underline-offset:3px}\n& a:hover{color:#245e79}"),
|
||||
], ['desktop' => ['flexGrow' => 1, 'flexBasis' => '0', 'minWidth' => '0']]),
|
||||
], [], [
|
||||
'desktop' => ['display' => 'flex', 'alignItems' => 'flex-start', 'gap' => '48px', 'margin' => ['top' => '0px'],
|
||||
'borderWidth' => $nurOben('1px'), 'borderStyle' => 'solid', 'borderColor' => '@linie', 'padding' => ['top' => '28px', 'bottom' => '28px']],
|
||||
'tablet' => ['gap' => '32px'],
|
||||
'mobile' => ['flexDirection' => 'column', 'gap' => '8px', 'padding' => ['top' => '22px', 'bottom' => '22px']],
|
||||
]);
|
||||
}
|
||||
|
||||
$inhalt = $abschnitt($praefix, [
|
||||
$column($praefix.'-inhalt', $punkte, ['desktop' => ['maxWidth' => '960px']]),
|
||||
], ['desktop' => ['padding' => ['top' => '56px', 'bottom' => '100px']], 'mobile' => ['padding' => ['top' => '28px', 'bottom' => '61px']]]);
|
||||
|
||||
return [$kopf, $inhalt];
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Startseite
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$werte = ['Persönlich begleitet', 'Gemeinsam aktiv', 'Mit Freude durch den Tag'];
|
||||
|
||||
// Nummer, Symbol, Farbe des oberen Rands, Titel, Text – die drei Karten aus „Unser Angebot“.
|
||||
$angebote = [
|
||||
['01 / MITEINANDER', 'people', '#a9c563', '#f0f5e7', '#6b8f36', 'Gesellschaft genießen', 'Erzählen, zuhören, gemeinsam lachen. Hier können aus Begegnungen vertraute Beziehungen werden.'],
|
||||
['02 / LEBENSFREUDE', 'music', '#4285a2', '#edf5f8', '#347895', 'Mit Freude aktiv sein', 'Musik, Bewegung und kreative Momente bringen Abwechslung in den Tag. Jeder macht mit, wie es sich gut anfühlt.'],
|
||||
['03 / GEBORGENHEIT', 'home', '#bdce62', '#f0f5e7', '#6b8f36', 'Sich aufgehoben fühlen', 'Ein liebevoll gedeckter Tisch, Zeit zum Durchatmen und aufmerksame Begleitung geben dem Tag einen vertrauten Rahmen.'],
|
||||
];
|
||||
|
||||
$tagesablauf = [
|
||||
['01', 'ANKOMMEN', 'In Ruhe in den Tag starten', 'Ein freundliches Willkommen, ein gemeinsames Frühstück und Zeit für die ersten Gespräche.'],
|
||||
['02', 'GEMEINSAM ERLEBEN', 'Den Vormittag gestalten', 'Ein Spiel, etwas Bewegung oder gemeinsam kreativ werden – passend zu Lust und Möglichkeiten.'],
|
||||
['03', 'GENIESSEN & AUSRUHEN', 'Zeit für eine Pause', 'Zusammen Mittag essen und anschließend entspannen. Jeder darf seinen eigenen Rhythmus finden.'],
|
||||
['04', 'DEN TAG AUSKLINGEN LASSEN', 'Mit einem Lächeln nach Hause', 'Kaffee, eine gemütliche Runde und schöne Erinnerungen, die mit nach Hause gehen.'],
|
||||
];
|
||||
|
||||
$startseite = [
|
||||
'schemaVersion' => $SCHEMA,
|
||||
'title' => 'Tagespflege Moldovan',
|
||||
'description' => 'Tagespflege Jacqueline Moldovan in Baden-Baden. Ein Ort für Begegnung, Geborgenheit und schöne gemeinsame Tage.',
|
||||
'blocks' => [
|
||||
// 1 – Hero: Text links, Foto rechts auf einer limettenen Form, Notizkarte darüber.
|
||||
$section('hero', [
|
||||
$row('hero-zeile', [
|
||||
$column('hero-text', [
|
||||
$kleinzeile('hero-label', 'Tagespflege in Baden-Baden'),
|
||||
$heading('hero-titel', 'Ein schöner Tag.<br>Ein gutes Gefühl.<br><em>Ein Stück Zuhause.</em>', 1, [
|
||||
'desktop' => [...$serif, 'fontSize' => '68px', 'margin' => ['bottom' => '25px']],
|
||||
'tablet' => ['fontSize' => '42px'],
|
||||
'mobile' => ['fontSize' => '43px', 'lineHeight' => 1.12, 'margin' => ['bottom' => '21px']],
|
||||
], $emGruen),
|
||||
$text('hero-intro', 'Gemeinsam lachen, Neues erleben und sich gut aufgehoben fühlen. Wir geben dem Tag Leben – und Angehörigen ein wenig Freiraum.', [
|
||||
'desktop' => ['maxWidth' => '465px', 'color' => '@gedaempft', 'fontSize' => '17px', 'lineHeight' => 1.8, 'margin' => ['bottom' => '28px']],
|
||||
'mobile' => ['fontSize' => '16px', 'maxWidth' => '520px'],
|
||||
]),
|
||||
$zeile('hero-aktionen', [
|
||||
$column('hero-aktion-knopf', [
|
||||
$button('hero-knopf', 'Lernen wir uns kennen', '#kontakt', ['desktop' => ['borderRadius' => $ecken('4px'), 'margin' => ['top' => '0px']]]),
|
||||
], ['desktop' => ['flexShrink' => 0]]),
|
||||
$column('hero-aktion-link', [
|
||||
$text('hero-textlink', '<a href="#bei-uns">Unsere Tagespflege entdecken ↓</a>', [
|
||||
'desktop' => ['fontSize' => '14px', 'padding' => ['top' => '15px', 'bottom' => '15px'], 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#cad4c8', 'margin' => ['bottom' => '0px']],
|
||||
]),
|
||||
], ['desktop' => ['flexShrink' => 0]]),
|
||||
], '18px', ['alignItems' => 'flex-start', 'flexWrap' => 'wrap'], ['rowGap' => '8px', 'columnGap' => '20px']),
|
||||
$text('hero-notiz', "Tagsüber in guter Gesellschaft.\nAbends im vertrauten Zuhause.", [
|
||||
'desktop' => ['fontSize' => '14px', 'lineHeight' => 1.6, 'color' => '#737a7a', 'borderWidth' => $nurLinks('3px'), 'borderStyle' => 'solid', 'borderColor' => '@limette', 'padding' => ['left' => '15px'], 'margin' => ['top' => '29px', 'bottom' => '0px']],
|
||||
'mobile' => ['margin' => ['top' => '20px', 'bottom' => '0px']],
|
||||
]),
|
||||
]),
|
||||
$column('hero-visual', [
|
||||
// Die limettene Form hinter dem Foto – dieselbe Schnittkante wie in der Vorlage.
|
||||
$flaeche('hero-form', [
|
||||
'desktop' => ['position' => 'absolute', 'top' => '-19px', 'right' => '-17px', 'bottom' => '35px', 'left' => '35px', 'height' => 'auto', 'width' => 'auto', 'backgroundColor' => '@limette', 'zIndex' => 0],
|
||||
'mobile' => ['top' => '-14px', 'right' => '-9px', 'bottom' => '28px', 'left' => '30px'],
|
||||
], 'clip-path:polygon(18% 0,100% 0,81% 100%,0 100%)'),
|
||||
$bild('hero-bild', $medien['gemeinsam'], 'Illustrative Szene: Eine Seniorin und eine Begleiterin lachen gemeinsam an einem Tisch.', [
|
||||
'desktop' => ['position' => 'relative', 'zIndex' => 1, 'imageHeight' => '465px', 'objectFit' => 'cover', 'objectPosition' => 'center', 'imageRadius' => ['topLeft' => '110px', 'topRight' => '6px', 'bottomRight' => '6px', 'bottomLeft' => '6px'], 'margin' => $seiten('0px')],
|
||||
'tablet' => ['imageHeight' => '390px'],
|
||||
'mobile' => ['imageHeight' => '380px', 'imageRadius' => ['topLeft' => '85px', 'topRight' => '6px', 'bottomRight' => '6px', 'bottomLeft' => '6px']],
|
||||
], null, '& img{object-position:54% 45%}'),
|
||||
$column('hero-karte', [
|
||||
$text('hero-karte-label', 'WAS WIR UNS WÜNSCHEN', $klein),
|
||||
$text('hero-karte-text', "Dass Sie gerne\n<em>wiederkommen.</em>", [
|
||||
'desktop' => [...$serif, 'fontSize' => '30px', 'lineHeight' => 1.15, 'letterSpacing' => '-0.02em', 'margin' => ['top' => '11px', 'bottom' => '15px']],
|
||||
'mobile' => ['fontSize' => '27px'],
|
||||
], '& em{color:#73933d}'),
|
||||
$flaeche('hero-karte-strich', ['desktop' => ['width' => '36px', 'height' => '3px', 'backgroundColor' => '@limette']]),
|
||||
], [
|
||||
'desktop' => ['position' => 'absolute', 'left' => '-25px', 'bottom' => '-23px', 'zIndex' => 2, 'backgroundColor' => '@papier', 'minWidth' => '245px', 'padding' => ['top' => '22px', 'right' => '28px', 'bottom' => '17px', 'left' => '28px'], 'borderWidth' => $seiten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#edf0e9', 'shadowY' => '8px', 'shadowBlur' => '35px', 'shadowColor' => '#29465513'],
|
||||
'tablet' => ['left' => '-12px', 'minWidth' => '190px', 'padding' => ['top' => '18px', 'right' => '22px', 'bottom' => '14px', 'left' => '22px']],
|
||||
'mobile' => ['left' => '-12px', 'bottom' => '-25px', 'minWidth' => '190px', 'padding' => ['top' => '20px', 'right' => '25px', 'bottom' => '16px', 'left' => '25px']],
|
||||
]),
|
||||
$text('hero-caption', 'Gemeinschaft, die guttut.', [
|
||||
'desktop' => ['position' => 'absolute', 'right' => '0px', 'bottom' => '-31px', 'fontSize' => '12px', 'color' => '#737b79', 'margin' => ['bottom' => '0px']],
|
||||
]),
|
||||
], [
|
||||
'desktop' => ['position' => 'relative', 'margin' => ['left' => '10px', 'bottom' => '25px']],
|
||||
'tablet' => ['margin' => ['left' => '0px', 'bottom' => '25px']],
|
||||
'mobile' => ['margin' => ['top' => '0px', 'right' => '6px', 'bottom' => '22px', 'left' => '12px']],
|
||||
]),
|
||||
], ['desktop' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], [
|
||||
'desktop' => ['gap' => '45px', 'alignItems' => 'center', 'margin' => ['top' => '0px']],
|
||||
'tablet' => ['gap' => '25px'],
|
||||
'mobile' => ['gap' => '45px'],
|
||||
]),
|
||||
], [
|
||||
'desktop' => ['minHeight' => '650px', 'display' => 'flex', 'alignItems' => 'center', 'padding' => ['top' => '67px', 'bottom' => '75px']],
|
||||
'tablet' => ['minHeight' => 'auto', 'padding' => ['top' => '50px', 'bottom' => '75px']],
|
||||
'mobile' => ['minHeight' => 'auto', 'padding' => ['top' => '42px', 'bottom' => '57px']],
|
||||
], 'start'),
|
||||
|
||||
// 2 – Das Band mit den drei Versprechen.
|
||||
$section('werte', [
|
||||
$row('werte-zeile', array_map(
|
||||
static fn (string $wert, int $i): array => $column('wert-'.($i + 1), [
|
||||
$symbol('wert-'.($i + 1).'-haken', 'check', 16, ['desktop' => ['color' => '#789d3e', 'flexShrink' => 0]]),
|
||||
$text('wert-'.($i + 1).'-text', $wert, ['desktop' => ['fontSize' => '15px', 'letterSpacing' => '0.015em', 'margin' => ['bottom' => '0px']], 'mobile' => ['fontSize' => '14px']]),
|
||||
], [
|
||||
'desktop' => ['display' => 'flex', 'alignItems' => 'center', 'justifyContent' => 'center', 'gap' => '13px']
|
||||
+ (0 === $i ? [] : ['borderWidth' => ['top' => '0px', 'right' => '0px', 'bottom' => '0px', 'left' => '1px'], 'borderStyle' => 'solid', 'borderColor' => '#dbe2d6']),
|
||||
'mobile' => ['justifyContent' => 'flex-start', 'gap' => '16px', 'borderStyle' => 'none'],
|
||||
]),
|
||||
$werte, array_keys($werte),
|
||||
), ['desktop' => ['columns' => 'three'], 'mobile' => ['columns' => 'one']], [
|
||||
'desktop' => ['margin' => ['top' => '0px']],
|
||||
'mobile' => ['gap' => '12px'],
|
||||
]),
|
||||
], [
|
||||
'desktop' => ['backgroundColor' => '@sand', 'borderWidth' => ['top' => '1px', 'right' => '0px', 'bottom' => '1px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => '@linie', 'padding' => ['top' => '22px', 'bottom' => '22px']],
|
||||
'mobile' => ['padding' => ['top' => '20px', 'bottom' => '20px']],
|
||||
]),
|
||||
|
||||
// 3 – Willkommen: Überschrift links, Text und Signatur rechts.
|
||||
$abschnitt('vorstellung', [
|
||||
$row('vorstellung-zeile', [
|
||||
$column('vorstellung-titel', [
|
||||
$kleinzeile('vorstellung-label', 'Willkommen bei uns'),
|
||||
$heading('vorstellung-h2', 'Hier zählt der Mensch.<br><em>Und das Miteinander.</em>', 2, $h2Stil, $emGruen),
|
||||
]),
|
||||
$column('vorstellung-text', [
|
||||
$text('vorstellung-lead', 'Manchmal braucht es nur ein vertrautes Gesicht, ein gutes Gespräch und das Gefühl, dazuzugehören.', [
|
||||
'desktop' => ['fontSize' => '20px', 'lineHeight' => 1.7, 'color' => '@tinte', 'margin' => ['bottom' => '20px']],
|
||||
'mobile' => ['fontSize' => '18px'],
|
||||
]),
|
||||
$text('vorstellung-p1', 'Unsere Tagespflege ist ein Ort für ältere Menschen, die ihren Tag in Gesellschaft verbringen möchten. Dabei ist uns wichtig, Raum für persönliche Gewohnheiten zu lassen: für Aktivität ebenso wie für eine ruhige Pause.', $fliess),
|
||||
$text('vorstellung-p2', 'Mit Aufmerksamkeit und einem offenen Ohr möchten wir den Alltag unserer Gäste bereichern und ihre Angehörigen entlasten.', $fliess),
|
||||
$zeile('vorstellung-signatur', [
|
||||
$column('signatur-bild', [
|
||||
$bild('signatur-portraet', $medien['portraet'], 'Jacqueline Moldovan', [
|
||||
'desktop' => ['maxWidth' => '104px', 'imageHeight' => '104px', 'objectFit' => 'cover', 'objectPosition' => 'top', 'imageRadius' => $ecken('50%'), 'imageBorderWidth' => $seiten('4px'), 'imageBorderStyle' => 'solid', 'imageBorderColor' => '@papier', 'margin' => $seiten('0px')],
|
||||
'tablet' => ['maxWidth' => '86px', 'imageHeight' => '86px'],
|
||||
'mobile' => ['maxWidth' => '86px', 'imageHeight' => '86px'],
|
||||
], null),
|
||||
], ['desktop' => ['flexShrink' => 0]]),
|
||||
$flaeche('signatur-strich', ['desktop' => ['width' => '28px', 'height' => '2px', 'backgroundColor' => '@gruen', 'flexShrink' => 0], 'tablet' => ['width' => '20px']]),
|
||||
$column('signatur-name', [
|
||||
$text('signatur-person', '<strong>Jacqueline Moldovan</strong>', ['desktop' => ['fontSize' => '15px', 'fontWeight' => '600', 'color' => '#2e6682', 'margin' => ['bottom' => '0px']]]),
|
||||
$text('signatur-rolle', 'Geschäftsführerin', ['desktop' => ['fontSize' => '13px', 'color' => '@gedaempft', 'margin' => ['top' => '4px', 'bottom' => '0px']]]),
|
||||
]),
|
||||
], '18px', ['flexWrap' => 'wrap', 'margin' => ['top' => '29px']], ['gap' => '14px']),
|
||||
]),
|
||||
], ['desktop' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], [
|
||||
'desktop' => ['gap' => '80px', 'margin' => ['top' => '0px']],
|
||||
'tablet' => ['gap' => '50px'],
|
||||
'mobile' => ['gap' => '28px'],
|
||||
]),
|
||||
], [], 'bei-uns'),
|
||||
|
||||
// 4 – Unser Angebot: drei Karten auf blasser Fläche.
|
||||
$abschnitt('angebot-abschnitt', [
|
||||
$zeile('angebot-kopf', [
|
||||
$column('angebot-kopf-titel', [
|
||||
$kleinzeile('angebot-label', 'Raum für einen guten Tag'),
|
||||
$heading('angebot-h2', 'Was den Alltag<br><em>schöner macht.</em>', 2, $h2Stil, $emGruen),
|
||||
]),
|
||||
$column('angebot-kopf-text', [
|
||||
$text('angebot-intro', "Die kleinen Dinge machen den Unterschied.\nUnd Menschen, die sich Zeit nehmen.", [
|
||||
'desktop' => ['fontSize' => '15px', 'color' => '@gedaempft', 'margin' => ['bottom' => '5px']],
|
||||
'tablet' => ['maxWidth' => '260px'],
|
||||
'mobile' => ['margin' => ['top' => '23px', 'bottom' => '0px']],
|
||||
]),
|
||||
]),
|
||||
], '35px', ['alignItems' => 'flex-end', 'justifyContent' => 'space-between', 'margin' => ['top' => '0px', 'bottom' => '46px']], ['flexDirection' => 'column', 'alignItems' => 'flex-start', 'gap' => '0px', 'margin' => ['top' => '0px', 'bottom' => '30px']]),
|
||||
$row('angebot-raster', array_map(
|
||||
static function (array $a, int $i) use ($column, $text, $symbol, $heading, $h3Stil, $seiten, $ecken): array {
|
||||
$n = $i + 1;
|
||||
|
||||
return $column('angebot-'.$n, [
|
||||
$text('angebot-'.$n.'-nummer', $a[0], ['desktop' => ['fontSize' => '11px', 'fontWeight' => '600', 'letterSpacing' => '0.14em', 'color' => '#788574', 'margin' => ['bottom' => '0px']]]),
|
||||
$symbol('angebot-'.$n.'-symbol', $a[1], 32, [
|
||||
'desktop' => ['width' => '55px', 'height' => '55px', 'display' => 'flex', 'alignItems' => 'center', 'justifyContent' => 'center', 'borderRadius' => $ecken('50%'), 'backgroundColor' => $a[3], 'color' => $a[4], 'margin' => ['top' => '31px', 'bottom' => '23px']],
|
||||
'mobile' => ['width' => '48px', 'height' => '48px'],
|
||||
]),
|
||||
$heading('angebot-'.$n.'-titel', $a[5], 3, $h3Stil),
|
||||
$text('angebot-'.$n.'-text', $a[6], ['desktop' => ['fontSize' => '15px', 'color' => '@gedaempft', 'lineHeight' => 1.8, 'margin' => ['bottom' => '0px']]]),
|
||||
], [
|
||||
'desktop' => ['backgroundColor' => '@papier', 'borderWidth' => ['top' => '3px', 'right' => '0px', 'bottom' => '0px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => $a[2], 'padding' => ['top' => '30px', 'right' => '29px', 'bottom' => '28px', 'left' => '29px']],
|
||||
'tablet' => ['padding' => ['top' => '23px', 'right' => '19px', 'bottom' => '23px', 'left' => '19px']],
|
||||
'mobile' => ['padding' => ['top' => '25px', 'right' => '27px', 'bottom' => '25px', 'left' => '27px']],
|
||||
]);
|
||||
},
|
||||
$angebote, array_keys($angebote),
|
||||
), ['desktop' => ['columns' => 'three'], 'mobile' => ['columns' => 'one']], [
|
||||
'desktop' => ['gap' => '25px', 'margin' => ['top' => '0px']],
|
||||
'tablet' => ['gap' => '15px'],
|
||||
'mobile' => ['gap' => '17px'],
|
||||
]),
|
||||
], ['desktop' => ['backgroundColor' => '@blass']], 'angebot'),
|
||||
|
||||
// 5 – Ein Tag bei uns: Einleitung links, die Zeitleiste rechts.
|
||||
$abschnitt('tagesablauf-abschnitt', [
|
||||
$row('tag-zeile', [
|
||||
$column('tag-intro', [
|
||||
$kleinzeile('tag-label', 'Ein Tag bei uns'),
|
||||
$heading('tag-h2', 'Ein guter Rhythmus.<br><em>Ganz ohne Eile.</em>', 2, $h2Stil, $emGruen),
|
||||
$text('tag-intro-text', 'So könnte ein gemeinsamer Tag aussehen. Mit vertrauten Ritualen, neuen Impulsen und Zeit für das, was Ihnen Freude macht.', [
|
||||
'desktop' => ['maxWidth' => '375px', 'color' => '@gedaempft', 'margin' => ['top' => '27px', 'bottom' => '0px']],
|
||||
'mobile' => ['maxWidth' => '100%'],
|
||||
]),
|
||||
$bild('tag-marke', $medien['marke'], '', [
|
||||
'desktop' => ['maxWidth' => '110px', 'opacity' => 0.65, 'margin' => ['top' => '36px']],
|
||||
]) + ['layout' => ['visibility' => 'hide-mobile']],
|
||||
]),
|
||||
$column('tag-liste', array_map(
|
||||
static function (array $s, int $i) use ($zeile, $column, $text, $heading, $flaeche, $klein, $h3Stil, $ecken, $seiten, $tagesablauf): array {
|
||||
$n = $i + 1;
|
||||
$letzte = $n === count($tagesablauf);
|
||||
$links = [
|
||||
$text('tag-'.$n.'-zahl', $s[0], ['desktop' => [
|
||||
'width' => '42px', 'height' => '42px', 'flexShrink' => 0, 'display' => 'flex', 'alignItems' => 'center', 'justifyContent' => 'center',
|
||||
'backgroundColor' => '#f2f6e9', 'borderWidth' => $seiten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#dbe7cc', 'borderRadius' => $ecken('50%'),
|
||||
'fontSize' => '12px', 'color' => '#72943d', 'margin' => ['bottom' => '0px'],
|
||||
]]),
|
||||
];
|
||||
if (!$letzte) {
|
||||
$links[] = $flaeche('tag-'.$n.'-linie', ['desktop' => ['width' => '1px', 'height' => 'auto', 'flexGrow' => 1, 'backgroundColor' => '#dbe3d4']]);
|
||||
}
|
||||
|
||||
return $zeile('tag-schritt-'.$n, [
|
||||
$column('tag-'.$n.'-spur', $links, ['desktop' => ['width' => '43px', 'flexShrink' => 0, 'display' => 'flex', 'flexDirection' => 'column', 'alignItems' => 'center']]),
|
||||
$column('tag-'.$n.'-inhalt', [
|
||||
$text('tag-'.$n.'-label', $s[1], $klein),
|
||||
$heading('tag-'.$n.'-titel', $s[2], 3, ['desktop' => [...$h3Stil['desktop'], 'margin' => ['top' => '7px', 'bottom' => '9px']]]),
|
||||
$text('tag-'.$n.'-text', $s[3], ['desktop' => ['fontSize' => '15px', 'color' => '@gedaempft', 'lineHeight' => 1.75, 'margin' => ['bottom' => '0px']]]),
|
||||
]),
|
||||
], '24px', ['alignItems' => 'stretch', 'padding' => ['bottom' => $letzte ? '0px' : '34px']], ['gap' => '19px']);
|
||||
},
|
||||
$tagesablauf, array_keys($tagesablauf),
|
||||
)),
|
||||
], ['desktop' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], [
|
||||
'desktop' => ['gap' => '90px', 'margin' => ['top' => '0px']],
|
||||
'tablet' => ['gap' => '50px'],
|
||||
'mobile' => ['gap' => '28px'],
|
||||
]),
|
||||
], [], 'tagesablauf'),
|
||||
|
||||
// 6 – Kontakt: dunkelblaue Fläche, rechts die weiße Formularkarte.
|
||||
$section('kontakt-abschnitt', [
|
||||
// Die schräge hellere Fläche am rechten Rand, mit dem limettenen Streifen davor.
|
||||
$flaeche('kontakt-form', [
|
||||
'desktop' => ['position' => 'absolute', 'top' => '0px', 'bottom' => '0px', 'right' => '-80px', 'width' => '180px', 'height' => 'auto', 'backgroundColor' => '#315d71', 'borderWidth' => $nurLinks('12px'), 'borderStyle' => 'solid', 'borderColor' => '#a1bb59', 'zIndex' => 0],
|
||||
'mobile' => ['right' => '-150px'],
|
||||
], 'transform:skewX(-16deg);pointer-events:none'),
|
||||
$row('kontakt-zeile', [
|
||||
$column('kontakt-text', [
|
||||
$kleinzeile('kontakt-label', 'Der erste Schritt ist ein Gespräch', '#c4d998', '@limette', '22px'),
|
||||
$heading('kontakt-h2', 'Ein gutes Gefühl<br>beginnt mit einem<br><em>persönlichen Hallo.</em>', 2, [
|
||||
'desktop' => [...$serif, 'fontSize' => '59px', 'color' => '@papier', 'margin' => ['bottom' => '24px']],
|
||||
'tablet' => ['fontSize' => '45px'],
|
||||
'mobile' => ['fontSize' => '43px'],
|
||||
], '& em{color:#c1d786;font-weight:400}'),
|
||||
$text('kontakt-intro', 'Sie möchten unsere Tagespflege kennenlernen oder haben Fragen? Erzählen Sie uns, was Ihnen wichtig ist. Wir freuen uns auf Sie.', [
|
||||
'desktop' => ['maxWidth' => '430px', 'color' => '#d5e0e4', 'fontSize' => '15px', 'lineHeight' => 1.8, 'margin' => ['bottom' => '28px']],
|
||||
]),
|
||||
// Ein Telefonlink, kein Button-Baustein: Buttons verweisen auf Seiten, nicht auf tel:.
|
||||
$text('kontakt-anrufen', '<a href="'.$telHref.'">Rufen Sie uns an ↗</a>', ['desktop' => ['margin' => ['bottom' => '0px']]],
|
||||
"& a{display:inline-flex;align-items:center;gap:25px;background:#c3d886;color:#27434a;border-radius:4px;padding:15px 22px;font-size:15px;font-weight:600;transition:background .2s,transform .2s}\n& a:hover{background:#d1e3a5;transform:translateY(-2px)}"),
|
||||
['id' => 'kontakt-daten', 'type' => 'contact',
|
||||
'props' => ['phone' => $telefon, 'email' => $mail, 'address' => "Fremersbergstraße 75\n76530 Baden-Baden"],
|
||||
'style' => ['desktop' => ['fontSize' => '15px', 'color' => '#dce7eb', 'gap' => '10px', 'borderWidth' => $nurOben('1px'), 'borderStyle' => 'solid', 'borderColor' => '#ffffff30', 'padding' => ['top' => '26px'], 'margin' => ['top' => '30px']]],
|
||||
// Die Vorlage führt die Angaben ohne Symbole; die Adresse behält ihren Umbruch.
|
||||
'css' => "& svg{display:none}\n& span{display:block}\n& a{overflow-wrap:anywhere}\n& a:hover{text-decoration:underline}\n& span:first-child a{font-size:22px;color:#ffffff;letter-spacing:-0.025em}\n& span:last-child{white-space:pre-line;line-height:1.65;margin-top:5px}",
|
||||
],
|
||||
], ['desktop' => ['alignSelf' => 'center']]),
|
||||
$column('kontakt-karte', [
|
||||
$text('kontakt-karte-label', 'WIR FREUEN UNS AUF IHRE NACHRICHT', ['desktop' => [...$klein['desktop'], 'margin' => ['bottom' => '18px']]]),
|
||||
$heading('kontakt-karte-titel', 'Was können wir<br>für Sie tun?', 3, [
|
||||
'desktop' => ['fontFamily' => 'heading', 'fontWeight' => '400', 'fontSize' => '30px', 'lineHeight' => 1.25, 'letterSpacing' => '-0.02em', 'margin' => ['bottom' => '25px']],
|
||||
]),
|
||||
['id' => 'kontakt-formular', 'type' => 'form', 'props' => ['form' => 'kontakt'],
|
||||
// Felder und Knopf im Zuschnitt der Vorlage; der Wortlaut des Knopfes kommt vom Baustein.
|
||||
'css' => "& .form-field label{font-size:14px;font-weight:600;color:#294655}
|
||||
& .form-field input{background:#fafcf8;border:1px solid #cfd9ce;border-radius:4px;padding:12px 13px;font-size:16px;color:#294655}
|
||||
& .form-field textarea{background:#fafcf8;border:1px solid #cfd9ce;border-radius:4px;padding:12px 13px;font-size:16px;color:#294655;min-height:120px}
|
||||
& .field-note{font-size:12px;color:#748078}
|
||||
& .cms-button{width:100%;justify-content:center;border-radius:4px;margin-top:4px}",
|
||||
],
|
||||
$text('kontakt-formular-hinweis', 'Ihre Nachricht geht direkt an die Tagespflege. Wir verwenden Ihre Angaben ausschließlich, um Ihre Anfrage zu beantworten – mehr dazu in den <a href="/datenschutz">Datenschutzhinweisen</a>.', [
|
||||
'desktop' => ['fontSize' => '13px', 'lineHeight' => 1.65, 'color' => '#64736b', 'margin' => ['top' => '19px', 'bottom' => '0px']],
|
||||
]),
|
||||
], [
|
||||
'desktop' => ['alignSelf' => 'center', 'backgroundColor' => '@papier', 'color' => '@tinte', 'borderRadius' => $ecken('3px'), 'borderWidth' => $nurOben('4px'), 'borderStyle' => 'solid', 'borderColor' => '#bdd26f', 'padding' => ['top' => '32px', 'right' => '35px', 'bottom' => '32px', 'left' => '35px']],
|
||||
'tablet' => ['padding' => ['top' => '28px', 'right' => '25px', 'bottom' => '28px', 'left' => '25px']],
|
||||
'mobile' => ['padding' => ['top' => '28px', 'right' => '25px', 'bottom' => '28px', 'left' => '25px']],
|
||||
]),
|
||||
], ['desktop' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], [
|
||||
'desktop' => ['gap' => '100px', 'position' => 'relative', 'zIndex' => 1, 'margin' => ['top' => '0px']],
|
||||
'tablet' => ['gap' => '35px'],
|
||||
'mobile' => ['gap' => '35px'],
|
||||
]),
|
||||
], [
|
||||
'desktop' => ['backgroundColor' => '@dunkelblau', 'color' => '@papier', 'position' => 'relative', 'overflow' => 'hidden', 'padding' => ['top' => '83px', 'bottom' => '83px']],
|
||||
'mobile' => ['padding' => ['top' => '60px', 'bottom' => '60px']],
|
||||
], 'kontakt'),
|
||||
],
|
||||
];
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Seiten anlegen und veröffentlichen
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$erstellt = [];
|
||||
$anlegen = static function (string $slug, array $dokument, string $seoTitel = '', string $teilbild = '') use ($pages, $db, &$erstellt): string {
|
||||
$id = $pages->createPage($slug, null, 'page', $dokument);
|
||||
if ('' !== $seoTitel) {
|
||||
$db->executeStatement('UPDATE page SET seo_title = ? WHERE id = ?', [$seoTitel, $id]);
|
||||
}
|
||||
if ('' !== $teilbild) {
|
||||
$db->executeStatement('UPDATE page SET og_media_id = ? WHERE id = ?', [$teilbild, $id]);
|
||||
}
|
||||
$seite = $db->fetchAssociative('SELECT draft_revision_id, version FROM page WHERE id = ?', [$id]);
|
||||
$pages->publish($id, $seite['draft_revision_id'], (int) $seite['version']);
|
||||
$erstellt[$slug] = $id;
|
||||
echo 'Seite angelegt: /'.$db->fetchOne('SELECT path FROM page WHERE id = ?', [$id])."\n";
|
||||
|
||||
return $id;
|
||||
};
|
||||
|
||||
// Der Hero spielt beim Laden, alles Weitere beim Hereinscrollen. Gestaffelt, damit eine Zeile
|
||||
// nacheinander erscheint statt auf einen Schlag.
|
||||
$startseite = $einblenden($startseite, [
|
||||
'hero-label' => ['fade'],
|
||||
'hero-titel' => ['rise', 'short'],
|
||||
'hero-intro' => ['rise', 'medium'],
|
||||
'hero-aktionen' => ['rise', 'long'],
|
||||
'hero-notiz' => ['fade', 'long'],
|
||||
'hero-visual' => ['right', 'short'],
|
||||
'werte-zeile' => ['fade'],
|
||||
'vorstellung-titel' => ['rise'],
|
||||
'vorstellung-text' => ['rise', 'short'],
|
||||
'angebot-kopf' => ['rise'],
|
||||
'angebot-1' => ['rise'],
|
||||
'angebot-2' => ['rise', 'short'],
|
||||
'angebot-3' => ['rise', 'medium'],
|
||||
'tag-intro' => ['rise'],
|
||||
'tag-schritt-1' => ['rise'],
|
||||
'tag-schritt-2' => ['rise', 'short'],
|
||||
'tag-schritt-3' => ['rise', 'medium'],
|
||||
'tag-schritt-4' => ['rise', 'long'],
|
||||
'kontakt-text' => ['rise'],
|
||||
'kontakt-karte' => ['rise', 'short'],
|
||||
]);
|
||||
|
||||
$anlegen('home', $startseite, 'Tagespflege Moldovan · Gemeinsam den Tag genießen', $medien['gemeinsam']['id']);
|
||||
|
||||
$anlegen('impressum', [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Impressum',
|
||||
'description' => 'Anbieterangaben der Tagespflege Jacqueline Moldovan in Baden-Baden.',
|
||||
'blocks' => [
|
||||
...$rechtsseite('impressum', 'Rechtliche Angaben', 'Impressum', 'Angaben gemäß § 5 DDG und § 18 Abs. 2 MStV.', [
|
||||
['Anbieterin', "Tagespflege Jacqueline Moldovan<br>Fremersbergstraße 75<br>76530 Baden-Baden<br><br>Vertreten durch Jacqueline Moldovan."],
|
||||
['Kontakt', "Telefon: <a href=\"$telHref\">$telefon</a><br>E-Mail: <a href=\"mailto:$mail\">$mail</a>"],
|
||||
['Rechtsform und Register', 'NOCH ZU PRÜFEN: Rechtsform, Registergericht und Registernummer ergänzen, sofern eine Eintragung besteht.'],
|
||||
['Umsatzsteuer', 'NOCH ZU PRÜFEN: Umsatzsteuer-Identifikationsnummer eintragen oder auf die Steuerbefreiung für Pflegeleistungen nach § 4 Nr. 16 UStG hinweisen.'],
|
||||
['Aufsichtsbehörde', 'NOCH ZU PRÜFEN: zuständige Aufsicht für die Tagespflege eintragen, in Baden-Baden üblicherweise die Heimaufsicht der Stadt. Ebenfalls zu ergänzen: Berufsbezeichnung und zuständige Kammer, sofern einschlägig, sowie ein bestehender Versorgungsvertrag nach § 72 SGB XI.'],
|
||||
['Verantwortlich für den Inhalt', "Jacqueline Moldovan, Anschrift wie oben."],
|
||||
['Verbraucherstreitbeilegung', 'Wir sind nicht bereit und nicht verpflichtet, an einem Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.'],
|
||||
['Bildnachweis', 'Porträt: Jacqueline Moldovan. Einstiegsbild: illustrative KI-Aufnahme, keine Abbildung tatsächlicher Gäste. Markenzeichen: eigene Gestaltung.'],
|
||||
['Haftung für Links', 'Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Für diese Inhalte ist stets die jeweilige Anbieterin oder der jeweilige Anbieter verantwortlich. Bei Bekanntwerden von Rechtsverletzungen entfernen wir solche Links umgehend.'],
|
||||
]),
|
||||
],
|
||||
], 'Impressum | Tagespflege Jacqueline Moldovan Baden-Baden');
|
||||
|
||||
$anlegen('datenschutz', [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Datenschutz',
|
||||
'description' => 'Wie die Tagespflege Jacqueline Moldovan Daten beim Besuch der Website und bei einer Kontaktaufnahme verarbeitet.',
|
||||
'blocks' => [
|
||||
...$rechtsseite('datenschutz', 'Ihre Daten', 'Datenschutzhinweise', 'Hier erfahren Sie, welche Daten beim Besuch dieser Website und bei Ihrer Kontaktaufnahme verarbeitet werden – und welche Rechte Sie haben.', [
|
||||
['1. Verantwortliche', "Tagespflege Jacqueline Moldovan, Fremersbergstraße 75, 76530 Baden-Baden. Telefon <a href=\"$telHref\">$telefon</a>, E-Mail <a href=\"mailto:$mail\">$mail</a>.<br><br>NOCH ZU PRÜFEN: Ob eine Datenschutzbeauftragte oder ein Datenschutzbeauftragter zu benennen ist, hängt von der Zahl der ständig mit der Verarbeitung beschäftigten Personen ab; gegebenenfalls hier die Kontaktdaten ergänzen."],
|
||||
['2. Besuch dieser Website', 'Beim Aufruf verarbeitet der Hostingdienst technisch erforderliche Verbindungsdaten: IP-Adresse, Zeitpunkt, angeforderte Adresse, Browserangaben und HTTP-Status. Das dient der sicheren Bereitstellung und der Fehlersuche. Rechtsgrundlage ist unser berechtigtes Interesse an einem störungsfreien Betrieb, Art. 6 Abs. 1 lit. f DSGVO.<br><br>NOCH ZU PRÜFEN: Hostinganbieter benennen, Auftragsverarbeitungsvertrag abschließen, Verarbeitungsländer und die konkrete Speicherdauer der Serverprotokolle eintragen.'],
|
||||
['3. Cookies, Schriften, externe Dienste', 'Diese Website setzt keine Analyse- oder Werbecookies. Bilder, Schriften und Gestaltung kommen vom eigenen Server; es werden keine Karten, Videos oder Schriften von Dritten nachgeladen. Deshalb gibt es auch keinen Einwilligungsdialog.'],
|
||||
['4. Ihre Nachricht über das Kontaktformular', 'Wenn Sie uns schreiben, verarbeiten wir die von Ihnen angegebenen Kontakt- und Inhaltsdaten, um Ihre Anfrage zu beantworten. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO, wenn es um die Anbahnung einer Betreuung geht, sonst Art. 6 Abs. 1 lit. f DSGVO.<br><br>Bitte schildern Sie im Formular keine Gesundheitsangaben, keinen Pflegegrad und keine Diagnosen. Solche Angaben sind besonders geschützt (Art. 9 DSGVO); wir besprechen sie lieber persönlich oder am Telefon.'],
|
||||
['5. Wie lange wir speichern', 'Anfragedaten löschen wir, sobald sie für die Beantwortung nicht mehr nötig sind und keine gesetzliche Aufbewahrungspflicht entgegensteht. Entsteht aus Ihrer Anfrage ein Betreuungsverhältnis, gelten für die dann anfallenden Unterlagen die gesetzlichen Fristen.'],
|
||||
['6. Empfänger', 'Ihre Angaben erreichen die Tagespflege per E-Mail. Darüber hinaus geben wir sie nicht weiter, außer wir sind dazu gesetzlich verpflichtet.<br><br>NOCH ZU PRÜFEN: E-Mail-Anbieter und Hostingdienst als Auftragsverarbeiter benennen.'],
|
||||
['7. Ihre Rechte', 'Sie haben unter den gesetzlichen Voraussetzungen das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung und Datenübertragbarkeit. Einer Verarbeitung auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO können Sie widersprechen. Eine erteilte Einwilligung können Sie jederzeit mit Wirkung für die Zukunft widerrufen.'],
|
||||
['8. Beschwerderecht', 'Sie können sich bei einer Datenschutz-Aufsichtsbehörde beschweren, für uns beim Landesbeauftragten für den Datenschutz und die Informationsfreiheit Baden-Württemberg.'],
|
||||
['', "Fragen zum Datenschutz beantworten wir gern unter <a href=\"mailto:$mail\">$mail</a>."],
|
||||
]),
|
||||
],
|
||||
], 'Datenschutz | Tagespflege Jacqueline Moldovan');
|
||||
|
||||
$fehlerId = $anlegen('404', [
|
||||
'schemaVersion' => $SCHEMA, 'title' => 'Seite nicht gefunden',
|
||||
'description' => 'Die gesuchte Seite gibt es nicht oder sie wurde verschoben.',
|
||||
'blocks' => [
|
||||
$abschnitt('fehler', [
|
||||
[...$kleinzeile('fehler-label', 'Fehler 404'), 'layout' => ['effects' => ['entrance' => 'fade', 'delay' => 'none']]],
|
||||
$heading('fehler-titel', 'Diese Seite<br><em>haben wir nicht.</em>', 1, [
|
||||
'desktop' => [...$serif, 'fontSize' => '59px', 'margin' => ['bottom' => '25px']],
|
||||
'mobile' => ['fontSize' => '40px'],
|
||||
], $emGruen),
|
||||
$text('fehler-text', 'Vielleicht hat sich ein Tippfehler in die Adresse geschlichen. Über die Startseite finden Sie zurück.', [
|
||||
'desktop' => ['maxWidth' => '465px', 'color' => '@gedaempft', 'fontSize' => '17px', 'lineHeight' => 1.8, 'margin' => ['bottom' => '28px']],
|
||||
]),
|
||||
$button('fehler-knopf', 'Zur Startseite', '/', ['desktop' => ['borderRadius' => $ecken('4px'), 'margin' => ['top' => '0px']]]),
|
||||
], ['desktop' => ['padding' => ['top' => '120px', 'bottom' => '140px']]]),
|
||||
],
|
||||
]);
|
||||
$db->executeStatement('UPDATE page SET robots = ? WHERE id = ?', ['noindex', $fehlerId]);
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
// Menü, Einstellungen, Konto
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
$sprung = static fn (string $label, string $anchor): array => ['label' => $label, 'type' => 'page', 'pageId' => $erstellt['home'], 'anchor' => $anchor, 'children' => []];
|
||||
|
||||
$menus->save('header', 'Hauptnavigation', [
|
||||
$sprung('Bei uns', 'bei-uns'),
|
||||
$sprung('Unser Angebot', 'angebot'),
|
||||
$sprung('Ein Tag bei uns', 'tagesablauf'),
|
||||
$sprung('Kontakt aufnehmen ↗', 'kontakt'),
|
||||
], 0);
|
||||
echo "Menü angelegt\n";
|
||||
|
||||
$settings->assignNotFoundPage($fehlerId, '');
|
||||
$settings->save([
|
||||
'legalName' => 'Tagespflege Jacqueline Moldovan',
|
||||
'description' => 'Tagespflege in Baden-Baden: ein Ort für ältere Menschen, die ihren Tag in Gesellschaft verbringen möchten. Persönliche Begleitung, gemeinsame Aktivitäten und Zeit für Ruhe – abends wieder im vertrauten Zuhause.',
|
||||
'phone' => $telefon, 'email' => $mail,
|
||||
'street' => 'Fremersbergstraße 75', 'postalCode' => '76530', 'city' => 'Baden-Baden', 'country' => 'DE',
|
||||
'localBusiness' => true, 'llmsTxt' => true,
|
||||
'stickyHeader' => true, 'headerOverlay' => false,
|
||||
'motion' => 'always',
|
||||
'faviconMediaId' => $medien['marke']['id'],
|
||||
'homePath' => 'home', 'imprintPath' => 'impressum', 'privacyPath' => 'datenschutz',
|
||||
'consentBanner' => false, 'scrollTop' => false, 'postMetaHeader' => true,
|
||||
]);
|
||||
echo "Einstellungen gespeichert\n";
|
||||
|
||||
$passwort = bin2hex(random_bytes(12));
|
||||
$db->insert('cms_user', ['id' => bin2hex(random_bytes(16)), 'username' => 'umut', 'password_hash' => password_hash($passwort, PASSWORD_BCRYPT), 'roles' => '["ROLE_ADMIN"]']);
|
||||
|
||||
echo "\nFertig.\nVerwaltung: Benutzer „umut“, Passwort: $passwort\n";
|
||||
@@ -172,8 +172,39 @@ final class Consent
|
||||
'decided' => null !== $decision,
|
||||
'decidedAt' => $decision['at'] ?? null,
|
||||
'text' => $settings['consentText'],
|
||||
'title' => $settings['consentTitle'],
|
||||
'layout' => $settings['consentLayout'],
|
||||
'privacyPath' => $settings['privacyPath'],
|
||||
'imprintPath' => $settings['imprintPath'],
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Die Gestaltung des Hinweises als CSS-Variablen für den Kopf der Seite.
|
||||
*
|
||||
* Das Stylesheet kennt die Standardwerte; hier stehen nur die Abweichungen, die jemand in den
|
||||
* Einstellungen gewählt hat. Die Form bestimmt zwei Radien auf einmal - Fläche und Knöpfe
|
||||
* gehören zusammen, und zwei Regler dafür wären zwei Regler, die man gegeneinander verstellt.
|
||||
*/
|
||||
public function styles(array $theme): string
|
||||
{
|
||||
$settings = $this->settings->load();
|
||||
if (!$settings['consentBanner']) {
|
||||
return '';
|
||||
}
|
||||
[$box, $button] = match ($settings['consentShape']) {
|
||||
'rund' => ['28px', '999px'],
|
||||
'eckig' => ['0', '0'],
|
||||
default => ['18px', '10px'],
|
||||
};
|
||||
$values = ['--kant-consent-radius:'.$box, '--kant-consent-button-radius:'.$button];
|
||||
foreach (['consentColor' => '--kant-consent-bg', 'consentInk' => '--kant-consent-ink', 'consentAccent' => '--kant-consent-accent', 'consentAccentInk' => '--kant-consent-accent-ink'] as $field => $variable) {
|
||||
$value = Theme::cssColor((string) $settings[$field], $theme);
|
||||
if (null !== $value) {
|
||||
$values[] = $variable.':'.$value;
|
||||
}
|
||||
}
|
||||
|
||||
return ':root{'.implode(';', $values).'}';
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,7 @@ final class DocumentValidator
|
||||
/** Blocks introduced with schema v6 for the sections a marketing page actually needs. */
|
||||
public const V6_TYPES = ['iconcard', 'stat', 'quote', 'logos', 'cta', 'contact', 'divider', 'spacer', 'accordion', 'accordionitem'];
|
||||
/** Icons ship as inline SVG from this fixed list; no icon font and no external request. */
|
||||
public const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check'];
|
||||
public const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check', 'people', 'music', 'home'];
|
||||
public const SPACER_SIZES = ['small', 'medium', 'large', 'huge'];
|
||||
/** Schema v7: tabs, the one pattern that needs a script to become a real widget. */
|
||||
public const V7_TYPES = ['tabs', 'tabitem'];
|
||||
@@ -33,6 +33,8 @@ final class DocumentValidator
|
||||
public const V19_TYPES = ['legal'];
|
||||
/** Schema v15: a single icon, a progress bar and a slider that works without a script. */
|
||||
public const V15_TYPES = ['icon', 'progress', 'slider'];
|
||||
/** Schema v23: die sozialen Profile aus den Einstellungen, als Symbolreihe an jeder Stelle. */
|
||||
public const V23_TYPES = ['social'];
|
||||
|
||||
/**
|
||||
* @param bool $requireHeading A page needs exactly one main heading. A header, a footer or a
|
||||
@@ -42,7 +44,7 @@ final class DocumentValidator
|
||||
public function validate(array $document, bool $requireHeading = true): void
|
||||
{
|
||||
$schemaVersion = $document['schemaVersion'] ?? null;
|
||||
$this->require(in_array($schemaVersion, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22], true), 'Unsupported document schema.');
|
||||
$this->require(in_array($schemaVersion, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], true), 'Unsupported document schema.');
|
||||
$this->text($document['title'] ?? null, 160);
|
||||
$this->text($document['description'] ?? null, 320);
|
||||
$this->require(is_array($document['blocks'] ?? null) && array_is_list($document['blocks']), 'Blocks must be a list.');
|
||||
@@ -85,7 +87,7 @@ final class DocumentValidator
|
||||
// page: a deactivated plugin must never make stored content unreadable. Nothing from
|
||||
// props is rendered for such a block, so unvalidated values never reach the output.
|
||||
$plugin = $schemaVersion >= 4 && is_string($type) && 1 === preg_match('/^[a-z][a-z0-9]{1,30}\.[a-z][a-z0-9-]{1,40}$/D', $type);
|
||||
$this->require(in_array($type, ['section', 'row', 'column', 'heading', 'text', 'image', 'button'], true) || ($schemaVersion >= 3 && 'gallery' === $type) || ($schemaVersion >= 5 && 'postlist' === $type) || ($schemaVersion >= 6 && in_array($type, self::V6_TYPES, true)) || ($schemaVersion >= 7 && in_array($type, self::V7_TYPES, true)) || ($schemaVersion >= 8 && in_array($type, self::V8_TYPES, true)) || ($schemaVersion >= 9 && in_array($type, self::V9_TYPES, true)) || ($schemaVersion >= 11 && in_array($type, self::V11_TYPES, true)) || ($schemaVersion >= 14 && in_array($type, self::V14_TYPES, true)) || ($schemaVersion >= 15 && in_array($type, self::V15_TYPES, true)) || ($schemaVersion >= 18 && in_array($type, self::V18_TYPES, true)) || ($schemaVersion >= 19 && in_array($type, self::V19_TYPES, true)) || $plugin, 'Unknown block type. Preserve source until its plugin is available.');
|
||||
$this->require(in_array($type, ['section', 'row', 'column', 'heading', 'text', 'image', 'button'], true) || ($schemaVersion >= 3 && 'gallery' === $type) || ($schemaVersion >= 5 && 'postlist' === $type) || ($schemaVersion >= 6 && in_array($type, self::V6_TYPES, true)) || ($schemaVersion >= 7 && in_array($type, self::V7_TYPES, true)) || ($schemaVersion >= 8 && in_array($type, self::V8_TYPES, true)) || ($schemaVersion >= 9 && in_array($type, self::V9_TYPES, true)) || ($schemaVersion >= 11 && in_array($type, self::V11_TYPES, true)) || ($schemaVersion >= 14 && in_array($type, self::V14_TYPES, true)) || ($schemaVersion >= 15 && in_array($type, self::V15_TYPES, true)) || ($schemaVersion >= 18 && in_array($type, self::V18_TYPES, true)) || ($schemaVersion >= 19 && in_array($type, self::V19_TYPES, true)) || ($schemaVersion >= 23 && in_array($type, self::V23_TYPES, true)) || $plugin, 'Unknown block type. Preserve source until its plugin is available.');
|
||||
// An accordion entry only ever renders inside an accordion; at the top level or anywhere
|
||||
// else it would produce a details element without its group.
|
||||
$this->require('accordionitem' !== $type || 'accordion' === $parentType, 'An accordion entry belongs into an accordion.');
|
||||
@@ -154,7 +156,7 @@ final class DocumentValidator
|
||||
$this->text($props['text'] ?? null, $limit);
|
||||
}
|
||||
if (!$plugin && array_key_exists('newTab', $props)) {
|
||||
$this->require($schemaVersion >= 20 && in_array($type, ['button', 'image', 'iconcard', 'cta', 'icon'], true), 'Neue Link-Tabs brauchen Schema v20 und einen verlinkbaren Block.');
|
||||
$this->require($schemaVersion >= 20 && in_array($type, ['button', 'image', 'iconcard', 'cta', 'icon', 'social'], true), 'Neue Link-Tabs brauchen Schema v20 und einen verlinkbaren Block.');
|
||||
$this->require(is_bool($props['newTab']), 'In neuem Tab öffnen ist an oder aus.');
|
||||
}
|
||||
foreach (($block['style'] ?? []) as $values) {
|
||||
@@ -249,6 +251,11 @@ final class DocumentValidator
|
||||
if ('spacer' === $type) {
|
||||
$this->require(in_array($props['size'] ?? null, self::SPACER_SIZES, true), 'Unknown spacer size.');
|
||||
}
|
||||
if ('accordion' === $type && array_key_exists('faq', $props)) {
|
||||
// Ein Akkordeon ist nicht automatisch eine FAQ; erst die Kennzeichnung macht aus den
|
||||
// Einträgen Frage-Antwort-Paare in den strukturierten Daten.
|
||||
$this->require($schemaVersion >= 23 && is_bool($props['faq']), 'Die FAQ-Kennzeichnung ist an oder aus und braucht Schema v23.');
|
||||
}
|
||||
if ('accordionitem' === $type) {
|
||||
$this->text($props['title'] ?? null, 160);
|
||||
$this->require(is_bool($props['open'] ?? false), 'The open state is a boolean.');
|
||||
@@ -263,6 +270,11 @@ final class DocumentValidator
|
||||
if (array_key_exists('collapse', $props)) {
|
||||
$this->require($schemaVersion >= 22 && in_array($props['collapse'], ['tablet', 'mobile', 'never'], true), 'Unbekannte Hamburger-Umschaltung oder Dokumentschema vor v22.');
|
||||
}
|
||||
if (array_key_exists('burgerLabel', $props)) {
|
||||
// Wie der Knopf beschriftet ist. „Nur Symbol“ behält den Text für Vorlesesoftware:
|
||||
// ein Knopf ohne Namen ist für sie ein Knopf ohne Zweck.
|
||||
$this->require(in_array($props['burgerLabel'], ['both', 'text', 'icon'], true), 'Für den Menü-Knopf sind „both", „text" und „icon" vorgesehen.');
|
||||
}
|
||||
if (isset($props['layout'])) {
|
||||
$this->require($schemaVersion >= 16, 'Die Menüart braucht Schema v16.');
|
||||
$this->require(in_array($props['layout'], ['horizontal', 'vertical', 'burger'], true), 'Unbekannte Menüart.');
|
||||
@@ -287,6 +299,19 @@ final class DocumentValidator
|
||||
$this->url($props['href']);
|
||||
}
|
||||
}
|
||||
if ('social' === $type) {
|
||||
// Nur die Darstellung ist Inhalt des Blocks. Welche Profile es gibt, steht in den
|
||||
// Einstellungen - ein Dokument kann kein Profil behaupten, das die Website nicht hat.
|
||||
$this->require(in_array($props['size'] ?? null, self::ICON_SIZES, true), sprintf('Die Symbolgröße ist eine aus %s.', implode(', ', self::ICON_SIZES)));
|
||||
$this->require(isset(SocialProfiles::SHAPES[$props['shape'] ?? '']), 'Unbekannte Form der Symbolfläche.');
|
||||
$this->require(isset(SocialProfiles::LAYOUTS[$props['layout'] ?? '']), 'Unbekannte Anordnung der Symbole.');
|
||||
$this->require(is_bool($props['labels'] ?? null), 'Die Beschriftung der Symbole ist an oder aus.');
|
||||
$networks = $props['networks'] ?? [];
|
||||
$this->require(is_array($networks) && array_is_list($networks), 'Die Auswahl der Netzwerke ist eine Liste.');
|
||||
foreach ($networks as $network) {
|
||||
$this->require(is_string($network) && isset(SocialProfiles::NETWORKS[$network]), 'Unbekanntes Netzwerk in der Auswahl.');
|
||||
}
|
||||
}
|
||||
if ('progress' === $type) {
|
||||
$this->text($props['label'] ?? null, 120);
|
||||
$this->require(is_int($props['value'] ?? null) && $props['value'] >= 0 && $props['value'] <= 100, 'Der Wert liegt zwischen 0 und 100.');
|
||||
|
||||
@@ -108,9 +108,11 @@ final class FontLibrary
|
||||
/**
|
||||
* Die Dateien, die für den ersten Eindruck vorab geholt werden sollen.
|
||||
*
|
||||
* Nur der lateinische Grundbereich und nur die Schnitte, die im Fließtext und in
|
||||
* Überschriften stehen - ein Vorabholen, das alles holt, verzögert genau das, was es
|
||||
* beschleunigen soll.
|
||||
* Jeder Schnitt, den das Theme nennt, im lateinischen Grundbereich. Die früheren „ersten
|
||||
* zwei je Familie“ ließen genau den Schnitt aus, der die Überschriften trägt: Lato 900 lud
|
||||
* erst nach dem Stylesheet, und mit `font-display:swap` sprang die Überschrift sichtbar von
|
||||
* der Ersatzschrift auf die richtige. Die erweiterten Bereiche bleiben draußen - sie werden
|
||||
* nur für Zeichen gebraucht, die auf den meisten Seiten nicht vorkommen.
|
||||
*
|
||||
* @return list<string>
|
||||
*/
|
||||
@@ -118,7 +120,7 @@ final class FontLibrary
|
||||
{
|
||||
$preload = [];
|
||||
foreach ($this->wanted($theme) as $family => $weights) {
|
||||
foreach (array_slice($weights, 0, 2) as $weight) {
|
||||
foreach ($weights as $weight) {
|
||||
$name = $this->slug($family).'-'.$weight.'-latin.woff2';
|
||||
if (is_file($this->directory.'/'.$name)) {
|
||||
$preload[] = '/assets/fonts/'.$name;
|
||||
|
||||
@@ -24,6 +24,13 @@ final class SiteSettings
|
||||
'city' => '',
|
||||
'country' => 'DE',
|
||||
'sameAs' => [],
|
||||
// Die sozialen Profile, je Netzwerk eine Adresse (siehe SocialProfiles). Der Baustein
|
||||
// `social` zeigt sie an; die strukturierten Daten führen sie als sameAs mit.
|
||||
'social' => [],
|
||||
// Öffnungszeiten je Wochentag (opens/closes als HH:MM) und das Einsatzgebiet als Liste
|
||||
// von Ortsnamen. Beides landet in LocalBusiness, weil eine Suchmaschine sonst rät.
|
||||
'openingHours' => [],
|
||||
'areaServed' => [],
|
||||
'localBusiness' => false,
|
||||
'llmsTxt' => false,
|
||||
// Der Kopfbereich bleibt beim Scrollen oben stehen. Eine Eigenschaft der Website und
|
||||
@@ -68,14 +75,86 @@ final class SiteSettings
|
||||
'consentBanner' => false,
|
||||
'consentGroups' => ['external'],
|
||||
'consentText' => '',
|
||||
// Sein Aussehen: Anordnung, Form, Farben, Überschrift. Leer heißt Theme-Standard.
|
||||
'consentLayout' => 'karte',
|
||||
'consentShape' => 'weich',
|
||||
'consentTitle' => '',
|
||||
'consentColor' => '',
|
||||
'consentInk' => '',
|
||||
'consentAccent' => '',
|
||||
'consentAccentInk' => '',
|
||||
'privacyPath' => '',
|
||||
'imprintPath' => '',
|
||||
];
|
||||
|
||||
/** Die Wochentage, wie schema.org sie nennt, mit deutscher Beschriftung für das Formular. */
|
||||
public const DAYS = ['Monday' => 'Montag', 'Tuesday' => 'Dienstag', 'Wednesday' => 'Mittwoch', 'Thursday' => 'Donnerstag', 'Friday' => 'Freitag', 'Saturday' => 'Samstag', 'Sunday' => 'Sonntag'];
|
||||
|
||||
public function __construct(private Connection $db, private MediaLibrary $media)
|
||||
{
|
||||
}
|
||||
|
||||
/**
|
||||
* Die Öffnungszeiten aus dem Formular: je Tag ein Paar aus Öffnen und Schließen; ein Tag ohne
|
||||
* beide Angaben gilt als geschlossen und fehlt in der Liste.
|
||||
*
|
||||
* @return list<array{day: string, opens: string, closes: string}>
|
||||
*/
|
||||
private function openingHours(mixed $input): array
|
||||
{
|
||||
$hours = [];
|
||||
if (is_array($input) && array_is_list($input)) {
|
||||
// Die gespeicherte Form: eine Liste von {day, opens, closes} wird zur Formularform.
|
||||
$map = [];
|
||||
foreach ($input as $row) {
|
||||
if (is_array($row) && isset($row['day'])) {
|
||||
$map[(string) $row['day']] = ['opens' => $row['opens'] ?? '', 'closes' => $row['closes'] ?? ''];
|
||||
}
|
||||
}
|
||||
$input = $map;
|
||||
}
|
||||
foreach (self::DAYS as $day => $label) {
|
||||
$row = is_array($input) && is_array($input[$day] ?? null) ? $input[$day] : [];
|
||||
$opens = trim((string) ($row['opens'] ?? ''));
|
||||
$closes = trim((string) ($row['closes'] ?? ''));
|
||||
if ('' === $opens && '' === $closes) {
|
||||
continue;
|
||||
}
|
||||
foreach ([$opens, $closes] as $time) {
|
||||
if (1 !== preg_match('/^([01]\d|2[0-3]):[0-5]\d$/D', $time)) {
|
||||
throw new InvalidPage(sprintf('Die Öffnungszeit für %s braucht Öffnen und Schließen als Uhrzeit wie 07:30.', $label));
|
||||
}
|
||||
}
|
||||
if ($opens >= $closes) {
|
||||
throw new InvalidPage(sprintf('%s: die Schließzeit muss nach der Öffnungszeit liegen.', $label));
|
||||
}
|
||||
$hours[] = ['day' => $day, 'opens' => $opens, 'closes' => $closes];
|
||||
}
|
||||
|
||||
return $hours;
|
||||
}
|
||||
|
||||
/** Das Einsatzgebiet: ein Ortsname je Zeile, höchstens vierzig. */
|
||||
private function areaServed(string $input): array
|
||||
{
|
||||
$places = [];
|
||||
foreach (preg_split('/[\r\n,]+/', $input) ?: [] as $place) {
|
||||
$place = trim($place);
|
||||
if ('' === $place) {
|
||||
continue;
|
||||
}
|
||||
if (mb_strlen($place) > 80 || 1 === preg_match('/[<>"]/', $place)) {
|
||||
throw new InvalidPage(sprintf('„%s“ ist kein Ortsname.', mb_substr($place, 0, 40)));
|
||||
}
|
||||
$places[] = $place;
|
||||
}
|
||||
if (count($places) > 40) {
|
||||
throw new InvalidPage('Mehr als vierzig Orte im Einsatzgebiet sind nicht vorgesehen.');
|
||||
}
|
||||
|
||||
return array_values(array_unique($places));
|
||||
}
|
||||
|
||||
/**
|
||||
* Remembered for the length of one request.
|
||||
*
|
||||
@@ -133,6 +212,15 @@ final class SiteSettings
|
||||
$values['sameAs'][] = $profile;
|
||||
}
|
||||
$values['sameAs'] = array_slice(array_unique($values['sameAs']), 0, 20);
|
||||
$values['social'] = SocialProfiles::clean($input['social'] ?? []);
|
||||
// Zwei Formen kommen hier an: die des Formulars (hours[Monday][opens], Orte als Text) und
|
||||
// die gespeicherte (openingHours als Liste, areaServed als Liste), wenn ein anderer Bildschirm
|
||||
// die geladenen Werte unverändert zurückgibt. Beide müssen dasselbe ergeben, sonst löscht
|
||||
// das Anlegen der Rechtsseiten die Öffnungszeiten.
|
||||
$values['openingHours'] = $this->openingHours($input['hours'] ?? $input['openingHours'] ?? []);
|
||||
$areaInput = $input['areaServed'] ?? '';
|
||||
$values['areaServed'] = $this->areaServed(is_array($areaInput) ? implode('
|
||||
', array_map('strval', $areaInput)) : (string) $areaInput);
|
||||
$values['localBusiness'] = (bool) ($input['localBusiness'] ?? false);
|
||||
if ($values['localBusiness'] && ('' === $values['street'] || '' === $values['city'])) {
|
||||
throw new InvalidPage('Ein lokales Unternehmen braucht mindestens Straße und Ort.');
|
||||
@@ -223,6 +311,16 @@ final class SiteSettings
|
||||
array_map(static fn (mixed $group): string => (string) $group, (array) ($input['consentGroups'] ?? [])),
|
||||
));
|
||||
$values['consentText'] = mb_substr(trim((string) ($input['consentText'] ?? '')), 0, 600);
|
||||
$values['consentLayout'] = in_array($input['consentLayout'] ?? '', ['karte', 'leiste', 'ecke'], true) ? $input['consentLayout'] : 'karte';
|
||||
$values['consentShape'] = in_array($input['consentShape'] ?? '', ['weich', 'rund', 'eckig'], true) ? $input['consentShape'] : 'weich';
|
||||
$values['consentTitle'] = mb_substr(trim((string) ($input['consentTitle'] ?? '')), 0, 80);
|
||||
foreach (['consentColor', 'consentInk', 'consentAccent', 'consentAccentInk'] as $feld) {
|
||||
$farbe = trim((string) ($input[$feld] ?? ''));
|
||||
if ('' !== $farbe && 1 !== preg_match(StyleSchema::COLOR, $farbe)) {
|
||||
throw new InvalidPage('Die Farben des Einwilligungshinweises werden als #1a2b3c oder als @schlüssel aus der Palette angegeben.');
|
||||
}
|
||||
$values[$feld] = $farbe;
|
||||
}
|
||||
foreach (['privacyPath', 'imprintPath'] as $key) {
|
||||
$path = trim(trim((string) ($input[$key] ?? '')), '/');
|
||||
if ('' !== $path && 1 !== preg_match('#^[a-z0-9]+(?:[-/][a-z0-9]+)*$#D', $path)) {
|
||||
@@ -353,8 +451,25 @@ final class SiteSettings
|
||||
'addressCountry' => $settings['country'],
|
||||
], static fn (string $value): bool => '' !== $value);
|
||||
}
|
||||
if ([] !== $settings['sameAs']) {
|
||||
$data['sameAs'] = $settings['sameAs'];
|
||||
// Die sozialen Profile sind dieselbe Aussage wie sameAs - "dieses Unternehmen ist auch
|
||||
// das hier" -, deshalb stehen sie ohne zweite Pflege mit in der Liste.
|
||||
$sameAs = array_values(array_unique([...$settings['sameAs'], ...array_values($settings['social'] ?? [])]));
|
||||
if ([] !== $sameAs) {
|
||||
$data['sameAs'] = $sameAs;
|
||||
}
|
||||
// Tage mit denselben Zeiten werden zu einer Angabe: Mo-Fr 07:30-17:00 ist eine Zeile,
|
||||
// nicht fünf. Das ist die Form, die Google für openingHoursSpecification dokumentiert.
|
||||
$gruppen = [];
|
||||
foreach ($settings['openingHours'] ?? [] as $eintrag) {
|
||||
$schluessel = $eintrag['opens'].'-'.$eintrag['closes'];
|
||||
$gruppen[$schluessel] ??= ['@type' => 'OpeningHoursSpecification', 'dayOfWeek' => [], 'opens' => $eintrag['opens'], 'closes' => $eintrag['closes']];
|
||||
$gruppen[$schluessel]['dayOfWeek'][] = $eintrag['day'];
|
||||
}
|
||||
if ([] !== $gruppen) {
|
||||
$data['openingHoursSpecification'] = array_values($gruppen);
|
||||
}
|
||||
if ([] !== ($settings['areaServed'] ?? [])) {
|
||||
$data['areaServed'] = $settings['areaServed'];
|
||||
}
|
||||
|
||||
return $data;
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
<?php
|
||||
|
||||
namespace App\Content;
|
||||
|
||||
use App\Domain\InvalidPage;
|
||||
|
||||
/**
|
||||
* Die sozialen Profile einer Website.
|
||||
*
|
||||
* Gepflegt werden sie einmal, in den Einstellungen: je Netzwerk eine Adresse. Der Baustein
|
||||
* `social` zeigt sie dann an beliebig vielen Stellen – im Kopf, im Fuß, in einer Kontaktsektion –
|
||||
* und bestimmt dort nur noch Größe, Form und Beschriftung. Eine Adresse, die sich ändert, ändert
|
||||
* sich damit überall auf einmal; das ist der Unterschied zu von Hand gesetzten Symbol-Links.
|
||||
*
|
||||
* Die Liste der Netzwerke ist fest, weil jedes ein gezeichnetes Symbol braucht (siehe
|
||||
* templates/blocks/social-icon.html.twig). Ein Netzwerk, das hier fehlt, hat kein Symbol – ein
|
||||
* freies Feld würde also nur eine leere Fläche erzeugen.
|
||||
*/
|
||||
final class SocialProfiles
|
||||
{
|
||||
/** Schlüssel → Name, in der Reihenfolge, in der die Symbole erscheinen. */
|
||||
public const NETWORKS = [
|
||||
'facebook' => 'Facebook',
|
||||
'instagram' => 'Instagram',
|
||||
'linkedin' => 'LinkedIn',
|
||||
'youtube' => 'YouTube',
|
||||
'tiktok' => 'TikTok',
|
||||
'x' => 'X',
|
||||
'threads' => 'Threads',
|
||||
'pinterest' => 'Pinterest',
|
||||
'xing' => 'Xing',
|
||||
'whatsapp' => 'WhatsApp',
|
||||
'google' => 'Google-Unternehmensprofil',
|
||||
];
|
||||
|
||||
/** Beispieladressen für die Eingabefelder. */
|
||||
public const PLACEHOLDERS = [
|
||||
'facebook' => 'https://www.facebook.com/…',
|
||||
'instagram' => 'https://www.instagram.com/…',
|
||||
'linkedin' => 'https://www.linkedin.com/company/…',
|
||||
'youtube' => 'https://www.youtube.com/@…',
|
||||
'tiktok' => 'https://www.tiktok.com/@…',
|
||||
'x' => 'https://x.com/…',
|
||||
'threads' => 'https://www.threads.net/@…',
|
||||
'pinterest' => 'https://www.pinterest.de/…',
|
||||
'xing' => 'https://www.xing.com/pages/…',
|
||||
'whatsapp' => 'https://wa.me/49…',
|
||||
'google' => 'https://g.page/…',
|
||||
];
|
||||
|
||||
public const SHAPES = ['plain' => 'Nur Symbol', 'circle' => 'Runde Fläche', 'square' => 'Eckige Fläche'];
|
||||
public const LAYOUTS = ['horizontal' => 'Nebeneinander', 'vertical' => 'Untereinander'];
|
||||
|
||||
/**
|
||||
* Prüft die Eingabe der Einstellungen und gibt nur gefüllte, gültige Adressen zurück.
|
||||
*
|
||||
* @param mixed $input das Feld `social` des Formulars: Netzwerk → Adresse
|
||||
*
|
||||
* @return array<string, string>
|
||||
*
|
||||
* @throws InvalidPage
|
||||
*/
|
||||
public static function clean(mixed $input): array
|
||||
{
|
||||
$profiles = [];
|
||||
foreach (self::NETWORKS as $key => $label) {
|
||||
$url = trim((string) (is_array($input) ? ($input[$key] ?? '') : ''));
|
||||
if ('' === $url) {
|
||||
continue;
|
||||
}
|
||||
if (strlen($url) > 400 || !str_starts_with($url, 'https://') || false === filter_var($url, FILTER_VALIDATE_URL) || 1 === preg_match('/[\s"<>\\\\]/', $url)) {
|
||||
throw new InvalidPage(sprintf('Die Adresse für %s muss mit https:// beginnen und eine gültige Adresse sein.', $label));
|
||||
}
|
||||
$profiles[$key] = $url;
|
||||
}
|
||||
|
||||
return $profiles;
|
||||
}
|
||||
}
|
||||
@@ -185,6 +185,17 @@ final class StyleCompiler
|
||||
if ('' !== $images) {
|
||||
$rules .= sprintf('#%s img{%s}', $id, $images);
|
||||
}
|
||||
// Slider colours: on the slider for the script-free markers, and on the control bar
|
||||
// the script places right after it.
|
||||
$controls = $this->declarations($values, 'controls', $device);
|
||||
if ('' !== $controls) {
|
||||
$rules .= sprintf('#%s,#%s + .slider-controls{%s}', $id, $id, $controls);
|
||||
}
|
||||
// Der Menü-Knopf: die Farben liegen am Block, gelten aber dem aufklappbaren Knopf.
|
||||
$burger = $this->declarations($values, 'burger', $device);
|
||||
if ('' !== $burger) {
|
||||
$rules .= sprintf('#%s .menu-burger>summary{%s}', $id, $burger);
|
||||
}
|
||||
$hover = is_array($values['hover'] ?? null) ? $this->declarations($values['hover'], 'self', $device) : '';
|
||||
if ('' !== $hover) {
|
||||
$rules .= sprintf('#%s:hover,#%s:focus-within{%s}', $id, $id, $hover);
|
||||
|
||||
@@ -204,6 +204,20 @@ final class StyleSchema
|
||||
'auto' => 'Automatisch', 'pointer' => 'Hand', 'default' => 'Pfeil', 'not-allowed' => 'Gesperrt', 'grab' => 'Greifen', 'zoom-in' => 'Lupe',
|
||||
]],
|
||||
'transition' => ['group' => 'effect', 'type' => 'number', 'css' => null, 'label' => 'Übergangsdauer (ms)', 'min' => 0, 'max' => 2000, 'step' => 25],
|
||||
// The slider controls are built by the script next to the slider, so their colours
|
||||
// travel as custom properties onto the slider and its controls (target "controls").
|
||||
// Der Menü-Knopf ist ein eigener Knopf im Menüblock, kein eigener Baustein: seine
|
||||
// Farben liegen deshalb auf dem Block und wirken auf das summary-Element darin.
|
||||
'burgerColor' => ['group' => 'menu', 'type' => 'color', 'css' => 'color', 'label' => 'Menü-Knopf: Schrift und Striche', 'target' => 'burger'],
|
||||
'burgerBackgroundColor' => ['group' => 'menu', 'type' => 'color', 'css' => 'background-color', 'label' => 'Menü-Knopf: Fläche', 'target' => 'burger'],
|
||||
'burgerBorderColor' => ['group' => 'menu', 'type' => 'color', 'css' => 'border-color', 'label' => 'Menü-Knopf: Rahmen', 'target' => 'burger'],
|
||||
'burgerBorderWidth' => ['group' => 'menu', 'type' => 'length', 'css' => 'border-width', 'label' => 'Menü-Knopf: Rahmenstärke', 'target' => 'burger'],
|
||||
'burgerBorderRadius' => ['group' => 'menu', 'type' => 'length', 'css' => 'border-radius', 'label' => 'Menü-Knopf: Ecken', 'target' => 'burger'],
|
||||
'burgerFontSize' => ['group' => 'menu', 'type' => 'length', 'css' => 'font-size', 'label' => 'Menü-Knopf: Schriftgröße', 'target' => 'burger'],
|
||||
'sliderDotColor' => ['group' => 'slider', 'type' => 'color', 'css' => '--slider-dot', 'label' => 'Punkte', 'target' => 'controls'],
|
||||
'sliderDotActiveColor' => ['group' => 'slider', 'type' => 'color', 'css' => '--slider-dot-active', 'label' => 'Aktiver Punkt', 'target' => 'controls'],
|
||||
'sliderControlColor' => ['group' => 'slider', 'type' => 'color', 'css' => '--slider-ink', 'label' => 'Pfeile und Zähler', 'target' => 'controls'],
|
||||
'sliderControlBackground' => ['group' => 'slider', 'type' => 'color', 'css' => '--slider-bg', 'label' => 'Hintergrund der Knöpfe', 'target' => 'controls'],
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
+23
-15
@@ -269,6 +269,29 @@ final class Theme
|
||||
}
|
||||
|
||||
/** The stylesheet every page carries: palette variables, font variables and base typography. */
|
||||
/**
|
||||
* Eine Farbe aus den Einstellungen als CSS-Wert: `@schlüssel` wird zur Palettenvariablen,
|
||||
* ein Hexwert bleibt, und leer heißt "nicht gesetzt" - dann gilt der Standard des Stylesheets.
|
||||
* Ein Schlüssel, den die Palette nicht kennt, wird ebenfalls zu null: lieber der Standard als
|
||||
* eine Variable, die auf nichts zeigt.
|
||||
*/
|
||||
public static function cssColor(string $value, array $theme): ?string
|
||||
{
|
||||
if ('' === $value) {
|
||||
return null;
|
||||
}
|
||||
if (!str_starts_with($value, '@')) {
|
||||
return $value;
|
||||
}
|
||||
foreach ($theme['colors'] as $color) {
|
||||
if ($color['key'] === substr($value, 1)) {
|
||||
return sprintf('var(--k-%s)', $color['key']);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
public function css(array $theme): string
|
||||
{
|
||||
$variables = [];
|
||||
@@ -329,19 +352,4 @@ final class Theme
|
||||
).ButtonDesign::css($theme['buttons'] ?? ButtonDesign::defaults($base));
|
||||
}
|
||||
|
||||
/**
|
||||
* The Google Fonts stylesheet for every family that comes from there, or null when none does.
|
||||
* Chosen by the user; it means one request to a third party per page view.
|
||||
*/
|
||||
public function googleFontsUrl(array $theme): ?string
|
||||
{
|
||||
$families = [];
|
||||
foreach ($theme['fonts'] as $font) {
|
||||
if ('google' === $font['source'] && '' !== $font['family']) {
|
||||
$families[] = sprintf('family=%s:wght@%s', str_replace(' ', '+', $font['family']), implode(';', $font['weights']));
|
||||
}
|
||||
}
|
||||
|
||||
return [] === $families ? null : 'https://fonts.googleapis.com/css2?'.implode('&', array_unique($families)).'&display=swap';
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,7 @@ namespace App\Controller;
|
||||
|
||||
use App\Content\Consent;
|
||||
use App\Content\SiteSettings;
|
||||
use App\Content\Theme;
|
||||
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
|
||||
use Symfony\Component\HttpFoundation\Request;
|
||||
use Symfony\Component\HttpFoundation\Response;
|
||||
@@ -19,7 +20,7 @@ use Symfony\Component\Routing\Attribute\Route;
|
||||
*/
|
||||
final class ConsentController extends AbstractController
|
||||
{
|
||||
public function __construct(private Consent $consent, private SiteSettings $settings)
|
||||
public function __construct(private Consent $consent, private SiteSettings $settings, private Theme $theme)
|
||||
{
|
||||
}
|
||||
|
||||
@@ -46,16 +47,21 @@ final class ConsentController extends AbstractController
|
||||
}
|
||||
// Deliberately without header and footer: this is a page about a decision, not a page of
|
||||
// the website, and it must work even when an area is broken.
|
||||
// Palette und Hinweisfarben wie auf den Seiten, damit die Entscheidung hier aussieht wie
|
||||
// die Frage dort. Das Stylesheet ist ueber seinen Hash erlaubt, nichts weiter.
|
||||
$theme = $this->theme->load();
|
||||
$styles = $this->theme->css($theme).$this->consent->styles($theme);
|
||||
$response = $this->render('consent.html.twig', [
|
||||
'consent' => $this->consent->state($request),
|
||||
'settings' => $this->settings->load(),
|
||||
'pageStyles' => $styles,
|
||||
]);
|
||||
$response->headers->set('Cache-Control', 'no-store');
|
||||
$response->headers->set('X-Robots-Tag', 'noindex, follow');
|
||||
$response->headers->set('X-Content-Type-Options', 'nosniff');
|
||||
$response->headers->set('Referrer-Policy', 'strict-origin-when-cross-origin');
|
||||
// The page carries no embeds and no own styles, so it keeps the strictest policy.
|
||||
$response->headers->set('Content-Security-Policy', "default-src 'self'; script-src 'none'; style-src 'self'; img-src 'self' https: data:; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'");
|
||||
// The page carries no embeds, so it keeps the strictest policy - plus the one hashed style block.
|
||||
$response->headers->set('Content-Security-Policy', sprintf("default-src 'self'; script-src 'none'; style-src 'self' 'sha256-%s'; img-src 'self' https: data:; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'", base64_encode(hash('sha256', $styles, true))));
|
||||
|
||||
return $response;
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ namespace App\Controller;
|
||||
use App\Content\CustomCode;
|
||||
use App\Content\DemoContent;
|
||||
use App\Content\DocumentValidator;
|
||||
use App\Content\FontLibrary;
|
||||
use App\Content\MenuRepository;
|
||||
use App\Content\PageRepository;
|
||||
use App\Content\PartialRepository;
|
||||
@@ -28,7 +29,7 @@ use Symfony\Component\Security\Csrf\CsrfTokenManagerInterface;
|
||||
#[Route('/%kant.admin_path%')]
|
||||
final class EditorController extends AbstractController
|
||||
{
|
||||
public function __construct(private PageRepository $pages, private DocumentValidator $validator, private MenuRepository $menus, private PostRepository $posts, private Theme $theme, private StyleCompiler $styles, private RedirectRepository $redirects, private PartialRepository $partials, private CustomCode $code, private CsrfTokenManagerInterface $csrf, private RequestStack $requests)
|
||||
public function __construct(private PageRepository $pages, private DocumentValidator $validator, private MenuRepository $menus, private PostRepository $posts, private Theme $theme, private StyleCompiler $styles, private RedirectRepository $redirects, private PartialRepository $partials, private CustomCode $code, private FontLibrary $fonts, private CsrfTokenManagerInterface $csrf, private RequestStack $requests)
|
||||
{
|
||||
}
|
||||
|
||||
@@ -435,7 +436,7 @@ final class EditorController extends AbstractController
|
||||
$navigation[$slot] = $this->menus->resolve($menu['items'], (string) $page['path']);
|
||||
}
|
||||
|
||||
return $this->render('page.html.twig', ['page' => [...$page, 'document' => $document], 'canonical' => '', 'editing' => true, 'navigation' => $navigation, 'areas' => $areas, 'sections' => $sections, 'needsTabs' => false, 'pageStyles' => $this->theme->css($theme).$this->styles->compileDocument($document), 'googleFonts' => $this->theme->googleFontsUrl($theme)]);
|
||||
return $this->render('page.html.twig', ['page' => [...$page, 'document' => $document], 'canonical' => '', 'editing' => true, 'navigation' => $navigation, 'areas' => $areas, 'sections' => $sections, 'needsTabs' => false, 'pageStyles' => $this->theme->css($theme).$this->styles->compileDocument($document), 'localFonts' => $this->fonts->hasLocal($theme) ? $this->fonts->preload($theme) : []]);
|
||||
}
|
||||
if (!isset($body['expectedVersion']) || !is_int($body['expectedVersion']) || $body['expectedVersion'] < 0) {
|
||||
throw new \InvalidArgumentException();
|
||||
|
||||
@@ -70,8 +70,6 @@ final class PageController extends AbstractController
|
||||
private function renderPage(Request $request, array $page, string $path, int $status = 200): Response
|
||||
{
|
||||
$styles = '';
|
||||
$googleFonts = null;
|
||||
$localFonts = [];
|
||||
// The page decides which header and footer it gets - including none.
|
||||
$areas = $this->areas($status >= 400 ? null : $page);
|
||||
$theme = $this->theme->load();
|
||||
@@ -82,18 +80,17 @@ final class PageController extends AbstractController
|
||||
$needsMotion = (bool) array_filter($documents, fn (array $doc): bool => $this->hasEntrance($doc));
|
||||
// Only the header changes with the scroll position; a scrolled value anywhere in it asks
|
||||
// for the small script that marks the page as scrolled.
|
||||
$needsScrolled = isset($areas['header']) && $this->hasScrolled($areas['header']);
|
||||
$styles = $this->theme->css($theme).$this->scrollTopStyles($this->settings->load(), $theme).$this->styles->compileDocument($page['document']).$this->code->compileDocument($page['document']);
|
||||
// Den Nach-oben-Knopf blendet dasselbe Skript ein; ohne es bleibt er dauerhaft sichtbar.
|
||||
$needsScrolled = (isset($areas['header']) && $this->hasScrolled($areas['header'])) || (bool) ($this->settings->load()['scrollTop'] ?? false);
|
||||
$styles = $this->theme->css($theme).$this->scrollTopStyles($this->settings->load(), $theme).$this->consent->styles($theme).$this->styles->compileDocument($page['document']).$this->code->compileDocument($page['document']);
|
||||
foreach ([...array_values($areas), ...array_values($sections)] as $extra) {
|
||||
$styles .= $this->styles->compileDocument($extra).$this->code->compileDocument($extra);
|
||||
}
|
||||
// Liegen die Schriften auf dem eigenen Server, wird nichts von Google geholt - weder
|
||||
// die Datei noch die IP-Adresse des Besuchers.
|
||||
if ($this->fonts->hasLocal($theme)) {
|
||||
$localFonts = $this->fonts->preload($theme);
|
||||
} else {
|
||||
$googleFonts = $this->theme->googleFontsUrl($theme);
|
||||
}
|
||||
// Schriften kommen ausschliesslich vom eigenen Server. Fehlen die Dateien, zeigt die
|
||||
// Website die Ersatzschrift des Themes - nie ein Stylesheet von fonts.googleapis.com:
|
||||
// das gaebe die IP-Adresse jedes Besuchers an einen Dritten weiter und haengt den
|
||||
// Seitenaufbau an zwei fremde Verbindungen nacheinander.
|
||||
$localFonts = $this->fonts->hasLocal($theme) ? $this->fonts->preload($theme) : [];
|
||||
$response = $this->render('page.html.twig', [
|
||||
'page' => $page,
|
||||
'canonical' => $status >= 400 ? null : rtrim($this->siteOrigin, '/').$this->settings->publicPath($path, $this->settings->homePath()),
|
||||
@@ -132,7 +129,6 @@ final class PageController extends AbstractController
|
||||
// ist gar kein Bild, sondern der Hintergrund des ersten Abschnitts.
|
||||
'heroBackground' => $this->heroBackground($areas['header'] ?? null, $page['document']),
|
||||
'pageStyles' => $styles,
|
||||
'googleFonts' => $googleFonts,
|
||||
'localFonts' => $localFonts,
|
||||
'styleBundle' => $this->bundle->url([] !== $localFonts),
|
||||
], new Response(status: $status));
|
||||
@@ -150,7 +146,7 @@ final class PageController extends AbstractController
|
||||
$response->headers->set('X-Robots-Tag', 'noindex, follow');
|
||||
}
|
||||
|
||||
return $this->shell($response, $wantsScript, $styles, null !== $googleFonts, $frames);
|
||||
return $this->shell($response, $wantsScript, $styles, $frames);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -166,18 +162,15 @@ final class PageController extends AbstractController
|
||||
* Nothing is added to the policy for an embed still waiting
|
||||
* for consent.
|
||||
*/
|
||||
private function shell(Response $response, bool $allowScript = false, string $styles = '', bool $googleFonts = false, array $frameHosts = []): Response
|
||||
private function shell(Response $response, bool $allowScript = false, string $styles = '', array $frameHosts = []): Response
|
||||
{
|
||||
$styleSources = ["'self'"];
|
||||
if ('' !== $styles) {
|
||||
$styleSources[] = sprintf("'sha256-%s'", base64_encode(hash('sha256', $styles, true)));
|
||||
}
|
||||
// Stylesheets und Schriftdateien kommen nur von hier. Kein fonts.googleapis.com, kein
|
||||
// fonts.gstatic.com - die Regel steht in der Kopfzeile und nicht nur in der Vorlage.
|
||||
$fontSources = ["'self'"];
|
||||
if ($googleFonts) {
|
||||
// Chosen deliberately: the stylesheet comes from Google and the files from its CDN.
|
||||
$styleSources[] = 'https://fonts.googleapis.com';
|
||||
$fontSources[] = 'https://fonts.gstatic.com';
|
||||
}
|
||||
$response->headers->set('Cache-Control', 'no-store');
|
||||
$response->headers->set('X-Content-Type-Options', 'nosniff');
|
||||
$response->headers->set('Referrer-Policy', 'strict-origin-when-cross-origin');
|
||||
@@ -256,6 +249,29 @@ final class PageController extends AbstractController
|
||||
*
|
||||
* @return list<array{name: string, href: string}>
|
||||
*/
|
||||
/** @return list<array<string, mixed>> */
|
||||
private function faqEntries(array $blocks): array
|
||||
{
|
||||
$entries = [];
|
||||
foreach ($blocks as $block) {
|
||||
if ('accordion' === ($block['type'] ?? null) && true === ($block['props']['faq'] ?? false)) {
|
||||
foreach ($block['children'] ?? [] as $item) {
|
||||
$texts = array_filter($item['children'] ?? [], static fn (array $child): bool => 'text' === ($child['type'] ?? null));
|
||||
$answer = trim(implode("\n\n", array_map(
|
||||
static fn (array $child): string => trim(html_entity_decode(strip_tags(preg_replace('#<br\s*/?>|</p>#i', "\n", (string) ($child['props']['text'] ?? '')) ?? ''), ENT_QUOTES | ENT_HTML5, 'UTF-8')),
|
||||
$texts,
|
||||
)));
|
||||
if ('' !== $answer && '' !== trim((string) ($item['props']['title'] ?? ''))) {
|
||||
$entries[] = ['@type' => 'Question', 'name' => $item['props']['title'], 'acceptedAnswer' => ['@type' => 'Answer', 'text' => $answer]];
|
||||
}
|
||||
}
|
||||
}
|
||||
$entries = [...$entries, ...$this->faqEntries($block['children'] ?? [])];
|
||||
}
|
||||
|
||||
return $entries;
|
||||
}
|
||||
|
||||
private function breadcrumbs(array $page): array
|
||||
{
|
||||
if ($page['path'] === $this->settings->homePath()) {
|
||||
@@ -292,21 +308,6 @@ final class PageController extends AbstractController
|
||||
if (!($settings['scrollTop'] ?? false)) {
|
||||
return '';
|
||||
}
|
||||
$farbe = static function (string $wert) use ($theme): ?string {
|
||||
if ('' === $wert) {
|
||||
return null;
|
||||
}
|
||||
if (!str_starts_with($wert, '@')) {
|
||||
return $wert;
|
||||
}
|
||||
foreach ($theme['colors'] as $eintrag) {
|
||||
if ($eintrag['key'] === substr($wert, 1)) {
|
||||
return sprintf('var(--k-%s)', $eintrag['key']);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
$werte = [sprintf('--kant-top-size:%dpx', (int) ($settings['scrollTopSize'] ?? 48))];
|
||||
$werte[] = sprintf('--kant-top-radius:%s', match ($settings['scrollTopShape'] ?? 'rund') {
|
||||
'eckig' => '0',
|
||||
@@ -315,7 +316,7 @@ final class PageController extends AbstractController
|
||||
});
|
||||
$werte[] = sprintf('--kant-top-after:%dpx', (int) ($settings['scrollTopAfter'] ?? 400));
|
||||
foreach (['scrollTopColor' => '--kant-top-bg', 'scrollTopInk' => '--kant-top-ink'] as $feld => $variable) {
|
||||
$wert = $farbe((string) ($settings[$feld] ?? ''));
|
||||
$wert = Theme::cssColor((string) ($settings[$feld] ?? ''), $theme);
|
||||
if (null !== $wert) {
|
||||
$werte[] = $variable.':'.$wert;
|
||||
}
|
||||
@@ -381,6 +382,12 @@ final class PageController extends AbstractController
|
||||
}
|
||||
$blocks[] = $article;
|
||||
}
|
||||
// Ein als FAQ gekennzeichnetes Akkordeon wird zur FAQPage: die Titel sind die Fragen, die
|
||||
// Textbausteine im Eintrag die Antwort. Nur was auf der Seite steht, steht auch hier.
|
||||
$fragen = $this->faqEntries($page['document']['blocks'] ?? []);
|
||||
if ([] !== $fragen) {
|
||||
$blocks[] = ['@context' => 'https://schema.org', '@type' => 'FAQPage', 'mainEntity' => $fragen];
|
||||
}
|
||||
$trail = $this->breadcrumbs($page);
|
||||
if (count($trail) > 1) {
|
||||
$blocks[] = [
|
||||
@@ -492,8 +499,13 @@ final class PageController extends AbstractController
|
||||
$areas = $this->areas();
|
||||
$frames = $this->frameHosts($request, ...array_values($areas));
|
||||
$needsScrolled = isset($areas['header']) && $this->hasScrolled($areas['header']);
|
||||
// Palette und Hinweisfarben wie auf jeder Seite - das Archiv trug bisher weder das eine
|
||||
// noch das andere und zeigte den Einwilligungshinweis in den Standardfarben.
|
||||
$theme = $this->theme->load();
|
||||
$styles = $this->theme->css($theme).$this->consent->styles($theme);
|
||||
|
||||
return $this->shell($this->render('archive.html.twig', [
|
||||
'pageStyles' => $styles,
|
||||
'areas' => $areas,
|
||||
'needsScrolled' => $needsScrolled,
|
||||
'navigation' => $this->navigation(''),
|
||||
@@ -503,7 +515,7 @@ final class PageController extends AbstractController
|
||||
'base' => $base,
|
||||
'canonical' => rtrim($this->siteOrigin, '/').$base.($result['page'] > 1 ? '?seite='.$result['page'] : ''),
|
||||
'navigation' => $this->navigation(''),
|
||||
]), $needsScrolled, frameHosts: $frames);
|
||||
]), $needsScrolled, $styles, $frames);
|
||||
}
|
||||
|
||||
#[Route('/feed.xml', name: 'feed', methods: ['GET'])]
|
||||
|
||||
@@ -4,6 +4,7 @@ namespace App\Controller;
|
||||
|
||||
use App\Content\CustomCode;
|
||||
use App\Content\DocumentValidator;
|
||||
use App\Content\FontLibrary;
|
||||
use App\Content\MenuRepository;
|
||||
use App\Content\PartialRepository;
|
||||
use App\Content\StyleCompiler;
|
||||
@@ -35,6 +36,7 @@ final class PartialController extends AbstractController
|
||||
private Theme $theme,
|
||||
private StyleCompiler $styles,
|
||||
private CustomCode $code,
|
||||
private FontLibrary $fonts,
|
||||
private CsrfTokenManagerInterface $csrf,
|
||||
) {
|
||||
}
|
||||
@@ -175,7 +177,7 @@ final class PartialController extends AbstractController
|
||||
'needsTabs' => false,
|
||||
'forms' => [],
|
||||
'pageStyles' => $this->theme->css($theme).$this->styles->compileDocument($document),
|
||||
'googleFonts' => $this->theme->googleFontsUrl($theme),
|
||||
'localFonts' => $this->fonts->hasLocal($theme) ? $this->fonts->preload($theme) : [],
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ use App\Content\NotFoundPage;
|
||||
use App\Content\PageRepository;
|
||||
use App\Content\RedirectRepository;
|
||||
use App\Content\SiteSettings;
|
||||
use App\Content\SocialProfiles;
|
||||
use App\Content\Theme;
|
||||
use App\Domain\InvalidPage;
|
||||
use App\Domain\StaleWrite;
|
||||
@@ -47,6 +48,9 @@ final class SettingsController extends AbstractController
|
||||
'images' => $this->media->page(1, false, 96)['items'],
|
||||
// Fuer die Farbfelder: dieselbe Palette, die auch der Editor anbietet.
|
||||
'palette' => $this->theme->load()['colors'],
|
||||
'socialNetworks' => SocialProfiles::NETWORKS,
|
||||
'weekdays' => SiteSettings::DAYS,
|
||||
'socialPlaceholders' => SocialProfiles::PLACEHOLDERS,
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@@ -51,12 +51,12 @@ final class AdminHeadersSubscriber implements EventSubscriberInterface
|
||||
$headers->set('X-Content-Type-Options', 'nosniff');
|
||||
$headers->set('Referrer-Policy', 'same-origin');
|
||||
$headers->set('Permissions-Policy', 'accelerometer=(), camera=(), display-capture=(), geolocation=(), gyroscope=(), microphone=(), payment=(), usb=()');
|
||||
// The preview must show the same typeface as the published page, so the font hosts are
|
||||
// allowed here as well. Everything else stays as narrow as on the public side.
|
||||
// Die Vorschau zeigt dieselbe Schrift wie die veroeffentlichte Seite - und die liegt,
|
||||
// genau wie dort, auf diesem Server. Fremde Schrifthosts braucht sie nicht.
|
||||
// The nonce only ever adds the one script it names; 'self' keeps applying to everything
|
||||
// else, so nothing is loosened by it.
|
||||
$nonce = $event->getRequest()->attributes->get('csp_nonce');
|
||||
$script = is_string($nonce) && '' !== $nonce ? sprintf("'self' 'nonce-%s'", $nonce) : "'self'";
|
||||
$headers->set('Content-Security-Policy', "default-src 'self'; script-src {$script}; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https:; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'");
|
||||
$headers->set('Content-Security-Policy', "default-src 'self'; script-src {$script}; style-src 'self'; font-src 'self'; img-src 'self' https:; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'");
|
||||
}
|
||||
}
|
||||
@@ -2,25 +2,71 @@
|
||||
|
||||
namespace App\Twig;
|
||||
|
||||
use App\Content\FontLibrary;
|
||||
use App\Content\Theme;
|
||||
use App\Ops\Updater;
|
||||
use Twig\Extension\AbstractExtension;
|
||||
use Twig\TwigFunction;
|
||||
|
||||
/**
|
||||
* The running version, for the administration shell.
|
||||
* Fassung und offene Hinweise für die Verwaltungshülle.
|
||||
*
|
||||
* A function rather than a global, so the templates get exactly this one read-only answer and not
|
||||
* a whole updater with an update() method on it.
|
||||
* Funktionen statt Variablen, damit die Vorlagen genau diese Antworten bekommen und nicht einen
|
||||
* ganzen Updater mit einem update() daran.
|
||||
*/
|
||||
final class VersionExtension extends AbstractExtension
|
||||
{
|
||||
public function __construct(private Updater $updater, private \Doctrine\DBAL\Connection $db)
|
||||
public function __construct(private Updater $updater, private \Doctrine\DBAL\Connection $db, private FontLibrary $fonts, private Theme $theme)
|
||||
{
|
||||
}
|
||||
|
||||
public function getFunctions(): array
|
||||
{
|
||||
return [new TwigFunction('kant_version', $this->updater->version(...)), new TwigFunction('kant_update_version', $this->available(...))];
|
||||
return [
|
||||
new TwigFunction('kant_version', $this->updater->version(...)),
|
||||
new TwigFunction('kant_update_version', $this->available(...)),
|
||||
new TwigFunction('kant_admin_notices', $this->notices(...)),
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Was auf jedem Verwaltungsbildschirm oben stehen soll, weil es einen Knopf braucht.
|
||||
*
|
||||
* Keine Zeile davon geht ins Netz: die verfügbare Fassung steht im Protokoll der täglichen
|
||||
* Aufgabe, die fehlenden Schriften stehen als Dateien im Ordner. Ein Hinweis, der bei jedem
|
||||
* Klick eine fremde Verbindung öffnet, wäre die Sorte Hinweis, die man abschaltet.
|
||||
*
|
||||
* @return list<array{kind: string, text: string, route: string, action: string, admin: bool}>
|
||||
*/
|
||||
public function notices(): array
|
||||
{
|
||||
$notices = [];
|
||||
if (null !== $version = $this->available()) {
|
||||
$notices[] = [
|
||||
'kind' => 'update',
|
||||
'text' => sprintf('Fassung %s ist verfügbar; installiert ist %s.', $version, $this->updater->version()),
|
||||
'route' => 'admin_system',
|
||||
'action' => 'Jetzt aktualisieren',
|
||||
'admin' => true,
|
||||
];
|
||||
}
|
||||
try {
|
||||
$missing = $this->fonts->missing($this->theme->load());
|
||||
} catch (\Throwable) {
|
||||
// Eine Installation, die noch auf ihre Migrationen wartet, hat noch kein Theme.
|
||||
$missing = [];
|
||||
}
|
||||
if ([] !== $missing) {
|
||||
$notices[] = [
|
||||
'kind' => 'fonts',
|
||||
'text' => sprintf('Schriftdateien fehlen auf diesem Server: %s. Bis dahin zeigt die Website die Ersatzschrift.', implode(', ', $missing)),
|
||||
'route' => 'admin_theme',
|
||||
'action' => 'Schriften holen',
|
||||
'admin' => false,
|
||||
];
|
||||
}
|
||||
|
||||
return $notices;
|
||||
}
|
||||
|
||||
public function available(): ?string
|
||||
|
||||
@@ -95,7 +95,35 @@
|
||||
<input id="description" name="description" maxlength="300" value="{{ settings.description }}">
|
||||
<label for="sameAs">Profile</label>
|
||||
<textarea id="sameAs" name="sameAs" rows="3" placeholder="https://www.linkedin.com/company/…">{{ settings.sameAs|join('\n') }}</textarea>
|
||||
<p class="field-help">Eine HTTPS-Adresse je Zeile, höchstens zwanzig.</p>
|
||||
<p class="field-help">Eine HTTPS-Adresse je Zeile, höchstens zwanzig. Die sozialen Profile unten stehen automatisch mit in den strukturierten Daten.</p>
|
||||
<fieldset class="field-set">
|
||||
<legend>Soziale Profile</legend>
|
||||
<p class="field-help">Einmal hier eintragen, dann mit dem Element „Soziale Profile“ an jeder Stelle einsetzen – im Kopf, im Fuß, in einer Kontaktsektion. Größe, Form und Farbe bestimmt das Element. Leere Felder erscheinen nicht.</p>
|
||||
<div class="fields">
|
||||
{% for key, name in socialNetworks %}
|
||||
<div>
|
||||
<label for="social-{{ key }}">{{ name }}</label>
|
||||
<input id="social-{{ key }}" name="social[{{ key }}]" type="url" maxlength="400" value="{{ settings.social[key]|default('') }}" placeholder="{{ socialPlaceholders[key] }}">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="field-set">
|
||||
<legend>Öffnungszeiten</legend>
|
||||
<p class="field-help">Als Uhrzeit wie 07:30. Ein Tag ohne Angabe gilt als geschlossen. Erscheint als <code>openingHoursSpecification</code> in den strukturierten Daten – der Text auf der Website ist davon unabhängig.</p>
|
||||
<div class="fields">
|
||||
{% for day, label in weekdays %}
|
||||
{% set row = (settings.openingHours|filter(h => h.day == day)|first) ?: {opens: '', closes: ''} %}
|
||||
<div>
|
||||
<label for="hours-{{ day }}-opens">{{ label }}</label>
|
||||
<div class="hours-row"><input id="hours-{{ day }}-opens" name="hours[{{ day }}][opens]" type="time" value="{{ row.opens }}" aria-label="{{ label }}, öffnet"> <span aria-hidden="true">–</span> <input id="hours-{{ day }}-closes" name="hours[{{ day }}][closes]" type="time" value="{{ row.closes }}" aria-label="{{ label }}, schließt"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</fieldset>
|
||||
<label for="areaServed">Einsatzgebiet</label>
|
||||
<textarea id="areaServed" name="areaServed" rows="3" placeholder="Baden-Baden Rastatt Karlsruhe">{{ settings.areaServed|join('\n') }}</textarea>
|
||||
<p class="field-help">Ein Ort je Zeile, höchstens vierzig. Erscheint als <code>areaServed</code> in den strukturierten Daten.</p>
|
||||
<label class="check-label" for="localBusiness"><input id="localBusiness" name="localBusiness" type="checkbox" value="1"{{ settings.localBusiness ? ' checked' : '' }}> Als lokales Unternehmen auszeichnen</label>
|
||||
<p class="field-help">Braucht mindestens Straße und Ort. Sinnvoll bei einem Standort mit Kundenverkehr.</p>
|
||||
<label class="check-label" for="llmsTxt"><input id="llmsTxt" name="llmsTxt" type="checkbox" value="1"{{ settings.llmsTxt ? ' checked' : '' }}> <code>llms.txt</code> ausliefern</label>
|
||||
@@ -186,6 +214,50 @@
|
||||
<label for="consentText">Text im Hinweis</label>
|
||||
<textarea id="consentText" name="consentText" rows="3" maxlength="600">{{ settings.consentText }}</textarea>
|
||||
<p class="field-help">Leer lassen für den Standardtext. Er soll sagen, was geladen wird und was ohne Zustimmung passiert – nicht zum Klicken drängen.</p>
|
||||
<fieldset class="field-set">
|
||||
<legend>Aussehen des Hinweises</legend>
|
||||
<div class="fields">
|
||||
<div>
|
||||
<label for="consentLayout">Anordnung</label>
|
||||
<select id="consentLayout" name="consentLayout">
|
||||
<option value="karte"{{ settings.consentLayout == 'karte' ? ' selected' : '' }}>Karte unten in der Mitte</option>
|
||||
<option value="leiste"{{ settings.consentLayout == 'leiste' ? ' selected' : '' }}>Leiste über die volle Breite</option>
|
||||
<option value="ecke"{{ settings.consentLayout == 'ecke' ? ' selected' : '' }}>Kleine Karte rechts unten</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="consentShape">Form</label>
|
||||
<select id="consentShape" name="consentShape">
|
||||
<option value="weich"{{ settings.consentShape == 'weich' ? ' selected' : '' }}>Abgerundet</option>
|
||||
<option value="rund"{{ settings.consentShape == 'rund' ? ' selected' : '' }}>Rund</option>
|
||||
<option value="eckig"{{ settings.consentShape == 'eckig' ? ' selected' : '' }}>Eckig</option>
|
||||
</select>
|
||||
<p class="field-help">Gilt für die Fläche und ihre Knöpfe zusammen.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="consentTitle">Überschrift</label>
|
||||
<input id="consentTitle" name="consentTitle" maxlength="80" value="{{ settings.consentTitle }}" placeholder="Externe Inhalte und Einwilligung">
|
||||
</div>
|
||||
<div>
|
||||
<label for="consentColor">Farbe der Fläche</label>
|
||||
<input id="consentColor" name="consentColor" value="{{ settings.consentColor }}" placeholder="@paper" data-color data-palette="{{ palette|json_encode|e('html_attr') }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="consentInk">Schriftfarbe</label>
|
||||
<input id="consentInk" name="consentInk" value="{{ settings.consentInk }}" placeholder="@ink" data-color data-palette="{{ palette|json_encode|e('html_attr') }}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="consentAccent">Farbe des Knopfes „Alle akzeptieren“</label>
|
||||
<input id="consentAccent" name="consentAccent" value="{{ settings.consentAccent }}" placeholder="@accent" data-color data-palette="{{ palette|json_encode|e('html_attr') }}">
|
||||
<p class="field-help">Färbt auch den Streifen oben, das Symbol und die Kästchen.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="consentAccentInk">Schrift auf dem Knopf</label>
|
||||
<input id="consentAccentInk" name="consentAccentInk" value="{{ settings.consentAccentInk }}" placeholder="#ffffff" data-color data-palette="{{ palette|json_encode|e('html_attr') }}">
|
||||
</div>
|
||||
</div>
|
||||
<p class="field-help">Leer heißt: Papier, Tinte und Akzent aus dem Design. „Nur notwendige“ bleibt bewusst ein Rahmenknopf in der Schriftfarbe – beide Antworten sind gleich groß, keine wird versteckt.</p>
|
||||
</fieldset>
|
||||
<div class="fields">
|
||||
<div>
|
||||
<label for="privacyPath">Adresse der Datenschutzseite</label>
|
||||
|
||||
@@ -71,6 +71,15 @@
|
||||
<div class="shell-actions">{% block actions %}{% endblock %}</div>
|
||||
</div>
|
||||
<div class="shell-body stack">
|
||||
{# Offene Handlungen, auf jedem Bildschirm gleich: fehlende Schriften, eine neue Fassung.
|
||||
Sie stehen hier statt nur auf ihrer eigenen Seite - einen Hinweis findet nur, wer schon
|
||||
weiss, wo er steht. Jeder traegt den Knopf, der ihn erledigt. #}
|
||||
{% for hinweis in kant_admin_notices() %}{% if not hinweis.admin or is_granted('ROLE_ADMIN') %}
|
||||
<p class="shell-notice" role="status">
|
||||
<span>{{ hinweis.text }}</span>
|
||||
<a class="secondary" href="{{ path(hinweis.route) }}">{{ hinweis.action }} →</a>
|
||||
</p>
|
||||
{% endif %}{% endfor %}
|
||||
{% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
|
||||
<p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>
|
||||
{% endfor %}{% endfor %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
{% set nav = 'system' %}
|
||||
{% block title %}System{% endblock %}
|
||||
{% block heading %}System und Update{% endblock %}
|
||||
{% block lead %}Welche Fassung läuft, ob ein Update möglich ist, und der Weg dorthin: sichern, Wartungszustand, Dateien tauschen, migrieren.{% endblock %}
|
||||
{% block lead %}Fassung, Updateweg und Sicherungen dieser Installation.{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
<div class="card">
|
||||
@@ -13,13 +13,13 @@
|
||||
<div class="card-body">
|
||||
<dl class="facts">
|
||||
<dt>Fassung</dt><dd><strong>{{ state.version }}</strong></dd>
|
||||
<dt>Adresse der Verwaltung</dt>
|
||||
<dt>Verwaltung</dt>
|
||||
<dd>
|
||||
<code>/{{ adminPath }}</code>
|
||||
{% if adminPath == 'admin' %}
|
||||
<span class="muted">– die Adresse, die jeder Scanner zuerst probiert. Ändern mit <code>php bin/console cms:admin:path <neu></code>; sie steht danach in <code>.env.local</code> und in keiner öffentlichen Datei.</span>
|
||||
<span class="muted">– Standardpfad, den jeder Scanner zuerst probiert. Ändern: <code>php bin/console cms:admin:path <neu></code>.</span>
|
||||
{% else %}
|
||||
<span class="muted">– geändert. Sie wird in der <code>robots.txt</code> nicht genannt; notiere sie dir an einem sicheren Ort. Zurück mit <code>php bin/console cms:admin:path admin</code>.</span>
|
||||
<span class="muted">– geändert; steht in keiner öffentlichen Datei. Zurück: <code>php bin/console cms:admin:path admin</code>.</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
<dt>Datenbank</dt>
|
||||
@@ -28,17 +28,17 @@
|
||||
{% if database.datei %}
|
||||
<code>{{ database.datei }}</code>
|
||||
{% if database.bytes %}<span class="muted">· {{ (database.bytes / 1048576)|number_format(1, ',', '.') }} MB</span>{% endif %}
|
||||
{% if not database.schreibbar %}<br><span class="check-bad"><strong>Nicht beschreibbar.</strong> Nach einem Upload per FTP gehört die Datei dem FTP-Benutzer; PHP läuft als ein anderer. SQLite braucht Schreibrechte auf die Datei <em>und</em> auf den Ordner darüber.</span>{% endif %}
|
||||
{% if not database.schreibbar %}<br><span class="check-bad"><strong>Nicht beschreibbar.</strong> SQLite braucht Schreibrechte auf die Datei <em>und</em> auf den Ordner darüber – nach einem FTP-Upload gehört sie dem FTP-Benutzer.</span>{% endif %}
|
||||
{% else %}
|
||||
<code>{{ database.adresse }}</code>
|
||||
{% endif %}
|
||||
<br><span class="muted">Eingestellt in <code>{{ database.quelle }}</code>. Die Installationskonfiguration steht in <code>.env</code>. Explizite Server-Umgebungsvariablen haben Vorrang.</span>
|
||||
<br><span class="muted">Eingestellt in <code>{{ database.quelle }}</code>; Server-Umgebungsvariablen haben Vorrang.</span>
|
||||
</dd>
|
||||
{% if state.worktree %}
|
||||
<dt>Stand</dt><dd><code>{{ state.describe }}</code>{% if state.commit != 'unbekannt' %} · Commit <code>{{ state.commit }}</code>{% endif %}</dd>
|
||||
{% else %}
|
||||
<dt>Eingerichtet über</dt>
|
||||
<dd>das <strong>Releasearchiv</strong> <span class="muted">– kein Git in diesem Verzeichnis, und dafür ist es auch nicht gedacht. Updates laufen über die Karte weiter unten.</span></dd>
|
||||
<dd><strong>Releasearchiv</strong> <span class="muted">– kein Git; Updates laufen über die Karte unten.</span></dd>
|
||||
{% endif %}
|
||||
{% if state.worktree %}
|
||||
<dt>Verfügbar</dt>
|
||||
@@ -55,7 +55,7 @@
|
||||
</dl>
|
||||
|
||||
{% if state.maintenance %}
|
||||
<p class="notice error" role="alert">Die Website antwortet Besuchern gerade mit 503. Wenn das nicht beabsichtigt ist, hebe den Wartungszustand auf – ein gescheitertes Update kann ihn eingeschaltet gelassen haben.</p>
|
||||
<p class="notice error" role="alert">Die Website antwortet Besuchern mit 503. Wenn das nicht beabsichtigt ist, hebe den Wartungszustand auf – ein gescheitertes Update kann ihn eingeschaltet gelassen haben.</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="sheet-actions">
|
||||
@@ -74,7 +74,7 @@
|
||||
vollkommen in Ordnung ist. #}
|
||||
{% if state.worktree %}
|
||||
<div class="card">
|
||||
<div class="card-head"><h2>Vorprüfung</h2><span class="muted">Jede Bedingung wird geprüft, nicht angenommen</span></div>
|
||||
<div class="card-head"><h2>Vorprüfung</h2><span class="muted">{{ checks|length }} Bedingungen</span></div>
|
||||
<div class="card-body">
|
||||
<ul class="check-list">
|
||||
{% for check in checks %}
|
||||
@@ -97,9 +97,9 @@
|
||||
<span class="muted">{{ pendingMigrations|length }} Stück</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="notice">Der Code ist neuer als die Datenbank. Das passiert, wenn ein Update von Hand über FTP eingespielt wurde – dann fehlt der Schritt, den sonst der Updater übernimmt.</p>
|
||||
<p class="notice">Der Code ist neuer als die Datenbank – typisch nach einem Update von Hand über FTP.</p>
|
||||
<ul class="log-list">{% for name in pendingMigrations %}<li><code>{{ name }}</code></li>{% endfor %}</ul>
|
||||
<p class="field-help">Lege vorher eine Sicherung an: Migrationen sind nicht umkehrbar, der Rückweg ist die Sicherung.</p>
|
||||
<p class="field-help">Vorher sichern: Migrationen sind nicht umkehrbar, der Rückweg ist die Sicherung.</p>
|
||||
<form action="{{ path('admin_system_migrate') }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('system') }}">
|
||||
<button class="primary" type="submit">Migrationen jetzt ausführen →</button>
|
||||
@@ -111,7 +111,7 @@
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
<h2>{{ state.worktree ? 'Update aus dem Releasearchiv' : 'Update einspielen' }}</h2>
|
||||
<span class="muted">{{ state.worktree ? 'Alternative zum Weg über Git' : 'holt die neue Fassung und tauscht die Dateien' }}</span>
|
||||
<span class="muted">{{ state.worktree ? 'Alternative zum Weg über Git' : 'holt die neue Fassung' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if archivePending %}
|
||||
@@ -122,14 +122,19 @@
|
||||
<button class="primary" type="submit">Migrationen ausführen und freigeben →</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<p class="muted">Dieser Weg braucht kein Git: Er lädt das Archiv der neuen Fassung von der Releaseseite, vergleicht die Prüfsumme, sichert Datenbank und Medien, schaltet den Wartungszustand ein und ersetzt die Dateien der Anwendung. <strong>Unberührt bleiben <code>var/</code>, <code>.env</code>, <code>.env.local</code>, die geladenen Schriften und das erzeugte Stylesheet-Bündel.</strong> Der vorherige Stand wird beiseitegelegt, nicht gelöscht.</p>
|
||||
<p class="field-help">Danach folgt ein zweiter Knopf für die Migrationen. Das ist kein Umweg: Erst eine neue Anfrage startet mit dem Code der neuen Fassung – ein Prozess, der sich selbst ausgetauscht hat, arbeitet mit dem alten weiter.</p>
|
||||
<p class="muted">Ohne Git: Archiv laden, Prüfsumme vergleichen, Datenbank und Medien sichern, Wartungszustand ein, Dateien tauschen. Der vorherige Stand wird beiseitegelegt, nicht gelöscht.</p>
|
||||
{# Das Kleingedruckte steht zugeklappt: Wer aktualisiert, braucht zuerst den Knopf. #}
|
||||
<details class="hint">
|
||||
<summary>Was unberührt bleibt</summary>
|
||||
<p class="field-help"><code>var/</code>, <code>.env</code>, <code>.env.local</code>, die geladenen Schriften und das erzeugte Stylesheet-Bündel.</p>
|
||||
<p class="field-help">Danach folgt ein zweiter Knopf für die Migrationen. Das ist kein Umweg: Erst eine neue Anfrage startet mit dem Code der neuen Fassung.</p>
|
||||
</details>
|
||||
{% if archiveVersion %}
|
||||
<p class="notice done">Verfügbar: <strong>{{ archiveVersion }}</strong> (installiert: {{ state.version }}).</p>
|
||||
{% elseif asked %}
|
||||
<p class="field-help">Die Releaseseite nennt nichts Neueres als {{ state.version }}.</p>
|
||||
{% else %}
|
||||
<p class="field-help"><a href="{{ path('admin_system', {pruefen: 1}) }}">Nachsehen, ob es etwas Neues gibt</a> – das fragt die Releaseseite und dauert einen Moment.</p>
|
||||
<p class="field-help"><a href="{{ path('admin_system', {pruefen: 1}) }}">Nachsehen, ob es etwas Neues gibt</a> – dauert einen Moment.</p>
|
||||
{% endif %}
|
||||
<form action="{{ path('admin_system_archive') }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('system') }}">
|
||||
@@ -150,9 +155,12 @@
|
||||
<div class="card">
|
||||
<div class="card-head"><h2>Update einspielen</h2><span class="muted">{{ ready ? 'Vorprüfung bestanden' : 'erst die Vorprüfung erfüllen' }}</span></div>
|
||||
<div class="card-body">
|
||||
<p class="muted">Der Updater sichert zuerst Datenbank und Umgebungsdateien, schaltet den Wartungszustand ein, wechselt auf den Tag, installiert Abhängigkeiten, migriert, räumt den Cache und prüft, ob die Installation antwortet. Scheitert ein Schritt, wird auf den vorherigen Stand zurückgesetzt – und nur wenn die Migration schon begonnen hatte, auch die Datenbank zurückgeschrieben.</p>
|
||||
<p class="field-help"><strong>Der Medienordner wird nicht gesichert.</strong> Er ist zu groß, und kein Update schreibt darin. Ein Update ist keine Datensicherung.</p>
|
||||
<p class="field-help">Auf manchen Hostings bricht ein Browseraufruf nach kurzer Zeit ab. Dann ist <code>php bin/console cms:update</code> der verlässliche Weg – dort gibt es dieselben Schritte mit <code>--check</code>, <code>--dry-run</code> und <code>--to=v1.2.0</code>.</p>
|
||||
<p class="muted">Sichern, Wartungszustand ein, auf den Tag wechseln, Abhängigkeiten, Migrationen, Cache, Antwortprüfung. Scheitert ein Schritt, wird zurückgesetzt – die Datenbank nur, wenn die Migration schon begonnen hatte.</p>
|
||||
<details class="hint">
|
||||
<summary>Zwei Hinweise vorab</summary>
|
||||
<p class="field-help"><strong>Der Medienordner wird nicht gesichert.</strong> Ein Update ist keine Datensicherung.</p>
|
||||
<p class="field-help">Bricht der Browseraufruf auf dem Hosting ab: <code>php bin/console cms:update</code> – dieselben Schritte mit <code>--check</code>, <code>--dry-run</code> und <code>--to=v1.2.0</code>.</p>
|
||||
</details>
|
||||
|
||||
<form action="{{ path('admin_system_update') }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('system') }}">
|
||||
@@ -164,7 +172,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<label class="check-label" for="dryRun"><input id="dryRun" name="dryRun" type="checkbox" value="1" checked> Nur Probelauf</label>
|
||||
<p class="field-help">Prüft alles und verändert nichts. Nimm das Häkchen weg, wenn es wirklich laufen soll.</p>
|
||||
<p class="field-help">Prüft alles und verändert nichts.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="primary" type="submit"{{ ready ? '' : ' disabled' }}>Update ausführen</button>
|
||||
@@ -175,7 +183,7 @@
|
||||
|
||||
{% if steps is not empty %}
|
||||
<div class="card">
|
||||
<div class="card-head"><h2>Letzter Durchlauf</h2><span class="muted">Schritt für Schritt</span></div>
|
||||
<div class="card-head"><h2>Letzter Durchlauf</h2><span class="muted">{{ steps|length }} Schritte</span></div>
|
||||
<div class="card-body">
|
||||
<ol class="check-list">
|
||||
{% for step in steps %}
|
||||
@@ -197,31 +205,31 @@
|
||||
<div class="card">
|
||||
<div class="card-head"><h2>Sicherungen</h2><span class="muted">{{ backups|length }} vorhanden · var/backups</span></div>
|
||||
<div class="card-body">
|
||||
<p class="muted">Eine Sicherung enthält die Datenbank als vollständige Kopie – nicht als Dateikopie während des Schreibens, die unbrauchbar sein kann – und den Medienordner. <strong>Nicht enthalten sind <code>.env</code>, <code>vendor/</code> und der Quellcode</strong>: die kommen aus dem Repository, und <code>.env</code> enthält das Geheimnis dieser Installation.</p>
|
||||
<p class="field-help">Zurückspielen geht bewusst nur auf der Konsole: <code>php bin/console cms:restore <name></code>. Ein Knopf, der die ganze Datenbank ersetzt, gehört nicht neben einen, der eine Seite speichert. Die tägliche Sicherung erledigt der <a href="{{ path('admin_tasks') }}">Aufgabenplan</a> – auch ohne Cronjob.</p>
|
||||
<p class="muted">Eine Sicherung enthält die Datenbank als vollständige Kopie und den Medienordner – nicht <code>.env</code>, <code>vendor/</code> und den Quellcode.</p>
|
||||
<p class="field-help">Zurückspielen nur auf der Konsole: <code>php bin/console cms:restore <name></code>. Die tägliche Sicherung erledigt der <a href="{{ path('admin_tasks') }}">Aufgabenplan</a>.</p>
|
||||
<form action="{{ path('admin_system_backup') }}" method="post">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('system') }}">
|
||||
<button class="primary" type="submit">Sicherung jetzt anlegen</button>
|
||||
</form>
|
||||
|
||||
{% if backups is not empty %}
|
||||
<table class="table">
|
||||
<table class="table table-stack">
|
||||
<caption class="visually-hidden">Vorhandene Sicherungen</caption>
|
||||
<thead><tr><th scope="col">Name</th><th scope="col">Erstellt</th><th scope="col">Fassung</th><th scope="col">Inhalt</th><th scope="col">Größe</th><th scope="col">Zustand</th></tr></thead>
|
||||
<tbody>
|
||||
{% for backup in backups %}
|
||||
<tr>
|
||||
<td><code>{{ backup.name }}</code></td>
|
||||
<td>{{ backup.manifest ? backup.manifest.erstellt|date('d.m.Y H:i') : '—' }}{% if backup.manifest %}<br><span class="muted">{{ backup.manifest.anlass }}</span>{% endif %}</td>
|
||||
<td>{{ backup.manifest ? backup.manifest.fassung : '—' }}</td>
|
||||
<td>{% if backup.manifest %}{{ backup.manifest.inhalt.seiten }} Seiten, {{ backup.manifest.medien.dateien }} Dateien{% else %}—{% endif %}</td>
|
||||
<td>{{ (backup.bytes / 1048576)|number_format(1, ',', '.') }} MB</td>
|
||||
<td>{% if backup.intact %}<span class="pill pill-live">unversehrt</span>{% else %}<span class="pill pill-off">Prüfsumme falsch</span>{% endif %}</td>
|
||||
<td data-label="Name"><code>{{ backup.name }}</code></td>
|
||||
<td data-label="Erstellt">{{ backup.manifest ? backup.manifest.erstellt|date('d.m.Y H:i') : '—' }}{% if backup.manifest %}<br><span class="muted">{{ backup.manifest.anlass }}</span>{% endif %}</td>
|
||||
<td data-label="Fassung">{{ backup.manifest ? backup.manifest.fassung : '—' }}</td>
|
||||
<td data-label="Inhalt">{% if backup.manifest %}{{ backup.manifest.inhalt.seiten }} Seiten, {{ backup.manifest.medien.dateien }} Dateien{% else %}—{% endif %}</td>
|
||||
<td data-label="Größe">{{ (backup.bytes / 1048576)|number_format(1, ',', '.') }} MB</td>
|
||||
<td data-label="Zustand">{% if backup.intact %}<span class="pill pill-live">unversehrt</span>{% else %}<span class="pill pill-off">Prüfsumme falsch</span>{% endif %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="field-help">„Unversehrt“ heißt: die Prüfsumme der gesicherten Datenbank stimmt noch mit dem Manifest überein. Stimmt sie nicht, wird die Sicherung nicht eingespielt.</p>
|
||||
<p class="field-help">„Unversehrt“ heißt: die Prüfsumme stimmt noch. Stimmt sie nicht, wird die Sicherung nicht eingespielt.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -232,9 +240,19 @@
|
||||
{% if state.log is empty %}
|
||||
<p class="muted">Noch kein Update über diesen Weg eingespielt.</p>
|
||||
{% else %}
|
||||
{# Zwanzig Protokollzeilen sind auf einem Handy zwanzig Absätze. Die jüngsten fünf
|
||||
stehen offen, der Rest liegt eine Umdrehung dahinter. #}
|
||||
<ul class="log-list">
|
||||
{% for line in state.log %}<li><code>{{ line }}</code></li>{% endfor %}
|
||||
{% for line in state.log|slice(0, 5) %}<li><code>{{ line }}</code></li>{% endfor %}
|
||||
</ul>
|
||||
{% if state.log|length > 5 %}
|
||||
<details class="hint">
|
||||
<summary>Ältere Einträge ({{ state.log|length - 5 }})</summary>
|
||||
<ul class="log-list">
|
||||
{% for line in state.log|slice(5) %}<li><code>{{ line }}</code></li>{% endfor %}
|
||||
</ul>
|
||||
</details>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -129,22 +129,27 @@
|
||||
<button class="primary" type="submit">Design speichern</button>
|
||||
</form>
|
||||
|
||||
<div class="section-head"><h2>Schriften ausliefern</h2><span class="muted">Von Google oder vom eigenen Server</span></div>
|
||||
{% if fontsMissing is empty and not fontsLocal %}
|
||||
<p class="field-help">Dieses Design nutzt nur Systemschriften – es lädt ohnehin nichts von Google.</p>
|
||||
{% else %}
|
||||
<p class="field-help">
|
||||
{% if fontsLocal %}
|
||||
<strong>Die Schriften liegen auf diesem Server.</strong> Besucher laden nichts von Google, und die Seite baut sich schneller auf, weil eine Kette aus zwei fremden Verbindungen entfällt.
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
<h2>Schriften ausliefern</h2>
|
||||
<span class="muted">{{ fontsMissing ? fontsMissing|length ~ ' fehlt noch' : 'immer vom eigenen Server' }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if fontsMissing is empty and not fontsLocal %}
|
||||
<p class="muted">Dieses Design nutzt nur Systemschriften – es lädt ohnehin nichts von Google.</p>
|
||||
{% else %}
|
||||
<strong>Die Schriften kommen zurzeit von Google.</strong> Damit erfährt Google die IP-Adresse jedes Besuchers – in Deutschland ein abmahnfähiger Mangel (LG München I, 3 O 17493/20) –, und der Seitenaufbau wartet auf zwei fremde Verbindungen nacheinander. Mit dem Knopf werden die Dateien einmalig hierher geholt; die Lizenz der Schriften erlaubt das ausdrücklich.
|
||||
{% if fontsLocal %}
|
||||
<p class="muted"><strong>Die Schriften liegen auf diesem Server.</strong> Besucher laden nichts von Google, und die Seite baut sich schneller auf.</p>
|
||||
{% else %}
|
||||
<p class="muted"><strong>Die Schriftdateien fehlen auf diesem Server.</strong> Bis sie hier liegen, zeigt die Website die eingestellte Ersatzschrift – von Google wird nichts geladen, weder hier noch beim Besucher.</p>
|
||||
{% endif %}
|
||||
{% if fontsMissing %}<p class="field-help">Noch nicht hier: {{ fontsMissing|join(', ') }}.</p>{% endif %}
|
||||
<form method="post" action="{{ path('admin_theme_fonts') }}">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('theme') }}">
|
||||
<button class="{{ fontsLocal ? 'secondary' : 'primary' }}" type="submit">{{ fontsLocal ? 'Schriften erneut holen' : 'Schriften auf diesen Server holen' }}</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% if fontsMissing %}<br>Noch nicht hier: {{ fontsMissing|join(', ') }}.{% endif %}
|
||||
</p>
|
||||
<form method="post" action="{{ path('admin_theme_fonts') }}">
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('theme') }}">
|
||||
<button type="submit">{{ fontsLocal ? 'Schriften erneut holen' : 'Schriften auf diesen Server holen' }}</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<p class="footnote">KantSites · Arbeitsstand</p>
|
||||
{% endblock %}
|
||||
@@ -19,6 +19,7 @@
|
||||
<link rel="stylesheet" href="/assets/site.css?v={{ kant_version() }}">
|
||||
<link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}">
|
||||
<link rel="stylesheet" href="/assets/design.css?v={{ kant_version() }}">
|
||||
{% if pageStyles|default('') %}<style>{{ pageStyles|raw }}</style>{% endif %}
|
||||
{% if needsScrolled|default(false) %}<script type="module" src="/assets/scrolled.js?v={{ kant_version() }}"></script>{% endif %}
|
||||
</head>
|
||||
{% set consentOpen = not editing|default(false) and consentGate.needsBanner(app.request) %}
|
||||
|
||||
@@ -99,7 +99,9 @@
|
||||
aria-label="{{ {header: 'Hauptnavigation', secondary: 'Zweite Navigation', footer: 'Fußzeile', legal: 'Rechtliches'}[props.slot]|default('Navigation') }}">
|
||||
{% if menuLayout == 'burger' or collapse != 'never' %}
|
||||
<details class="menu-burger">
|
||||
<summary><span class="burger-lines" aria-hidden="true"></span><span class="burger-text">Menü</span></summary>
|
||||
{# Nur Symbol behält den Namen für Vorlesesoftware; sichtbar ist dann nur der Strich. #}
|
||||
{% set burger = props.burgerLabel|default('both') %}
|
||||
<summary>{% if burger != 'text' %}<span class="burger-lines" aria-hidden="true"></span>{% endif %}<span class="burger-text{{ burger == 'icon' ? ' visually-hidden' : '' }}">Menü</span></summary>
|
||||
<div class="menu-burger-body">{% include 'nav.html.twig' with {links: links} only %}</div>
|
||||
</details>
|
||||
{% endif %}
|
||||
@@ -170,6 +172,26 @@
|
||||
{% else %}
|
||||
<span id="{{ block.id }}" class="block-icon icon-size-{{ props.size }}{{ designClasses }}"{{ props.decorative ? ' aria-hidden="true"' : '' }}>{{ iconBody }}</span>
|
||||
{% endif %}
|
||||
{% elseif type == 'social' %}
|
||||
{# Die Profile kommen aus den Einstellungen, der Block sagt nur, wie sie aussehen. Eine
|
||||
Liste, weil es eine ist; ohne Beschriftung trägt jeder Link seinen Namen unsichtbar. #}
|
||||
{% set profiles = siteSettings.load().social|default({}) %}
|
||||
{% set chosen = props.networks|default([]) %}
|
||||
{% set shown = [] %}
|
||||
{% for key, name in constant('App\\Content\\SocialProfiles::NETWORKS') %}
|
||||
{% if profiles[key]|default('') and (chosen is empty or key in chosen) %}{% set shown = shown|merge([{key: key, name: name, url: profiles[key]}]) %}{% endif %}
|
||||
{% endfor %}
|
||||
{% if shown is not empty %}
|
||||
<ul id="{{ block.id }}" class="block-social social-{{ props.layout|default('horizontal') }} social-shape-{{ props.shape|default('plain') }} social-size-{{ props.size|default(24) }}{{ props.labels|default(false) ? ' social-labels' : '' }}{{ designClasses }}" aria-label="Soziale Profile">
|
||||
{% for profile in shown %}
|
||||
<li><a href="{{ profile.url }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab is defined ? props.newTab : true} only %}>{% include 'blocks/social-icon.html.twig' with {network: profile.key} only %}<span{{ props.labels|default(false) ? '' : ' class="visually-hidden"' }}>{{ profile.name }}</span></a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% elseif editing|default(false) %}
|
||||
<p id="{{ block.id }}" class="block-unavailable{{ designClasses }}" role="note">Noch keine sozialen Profile eingetragen. Sie stehen unter Einstellungen → Unternehmensdaten → Soziale Profile.</p>
|
||||
{% else %}
|
||||
<!-- Block {{ block.id }} (social): keine Profile eingetragen. -->
|
||||
{% endif %}
|
||||
{% elseif type == 'progress' %}
|
||||
{# A progress bar as a real meter: the number is in the markup, not only in the width of a
|
||||
coloured div, so it is readable without seeing it. #}
|
||||
|
||||
@@ -13,6 +13,9 @@
|
||||
phone: 'M6 3h4l2 5-2.5 1.5a12 12 0 0 0 5 5L16 12l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2Z',
|
||||
mail: 'M3 6h18v12H3Zm0 1 9 7 9-7',
|
||||
pin: 'M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11Zm0-8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z',
|
||||
check: 'm4 12.5 5.5 5.5L20 6'
|
||||
check: 'm4 12.5 5.5 5.5L20 6',
|
||||
people: 'M9.5 11.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM2.5 20v-1c0-3.3 3-5 7-5s7 1.7 7 5v1M16.5 5.3a3.2 3.2 0 0 1 0 6.4M18 14.4c2.1.7 3.5 2.1 3.5 4.1V20',
|
||||
music: 'M10 18V5.5L20 3v12.5M10 9.5 20 7M10 18a3 2.5 0 1 0-6 0 3 2.5 0 0 0 6 0ZM20 15.5a3 2.5 0 1 0-6 0 3 2.5 0 0 0 6 0Z',
|
||||
home: 'm3 11.5 9-7.5 9 7.5M5.5 10v10h13V10M10 20v-6.5h4V20'
|
||||
} %}
|
||||
<svg class="block-icon" viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="{{ paths[name] }}"/></svg>
|
||||
@@ -0,0 +1,17 @@
|
||||
{# Ein Symbol je Netzwerk, gezeichnet im Strich des übrigen Symbolsatzes (icon.html.twig): keine
|
||||
Markenbilder, keine Schrift, keine fremde Datei. Die Form ist so weit vereinfacht, dass sie
|
||||
als Umriss erkennbar bleibt und in jeder Größe und Farbe funktioniert. #}
|
||||
{% set shapes = {
|
||||
facebook: '<path d="M15.5 4h-2.2A3.8 3.8 0 0 0 9.5 7.8V10H7v3.2h2.5V20h3.3v-6.8h2.4l.5-3.2h-2.9V8.2c0-.6.3-.9.9-.9h2Z"/>',
|
||||
instagram: '<rect x="3.5" y="3.5" width="17" height="17" rx="4.6"/><circle cx="12" cy="12" r="3.9"/><path d="M17 7h.01"/>',
|
||||
linkedin: '<rect x="3.5" y="3.5" width="17" height="17" rx="2.6"/><path d="M7.6 10.4v6.2M7.6 7.5h.01M11.6 16.6v-6.2m0 2.7a2.6 2.6 0 0 1 5.2 0v3.5"/>',
|
||||
youtube: '<rect x="2.5" y="5.5" width="19" height="13" rx="3.6"/><path d="m10.2 9.2 4.8 2.8-4.8 2.8Z"/>',
|
||||
tiktok: '<path d="M14.2 4v9.6a3.6 3.6 0 1 1-3.6-3.6M14.2 4c0 2.6 2.1 4.7 4.7 4.7"/>',
|
||||
x: '<path d="M4.5 4h4l11 16h-4Z"/><path d="M19 4l-6.1 7.1M5 20l6.1-7.1"/>',
|
||||
threads: '<path d="M12.4 3.5A8.5 8.5 0 1 0 19 17.3c1.5-2.2.8-5.4-2.2-6.1-2.3-.6-4.7.4-5 2.6-.3 2.1 1.7 3.4 3.5 2.5 1.7-.8 2.1-3.5 1.1-6.4-.6-1.8-2-2.8-3.8-2.7-1.4.1-2.5.7-3.2 1.7"/>',
|
||||
pinterest: '<path d="M12 3.5a8.5 8.5 0 0 0-3.4 16.3l1.5-5.6M9.4 12.6c-.6-2.6 1-4.8 3.1-4.8 1.9 0 3 1.4 2.6 3.4-.5 2.2-2 3.7-3.5 3.1M10.1 15.5 8.8 20.5"/>',
|
||||
xing: '<path d="M6.5 6.5 9.4 11 6 16.5M18 3l-6.6 11.5L15.5 21"/>',
|
||||
whatsapp: '<path d="M4 20l1.4-4A8.5 8.5 0 1 1 8.6 19.1Z"/><path d="M9.3 9.2c0 3 2.5 5.5 5.5 5.5l1.3-1.4-2-.9-.9.8a4.1 4.1 0 0 1-2.3-2.3l.8-.9-.9-2Z"/>',
|
||||
google: '<path d="M12 12h8.4A8.5 8.5 0 1 1 18 6.1"/>'
|
||||
} %}
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">{{ shapes[network]|raw }}</svg>
|
||||
@@ -3,15 +3,20 @@
|
||||
No JavaScript: the public pages run with script-src 'none' by default, and a banner that needs
|
||||
a script would be the one thing that breaks that. Accepting and refusing are the same kind of
|
||||
button, next to each other, with the same weight - a refusal hidden behind a link would not be
|
||||
a free choice. The per-group selection sits in a disclosure so the first view stays readable. #}
|
||||
<section class="consent-bar" role="region" aria-labelledby="consent-heading">
|
||||
<h2 id="consent-heading">Externe Inhalte und Einwilligung</h2>
|
||||
<p>{{ consent.text ?: 'Diese Website lädt bestimmte Inhalte erst, wenn du zustimmst. Ohne Zustimmung wird die Seite vollständig angezeigt, nur eingebettete Inhalte anderer Anbieter bleiben leer.' }}</p>
|
||||
a free choice. The per-group selection sits in a disclosure so the first view stays readable.
|
||||
|
||||
Anordnung, Form, Farben und Ueberschrift kommen aus den Einstellungen: die Anordnung als
|
||||
Klasse, der Rest als Variablen im Kopf der Seite (Consent::styles). #}
|
||||
<section class="consent-bar consent-layout-{{ consent.layout|default('karte') }}" role="region" aria-labelledby="consent-heading">
|
||||
<div class="consent-body">
|
||||
<h2 id="consent-heading"><svg class="consent-icon" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3 5 6v6c0 4.4 2.9 7.9 7 9 4.1-1.1 7-4.6 7-9V6Zm-2.5 9 2 2 4-4.5"/></svg><span>{{ consent.title|default('') ?: 'Externe Inhalte und Einwilligung' }}</span></h2>
|
||||
<p>{{ consent.text ?: 'Diese Website lädt bestimmte Inhalte erst, wenn du zustimmst. Ohne Zustimmung wird die Seite vollständig angezeigt, nur eingebettete Inhalte anderer Anbieter bleiben leer.' }}</p>
|
||||
</div>
|
||||
<form method="post" action="{{ path('consent_save') }}" class="consent-form">
|
||||
<input type="hidden" name="back" value="{{ back }}">
|
||||
<div class="consent-actions">
|
||||
<button class="consent-button" type="submit" name="choice" value="all">Alle akzeptieren</button>
|
||||
<button class="consent-button" type="submit" name="choice" value="none">Nur notwendige</button>
|
||||
<button class="consent-button consent-accept" type="submit" name="choice" value="all">Alle akzeptieren</button>
|
||||
<button class="consent-button consent-decline" type="submit" name="choice" value="none">Nur notwendige</button>
|
||||
</div>
|
||||
<details class="consent-details">
|
||||
<summary>Einzeln wählen</summary>
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
<meta name="robots" content="noindex, follow">
|
||||
{% include 'favicon.html.twig' %}
|
||||
<link rel="stylesheet" href="/assets/site.css?v={{ kant_version() }}">
|
||||
{% if pageStyles|default('') %}<style>{{ pageStyles|raw }}</style>{% endif %}
|
||||
</head>
|
||||
<body class="kant consent-page">
|
||||
<main id="main" tabindex="-1">
|
||||
|
||||
@@ -33,6 +33,13 @@
|
||||
drei Abfragen trifft zu - und zwar auf dieselbe Variante, die auch die Regel nimmt. #}
|
||||
{% for bild in heroBackground|default([]) %}<link rel="preload" as="image" href="{{ bild.src }}" media="{{ bild.media }}" fetchpriority="high">
|
||||
{% endfor %}
|
||||
{% if localFonts|default([]) %}
|
||||
{# Jeder Schnitt, den das Theme nennt, vorab - und zwar alle. Fehlt einer, laedt er erst,
|
||||
wenn das Stylesheet geparst ist, und die Ueberschrift springt sichtbar von der
|
||||
Ersatzschrift auf die richtige. Schriften kommen ausschliesslich vom eigenen Server;
|
||||
ein Stylesheet von fonts.googleapis.com wird nie verlinkt. #}
|
||||
{% for font in localFonts %}<link rel="preload" href="{{ font }}" as="font" type="font/woff2" crossorigin>{% endfor %}
|
||||
{% endif %}
|
||||
{% if styleBundle|default(null) %}
|
||||
<link rel="stylesheet" href="{{ styleBundle }}">
|
||||
{% else %}
|
||||
@@ -42,10 +49,6 @@
|
||||
{% if page.document.schemaVersion >= 2 %}<link rel="stylesheet" href="/assets/design.css?v={{ kant_version() }}">{% endif %}
|
||||
{% if page.document.schemaVersion >= 3 %}<link rel="stylesheet" href="/assets/enhancements.css?v={{ kant_version() }}">{% endif %}
|
||||
{% endif %}
|
||||
{% if localFonts|default([]) %}
|
||||
{# Die wichtigsten Schnitte vorab, damit die erste Zeile in der richtigen Schrift steht. #}
|
||||
{% for font in localFonts %}<link rel="preload" href="{{ font }}" as="font" type="font/woff2" crossorigin>{% endfor %}
|
||||
{% elseif googleFonts|default(null) %}<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="{{ googleFonts }}">{% endif %}
|
||||
{% if hasPosts|default(false) %} <link rel="alternate" type="application/rss+xml" title="Beiträge" href="/feed.xml">
|
||||
{% endif %}
|
||||
{% if needsTabs|default(false) %}<script src="/assets/tabs.js?v={{ kant_version() }}" defer></script>{% endif %}
|
||||
@@ -94,13 +97,15 @@
|
||||
{% for block in areas.footer.blocks %}{% include 'blocks/block.html.twig' with {block: block, editing: editing|default(false), postLists: {}, forms: {}, breadcrumbs: [], navigation: navigation|default({}), sections: sections|default({}), richText: areas.footer.schemaVersion|default(1) >= 12, richHeadings: areas.footer.schemaVersion|default(1) >= 17, eagerImage: null} only %}{% endfor %}
|
||||
</footer>
|
||||
{% endif %}
|
||||
{% if not editing|default(false) and consentGate.needsBanner(app.request) %}
|
||||
{% include 'consent-banner.html.twig' with {consent: consentGate.state(app.request), back: app.request.pathInfo} only %}
|
||||
{% endif %}
|
||||
{# Der Knopf steht hinter der Einwilligungsleiste: Solange sie offen ist, setzt er sich per
|
||||
Ankerpositionierung auf ihre Oberkante, und ein Anker muss im Dokument davor stehen. #}
|
||||
{% set oben = siteSettings.load() %}
|
||||
{% if oben.scrollTop|default(false) and not editing|default(false) %}
|
||||
{# Ein Anker, kein Skript. Er springt an den Anfang - das kann ein Browser allein. #}
|
||||
<a class="scroll-top{{ oben.scrollTopPosition|default('rechts') == 'links' ? ' scroll-top-links' : '' }}" href="#seitenanfang" aria-label="{{ oben.scrollTopLabel|default('Nach oben') }}"><span aria-hidden="true">↑</span></a>
|
||||
{% endif %}
|
||||
{% if not editing|default(false) and consentGate.needsBanner(app.request) %}
|
||||
{% include 'consent-banner.html.twig' with {consent: consentGate.state(app.request), back: app.request.pathInfo} only %}
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
+288
-13
@@ -1393,27 +1393,37 @@ final class CmsTest extends TestCase
|
||||
self::assertSame('https://fonts.gstatic.com/s/lato/latein.woff2', $faces[0]['url']);
|
||||
self::assertStringContainsString('U+0131', $faces[0]['range']);
|
||||
|
||||
// Ohne heruntergeladene Dateien bleibt es beim Verweis auf Google - und das Theme weiß es.
|
||||
// Ohne heruntergeladene Dateien bleibt es bei der Ersatzschrift - verlinkt wird Google
|
||||
// nie, denn das gäbe die IP jedes Besuchers an einen Dritten weiter.
|
||||
$theme = new Theme($this->db);
|
||||
$gespeichert = $theme->load();
|
||||
$theme->save($gespeichert['colors'], [
|
||||
['key' => 'body', 'name' => 'Fließtext', 'family' => 'Lato', 'source' => 'google', 'weights' => [400, 700], 'fallback' => 'system-ui'],
|
||||
['key' => 'heading', 'name' => 'Überschriften', 'family' => 'Lato', 'source' => 'google', 'weights' => [700], 'fallback' => 'system-ui'],
|
||||
['key' => 'heading', 'name' => 'Überschriften', 'family' => 'Lato', 'source' => 'google', 'weights' => [700, 900], 'fallback' => 'system-ui'],
|
||||
], $gespeichert['base']);
|
||||
self::assertFalse($fonts->hasLocal($theme->load()));
|
||||
self::assertSame(['Lato 400', 'Lato 700'], $fonts->missing($theme->load()));
|
||||
self::assertSame(['Lato 400', 'Lato 700', 'Lato 900'], $fonts->missing($theme->load()));
|
||||
|
||||
$this->pages->publish('page-1', $this->pages->saveDraft('page-1', DemoContent::starter('Startseite'), 0), 1);
|
||||
self::assertStringContainsString('fonts.googleapis.com', $this->request('/')->getContent());
|
||||
$ohne = $this->request('/');
|
||||
self::assertStringNotContainsString('fonts.googleapis.com', $ohne->getContent());
|
||||
self::assertStringNotContainsString('fonts.gstatic.com', $ohne->getContent());
|
||||
self::assertStringNotContainsString('rel="preload"'." href=\"/assets/fonts", $ohne->getContent());
|
||||
|
||||
// Mit Dateien: kein Wort mehr von Google, dafür die eigenen Dateien und ein Vorabholen.
|
||||
// Mit Dateien: die eigenen Dateien, und zwar **jeder** Schnitt vorab. Fehlte einer, läge
|
||||
// er erst nach dem Stylesheet vor, und die Überschrift spränge sichtbar von der
|
||||
// Ersatzschrift auf die richtige.
|
||||
mkdir($this->path.'-fonts', 0o775, true);
|
||||
foreach (['lato-400-latin.woff2', 'lato-700-latin.woff2'] as $datei) {
|
||||
foreach (['lato-400-latin.woff2', 'lato-700-latin.woff2', 'lato-900-latin.woff2'] as $datei) {
|
||||
file_put_contents($this->path.'-fonts/'.$datei, 'wOF2test');
|
||||
}
|
||||
file_put_contents($this->path.'-fonts/fonts.css', "@font-face{font-family:'Lato'}");
|
||||
self::assertTrue($fonts->hasLocal($theme->load()));
|
||||
self::assertSame(['/assets/fonts/lato-400-latin.woff2', '/assets/fonts/lato-700-latin.woff2'], $fonts->preload($theme->load()));
|
||||
self::assertSame([
|
||||
'/assets/fonts/lato-400-latin.woff2',
|
||||
'/assets/fonts/lato-700-latin.woff2',
|
||||
'/assets/fonts/lato-900-latin.woff2',
|
||||
], $fonts->preload($theme->load()));
|
||||
}
|
||||
|
||||
public function testTheStylesheetsGoOutAsOneFileWithoutComments(): void
|
||||
@@ -1887,6 +1897,27 @@ final class CmsTest extends TestCase
|
||||
self::assertStringContainsString('Bewertung: 5 von 5', $html);
|
||||
}
|
||||
|
||||
/**
|
||||
* Jedes erlaubte Symbol braucht eine Zeichnung, und die Symbolfarbe muss am SVG ankommen.
|
||||
*
|
||||
* Ohne den ersten Teil rendert ein Name aus der Liste ein leeres `<path d="">`: unsichtbar,
|
||||
* ohne Fehler, erst auf der fertigen Seite bemerkbar. Der zweite Teil sichert die Regel, die
|
||||
* das eingebettete SVG die Farbe seiner Hülle erben lässt - es trägt dieselbe Klasse und
|
||||
* setzte sonst die Akzentfarbe erneut.
|
||||
*/
|
||||
public function testEveryAllowedIconHasADrawingAndTakesItsColourFromTheBlock(): void
|
||||
{
|
||||
$template = (string) file_get_contents(__DIR__.'/../templates/blocks/icon.html.twig');
|
||||
foreach (DocumentValidator::ICONS as $icon) {
|
||||
self::assertMatchesRegularExpression(
|
||||
'/\R\s{4}'.preg_quote($icon, '/').": '[^']{4,}',?\R/",
|
||||
$template,
|
||||
sprintf('Das Symbol „%s“ steht in der Liste, hat aber keine Zeichnung.', $icon),
|
||||
);
|
||||
}
|
||||
self::assertStringContainsString('.block-icon .block-icon{color:inherit}', (string) file_get_contents(__DIR__.'/../public/assets/site.css'));
|
||||
}
|
||||
|
||||
/**
|
||||
* @return iterable<string, array{array}>
|
||||
*/
|
||||
@@ -2257,6 +2288,20 @@ final class CmsTest extends TestCase
|
||||
$this->partials->save($header['id'], $document, (int) $header['version'] + 1);
|
||||
}
|
||||
|
||||
public function testSliderControlsTakeTheirColoursFromTheSliderStyle(): void
|
||||
{
|
||||
$document = self::styledDocument();
|
||||
$document['schemaVersion'] = 22;
|
||||
$document['blocks'][0]['children'][] = ['id' => 'hero-slider', 'type' => 'slider', 'props' => ['autoplay' => 0, 'dots' => true, 'snap' => true, 'desktopVisible' => 1, 'tabletVisible' => 1, 'mobileVisible' => 1], 'style' => ['desktop' => ['sliderDotColor' => '#ffffff', 'sliderControlColor' => '@mint', 'sliderControlBackground' => '#00000066']], 'children' => [
|
||||
['id' => 'slide-1', 'type' => 'column', 'children' => [['id' => 'slide-1-text', 'type' => 'text', 'props' => ['text' => 'Eins']]]],
|
||||
['id' => 'slide-2', 'type' => 'column', 'children' => [['id' => 'slide-2-text', 'type' => 'text', 'props' => ['text' => 'Zwei']]]],
|
||||
]];
|
||||
$this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
|
||||
$html = $this->request('/')->getContent();
|
||||
// On the slider for the script-free markers, on the control bar the script adds after it.
|
||||
self::assertStringContainsString('#hero-slider,#hero-slider + .slider-controls{--slider-dot:#ffffff;--slider-ink:var(--k-mint);--slider-bg:#00000066}', $html);
|
||||
}
|
||||
|
||||
public function testInlineStylesheetIsAllowedByItsOwnHashAndNothingElse(): void
|
||||
{
|
||||
$this->pages->publish('page-1', $this->pages->saveDraft('page-1', self::styledDocument(), 0), 1);
|
||||
@@ -2315,7 +2360,7 @@ final class CmsTest extends TestCase
|
||||
$this->pages->saveDraft('page-1', $document, 0);
|
||||
}
|
||||
|
||||
public function testThemeDrivesEveryPageAndGoogleFontsOpenTheirOwnPolicy(): void
|
||||
public function testThemeDrivesEveryPageAndNoFontIsEverFetchedFromGoogle(): void
|
||||
{
|
||||
$this->pages->publish('page-1', $this->pages->saveDraft('page-1', DemoContent::pages()['home'], 0), 1);
|
||||
// Without a stored theme the defaults apply and no third party is contacted.
|
||||
@@ -2336,10 +2381,14 @@ final class CmsTest extends TestCase
|
||||
self::assertStringContainsString('--kf-body:"Inter",sans-serif', $html);
|
||||
self::assertStringContainsString('font-size:var(--k-size)', $html);
|
||||
self::assertStringContainsString('--k-container:1100px', $html);
|
||||
self::assertStringContainsString('fonts.googleapis.com/css2?family=Inter:wght@400;700', $html);
|
||||
// Auch eine Google-Familie im Theme verlinkt nichts nach draußen: Solange die Dateien
|
||||
// nicht hier liegen, greift die Ersatzschrift, und die Kopfzeile lässt keinen fremden
|
||||
// Schrifthost zu.
|
||||
self::assertStringNotContainsString('fonts.googleapis.com', $html);
|
||||
$policy = (string) $response->headers->get('Content-Security-Policy');
|
||||
self::assertStringContainsString('https://fonts.googleapis.com', $policy);
|
||||
self::assertStringContainsString("font-src 'self' https://fonts.gstatic.com", $policy);
|
||||
self::assertStringNotContainsString('googleapis.com', $policy);
|
||||
self::assertStringContainsString("font-src 'self';", $policy);
|
||||
self::assertStringContainsString("style-src 'self' 'sha256-", $policy);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -2554,7 +2603,12 @@ final class CmsTest extends TestCase
|
||||
$this->menus->save('header', 'Hauptnavigation', [
|
||||
['label' => 'Start', 'type' => 'page', 'pageId' => $start, 'anchor' => '', 'children' => []],
|
||||
], 0);
|
||||
self::assertStringContainsString('<a href="/" aria-current="page">Start</a>', $this->request('/')->getContent());
|
||||
// Seit den Menuesymbolen (1.13.0) steht die Beschriftung in einer eigenen Huelle. Geprueft
|
||||
// wird, was die Aussage traegt: Adresse, Kennzeichnung der aktuellen Seite, Beschriftung.
|
||||
self::assertMatchesRegularExpression(
|
||||
'#<a href="/" aria-current="page">.*?Start.*?</a>#s',
|
||||
(string) $this->request('/')->getContent(),
|
||||
);
|
||||
|
||||
// The root is protected from being renamed or binned while it is the root.
|
||||
foreach ([fn () => $this->pages->movePage($start, 'anders', null, $this->pages->findForEditor($start)['version'], $this->redirects),
|
||||
@@ -3328,6 +3382,61 @@ final class CmsTest extends TestCase
|
||||
self::assertStringContainsString("script-src 'none'", (string) $this->request('/')->headers->get('Content-Security-Policy'));
|
||||
}
|
||||
|
||||
/** @return iterable<string, array{string, list<string>, list<string>}> */
|
||||
public static function burgerLabels(): iterable
|
||||
{
|
||||
yield 'symbol and text' => ['both', ['<span class="burger-lines"', '<span class="burger-text">Menü'], []];
|
||||
yield 'only text' => ['text', ['<span class="burger-text">Menü'], ['burger-lines']];
|
||||
yield 'only the symbol, the name stays for screen readers' => ['icon', ['<span class="burger-lines"', '<span class="burger-text visually-hidden">Menü'], []];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param list<string> $enthalten
|
||||
* @param list<string> $fehlen
|
||||
*/
|
||||
#[DataProvider('burgerLabels')]
|
||||
public function testTheMenuButtonCanBeSymbolTextOrBoth(string $variante, array $enthalten, array $fehlen): void
|
||||
{
|
||||
$document = DemoContent::starter('Mit Menü');
|
||||
$document['schemaVersion'] = 16;
|
||||
$document['blocks'][0]['children'][] = ['id' => 'nav', 'type' => 'menu', 'props' => ['slot' => 'header', 'layout' => 'burger', 'burgerLabel' => $variante]];
|
||||
$this->menus->save('header', 'Hauptnavigation', [['label' => 'Start', 'type' => 'page', 'level' => 1, 'pageId' => 'page-1', 'position' => 10]], 0);
|
||||
$this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
|
||||
// Nur der eigene Knopf, nicht der des Kopfbereichs aus der Startvorlage.
|
||||
$crawler = new \Symfony\Component\DomCrawler\Crawler($this->request('/')->getContent());
|
||||
$summary = $crawler->filter('#nav > details.menu-burger > summary')->html();
|
||||
foreach ($enthalten as $teil) {
|
||||
self::assertStringContainsString($teil, $summary);
|
||||
}
|
||||
foreach ($fehlen as $teil) {
|
||||
self::assertStringNotContainsString($teil, $summary);
|
||||
}
|
||||
}
|
||||
|
||||
public function testAnInventedMenuButtonVariantIsRefused(): void
|
||||
{
|
||||
$document = DemoContent::starter('Erfunden');
|
||||
$document['schemaVersion'] = 16;
|
||||
$document['blocks'][0]['children'][] = ['id' => 'nav', 'type' => 'menu', 'props' => ['slot' => 'header', 'layout' => 'burger', 'burgerLabel' => 'gross']];
|
||||
$this->expectException(InvalidDocument::class);
|
||||
$this->pages->saveDraft('page-1', $document, 0);
|
||||
}
|
||||
|
||||
/** Die Farben des Menü-Knopfs liegen am Block und müssen am summary ankommen. */
|
||||
public function testTheMenuButtonTakesItsOwnColours(): void
|
||||
{
|
||||
$document = DemoContent::starter('Farbiger Knopf');
|
||||
$document['schemaVersion'] = 16;
|
||||
$document['blocks'][0]['children'][] = [
|
||||
'id' => 'nav', 'type' => 'menu', 'props' => ['slot' => 'header', 'layout' => 'burger'],
|
||||
'style' => ['desktop' => ['burgerColor' => '#294655', 'burgerBackgroundColor' => '#ffffff', 'burgerBorderColor' => '#d8e0d1', 'burgerBorderRadius' => '3px', 'burgerFontSize' => '14px']],
|
||||
];
|
||||
$this->menus->save('header', 'Hauptnavigation', [['label' => 'Start', 'type' => 'page', 'level' => 1, 'pageId' => 'page-1', 'position' => 10]], 0);
|
||||
$this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
|
||||
$html = $this->request('/')->getContent();
|
||||
self::assertStringContainsString('#nav .menu-burger>summary{color:#294655;background-color:#ffffff;border-color:#d8e0d1;border-radius:3px;font-size:14px}', $html);
|
||||
}
|
||||
|
||||
public function testAMenuLayoutNeedsSchemaSixteen(): void
|
||||
{
|
||||
$document = DemoContent::starter('Zu alt');
|
||||
@@ -3366,7 +3475,8 @@ final class CmsTest extends TestCase
|
||||
self::assertStringNotContainsString('#2c6b4f', $site, 'Der Einwilligungsdialog nimmt die Farbe der Website.');
|
||||
// Und er lässt sich eigens färben: eine Palettenfarbe mit dem Schlüssel „consent“ gewinnt
|
||||
// über die Primärfarbe, ohne dass es dafür eine weitere Einstellung braucht.
|
||||
self::assertStringContainsString('background:var(--k-consent,var(--accent))', $site);
|
||||
// Der Palettenschlüssel `consent` bleibt die Zwischenstufe hinter der eigenen Einstellung.
|
||||
self::assertStringContainsString('background:var(--kant-consent-accent,var(--k-consent,var(--accent)))', $site);
|
||||
self::assertStringNotContainsString('outline:3px solid #b85c12', $site, 'Auch der Fokusring folgt der Palette.');
|
||||
}
|
||||
|
||||
@@ -3554,6 +3664,133 @@ final class CmsTest extends TestCase
|
||||
yield 'slider missing a device' => ['slider', ['desktopVisible' => 3, 'tabletVisible' => 2, 'snap' => true]];
|
||||
}
|
||||
|
||||
public function testSocialProfilesAreMaintainedOnceAndShownWhereverTheBlockStands(): void
|
||||
{
|
||||
$this->site->save(['country' => 'DE', 'homePath' => 'home', 'sameAs' => 'https://kant-it.de', 'social' => [
|
||||
'instagram' => 'https://www.instagram.com/elektrobernhardgmbh/', 'facebook' => 'https://www.facebook.com/elektrobernhardgmbh',
|
||||
'x' => '',
|
||||
]]);
|
||||
self::assertSame(['facebook' => 'https://www.facebook.com/elektrobernhardgmbh', 'instagram' => 'https://www.instagram.com/elektrobernhardgmbh/'], $this->site->load()['social']);
|
||||
|
||||
$document = DemoContent::starter('Mit Profilen');
|
||||
$document['schemaVersion'] = 23;
|
||||
$document['blocks'][] = ['id' => 'so1', 'type' => 'social', 'props' => ['size' => 32, 'shape' => 'circle', 'layout' => 'horizontal', 'labels' => false, 'networks' => []]];
|
||||
$document['blocks'][] = ['id' => 'so2', 'type' => 'social', 'props' => ['size' => 20, 'shape' => 'plain', 'layout' => 'vertical', 'labels' => true, 'networks' => ['instagram'], 'newTab' => false]];
|
||||
$this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
|
||||
$html = $this->request('/')->getContent();
|
||||
// Die Reihenfolge ist die der festen Liste, nicht die der Eingabe; jeder Link trägt seinen Namen.
|
||||
self::assertMatchesRegularExpression('#<ul id="so1" class="block-social social-horizontal social-shape-circle social-size-32"[^>]*>.*facebook\.com.*instagram\.com.*</ul>#s', $html);
|
||||
self::assertStringContainsString('<span class="visually-hidden">Facebook</span>', $html);
|
||||
self::assertStringContainsString('href="https://www.facebook.com/elektrobernhardgmbh" target="_blank" rel="noopener"', $html);
|
||||
// Der zweite Block zeigt nur Instagram, beschriftet, im selben Tab.
|
||||
preg_match('#<ul id="so2"[^>]*>(.*?)</ul>#s', $html, $second);
|
||||
self::assertStringNotContainsString('facebook', $second[1]);
|
||||
self::assertStringContainsString('<span>Instagram</span>', $second[1]);
|
||||
self::assertStringNotContainsString('target="_blank"', $second[1]);
|
||||
self::assertStringContainsString('social-labels', $html);
|
||||
// Und die Profile stehen ohne zweite Pflege in den strukturierten Daten.
|
||||
$this->site->save(['country' => 'DE', 'homePath' => 'home', 'legalName' => 'Elektro Bernhard GmbH', 'sameAs' => 'https://kant-it.de', 'social' => ['facebook' => 'https://www.facebook.com/elektrobernhardgmbh']]);
|
||||
preg_match('#<script type="application/ld\+json">(.*?)</script>#s', $this->request('/')->getContent(), $match);
|
||||
self::assertSame(['https://kant-it.de', 'https://www.facebook.com/elektrobernhardgmbh'], json_decode(html_entity_decode($match[1], ENT_QUOTES), true)['sameAs']);
|
||||
// Ohne Profile bleibt die Seite still: kein leerer Baustein, keine Liste.
|
||||
$this->site->save(['country' => 'DE', 'homePath' => 'home']);
|
||||
self::assertStringNotContainsString('block-social', $this->request('/')->getContent());
|
||||
}
|
||||
|
||||
/** @return iterable<string, array{array<string, mixed>}> */
|
||||
public static function refusedSocialBlocks(): iterable
|
||||
{
|
||||
yield 'size off the list' => [['size' => 30, 'shape' => 'plain', 'layout' => 'horizontal', 'labels' => false, 'networks' => []]];
|
||||
yield 'unknown shape' => [['size' => 24, 'shape' => 'hexagon', 'layout' => 'horizontal', 'labels' => false, 'networks' => []]];
|
||||
yield 'unknown network' => [['size' => 24, 'shape' => 'plain', 'layout' => 'horizontal', 'labels' => false, 'networks' => ['myspace']]];
|
||||
yield 'labels as text' => [['size' => 24, 'shape' => 'plain', 'layout' => 'horizontal', 'labels' => 'ja', 'networks' => []]];
|
||||
}
|
||||
|
||||
#[DataProvider('refusedSocialBlocks')]
|
||||
public function testASocialBlockOnlyStoresWhatTheRendererKnows(array $props): void
|
||||
{
|
||||
$document = DemoContent::starter('Profile');
|
||||
$document['schemaVersion'] = 23;
|
||||
$document['blocks'][] = ['id' => 'so1', 'type' => 'social', 'props' => $props];
|
||||
$this->expectException(InvalidDocument::class);
|
||||
$this->pages->saveDraft('page-1', $document, 0);
|
||||
}
|
||||
|
||||
public function testOpeningHoursAndTheServiceAreaReachTheStructuredData(): void
|
||||
{
|
||||
$this->pages->publish('page-1', $this->pages->saveDraft('page-1', DemoContent::pages()['home'], 0), 1);
|
||||
$hours = [];
|
||||
foreach (['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] as $day) {
|
||||
$hours[$day] = ['opens' => '07:30', 'closes' => '17:00'];
|
||||
}
|
||||
$hours['Saturday'] = ['opens' => '09:00', 'closes' => '12:00'];
|
||||
$hours['Sunday'] = ['opens' => '', 'closes' => ''];
|
||||
$this->site->save(['country' => 'DE', 'homePath' => 'home', 'legalName' => 'Elektro Bernhard GmbH', 'street' => 'Ooser Hauptstr. 51', 'city' => 'Baden-Baden', 'localBusiness' => '1',
|
||||
'hours' => $hours, 'areaServed' => "Baden-Baden\nRastatt\n\nKarlsruhe, Offenburg\nRastatt"]);
|
||||
preg_match('#<script type="application/ld\+json">(.*?)</script>#s', $this->request('/')->getContent(), $match);
|
||||
$data = json_decode(html_entity_decode($match[1], ENT_QUOTES), true);
|
||||
// Gleiche Zeiten werden zu einer Angabe, der geschlossene Sonntag fehlt, Orte sind eindeutig.
|
||||
self::assertSame([
|
||||
['@type' => 'OpeningHoursSpecification', 'dayOfWeek' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], 'opens' => '07:30', 'closes' => '17:00'],
|
||||
['@type' => 'OpeningHoursSpecification', 'dayOfWeek' => ['Saturday'], 'opens' => '09:00', 'closes' => '12:00'],
|
||||
], $data['openingHoursSpecification']);
|
||||
self::assertSame(['Baden-Baden', 'Rastatt', 'Karlsruhe', 'Offenburg'], $data['areaServed']);
|
||||
}
|
||||
|
||||
public function testReSavingLoadedSettingsKeepsHoursAndServiceArea(): void
|
||||
{
|
||||
$this->site->save(['country' => 'DE', 'homePath' => 'home', 'hours' => ['Monday' => ['opens' => '07:30', 'closes' => '17:00']], 'areaServed' => 'Bühl
|
||||
Achern']);
|
||||
// So gibt das Anlegen der Rechtsseiten die Einstellungen zurück: geladen, unverändert.
|
||||
$loaded = $this->site->load();
|
||||
$this->site->save([...$loaded, 'sameAs' => '', 'consentGroups' => $loaded['consentGroups']]);
|
||||
self::assertSame([['day' => 'Monday', 'opens' => '07:30', 'closes' => '17:00']], $this->site->load()['openingHours']);
|
||||
self::assertSame(['Bühl', 'Achern'], $this->site->load()['areaServed']);
|
||||
}
|
||||
|
||||
/** @return iterable<string, array{array<string, mixed>}> */
|
||||
public static function refusedOpeningHours(): iterable
|
||||
{
|
||||
yield 'closes before opens' => [['Monday' => ['opens' => '17:00', 'closes' => '07:30']]];
|
||||
yield 'not a time' => [['Monday' => ['opens' => '7.30', 'closes' => '17:00']]];
|
||||
yield 'only one half' => [['Monday' => ['opens' => '07:30', 'closes' => '']]];
|
||||
}
|
||||
|
||||
#[DataProvider('refusedOpeningHours')]
|
||||
public function testOpeningHoursMustBeAPairOfTimes(array $hours): void
|
||||
{
|
||||
$this->expectException(InvalidPage::class);
|
||||
$this->site->save(['country' => 'DE', 'homePath' => 'home', 'hours' => $hours]);
|
||||
}
|
||||
|
||||
public function testAnAccordionMarkedAsFaqBecomesAFaqPage(): void
|
||||
{
|
||||
$document = DemoContent::starter('Fragen');
|
||||
$document['schemaVersion'] = 23;
|
||||
$item = static fn (string $id, string $q, string $a): array => ['id' => $id, 'type' => 'accordionitem', 'props' => ['title' => $q, 'open' => false], 'children' => '' === $a ? [] : [['id' => $id.'-t', 'type' => 'text', 'props' => ['text' => $a]]]];
|
||||
$document['blocks'][] = ['id' => 'faq', 'type' => 'accordion', 'props' => ['faq' => true], 'children' => [
|
||||
$item('f1', 'Wo sind Sie im Einsatz?', 'In <strong>Baden-Baden</strong> & Umgebung.'),
|
||||
$item('f2', 'Ohne Antwort?', ''),
|
||||
]];
|
||||
$document['blocks'][] = ['id' => 'plain', 'type' => 'accordion', 'children' => [$item('p1', 'Kein FAQ', 'Nur ein Akkordeon.')]];
|
||||
$this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
|
||||
preg_match_all('#<script type="application/ld\+json">(.*?)</script>#s', $this->request('/')->getContent(), $matches);
|
||||
$faq = array_values(array_filter(array_map(static fn (string $json): array => json_decode(html_entity_decode($json, ENT_QUOTES), true), $matches[1]), static fn (array $d): bool => 'FAQPage' === $d['@type']));
|
||||
self::assertCount(1, $faq);
|
||||
// Nur das gekennzeichnete Akkordeon, nur Einträge mit Antwort, ohne Auszeichnungen im Text.
|
||||
self::assertSame([['@type' => 'Question', 'name' => 'Wo sind Sie im Einsatz?', 'acceptedAnswer' => ['@type' => 'Answer', 'text' => 'In Baden-Baden & Umgebung.']]], $faq[0]['mainEntity']);
|
||||
// Ohne Schema v23 wird die Kennzeichnung abgewiesen.
|
||||
$document['schemaVersion'] = 22;
|
||||
$this->expectException(InvalidDocument::class);
|
||||
$this->pages->saveDraft('page-1', $document, 1);
|
||||
}
|
||||
|
||||
public function testASocialProfileMustBeAnHttpsAddress(): void
|
||||
{
|
||||
$this->expectException(InvalidPage::class);
|
||||
$this->site->save(['country' => 'DE', 'homePath' => 'home', 'social' => ['facebook' => 'http://facebook.com/x']]);
|
||||
}
|
||||
|
||||
#[DataProvider('refusedNewBlocks')]
|
||||
public function testRefusedNewBlocksNeverReachADocument(string $type, array $props): void
|
||||
{
|
||||
@@ -3674,6 +3911,44 @@ final class CmsTest extends TestCase
|
||||
self::assertSame(404, $this->request('/einwilligung')->getStatusCode());
|
||||
}
|
||||
|
||||
public function testTheConsentQuestionTakesLayoutShapeAndColoursFromTheSettings(): void
|
||||
{
|
||||
$this->pages->publish('page-1', $this->pages->saveDraft('page-1', DemoContent::pages()['home'], 0), 1);
|
||||
$this->askConsent();
|
||||
|
||||
// Standard: Karte, abgerundet, Themefarben - im Kopf stehen nur die Radien.
|
||||
$html = $this->request('/')->getContent();
|
||||
self::assertStringContainsString('consent-layout-karte', $html);
|
||||
self::assertStringContainsString('--kant-consent-radius:18px;--kant-consent-button-radius:10px', $html);
|
||||
self::assertStringNotContainsString('--kant-consent-bg', $html);
|
||||
self::assertStringContainsString('Externe Inhalte und Einwilligung', $html);
|
||||
|
||||
// Eigene Werte: Palette wird zur Variablen, ein unbekannter Schlüssel fällt weg statt
|
||||
// auf nichts zu zeigen, die Überschrift steht escaped im Markup.
|
||||
$this->site->save(['homePath' => 'home', 'consentBanner' => '1', 'consentGroups' => ['external'], 'privacyPath' => 'datenschutz',
|
||||
'consentLayout' => 'leiste', 'consentShape' => 'rund', 'consentTitle' => 'Cookies & Co.',
|
||||
'consentColor' => '#101820', 'consentInk' => '#ffffff', 'consentAccent' => '@ink', 'consentAccentInk' => '@nope']);
|
||||
$response = $this->request('/');
|
||||
$html = $response->getContent();
|
||||
self::assertStringContainsString('consent-layout-leiste', $html);
|
||||
self::assertStringContainsString('--kant-consent-radius:28px;--kant-consent-button-radius:999px;--kant-consent-bg:#101820;--kant-consent-ink:#ffffff;--kant-consent-accent:var(--k-ink)}', $html);
|
||||
self::assertStringNotContainsString('--kant-consent-accent-ink', $html);
|
||||
self::assertStringContainsString('Cookies & Co.', $html);
|
||||
self::assertStringContainsString("style-src 'self' 'sha256-", (string) $response->headers->get('Content-Security-Policy'));
|
||||
|
||||
// Die Einwilligungsseite trägt dieselben Werte, erlaubt per Hash und sonst nichts.
|
||||
$page = $this->request('/einwilligung');
|
||||
self::assertSame(200, $page->getStatusCode());
|
||||
self::assertStringContainsString('--kant-consent-bg:#101820', $page->getContent());
|
||||
$policy = (string) $page->headers->get('Content-Security-Policy');
|
||||
self::assertStringContainsString("style-src 'self' 'sha256-", $policy);
|
||||
self::assertStringContainsString("script-src 'none'", $policy);
|
||||
|
||||
// Eine Farbe, die weder Hex noch Palettenschlüssel ist, wird nicht gespeichert.
|
||||
$this->expectException(InvalidPage::class);
|
||||
$this->site->save(['homePath' => 'home', 'consentBanner' => '1', 'consentGroups' => ['external'], 'privacyPath' => 'datenschutz', 'consentColor' => 'red']);
|
||||
}
|
||||
|
||||
public function testTheQuestionAppearsUntilItIsAnsweredAndCanBeChangedAgain(): void
|
||||
{
|
||||
$document = DemoContent::pages()['home'];
|
||||
|
||||
Reference in new issue
Block a user