Localize app to German, implement auto-save to gallery, always-on camera stream, fix expo-media-library and expo-file-system deprecation/compile errors

2026-05-25 21:39:15 +02:00
parent 99634bb480
commit d8e397eac1
9 changed files with 474 additions and 135 deletions
@@ -53,42 +53,42 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS
        if (success) {
          setKioskActive(true);
          Alert.alert(
-            'Kiosk Mode Started',
+            'Kiosk-Modus gestartet',
            isDeviceOwner
-              ? 'True Kiosk Mode active. System navigation buttons are completely locked.'
-              : 'Screen Pinning initiated. Accept the OS prompt to lock the screen.'
+              ? 'Echter Kiosk-Modus aktiv. Die System-Navigationsleiste ist vollständig gesperrt.'
+              : 'Bildschirmheftung (Screen Pinning) gestartet. Bitte bestätige das Systemfenster, um den Bildschirm zu sperren.'
          );
        } else {
-          Alert.alert('Error', 'Failed to start Kiosk Mode.');
+          Alert.alert('Fehler', 'Kiosk-Modus konnte nicht gestartet werden.');
        }
      } else {
        const success = KioskMode.stopKiosk();
        if (success) {
          setKioskActive(false);
-          Alert.alert('Kiosk Mode Stopped', 'System navigation buttons are unlocked.');
+          Alert.alert('Kiosk-Modus beendet', 'Die Navigationstasten des Systems sind wieder freigegeben.');
        } else {
-          Alert.alert('Error', 'Failed to stop Kiosk Mode.');
+          Alert.alert('Fehler', 'Kiosk-Modus konnte nicht beendet werden.');
        }
      }
    } catch (e: any) {
-      Alert.alert('Native Error', e.message || 'Kiosk module error');
+      Alert.alert('Nativer Fehler', e.message || 'Fehler im Kiosk-Modul');
    }
  };

  const handleSave = async () => {
    const duration = parseInt(countdown, 10);
    if (isNaN(duration) || duration < 1 || duration > 30) {
-      Alert.alert('Invalid Input', 'Countdown duration must be a number between 1 and 30 seconds.');
+      Alert.alert('Ungültige Eingabe', 'Die Countdown-Dauer muss eine Zahl zwischen 1 und 30 Sekunden sein.');
      return;
    }

    if (!printerIp.trim()) {
-      Alert.alert('Invalid Input', 'Printer IP address cannot be empty.');
+      Alert.alert('Ungültige Eingabe', 'Die Drucker-IP-Adresse darf nicht leer sein.');
      return;
    }

    if (!password.trim() || password.length < 4) {
-      Alert.alert('Invalid Input', 'Admin password must be at least 4 digits.');
+      Alert.alert('Ungültige Eingabe', 'Das Admin-Passwort muss mindestens 4 Ziffern lang sein.');
      return;
    }

@@ -102,33 +102,33 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS
    try {
      await saveSettings(updated);
      onSave(updated);
-      Alert.alert('Success', 'Settings saved successfully!');
+      Alert.alert('Erfolg', 'Einstellungen erfolgreich gespeichert!');
    } catch (e) {
-      Alert.alert('Error', 'Failed to save settings to disk.');
+      Alert.alert('Fehler', 'Einstellungen konnten nicht gespeichert werden.');
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.headerRow}>
-        <Text style={styles.title}>SCHNAPPIX SETTINGS</Text>
+        <Text style={styles.title}>SCHNAPPIX EINSTELLUNGEN</Text>
        <TouchableOpacity style={styles.closeBtn} onPress={onClose}>
-          <Text style={styles.closeBtnText}>Back to Booth</Text>
+          <Text style={styles.closeBtnText}>Zurück zur Fotobox</Text>
        </TouchableOpacity>
      </View>

      <ScrollView contentContainerStyle={styles.scrollContent}>
        {/* Printer Configurations */}
        <View style={styles.card}>
-          <Text style={styles.cardTitle}>Printer Configuration</Text>
+          <Text style={styles.cardTitle}>Drucker-Konfiguration</Text>
          <Text style={styles.cardDesc}>
-            Configure the local IP address of your Wi-Fi connected Canon CP1300 printer.
+            Konfiguriere die lokale IP-Adresse deines über WLAN verbundenen Canon CP1300 Druckers.
          </Text>
          <View style={styles.inputGroup}>
-            <Text style={styles.label}>Printer IP Address</Text>
+            <Text style={styles.label}>Drucker IP-Adresse</Text>
            <TextInput
              style={styles.input}
-              placeholder="e.g. 192.168.1.100"
+              placeholder="z.B. 192.168.1.100"
              placeholderTextColor={THEME.colors.textMuted}
              value={printerIp}
              onChangeText={setPrinterIp}
@@ -139,12 +139,12 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS

        {/* Booth Behavior */}
        <View style={styles.card}>
-          <Text style={styles.cardTitle}>Photo Booth Behavior</Text>
+          <Text style={styles.cardTitle}>Fotobox-Verhalten</Text>
          <View style={styles.inputGroup}>
-            <Text style={styles.label}>Countdown Duration (seconds)</Text>
+            <Text style={styles.label}>Countdown-Dauer (Sekunden)</Text>
            <TextInput
              style={styles.input}
-              placeholder="Default: 3"
+              placeholder="Standard: 3"
              placeholderTextColor={THEME.colors.textMuted}
              value={countdown}
              onChangeText={setCountdown}
@@ -152,10 +152,10 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS
            />
          </View>
          <View style={styles.inputGroup}>
-            <Text style={styles.label}>Admin Panel Password</Text>
+            <Text style={styles.label}>Admin-Passwort</Text>
            <TextInput
              style={styles.input}
-              placeholder="Default: 1234"
+              placeholder="Standard: 1234"
              placeholderTextColor={THEME.colors.textMuted}
              secureTextEntry
              value={password}
@@ -167,33 +167,33 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS

        {/* Security & Kiosk Mode */}
        <View style={styles.card}>
-          <Text style={styles.cardTitle}>Kiosk Mode & Security</Text>
+          <Text style={styles.cardTitle}>Kiosk-Modus & Sicherheit</Text>
          <Text style={styles.cardDesc}>
-            Lock the screen to prevent guests from closing the app or opening system settings.
+            Sperre den Bildschirm, um zu verhindern, dass Gäste die App schließen oder auf die Systemeinstellungen zugreifen.
          </Text>
          
          <View style={styles.statusRow}>
-            <Text style={styles.statusLabel}>Kiosk Mode State:</Text>
+            <Text style={styles.statusLabel}>Kiosk-Modus Status:</Text>
            <Text style={[styles.statusValue, kioskActive ? styles.statusActive : styles.statusInactive]}>
-              {kioskActive ? 'LOCKED 🔒' : 'UNLOCKED 🔓'}
+              {kioskActive ? 'GESPERRT 🔒' : 'ENTSPERRT 🔓'}
            </Text>
          </View>

          <View style={styles.statusRow}>
-            <Text style={styles.statusLabel}>Device Owner Mode:</Text>
+            <Text style={styles.statusLabel}>Device-Owner-Modus:</Text>
            <Text style={[styles.statusValue, isDeviceOwner ? styles.statusActive : styles.statusWarning]}>
-              {isDeviceOwner ? 'ACTIVE (True Lock) ✅' : 'INACTIVE (Screen Pinning Fallback) ⚠️'}
+              {isDeviceOwner ? 'AKTIV (Echte Sperre) ✅' : 'INAKTIV (Screen Pinning Fallback) ⚠️'}
            </Text>
          </View>
          
          {!isDeviceOwner && (
            <Text style={styles.kioskWarningText}>
-              Note: To enable True Lock task mode without prompt bypasses, make the app device owner using ADB.
+              Hinweis: Um den echten Lock-Task-Modus ohne Bestätigungsaufforderung zu aktivieren, mache die App mittels ADB zum Device Owner.
            </Text>
          )}

          <View style={styles.toggleRow}>
-            <Text style={styles.toggleLabel}>Lock Screen (Kiosk Mode)</Text>
+            <Text style={styles.toggleLabel}>Bildschirm sperren (Kiosk-Modus)</Text>
            <Switch
              value={kioskActive}
              onValueChange={handleKioskToggle}
@@ -204,7 +204,7 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS
        </View>

        <TouchableOpacity style={styles.saveBtn} onPress={handleSave}>
-          <Text style={styles.saveBtnText}>SAVE SETTINGS</Text>
+          <Text style={styles.saveBtnText}>EINSTELLUNGEN SPEICHERN</Text>
        </TouchableOpacity>
      </ScrollView>
    </View>
@@ -1,23 +1,50 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { StyleSheet, Text, View, TouchableOpacity, Platform } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Platform,
+  Modal,
+  TextInput,
+  TouchableWithoutFeedback,
+} from 'react-native';
 import { CameraView, useCameraPermissions } from 'expo-camera';
-import * as FileSystem from 'expo-file-system';
+import * as FileSystem from 'expo-file-system/legacy';
 import { THEME } from '../styles/theme';
 import { UsbCameraView, UsbCameraRef } from '../../modules/usb-camera';
+import { saveToGallery } from '../services/storage';

 interface CameraScreenProps {
  countdownDuration: number;
  onPhotoCaptured: (uri: string) => void;
  onCancel: () => void;
+  isIdle?: boolean;
+  onStartBooth?: () => void;
+  onNavigateToAdmin?: () => void;
+  adminPassword?: string;
 }

-export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCancel }: CameraScreenProps) {
+export default function CameraScreen({
+  countdownDuration,
+  onPhotoCaptured,
+  onCancel,
+  isIdle = false,
+  onStartBooth,
+  onNavigateToAdmin,
+  adminPassword = '1234',
+}: CameraScreenProps) {
  const [permission, requestPermission] = useCameraPermissions();
  const [isUsbConnected, setIsUsbConnected] = useState<boolean>(false);
  const [countdown, setCountdown] = useState<number | string>('');
  const [isCapturing, setIsCapturing] = useState<boolean>(false);
  const [hasStarted, setHasStarted] = useState<boolean>(false);

+  // Admin Modal States
+  const [passwordModalVisible, setPasswordModalVisible] = useState(false);
+  const [enteredPassword, setEnteredPassword] = useState('');
+  const [errorText, setErrorText] = useState('');
+
  const usbCameraRef = useRef<UsbCameraRef>(null);
  const expoCameraRef = useRef<any>(null);

@@ -28,10 +55,9 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
    }
  }, [permission]);

-  // 2. Check if a USB camera is connected. 
-  // We can query the USB module or attempt to check every second in the background.
+  // 2. Check if a USB camera is connected.
  useEffect(() => {
-    let checkInterval: NodeJS.Timeout;
+    let checkInterval: any;
    if (Platform.OS === 'android') {
      const checkConnection = async () => {
        try {
@@ -40,12 +66,10 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
            setIsUsbConnected(connected);
          }
        } catch (e) {
-          // If native view manager is not loaded or errors, fallback to false
          setIsUsbConnected(false);
        }
      };

-      // Check initially and run an interval
      checkConnection();
      checkInterval = setInterval(checkConnection, 2000);
    }
@@ -55,13 +79,19 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
    };
  }, []);

-  // 3. Start the countdown on screen load
+  // 3. Start the countdown on screen load (only when NOT idle)
  useEffect(() => {
-    let timer: NodeJS.Timeout;
+    if (isIdle) {
+      setHasStarted(false);
+      return;
+    }
+
+    let timer: any;
    let count = countdownDuration;

    setCountdown(count);
    setHasStarted(true);
+    setIsCapturing(false);

    const runTimer = () => {
      if (count > 1) {
@@ -69,7 +99,7 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
        setCountdown(count);
        timer = setTimeout(runTimer, 1000);
      } else if (count === 1) {
-        setCountdown('Cheese! 📸');
+        setCountdown('Bitte lächeln! 📸');
        setIsCapturing(true);
        timer = setTimeout(() => {
          capture();
@@ -82,7 +112,7 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
    return () => {
      if (timer) clearTimeout(timer);
    };
-  }, [countdownDuration]);
+  }, [countdownDuration, isIdle]);

  // 4. Capture photo function
  const capture = async () => {
@@ -94,6 +124,15 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
        // USB Camera Capture
        console.log('Capturing from USB Camera...');
        const path = await usbCameraRef.current.takePicture(tempUri);
+        
+        // Auto-save individual photo directly to gallery
+        try {
+          await saveToGallery(path);
+          console.log('Auto-saved USB capture to gallery');
+        } catch (e) {
+          console.error('Failed to auto-save USB capture:', e);
+        }
+
        onPhotoCaptured(path);
      } else {
        // Fallback Camera Capture
@@ -103,22 +142,47 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
            quality: 0.95,
            skipProcessing: false,
          });
+
+          // Auto-save individual photo directly to gallery
+          try {
+            await saveToGallery(photo.uri);
+            console.log('Auto-saved fallback capture to gallery');
+          } catch (e) {
+            console.error('Failed to auto-save fallback capture:', e);
+          }
+
          onPhotoCaptured(photo.uri);
        } else {
-          throw new Error('Camera ref is not available.');
+          throw new Error('Kamera-Referenz ist nicht verfügbar.');
        }
      }
    } catch (error: any) {
      console.error('Capture failed:', error);
-      alert('Failed to capture photo: ' + error.message);
+      alert('Fehler beim Aufnehmen des Fotos: ' + error.message);
      onCancel();
    }
  };

+  const handleSettingsTap = () => {
+    setEnteredPassword('');
+    setErrorText('');
+    setPasswordModalVisible(true);
+  };
+
+  const handlePasswordSubmit = () => {
+    if (enteredPassword === adminPassword) {
+      setPasswordModalVisible(false);
+      onNavigateToAdmin?.();
+    } else {
+      setErrorText('Falsches Passwort');
+      setEnteredPassword('');
+    }
+  };
+
  if (!permission) {
    return (
      <View style={styles.container}>
-        <Text style={styles.infoText}>Loading permissions...</Text>
+        <Text style={styles.infoText}>Berechtigungen werden geladen...</Text>
      </View>
    );
  }
@@ -126,20 +190,124 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
  if (!permission.granted && !isUsbConnected) {
    return (
      <View style={styles.container}>
-        <Text style={styles.infoText}>We need your permission to show the camera</Text>
+        <Text style={styles.infoText}>Wir benötigen deine Erlaubnis, um die Kamera anzuzeigen</Text>
        <TouchableOpacity style={styles.btn} onPress={requestPermission}>
-          <Text style={styles.btnText}>Grant Permission</Text>
+          <Text style={styles.btnText}>Erlaubnis erteilen</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.btn, styles.cancelBtn]} onPress={onCancel}>
-          <Text style={styles.btnText}>Go Back</Text>
+          <Text style={styles.btnText}>Zurück</Text>
        </TouchableOpacity>
      </View>
    );
  }

+  const renderContent = () => {
+    if (isIdle) {
+      // Home Overlay (frosty glass box on top of the camera stream)
+      return (
+        <TouchableWithoutFeedback onPress={onStartBooth}>
+          <View style={styles.idleOverlayContainer}>
+            {/* Settings button in the top-right corner */}
+            <TouchableOpacity
+              style={styles.settingsButton}
+              onPress={handleSettingsTap}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.settingsIcon}>⚙️</Text>
+            </TouchableOpacity>
+
+            <View style={styles.welcomeBox}>
+              <Text style={styles.logo}>SCHNAPPIX</Text>
+              <Text style={styles.welcomeTitle}>Willkommen zu unserer Feier!</Text>
+              
+              <View style={styles.divider} />
+              
+              <View style={styles.startButton}>
+                <Text style={styles.startButtonText}>ZUM STARTEN ÜBERALL TIPPEN</Text>
+              </View>
+              
+              <Text style={styles.welcomeFooter}>Fotos machen • Collage erstellen • Sofort drucken</Text>
+            </View>
+
+            {/* Password Prompt Modal */}
+            <Modal
+              visible={passwordModalVisible}
+              transparent={true}
+              animationType="fade"
+              onRequestClose={() => setPasswordModalVisible(false)}
+            >
+              <View style={styles.modalOverlay}>
+                <View style={styles.modalContent}>
+                  <Text style={styles.modalTitle}>Admin-Zugang</Text>
+                  <Text style={styles.modalSub}>Passwort eingeben, um Einstellungen zu öffnen</Text>
+                  
+                  <TextInput
+                    style={styles.input}
+                    secureTextEntry
+                    placeholder="Passwort"
+                    placeholderTextColor={THEME.colors.textMuted}
+                    value={enteredPassword}
+                    onChangeText={setEnteredPassword}
+                    keyboardType="numeric"
+                    autoFocus
+                  />
+
+                  {errorText ? <Text style={styles.error}>{errorText}</Text> : null}
+
+                  <View style={styles.modalButtons}>
+                    <TouchableOpacity
+                      style={[styles.button, styles.cancelButton]}
+                      onPress={() => setPasswordModalVisible(false)}
+                    >
+                      <Text style={styles.buttonText}>Abbrechen</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                      style={[styles.button, styles.confirmButton]}
+                      onPress={handlePasswordSubmit}
+                    >
+                      <Text style={styles.buttonText}>Öffnen</Text>
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              </View>
+            </Modal>
+          </View>
+        </TouchableWithoutFeedback>
+      );
+    }
+
+    // Capture Mode overlays (Countdown and Cancel button)
+    return (
+      <View style={styles.captureOverlayContainer} pointerEvents="box-none">
+        {/* Source indicator */}
+        <View style={styles.hudContainer}>
+          <Text style={styles.cameraSourceIndicator}>
+            Kamera: {isUsbConnected ? 'Externe USB-Kamera' : 'Tablet-Frontkamera (Fallback)'}
+          </Text>
+        </View>
+
+        {/* Countdown overlay */}
+        {hasStarted && (
+          <View style={styles.countdownOverlay} pointerEvents="none">
+            <View style={styles.countdownBox}>
+              <Text style={styles.countdownText}>{countdown}</Text>
+            </View>
+          </View>
+        )}
+
+        {/* Cancel Button */}
+        {!isCapturing && (
+          <TouchableOpacity style={styles.backButton} onPress={onCancel}>
+            <Text style={styles.backButtonText}>ABBRECHEN</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
  return (
    <View style={styles.container}>
-      {/* Camera Preview Area */}
+      {/* Camera Preview Background */}
      <View style={styles.previewContainer}>
        {Platform.OS === 'android' && isUsbConnected ? (
          <UsbCameraView ref={usbCameraRef} style={styles.cameraPreview} />
@@ -152,28 +320,8 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
        )}
      </View>

-      {/* Camera Info HUD */}
-      <View style={styles.hudContainer}>
-        <Text style={styles.cameraSourceIndicator}>
-          Source: {isUsbConnected ? 'External USB Camera' : 'Front Tablet Camera (Fallback)'}
-        </Text>
-      </View>
-
-      {/* Countdown overlay */}
-      {hasStarted && (
-        <View style={styles.overlay}>
-          <View style={styles.countdownBox}>
-            <Text style={styles.countdownText}>{countdown}</Text>
-          </View>
-        </View>
-      )}
-
-      {/* Cancel Button */}
-      {!isCapturing && (
-        <TouchableOpacity style={styles.backButton} onPress={onCancel}>
-          <Text style={styles.backButtonText}>CANCEL</Text>
-        </TouchableOpacity>
-      )}
+      {/* Render UI controls/overlays on top */}
+      {renderContent()}
    </View>
  );
 }
@@ -182,32 +330,119 @@ const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
-    justifyContent: 'center',
-    alignItems: 'center',
  },
  previewContainer: {
    width: '100%',
    height: '100%',
    position: 'absolute',
+    top: 0,
+    left: 0,
  },
  cameraPreview: {
    width: '100%',
    height: '100%',
  },
+  idleOverlayContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.15)',
+  },
+  captureOverlayContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  settingsButton: {
+    position: 'absolute',
+    top: 24,
+    right: 24,
+    width: 50,
+    height: 50,
+    borderRadius: THEME.borderRadius.round,
+    backgroundColor: 'rgba(30, 30, 35, 0.75)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.1)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999,
+  },
+  settingsIcon: {
+    fontSize: 24,
+    color: THEME.colors.text,
+  },
+  welcomeBox: {
+    alignItems: 'center',
+    padding: THEME.spacing.xl,
+    borderRadius: THEME.borderRadius.lg,
+    backgroundColor: 'rgba(18, 18, 20, 0.8)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.15)',
+    width: '60%',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.3,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+  logo: {
+    fontSize: 54,
+    fontWeight: '900',
+    color: THEME.colors.primary,
+    letterSpacing: 8,
+    marginBottom: THEME.spacing.sm,
+    textShadowColor: 'rgba(0, 0, 0, 0.5)',
+    textShadowOffset: { width: 0, height: 2 },
+    textShadowRadius: 4,
+  },
+  welcomeTitle: {
+    fontSize: 22,
+    color: THEME.colors.text,
+    textAlign: 'center',
+    marginBottom: THEME.spacing.lg,
+    letterSpacing: 1,
+  },
+  divider: {
+    width: 60,
+    height: 3,
+    backgroundColor: THEME.colors.accent,
+    marginBottom: THEME.spacing.xl,
+    borderRadius: THEME.borderRadius.sm,
+  },
+  startButton: {
+    paddingVertical: THEME.spacing.md,
+    paddingHorizontal: THEME.spacing.xl,
+    backgroundColor: THEME.colors.primary,
+    borderRadius: THEME.borderRadius.round,
+    marginBottom: THEME.spacing.xl,
+  },
+  startButtonText: {
+    color: THEME.colors.text,
+    fontSize: 18,
+    fontWeight: 'bold',
+    letterSpacing: 2,
+  },
+  welcomeFooter: {
+    fontSize: 14,
+    color: THEME.colors.textMuted,
+    letterSpacing: 1,
+  },
  hudContainer: {
    position: 'absolute',
    bottom: 20,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    paddingVertical: THEME.spacing.xs,
    paddingHorizontal: THEME.spacing.md,
    borderRadius: THEME.borderRadius.sm,
+    borderWidth: 0.5,
+    borderColor: 'rgba(255, 255, 255, 0.1)',
  },
  cameraSourceIndicator: {
    color: THEME.colors.text,
    fontSize: 14,
    fontWeight: 'bold',
  },
-  overlay: {
+  countdownOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
@@ -215,37 +450,39 @@ const styles = StyleSheet.create({
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.2)',
  },
  countdownBox: {
-    backgroundColor: THEME.colors.glassBackground,
+    backgroundColor: 'rgba(20, 20, 25, 0.85)',
    paddingVertical: THEME.spacing.xl,
    paddingHorizontal: THEME.spacing.xxl,
    borderRadius: THEME.borderRadius.lg,
    borderWidth: 1,
-    borderColor: THEME.colors.border,
+    borderColor: 'rgba(255, 255, 255, 0.15)',
    minWidth: 180,
    alignItems: 'center',
    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.4,
+    shadowRadius: 15,
+    elevation: 8,
  },
  countdownText: {
-    fontSize: 72,
+    fontSize: 64,
    fontWeight: '900',
    color: THEME.colors.text,
-    textShadowColor: 'rgba(0, 0, 0, 0.75)',
-    textShadowOffset: { width: -1, height: 1 },
-    textShadowRadius: 10,
+    textAlign: 'center',
  },
  backButton: {
    position: 'absolute',
    top: 24,
    left: 24,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    backgroundColor: 'rgba(30, 30, 35, 0.75)',
    paddingVertical: THEME.spacing.sm,
    paddingHorizontal: THEME.spacing.lg,
    borderRadius: THEME.borderRadius.round,
    borderWidth: 1,
-    borderColor: THEME.colors.border,
+    borderColor: 'rgba(255, 255, 255, 0.1)',
  },
  backButtonText: {
    color: THEME.colors.text,
@@ -277,4 +514,81 @@ const styles = StyleSheet.create({
    fontSize: 16,
    fontWeight: 'bold',
  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: THEME.colors.overlay,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    width: 340,
+    padding: THEME.spacing.lg,
+    borderRadius: THEME.borderRadius.md,
+    backgroundColor: THEME.colors.surfaceSecondary,
+    borderWidth: 1,
+    borderColor: THEME.colors.border,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.4,
+    shadowRadius: 15,
+    elevation: 10,
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: THEME.colors.text,
+    marginBottom: THEME.spacing.xs,
+  },
+  modalSub: {
+    fontSize: 13,
+    color: THEME.colors.textMuted,
+    marginBottom: THEME.spacing.md,
+    textAlign: 'center',
+  },
+  input: {
+    width: '100%',
+    height: 50,
+    backgroundColor: THEME.colors.surface,
+    borderColor: THEME.colors.border,
+    borderWidth: 1,
+    borderRadius: THEME.borderRadius.sm,
+    color: THEME.colors.text,
+    paddingHorizontal: THEME.spacing.md,
+    fontSize: 16,
+    textAlign: 'center',
+    marginBottom: THEME.spacing.sm,
+  },
+  error: {
+    color: THEME.colors.error,
+    fontSize: 14,
+    marginBottom: THEME.spacing.sm,
+  },
+  modalButtons: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    marginTop: THEME.spacing.sm,
+  },
+  button: {
+    flex: 1,
+    height: 45,
+    borderRadius: THEME.borderRadius.sm,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: THEME.spacing.xs,
+  },
+  cancelButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: THEME.colors.border,
+  },
+  confirmButton: {
+    backgroundColor: THEME.colors.primary,
+  },
+  buttonText: {
+    color: THEME.colors.text,
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });
@@ -32,7 +32,7 @@ export default function HomeScreen({ onStart, onNavigateToAdmin, adminPassword =
      setPasswordModalVisible(false);
      onNavigateToAdmin();
    } else {
-      setErrorText('Incorrect Password');
+      setErrorText('Falsches Passwort');
      setEnteredPassword('');
    }
  };
@@ -51,15 +51,15 @@ export default function HomeScreen({ onStart, onNavigateToAdmin, adminPassword =

        <View style={styles.content}>
          <Text style={styles.logo}>SCHNAPPIX</Text>
-          <Text style={styles.title}>Welcome to our celebration!</Text>
+          <Text style={styles.title}>Willkommen zu unserer Feier!</Text>
          
          <View style={styles.divider} />
          
          <View style={styles.startButton}>
-            <Text style={styles.startButtonText}>TAP ANYWHERE TO START</Text>
+            <Text style={styles.startButtonText}>ZUM STARTEN ÜBERALL TIPPEN</Text>
          </View>
          
-          <Text style={styles.footer}>Take photos • Create a collage • Print instantly</Text>
+          <Text style={styles.footer}>Fotos machen • Collage erstellen • Sofort drucken</Text>
        </View>

        {/* Password Prompt Modal */}
@@ -71,13 +71,13 @@ export default function HomeScreen({ onStart, onNavigateToAdmin, adminPassword =
        >
          <View style={styles.modalOverlay}>
            <View style={styles.modalContent}>
-              <Text style={styles.modalTitle}>Admin Access</Text>
-              <Text style={styles.modalSub}>Enter password to open settings</Text>
+              <Text style={styles.modalTitle}>Admin-Zugang</Text>
+              <Text style={styles.modalSub}>Passwort eingeben, um Einstellungen zu öffnen</Text>
              
              <TextInput
                style={styles.input}
                secureTextEntry
-                placeholder="Enter password"
+                placeholder="Passwort eingeben"
                placeholderTextColor={THEME.colors.textMuted}
                value={enteredPassword}
                onChangeText={setEnteredPassword}
@@ -92,13 +92,13 @@ export default function HomeScreen({ onStart, onNavigateToAdmin, adminPassword =
                  style={[styles.button, styles.cancelButton]}
                  onPress={() => setPasswordModalVisible(false)}
                >
-                  <Text style={styles.buttonText}>Cancel</Text>
+                  <Text style={styles.buttonText}>Abbrechen</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={[styles.button, styles.confirmButton]}
                  onPress={handlePasswordSubmit}
                >
-                  <Text style={styles.buttonText}>Open</Text>
+                  <Text style={styles.buttonText}>Öffnen</Text>
                </TouchableOpacity>
              </View>
            </View>
@@ -41,36 +41,36 @@ export default function PreviewScreen({
  // Triggers the view capture and the print job
  const handlePrint = async () => {
    setIsProcessing(true);
-    setStatusMessage('Preparing your photo...');
+    setStatusMessage('Dein Foto wird vorbereitet...');
    try {
      let printUri = currentPhoto;

      // If we are printing a collage layout, capture the ViewShot container
      if (layout !== 'single') {
-        setStatusMessage('Generating collage...');
+        setStatusMessage('Collage wird generiert...');
        const capturedUri = await viewShotRef.current.capture();
        printUri = capturedUri;
      }

-      setStatusMessage('Sending print job to printer...');
+      setStatusMessage('Druckauftrag wird an Drucker gesendet...');
      // 1. Silent Print via IPP
      await printImageLocal(printUri, {
        ipAddress: printerIp,
-        jobName: 'Schnappix Photo Booth',
+        jobName: 'Schnappix Fotobox',
      });

-      setStatusMessage('Saving to tablet library...');
+      setStatusMessage('Wird in Galerie gespeichert...');
      // 2. Save permanently to DCIM/Schnappix
      await saveToGallery(printUri);

-      setStatusMessage('Print successful! Enjoy!');
+      setStatusMessage('Druck erfolgreich! Viel Spaß! 🎉');
      setTimeout(() => {
        setIsProcessing(false);
        onReset(); // Go back to Home Screen
      }, 2000);
    } catch (error: any) {
      console.error('Printing failed:', error);
-      alert('Error: ' + error.message);
+      alert('Fehler: ' + error.message);
      setIsProcessing(false);
    }
  };
@@ -78,7 +78,7 @@ export default function PreviewScreen({
  // Saves to gallery without printing
  const handleSaveOnly = async () => {
    setIsProcessing(true);
-    setStatusMessage('Generating image...');
+    setStatusMessage('Bild wird generiert...');
    try {
      let saveUri = currentPhoto;

@@ -87,21 +87,46 @@ export default function PreviewScreen({
        saveUri = capturedUri;
      }

-      setStatusMessage('Saving to tablet library...');
+      setStatusMessage('Wird in Galerie gespeichert...');
      await saveToGallery(saveUri);

-      setStatusMessage('Saved successfully!');
+      setStatusMessage('Erfolgreich gespeichert!');
      setTimeout(() => {
        setIsProcessing(false);
        onReset();
      }, 1500);
    } catch (error: any) {
      console.error('Saving failed:', error);
-      alert('Error: ' + error.message);
+      alert('Fehler: ' + error.message);
      setIsProcessing(false);
    }
  };

+  // Auto-save collage and exit
+  const handleExit = async () => {
+    // If layout is single, it has already been auto-saved to gallery right when captured
+    if (layout === 'single') {
+      onReset();
+      return;
+    }
+
+    setIsProcessing(true);
+    setStatusMessage('Collage wird gespeichert...');
+    try {
+      const capturedUri = await viewShotRef.current.capture();
+      await saveToGallery(capturedUri);
+      setStatusMessage('Erfolgreich gespeichert!');
+      setTimeout(() => {
+        setIsProcessing(false);
+        onReset();
+      }, 1000);
+    } catch (error) {
+      console.error('Auto-saving collage on exit failed:', error);
+      setIsProcessing(false);
+      onReset();
+    }
+  };
+
  // Render the selected collage inside the capture container
  const renderCollageView = () => {
    switch (layout) {
@@ -114,8 +139,8 @@ export default function PreviewScreen({
              ))}
            </View>
            <View style={styles.collageFooter}>
-              <Text style={styles.collageFooterText}>SCHNAPPIX PHOTO BOOTH</Text>
-              <Text style={styles.collageFooterDate}>{new Date().toLocaleDateString()}</Text>
+              <Text style={styles.collageFooterText}>SCHNAPPIX FOTOBOX</Text>
+              <Text style={styles.collageFooterDate}>{new Date().toLocaleDateString('de-DE')}</Text>
            </View>
          </View>
        );
@@ -128,7 +153,7 @@ export default function PreviewScreen({
              ))}
            </View>
            <View style={styles.collageFooter}>
-              <Text style={styles.collageFooterText}>SCHNAPPIX PHOTO BOOTH</Text>
+              <Text style={styles.collageFooterText}>SCHNAPPIX FOTOBOX</Text>
            </View>
          </View>
        );
@@ -141,7 +166,7 @@ export default function PreviewScreen({
              ))}
            </View>
            <View style={styles.collageFooter}>
-              <Text style={styles.collageFooterText}>SCHNAPPIX PHOTO BOOTH</Text>
+              <Text style={styles.collageFooterText}>SCHNAPPIX FOTOBOX</Text>
            </View>
          </View>
        );
@@ -174,7 +199,7 @@ export default function PreviewScreen({

      {/* Right panel: Controls */}
      <View style={styles.controlPanel}>
-        <Text style={styles.header}>CHOOSE YOUR STYLE</Text>
+        <Text style={styles.header}>WÄHLE DEINEN STIL</Text>
        
        {/* Layout Selection */}
        <View style={styles.layoutSelector}>
@@ -182,7 +207,7 @@ export default function PreviewScreen({
            style={[styles.layoutBtn, layout === 'single' && styles.layoutBtnActive]}
            onPress={() => setLayout('single')}
          >
-            <Text style={styles.layoutBtnText}>Single</Text>
+            <Text style={styles.layoutBtnText}>Einzelbild</Text>
          </TouchableOpacity>

          <TouchableOpacity
@@ -206,7 +231,7 @@ export default function PreviewScreen({
            disabled={photoUris.length < 3}
            onPress={() => setLayout('strip')}
          >
-            <Text style={styles.layoutBtnText}>Strip (3)</Text>
+            <Text style={styles.layoutBtnText}>Streifen (3)</Text>
          </TouchableOpacity>

          <TouchableOpacity
@@ -218,37 +243,37 @@ export default function PreviewScreen({
            disabled={photoUris.length < 4}
            onPress={() => setLayout('grid')}
          >
-            <Text style={styles.layoutBtnText}>Grid (4)</Text>
+            <Text style={styles.layoutBtnText}>Raster (4)</Text>
          </TouchableOpacity>
        </View>

        <Text style={styles.photosCountText}>
-          Photos Captured: {photoUris.length} / 4
+          Aufgenommene Fotos: {photoUris.length} / 4
        </Text>

        {/* Action Buttons */}
        <View style={styles.actions}>
          <TouchableOpacity style={[styles.actionBtn, styles.printBtn]} onPress={handlePrint}>
-            <Text style={styles.actionBtnText}>PRINT NOW 🖨️</Text>
+            <Text style={styles.actionBtnText}>JETZT DRUCKEN 🖨️</Text>
          </TouchableOpacity>

          <TouchableOpacity style={[styles.actionBtn, styles.saveBtn]} onPress={handleSaveOnly}>
-            <Text style={styles.actionBtnText}>Save to Tablet Only 💾</Text>
+            <Text style={styles.actionBtnText}>Nur auf Tablet speichern 💾</Text>
          </TouchableOpacity>

          {photoUris.length < 4 && (
            <TouchableOpacity style={[styles.actionBtn, styles.addBtn]} onPress={onAddAnother}>
-              <Text style={styles.actionBtnText}>+ Add Another Photo</Text>
+              <Text style={styles.actionBtnText}>+ Weiteres Foto aufnehmen</Text>
            </TouchableOpacity>
          )}

          <View style={styles.rowActions}>
            <TouchableOpacity style={[styles.smallBtn, styles.retakeBtn]} onPress={onRetakeLast}>
-              <Text style={styles.smallBtnText}>Retake Last</Text>
+              <Text style={styles.smallBtnText}>Letztes wiederholen</Text>
            </TouchableOpacity>

-            <TouchableOpacity style={[styles.smallBtn, styles.resetBtn]} onPress={onReset}>
-              <Text style={styles.smallBtnText}>Exit</Text>
+            <TouchableOpacity style={[styles.smallBtn, styles.resetBtn]} onPress={handleExit}>
+              <Text style={styles.smallBtnText}>Beenden</Text>
            </TouchableOpacity>
          </View>
        </View>
@@ -281,7 +306,6 @@ const styles = StyleSheet.create({
    backgroundColor: '#050507',
  },
  viewShotContainer: {
-    // 3:2 ratio aspect layout matching Canon Selphy postcard paper
    width: 320,
    height: 480,
    justifyContent: 'center',
@@ -389,7 +413,6 @@ const styles = StyleSheet.create({
    fontSize: 14,
    fontWeight: '600',
  },
-  // Collage Canvas Layouts (3:2 ratio aspect - width 320, height 480)
  singleCanvas: {
    width: 320,
    height: 480,
@@ -433,7 +456,6 @@ const styles = StyleSheet.create({
    fontSize: 8,
    color: '#666666',
  },
-  // Strip (3 images vertical)
  stripCanvas: {},
  stripContent: {
    flex: 1,
@@ -446,7 +468,6 @@ const styles = StyleSheet.create({
    resizeMode: 'cover',
    borderRadius: 2,
  },
-  // Grid (4 images 2x2)
  gridCanvas: {},
  gridContainer: {
    flex: 1,
@@ -462,7 +483,6 @@ const styles = StyleSheet.create({
    resizeMode: 'cover',
    borderRadius: 2,
  },
-  // Duo (2 images side by side or stacked)
  duoCanvas: {},
  duoContainer: {
    flex: 1,
@@ -475,7 +495,6 @@ const styles = StyleSheet.create({
    resizeMode: 'cover',
    borderRadius: 2,
  },
-  // Loading overlay
  loadingOverlay: {
    position: 'absolute',
    top: 0,