Eine festliche, responsive Website für die Silvester-Planung mit kollaborativer Einkaufsliste, optimiert für GitHub Pages.

• 🎨 Festliches Black & Gold Design
• 📱 Responsive Layout für alle Geräte
• ✅ Kollaborative Einkaufsliste mit Firebase Realtime Database
• ⚡ Echtzeit-Synchronisation zwischen allen Benutzern
• 🚀 Einfache GitHub Pages Deployment

1. Erstelle ein neues GitHub Repository (z.B. silvester-party)
2. Lade alle Dateien hoch:
   • index.html
   • styles.css
   • script.js
   • firebase-config.js
   • README.md

1. Gehe zu deinem Repository auf GitHub
2. Klicke auf Settings > Pages
3. Unter Source wähle Deploy from a branch
4. Wähle main (oder master) Branch und / (root) Ordner
5. Klicke auf Save
6. Die Website ist nach ein paar Minuten verfügbar unter: https://[DEIN-USERNAME].github.io/[REPOSITORY-NAME]/

1. Gehe zu Firebase Console
2. Klicke auf Add project oder wähle ein bestehendes Projekt
3. Folge den Anweisungen zum Erstellen des Projekts

1. Im Firebase Console, gehe zu Build > Firestore Database
2. Klicke auf Create Database
3. Wähle einen Standort (z.B. europe-west1)
4. Starte im Testmodus (für schnelles Setup)
5. Klicke auf Enable

1. Gehe zu Project Settings (Zahnrad-Symbol)
2. Scrolle nach unten zu Your apps
3. Falls noch keine Web-App vorhanden, klicke auf </> Icon
4. Registriere die App (Name: z.B. "Silvester Party")
5. Kopiere die Firebase-Konfiguration

1. Öffne firebase-config.js in deinem Editor
2. Ersetze die Platzhalter mit deinen Firebase-Werten:

const firebaseConfig = {
  apiKey: 'DEINE_API_KEY',
  authDomain: 'DEIN_PROJECT_ID.firebaseapp.com',
  projectId: 'DEIN_PROJECT_ID',
  storageBucket: 'DEIN_PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'DEINE_MESSAGING_SENDER_ID',
  appId: 'DEINE_APP_ID'
};

1. Gehe zu Firestore Database > Rules
2. Ersetze die Rules mit folgendem (für öffentlichen Lese-/Schreibzugriff):

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /shoppingList/{itemId} {
      allow read, write: if true;
    }
  }
}

Wichtig: Diese Rules erlauben öffentlichen Zugriff. Für Produktionsumgebungen sollten Sie Authentifizierung implementieren.

3. Klicke auf Publish

1. Klone das Repository:

git clone https://github.com/[DEIN-USERNAME]/[REPOSITORY-NAME].git
cd [REPOSITORY-NAME]

2. Öffne firebase-config.js und füge deine Firebase-Konfiguration ein

3. Öffne index.html in einem Browser oder nutze einen lokalen Server:

# Mit Python
python -m http.server 8000

# Mit Node.js (http-server)
npx http-server

# Mit PHP
php -S localhost:8000

4. Öffne http://localhost:8000 im Browser

silvester-party/
├── index.html          # Haupt-HTML-Datei
├── css/
│   ├── variables.css   # CSS Variablen & Basis-Styles
│   ├── layout.css      # Navigation, Hero, Sections
│   ├── components.css  # Komponenten (Shopping List, Timeline, etc.)
│   └── responsive.css  # Media Queries für responsive Design
├── script.js           # Firebase Integration & Interaktivität
├── firebase-config.js  # Firebase Konfiguration (hier eintragen!)
├── README.md           # Diese Datei
└── plan.md             # Original Planungsdokument

• Einkaufsliste: Alle Checkboxen sind mit Firebase Firestore verbunden
• Echtzeit-Sync: Änderungen eines Benutzers erscheinen sofort bei allen anderen
• Status-Anzeige: Zeigt den Verbindungsstatus zu Firebase an
• Offline-Funktion: Funktioniert auch ohne Firebase (lokale Checkboxen)

1. Prüfe, ob firebase-config.js korrekt ausgefüllt ist
2. Prüfe die Browser-Konsole auf Fehlermeldungen (F12)
3. Stelle sicher, dass Firestore Database aktiviert ist
4. Prüfe die Security Rules in Firebase Console

1. Prüfe die Browser-Konsole auf Fehler
2. Stelle sicher, dass Firestore im Testmodus läuft oder die Security Rules korrekt sind
3. Prüfe in Firebase Console > Firestore Database > Data, ob Daten gespeichert werden

1. Warte 1-2 Minuten (GitHub Pages braucht Zeit zum Aktualisieren)
2. Leere den Browser-Cache (Strg+F5)
3. Prüfe, ob alle Dateien committed und gepusht wurden

Dieses Projekt ist für private Nutzung erstellt.

Bei Fragen oder Problemen, erstelle ein Issue im GitHub Repository.