core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔧 Aktualisierung der tailwind.config.js zur Verbesserung der CSS-Inhalte und Optimierung der Kiosk-Modus-Styles. Entfernen nicht benötigter CSS-Dateien und Anpassungen in input.css für eine verbesserte Benutzeroberfläche. Hinzufügen neuer Logeinträge zur Protokollierung von Systeminitialisierungen und Fehlerbehandlungen. 📈

Browse Source
This commit is contained in:
Till Tomczak
2025-06-01 23:58:10 +02:00
parent de9cbe3740
commit 0b04a8abd9
28 changed files with 4099 additions and 981 deletions
Download Patch File Download Diff File Expand all files Collapse all files

489
backend/tailwind.config.js
View File

@ -2,193 +2,324 @@
module.exports = {
content: [
"./templates/**/*.html",
"./static/js/**/*.js",
"./static/css/**/*.css",
"./blueprints/**/*.py",
"./app.py",
"./models.py",
"./utils/**/*.py"
"./static/**/*.js",
"./static/css/input.css"
],
darkMode: 'class',
theme: {
// 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',
extend: {
// Erweiterte Container-Einstellungen für bessere Responsivität
container: {
center: true,
padding: {
DEFAULT: '1rem',
sm: '1.5rem',
lg: '2rem',
xl: '3rem',
'2xl': '4rem',
},
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1400px',
},
},
blue: {
500: '#0073ce',
600: '#005a9f',
// Erweiterte Breakpoints für bessere Kontrolle
screens: {
'xs': '480px', // Extra small devices
'sm': '640px', // Small devices
'md': '768px', // Medium devices
'lg': '1024px', // Large devices
'xl': '1280px', // Extra large devices
'2xl': '1536px', // 2X large devices
'3xl': '1920px', // Ultra wide screens
// Custom breakpoints für spezielle Anwendungsfälle
'tablet': '768px',
'laptop': '1024px',
'desktop': '1280px',
'wide': '1536px',
// Orientierungs-spezifische Breakpoints
'landscape': {'raw': '(orientation: landscape)'},
'portrait': {'raw': '(orientation: portrait)'},
// Touch device detection
'touch': {'raw': '(hover: none) and (pointer: coarse)'},
'no-touch': {'raw': '(hover: hover) and (pointer: fine)'},
},
green: {
100: '#d1fae5',
600: '#065f46',
spacing: {
'72': '18rem',
'84': '21rem',
'96': '24rem',
'128': '32rem',
'144': '36rem',
'160': '40rem',
// Responsive spacing utilities
'safe-top': 'env(safe-area-inset-top)',
'safe-bottom': 'env(safe-area-inset-bottom)',
'safe-left': 'env(safe-area-inset-left)',
'safe-right': 'env(safe-area-inset-right)',
},
red: {
100: '#fee2e2',
600: '#991b1b',
fontSize: {
// Responsive font sizes
'xs': ['0.75rem', { lineHeight: '1rem' }],
'sm': ['0.875rem', { lineHeight: '1.25rem' }],
'base': ['1rem', { lineHeight: '1.5rem' }],
'lg': ['1.125rem', { lineHeight: '1.75rem' }],
'xl': ['1.25rem', { lineHeight: '1.75rem' }],
'2xl': ['1.5rem', { lineHeight: '2rem' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
'5xl': ['3rem', { lineHeight: '1' }],
'6xl': ['3.75rem', { lineHeight: '1' }],
'7xl': ['4.5rem', { lineHeight: '1' }],
'8xl': ['6rem', { lineHeight: '1' }],
'9xl': ['8rem', { lineHeight: '1' }],
// Mobile-optimized sizes
'mobile-xs': ['0.675rem', { lineHeight: '0.875rem' }],
'mobile-sm': ['0.8rem', { lineHeight: '1.1rem' }],
'mobile-base': ['0.925rem', { lineHeight: '1.4rem' }],
'mobile-lg': ['1.05rem', { lineHeight: '1.6rem' }],
},
colors: {
// Mercedes-Benz Corporate Colors
'mercedes': {
'black': '#000000',
'silver': '#C0C0C0',
'dark-gray': '#1a1a1a',
'light-gray': '#f5f5f5',
'platinum': '#E5E4E2',
'charcoal': '#36454F',
'steel': '#71797E'
},
// Dark Mode optimierte Farben - Verbessert
'dark': {
'bg': '#0f172a', // Dunkler Hintergrund
'bg-secondary': '#131c2e', // Sekundärer Hintergrund noch dunkler
'surface': '#1e293b',
'surface-hover': '#334155',
'card': '#1e293b', // Dunklere Kartenfarbe für besseren Kontrast
'card-hover': '#334155', // Dunklerer Hover-Zustand
'text': '#f8fafc',
'text-secondary': '#e2e8f0',
'text-muted': '#94a3b8',
'text-disabled': '#64748b',
'border': '#334155',
'border-light': '#475569',
'hover': '#334155', // Dunklerer Hover-Zustand
'focus': '#475569',
'accent': '#4f46e5'
},
// Light Mode optimierte Farben - Verbessert
'light': {
'bg': '#ffffff',
'bg-secondary': '#f8fafc',
'surface': '#f7fafc',
'surface-hover': '#edf2f7',
'card': '#ffffff',
'card-hover': '#f7fafc',
'text': '#1a202c',
'text-secondary': '#2d3748',
'text-muted': '#4a5568',
'text-disabled': '#a0aec0',
'border': '#e2e8f0',
'border-light': '#edf2f7',
'hover': '#f1f5f9',
'focus': '#e2e8f0',
'accent': '#3b82f6'
},
// Status Farben - Erweitert
'status': {
'online': '#10b981',
'offline': '#ef4444',
'warning': '#f59e0b',
'info': '#3b82f6',
'success': '#059669',
'error': '#dc2626',
'pending': '#8b5cf6',
'processing': '#06b6d4',
'unknown': '#6b7280'
},
// Printer Status Farben - Erweitert
'printer': {
'ready': '#10b981',
'busy': '#f59e0b',
'error': '#ef4444',
'offline': '#6b7280',
'maintenance': '#8b5cf6',
'initializing': '#06b6d4'
},
// Job Status Farben - Erweitert
'job': {
'queued': '#6b7280',
'printing': '#3b82f6',
'completed': '#10b981',
'failed': '#ef4444',
'cancelled': '#f59e0b',
'paused': '#8b5cf6',
'retrying': '#f97316'
},
// Accent Farben - Erweitert
'accent': {
'primary': '#3b82f6',
'secondary': '#8b5cf6',
'tertiary': '#06b6d4',
'quaternary': '#10b981',
'quinary': '#f97316'
},
// Gradient Farben - Erweitert
'gradient': {
'from-blue': '#3b82f6',
'to-purple': '#8b5cf6',
'from-green': '#10b981',
'to-blue': '#3b82f6',
'from-purple': '#8b5cf6',
'to-pink': '#ec4899',
'from-orange': '#f97316',
'to-red': '#ef4444'
}
},
typography: {
DEFAULT: {
css: {
'code::before': {
content: 'none',
},
'code::after': {
content: 'none',
},
},
},
},
boxShadow: {
'mercedes': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'card-dark': '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2)',
// Responsive shadows
'mobile': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
'tablet': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'desktop': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
},
// Responsive border radius
borderRadius: {
'none': '0',
'sm': '0.125rem',
DEFAULT: '0.25rem',
'md': '0.375rem',
'lg': '0.5rem',
'xl': '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
'full': '9999px',
// Mobile-optimized radius
'mobile': '0.375rem',
'tablet': '0.5rem',
'desktop': '0.75rem',
},
// Animation improvements
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.5s ease-out',
'slide-down': 'slideDown 0.5s ease-out',
'slide-left': 'slideLeft 0.5s ease-out',
'slide-right': 'slideRight 0.5s ease-out',
'scale-in': 'scaleIn 0.3s ease-out',
'bounce-soft': 'bounceSoft 0.6s ease-out',
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(100%)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
slideDown: {
'0%': { transform: 'translateY(-100%)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
slideLeft: {
'0%': { transform: 'translateX(100%)', opacity: '0' },
'100%': { transform: 'translateX(0)', opacity: '1' },
},
slideRight: {
'0%': { transform: 'translateX(-100%)', opacity: '0' },
'100%': { transform: 'translateX(0)', opacity: '1' },
},
scaleIn: {
'0%': { transform: 'scale(0.9)', opacity: '0' },
'100%': { transform: 'scale(1)', opacity: '1' },
},
bounceSoft: {
'0%, 20%, 53%, 80%, 100%': { transform: 'translate3d(0,0,0)' },
'40%, 43%': { transform: 'translate3d(0,-15px,0)' },
'70%': { transform: 'translate3d(0,-7px,0)' },
'90%': { transform: 'translate3d(0,-2px,0)' },
},
},
// Responsive grid templates
gridTemplateColumns: {
'auto-fit-240': 'repeat(auto-fit, minmax(240px, 1fr))',
'auto-fit-280': 'repeat(auto-fit, minmax(280px, 1fr))',
'auto-fit-320': 'repeat(auto-fit, minmax(320px, 1fr))',
'auto-fill-240': 'repeat(auto-fill, minmax(240px, 1fr))',
'auto-fill-280': 'repeat(auto-fill, minmax(280px, 1fr))',
'auto-fill-320': 'repeat(auto-fill, minmax(320px, 1fr))',
},
},
// 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: [
// Plugin für erweiterte responsive Utilities
function({ addUtilities, theme }) {
const newUtilities = {
// Safe area utilities für mobile Geräte
'.pt-safe': {
'padding-top': 'env(safe-area-inset-top)',
},
'.pb-safe': {
'padding-bottom': 'env(safe-area-inset-bottom)',
},
'.pl-safe': {
'padding-left': 'env(safe-area-inset-left)',
},
'.pr-safe': {
'padding-right': 'env(safe-area-inset-right)',
},
'.p-safe': {
'padding-top': 'env(safe-area-inset-top)',
'padding-bottom': 'env(safe-area-inset-bottom)',
'padding-left': 'env(safe-area-inset-left)',
'padding-right': 'env(safe-area-inset-right)',
},
// Responsive text utilities
'.text-responsive': {
'font-size': 'clamp(0.875rem, 2.5vw, 1.125rem)',
'line-height': '1.5',
},
'.text-responsive-lg': {
'font-size': 'clamp(1.125rem, 3vw, 1.5rem)',
'line-height': '1.4',
},
'.text-responsive-xl': {
'font-size': 'clamp(1.5rem, 4vw, 2.25rem)',
'line-height': '1.3',
},
// Container query utilities
'.container-responsive': {
'container-type': 'inline-size',
},
// Touch-friendly targets
'.touch-target': {
'min-height': '44px',
'min-width': '44px',
},
'.touch-target-lg': {
'min-height': '48px',
'min-width': '48px',
},
}
addUtilities(newUtilities, ['responsive'])
}
},
// Performance-Optimierungen
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
// Experimental Features für bessere Performance
experimental: {
optimizeUniversalDefaults: true,
},
],
}