Enhance user communication and improve UI components
- Update CLAUDE.md to mandate informal "Du" form for user communication in all UI text and emails. - Modify LoginForm and RegisterForm components to reflect informal language in validation messages and placeholders. - Add secure connection indicators in LoginForm for user awareness. - Update alert component styles for better visual feedback. - Introduce experimenta company information document for user reference.
This commit is contained in:
Bastian Masanek
@@ -32,6 +32,14 @@ Dieses Design System definiert die visuelle Identität und Komponenten-Bibliothe
|
||||
2. [Typografie](#typografie)
|
||||
3. [Spacing & Layout](#spacing--layout)
|
||||
4. [Komponenten](#komponenten)
|
||||
- [Buttons](#1-buttons)
|
||||
- [Cards](#2-cards)
|
||||
- [Status Messages](#3-status-messages)
|
||||
- [Progress Bar](#4-progress-bar)
|
||||
- [Forms](#5-forms)
|
||||
- [Links](#6-links)
|
||||
- [Logo](#7-logo)
|
||||
- [Icons](#8-icons)
|
||||
5. [Animationen & Transitions](#animationen--transitions)
|
||||
6. [Accessibility](#accessibility)
|
||||
|
||||
@@ -806,6 +814,263 @@ Wird in den Design-Vorlagen verwendet. Sollte als Vue-Komponente gespeichert wer
|
||||
|
||||
---
|
||||
|
||||
### 8. Icons
|
||||
|
||||
**Icon Library:** [Lucide Vue Next](https://lucide.dev) (bereits installiert)
|
||||
|
||||
Das Projekt verwendet **lucide-vue-next** für alle Icons. Lucide bietet über 1.500+ hochwertige, konsistente Icons, die perfekt mit shadcn-nuxt und unserem Design System harmonieren.
|
||||
|
||||
#### Installation
|
||||
|
||||
```bash
|
||||
# Bereits installiert in package.json
|
||||
pnpm add lucide-vue-next
|
||||
```
|
||||
|
||||
#### Verwendung
|
||||
|
||||
**Import:**
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
// Named imports für tree-shaking (empfohlen)
|
||||
import { Mail, Lock, CheckCircle, AlertCircle, Info, X } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Icon mit Standard-Größe -->
|
||||
<Mail />
|
||||
|
||||
<!-- Icon mit Custom-Größe und Farbe -->
|
||||
<Mail :size="24" class="text-accent" />
|
||||
|
||||
<!-- Icon mit Tailwind-Klassen -->
|
||||
<CheckCircle class="w-6 h-6 text-success" />
|
||||
</template>
|
||||
```
|
||||
|
||||
#### Häufig verwendete Icons
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
// Auth & User
|
||||
Mail,
|
||||
Lock,
|
||||
User,
|
||||
UserCircle,
|
||||
LogIn,
|
||||
LogOut,
|
||||
|
||||
// Shopping
|
||||
ShoppingCart,
|
||||
CreditCard,
|
||||
Package,
|
||||
|
||||
// Navigation
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
ChevronDown,
|
||||
Menu,
|
||||
X,
|
||||
|
||||
// Status & Feedback
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
Info,
|
||||
XCircle,
|
||||
|
||||
// Actions
|
||||
Trash2,
|
||||
Edit,
|
||||
Plus,
|
||||
Minus,
|
||||
Search,
|
||||
} from 'lucide-vue-next'
|
||||
</script>
|
||||
```
|
||||
|
||||
#### Icons in Komponenten
|
||||
|
||||
**Alert mit Icon:**
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { AlertCircle } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Alert variant="error">
|
||||
<AlertCircle class="h-4 w-4" />
|
||||
<AlertTitle>Fehler</AlertTitle>
|
||||
<AlertDescription> Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut. </AlertDescription>
|
||||
</Alert>
|
||||
</template>
|
||||
```
|
||||
|
||||
**Button mit Icon:**
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ShoppingCart } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="btn-primary flex items-center gap-2">
|
||||
<ShoppingCart :size="20" />
|
||||
<span>In den Warenkorb</span>
|
||||
</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
**Login Form mit Icons:**
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Mail, Lock } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="space-y-6">
|
||||
<!-- E-Mail Input -->
|
||||
<div class="form-field">
|
||||
<label for="email" class="form-label flex items-center gap-2">
|
||||
<Mail :size="18" class="text-accent" />
|
||||
<span>E-Mail-Adresse</span>
|
||||
</label>
|
||||
<input type="email" id="email" class="form-input" />
|
||||
</div>
|
||||
|
||||
<!-- Password Input -->
|
||||
<div class="form-field">
|
||||
<label for="password" class="form-label flex items-center gap-2">
|
||||
<Lock :size="18" class="text-accent" />
|
||||
<span>Passwort</span>
|
||||
</label>
|
||||
<input type="password" id="password" class="form-input" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
```
|
||||
|
||||
#### Icon-Größen
|
||||
|
||||
```vue
|
||||
<!-- Extra Small (16px) -->
|
||||
<Mail :size="16" />
|
||||
|
||||
<!-- Small (20px) - Standard für Buttons -->
|
||||
<Mail :size="20" />
|
||||
|
||||
<!-- Medium (24px) - Standard für Inputs -->
|
||||
<Mail :size="24" />
|
||||
|
||||
<!-- Large (32px) - Status Icons -->
|
||||
<CheckCircle :size="32" />
|
||||
|
||||
<!-- Custom mit Tailwind -->
|
||||
<Mail class="w-8 h-8" />
|
||||
```
|
||||
|
||||
#### Icon-Farben
|
||||
|
||||
```vue
|
||||
<!-- Experimenta Colors -->
|
||||
<Mail class="text-experimenta-primary" />
|
||||
<CheckCircle class="text-experimenta-accent" />
|
||||
<AlertTriangle class="text-experimenta-red" />
|
||||
|
||||
<!-- Semantic Colors -->
|
||||
<CheckCircle class="text-success" />
|
||||
<AlertCircle class="text-error" />
|
||||
<AlertTriangle class="text-warning" />
|
||||
<Info class="text-info" />
|
||||
|
||||
<!-- White/Muted -->
|
||||
<Mail class="text-white" />
|
||||
<Mail class="text-white/90" />
|
||||
<Mail class="text-white/70" />
|
||||
```
|
||||
|
||||
#### Status Icons Pattern
|
||||
|
||||
Für Status-Meldungen verwenden wir konsistente Icons:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { CheckCircle, XCircle, AlertTriangle, Info } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Success -->
|
||||
<div class="flex items-center gap-3 text-success">
|
||||
<CheckCircle :size="24" />
|
||||
<span>Erfolgreich!</span>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div class="flex items-center gap-3 text-error">
|
||||
<XCircle :size="24" />
|
||||
<span>Fehler aufgetreten</span>
|
||||
</div>
|
||||
|
||||
<!-- Warning -->
|
||||
<div class="flex items-center gap-3 text-warning">
|
||||
<AlertTriangle :size="24" />
|
||||
<span>Achtung!</span>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="flex items-center gap-3 text-info">
|
||||
<Info :size="24" />
|
||||
<span>Hinweis</span>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
#### Best Practices
|
||||
|
||||
1. **Tree-Shaking:** Nutze Named Imports statt `import * as Icons`
|
||||
|
||||
```vue
|
||||
✅ import { Mail, Lock } from 'lucide-vue-next'
|
||||
❌ import * as Icons from 'lucide-vue-next'
|
||||
```
|
||||
|
||||
2. **Accessibility:** Verwende `aria-label` wenn Icons ohne Text stehen
|
||||
|
||||
```vue
|
||||
<button aria-label="Schließen">
|
||||
<X :size="20" />
|
||||
</button>
|
||||
```
|
||||
|
||||
3. **Konsistenz:** Verwende innerhalb einer Komponente einheitliche Icon-Größen
|
||||
|
||||
4. **Farben:** Nutze Tailwind-Klassen für Farben statt inline-Styles
|
||||
|
||||
5. **Stroke Width:** Lucide Icons haben eine Standardstärke von 2. Für dünnere/dickere Linien:
|
||||
```vue
|
||||
<Mail :size="24" :stroke-width="1.5" />
|
||||
```
|
||||
|
||||
#### Icon-Übersicht
|
||||
|
||||
Alle verfügbaren Icons: [https://lucide.dev/icons/](https://lucide.dev/icons/)
|
||||
|
||||
**Kategorien:**
|
||||
|
||||
- **Arrows & Chevrons:** ChevronRight, ArrowRight, ChevronDown
|
||||
- **Shopping:** ShoppingCart, CreditCard, Package, Truck
|
||||
- **User & Auth:** User, UserCircle, LogIn, LogOut, Lock, Key
|
||||
- **Status:** CheckCircle, XCircle, AlertTriangle, Info
|
||||
- **Actions:** Plus, Minus, Edit, Trash2, Search, Filter
|
||||
- **Media:** Image, File, FileText, Download, Upload
|
||||
- **Navigation:** Menu, X, Home, Settings, HelpCircle
|
||||
|
||||
---
|
||||
|
||||
## Animationen & Transitions
|
||||
|
||||
### Pulse (für Status Icons)
|
||||
|
||||
281
docs/EXPERIMENTA_INFO.md
Normal file
281
docs/EXPERIMENTA_INFO.md
Normal file
@@ -0,0 +1,281 @@
|
||||
# experimenta Unternehmensinformationen
|
||||
|
||||
Dieses Dokument enthält alle relevanten Informationen zum Unternehmen experimenta, die für die my.experimenta.science App verwendet werden.
|
||||
|
||||
**Version:** 1.0
|
||||
**Letzte Aktualisierung:** 2025
|
||||
|
||||
---
|
||||
|
||||
## 1. Firmendaten
|
||||
|
||||
### 1.1 Firmenname & Rechtsform
|
||||
- **Offizieller Name:** experimenta gGmbH
|
||||
- **Rechtsform:** Gemeinnützige GmbH
|
||||
- **Umsatzsteuer-ID:** DE 264 748 920
|
||||
-- Sitz Heilbronn, Amtsgericht Stuttgart HRB 722941
|
||||
|
||||
### 1.2 Anschrift
|
||||
```
|
||||
experimenta gGmbH
|
||||
Experimenta-Platz
|
||||
74072 Heilbronn
|
||||
Deutschland
|
||||
```
|
||||
|
||||
**Zusätzliche Adressdetails:**
|
||||
- **Straße & Hausnummer:** Experimenta-Platz
|
||||
- **Postleitzahl:** 74072
|
||||
- **Stadt:** Heilbronn
|
||||
- **Bundesland:** Baden-Württemberg
|
||||
- **Land:** Deutschland
|
||||
|
||||
### 1.3 Kontaktinformationen
|
||||
|
||||
**E-Mail:**
|
||||
- **Allgemein:** info@experimenta.science
|
||||
- **Vorsitzende des Aufssichtsrates:** Prof. Dr. Bärbel G. Renner
|
||||
- **Geschäftsführung:** Dr. Franziska Lang, Nico Wiest
|
||||
|
||||
**Telefon:**
|
||||
- **Telefon:** 07131 88795-0
|
||||
- **Telefax:** 07131 88795-900
|
||||
- **E-Mail:** info@experimenta.science
|
||||
|
||||
**Website:**
|
||||
- **Hauptwebsite:** https://www.experimenta.science
|
||||
- **Shop:** shop.experimenta.science
|
||||
|
||||
---
|
||||
|
||||
## 2. Öffnungszeiten
|
||||
|
||||
**Hinweis:** Bitte auf der offiziellen Website nach aktuellen Öffnungszeiten informieren, da diese saisonal variieren können.
|
||||
|
||||
### 2.1 Ausstellung und Science Dome, e1 KI-Pavillon, e3
|
||||
|
||||
**Öffnungszeiten:**
|
||||
- **Montag bis Freitag:** 09:00 – 17:00 Uhr
|
||||
- **Samstag, Sonntag und Feiertage:** 10:00 – 18:00 Uhr
|
||||
|
||||
### 2.2 Sternwarte, e1
|
||||
|
||||
**Öffnungszeiten:**
|
||||
- **Montag bis Freitag:** 11:00 – 16:30 Uhr
|
||||
- **Samstag und Sonntag:** 12:00 – 17:30 Uhr
|
||||
|
||||
### 2.3 Forum, e2
|
||||
|
||||
**Öffnungszeiten:**
|
||||
- **Montag bis Freitag:** 9:00 – 17:00 Uhr
|
||||
- **Samstag, Sonntag und Feiertage:** 10:00 – 18:00 Uhr
|
||||
|
||||
### 2.4 Maker Space, e2
|
||||
|
||||
**Öffnungszeiten:**
|
||||
- **Dienstag bis Samstag:** 15:00 – 22:00 Uhr (auch in den Ferien und an Feiertagen)
|
||||
- **Sonntag und Montag:** geschlossen
|
||||
|
||||
**Hinweis:** Der Maker Space ist besonders relevant für Makerspace-Jahreskarten.
|
||||
|
||||
### 2.5 Gastronomie
|
||||
|
||||
**Öffnungszeiten:**
|
||||
- **Montag bis Freitag:** 11:00 – 17:30 Uhr
|
||||
- **Samstag, Sonntag und Feiertage:** 11:00 – 18:30 Uhr
|
||||
|
||||
### 2.6 Shop / Osiander
|
||||
|
||||
**Öffnungszeiten:**
|
||||
- **Montag bis Freitag:** 12:00 – 17:00 Uhr
|
||||
- **Samstag und Sonntag:** 12:00 – 18:00 Uhr
|
||||
|
||||
### 2.7 Labore, e2
|
||||
|
||||
**Öffnungszeiten:**
|
||||
- **Nur für angemeldete Gruppen**
|
||||
|
||||
---
|
||||
|
||||
## 3. Rechtliche Dokumente & Links
|
||||
|
||||
### 3.1 Allgemeine Geschäftsbedingungen (AGB)
|
||||
|
||||
**URL:** https://www.experimenta.science/agb/
|
||||
|
||||
**Hinweise:**
|
||||
- AGB müssen bei Registrierung akzeptiert werden
|
||||
- AGB müssen bei Checkout erneut bestätigt werden
|
||||
- AGB für Online-Shop: [separate URL wenn vorhanden]
|
||||
|
||||
### 3.2 Datenschutzerklärung
|
||||
|
||||
**URL:** https://www.experimenta.science/datenschutz/
|
||||
|
||||
**Hinweise:**
|
||||
- DSGVO-konform
|
||||
- Datenschutzerklärung muss bei Registrierung akzeptiert werden
|
||||
- Cookie-Hinweise gemäß DSGVO erforderlich
|
||||
|
||||
### 3.3 Impressum
|
||||
|
||||
**URL:** [eintragen wenn auf experimenta.science verfügbar]
|
||||
|
||||
**Inhalt:**
|
||||
- Firmendaten (siehe Abschnitt 1.1 & 1.2)
|
||||
- Geschäftsführer: [eintragen]
|
||||
- Kontakt: [eintragen]
|
||||
- Aufsichtsbehörde: [eintragen wenn relevant]
|
||||
|
||||
### 3.4 Widerrufsbelehrung
|
||||
|
||||
**URL:** [eintragen wenn vorhanden]
|
||||
|
||||
**Hinweise:**
|
||||
- 14-tägiges Widerrufsrecht gemäß Verbraucherrecht
|
||||
- Besondere Bedingungen für Jahreskarten: [eintragen wenn vorhanden]
|
||||
|
||||
### 3.5 Cookie-Richtlinie
|
||||
|
||||
**URL:** [eintragen wenn separat vorhanden]
|
||||
|
||||
---
|
||||
|
||||
## 4. Über experimenta
|
||||
|
||||
### 4.1 Beschreibung
|
||||
|
||||
experimenta ist Deutschlands größtes Science Center mit über 275 Mitmachstationen, vier Kreativstudios, neun Laboren und einer Sternwarte.
|
||||
|
||||
### 4.2 Angebote
|
||||
|
||||
**Hauptangebote:**
|
||||
- Science Center mit interaktiven Ausstellungen
|
||||
- Makerspace (Kreativwerkstatt)
|
||||
- Labore für Workshops und Kurse
|
||||
- Sternwarte
|
||||
- Science Dome (360°-Fulldome-Theater)
|
||||
- Jahreskarten für verschiedene Zielgruppen:
|
||||
- Makerspace-Jahreskarten (Privatpersonen)
|
||||
- Pädagogische Jahreskarten (für Lehrkräfte)
|
||||
- [weitere Angebote ergänzen]
|
||||
|
||||
### 4.3 Zielgruppen
|
||||
|
||||
- **Privatpersonen:** Familien, Einzelbesucher
|
||||
- **Bildungseinrichtungen:** Schulen, Kindergärten
|
||||
- **Lehrkräfte:** Pädagogische Jahreskarten
|
||||
- **Unternehmen:** Firmenveranstaltungen, Teamevents
|
||||
|
||||
---
|
||||
|
||||
## 5. Zahlungsinformationen
|
||||
|
||||
### 5.1 Akzeptierte Zahlungsmethoden
|
||||
|
||||
**Online-Shop (MVP):**
|
||||
- PayPal
|
||||
|
||||
**Zukünftig (Post-MVP):**
|
||||
- Kreditkarte
|
||||
- Lastschrift
|
||||
- [weitere Methoden ergänzen]
|
||||
|
||||
### 5.2 Preise & Währungen
|
||||
|
||||
- **Hauptwährung:** EUR (Euro)
|
||||
- **Preisformat:** Dezimalstellen (z.B. 99,00 €)
|
||||
- **Steuersatz:** 7% MwSt. (ermäßigter Satz für Jahreskarten)
|
||||
|
||||
---
|
||||
|
||||
## 6. Integration & Partner
|
||||
|
||||
### 6.1 Technische Partner
|
||||
|
||||
- **Authentifizierung:** Cidaas (Widas)
|
||||
- **ERP-System:** Microsoft Dynamics NAV
|
||||
- **Payment Provider:** PayPal (MVP)
|
||||
- **Hosting:** Hetzner
|
||||
|
||||
### 6.2 Geschäftspartner
|
||||
|
||||
- [Partner ergänzen wenn relevant]
|
||||
|
||||
---
|
||||
|
||||
## 7. Social Media & Marketing
|
||||
|
||||
### 7.1 Social Media Kanäle
|
||||
|
||||
- **Facebook:** [eintragen]
|
||||
- **Instagram:** [eintragen]
|
||||
- **Twitter/X:** [eintragen]
|
||||
- **YouTube:** [eintragen]
|
||||
- **LinkedIn:** [eintragen]
|
||||
|
||||
### 7.2 Newsletter
|
||||
|
||||
- **Anmeldung:** [eintragen wenn vorhanden]
|
||||
- **Datenschutz:** Gemäß Datenschutzerklärung
|
||||
|
||||
---
|
||||
|
||||
## 8. Support & Kundenservice
|
||||
|
||||
### 8.1 Support-Kanäle
|
||||
|
||||
**E-Mail:**
|
||||
- info@experimenta.science
|
||||
|
||||
**Telefon:**
|
||||
- 07131 88795-0
|
||||
|
||||
---
|
||||
|
||||
## 9. Corporate Design & Branding
|
||||
|
||||
### 9.1 Logo
|
||||
|
||||
- **Hauptlogo:** `/img/experimenta-logo-black.svg` (schwarz)
|
||||
- **Logo weiß:** `/img/experimenta-logo-white.svg` (weiß)
|
||||
- **Nutzung:** Siehe `docs/DESIGN_SYSTEM.md`
|
||||
|
||||
### 9.2 Brand Colors
|
||||
|
||||
Siehe `docs/DESIGN_SYSTEM.md` für vollständige Farbpalette:
|
||||
- **Primary:** #e6007e (experimenta Pink)
|
||||
- **Secondary:** [siehe Design System]
|
||||
- **Destructive:** #ea5b0c (EXP Signalorange)
|
||||
|
||||
---
|
||||
|
||||
## 10. Verwendung in der App
|
||||
|
||||
### 10.1 Footer
|
||||
|
||||
Die Firmendaten werden im Footer (`app/components/CommonFooter.vue`) verwendet:
|
||||
- Firmenname
|
||||
- Anschrift
|
||||
- Kontakt-E-Mail
|
||||
- Links zu AGB, Datenschutz, Impressum
|
||||
|
||||
### 10.2 Registrierung & Checkout
|
||||
|
||||
- AGB-Link muss akzeptiert werden
|
||||
- Datenschutzerklärung muss akzeptiert werden
|
||||
- Widerrufsbelehrung muss angezeigt werden
|
||||
|
||||
### 10.3 E-Mails
|
||||
|
||||
**E-Mail-Templates sollten enthalten:**
|
||||
- Firmenanschrift
|
||||
- Kontaktinformationen
|
||||
- Links zu AGB/Datenschutz
|
||||
- Impressum-Hinweis
|
||||
|
||||
---
|
||||
|
||||
**Stand:** 31.10.2025
|
||||
**Nächste Überprüfung:** [Datum]
|
||||
|
||||
Reference in New Issue
Block a user