🔧 Aktualisierung der README.md zur Verbesserung der Backend- und Frontend-Installationsanweisungen. Einführung eines konsolidierten Setup-Skripts für die automatische Installation und Optimierung der Kiosk-Modus-Anweisungen. Hinzufügen eines neuen Dokuments für Verbindungstests zwischen Frontend und Backend. Verbesserte Farbpalette und CSS-Styles für Kiosk-Modus in tailwind.config.js und input.css. 📈

backend/tailwind.config.js

@@ -11,38 +11,184 @@ module.exports = {
   ],
   darkMode: 'class',
   theme: {
-    extend: {
-      colors: {
-        // Minimale Farbpalette für Kiosk-Modus
-        primary: '#0073ce',
-        'primary-dark': '#005a9f',
-        surface: '#ffffff',
-        muted: '#6b7280'
+    // Reduzierte Farbpalette
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      white: '#ffffff',
+      black: '#000000',
+      primary: '#0073ce',
+      'primary-dark': '#005a9f',
+      gray: {
+        50: '#fafbfc',
+        100: '#f3f5f7',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827',
       },
-      spacing: {
-        '18': '4.5rem',
-        '88': '22rem'
+      blue: {
+        500: '#0073ce',
+        600: '#005a9f',
       },
-      fontFamily: {
-        'sans': ['system-ui', '-apple-system', 'sans-serif']
+      green: {
+        100: '#d1fae5',
+        600: '#065f46',
       },
-      backdropBlur: {
-        xs: '2px'
-      }
+      red: {
+        100: '#fee2e2',
+        600: '#991b1b',
+      },
+    },
+    
+    // Reduzierte Spacing-Skala
+    spacing: {
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '20': '5rem',
+    },
+    
+    // Reduzierte Font-Größen
+    fontSize: {
+      'xs': '0.75rem',
+      'sm': '0.875rem',
+      'base': '1rem',
+      'lg': '1.125rem',
+      'xl': '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+    },
+    
+    // Minimale Border-Radius
+    borderRadius: {
+      'none': '0',
+      'sm': '2px',
+      'DEFAULT': '6px',
+      'lg': '8px',
+      'xl': '12px',
+      'full': '9999px',
+    },
+    
+    // Reduzierte Schatten
+    boxShadow: {
+      'sm': '0 2px 4px rgba(0,0,0,0.05)',
+      'DEFAULT': '0 2px 4px rgba(0,0,0,0.05)',
+      'lg': '0 4px 8px rgba(0,0,0,0.1)',
+    },
+    
+    // Minimale Transitions
+    transitionDuration: {
+      '75': '75ms',
+      '100': '100ms',
+      '150': '150ms',
+      '200': '200ms',
+    },
+    
+    extend: {}
+  },
+  
+  // Deaktivierte Utilities für bessere Performance
+  corePlugins: {
+    // Nicht benötigte Features deaktivieren
+    animation: false, // Animationen werden manuell gemacht
+    backdropBlur: false, // Nicht für Kiosk benötigt
+    backdropBrightness: false,
+    backdropContrast: false,
+    backdropFilter: false,
+    backdropGrayscale: false,
+    backdropHueRotate: false,
+    backdropInvert: false,
+    backdropOpacity: false,
+    backdropSaturate: false,
+    backdropSepia: false,
+    blur: false,
+    brightness: false,
+    contrast: false,
+    dropShadow: false,
+    filter: false,
+    grayscale: false,
+    hueRotate: false,
+    invert: false,
+    saturate: false,
+    sepia: false,
+    
+    // Touch-spezifische Features deaktivieren
+    touchAction: false,
+    
+    // Nicht benötigte Layout-Features
+    aspectRatio: false,
+    backdropFilter: false,
+    
+    // Reduzierte Transform-Features
+    scale: false,
+    skew: false,
+    transformOrigin: false,
+  },
+  
+  // Kiosk-spezifische Plugins deaktivieren
+  plugins: [],
+  
+  // Aggressive Purge-Konfiguration
+  purge: {
+    enabled: true,
+    content: [
+      './templates/**/*.html',
+      './static/js/**/*.js',
+    ],
+    // Aggressive Purging
+    options: {
+      safelist: [
+        // Nur essenzielle Klassen behalten
+        'container',
+        'flex',
+        'grid',
+        'hidden',
+        'block',
+        'inline',
+        'w-full',
+        'h-full',
+        'text-center',
+        'font-bold',
+        'text-primary',
+        'bg-white',
+        'border',
+        'rounded',
+        'p-4',
+        'm-4',
+        'btn',
+        'card',
+        'nav',
+        'header',
+        'status-online',
+        'status-offline',
+        'status-printing',
+      ],
+      // Dynamische Klassen-Erkennung
+      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
     }
   },
-  plugins: [],
-  // Aggressive Purging für minimale Bundle-Größe
-  safelist: [
-    'bg-white',
-    'bg-gray-800',
-    'text-gray-900', 
-    'text-white',
-    'border-gray-200',
-    'border-gray-600',
-    'rounded-lg',
-    'px-4',
-    'py-2',
-    'transition-colors'
-  ]
+  
+  // Performance-Optimierungen
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
+  },
+  
+  // Experimental Features für bessere Performance
+  experimental: {
+    optimizeUniversalDefaults: true,
+  },
 }