marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: automatic commit 2025-04-30 12:48

Browse Source
This commit is contained in:
Till Tomczak
2025-04-30 12:48:06 +02:00
parent f69356473b
commit e4ab1e1bb5
5284 changed files with 868438 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
templates/settings.html Normal file
View File

@@ -0,0 +1,269 @@
{% 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 %}