changed to .md

config.js

@@ -0,0 +1,50 @@
+// config.js - Zentrale Konfiguration für WhoPays App
+
+export const CONFIG = {
+  A: {
+    name: "Lumpia",              // Name Marc
+    colorHex: "#6495ED",       // Farbe: Blau
+    colorDiscord: 0x6495ed,    //  Discord Embed
+    icon: "a.png",             // Profilbild
+    background: "bgA.jpg"      // Hintergrundbild
+  },
+  B: {
+    name: "Pierogi",             // Name Laila
+    colorHex: "#3C0061",       // Farbe: Lila
+    colorDiscord: 0x3C0061,    // Discord Embed
+    icon: "b.png",             // Profilbild
+    background: "bgB.jpg"      // Hintergrundbild
+  }
+};
+
+// Discord Webhook URL
+export const DISCORD_WEBHOOK_URL = process.env.DISCORD_WEBHOOK_URL;
+
+// Server URL (für Discord Thumbnails)
+export const PUBLIC_BASE_URL = process.env.PUBLIC_BASE_URL 
+  || "http://localhost:3000";
+
+// Port
+export const PORT = process.env.PORT || 3000;
+
+/*
+ * ANLEITUNG ZUM ANPASSEN:
+ * 
+ * 1. Namen ändern:
+ *    name: "DeinName"
+ * 
+ * 2. Farben ändern (Web und Discord müssen gleich sein):
+ *    colorHex: "#3498db"       // Hex-Format für Web
+ *    colorDiscord: 0x3498db    // Hex ohne # für Discord
+ * 
+ *    Beispiele:
+ *    Blau:   colorHex: "#3498db", colorDiscord: 0x3498db
+ *    Lila:   colorHex: "#9b59b6", colorDiscord: 0x9b59b6
+ *    Orange: colorHex: "#e67e22", colorDiscord: 0xe67e22
+ *    Pink:   colorHex: "#e91e63", colorDiscord: 0xe91e63
+ * 
+ * 3. Bilder ändern:
+ *    icon: "mein-bild.png"
+ *    background: "mein-hintergrund.jpg"
+ *    (Dateien müssen in /root/whopays/img/ liegen!)
+ */

public/index.html

@@ -3,10 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="icon" type="image/x-icon" href="icons/icon-192.png">
     
     <!-- PWA Meta Tags -->
     <link rel="manifest" href="/manifest.json" />
-    <meta name="theme-color" content="#ec4899" />
     <meta name="mobile-web-app-capable" content="yes" />
     
     <!-- iOS Specific -->
@@ -18,7 +18,7 @@
     <!-- Android Specific -->
     <meta name="mobile-web-app-capable" content="yes" />
     
-    <title>Wer zahlt?</title>
+    <title>Who Pays?</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
     
@@ -73,7 +73,7 @@
         />
         <div
           id="personName"
-          class="text-3xl font-semibold text-blue-800 transition-all duration-500"
+          class="text-3xl font-semibold transition-all duration-500"
         >
           Lädt ...
         </div>

public/manifest.json

@@ -1,12 +1,12 @@
 {
-  "name": "Wer zahlt? - Who Pays",
+  "name": "WhoPays? Who's turn is it",
   "short_name": "WhoPays",
-  "description": "Entscheide spielerisch, wer zahlt",
+  "description": "Battle on who's gonna pay.",
   "start_url": "/",
   "scope": "/",
   "display": "standalone",
-  "background_color": "#fef3c7",
-  "theme_color": "#ec4899",
+  "background_color": "#5F9EA0",
+  "theme_color": "#556B2F",
   "orientation": "portrait-primary",
   "categories": ["utilities", "lifestyle"],
   "icons": [

public/script.js

@@ -6,6 +6,9 @@ const lastReasonBox = document.getElementById("lastReasonBox");
 const lastReasonText = document.getElementById("lastReasonText");
 const mainContent = document.getElementById("mainContent");
 
+// Config wird vom Server geladen
+let CONFIG = null;
+
 // Preload images to prevent flickering
 const imageCache = {};
 function preloadImage(src) {
@@ -25,14 +28,44 @@ function preloadImage(src) {
   });
 }
 
+// Config vom Server laden
+async function loadConfig() {
+  try {
+    const res = await fetch("/config");
+    CONFIG = await res.json();
+    console.log("✅ Config geladen:", CONFIG);
+    return CONFIG;
+  } catch (err) {
+    console.error("❌ Fehler beim Laden der Config:", err);
+    // Fallback zur alten Konfiguration
+    CONFIG = {
+      A: {
+        name: "Honey",
+        colorHex: "#2ecc71",
+        icon: "a.png",
+        background: "bgA.jpg"
+      },
+      B: {
+        name: "Kirby",
+        colorHex: "#e74c3c",
+        icon: "b.png",
+        background: "bgB.jpg"
+      }
+    };
+    return CONFIG;
+  }
+}
+
 // Preload all images on page load
 async function preloadAllImages() {
+  if (!CONFIG) await loadConfig();
+  
   try {
     await Promise.all([
-      preloadImage('img/a.png'),
-      preloadImage('img/b.png'),
-      preloadImage('img/bgA.jpg'),
-      preloadImage('img/bgB.jpg')
+      preloadImage(`img/${CONFIG.A.icon}`),
+      preloadImage(`img/${CONFIG.B.icon}`),
+      preloadImage(`img/${CONFIG.A.background}`),
+      preloadImage(`img/${CONFIG.B.background}`)
     ]);
     console.log("✅ Alle Bilder vorgeladen");
   } catch (err) {
@@ -41,7 +74,8 @@ async function preloadAllImages() {
 }
 
 async function loadStatus() {
-  // Preload images first
+  // Config und Bilder laden
+  await loadConfig();
   await preloadAllImages();
   
   const res = await fetch("/status");
@@ -63,9 +97,16 @@ async function loadStatus() {
 }
 
 function setBackgroundAndImage(person, animate = true) {
-  const file = person === "A" ? "img/a.png" : "img/b.png";
-  const label = person === "A" ? "Lumpa" : "Pierogi";
-  const bgImage = person === "A" ? "url('img/bgA.jpg')" : "url('img/bgB.jpg')";
+  if (!CONFIG) {
+    console.error("Config nicht geladen!");
+    return;
+  }
+
+  const personConfig = CONFIG[person];
+  const file = `img/${personConfig.icon}`;
+  const label = personConfig.name;
+  const bgImage = `url('img/${personConfig.background}')`;
+  const nameColor = personConfig.colorHex;
 
   // Set background immediately (smooth transition via CSS)
   document.body.style.backgroundImage = bgImage;
@@ -75,10 +116,11 @@ function setBackgroundAndImage(person, animate = true) {
   if (animate) {
     img.classList.add("rotate");
     
-    // Change image and name in the middle of rotation
+    // Change image, name and color in the middle of rotation
     setTimeout(() => {
       img.src = file;
       nameEl.textContent = label;
+      nameEl.style.color = nameColor;
     }, 300); // Half of rotation duration
     
     // Remove rotation class after animation
@@ -89,6 +131,7 @@ function setBackgroundAndImage(person, animate = true) {
     // First load - no animation
     img.src = file;
     nameEl.textContent = label;
+    nameEl.style.color = nameColor;
   }
 }
 

public/style.css

@@ -39,8 +39,8 @@
 }
 
 #personName {
-  will-change: opacity;
-  transition: opacity 0.3s ease;
+  will-change: opacity, color;
+  transition: opacity 0.3s ease, color 0.3s ease;
 }
 
 /* Background transition */

readme.md

@@ -0,0 +1,360 @@
+# 💸 WhoPays - Who Pays Next?
+
+Ein einfaches, elegantes Tool um zu entscheiden, wer als nächstes zahlt - mit Discord-Benachrichtigungen und PWA-Support!
+
+![Version](https://img.shields.io/badge/version-1.0.0-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+![PWA](https://img.shields.io/badge/PWA-Ready-purple)
+
+## 🎯 Features
+
+- ✅ **Wechsel zwischen zwei Personen** - Einfacher Button-Klick
+- 🎨 **Individuelle Farben & Namen** - Komplett anpassbar
+- 📝 **Grund-Angabe** - Optional Grund für den Wechsel angeben
+- 🔔 **Discord-Benachrichtigungen** - Automatische Webhooks mit farbigen Embeds
+- 💾 **Persistenter Speicher** - Letzter Grund bleibt nach Container-Restart erhalten
+- 📱 **PWA-Support** - Als App auf Handy & Desktop installierbar
+- 🎭 **Animierte Übergänge** - Smooth Hintergrund- und Profilbild-Wechsel
+- 🐳 **Docker-Ready** - Einfache Deployment mit Docker Compose
+- 🔒 **Reverse-Proxy kompatibel** - Funktioniert mit Nginx, Caddy, Traefik, etc.
+
+---
+
+## 🚀 Quick Start
+
+### Voraussetzungen
+
+- Docker & Docker Compose
+- Discord Webhook URL (optional)
+- Profilbilder (a.png, b.png)
+- Hintergrundbilder (bgA.jpg, bgB.jpg)
+
+### Installation
+
+```bash
+# 1. Repository klonen oder Dateien herunterladen
+git clone https://github.com/dein-username/whopays.git
+cd whopays
+
+# 2. Bilder hinzufügen
+cp deine-bilder/* img/
+
+# 3. config.js anpassen (siehe Konfiguration)
+nano config.js
+
+# 4. Docker Container starten
+docker-compose up -d
+
+# 5. Öffne http://localhost:3000
+```
+
+**Das war's!** 🎉
+
+---
+
+## ⚙️ Konfiguration
+
+### config.js - Zentrale Konfiguration
+
+Alle Einstellungen sind in **einer** Datei:
+
+```javascript
+// config.js
+export const CONFIG = {
+  A: {
+    name: "Alice",              // Name Person A
+    colorHex: "#2ecc71",        // Farbe im Web (Grün)
+    colorDiscord: 0x2ecc71,     // Farbe in Discord (gleich!)
+    icon: "a.png",              // Profilbild
+    background: "bgA.jpg"       // Hintergrundbild
+  },
+  B: {
+    name: "Bob",                // Name Person B
+    colorHex: "#e74c3c",        // Farbe im Web (Rot)
+    colorDiscord: 0xe74c3c,     // Farbe in Discord (gleich!)
+    icon: "b.png",              // Profilbild
+    background: "bgB.jpg"       // Hintergrundbild
+  }
+};
+
+// Discord Webhook (optional)
+export const DISCORD_WEBHOOK_URL = "https://discord.com/api/webhooks/...";
+
+// Öffentliche URL (für Discord Thumbnails)
+export const PUBLIC_BASE_URL = "https://your-domain.com";
+```
+
+### Farben ändern
+
+```javascript
+// Blau & Orange
+A: { colorHex: "#3498db", colorDiscord: 0x3498db }
+B: { colorHex: "#e67e22", colorDiscord: 0xe67e22 }
+
+// Lila & Pink
+A: { colorHex: "#9b59b6", colorDiscord: 0x9b59b6 }
+B: { colorHex: "#e91e63", colorDiscord: 0xe91e63 }
+
+// Türkis & Gold
+A: { colorHex: "#1abc9c", colorDiscord: 0x1abc9c }
+B: { colorHex: "#f39c12", colorDiscord: 0xf39c12 }
+```
+
+**Wichtig:** Hex-Farbe muss genau 6 Zeichen haben (0-9, A-F)!
+
+---
+
+## 📂 Projektstruktur
+
+```
+whopays/
+├── config.js                 # Zentrale Konfiguration
+├── server.js                 # Express Server
+├── package.json              # Node.js Dependencies
+├── Dockerfile               # Docker Build Instructions
+├── docker-compose.yml       # Docker Compose Config
+├── state.json              # Persistent State (auto-generiert)
+│
+└── public/                  # Statische Dateien
+    ├── index.html          # Frontend HTML
+    ├── script.js           # Frontend JavaScript
+    ├── style.css           # CSS Animationen
+    ├── manifest.json       # PWA Manifest
+    ├── service-worker.js   # PWA Service Worker
+    │
+    └── img/                # Bilder
+        ├── a.png           # Profilbild Person A
+        ├── b.png           # Profilbild Person B
+        ├── bgA.jpg         # Hintergrund Person A
+        ├── bgB.jpg         # Hintergrund Person B
+        ├── icon-192.png    # PWA Icon (192x192)
+        └── icon-512.png    # PWA Icon (512x512)
+```
+
+---
+
+## 🐳 Docker Deployment
+
+### docker-compose.yml
+
+```yaml
+version: '3.8'
+
+services:
+  whopays:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
+      - PUBLIC_BASE_URL=https://your-domain.com
+      - DISCORD_WEBHOOK_URL = "https://discord.com/api/webhooks/...";
+    volumes:
+      # Bilder (persistent)
+      - ./img:/app/public/img
+      
+      # State (persistent über Neustarts)
+      - ./state.json:/app/state.json
+    
+    restart: unless-stopped
+```
+
+### Befehle
+
+```bash
+# Container starten
+docker-compose up -d
+
+# Logs anschauen
+docker-compose logs -f
+
+# Container neustarten
+docker-compose restart
+
+# Container stoppen
+docker-compose down
+
+# Neu bauen (nach Code-Änderungen)
+docker-compose down
+docker-compose build --no-cache
+docker-compose up -d
+```
+
+---
+
+## 📱 PWA Installation
+
+### iOS (Safari)
+
+1. Öffne die Website in Safari
+2. Tippe auf das **Teilen**-Symbol (⎙)
+3. Scrolle und tippe **"Zum Home-Bildschirm"**
+4. Tippe **"Hinzufügen"**
+
+### Android (Chrome)
+
+1. Öffne die Website in Chrome
+2. Tippe auf **Menü** (⋮)
+3. Tippe **"App installieren"**
+4. Tippe **"Installieren"**
+
+### Desktop (Chrome/Edge)
+
+1. Öffne die Website
+2. Klicke auf das **⊕ Icon** in der Adressleiste
+3. Oder: Menü → "WhoPays installieren"
+
+**Wichtig:** PWA funktioniert nur über HTTPS (oder localhost)!
+
+---
+
+## 🔒 Reverse Proxy Setup
+
+### Nginx
+
+```nginx
+server {
+    listen 443 ssl http2;
+    server_name whopays.your-domain.com;
+    
+    # PWA Files - NO AUTH
+    location ~ ^/(service-worker\.js|manifest\.json)$ {
+        proxy_pass http://localhost:3000;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        add_header Service-Worker-Allowed "/" always;
+    }
+    
+    # Main app
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+### Caddy (Einfachste Option!)
+
+```caddy
+whopays.your-domain.com {
+    reverse_proxy localhost:3000
+}
+```
+
+Caddy macht automatisch HTTPS mit Let's Encrypt! ✅
+
+---
+
+## 🔧 API Endpoints
+
+### GET /status
+
+```bash
+curl http://localhost:3000/status
+```
+
+Response:
+```json
+{
+  "current": "A",
+  "lastReason": "Pizza bestellt"
+}
+```
+
+### POST /toggle
+
+```bash
+curl -X POST http://localhost:3000/toggle \
+  -H "Content-Type: application/json" \
+  -d '{"reason":"Kaffee trinken"}'
+```
+
+Response:
+```json
+{
+  "current": "B",
+  "name": "Bob",
+  "lastReason": "Kaffee trinken"
+}
+```
+
+### GET /config
+
+```bash
+curl http://localhost:3000/config
+```
+
+---
+
+## 🐛 Troubleshooting
+
+### PWA lässt sich nicht installieren
+
+- Stelle sicher, dass du HTTPS verwendest
+- Prüfe ob `manifest.json` erreichbar ist
+- Icons müssen existieren: `icon-192.png` und `icon-512.png`
+
+### Discord sendet keine Benachrichtigungen
+
+- Prüfe Webhook URL in `config.js`
+- Logs prüfen: `docker-compose logs | grep Discord`
+- Stelle sicher `PUBLIC_BASE_URL` ist korrekt
+
+### Bilder werden nicht angezeigt
+
+- Prüfe ob Bilder in `/img/` existieren
+- Berechtigungen: `chmod -R 755 img/`
+- Container neu starten
+
+### Farbe in Discord ungültig (HTTP 400)
+
+- Hex-Farbe muss genau 6 Zeichen haben
+- ✅ Richtig: `0x2ecc71`
+- ❌ Falsch: `0x2ecc71c` (extra Buchstabe!)
+
+---
+
+## 📊 Features im Detail
+
+### Persistent Storage
+
+```json
+{
+  "current": "A",
+  "lastReason": "Restaurant bezahlt"
+}
+```
+
+Bleibt erhalten durch Docker Volume Mount.
+
+### Smooth Animations
+
+- Rotation-Animation (0.6s)
+- Background-Transition (0.6s)
+- Farb-Übergang (0.3s)
+- Image Preloading
+
+---
+
+## 📜 Lizenz
+
+MIT License - Frei nutzbar!
+
+---
+
+## 💡 Tipps
+
+### Custom Domain mit Let's Encrypt
+
+```bash
+sudo certbot --nginx -d whopays.your-domain.com
+```
+
+### Mehrere Instanzen
+
+Unterschiedliche Ports in docker-compose.yml für mehrere Apps!
+
+---
+
+**Viel Spaß beim Entscheiden, wer zahlt!** 🎉💸

server.js

@@ -2,6 +2,7 @@ import express from "express";
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
+import { CONFIG, DISCORD_WEBHOOK_URL, PUBLIC_BASE_URL, PORT } from "./config.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -37,25 +38,6 @@ app.use(express.static(path.join(__dirname, "public"), {
 
 const stateFile = path.join(__dirname, "state.json");
 
-// --------------------
-// Konfiguration
-// --------------------
-const CONFIG = {
-  A: {
-    name: "Marc",
-    color: 0x2ecc71,
-    icon: "a.png"
-  },
-  B: {
-    name: "Laila",
-    color: 0xe74c3c,
-    icon: "b.png"
-  }
-};
-
-const PUBLIC_BASE_URL = process.env.PUBLIC_BASE_URL || "http://localhost:3000";
-const DISCORD_WEBHOOK_URL = process.env.DISCORD_WEBHOOK_URL || "https://discord.com/api/webhooks/1450872860607381515/zRbiXOykKPUfLJ_H87wD2OxQJPLdro6yQzU2T48Pg4fxSNaXEqBFgxdHGTiIDmmKGHIF";
-
 // --------------------
 // State Handling - MIT PERSISTENT lastReason
 // --------------------
@@ -103,21 +85,25 @@ async function sendDiscordEmbed(previousKey, currentKey, reason) {
   const previous = CONFIG[previousKey];
   const current = CONFIG[currentKey];
 
-  if (!DISCORD_WEBHOOK_URL) return;
+  if (!DISCORD_WEBHOOK_URL) {
+    console.log("⚠️ DISCORD_WEBHOOK_URL nicht gesetzt, keine Benachrichtigung gesendet");
+    return;
+  }
 
   const fields = [
     {
-      name: "Von",
+      name: "Paid",
       value: previous.name,
       inline: true
     },
     {
-      name: "Zu",
+      name: "Now's turn",
       value: current.name,
       inline: true
     }
   ];
 
+  // Grund hinzufügen falls vorhanden
   if (reason) {
     fields.push({
       name: "📝 Grund",
@@ -127,9 +113,9 @@ async function sendDiscordEmbed(previousKey, currentKey, reason) {
   }
 
   const embed = {
-    title: "💸 Zahl-Wechsel",
-    description: `**${current.name}** ist jetzt dran zu zahlen`,
-    color: current.color,
+    title: "💸 Pay-Switch",
+    description: `**${current.name}**'s turn`,
+    color: current.colorDiscord,
     thumbnail: {
       url: `${PUBLIC_BASE_URL}/img/${current.icon}`
     },
@@ -139,22 +125,56 @@ async function sendDiscordEmbed(previousKey, currentKey, reason) {
     }
   };
 
+  // Debug-Ausgabe
+  console.log(`\n📤 Sende Discord Webhook:`);
+  console.log(`   Von: ${previous.name} → Zu: ${current.name}`);
+  console.log(`   Grund: ${reason || '(keiner)'}`);
+  console.log(`   Farbe: 0x${current.colorDiscord.toString(16)}`);
+  console.log(`   Webhook URL: ${DISCORD_WEBHOOK_URL.substring(0, 50)}...`);
+
   try {
-    await fetch(DISCORD_WEBHOOK_URL, {
+    const response = await fetch(DISCORD_WEBHOOK_URL, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ embeds: [embed] })
     });
-    console.log("✅ Discord Benachrichtigung gesendet");
+
+    if (response.ok) {
+      console.log(`✅ Discord Benachrichtigung gesendet (HTTP ${response.status})`);
+    } else {
+      const errorText = await response.text();
+      console.error(`❌ Discord Webhook Fehler (HTTP ${response.status}):`, errorText);
+    }
   } catch (err) {
     console.error("❌ Discord Webhook Fehler:", err.message);
   }
+  console.log(""); // Leerzeile für bessere Lesbarkeit
 }
 
 // --------------------
 // API Routes
 // --------------------
 
+// Config API endpoint - sendet Config an Frontend
+app.get("/config", (req, res) => {
+  // Nur relevante Daten fürs Frontend senden
+  const frontendConfig = {
+    A: {
+      name: CONFIG.A.name,
+      colorHex: CONFIG.A.colorHex,
+      icon: CONFIG.A.icon,
+      background: CONFIG.A.background
+    },
+    B: {
+      name: CONFIG.B.name,
+      colorHex: CONFIG.B.colorHex,
+      icon: CONFIG.B.icon,
+      background: CONFIG.B.background
+    }
+  };
+  res.json(frontendConfig);
+});
+
 app.get("/status", (req, res) => {
   const state = getState();
   res.json(state);
@@ -175,12 +195,12 @@ app.post("/toggle", async (req, res) => {
   setState(state);
 
   const logMessage = reason
-    ? `Zahl-Wechsel: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name} (Grund: ${reason})`
-    : `Zahl-Wechsel: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name}`;
+    ? `Pay-Switch: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name} (Grund: ${reason})`
+    : `Pay-Switch: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name} (kein Grund)`;
   
   console.log(logMessage);
 
-  // Discord Benachrichtigung
+  // Discord Benachrichtigung - IMMER senden, auch ohne Grund!
   await sendDiscordEmbed(previousKey, state.current, reason);
 
   res.json({
@@ -221,7 +241,6 @@ app.use((err, req, res, next) => {
 // --------------------
 // Start
 // --------------------
-const PORT = process.env.PORT || 3000;
 app.listen(PORT, "0.0.0.0", () => {
   console.log(`\n✅ WhoPays läuft auf http://0.0.0.0:${PORT}\n`);
   console.log(`📁 Static files directory: ${path.join(__dirname, "public")}`);
@@ -233,6 +252,18 @@ app.listen(PORT, "0.0.0.0", () => {
   console.log(`   👤 Wer zahlt: ${CONFIG[initialState.current].name}`);
   console.log(`   📝 Letzter Grund: ${initialState.lastReason || 'Keiner gespeichert'}`);
   
+  console.log(`\n👥 Konfigurierte Personen:`);
+  console.log(`   A: ${CONFIG.A.name} (${CONFIG.A.colorHex})`);
+  console.log(`   B: ${CONFIG.B.name} (${CONFIG.B.colorHex})`);
+  
+  // Discord Webhook Test
+  console.log(`\n🔔 Discord Webhook:`);
+  if (DISCORD_WEBHOOK_URL) {
+    console.log(`   ✅ Konfiguriert: ${DISCORD_WEBHOOK_URL.substring(0, 50)}...`);
+  } else {
+    console.log(`   ❌ NICHT konfiguriert!`);
+  }
+  
   // Verify critical files exist
   const criticalFiles = [
     'public/index.html',