diff --git a/public/css/dashboard.css b/public/css/dashboard.css index 9d99218..c7898db 100644 --- a/public/css/dashboard.css +++ b/public/css/dashboard.css @@ -1380,3 +1380,119 @@ body { color: #b3e5fc; font-size: 0.85rem; } + +/* Settings Modal Styles */ +.settings-content { + padding: 1.5rem 0; +} + +.setting-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem; + background: #1e293b; + border-radius: 0.75rem; + margin-bottom: 1rem; + border: 1px solid #334155; +} + +.setting-info h3 { + color: #ffffff; + font-size: 1.1rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.setting-info p { + color: #8892b0; + font-size: 0.9rem; + line-height: 1.4; +} + +.setting-control { + margin-left: 1rem; +} + +/* Toggle Switch Styles */ +.toggle-switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.toggle-switch input { + opacity: 0; + width: 0; + height: 0; +} + +.toggle-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #334155; + transition: 0.3s; + border-radius: 34px; +} + +.toggle-slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + transition: 0.3s; + border-radius: 50%; +} + +input:checked + .toggle-slider { + background-color: #00d4ff; +} + +input:checked + .toggle-slider:before { + transform: translateX(26px); +} + +.setting-description { + margin-top: 1rem; +} + +.settings-actions { + display: flex; + gap: 1rem; + margin-top: 2rem; + justify-content: flex-end; +} + +.settings-actions .btn { + min-width: 120px; +} + +/* Responsive Settings */ +@media (max-width: 768px) { + .setting-item { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .setting-control { + margin-left: 0; + align-self: flex-end; + } + + .settings-actions { + flex-direction: column; + } + + .settings-actions .btn { + width: 100%; + } +} diff --git a/public/dashboard.html b/public/dashboard.html index 9e60177..2791969 100644 --- a/public/dashboard.html +++ b/public/dashboard.html @@ -101,9 +101,10 @@

Verfolge deine Leistung und überwache wichtige Metriken. Dieser Abschnitt wird detaillierte Analysen anzeigen, sobald wir die Funktion implementieren.

-
-

⚡ Quick Actions

-

Hier findest du häufige Aufgaben und Schnellzugriffe. Wir werden Buttons für das Erstellen neuer Aufzeichnungen, das Verwalten von Einstellungen und mehr hinzufügen.

+
+

⚙️ Settings

+

Verwalte deine Privatsphäre-Einstellungen und andere Optionen.

+
@@ -296,6 +297,42 @@
+ + +