v0.1.3

Android PWA-Installationshinweis mit direktem Install-Button hinzugefügt
Verbesserungen für PWA-Installations-Prompt: Mobile-Menü-Überlappung behoben, iOS safe-area Unterstützung, localStorage-Fehlerbehandlung und erweiterte standalone-Erkennung
2025-10-07 14:15:17 +02:00 · 2025-10-07 13:57:28 +02:00 · 2025-10-07 13:41:03 +02:00 · 2025-10-07 13:12:31 +02:00 · 2025-10-07 12:58:36 +02:00 · 2025-10-07 12:46:17 +02:00
19 changed files with 513 additions and 11 deletions
--- a/.env.example
+++ b/.env.example
@@ -10,7 +10,9 @@ RESEND_API_KEY=your_resend_api_key_here
 EMAIL_FROM=noreply@yourdomain.com
 ADMIN_EMAIL=admin@yourdomain.com
-# Frontend URL (for E-Mail Links)
+# Social media profiles
 TIKTOK_PROFILE=https://www.tiktok.com/@<dein Tiktok Profil>
 INSTAGRAM_PROFILE=https://www.instagram.com/<dein Instragram Profil>
 # Cancellation Policy (in hours)
 MIN_STORNO_TIMESPAN=24
--- a/10
+++ b/10
@@ -8,6 +8,16 @@ stargirlnails.de {
        health_uri /health
        health_interval 30s
        health_timeout 5s
        # Timeouts für lange laufende Verbindungen (Live-Queries)
        transport http {
            read_timeout 0
            write_timeout 0
            dial_timeout 30s
        }
        # Buffer-Flush für Server-Sent Events (SSE) aktivieren
        flush_interval -1
    }
    # Sicherheits-Header
--- a/index.html
+++ b/index.html
@@ -3,7 +3,13 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#ec4899" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="Stargirlnails" />
    <title>Stargirlnails Kiel - Terminbuchung</title>
  </head>
  <body>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "quests-template-basic",
  "private": true,
-  "version": "0.0.0",
+  "version": "0.1.3",
  "type": "module",
  "scripts": {
    "check:types": "tsc --noEmit",
--- a/public/icons/README.md
+++ b/public/icons/README.md
@@ -0,0 +1,45 @@
 # PWA Icons Required
 This directory must contain the following icon files for proper PWA installation on iOS and Android devices:
 ## Required Icon Files
 ### Android Icons
 - **icon-192x192.png** (192×192 pixels)
  - Used for Android home screen and app drawer
  - Should have transparent background or match theme color
  - Include safe zone padding for maskable icons (40px margin)
 - **icon-512x512.png** (512×512 pixels)
  - Used for Android splash screens and high-resolution displays
  - Should have transparent background or match theme color
  - Include safe zone padding for maskable icons (102px margin)
 ### iOS Icon
 - **apple-touch-icon.png** (180×180 pixels)
  - Used for iOS home screen
  - Should NOT have transparent background (iOS adds its own rounded corners)
  - Fill entire canvas with brand colors/logo
  - iOS automatically applies rounded corners and shadow
 ## Design Guidelines
 1. **Brand consistency**: Use Stargirlnails logo and brand colors
 2. **Theme color**: Primary pink (#ec4899) matches manifest theme_color
 3. **Contrast**: Ensure icon is visible on various backgrounds
 4. **Simplicity**: Icons should be recognizable at small sizes
 5. **No text**: Avoid small text that becomes unreadable when scaled
 ## Testing
 After adding icons:
 - Test on Android: Check home screen icon appearance
 - Test on iOS Safari: Add to home screen and verify icon quality
 - Validate with Lighthouse PWA audit
 ## Placeholder
 Until actual icons are created, you can use a favicon.png (if available) or generate placeholder icons using tools like:
 - https://realfavicongenerator.net/
 - https://www.pwabuilder.com/imageGenerator
--- a/public/icons/apple-touch-icon.png
+++ b/public/icons/apple-touch-icon.png
--- a/public/icons/icon-192x192.png
+++ b/public/icons/icon-192x192.png
--- a/public/icons/icon-512x512.png
+++ b/public/icons/icon-512x512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,32 @@
 {
  "name": "Stargirlnails Kiel - Terminbuchung",
  "short_name": "Stargirlnails",
  "description": "Online Terminbuchung für Nagelstudio Stargirlnails in Kiel",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ec4899",
  "orientation": "portrait",
  "lang": "de",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png"
    }
  ]
 }
