269 lines
12 KiB
HTML
269 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Einstellungen{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="relative mb-6" data-page="settings">
|
|
<!-- Header Bereich -->
|
|
<div class="mb-8 p-6 bg-gradient-to-br from-slate-900/80 to-slate-800/60 rounded-lg border border-slate-700/20 shadow-xl">
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-3">
|
|
<span class="gradient-text">Einstellungen</span>
|
|
</h1>
|
|
<p class="text-lg text-gray-300 max-w-3xl">
|
|
Verwalten Sie Ihr Konto und passen Sie Ihre Benutzererfahrung an.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Einstellungen Grid Layout -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Seitennavigation (Desktop) -->
|
|
<div class="lg:col-span-1 order-2 lg:order-1">
|
|
<div class="sticky top-6 bg-gradient-to-br from-slate-900/80 to-slate-800/60 rounded-lg border border-slate-700/20 shadow-xl overflow-hidden p-4">
|
|
<nav>
|
|
<div class="text-xs uppercase text-gray-400 font-semibold tracking-wider mb-3 px-3">Navigation</div>
|
|
<ul class="space-y-1">
|
|
<li>
|
|
<button id="nav-account" class="w-full text-left px-3 py-2 rounded-md flex items-center text-purple-300 bg-purple-900/20 border-l-2 border-purple-500">
|
|
<i class="fa-solid fa-user-circle mr-3"></i>
|
|
<span>Konto</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button id="nav-appearance" class="w-full text-left px-3 py-2 rounded-md flex items-center text-gray-300 hover:bg-white/5">
|
|
<i class="fa-solid fa-palette mr-3"></i>
|
|
<span>Erscheinungsbild</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button id="nav-notifications" class="w-full text-left px-3 py-2 rounded-md flex items-center text-gray-300 hover:bg-white/5">
|
|
<i class="fa-solid fa-bell mr-3"></i>
|
|
<span>Benachrichtigungen</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button id="nav-privacy" class="w-full text-left px-3 py-2 rounded-md flex items-center text-gray-300 hover:bg-white/5">
|
|
<i class="fa-solid fa-shield-alt mr-3"></i>
|
|
<span>Datenschutz</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hauptinhalt der Einstellungen -->
|
|
<div class="lg:col-span-2 order-1 lg:order-2">
|
|
<!-- Konto-Einstellungen -->
|
|
<div id="section-account" class="bg-gradient-to-br from-slate-900/80 to-slate-800/60 rounded-lg border border-slate-700/20 shadow-xl p-6 mb-6">
|
|
<h2 class="text-2xl font-bold text-white mb-4 flex items-center">
|
|
<i class="fa-solid fa-user-circle text-purple-400 mr-3"></i>
|
|
Konto-Einstellungen
|
|
</h2>
|
|
|
|
<div class="mb-6 p-4 bg-slate-900/50 rounded-lg">
|
|
<div class="flex items-center">
|
|
<div class="h-16 w-16 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white text-2xl font-bold">
|
|
{{ current_user.username[0] | upper }}
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-lg font-medium text-white">{{ current_user.username }}</h3>
|
|
<p class="text-gray-400">{{ current_user.email }}</p>
|
|
<p class="text-xs text-gray-500 mt-1">
|
|
Mitglied seit {{ current_user.id | string }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="POST" class="space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="username" class="block text-sm font-medium text-gray-400 mb-1">Benutzername</label>
|
|
<input type="text" name="username" id="username" value="{{ current_user.username }}" disabled
|
|
class="w-full bg-slate-800/80 border border-slate-700 rounded-md py-2 px-3 text-white focus:ring-1 focus:ring-purple-500">
|
|
<p class="mt-1 text-xs text-gray-500">Der Benutzername kann derzeit nicht geändert werden.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-400 mb-1">E-Mail-Adresse</label>
|
|
<input type="email" name="email" id="email" value="{{ current_user.email }}" disabled
|
|
class="w-full bg-slate-800/80 border border-slate-700 rounded-md py-2 px-3 text-white focus:ring-1 focus:ring-purple-500">
|
|
<p class="mt-1 text-xs text-gray-500">Die E-Mail-Adresse kann derzeit nicht geändert werden.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-slate-700 pt-6">
|
|
<h3 class="text-lg font-medium text-white mb-4">Passwort ändern</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="current_password" class="block text-sm font-medium text-gray-400 mb-1">Aktuelles Passwort</label>
|
|
<input type="password" name="current_password" id="current_password"
|
|
class="w-full bg-slate-800/80 border border-slate-700 rounded-md py-2 px-3 text-white focus:ring-1 focus:ring-purple-500">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="new_password" class="block text-sm font-medium text-gray-400 mb-1">Neues Passwort</label>
|
|
<input type="password" name="new_password" id="new_password"
|
|
class="w-full bg-slate-800/80 border border-slate-700 rounded-md py-2 px-3 text-white focus:ring-1 focus:ring-purple-500">
|
|
<p class="mt-1 text-xs text-gray-500">Mindestens 6 Zeichen</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="confirm_password" class="block text-sm font-medium text-gray-400 mb-1">Passwort bestätigen</label>
|
|
<input type="password" name="confirm_password" id="confirm_password"
|
|
class="w-full bg-slate-800/80 border border-slate-700 rounded-md py-2 px-3 text-white focus:ring-1 focus:ring-purple-500">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="submit" class="py-2 px-4 rounded-md bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-medium transition duration-300 transform hover:-translate-y-0.5">
|
|
Änderungen speichern
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Erscheinungsbild -->
|
|
<div id="section-appearance" class="bg-gradient-to-br from-slate-900/80 to-slate-800/60 rounded-lg border border-slate-700/20 shadow-xl p-6 mb-6 hidden">
|
|
<h2 class="text-2xl font-bold text-white mb-4 flex items-center">
|
|
<i class="fa-solid fa-palette text-purple-400 mr-3"></i>
|
|
Erscheinungsbild
|
|
</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div class="p-4 bg-slate-900/50 rounded-lg">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h3 class="text-lg font-medium text-white">Dunkles Design</h3>
|
|
<p class="text-gray-400">Wechsle zwischen hellem und dunklem Modus</p>
|
|
</div>
|
|
<div>
|
|
<button id="toggle-dark-mode" class="w-14 h-7 flex items-center bg-purple-900/30 rounded-full px-1 transition-all" onclick="toggleDarkMode()">
|
|
<div id="dark-mode-indicator" class="bg-purple-500 w-5 h-5 rounded-full shadow-md transform transition-transform duration-300 translate-x-7"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Benachrichtigungen -->
|
|
<div id="section-notifications" class="bg-gradient-to-br from-slate-900/80 to-slate-800/60 rounded-lg border border-slate-700/20 shadow-xl p-6 mb-6 hidden">
|
|
<h2 class="text-2xl font-bold text-white mb-4 flex items-center">
|
|
<i class="fa-solid fa-bell text-purple-400 mr-3"></i>
|
|
Benachrichtigungen
|
|
</h2>
|
|
|
|
<div class="p-4 bg-slate-900/50 rounded-lg">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h3 class="text-lg font-medium text-white">E-Mail-Benachrichtigungen</h3>
|
|
<p class="text-gray-400">Diese Funktion wird in einer zukünftigen Version verfügbar sein.</p>
|
|
</div>
|
|
<div>
|
|
<span class="px-2 py-1 text-xs rounded-full bg-slate-700 text-gray-300">
|
|
Demnächst
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Datenschutz -->
|
|
<div id="section-privacy" class="bg-gradient-to-br from-slate-900/80 to-slate-800/60 rounded-lg border border-slate-700/20 shadow-xl p-6 mb-6 hidden">
|
|
<h2 class="text-2xl font-bold text-white mb-4 flex items-center">
|
|
<i class="fa-solid fa-shield-alt text-purple-400 mr-3"></i>
|
|
Datenschutz und Sicherheit
|
|
</h2>
|
|
|
|
<div class="p-4 bg-slate-900/50 rounded-lg">
|
|
<h3 class="text-lg font-medium text-white mb-2">Datenverarbeitung</h3>
|
|
<p class="text-gray-400 mb-3">
|
|
Wir verarbeiten Ihre Daten gemäß unserer Datenschutzrichtlinie.
|
|
</p>
|
|
<a href="{{ url_for('datenschutz') }}" class="text-purple-400 hover:text-purple-300 inline-flex items-center">
|
|
<span>Datenschutzerklärung lesen</span>
|
|
<i class="fa-solid fa-arrow-right ml-1 text-sm"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Navigation-Buttons
|
|
const navButtons = {
|
|
'nav-account': 'section-account',
|
|
'nav-appearance': 'section-appearance',
|
|
'nav-notifications': 'section-notifications',
|
|
'nav-privacy': 'section-privacy'
|
|
};
|
|
|
|
// Alle Abschnitte ausblenden außer dem ersten
|
|
Object.values(navButtons).forEach(sectionId => {
|
|
if (sectionId !== 'section-account') {
|
|
document.getElementById(sectionId).classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// Klick-Handler für Navigation
|
|
for (const [navId, sectionId] of Object.entries(navButtons)) {
|
|
document.getElementById(navId).addEventListener('click', function() {
|
|
// Alle Abschnitte ausblenden
|
|
Object.values(navButtons).forEach(id => {
|
|
document.getElementById(id).classList.add('hidden');
|
|
});
|
|
|
|
// Ausgewählten Abschnitt anzeigen
|
|
document.getElementById(sectionId).classList.remove('hidden');
|
|
|
|
// Aktiven Navigations-Button hervorheben, andere zurücksetzen
|
|
for (const btnId of Object.keys(navButtons)) {
|
|
const btn = document.getElementById(btnId);
|
|
if (btnId === navId) {
|
|
btn.classList.add('text-purple-300', 'bg-purple-900/20', 'border-l-2', 'border-purple-500');
|
|
btn.classList.remove('text-gray-300', 'hover:bg-white/5');
|
|
} else {
|
|
btn.classList.remove('text-purple-300', 'bg-purple-900/20', 'border-l-2', 'border-purple-500');
|
|
btn.classList.add('text-gray-300', 'hover:bg-white/5');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Dark Mode Toggle aktualisieren
|
|
function updateDarkModeToggle() {
|
|
const isDarkMode = document.documentElement.classList.contains('dark');
|
|
const indicator = document.getElementById('dark-mode-indicator');
|
|
|
|
if (indicator) {
|
|
if (isDarkMode) {
|
|
indicator.classList.add('translate-x-7');
|
|
indicator.classList.remove('translate-x-0');
|
|
} else {
|
|
indicator.classList.add('translate-x-0');
|
|
indicator.classList.remove('translate-x-7');
|
|
}
|
|
}
|
|
}
|
|
|
|
updateDarkModeToggle();
|
|
|
|
// Globale Funktion für Toggle-Button
|
|
window.toggleDarkMode = function() {
|
|
if (typeof MindMap !== 'undefined' && typeof MindMap.toggleDarkMode === 'function') {
|
|
MindMap.toggleDarkMode();
|
|
} else {
|
|
document.documentElement.classList.toggle('dark');
|
|
}
|
|
updateDarkModeToggle();
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |