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/templates/index.html
+63 -14
View File
@@ -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 = '';