diff --git a/src/css/settings.css b/src/css/settings.css
new file mode 100644
index 0000000..5e0246f
--- /dev/null
+++ b/src/css/settings.css
@@ -0,0 +1,85 @@
+/* Dialog Styling */
+dialog {
+ border: none;
+ border-radius: 8px;
+ padding: 2rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+ max-width: 500px;
+ width: 90%;
+}
+
+dialog::backdrop {
+ background-color: rgba(0, 0, 0, 0.5);
+ backdrop-filter: blur(2px);
+}
+
+dialog h1 {
+ margin-top: 0;
+ color: #333;
+}
+
+/* Button Styling */
+button {
+ background-color: #4CAF50;
+ color: white;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background-color 0.3s ease;
+ margin: 5px;
+}
+
+button:hover {
+ background-color: #45a049;
+}
+
+button:active {
+ transform: scale(0.98);
+}
+
+/* Button-Types */
+button[value="logout"] {
+ background-color: #f44336;
+}
+
+button[value="logout"]:hover {
+ background-color: #da190b;
+}
+
+button[value="changePassword"] {
+ background-color: #2196F3;
+}
+
+button[value="changePassword"]:hover {
+ background-color: #0b7dda;
+}
+
+/* Select Styling */
+select {
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ margin: 5px 0 15px 0;
+ width: 100%;
+ max-width: 300px;
+ font-size: 14px;
+}
+
+label {
+ display: block;
+ margin-top: 10px;
+}
+
+label h5 {
+ margin: 5px 0;
+ color: #555;
+}
+
+/* Body Styling */
+body {
+ font-family: Arial, sans-serif;
+ padding: 20px;
+ background-color: #f5f5f5;
+}
diff --git a/src/html/settings.html b/src/html/settings.html
new file mode 100644
index 0000000..8668e61
--- /dev/null
+++ b/src/html/settings.html
@@ -0,0 +1,45 @@
+
+
+ Einstellungen
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/js/setting.js b/src/js/setting.js
new file mode 100644
index 0000000..85bf0d1
--- /dev/null
+++ b/src/js/setting.js
@@ -0,0 +1,51 @@
+// Saved Settings
+let settings = {
+ language: 'german',
+ theme: 'dark',
+ gender: 'none'
+};
+
+// Load Settings from local storage
+function loadSettingsFromStorage() {
+ const savedSettings = localStorage.getItem('userSettings');
+ if (savedSettings) {
+ settings = JSON.parse(savedSettings);
+ }
+}
+
+function toggleDialog() {
+ const dialog = document.getElementById("settingsDialog");
+
+ if (dialog.open) {
+ saveSettings();
+ dialog.close();
+ } else {
+ dialog.showModal();
+ }
+}
+
+function saveSettings() {
+ settings.language = document.getElementById('language').value;
+ settings.theme = document.getElementById('theme').value;
+ settings.gender = document.getElementById('gender').value;
+
+ // Save settings in local storage
+ localStorage.setItem('userSettings', JSON.stringify(settings));
+ console.log('Einstellungen im localStorage gespeichert:', settings);
+}
+
+function loadSettings() {
+ document.getElementById('language').value = settings.language;
+ document.getElementById('theme').value = settings.theme;
+ document.getElementById('gender').value = settings.gender;
+}
+
+// Loads Settings into Dialog
+document.addEventListener('DOMContentLoaded', () => {
+ loadSettingsFromStorage();
+ loadSettings();
+
+ document.getElementById('language').addEventListener('change', saveSettings);
+ document.getElementById('theme').addEventListener('change', saveSettings);
+ document.getElementById('gender').addEventListener('change', saveSettings);
+});
\ No newline at end of file