Dokumentation

Appearance

Style-Guide für Vokabelabfrage-Komponenten ​

Dieser Leitfaden definiert die einheitlichen Design-Standards für alle Vokabelabfrage-Komponenten im Hermeneus-System. Er basiert auf der Analyse der UebungBedeutungenZuordnen und UebungVokabelmosaik Komponenten.

Ziel ​

Alle Vokabelabfrage-Komponenten sollen visuell konsistent sein, um dem Benutzer eine nahtlose Lernerfahrung zu bieten, unabhängig vom spezifischen Übungstyp.

1. Layout & Container ​

Haupt-Container ​

vue
<div class="[komponent-name] bg-white rounded-xl p-8 shadow-xl border border-grey-100">
  <!-- Komponenteninhalt -->
</div>

Spezifikationen:

  • Hintergrund: bg-white
  • Form: rounded-xl (12px border-radius)
  • Innenabstand: p-8 (2rem auf allen Seiten)
  • Schatten: shadow-xl (große Schatten für Tiefe)
  • Rand: border border-grey-100 (subtiler Rand)

Container-Styling (CSS) ​

css
.komponenten-container {
  min-height: 600px;
  max-width: 900px;
  margin: 0 auto;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

2. Typografie-Hierarchie ​

2.1 Gegebenes Wort (Lateinische Vokabel) ​

vue
<div class="flex justify-center text-center mb-8">
  <div class="text-4xl font-bold font-serif mb-3 tracking-wide animate-fadeInUp">
    {{ valueGiven }}
  </div>
</div>

Spezifikationen:

  • Schriftgröße: text-4xl (2.25rem)
  • Gewicht: font-bold (700)
  • Familie: font-serif (Merriweather)
  • Tracking: tracking-wide (0.025em)
  • Animation: animate-fadeInUp
  • Farbe: Standardschwarz (keine explizite Farbklasse)

2.2 Zusätzliche Wort-Info ​

vue
<div v-if="hasInfo" 
     class="text-4xl text-left font-serif text-grey-500 italic font-light animate-fadeInUp">
  {{ valueGivenInfo }}
</div>

Spezifikationen:

  • Schriftgröße: text-4xl (gleich wie Hauptwort)
  • Gewicht: font-light (300)
  • Stil: italic
  • Farbe: text-grey-500
  • Familie: font-serif

2.3 Anweisungen ​

vue
<div class="text-center mb-8">
  <div class="text-xl text-grey-700 font-medium animate-fadeInUp">
    [Anweisungstext]
  </div>
</div>

Spezifikationen:

  • Schriftgröße: text-xl (1.25rem)
  • Gewicht: font-medium (500)
  • Farbe: text-grey-700
  • Ausrichtung: text-center

2.4 Labels & Überschriften ​

vue
<div class="text-lg font-semibold text-grey-700">
  [Label-Text]
</div>

Spezifikationen:

  • Schriftgröße: text-lg (1.125rem)
  • Gewicht: font-semibold (600)
  • Farbe: text-grey-700

2.5 Nutzer-Ergebnis Anzeige ​

vue
<div class="text-4xl font-bold text-secondary-600 tracking-wide">
  {{ assembledWord }}
</div>

Spezifikationen:

  • Schriftgröße: text-4xl (2.25rem)
  • Gewicht: font-bold (700)
  • Farbe: text-secondary-600 (unterscheidet sich vom gegebenen Wort)
  • Tracking: tracking-wide

2.6 Hilfs- und Infotexte ​

vue
<div class="text-sm text-grey-500 font-medium">
  [Infotext]
</div>

Spezifikationen:

  • Schriftgröße: text-sm (0.875rem)
  • Gewicht: font-medium (500)
  • Farbe: text-grey-500

3. Abstände ​

3.1 Hauptsektionen ​

  • Zwischen Vokabel und Anweisungen: mb-8 (2rem)
  • Zwischen Anweisungen und Interaktion: mb-8 (2rem)
  • Zwischen Interaktion und Feedback: mt-8 (2rem)

3.2 Untersektionen ​

  • Label zu Inhalt: mb-4 (1rem)
  • Zwischen verwandten Elementen: mb-2 bis mb-3 (0.5-0.75rem)
  • Keyboard Hints: mt-4 (1rem)

3.3 Innenabstände ​

  • Container: p-8 (2rem)
  • Feedback-Container: p-6 (1.5rem)
  • Interaktive Bereiche: p-4 bis p-6 (1-1.5rem)

4. Farben & Status ​

4.1 Theme-Farben ​

Verwende ausschließlich Farben aus hermeneus-extended.tailwind.config.js:

Success (Richtige Antworten) ​

  • Basis: text-success, bg-success, border-success
  • Varianten: text-success-dark, bg-success-light
  • Focus: focus:ring-success-light

Danger (Falsche Antworten) ​

  • Basis: text-danger, bg-danger, border-danger
  • Varianten: text-danger-dark, bg-danger-light
  • Focus: focus:ring-danger-light

Primary (Interaktive Elemente) ​

  • Nummerierte Varianten: primary-100 bis primary-900
  • Focus: focus:ring-primary-200

Grey (Neutrale Elemente) ​

  • Nummerierte Varianten: grey-100 bis grey-900

4.2 Status-Styling ​

Richtige Antwort ​

vue
<div class="text-success">
  <div class="mb-4">
    <i class="fas fa-check-circle text-4xl animate-successBounce"></i>
  </div>
  <div class="font-bold text-xl mb-2">Richtig!</div>
  <div class="text-lg text-success-dark font-medium">[Details]</div>
</div>

Falsche Antwort ​

vue
<div class="text-danger">
  <div class="mb-4">
    <i class="fas fa-times-circle text-4xl animate-errorShake"></i>
  </div>
  <div class="font-bold text-xl mb-3">Falsch</div>
  <div class="text-lg text-danger-dark mb-2">Die richtige Antwort ist:</div>
  <div class="text-xl font-bold text-danger-dark mb-2">[Lösung]</div>
  <div class="text-base text-danger font-medium">Du hattest: "[Eingabe]"</div>
</div>

5. Interaktive Elemente ​

5.1 Basis-Button-Klassen ​

vue
<!-- Standard interaktiver Button -->
<button class="w-full p-4 text-lg font-medium rounded-lg transition-all duration-300 transform focus:outline-none focus:ring-4 border-2 text-left">
  [Inhalt]
</button>

Kern-Eigenschaften:

  • Padding: p-4 (1rem)
  • Schrift: text-lg font-medium
  • Form: rounded-lg
  • Transition: transition-all duration-300
  • Transform: transform (für Hover-Effekte)
  • Focus: focus:outline-none focus:ring-4
  • Rand: border-2

5.2 Hover-Effekte ​

vue
<!-- Subtle hover -->
hover:scale-102 hover:shadow-md

<!-- Prominent hover -->
hover:scale-105 hover:shadow-lg

5.3 Status-spezifische Styles ​

Normale Optionen ​

css
border-grey-300 hover:border-primary-400 hover:bg-primary-100 text-grey-800 focus:ring-primary-200

Aktive/Gehoverte Optionen ​

css
border-primary-500 bg-primary-100 text-primary-800 focus:ring-primary-200 hover:scale-105 hover:shadow-lg

Nach Antwort - Richtig ​

css
border-success bg-success-light text-success-dark focus:ring-success-light

Nach Antwort - Falsch ​

css
border-danger bg-danger-light text-danger-dark focus:ring-danger-light

Deaktiviert/Neutral ​

css
border-grey-300 bg-grey-100 text-grey-600 cursor-not-allowed

6. Feedback & Status-Bereiche ​

6.1 Feedback-Container ​

vue
<div v-if="showFeedback" class="mt-8" role="alert" aria-live="assertive">
  <div class="feedback-container p-6 rounded-xl max-w-lg mx-auto text-center">
    <!-- Feedback-Inhalt -->
  </div>
</div>

CSS für Feedback-Container:

css
.feedback-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  animation: feedbackSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

6.2 Feedback-Icons ​

  • Erfolg: fas fa-check-circle text-4xl animate-successBounce
  • Fehler: fas fa-times-circle text-4xl animate-errorShake
  • Inline-Erfolg: fas fa-check-circle text-2xl text-success animate-successBounce
  • Inline-Fehler: fas fa-times-circle text-2xl text-danger animate-errorShake

7. Animationen ​

7.1 Standard-Animationen ​

css
/* Eingangs-Animation */
.animate-fadeInUp {
  animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Feedback-Animation */
@keyframes feedbackSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Erfolgs-Animation */
.animate-successBounce {
  animation: successBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes successBounce {
  0%, 20% { transform: scale(1); }
  40% { transform: scale(1.2) rotate(10deg); }
  60% { transform: scale(1.1) rotate(-5deg); }
  80% { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Fehler-Animation */
.animate-errorShake {
  animation: errorShake 0.6s ease-in-out;
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

7.2 Hover-Animationen ​

  • Subtle: hover:scale-102 (2% Vergrößerung)
  • Prominent: hover:scale-105 (5% Vergrößerung)
  • Aktiv: active:scale-95 (5% Verkleinerung beim Klick)

8. Accessibility ​

8.1 ARIA-Attribute ​

vue
<!-- Haupt-Container -->
<div role="main" :aria-label="[Beschreibung der Komponente]">

<!-- Feedback-Bereiche -->
<div role="alert" aria-live="assertive">

<!-- Interaktive Bereiche -->
<div role="region" :aria-label="[Bereichsbeschreibung]" aria-live="polite">

8.2 Screen Reader ​

vue
<!-- Screen Reader Only Announcements -->
<div class="sr-only" aria-live="polite" aria-atomic="true">
  <span v-if="[Zustand]">[Announcement]</span>
</div>

CSS für Screen Reader Only:

css
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

8.3 Keyboard Navigation ​

vue
<!-- Keyboard-Hints -->
<div class="mt-4 text-center" v-if="!isAnswered">
  <div class="text-xs text-grey-500">
    <kbd class="px-1.5 py-0.5 bg-grey-200 rounded text-xs mr-1">[Key]</kbd>
    [Beschreibung]
    <span class="mx-2">•</span>
    <kbd class="px-1.5 py-0.5 bg-grey-200 rounded text-xs mr-1">[Key]</kbd>
    [Beschreibung]
  </div>
</div>

9. State Management ​

9.1 Component Reset Pattern ​

Jede Komponente MUSS ein robustes Reset-System implementieren:

javascript
watch: {
  // Reset bei Index-Änderung
  vokabelIndex: {
    handler(newIndex, oldIndex) {
      if (newIndex !== oldIndex) {
        this.resetComponentState();
      }
    },
    immediate: false
  },
  // Reset bei Content-Änderung
  valueGiven: {
    handler(newValue, oldValue) {
      if (newValue !== oldValue && oldValue !== undefined) {
        this.resetComponentState();
      }
    },
    immediate: false
  }
},

methods: {
  resetComponentState() {
    // Reset all component state for new vokabel
    this.selectedOption = null;
    this.isAnswered = false;
    this.showFeedback = false;
    this.feedbackMessage = '';
    this.feedbackType = '';
    this.hoveredOption = null;
    // ... andere zustandsspezifische Resets
  }
}

10. Responsive Design ​

10.1 Breakpoints ​

css
/* Mobile optimizations */
@media (max-width: 768px) {
  .komponenten-container {
    padding: 1.5rem;
    min-height: 550px;
  }
  
  .text-4xl {
    font-size: 2.5rem; /* Kleinere Haupttitel */
  }
  
  button {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Touch optimization */
@media (pointer: coarse) {
  button {
    min-height: 56px; /* Touch target recommendation */
  }
}

11. Implementierungs-Checkliste ​

Beim Erstellen einer neuen Vokabelabfrage-Komponente:

Layout & Container ​

  • [ ] Haupt-Container mit korrekten Klassen
  • [ ] Mindesthöhe von 600px, max-width 900px
  • [ ] Konsistente Abstände (mb-8 zwischen Hauptsektionen)

Typografie ​

  • [ ] Gegebenes Wort: text-4xl font-bold font-serif
  • [ ] Anweisungen: text-xl text-grey-700 font-medium
  • [ ] Labels: text-lg font-semibold text-grey-700
  • [ ] Alle Fonts aus Theme

Farben ​

  • [ ] Nur Theme-Farben verwenden
  • [ ] Success: text-success, bg-success-light, border-success
  • [ ] Danger: text-danger, bg-danger-light, border-danger
  • [ ] Keine hardcodierten Hex-Werte

Interaktion ​

  • [ ] Basis-Button-Klassen implementiert
  • [ ] Hover-Effekte: hover:scale-102 oder hover:scale-105
  • [ ] Focus-States: focus:ring-4
  • [ ] Consistent disabled states

Feedback ​

  • [ ] Feedback-Container mit korrektem Styling
  • [ ] Icons: text-4xl für Haupt-Feedback, text-2xl für Inline
  • [ ] "Richtig!" / "Falsch" als Standard-Texte
  • [ ] Animationen: animate-successBounce, animate-errorShake

Accessibility ​

  • [ ] ARIA-Labels und Roles
  • [ ] Screen Reader Announcements
  • [ ] Keyboard Navigation
  • [ ] aria-live="assertive" für wichtiges Feedback

State Management ​

  • [ ] Doppelter Watcher (vokabelIndex + valueGiven)
  • [ ] resetComponentState() Methode
  • [ ] Alle Zustandsvariablen werden zurückgesetzt

Animations ​

  • [ ] animate-fadeInUp für Eingangselemente
  • [ ] feedbackSlideIn für Feedback-Container
  • [ ] Consistent timing: 0.4s für Feedback, 0.6s für fadeIn

Notizen für Entwickler ​

  1. Theme-Konsistenz ist kritisch - Verwende NIEMALS eigene Farbwerte
  2. Robustes Reset-System - Teste immer mit verschiedenen Vokabel-Sequenzen
  3. Accessibility First - Screen Reader und Keyboard-Navigation sind Pflicht
  4. Mobile-First - Alle Komponenten müssen auf Touch-Geräten funktionieren
  5. Performance - Verwende transform für Animationen (GPU-beschleunigt)

Dieser Style-Guide ist ein lebendes Dokument und sollte bei Design-Änderungen entsprechend aktualisiert werden.