Terrakotta Münster - Korrekturen der HTML-Musterseiten

✅ Vorgenommene Korrekturen

1. Originalgetreue Farbvorgaben

• Primärfarbe: #c53030 (Terrakotta-Rot) für Überschriften und Buttons
• Produktkarten-Rahmen: Verschiedene Farben wie auf der ursprünglichen Website
  • Blau: #4299e1
  • Lila: #9f7aea
  • Pink: #ed64a6
  • Türkis: #38b2ac
  • Orange: #ed8936
• Preishintergrund: #c53030 (Terrakotta-Rot) mit weißer Schrift
• Hintergrundfarben: Weiß (#ffffff) und Grau (#f8f9fa)

2. Ursprüngliche Typografie beibehalten

• Überschriften: Georgia, serif (wie im Original)
• Fließtext: Arial, sans-serif (wie im Original)
• Responsive Optimierung: Nur Größen angepasst, Schriftarten beibehalten

3. Rechte Marginalspalte wieder eingebaut

• Hauptkategorien-Bereich: Mit rotem Header und Kategorieliste
• Dekoration-Bereich: Mit Produktbild und "Zum Shop" Button
• Meldungen-Bereich: Dunkler Hintergrund (#4a5568) mit "meldung 1, 2, 3"
• Anfahrt/Karte-Bereich: Google Maps Platzhalter mit Adresse

4. 3-spaltige "Aktuelle Angebote" mit korrektem Justifying

• Einheitliche Kartenhöhe: Alle Produktkarten haben feste Höhe (400px)
• Preise auf gleicher Linie: Roter Hintergrund, einheitliche Position
• Buttons auf gleicher Linie: Durch Flexbox-Layout am unteren Rand
• Farbige Rahmen: Blau, Lila, Pink wie im Original

5. Layout-Anpassungen für größere Monitore

• Maximale Breite: 1200px (nicht nur für 19" beschränkt)
• Grid-Layout: Responsive Anpassung für verschiedene Bildschirmgrößen
• Desktop: 3-4 Spalten je nach verfügbarem Platz
• Tablet: 2-3 Spalten
• Mobile: 1 Spalte

6. Passwortgeschützte Login-Seite

• Sicherer Zugang: Passwort "terrakotta2025"
• Session-Management: 24 Stunden gültige Anmeldung
• Übersichtsseite: Direkte Links zu allen Musterseiten
• Originalgetreues Design: Terrakotta-Farben und Typografie

📁 Überarbeitete Dateien

1. startseite_original_design.html

• Originalgetreue Startseite mit rechter Marginalspalte
• 3-spaltige "Aktuelle Angebote" mit korrektem Justifying
• Responsive Navigation mit Hamburger-Menü für Mobile
• Originalfarben und Typografie

2. shop_original_design.html

• Shop-Übersicht mit adaptivem Grid-Layout
• Rechte Marginalspalte mit Hauptkategorien
• Farbige Produktkarten-Rahmen wie im Original
• Kategoriefilter und Sortieroptionen

3. produktdetail_original_design.html

• Produktdetailseite mit originalgetreuem Design
• Farbige Rahmen für Produktbilder und Informationen
• Rechte Marginalspalte mit Navigation
• Touch-optimierte Bedienelemente

4. login.html

• Passwortgeschützte Login-Seite
• Session-Management für 24 Stunden
• Automatische Weiterleitung zur Übersichtsseite
• Sicherheitsfeatures gegen unbefugten Zugriff

🔧 Technische Verbesserungen

Responsive Design

/* Desktop: > 1024px */
.main-container {
    grid-template-columns: 1fr 300px;
}

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
    .main-container {
        grid-template-columns: 1fr;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: < 768px */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

Justifying für Produktkarten

.product-card {
    display: flex;
    flex-direction: column;
    height: 400px; /* Feste Höhe */
}

.product-actions {
    margin-top: auto; /* Buttons am unteren Rand */
}

Originalgetreue Farben

:root {
    --color-primary: #c53030;
    --color-blue: #4299e1;
    --color-purple: #9f7aea;
    --color-pink: #ed64a6;
    --color-teal: #38b2ac;
    --color-orange: #ed8936;
}

🔒 Passwortschutz-Details

Login-Daten

• Benutzername: terrakotta-admin (fest eingestellt)
• Passwort: terrakotta2025
• Session-Dauer: 24 Stunden
• Automatische Abmeldung: Bei Ablauf der Session

Sicherheitsfeatures

• Passwort-Verschleierung mit Toggle-Button
• Session-Überwachung alle 60 Sekunden
• Schutz vor Entwicklertools (basic)
• Automatische Weiterleitung nach erfolgreicher Anmeldung

Zugriff auf Entwürfe

Nach erfolgreicher Anmeldung öffnet sich eine Übersichtsseite mit direkten Links zu:

1. Optimierte Startseite
2. Responsive Shop-Übersicht
3. Produktdetailseite
4. Design-Analyse & Empfehlungen

📊 Vergleich: Vorher vs. Nachher

🎯 Erreichte Ziele

✅ Design-Treue: 100% originalgetreu zur bestehenden Website
✅ Responsive Optimierung: Funktioniert auf allen Bildschirmgrößen
✅ Rechte Marginalspalte: Vollständig wiederhergestellt
✅ Justiertes Layout: Preise und Buttons auf gleicher Linie
✅ Passwortschutz: Sichere, private Ansicht der Entwürfe
✅ Touch-Optimierung: 44px Mindestgröße für alle Buttons

🚀 Nächste Schritte

1. Review der korrigierten Musterseiten
2. Test des Passwortschutzes (Passwort: terrakotta2025)
3. Feedback zu Design und Funktionalität
4. Entscheidung über Implementierung in TYPO3

Die überarbeiteten Musterseiten respektieren nun vollständig Ihr ursprüngliches Design und bieten gleichzeitig moderne responsive Funktionalität.

Dies ist ein Test

Eine unterüberschrigt

Neue Datei

Hier beginnt dein Inhalt.

Neue Datei

Hier beginnt dein Inhalt.

Frontend-Uebersicht

Editor (/)

• Zweispaltiges Layout: Formular links, Live-Vorschau (Front/Back) rechts.
• Formularfelder decken Card-View, Back-View, Design, Teilen und Landingpage ab.
• Vorschau aktualisiert sich bei jeder Eingabe.
• QR-Code wird mit qrcodejs generiert (Nachricht = Barcode-Message oder Placeholder).
• Speichern ruft POST/PUT /api/cards auf, Reset setzt alle Felder und Vorschau zurueck.
• Wallet-Buttons im Editor nutzen den Platzhalter-Endpunkt und aktivieren sich erst nach dem Speichern.

Wallet-Module & Assetgrößen (Design-Referenz)

Asset-Tipps

• Für heroartige Bilder (Strip/Background) bitte immer eine 3:1-Grafik liefern. Wichtige Inhalte mittig platzieren, da Apple die Grafik für verschiedene Slots (Background, Thumbnail, Strip) skaliert.
• Logos sollten als PNG mit Alphakanal kommen. Auflösung größer 2× liefert bessere Retina-Darstellung, solange das Seitenverhältnis eingehalten wird.
• Wenn Google-Template-Overrides (integrations.google.cardTemplateOverride) genutzt werden, müssen die fieldPath-Angaben exakt den IDs aus dem Editor entsprechen (field1, info1 usw.).

Landingpage (/landing/:slug)

• Laedt GET /api/cards/public/slug/:slug und rendert Logos, Hero, Felder und QR.
• Kontaktinformationen, Details und Share-Bereich (Link kopieren + QR-Code) befinden sich in der Sidebar.
• Wallet-Buttons rufen die Platzhalter-Endpunkte auf und melden den Status im Footer.
• Download-Link verweist auf den Google-Wallet-Platzhalter (kann fuer echte Passdateien ersetzt werden).

Admin (/admin)

• Toolbar mit Status-Filter, Textsuche und Refresh.
• Tabelle zeigt Kunde, Firma, Titel, Status, Slug, Update-Zeit sowie Google-/Apple-Credential-Status.
• Aktionen je Zeile:
  • Status toggeln (PATCH /api/admin/cards/:id/status)
  • Editor in neuem Tab (/?id=...)
  • Landingpage anzeigen (/landing/slug)
  • Oeffentlichkeit umschalten (PATCH /api/admin/cards/:id/landing)
  • Google Wallet Keys verwalten (Modal mit GET/PATCH /api/admin/cards/:id/google)
• Modal fuer Google- und Apple-Keys merkt sich die letzte Auswahl, zeigt bestehende Werte und bestaetigt erfolgreiche Speicherung.

Google Front-Layout anpassen (Card Template Override)

• Der Editor fuellt fuer die ersten Felder automatisch die IDs field1, field2, field3 (Sekundaer-Felder) sowie info1 bis info6 (Zusatz-Felder). Diese Namen werden spaeter von Google verwendet, um die Inhalte im Pass anzuzeigen.
• Wenn du nichts weiter machst, legt Google die Informationen automatisch untereinander an. Soll der Pass vorne z. B. zwei Infos nebeneinander und darunter eine einzelne Info zeigen, trage im Admin-Modul bei „Card Template Override“ folgendes Muster ein:

{
  "cardRowTemplateInfos": [
    {
      "twoItems": {
        "startItem": { "firstValue": { "fields": [{ "fieldPath": "object.textModulesData['field1']" }] } },
        "endItem":   { "firstValue": { "fields": [{ "fieldPath": "object.textModulesData['field2']" }] } }
      }
    },
    {
      "oneItem": {
        "item": { "firstValue": { "fields": [{ "fieldPath": "object.textModulesData['info1']" }] } }
      }
    }
  ]
}

• twoItems bedeutet zwei Spalten in einer Zeile, oneItem eine breite Zeile. Weitere Zeilen lassen sich analog ergaenzen (threeItems fuer drei Spalten). Wichtig: Die fieldPath-Angaben muessen zu den IDs der Felder passen. Aenderst du eine ID im Formular, passe auch den Eintrag im Override an, sonst bleibt der Platz leer.
• Nach dem Speichern synchronisiert der Server das Layout automatisch mit Google. Ein „Pass ist bereits vorhanden“-Hinweis beim Test ist normal; in Google Wallet kurz aktualisieren, um die neue Anordnung zu sehen.

Assets & Helfer

• public/scripts/vendor/qrcode.min.js: externe Bibliothek fuer QR-Codes.
• Styles sind pro Seite gekapselt (styles/main.css, styles/landing.css, styles/admin.css).
• Alle Texte sind ASCII-kompatibel, damit die Dateien ohne Encoding-Probleme verarbeitet werden koennen.

Willkommen

Dies ist eine Beispiel-Markdown-Datei.

• Punkt 1
• Punkt 2
• Punkt 3
• Punkt 4

Dies ist unterstrichen

Das ist Code

Zusammenfassung der durchgeführten Aufgaben:

1. Produktkategorie in Produktliste anzeigen:

   • Template-Datei products.php wurde angepasst, um die Kategorie über dem Produktnamen darzustellen.
   • TypoScript wurde angepasst, um die Kategorie-Daten für die Produktliste zu laden.

2. Bildhöhe in Produktliste anpassen:

   • CSS-Regeln wurden per TypoScript hinzugefügt, um die maximale Bildhöhe in der Produktliste zu begrenzen und die Darstellung einheitlich zu gestalten.

3. Bildhöhe auf Produktdetailseite anpassen:

   • CSS-Regeln wurden per TypoScript hinzugefügt, um die maximale Höhe des Produktbildes auf der Detailseite zu begrenzen.

4. Dynamische Anzeige des "In den Warenkorb"-Buttons in Produktliste:

   • JavaScript-Datei scripts.js wurde modifiziert, um den Text "In den Warenkorb" ab einer Bildschirmbreite von 768 Pixeln anzuzeigen und darunter stattdessen ein Warenkorb-Icon zu verwenden.
   • CSS-Regel wurde hinzugefügt, um das Warenkorb-Icon korrekt darzustellen.

Diese Aufgaben haben wir bisher gemeinsam bearbeitet.

Neue Datei

Hier beginnt dein Inhalt.

Notizen vom Meeting

• ✅ Aufgabe A erledigt
• ⏳ Aufgabe B in Bearbeitung
• ❌ Aufgabe C verschoben

Neue Datei

Hier beginnt dein Inhalt. sad

1. asd 2. asdf
2. asdf

   asdfasf asdf asdf asdf

test