Erstellung dieser Website
in Blick hinter die Kulissen: Wie diese Website mit Hilfe von KI entwickelt wurde
Erstellung dieser Website
Ein Blick hinter die Kulissen: Wie diese Website mit Hilfe von KI entwickelt wurde
Der Original-Prompt
Ich möchte eine neue Webseite für das Startup Gehring.ai erstellen.
Technologisch sollte diese mit PHP erstellt werden. Als Server kommt NGINX mit PHP Erweiterung sowie Authelia für die Authentication zum Einsatz. Ein traefik Reverse Proxy ist der Seite vorgeschaltet. Alles läuft auf Docker.
Die web-Seite sollte einfach aufgebaut sein mit
- Index.php File welches ein sicheres handling aller Konfigurationen und die validierung der Aufrufe behandelt.
- Header.php welches ein einfaches Menu mit Home, Services und Login
- Site.php (mehrere files?) welches den content ausspielt in Abhängigkeit des aufgerufenen menus und ob anonymous oder eingelogged
- Footer.php mit den klassischen Informationen wie Kontaktaufnahme, etc.
Folgende Acceptance Kriterien sollten berücksichtigt werden:
- Die Webseite ist unter https://gehring.ai aufrufbar.
- Authentication ist unter https://gehring.ai/auth
- Das Login unterscheidet zwischen den Rollen User und Admin. Entsprechen kann auch unterschiedlicher content ausgespielt werden.
- Im eingeloggten Zustand habe ich unter User ein untermenu zu logout, password und user Profil, welches neben dem Namen auch ein Profilfoto beinhaltet
- Erstelle je eine Beispiel für eine Person mit der Rolle User und Admin
- Die Hauptseite sollte einen Text zur Firma beinhalteten welche AI Consulting anbietet. Erstelle hierzu einen Vorschlag
- Die Seite hat oben links vor dem Firmennamen ein Logo, welches auch als Site Icon zum Einsatz kommt.
- Das Design soll einfach und klassisch und klar daher kommen. Einige Farbtupfer als Störfarben sind erwünscht.
Erstellte Komponenten
Grundstruktur
Ein modulares PHP-System mit sicherem Routing und Benutzerauthentifizierung.
- index.php mit Routing-Logik
- header.php mit Navigation
- footer.php mit Kontaktdaten
- Inhaltsseiten für verschiedene Menüpunkte
Design & Branding
Ein klares, modernes Design mit definierter Farbpalette.
- Logo als SVG
- Favicon für Browser
- Responsive Layout
- Einheitliche Typografie
Benutzerrollen
Unterschiedliche Zugriffsebenen und angepasste Inhalte.
- Anonyme Besucher
- Eingeloggte User
- Administratoren
- Profilmanagement
Rechtliche Dokumente
Nach Schweizer Recht angepasste rechtliche Seiten.
- Impressum
- Datenschutzerklärung
Technische Details
Verwendete Technologien
- Frontend: HTML5, CSS3
- Backend: PHP
- Server: NGINX mit PHP-Erweiterung
- Authentication: Authelia
- Reverse Proxy: Traefik
- Container: Docker
Sicherheitsmaßnahmen
- Input-Validierung gegen XSS-Angriffe
- Sichere Authentifizierung via Authentik
- HTTPS-Verschlüsselung
- Zugriffskontrolle basierend auf Benutzerrollen