--- a/src/client/app.tsx
+++ b/src/client/app.tsx
@@ -1,4 +1,6 @@
 import { useState, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { queryClient } from "@/client/rpc-client";
 import { useAuth } from "@/client/components/auth-provider";
 import { LoginForm } from "@/client/components/login-form";
 import { UserProfile } from "@/client/components/user-profile";
@@ -14,11 +16,18 @@ import BookingStatusPage from "@/client/components/booking-status-page";
 import ReviewSubmissionPage from "@/client/components/review-submission-page";
 import LegalPage from "@/client/components/legal-page";
 import { ProfileLanding } from "@/client/components/profile-landing";
 import { PWAInstallPrompt } from "@/client/components/pwa-install-prompt";
 function App() {
  const { user, isLoading, isOwner } = useAuth();
  const [activeTab, setActiveTab] = useState<"profile-landing" | "booking" | "admin-treatments" | "admin-bookings" | "admin-calendar" | "admin-availability" | "admin-gallery" | "admin-reviews" | "profile" | "legal">("profile-landing");
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const { data: socialMedia } = useQuery(
    queryClient.social.getSocialMedia.queryOptions()
  );
  const hasSocialMedia = (socialMedia as any)?.tiktokProfile || (socialMedia as any)?.instagramProfile;
  // Prevent background scroll when menu is open
  useEffect(() => {
@@ -28,10 +37,15 @@ function App() {
  // Handle booking status page
  const path = window.location.pathname;
  const PwaPrompt = <PWAInstallPrompt />;
  if (path.startsWith('/booking/')) {
    const token = path.split('/booking/')[1];
    if (token) {
-      return <BookingStatusPage token={token} />;
+      return <>
        {PwaPrompt}
        <BookingStatusPage token={token} />
      </>;
    }
  }
@@ -39,7 +53,10 @@ function App() {
  if (path.startsWith('/review/')) {
    const token = path.split('/review/')[1];
    if (token) {
-      return <ReviewSubmissionPage token={token} />;
+      return <>
        {PwaPrompt}
        <ReviewSubmissionPage token={token} />
      </>;
    }
  }
@@ -373,11 +390,44 @@ function App() {
        )}
      </main>
      {/* PWA Installation Prompt for iOS */}
      <PWAInstallPrompt hidden={isMobileMenuOpen} />
      {/* Footer */}
      <footer className="bg-white border-t border-pink-100 mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="text-center text-gray-600">
-            <p>&copy; 2025 Stargirlnails Kiel. Professional nail design & care with 🩷 and passion in Kiel 🌇.</p>
+            <p className="mb-4">&copy; 2025 Stargirlnails Kiel. Professional nail design & care with 🩷 and passion in Kiel 🌇.</p>
            {hasSocialMedia && (
              <div className="flex justify-center items-center gap-3 mt-4">
                {(socialMedia as any)?.instagramProfile && (
                  <a
                    href={(socialMedia as any).instagramProfile}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-pink-600 hover:text-pink-700 transition-colors"
                    aria-label="Instagram"
                  >
                    <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                    </svg>
                  </a>
                )}
                {(socialMedia as any)?.tiktokProfile && (
                  <a
                    href={(socialMedia as any).tiktokProfile}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-gray-800 hover:text-gray-900 transition-colors"
                    aria-label="TikTok"
                  >
                    <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
                    </svg>
                  </a>
                )}
              </div>
            )}
          </div>
        </div>
      </footer>
--- a/src/client/components/booking-form.tsx
+++ b/src/client/components/booking-form.tsx
@@ -11,9 +11,52 @@ export function BookingForm() {
  const [selectedTime, setSelectedTime] = useState("");
  const [notes, setNotes] = useState("");
  const [agbAccepted, setAgbAccepted] = useState(false);
  const [ageConfirmed, setAgeConfirmed] = useState(false);
  const [inspirationPhoto, setInspirationPhoto] = useState<string>("");
  const [photoPreview, setPhotoPreview] = useState<string>("");
  const [errorMessage, setErrorMessage] = useState<string>("");
  const [isInitialized, setIsInitialized] = useState(false);
  // Load saved customer data from localStorage on mount
  useEffect(() => {
    const savedName = localStorage.getItem("bookingForm_customerName");
    const savedEmail = localStorage.getItem("bookingForm_customerEmail");
    const savedPhone = localStorage.getItem("bookingForm_customerPhone");
    if (savedName) setCustomerName(savedName);
    if (savedEmail) setCustomerEmail(savedEmail);
    if (savedPhone) setCustomerPhone(savedPhone);
    setIsInitialized(true);
  }, []);
  // Save customer data to localStorage when it changes (after initial load)
  useEffect(() => {
    if (!isInitialized) return;
    if (customerName) {
      localStorage.setItem("bookingForm_customerName", customerName);
    } else {
      localStorage.removeItem("bookingForm_customerName");
    }
  }, [customerName, isInitialized]);
  useEffect(() => {
    if (!isInitialized) return;
    if (customerEmail) {
      localStorage.setItem("bookingForm_customerEmail", customerEmail);
    } else {
      localStorage.removeItem("bookingForm_customerEmail");
    }
  }, [customerEmail, isInitialized]);
  useEffect(() => {
    if (!isInitialized) return;
    if (customerPhone) {
      localStorage.setItem("bookingForm_customerPhone", customerPhone);
    } else {
      localStorage.removeItem("bookingForm_customerPhone");
    }
  }, [customerPhone, isInitialized]);
  const { data: treatments } = useQuery(
    queryClient.treatments.live.list.experimental_liveOptions()
@@ -147,6 +190,10 @@ export function BookingForm() {
      setErrorMessage("Bitte bestätige die Kenntnisnahme der Allgemeinen Geschäftsbedingungen.");
      return;
    }
    if (!ageConfirmed) {
      setErrorMessage("Bitte bestätige, dass du mindestens 16 Jahre alt bist.");
      return;
    }
    // Email validation now handled in backend before booking creation
    const appointmentTime = selectedTime;
@@ -181,6 +228,7 @@ export function BookingForm() {
          setSelectedTime("");
          setNotes("");
          setAgbAccepted(false);
          setAgeConfirmed(false);
          setInspirationPhoto("");
          setPhotoPreview("");
          setErrorMessage("");
@@ -383,7 +431,7 @@ export function BookingForm() {
        </div>
        {/* AGB Acceptance */}
-        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4 space-y-4">
          <div className="flex items-start space-x-3">
            <input
              type="checkbox"
@@ -409,6 +457,22 @@ export function BookingForm() {
              </p>
            </div>
          </div>
          <div className="flex items-start space-x-3">
            <input
              type="checkbox"
              id="age-confirmation"
              checked={ageConfirmed}
              onChange={(e) => setAgeConfirmed(e.target.checked)}
              className="mt-1 h-4 w-4 text-pink-600 focus:ring-pink-500 border-gray-300 rounded"
              required
            />
            <div className="flex-1">
              <label htmlFor="age-confirmation" className="text-sm font-medium text-gray-700 cursor-pointer">
                Ich bestätige, dass ich mindestens 16 Jahre alt bin *
              </label>
            </div>
          </div>
        </div>
        {/* Error Message */}
--- a/src/client/components/login-form.tsx
+++ b/src/client/components/login-form.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useAuth } from "@/client/components/auth-provider";
 export function LoginForm() {
@@ -6,9 +6,27 @@ export function LoginForm() {
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [isInitialized, setIsInitialized] = useState(false);
  const { login } = useAuth();
  // Load saved username from localStorage on mount
  useEffect(() => {
    const savedUsername = localStorage.getItem("loginForm_username");
    if (savedUsername) setUsername(savedUsername);
    setIsInitialized(true);
  }, []);
  // Save username to localStorage when it changes (after initial load)
  useEffect(() => {
    if (!isInitialized) return;
    if (username) {
      localStorage.setItem("loginForm_username", username);
    } else {
      localStorage.removeItem("loginForm_username");
    }
  }, [username, isInitialized]);
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
--- a/src/client/components/profile-landing.tsx
+++ b/src/client/components/profile-landing.tsx
@@ -57,6 +57,10 @@ export function ProfileLanding({ onNavigateToBooking }: ProfileLandingProps) {
    queryClient.recurringAvailability.live.listRules.experimental_liveOptions()
  );
  const { data: socialMedia } = useQuery(
    queryClient.social.getSocialMedia.queryOptions()
  );
  // Calculate next 7 days for opening hours
  const getNext7Days = () => {
    const days: Date[] = [];
@@ -84,12 +88,44 @@ export function ProfileLanding({ onNavigateToBooking }: ProfileLandingProps) {
        </p>
        <button
          onClick={onNavigateToBooking}
-          className="bg-pink-600 text-white py-4 px-8 rounded-lg hover:bg-pink-700 text-lg font-semibold shadow-lg transition-colors w-full md:w-auto"
+          className="bg-[#790dc6] text-white py-4 px-8 rounded-lg hover:bg-[#6609ad] text-lg font-semibold shadow-lg transition-colors w-full md:w-auto"
        >
          Termin buchen
        </button>
      </div>
      {/* Social Media Badges */}
      {((socialMedia as any)?.tiktokProfile || (socialMedia as any)?.instagramProfile) && (
        <div className="flex justify-center items-center gap-4">
          {(socialMedia as any)?.instagramProfile && (
            <a
              href={(socialMedia as any).instagramProfile}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white px-6 py-3 rounded-full hover:shadow-lg transition-all hover:scale-105 font-semibold"
            >
              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
              </svg>
              Instagram
            </a>
          )}
          {(socialMedia as any)?.tiktokProfile && (
            <a
              href={(socialMedia as any).tiktokProfile}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 bg-black text-white px-6 py-3 rounded-full hover:shadow-lg transition-all hover:scale-105 font-semibold"
            >
              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
              </svg>
              TikTok
            </a>
          )}
        </div>
      )}
      {/* Featured Section: Erstes Foto (Reihenfolge 0) */}
      {featuredPhoto && (
        <div className="bg-white rounded-lg shadow-lg p-0 overflow-hidden">
--- a/src/client/components/pwa-install-prompt.tsx
+++ b/src/client/components/pwa-install-prompt.tsx
@@ -0,0 +1,187 @@
 import { useEffect, useState } from 'react';
 interface BeforeInstallPromptEvent extends Event {
  prompt: () => Promise<void>;
  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
 }
 declare global {
  interface Navigator { standalone?: boolean }
  interface WindowEventMap {
    beforeinstallprompt: BeforeInstallPromptEvent;
  }
 }
 const LAST_SHOWN_KEY = 'pwaInstallPrompt_lastShown';
 const ANDROID_DISMISSED_KEY = 'pwaInstallPrompt_androidDismissed';
 function isIOS(): boolean {
  if (typeof navigator === 'undefined') return false;
  const ua = navigator.userAgent || '';
  const iOS = /iPhone|iPad|iPod/i.test(ua);
  const iPadOS13Plus = /Macintosh/.test(ua) && 'ontouchend' in document;
  return iOS || iPadOS13Plus;
 }
 function isSafari(): boolean {
  const ua = navigator.userAgent || '';
  const isSafari = /Safari/i.test(ua) && !/CriOS|FxiOS|EdgiOS/i.test(ua);
  return isSafari;
 }
 function isStandalone(): boolean {
  const navStandalone = (navigator as any)?.standalone === true;
  const mm = typeof window !== 'undefined' && window.matchMedia
    ? window.matchMedia('(display-mode: standalone)').matches
    : false;
  return Boolean(navStandalone || mm);
 }
 export function PWAInstallPrompt({ hidden = false }: { hidden?: boolean }) {
  if (hidden) return null;
  const [show, setShow] = useState(false);
  const [promptType, setPromptType] = useState<'ios' | 'android' | null>(null);
  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
  const [initialized, setInitialized] = useState(false);
  useEffect(() => {
    // Only run on client
    if (typeof window === 'undefined') return;
    // Check if already in standalone mode
    if (isStandalone()) {
      setInitialized(true);
      return;
    }
    // Handle iOS
    const isIOSDevice = isIOS() && isSafari();
    if (isIOSDevice) {
      let lastShown = 0;
      try {
        lastShown = Number(localStorage.getItem(LAST_SHOWN_KEY) || 0);
      } catch {}
      const oneWeek = 7 * 24 * 60 * 60 * 1000;
      const shouldShow = !lastShown || Date.now() - lastShown > oneWeek;
      if (shouldShow) {
        setPromptType('ios');
        setShow(true);
      }
      setInitialized(true);
      return;
    }
    // Handle Android (beforeinstallprompt)
    const handleBeforeInstall = (e: BeforeInstallPromptEvent) => {
      e.preventDefault();
      // Check if user has dismissed Android prompt before
      let dismissed = false;
      try {
        dismissed = localStorage.getItem(ANDROID_DISMISSED_KEY) === 'true';
      } catch {}
      if (!dismissed) {
        setDeferredPrompt(e);
        setPromptType('android');
        setShow(true);
      }
    };
    window.addEventListener('beforeinstallprompt', handleBeforeInstall);
    setInitialized(true);
    return () => {
      window.removeEventListener('beforeinstallprompt', handleBeforeInstall);
    };
  }, []);
  const dismiss = () => {
    if (promptType === 'ios') {
      try { localStorage.setItem(LAST_SHOWN_KEY, String(Date.now())); } catch {}
    } else if (promptType === 'android') {
      try { localStorage.setItem(ANDROID_DISMISSED_KEY, 'true'); } catch {}
    }
    setShow(false);
  };
  const handleAndroidInstall = async () => {
    if (!deferredPrompt) return;
    try {
      await deferredPrompt.prompt();
      const choiceResult = await deferredPrompt.userChoice;
      if (choiceResult.outcome === 'accepted') {
        console.log('PWA installation accepted');
      }
      setDeferredPrompt(null);
      setShow(false);
    } catch (error) {
      console.error('Error during PWA installation:', error);
    }
  };
  if (!initialized || !show || !promptType) return null;
  return (
    <div
      role="dialog"
      aria-label={promptType === 'android' ? 'PWA Installation' : 'PWA Installation Anleitung'}
      className="fixed bottom-0 left-0 right-0 z-50 px-4 pb-4"
      style={{ paddingBottom: `max(env(safe-area-inset-bottom), 1rem)` }}
    >
      <div className="relative max-w-3xl mx-auto rounded-xl shadow-lg bg-gradient-to-r from-pink-500 to-purple-600 text-white p-4 sm:p-6">
        <button aria-label="Hinweis schließen" onClick={dismiss} className="absolute top-2 right-2 text-white/90 hover:text-white text-2xl leading-none">×</button>
        {promptType === 'android' ? (
          // Android: Direct install button
          <div className="flex items-center gap-4">
            <div className="text-3xl">📱</div>
            <div className="flex-1">
              <h3 className="text-lg sm:text-xl font-bold mb-2">App installieren</h3>
              <p className="text-white/90 mb-3">
                Installiere Stargirlnails als App für schnellen Zugriff direkt vom Startbildschirm!
              </p>
              <div className="flex gap-2">
                <button
                  onClick={handleAndroidInstall}
                  className="bg-white text-pink-600 px-4 py-2 rounded-lg font-semibold hover:bg-pink-50 transition-colors"
                >
                  Jetzt installieren
                </button>
                <button
                  onClick={dismiss}
                  className="bg-white/20 text-white px-4 py-2 rounded-lg font-semibold hover:bg-white/30 transition-colors"
                >
                  Später
                </button>
              </div>
            </div>
          </div>
        ) : (
          // iOS: Manual instructions
          <div className="flex items-start gap-3">
            <div className="text-2xl">📱</div>
            <div className="flex-1">
              <h3 className="text-lg sm:text-xl font-bold mb-2">App installieren</h3>
              <p className="text-white/90 mb-2">So installierst du Stargirlnails als App auf deinem iPhone/iPad:</p>
              <ol className="list-decimal pl-5 space-y-1 text-white/95">
                <li>Öffne diese Seite in Safari (nicht Chrome oder andere Browser).</li>
                <li>Tippe auf das Teilen-Symbol (□↑) unten in der Mitte.</li>
                <li>Scrolle nach unten und wähle „Zum Home-Bildschirm".</li>
                <li>Tippe auf „Hinzufügen".</li>
              </ol>
              <p className="mt-3 text-sm text-white/90">✨ Schneller Zugriff, keine App-Store-Installation nötig, automatische Updates.</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
 }
 export default PWAInstallPrompt;
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -62,6 +62,9 @@ if (process.env.NODE_ENV === 'production') {
  app.use('/assets/*', serveStatic({ root: './dist' }));
 }
 app.use('/favicon.png', serveStatic({ path: './public/favicon.png' }));
 app.use('/AGB.pdf', serveStatic({ path: './public/AGB.pdf' }));
 app.use('/icons/*', serveStatic({ root: './public' }));
 app.use('/manifest.json', serveStatic({ path: './public/manifest.json' }));
 app.route("/rpc", rpcApp);
 app.route("/caldav", caldavApp);
--- a/src/server/lib/email-templates.ts
+++ b/src/server/lib/email-templates.ts
@@ -31,13 +31,18 @@ async function renderBrandedEmail(title: string, bodyHtml: string): Promise<stri
  const protocol = domain.includes('localhost') ? 'http' : 'https';
  const homepageUrl = `${protocol}://${domain}`;
  const instagramProfile = process.env.INSTAGRAM_PROFILE;
  const tiktokProfile = process.env.TIKTOK_PROFILE;
  const companyName = process.env.COMPANY_NAME || 'Stargirlnails Kiel';
  return `
  <div style="font-family: Arial, sans-serif; color: #0f172a; background:#fdf2f8; padding:24px;">
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:640px; margin:0 auto; background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06)">
      <tr>
        <td style="padding:24px 24px 0 24px; text-align:center;">
-          ${logo ? `<img src="${logo}" alt="Stargirlnails" style="width:120px; height:auto; display:inline-block;" />` : `<div style=\"font-size:24px\">💅</div>`}
+          ${logo ? `<img src="${logo}" alt="${companyName}" style="width:120px; height:auto; display:inline-block;" />` : `<div style=\"font-size:24px\">💅</div>`}
-          <h1 style="margin:16px 0 0 0; font-size:22px; color:#db2777;">${title}</h1>
+          <div style="margin:16px 0 4px 0; font-size:16px; font-weight:600; color:#64748b;">${companyName}</div>
          <h1 style="margin:0; font-size:22px; color:#db2777;">${title}</h1>
        </td>
      </tr>
      <tr>
@@ -49,6 +54,29 @@ async function renderBrandedEmail(title: string, bodyHtml: string): Promise<stri
          <div style="text-align:center; margin-bottom:16px;">
            <a href="${homepageUrl}" style="display: inline-block; background-color: #db2777; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 14px;">Zur Website</a>
          </div>
          ${(instagramProfile || tiktokProfile) ? `
          <div style="text-align:center; margin-bottom:16px;">
            <p style="font-size:14px; color:#64748b; margin:0 0 8px 0;">Folge uns auf Social Media:</p>
            <div style="display:inline-block;">
              ${instagramProfile ? `
              <a href="${instagramProfile}" target="_blank" rel="noopener noreferrer" style="display:inline-block; margin:0 6px; background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color:white; padding:10px 20px; text-decoration:none; border-radius:20px; font-size:14px; font-weight:600;">
                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" style="vertical-align:middle; margin-right:6px;">
                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                </svg>
                Instagram
              </a>
              ` : ''}
              ${tiktokProfile ? `
              <a href="${tiktokProfile}" target="_blank" rel="noopener noreferrer" style="display:inline-block; margin:0 6px; background:#000000; color:white; padding:10px 20px; text-decoration:none; border-radius:20px; font-size:14px; font-weight:600;">
                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" style="vertical-align:middle; margin-right:6px;">
                  <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
                </svg>
                TikTok
              </a>
              ` : ''}
            </div>
          </div>
          ` : ''}
          <div style="font-size:12px; color:#64748b; text-align:center;">
            &copy; ${new Date().getFullYear()} Stargirlnails Kiel • Professional Nail Care
          </div>
--- a/src/server/routes/client-entry.tsx
+++ b/src/server/routes/client-entry.tsx
@@ -30,12 +30,18 @@ export function clientEntry(c: Context<BlankEnv>) {
  }
  return c.html(
-    <html lang="en">
+    <html lang="de">
      <head>
        <meta charSet="utf-8" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta name="theme-color" content="#ec4899" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <meta name="apple-mobile-web-app-title" content="Stargirlnails" />
        <title>Stargirlnails Kiel</title>
        <link rel="icon" type="image/png" href="/favicon.png" />
        <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
        <link rel="manifest" href="/manifest.json" />
        {cssFiles && cssFiles.map((css: string) => (
          <link key={css} rel="stylesheet" href={css} />
        ))}
--- a/src/server/rpc/index.ts
+++ b/src/server/rpc/index.ts
@@ -7,6 +7,7 @@ import { router as cancellation } from "./cancellation.js";
 import { router as legal } from "./legal.js";
 import { router as gallery } from "./gallery.js";
 import { router as reviews } from "./reviews.js";
 import { router as social } from "./social.js";
 export const router = {
  demo,
@@ -18,4 +19,5 @@ export const router = {
  legal,
  gallery,
  reviews,
  social,
 };
--- a/src/server/rpc/social.ts
+++ b/src/server/rpc/social.ts
@@ -0,0 +1,13 @@
 import { os } from "@orpc/server";
 const getSocialMedia = os.handler(async () => {
  return {
    tiktokProfile: process.env.TIKTOK_PROFILE,
    instagramProfile: process.env.INSTAGRAM_PROFILE,
  };
 });
 export const router = os.router({
  getSocialMedia,
 });
Author	SHA1	Message	Date
elpatron	ca20516080	v0.1.3	2025-10-07 14:15:17 +02:00
elpatron	f2963ca951	Android PWA-Installationshinweis mit direktem Install-Button hinzugefügt	2025-10-07 13:57:28 +02:00
elpatron	8aea5bb400	Verbesserungen für PWA-Installations-Prompt: Mobile-Menü-Überlappung behoben, iOS safe-area Unterstützung, localStorage-Fehlerbehandlung und erweiterte standalone-Erkennung	2025-10-07 13:41:03 +02:00
elpatron	14d0c2f9c3	Add PWA manifest and apple-touch-icon meta tag	2025-10-07 13:12:31 +02:00
elpatron	eb9ddc535f	Add static serving for /icons/* and manifest.json	2025-10-07 12:58:36 +02:00
elpatron	8fa17f58c9	Add PWA icons (192x192, 512x512, apple-touch-icon)	2025-10-07 12:46:17 +02:00
elpatron	92ed7a2c93	feat: Firmenname aus .env in E-Mail-Titeln anzeigen - COMPANY_NAME wird aus .env gelesen - Wird in separater Zeile über dem eigentlichen Titel angezeigt - Format: Firmenname (grau, kleiner) + Titel (pink, größer) - Fallback auf 'Stargirlnails Kiel' wenn nicht gesetzt	2025-10-07 10:50:50 +02:00
elpatron	ce644c31e1	feat: Offizielle Social-Media-Icons in E-Mails - Ersetze Emojis (📷 🎵) durch offizielle SVG-Icons - Gleiche Icons wie auf der Startseite (Instagram & TikTok) - Inline SVG für bessere Darstellung in E-Mail-Clients - Icons sind 16x16px mit margin-right für besseren Abstand	2025-10-07 10:44:30 +02:00
elpatron	3b67c26216	feat: Altersbestätigung (16+) im Buchungsformular - Neue Pflicht-Checkbox: Mindestalter 16 Jahre - Direkt unter der AGB-Checkbox platziert - Validierung beim Absenden des Formulars - Wird nach erfolgreicher Buchung zurückgesetzt	2025-10-07 10:19:43 +02:00
elpatron	f2fed22ea1	fix: AGB.pdf Download funktioniert jetzt - Route für /AGB.pdf hinzugefügt (serveStatic) - AGB.pdf wird aus dem public-Verzeichnis bereitgestellt - Behebt Problem, dass Link zur Startseite führte	2025-10-07 10:17:59 +02:00
elpatron	ab5e5e67a6	feat: Login-Formular merkt sich Benutzername - Benutzername wird in localStorage gespeichert - Beim nächsten Login automatisch ausgefüllt - Verbessert UX für wiederkehrende Logins	2025-10-07 10:14:15 +02:00
elpatron	78a379546c	feat: Buchungsformular merkt sich Benutzerdaten - Name, E-Mail und Telefonnummer werden in localStorage gespeichert - Beim nächsten Besuch werden die Felder automatisch ausgefüllt - Verbessert die User Experience für wiederkehrende Buchungen	2025-10-07 10:13:06 +02:00
elpatron	953a970220	fix: Caddy-Timeouts für Live-Queries deaktiviert - read_timeout und write_timeout auf 0 gesetzt für unbegrenzte SSE-Verbindungen - flush_interval -1 für sofortiges Flushen von Streaming-Daten - Behebt 'context canceled' Fehler bei /rpc/recurringAvailability/live/listRules	2025-10-07 09:47:26 +02:00
elpatron	c7d9fc689e	style: Button 'Termin buchen' dunkler für besseren Kontrast (#790dc6)	2025-10-07 09:40:59 +02:00
elpatron	f4593cd706	feat: Social-Media-Badges für TikTok und Instagram hinzugefügt - Neue RPC-Route für Social-Media-URLs aus .env (social.ts) - Social-Media-Badges auf der Startseite mit attraktiven Buttons - Social-Media-Icons im Footer aller Seiten - Social-Media-Links in allen E-Mail-Templates - URLs aus .env: TIKTOK_PROFILE und INSTAGRAM_PROFILE	2025-10-07 09:32:06 +02:00