Kategorie: Allgemeine Anforderungen

Ziel:
Erstelle ein responsives und modernes HTML/JS/CSS-Tool zur Umrechnung von Maßen in Maßstäben. Das Tool soll interaktiv sein und in ein HTML-Element in Joomla 5 mit Yootheme Pro integrierbar sein. Die Umsetzung erfolgt mit UIkit (über CDN eingebunden).

⚙️ Funktionale Anforderungen

🔄 Zwei Modi per Umschalter (Radiobuttons):

• „Maßstab berechnen“ (real → skaliert)

• „Originalgröße berechnen“ (skaliert → real)

✍️ Eingaben:

• Maßstab (Dropdown): 1:2, 1:5, 1:10, 1:20, 1:50, 1:100, 1:200, 1:500

• Einheit: mm, cm, m

• Länge (Input)

• Breite (Input)

🧮 Berechnung:

• Sobald Länge & Breite eingegeben wurden → automatische Berechnung.

• Wenn nur Länge eingegeben wird:

  • im Modus „Maßstab berechnen“ → skaliertes Ergebnis anzeigen.

  • im Modus „Originalgröße berechnen“ → hochgerechnete Originalgröße anzeigen.

💾 Historie:

• Button „Speichern“, der die letzte Umrechnung als Werteblock sichert.

• Historie als Slide-out von rechts mit Chevron/X-Icon zum Öffnen/Schließen.

• Darstellung als Zebra-Tabelle mit max. 10 Einträgen:

  • Spalte 1: Originalmaß (z. B. 2500 × 1250)

  • Spalte 2: Maßstab (z. B. 1:5)

  • Spalte 3: Ergebnis (z. B. 500 × 250 mm)

🎨 Designrichtlinien (exakt einzuhalten)

🧱 Container:

• padding: 30px oben/unten, 20px links/rechts

• margin-bottom: 20px

• background-color: #ffffff

• border: 1px solid #ddd

• border-radius: 10px

• box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)

🔣 Input-Gruppen:

• margin-bottom: 15px

🏷 Labels:

• font-weight: bold

• color: #333333

• margin-bottom: 5px

🔢 Eingabefelder (input[type="number"]):

• width: 100%

• padding: 10px

• border: 1px solid #ccc

• border-radius: 5px

• color: #333333

🔘 Radiobuttons:

• Horizontale Flex-Container (radio-group)

• margin-bottom: 15px

• Labels: uk-text-middle

• Abstand zwischen Buttons: 20px nach rechts

⚙️ Steuerfeld-Gruppe (z. B. Einheit + Maßstab):

• margin-bottom: 15px

• Label:

  • font-weight: normal

  • color: #555555

  • margin-right: 10px

✅ Ergebnisbereich (resultBox):

• margin-top: 20px

• padding: 15px

• background-color: #d4ede2

• border-radius: 5px

• font-size: 18px

• color: #333333

🔘 Buttons:

• width: 100%

• padding: 12px 20px

• background-color: #00b359

• color: white

• border: none

• border-radius: 5px

• transition: background-color 0.3s ease

• hover: background-color: #009445

🌐 Farbschema:

• Ergebnisbereich: #d4ede2

• Primärfarbe Button: #00b359

• Hoverfarbe Button: #009445

• Container-Hintergrund: #ffffff

• Textfarben:

  • #333333 (dunkelgrau für Labels/Texte)

  • #555555 (hellgrau für Zusatzlabels)

📱 Responsive Design:

Für Viewports < 768px:

• Schriftgröße Inputfelder: 14px

• Schriftgröße Button: 14px