add darkmode + toggle, add placeholder

2025-09-20 19:36:10 +02:00
parent c3a3ead6fa
commit 7fd216f4f6
2 changed files with 141 additions and 30 deletions
@@ -1,5 +1,19 @@
-:root {
+[data-bs-theme="light"] {
    --bs-primary: #093e9a;
+    --bs-body-bg: #fffcf5;
+    --bs-body-color: #212529;
+    --bs-secondary: #6c757d;
+    --bs-light: #f8f9fa;
+    --bs-border-color: #dee2e6;
+}
+
+[data-bs-theme="dark"] {
+    --bs-primary: #0d6efd;
+    --bs-body-bg: #212529;
+    --bs-body-color: #ffffff;
+    --bs-secondary: #adb5bd;
+    --bs-light: #343a40;
+    --bs-border-color: #495057;
 }

 html,
@@ -11,36 +25,52 @@ body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
-    background-color: #fffcf5;
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    transition: background-color 0.3s ease, color 0.3s ease;
 }

-.main-content {
-    flex: 1 0 auto;
+.bg-light {
+    background-color: var(--bs-light) !important;
 }

-footer {
-    flex-shrink: 0;
+.text-secondary {
+    color: var(--bs-secondary) !important;
+}
+
+.border-top {
+    border-color: var(--bs-border-color) !important;
+}
+
+.card {
+    background-color: var(--bs-body-bg);
+    border-color: var(--bs-border-color);
 }

-/* Override Bootstrap primary color classes */
 .btn-primary,
 .btn-primary:active,
 .btn-primary:focus,
 .btn-primary:hover {
-    background-color: #093e9a !important;
-    border-color: #093e9a !important;
+    background-color: var(--bs-primary) !important;
+    border-color: var(--bs-primary) !important;
 }

 .bg-primary {
-    background-color: #093e9a !important;
+    background-color: var(--bs-primary) !important;
 }

 .border-primary {
-    border-color: #093e9a !important;
+    border-color: var(--bs-primary) !important;
 }

 .text-primary {
-    color: #093e9a !important;
+    color: var(--bs-primary) !important;
+}
+
+.d-flex.gap-2>.btn.flex-fill,
+.d-flex.gap-2>.btn {
+    flex: 1 1 0 !important;
+    min-width: 0;
 }

 .container {
@@ -53,8 +83,40 @@ footer {
    padding: 16px;
 }

-.d-flex.gap-2>.btn.flex-fill,
-.d-flex.gap-2>.btn {
-    flex: 1 1 0 !important;
-    min-width: 0;
+.main-content {
+    flex: 1 0 auto;
+}
+
+.spacer {
+    flex: 1 0 auto;
+}
+
+footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.dark-mode-toggle {
+    align-self: flex-end;
+    z-index: 1000;
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    background-color: #495057;
+    color: var(--bs-body-bg);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+    cursor: pointer;
+    margin: 0 15px;
+}
+
+.dark-mode-toggle:hover {
+    transform: scale(1.1);
+}
+
+[data-bs-theme="dark"] .dark-mode-toggle {
+    color: #dba50e;
 }
@@ -11,7 +11,7 @@
    <link rel="stylesheet" href="/style.css" />
 </head>

-<body>
+<body x-data="app()" :data-bs-theme="darkMode ? 'dark' : 'light'">
    <div class="main-content">
        <div class="container pt-5" x-data="app()">
            <div class="mb-4">
@@ -91,8 +91,8 @@
                                    <label class="form-label">
                                        Dein Name (wie im Abi-Buch)
                                    </label>
-                                    <input type="text" x-model="yourName" required autocomplete="off"
-                                        class="form-control" autofocus />
+                                    <input type="text" x-model="yourName" placeholder="Vorname Nachname" required
+                                        autocomplete="off" class="form-control" autofocus />
                                </div>
                                <button type="submit" class="btn btn-primary flex-fill"
                                    :class="{'disabled': working}">Suchen</button>
@@ -117,8 +117,9 @@
                                <div id="altNameDiv" class="mt-2" x-show="altNameChecked && userName" x-transition>
                                    <div class="mb-3">
                                        <label class="form-label">Mein aktueller Name:</label>
-                                        <input type="text" x-model="altName" autocomplete="off" class="form-control"
-                                            x-ref="altNameInput" @keydown.enter.prevent="$refs.continueBtn.click()" />
+                                        <input type="text" x-model="altName" placeholder="Vorname Nachname"
+                                            autocomplete="off" class="form-control" x-ref="altNameInput"
+                                            @keydown.enter.prevent="$refs.continueBtn.click()" />
                                    </div>
                                </div>
                                <div id="step1ContinueDiv" class="d-flex gap-2 mt-3 justify-content-center"
@@ -150,12 +151,13 @@
                        <form @submit.prevent="submitContactData" class="mb-3" autocomplete="off">
                            <div class="mb-3">
                                <label class="form-label">E-Mail:</label>
-                                <input type="email" x-model="email" required autocomplete="off" class="form-control"
-                                    autofocus />
+                                <input type="email" x-model="email" placeholder="name@example.com" required
+                                    autocomplete="off" class="form-control" autofocus />
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Handynummer (optional):</label>
-                                <input type="text" x-model="phone" autocomplete="off" class="form-control" />
+                                <input type="text" x-model="phone" placeholder="+49123456789" autocomplete="off"
+                                    class="form-control" />
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-outline-secondary flex-fill"
@@ -185,8 +187,8 @@
                        <form @submit.prevent="findKnownContact" class="mb-3">
                            <div class="mb-3">
                                <label class="form-label">Name (wie im Abi-Buch):</label>
-                                <input type="text" x-model="knownContactName" required autocomplete="off"
-                                    class="form-control" autofocus />
+                                <input type="text" x-model="knownContactName" placeholder="Vorname Nachname" required
+                                    autocomplete="off" class="form-control" autofocus />
                            </div>
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-outline-dark flex-fill"
@@ -199,13 +201,13 @@
                            <form @submit.prevent="submitKnownContactData" class="mb-3">
                                <div class="mb-3">
                                    <label class="form-label">E-Mail:</label>
-                                    <input type="email" x-model="knownContactEmail" required autocomplete="off"
-                                        class="form-control" autofocus />
+                                    <input type="email" x-model="knownContactEmail" placeholder="name@example.com"
+                                        required autocomplete="off" class="form-control" autofocus />
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Handynummer (optional):</label>
-                                    <input type="text" x-model="knownContactPhone" autocomplete="off"
-                                        class="form-control" />
+                                    <input type="text" x-model="knownContactPhone" placeholder="+49123456789"
+                                        autocomplete="off" class="form-control" />
                                </div>
                                <button type="submit" class="btn btn-outline-success flex-fill"
                                    :class="{'disabled': working}" autofocus>Speichern</button>
@@ -270,11 +272,34 @@
        </div>
    </div>
    <footer class="text-center py-4 bg-light border-top">
+
+        <div class="spacer"></div>
+
        <a href="/imprint" class="text-secondary" style="text-decoration: none;">Impressum &amp; Datenschutz</a>
+
+        <div class="spacer"></div>
+        <!-- Dark Mode Toggle -->
+        <button class="dark-mode-toggle" @click="toggleDarkMode()"
+            :title="darkMode ? 'Switch to light mode' : 'Switch to dark mode'">
+            <svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+            </svg>
+            <svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="5"></circle>
+                <path
+                    d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4">
+                </path>
+            </svg>
+        </button>
    </footer>
+
    <script>
        function app() {
            return {
+                // Dark mode
+                darkMode: false,
                // Step state
                step: 1,
                stepMsg: '',
@@ -300,6 +325,30 @@
                foundKnownContactName: null,
                // Step 4
                committed: '[[${committed}]]',
+
+                // Initialize dark mode
+                init() {
+                    // Check for saved preference or default to system preference
+                    const savedTheme = localStorage.getItem('darkMode');
+                    if (savedTheme !== null) {
+                        this.darkMode = savedTheme === 'true';
+                    } else {
+                        this.darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                    }
+
+                    // Listen for system theme changes
+                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+                        if (localStorage.getItem('darkMode') === null) {
+                            this.darkMode = e.matches;
+                        }
+                    });
+                },
+
+                toggleDarkMode() {
+                    this.darkMode = !this.darkMode;
+                    localStorage.setItem('darkMode', this.darkMode.toString());
+                },
+
                // Methods
                async findSelf() {
                    this.stepMsg = '';