Initial commit
Dieser Commit ist enthalten in:
Claude Project Manager
137
frontend/src/views/Settings.tsx
Normale Datei
137
frontend/src/views/Settings.tsx
Normale Datei
@ -0,0 +1,137 @@
|
||||
import { useState } from 'react'
|
||||
import { useThemeStore } from '../stores/themeStore'
|
||||
|
||||
export default function Settings() {
|
||||
const { isDarkMode, toggleTheme } = useThemeStore()
|
||||
// Barrierefreiheit-Einstellungen (Platzhalter mit sinnvollen Optionen)
|
||||
const [a11y, setA11y] = useState({
|
||||
highContrast: false,
|
||||
largeText: false,
|
||||
reduceMotion: false,
|
||||
underlineLinks: true,
|
||||
alwaysShowFocusOutline: true,
|
||||
dyslexiaFriendlyFont: false
|
||||
})
|
||||
|
||||
const handleSave = () => {
|
||||
// TODO: Save settings to backend/electron store
|
||||
console.log('Settings saved:', { syncConfig, isDarkMode })
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-title-lg font-poppins font-bold text-primary mb-8">
|
||||
Einstellungen
|
||||
</h1>
|
||||
|
||||
<div className="max-w-4xl space-y-6">
|
||||
<div className="card">
|
||||
<h2 className="text-title-card font-poppins font-semibold text-primary mb-6">
|
||||
Darstellung
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-body font-medium text-secondary">Dark Mode</h3>
|
||||
<p className="text-small text-tertiary">
|
||||
Aktiviert das dunkle Farbschema der Anwendung
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
isDarkMode ? 'bg-primary-blue' : 'bg-border-input'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
||||
isDarkMode ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2 className="text-title-card font-poppins font-semibold text-primary mb-6">
|
||||
Barrierefreiheit
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<label className="flex items-center space-x-3">
|
||||
<input type="checkbox" className="w-5 h-5 rounded border-border-input text-primary-blue" checked={a11y.highContrast} onChange={(e) => setA11y(prev => ({ ...prev, highContrast: e.target.checked }))} />
|
||||
<div>
|
||||
<span className="text-body font-medium text-secondary">Hoher Kontrast</span>
|
||||
<p className="text-small text-tertiary">Erhöht den Kontrast für bessere Lesbarkeit (BITV-konform)</p>
|
||||
</div>
|
||||
</label>
|
||||
<label className="flex items-center space-x-3">
|
||||
<input type="checkbox" className="w-5 h-5 rounded border-border-input text-primary-blue" checked={a11y.largeText} onChange={(e) => setA11y(prev => ({ ...prev, largeText: e.target.checked }))} />
|
||||
<div>
|
||||
<span className="text-body font-medium text-secondary">Große Schrift</span>
|
||||
<p className="text-small text-tertiary">Vergrößert die Schriftgröße für bessere Lesbarkeit</p>
|
||||
</div>
|
||||
</label>
|
||||
<label className="flex items-center space-x-3">
|
||||
<input type="checkbox" className="w-5 h-5 rounded border-border-input text-primary-blue" checked={a11y.reduceMotion} onChange={(e) => setA11y(prev => ({ ...prev, reduceMotion: e.target.checked }))} />
|
||||
<div>
|
||||
<span className="text-body font-medium text-secondary">Reduzierte Bewegungen</span>
|
||||
<p className="text-small text-tertiary">Deaktiviert Animationen für weniger Ablenkung</p>
|
||||
</div>
|
||||
</label>
|
||||
<label className="flex items-center space-x-3">
|
||||
<input type="checkbox" className="w-5 h-5 rounded border-border-input text-primary-blue" checked={a11y.underlineLinks} onChange={(e) => setA11y(prev => ({ ...prev, underlineLinks: e.target.checked }))} />
|
||||
<div>
|
||||
<span className="text-body font-medium text-secondary">Links unterstreichen</span>
|
||||
<p className="text-small text-tertiary">Links werden grundsätzlich unterstrichen dargestellt</p>
|
||||
</div>
|
||||
</label>
|
||||
<label className="flex items-center space-x-3">
|
||||
<input type="checkbox" className="w-5 h-5 rounded border-border-input text-primary-blue" checked={a11y.alwaysShowFocusOutline} onChange={(e) => setA11y(prev => ({ ...prev, alwaysShowFocusOutline: e.target.checked }))} />
|
||||
<div>
|
||||
<span className="text-body font-medium text-secondary">Fokusrahmen immer anzeigen</span>
|
||||
<p className="text-small text-tertiary">Hebt fokussierte Elemente dauerhaft für Tastaturbedienung hervor</p>
|
||||
</div>
|
||||
</label>
|
||||
<label className="flex items-center space-x-3">
|
||||
<input type="checkbox" className="w-5 h-5 rounded border-border-input text-primary-blue" checked={a11y.dyslexiaFriendlyFont} onChange={(e) => setA11y(prev => ({ ...prev, dyslexiaFriendlyFont: e.target.checked }))} />
|
||||
<div>
|
||||
<span className="text-body font-medium text-secondary">Dyslexie-freundliche Schrift</span>
|
||||
<p className="text-small text-tertiary">Verwendet eine besser unterscheidbare Schriftart</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2 className="text-title-card font-poppins font-semibold text-primary mb-6">
|
||||
Über SkillMate
|
||||
</h2>
|
||||
|
||||
<div className="space-y-2 text-body">
|
||||
<p className="text-secondary">
|
||||
<span className="font-medium">Version:</span> 1.0.0
|
||||
</p>
|
||||
<p className="text-secondary">
|
||||
<span className="font-medium">Entwickelt für:</span> Sicherheitsbehörden
|
||||
</p>
|
||||
<p className="text-small text-tertiary mt-4">
|
||||
SkillMate ist eine spezialisierte Anwendung zur Verwaltung von
|
||||
Mitarbeiterfähigkeiten und -kompetenzen in Sicherheitsbehörden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3">
|
||||
<button className="btn-secondary">
|
||||
Abbrechen
|
||||
</button>
|
||||
<button onClick={handleSave} className="btn-primary">
|
||||
Einstellungen speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren