Lurkars/abi2007
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add darkmode + toggle, add placeholder

Browse Source
This commit is contained in:
Lurkars
2025-09-20 19:36:10 +02:00
parent c3a3ead6fa
commit 7fd216f4f6
2 changed files with 141 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/style.css
+78 -16
View File
@@ -1,5 +1,19 @@
:root { [data-bs-theme="light"] {
--bs-primary: #093e9a; --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, html,
@@ -11,36 +25,52 @@ body {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; 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 { .bg-light {
flex: 1 0 auto; background-color: var(--bs-light) !important;
} }
footer { .text-secondary {
flex-shrink: 0; 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,
.btn-primary:active, .btn-primary:active,
.btn-primary:focus, .btn-primary:focus,
.btn-primary:hover { .btn-primary:hover {
background-color: #093e9a !important; background-color: var(--bs-primary) !important;
border-color: #093e9a !important; border-color: var(--bs-primary) !important;
} }
.bg-primary { .bg-primary {
background-color: #093e9a !important; background-color: var(--bs-primary) !important;
} }
.border-primary { .border-primary {
border-color: #093e9a !important; border-color: var(--bs-primary) !important;
} }
.text-primary { .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 { .container {
@@ -53,8 +83,40 @@ footer {
padding: 16px; padding: 16px;
} }
.d-flex.gap-2>.btn.flex-fill, .main-content {
.d-flex.gap-2>.btn { flex: 1 0 auto;
flex: 1 1 0 !important; }
min-width: 0;
.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;
} }
src/main/resources/templates/index.html
+63 -14
View File
@@ -11,7 +11,7 @@
<link rel="stylesheet" href="/style.css" /> <link rel="stylesheet" href="/style.css" />
</head> </head>
<body> <body x-data="app()" :data-bs-theme="darkMode ? 'dark' : 'light'">
<div class="main-content"> <div class="main-content">
<div class="container pt-5" x-data="app()"> <div class="container pt-5" x-data="app()">
<div class="mb-4"> <div class="mb-4">
@@ -91,8 +91,8 @@
<label class="form-label"> <label class="form-label">
Dein Name (wie im Abi-Buch) Dein Name (wie im Abi-Buch)
</label> </label>
<input type="text" x-model="yourName" required autocomplete="off" <input type="text" x-model="yourName" placeholder="Vorname Nachname" required
class="form-control" autofocus /> autocomplete="off" class="form-control" autofocus />
</div> </div>
<button type="submit" class="btn btn-primary flex-fill" <button type="submit" class="btn btn-primary flex-fill"
:class="{'disabled': working}">Suchen</button> :class="{'disabled': working}">Suchen</button>
@@ -117,8 +117,9 @@
<div id="altNameDiv" class="mt-2" x-show="altNameChecked && userName" x-transition> <div id="altNameDiv" class="mt-2" x-show="altNameChecked && userName" x-transition>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Mein aktueller Name:</label> <label class="form-label">Mein aktueller Name:</label>
<input type="text" x-model="altName" autocomplete="off" class="form-control" <input type="text" x-model="altName" placeholder="Vorname Nachname"
x-ref="altNameInput" @keydown.enter.prevent="$refs.continueBtn.click()" /> autocomplete="off" class="form-control" x-ref="altNameInput"
@keydown.enter.prevent="$refs.continueBtn.click()" />
</div> </div>
</div> </div>
<div id="step1ContinueDiv" class="d-flex gap-2 mt-3 justify-content-center" <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"> <form @submit.prevent="submitContactData" class="mb-3" autocomplete="off">
<div class="mb-3"> <div class="mb-3">
<label class="form-label">E-Mail:</label> <label class="form-label">E-Mail:</label>
<input type="email" x-model="email" required autocomplete="off" class="form-control" <input type="email" x-model="email" placeholder="name@example.com" required
autofocus /> autocomplete="off" class="form-control" autofocus />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Handynummer (optional):</label> <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>
<div class="d-flex gap-2"> <div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary flex-fill" <button type="button" class="btn btn-outline-secondary flex-fill"
@@ -185,8 +187,8 @@
<form @submit.prevent="findKnownContact" class="mb-3"> <form @submit.prevent="findKnownContact" class="mb-3">
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Name (wie im Abi-Buch):</label> <label class="form-label">Name (wie im Abi-Buch):</label>
<input type="text" x-model="knownContactName" required autocomplete="off" <input type="text" x-model="knownContactName" placeholder="Vorname Nachname" required
class="form-control" autofocus /> autocomplete="off" class="form-control" autofocus />
</div> </div>
<div class="d-flex gap-2"> <div class="d-flex gap-2">
<button type="submit" class="btn btn-outline-dark flex-fill" <button type="submit" class="btn btn-outline-dark flex-fill"
@@ -199,13 +201,13 @@
<form @submit.prevent="submitKnownContactData" class="mb-3"> <form @submit.prevent="submitKnownContactData" class="mb-3">
<div class="mb-3"> <div class="mb-3">
<label class="form-label">E-Mail:</label> <label class="form-label">E-Mail:</label>
<input type="email" x-model="knownContactEmail" required autocomplete="off" <input type="email" x-model="knownContactEmail" placeholder="name@example.com"
class="form-control" autofocus /> required autocomplete="off" class="form-control" autofocus />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Handynummer (optional):</label> <label class="form-label">Handynummer (optional):</label>
<input type="text" x-model="knownContactPhone" autocomplete="off" <input type="text" x-model="knownContactPhone" placeholder="+49123456789"
class="form-control" /> autocomplete="off" class="form-control" />
</div> </div>
<button type="submit" class="btn btn-outline-success flex-fill" <button type="submit" class="btn btn-outline-success flex-fill"
:class="{'disabled': working}" autofocus>Speichern</button> :class="{'disabled': working}" autofocus>Speichern</button>
@@ -270,11 +272,34 @@
</div> </div>
</div> </div>
<footer class="text-center py-4 bg-light border-top"> <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> <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> </footer>
<script> <script>
function app() { function app() {
return { return {
// Dark mode
darkMode: false,
// Step state // Step state
step: 1, step: 1,
stepMsg: '', stepMsg: '',
@@ -300,6 +325,30 @@
foundKnownContactName: null, foundKnownContactName: null,
// Step 4 // Step 4
committed: '[[${committed}]]', 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 // Methods
async findSelf() { async findSelf() {
this.stepMsg = ''; this.stepMsg = '';