diff --git a/shop/app/globals.css b/shop/app/globals.css index a443357..bf0d181 100644 --- a/shop/app/globals.css +++ b/shop/app/globals.css @@ -193,4 +193,30 @@ input:focus, select:focus, textarea:focus { option { color: oklch(var(--oklch-text-main)) !important; background-color: oklch(var(--oklch-surface)) !important; +} + +/* Eye-Catcher & Rüttel-Animation für fehlende Pflichtkategorien */ +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 15%, 55% { transform: translateX(-4px); } + 35%, 75% { transform: translateX(4px); } +} + +@keyframes eye-catcher-glow { + 0%, 100% { + box-shadow: 0 0 15px rgba(244, 63, 94, 0.6), inset 0 0 8px rgba(244, 63, 94, 0.3); + border-color: rgba(244, 63, 94, 0.9); + } + 50% { + box-shadow: 0 0 28px rgba(239, 68, 68, 0.9), inset 0 0 14px rgba(239, 68, 68, 0.5); + border-color: rgba(239, 68, 68, 1); + } +} + +.animate-shake { + animation: shake 0.6s ease-in-out infinite; +} + +.animate-eye-catcher { + animation: eye-catcher-glow 1.2s ease-in-out infinite, shake 0.8s ease-in-out infinite !important; } \ No newline at end of file diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx index 2310919..faaa20d 100644 --- a/shop/components/order-wizard.tsx +++ b/shop/components/order-wizard.tsx @@ -933,26 +933,42 @@ export function OrderWizard({ const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId const isRequired = cat.is_required const isActive = activeCategoryId === cat.id + const isMissingRequired = isRequired && !hasSelection return ( diff --git a/shop/components/wizard/step-software.tsx b/shop/components/wizard/step-software.tsx index 2bbecc4..ea63193 100644 --- a/shop/components/wizard/step-software.tsx +++ b/shop/components/wizard/step-software.tsx @@ -88,34 +88,52 @@ export function StepSoftware({ className="space-y-6" > {/* Category header */} -
-
- -
-
-

{currentCategory.name}

- {currentCategory.description && ( -

{currentCategory.description}

- )} -
- {sel?.productIds && sel.productIds.length > 0 ? ( - - {sel.productIds.length} Ausgewählt - - ) : sel?.productId ? ( - - Ausgewählt - - ) : currentCategory.is_required ? ( - - Erforderlich - - ) : ( - - Optional - - )} -
+ {(() => { + const isMissingRequired = currentCategory.is_required && !sel?.productId && (!sel?.productIds || sel.productIds.length === 0) + return ( +
+
+ +
+
+

+ {currentCategory.name} + {isMissingRequired && ( + + PFLICHTFELD AUSWÄHLEN! + + )} +

+ {currentCategory.description && ( +

{currentCategory.description}

+ )} +
+ {sel?.productIds && sel.productIds.length > 0 ? ( + + {sel.productIds.length} Ausgewählt + + ) : sel?.productId ? ( + + Ausgewählt + + ) : currentCategory.is_required ? ( + + Bitte auswählen! + + ) : ( + + Optional + + )} +
+ ) + })()} {catProducts.length === 0 ? (