add imprint as modal
This commit is contained in:
@@ -1,122 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<head>
|
||||
<title>20 Jahre Abitur 2007</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script defer src="/lib/alpinejs.min.js"></script>
|
||||
<link rel="stylesheet" href="/lib/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/css/style.css" />
|
||||
</head>
|
||||
|
||||
<body x-data="imprintApp()" :data-bs-theme="darkMode ? 'dark' : 'light'">
|
||||
<div class="container mt-5">
|
||||
<div class="card shadow">
|
||||
<div class="card-body">
|
||||
<h2>Impressum</h2>
|
||||
<p>
|
||||
Lukas Haubaum<br>
|
||||
Adresse aus Datenschutzgründen nur auf Nachfrage.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Kontakt:</strong><br>
|
||||
E-Mail: abi2007@8lh.de
|
||||
</p>
|
||||
|
||||
<h4>Haftung für Inhalte</h4>
|
||||
<p>
|
||||
Ich habe die Inhalte dieser Seite mit größter Sorgfalt erstellt. Für die Richtigkeit,
|
||||
Vollständigkeit und
|
||||
Aktualität kann ich aber keine Gewähr übernehmen.
|
||||
</p>
|
||||
|
||||
<h4>Haftung für Links</h4>
|
||||
<p>
|
||||
Auf dieser Seite findest Du Links zu externen Webseiten Dritter, auf deren Inhalte ich keinen
|
||||
Einfluss habe.
|
||||
Deshalb kann ich für diese fremden Inhalte auch keine Gewähr übernehmen.
|
||||
</p>
|
||||
|
||||
<h4>Urheberrecht</h4>
|
||||
<p>
|
||||
Die von mir erstellten Inhalte und Werke auf dieser Seite unterliegen dem deutschen Urheberrecht.
|
||||
Beiträge
|
||||
von anderen sind als solche gekennzeichnet.
|
||||
</p>
|
||||
|
||||
<h2>Datenschutzerklärung</h2>
|
||||
<p>
|
||||
Der Schutz Deiner persönlichen Daten ist mir ein besonderes Anliegen. Ich verarbeite Deine Daten
|
||||
daher
|
||||
ausschließlich auf Grundlage der gesetzlichen Bestimmungen (DSGVO, TMG).
|
||||
</p>
|
||||
<h4>Erhebung und Speicherung personenbezogener Daten</h4>
|
||||
<p>
|
||||
Auf diesem Server werden keinerlei personenbezogene Daten gespeichert, außer den Kontaktdaten, die
|
||||
Du
|
||||
freiwillig angibst (z.B. Name, E-Mail-Adresse).
|
||||
</p>
|
||||
<h4>Verwendung der Kontaktdaten</h4>
|
||||
<p>
|
||||
Deine angegebenen Kontaktdaten werden ausschließlich genutzt, um Dich im Rahmen des Abiturjahrgangs
|
||||
2007 zu
|
||||
kontaktieren und werden nicht an Dritte weitergegeben.
|
||||
</p>
|
||||
<h4>E-Mail-Bestätigungen und Einladungen</h4>
|
||||
<p>
|
||||
Wenn du deine E-Mail-Adresse angibst, bekommst du von mir Bestätigungen zu deiner Anmeldung und Einladungen oder Infos rund ums Abi-Treffen per E-Mail. Deine Adresse wird nicht für Werbung genutzt und nicht weitergegeben.
|
||||
</p>
|
||||
<h4>Serverdaten</h4>
|
||||
<p>Aus technischen Gründen werden bei deinem Besuch auf dieser Seite normalerweise Daten wie Browsertyp, Betriebssystem, die Seite, von der du kommst (Referrer URL), besuchte Seiten, Datum und Uhrzeit sowie deine IP-Adresse an den Server übermittelt. Ich erhebe diese Daten aber grundsätzlich nicht(!), weil mir dein Datenschutz wichtig ist. Nur falls es technisch nötig ist, kann es sein, dass solche Daten kurzfristig gespeichert werden, zum Beispiel zur Verbesserung, Stabilität, Funktionalität oder Sicherheit der Seite. Rechtsgrundlage dafür ist Art. 6 Abs. 1 lit. f) DSGVO.</p>
|
||||
<p>Falls solche Daten doch mal in sogenannten Server-Logfiles landen, werden sie nicht mit anderen Daten von dir zusammengeführt und spätestens nach 14 Tagen gelöscht.</p>
|
||||
|
||||
<h4>Kontaktanfragen / Kontaktmöglichkeit</h4>
|
||||
<p>Wenn du mir per Kontaktformular oder E-Mail schreibst, nutze ich die von dir angegebenen Daten nur, um deine Anfrage zu bearbeiten. Ohne diese Angaben kann ich dir leider nicht oder nur eingeschränkt antworten.</p>
|
||||
<p>Rechtsgrundlage dafür ist Art. 6 Abs. 1 lit. b) DSGVO.</p>
|
||||
|
||||
<h4>Deine Rechte</h4>
|
||||
<p>
|
||||
Du hast grundsätzlich das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung,
|
||||
Datenübertragbarkeit,
|
||||
Widerruf und Widerspruch. Wenn Du glaubst, dass die Verarbeitung Deiner Daten gegen das
|
||||
Datenschutzrecht
|
||||
verstößt, kannst Du Dich bei der Aufsichtsbehörde beschweren.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<a href="/" type="button" class="btn btn-outline-secondary">
|
||||
Zurück
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function imprintApp() {
|
||||
return {
|
||||
darkMode: false,
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<body x-data="app()" :data-bs-theme="darkMode ? 'dark' : 'light'">
|
||||
<div class="main-content">
|
||||
<div class="container pt-5" x-data="app()">
|
||||
<div class="container pt-5">
|
||||
<div class="mb-4">
|
||||
<div class="text-center p-4" style>
|
||||
<div class="d-flex justify-content-center align-items-center mb-2 flex-wrap">
|
||||
@@ -274,18 +274,18 @@
|
||||
<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 & Datenschutz</a>
|
||||
<a href="#" @click.prevent="showImprint = true" class="text-secondary" style="text-decoration: none;">Impressum
|
||||
& 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"
|
||||
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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"
|
||||
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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
|
||||
@@ -295,11 +295,113 @@
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
<!-- Imprint Modal -->
|
||||
<div class="modal fade" :class="{'show': showImprint, 'd-block': showImprint}" x-transition.opacity>
|
||||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Impressum & Datenschutz</h5>
|
||||
<button type="button" class="btn-close" @click="showImprint = false" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h4>Impressum</h4>
|
||||
<p>
|
||||
Lukas Haubaum<br>
|
||||
Adresse aus Datenschutzgründen nur auf Nachfrage.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Kontakt:</strong><br>
|
||||
E-Mail: abi2007@8lh.de
|
||||
</p>
|
||||
|
||||
<h5>Haftung für Inhalte</h5>
|
||||
<p>
|
||||
Ich habe die Inhalte dieser Seite mit größter Sorgfalt erstellt. Für die Richtigkeit,
|
||||
Vollständigkeit und
|
||||
Aktualität kann ich aber keine Gewähr übernehmen.
|
||||
</p>
|
||||
|
||||
<h5>Haftung für Links</h5>
|
||||
<p>
|
||||
Auf dieser Seite findest Du Links zu externen Webseiten Dritter, auf deren Inhalte ich keinen
|
||||
Einfluss habe.
|
||||
Deshalb kann ich für diese fremden Inhalte auch keine Gewähr übernehmen.
|
||||
</p>
|
||||
|
||||
<h5>Urheberrecht</h5>
|
||||
<p>
|
||||
Die von mir erstellten Inhalte und Werke auf dieser Seite unterliegen dem deutschen
|
||||
Urheberrecht.
|
||||
Beiträge
|
||||
von anderen sind als solche gekennzeichnet.
|
||||
</p>
|
||||
|
||||
<h4>Datenschutzerklärung</h4>
|
||||
<p>
|
||||
Der Schutz Deiner persönlichen Daten ist mir ein besonderes Anliegen. Ich verarbeite Deine Daten
|
||||
daher
|
||||
ausschließlich auf Grundlage der gesetzlichen Bestimmungen (DSGVO, TMG).
|
||||
</p>
|
||||
<h5>Erhebung und Speicherung personenbezogener Daten</h5>
|
||||
<p>
|
||||
Auf diesem Server werden keinerlei personenbezogene Daten gespeichert, außer den Kontaktdaten,
|
||||
die
|
||||
Du
|
||||
freiwillig angibst (z.B. Name, E-Mail-Adresse).
|
||||
</p>
|
||||
<h5>Verwendung der Kontaktdaten</h5>
|
||||
<p>
|
||||
Deine angegebenen Kontaktdaten werden ausschließlich genutzt, um Dich im Rahmen des
|
||||
Abiturjahrgangs
|
||||
2007 zu
|
||||
kontaktieren und werden nicht an Dritte weitergegeben.
|
||||
</p>
|
||||
<h5>E-Mail-Bestätigungen und Einladungen</h5>
|
||||
<p>
|
||||
Wenn du deine E-Mail-Adresse angibst, bekommst du von mir Bestätigungen zu deiner Anmeldung und
|
||||
Einladungen oder Infos rund ums Abi-Treffen per E-Mail. Deine Adresse wird nicht für Werbung
|
||||
genutzt und nicht weitergegeben.
|
||||
</p>
|
||||
<h5>Serverdaten</h5>
|
||||
<p>Aus technischen Gründen werden bei deinem Besuch auf dieser Seite normalerweise Daten wie
|
||||
Browsertyp, Betriebssystem, die Seite, von der du kommst (Referrer URL), besuchte Seiten, Datum
|
||||
und Uhrzeit sowie deine IP-Adresse an den Server übermittelt. Ich erhebe diese Daten aber
|
||||
grundsätzlich nicht(!), weil mir dein Datenschutz wichtig ist. Nur falls es technisch nötig ist,
|
||||
kann es sein, dass solche Daten kurzfristig gespeichert werden, zum Beispiel zur Verbesserung,
|
||||
Stabilität, Funktionalität oder Sicherheit der Seite. Rechtsgrundlage dafür ist Art. 6 Abs. 1
|
||||
lit. f) DSGVO.</p>
|
||||
<p>Falls solche Daten doch mal in sogenannten Server-Logfiles landen, werden sie nicht mit anderen
|
||||
Daten von dir zusammengeführt und spätestens nach 14 Tagen gelöscht.</p>
|
||||
|
||||
<h5>Kontaktanfragen / Kontaktmöglichkeit</h5>
|
||||
<p>Wenn du mir per Kontaktformular oder E-Mail schreibst, nutze ich die von dir angegebenen Daten
|
||||
nur, um deine Anfrage zu bearbeiten. Ohne diese Angaben kann ich dir leider nicht oder nur
|
||||
eingeschränkt antworten.</p>
|
||||
<p>Rechtsgrundlage dafür ist Art. 6 Abs. 1 lit. b) DSGVO.</p>
|
||||
|
||||
<h5>Deine Rechte</h5>
|
||||
<p>
|
||||
Du hast grundsätzlich das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung,
|
||||
Datenübertragbarkeit,
|
||||
Widerruf und Widerspruch. Wenn Du glaubst, dass die Verarbeitung Deiner Daten gegen das
|
||||
Datenschutzrecht
|
||||
verstößt, kannst Du Dich bei der Aufsichtsbehörde beschweren.
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="showImprint = false">Schließen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function app() {
|
||||
return {
|
||||
// Dark mode
|
||||
darkMode: false,
|
||||
// Modal state
|
||||
showImprint: false,
|
||||
// Step state
|
||||
step: 1,
|
||||
stepMsg: '',
|
||||
|
||||
Reference in New Issue
Block a user