Website für Baumpflege in Seilklettertechnik. Angular 21, keine Cookies, kein Tracking, kein Formular-Backend.
Öffne vorschau.html per Doppelklick im Browser. Das ist eine statische
Kopie der Startseite, nur zum Anschauen. Sie wird aus dem Angular-Template
erzeugt (node tools/vorschau-bauen.mjs) und ist nicht die eigentliche Seite.
npm install
npm start # läuft auf http://localhost:4200
npm run build # Ergebnis liegt in dist/skt-raap/browser/
Falls npm install wegen Versionen zickt: Die Angular-Versionen ändern sich alle
sechs Monate. Der zuverlässigste Weg ist dann, ein frisches Gerüst zu bauen und
den Code hineinzukopieren:
npm create @angular@latest skt-raap -- --style=scss --ssr=false
# dann aus diesem Ordner src/, public/ und tools/ hinüberkopieren
src/app/shared/inhalt.ts öffnen und jede eckige Klammer ersetzen:
Vorname, Anschrift, Telefon, USt-Angabe, SKT-A-Jahr, Motorsägenschein,
Versicherer, Berufsgenossenschaft.src/app/pages/impressum/impressum.ts): Klammern füllen,
den gelben Redaktionskasten löschen, die Zeile zur EU-Plattform löschen.src/app/pages/datenschutz/datenschutz.ts): Hoster
eintragen, Löschfrist der Logfiles, Aufsichtsbehörde, Stand, Kasten raus.inhalt.ts an deine tatsächliche Lage
anpassen (wie viele Tage pro Woche, wie weit du fährst). Steht in inhalt.ts unter einsatzgebiet, aktuell Freiburg und Umgebung.home.html) eintragen.BILDER.md.public/fonts/LIESMICH.md.| Datei | Inhalt |
|---|---|
src/app/shared/inhalt.ts |
Alle Texte, Kontaktdaten, Bild-URLs |
src/app/pages/home/home.html |
Aufbau der Startseite |
src/app/pages/home/home.scss |
Layout der Startseite, inklusive Meterskala |
src/styles.scss |
Farben, Typo, Buttons, Rechtstext-Layout |
src/app/layout/ |
Kopf- und Fußzeile |
public/ |
Favicon, robots.txt, sitemap.xml, .htaccess, Schriften |
Wenn du Texte ändern willst: fast alles steckt in inhalt.ts. Die längeren
Absätze (Einstieg, „Meistens rufen andere Betriebe an”, „Kurz zu mir”,
Artenschutz) stehen direkt in home.html, weil sie sonst schlechter lesbar
wären.
Die Seite ist als Aufstieg gebaut. Links läuft eine Meterskala mit, an der die Abschnitte hängen wie Anschlagpunkte: 0 m Stammfuß, 6 m Kronenansatz, hoch bis 25 m Wipfel, und der Kontaktabschnitt bringt dich wieder auf 0 m. Ab Tablet ist die Skala sichtbar, auf dem Handy wird sie zu einer kleinen Zeile über der Überschrift.
Das ist bewusst die einzige auffällige Idee. Der Rest ist ruhig: eine Schrift, Altpapier-Grün als Grund, ein einziger Signalton in Seilgelb, keine Schatten, keine Animationen beim Scrollen. Die Leistungen sind eine Definitionsliste mit Haarlinien statt der üblichen Kachelwand.
Es gibt genau einen dunklen Block – den Artenschutz-Abschnitt. Der ist das Argument, das kein anderer Kletterer in deiner Preisklasse hat, deshalb steht er optisch heraus.
Das Ergebnis von npm run build (Inhalt von dist/skt-raap/browser/) auf den
Webspace laden. Wichtig: Angular ist eine Single-Page-App, jede Adresse muss auf
index.html zeigen, sonst gibt skt-raap.de/impressum einen 404.
.htaccess erledigt das._redirects liegt schon dabei.try_files $uri $uri/ /index.html; in den Server-Block.Für den Datenschutztext brauchst du außerdem einen Auftragsverarbeitungsvertrag mit dem Hoster. Bei den großen deutschen Anbietern liegt der im Kundenmenü zum Anhaken bereit.
Das Formular schickt nichts an einen Server. Es baut aus den Eingaben einen
mailto:-Link und öffnet das Mailprogramm des Besuchers. Vorteile: keine
Datenverarbeitung, kein Spamproblem, nichts, was kaputtgehen kann.
Nachteil: Wer im Browser kein Mailprogramm eingerichtet hat, kommt nicht weiter. Deshalb stehen E-Mail-Adresse und Telefonnummer direkt daneben im Klartext.
Wenn du irgendwann ein echtes Formular willst, ist ein Dienst wie Formspree oder eine kleine PHP-Datei auf dem eigenen Webspace der nächste Schritt – dann aber Datenschutzerklärung erweitern und eine Einwilligungs-Checkbox ergänzen.