Remove deprecated files and templates: Delete unused files including deployment scripts, environment configurations, and various HTML templates to streamline the project structure. This cleanup enhances maintainability and reduces clutter in the codebase.
This commit is contained in:
308
templates/admin.html
Normal file
308
templates/admin.html
Normal file
@@ -0,0 +1,308 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Admin-Bereich{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h1 class="text-3xl font-bold mb-8 text-gray-800 dark:text-white">Admin-Bereich</h1>
|
||||
|
||||
<!-- Tabs für verschiedene Bereiche -->
|
||||
<div x-data="{ activeTab: 'users' }" class="mb-8">
|
||||
<div class="flex space-x-2 mb-6 overflow-x-auto">
|
||||
<button
|
||||
@click="activeTab = 'users'"
|
||||
:class="activeTab === 'users' ? 'bg-primary-600 text-white' : 'bg-white/10 text-gray-700 dark:text-gray-200'"
|
||||
class="px-4 py-2 rounded-lg font-medium transition-all">
|
||||
<i class="fas fa-users mr-2"></i> Benutzer
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'nodes'"
|
||||
:class="activeTab === 'nodes' ? 'bg-primary-600 text-white' : 'bg-white/10 text-gray-700 dark:text-gray-200'"
|
||||
class="px-4 py-2 rounded-lg font-medium transition-all">
|
||||
<i class="fas fa-project-diagram mr-2"></i> Mindmap-Knoten
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'thoughts'"
|
||||
:class="activeTab === 'thoughts' ? 'bg-primary-600 text-white' : 'bg-white/10 text-gray-700 dark:text-gray-200'"
|
||||
class="px-4 py-2 rounded-lg font-medium transition-all">
|
||||
<i class="fas fa-lightbulb mr-2"></i> Gedanken
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'stats'"
|
||||
:class="activeTab === 'stats' ? 'bg-primary-600 text-white' : 'bg-white/10 text-gray-700 dark:text-gray-200'"
|
||||
class="px-4 py-2 rounded-lg font-medium transition-all">
|
||||
<i class="fas fa-chart-bar mr-2"></i> Statistiken
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Benutzer-Tab -->
|
||||
<div x-show="activeTab === 'users'" class="glass-morphism rounded-lg p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Benutzerverwaltung</h2>
|
||||
<button class="btn-outline">
|
||||
<i class="fas fa-plus mr-2"></i> Neuer Benutzer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="text-left border-b border-gray-200 dark:border-gray-700">
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">ID</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Benutzername</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">E-Mail</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Admin</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Gedanken</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user in users %}
|
||||
<tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-dark-700/30">
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ user.id }}</td>
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300 font-medium">{{ user.username }}</td>
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ user.email }}</td>
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300">
|
||||
{% if user.is_admin %}
|
||||
<span class="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 px-2 py-1 rounded text-xs">Admin</span>
|
||||
{% else %}
|
||||
<span class="bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 px-2 py-1 rounded text-xs">User</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ user.thoughts|length }}</td>
|
||||
<td class="px-4 py-3 flex space-x-2">
|
||||
<button class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mindmap-Knoten-Tab -->
|
||||
<div x-show="activeTab === 'nodes'" class="glass-morphism rounded-lg p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Mindmap-Knoten Verwaltung</h2>
|
||||
<button class="btn-outline">
|
||||
<i class="fas fa-plus mr-2"></i> Neuer Knoten
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="text-left border-b border-gray-200 dark:border-gray-700">
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">ID</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Name</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Elternknoten</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Gedanken</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for node in nodes %}
|
||||
<tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-dark-700/30">
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ node.id }}</td>
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300 font-medium">{{ node.name }}</td>
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300">
|
||||
{% if node.parent %}
|
||||
{{ node.parent.name }}
|
||||
{% else %}
|
||||
<span class="text-gray-400 dark:text-gray-500">Wurzelknoten</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ node.thoughts|length }}</td>
|
||||
<td class="px-4 py-3 flex space-x-2">
|
||||
<button class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gedanken-Tab -->
|
||||
<div x-show="activeTab === 'thoughts'" class="glass-morphism rounded-lg p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Gedanken-Verwaltung</h2>
|
||||
<div class="flex space-x-2">
|
||||
<div class="relative">
|
||||
<input type="text" placeholder="Suchen..." class="form-input pl-10 pr-4 py-2 rounded-lg bg-white/10 border border-gray-200/20 dark:border-gray-700/20 focus:outline-none focus:ring-2 focus:ring-primary-500 text-gray-700 dark:text-gray-200">
|
||||
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-outline">
|
||||
<i class="fas fa-filter mr-2"></i> Filter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="text-left border-b border-gray-200 dark:border-gray-700">
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">ID</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Titel</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Autor</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Datum</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Bewertung</th>
|
||||
<th class="px-4 py-2 text-gray-700 dark:text-gray-300">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for thought in thoughts %}
|
||||
<tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-dark-700/30">
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ thought.id }}</td>
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300 font-medium">{{ thought.title }}</td>
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ thought.author.username }}</td>
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ thought.timestamp.strftime('%d.%m.%Y') }}</td>
|
||||
<td class="px-4 py-3 text-gray-700 dark:text-gray-300">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">{{ "%.1f"|format(thought.average_rating) }}</span>
|
||||
<div class="flex">
|
||||
{% for i in range(5) %}
|
||||
{% if i < thought.average_rating|int %}
|
||||
<i class="fas fa-star text-yellow-400"></i>
|
||||
{% elif i < (thought.average_rating|int + 0.5) %}
|
||||
<i class="fas fa-star-half-alt text-yellow-400"></i>
|
||||
{% else %}
|
||||
<i class="far fa-star text-yellow-400"></i>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 flex space-x-2">
|
||||
<button class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
<button class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiken-Tab -->
|
||||
<div x-show="activeTab === 'stats'" class="glass-morphism rounded-lg p-6">
|
||||
<h2 class="text-xl font-bold mb-6 text-gray-800 dark:text-white">Systemstatistiken</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<div class="glass-effect p-4 rounded-lg">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="bg-blue-500/20 p-3 rounded-lg mr-3">
|
||||
<i class="fas fa-users text-blue-500"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Benutzer</h3>
|
||||
<p class="text-2xl font-bold text-gray-800 dark:text-white">{{ users|length }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-effect p-4 rounded-lg">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="bg-purple-500/20 p-3 rounded-lg mr-3">
|
||||
<i class="fas fa-project-diagram text-purple-500"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Knoten</h3>
|
||||
<p class="text-2xl font-bold text-gray-800 dark:text-white">{{ nodes|length }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-effect p-4 rounded-lg">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="bg-green-500/20 p-3 rounded-lg mr-3">
|
||||
<i class="fas fa-lightbulb text-green-500"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Gedanken</h3>
|
||||
<p class="text-2xl font-bold text-gray-800 dark:text-white">{{ thoughts|length }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-effect p-4 rounded-lg">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="bg-red-500/20 p-3 rounded-lg mr-3">
|
||||
<i class="fas fa-comments text-red-500"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Kommentare</h3>
|
||||
<p class="text-2xl font-bold text-gray-800 dark:text-white">
|
||||
{% set comment_count = 0 %}
|
||||
{% for thought in thoughts %}
|
||||
{% set comment_count = comment_count + thought.comments|length %}
|
||||
{% endfor %}
|
||||
{{ comment_count }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="glass-effect p-4 rounded-lg">
|
||||
<h3 class="text-lg font-bold mb-4 text-gray-800 dark:text-white">Aktive Benutzer</h3>
|
||||
<div class="h-64 flex items-center justify-center bg-gray-100/20 dark:bg-dark-700/20 rounded">
|
||||
<p class="text-gray-500 dark:text-gray-400">Hier würde ein Aktivitätsdiagramm angezeigt werden</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-effect p-4 rounded-lg">
|
||||
<h3 class="text-lg font-bold mb-4 text-gray-800 dark:text-white">Gedanken pro Kategorie</h3>
|
||||
<div class="h-64 flex items-center justify-center bg-gray-100/20 dark:bg-dark-700/20 rounded">
|
||||
<p class="text-gray-500 dark:text-gray-400">Hier würde eine Verteilungsstatistik angezeigt werden</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System-Log (immer sichtbar) -->
|
||||
<div class="mt-8">
|
||||
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">System-Log</h2>
|
||||
<div class="glass-morphism rounded-lg p-4 h-32 overflow-y-auto font-mono text-sm text-gray-700 dark:text-gray-300">
|
||||
<div class="text-green-500">[INFO] [{{ now.strftime('%Y-%m-%d %H:%M:%S') }}] System gestartet</div>
|
||||
<div class="text-blue-500">[INFO] [{{ now.strftime('%Y-%m-%d %H:%M:%S') }}] Admin-Bereich aufgerufen von {{ current_user.username }}</div>
|
||||
<div class="text-yellow-500">[WARN] [{{ now.strftime('%Y-%m-%d %H:%M:%S') }}] Hohe Serverauslastung erkannt</div>
|
||||
<div class="text-gray-500">[INFO] [{{ now.strftime('%Y-%m-%d %H:%M:%S') }}] Backup erfolgreich erstellt</div>
|
||||
<div class="text-red-500">[ERROR] [{{ now.strftime('%Y-%m-%d %H:%M:%S') }}] API-Zugriffsfehler (Timeout) bei externer Anfrage</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
// Admin-spezifische JavaScript-Funktionen
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('Admin-Bereich geladen');
|
||||
|
||||
// Beispiel für AJAX-Ladeverhalten von Daten
|
||||
// Kann später durch echte API-Calls ersetzt werden
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
71
templates/agb.html
Normal file
71
templates/agb.html
Normal file
@@ -0,0 +1,71 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}AGB{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="card p-6 md:p-8">
|
||||
<h1 class="text-3xl font-bold mb-6 gradient-text">Allgemeine Geschäftsbedingungen</h1>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">1. Geltungsbereich</h2>
|
||||
<p class="mb-4">Diese Allgemeinen Geschäftsbedingungen (nachfolgend "AGB") gelten für die Nutzung der MindMap-Plattform (nachfolgend "Plattform"), die von der MindMap GmbH, Musterstraße 123, 12345 Musterstadt (nachfolgend "Anbieter") betrieben wird.</p>
|
||||
<p class="mb-4">Mit der Registrierung und/oder Nutzung der Plattform erkennt der Nutzer diese AGB an. Die Nutzung der Plattform ist nur zulässig, wenn der Nutzer diese AGB akzeptiert.</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">2. Leistungsbeschreibung</h2>
|
||||
<p class="mb-4">Die Plattform bietet dem Nutzer die Möglichkeit, komplexe Informationen in Form von Mindmaps zu visualisieren, zu organisieren und zu teilen. Der genaue Funktionsumfang ergibt sich aus der jeweiligen Leistungsbeschreibung auf der Website des Anbieters.</p>
|
||||
<p class="mb-4">Der Anbieter ist berechtigt, die angebotenen Dienste zu ändern, neue Dienste unentgeltlich oder entgeltlich verfügbar zu machen und die Bereitstellung unentgeltlicher Dienste einzustellen. Der Anbieter wird hierbei jeweils auf die berechtigten Interessen des Nutzers Rücksicht nehmen.</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">3. Registrierung und Nutzerkonto</h2>
|
||||
<p class="mb-4">Die Nutzung bestimmter Funktionen der Plattform setzt die Registrierung eines Nutzerkontos voraus. Die Registrierung ist nur volljährigen und voll geschäftsfähigen natürlichen Personen erlaubt.</p>
|
||||
<p class="mb-4">Der Nutzer verpflichtet sich, bei der Registrierung wahrheitsgemäße und vollständige Angaben zu machen und diese Daten stets aktuell zu halten. Es ist nicht gestattet, mehrere Nutzerkonten zu erstellen.</p>
|
||||
<p class="mb-4">Der Nutzer ist verpflichtet, seine Zugangsdaten geheim zu halten und vor dem Zugriff durch unbefugte Dritte zu schützen. Der Anbieter wird den Nutzer niemals nach seinem Passwort fragen.</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">4. Nutzungsrechte</h2>
|
||||
<p class="mb-4">Der Anbieter gewährt dem Nutzer für die Dauer der Vertragslaufzeit ein einfaches, nicht übertragbares Recht zur Nutzung der Plattform im vertraglich vereinbarten Umfang.</p>
|
||||
<p class="mb-4">Der Nutzer räumt dem Anbieter an den von ihm auf der Plattform eingestellten Inhalten ein einfaches, übertragbares, unterlizenzierbares, räumlich und zeitlich unbeschränktes Nutzungsrecht ein, soweit dies für den Betrieb der Plattform erforderlich ist.</p>
|
||||
<p class="mb-4">Der Nutzer garantiert, dass er über alle Rechte an den von ihm eingestellten Inhalten verfügt und durch diese keine Rechte Dritter verletzt werden.</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">5. Pflichten des Nutzers</h2>
|
||||
<p class="mb-4">Der Nutzer verpflichtet sich, die Plattform nur im Einklang mit diesen AGB und den geltenden Gesetzen zu nutzen. Insbesondere ist es dem Nutzer untersagt:</p>
|
||||
<ul class="list-disc pl-6 mb-4 space-y-2">
|
||||
<li>die Plattform für rechtswidrige oder betrügerische Zwecke zu nutzen</li>
|
||||
<li>rechtswidrige, beleidigende, diskriminierende oder anderweitig anstößige Inhalte zu verbreiten</li>
|
||||
<li>Schadsoftware, Viren oder andere schädliche Computercodes zu verbreiten</li>
|
||||
<li>die normale Funktion der Plattform zu stören oder übermäßig zu belasten</li>
|
||||
<li>auf die Plattform mit automatisierten Mitteln zuzugreifen (wie z.B. Bots, Scraper)</li>
|
||||
<li>die Plattform zu reverse-engineeren, zu dekompilieren oder zu disassemblieren</li>
|
||||
</ul>
|
||||
<p class="mb-4">Der Anbieter behält sich das Recht vor, bei Verstößen gegen diese Pflichten entsprechende Maßnahmen zu ergreifen, einschließlich der Sperrung des Nutzerkontos.</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">6. Verfügbarkeit und Wartung</h2>
|
||||
<p class="mb-4">Der Anbieter ist bemüht, eine hohe Verfügbarkeit der Plattform zu gewährleisten, kann jedoch keine unterbrechungsfreie Verfügbarkeit garantieren. Insbesondere können Wartungsarbeiten, Sicherheits- oder Kapazitätsprobleme sowie Ereignisse, die außerhalb des Einflussbereichs des Anbieters liegen, zu vorübergehenden Unterbrechungen führen.</p>
|
||||
<p class="mb-4">Der Anbieter wird planmäßige Wartungsarbeiten, sofern möglich, vorher ankündigen und zu Zeiten durchführen, in denen die Nutzung der Plattform typischerweise gering ist.</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">7. Haftung</h2>
|
||||
<p class="mb-4">Der Anbieter haftet unbeschränkt für Vorsatz und grobe Fahrlässigkeit sowie nach dem Produkthaftungsgesetz. Für leichte Fahrlässigkeit haftet der Anbieter nur bei Verletzung einer wesentlichen Vertragspflicht und der Höhe nach beschränkt auf die bei Vertragsschluss vorhersehbaren und vertragstypischen Schäden. Wesentliche Vertragspflichten sind solche, deren Erfüllung die ordnungsgemäße Durchführung des Vertrags überhaupt erst ermöglicht und auf deren Einhaltung der Nutzer regelmäßig vertrauen darf.</p>
|
||||
<p class="mb-4">Diese Haftungsbeschränkung gilt nicht für Schäden aus der Verletzung des Lebens, des Körpers oder der Gesundheit.</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">8. Schlussbestimmungen</h2>
|
||||
<p class="mb-4">Es gilt das Recht der Bundesrepublik Deutschland unter Ausschluss des UN-Kaufrechts.</p>
|
||||
<p class="mb-4">Sollten einzelne Bestimmungen dieser AGB unwirksam sein oder werden, bleibt die Wirksamkeit der übrigen Bestimmungen unberührt.</p>
|
||||
<p class="mb-4">Der Anbieter behält sich vor, diese AGB jederzeit zu ändern. Änderungen werden dem Nutzer rechtzeitig vor ihrem Inkrafttreten mitgeteilt. Die Änderungen gelten als akzeptiert, wenn der Nutzer ihnen nicht innerhalb von vier Wochen nach Erhalt der Mitteilung widerspricht.</p>
|
||||
<p class="mb-4">Stand: Mai 2023</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
528
templates/base.html
Normal file
528
templates/base.html
Normal file
@@ -0,0 +1,528 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Systades - {% block title %}{% endblock %}</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="{{ url_for('static', filename='img/favicon.svg') }}" type="image/svg+xml">
|
||||
<link rel="icon" href="{{ url_for('static', filename='img/favicon.ico') }}" sizes="any">
|
||||
|
||||
<!-- Meta Tags -->
|
||||
<meta name="description" content="Eine interaktive Plattform zum Visualisieren, Erforschen und Teilen von Wissen">
|
||||
<meta name="keywords" content="systades, wissen, visualisierung, lernen, gedanken, theorie">
|
||||
<meta name="author" content="Systades-Team">
|
||||
|
||||
<!-- Tailwind CSS über CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'ui-monospace', 'monospace']
|
||||
},
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#f5f3ff',
|
||||
100: '#ede9fe',
|
||||
200: '#ddd6fe',
|
||||
300: '#c4b5fd',
|
||||
400: '#a78bfa',
|
||||
500: '#8b5cf6',
|
||||
600: '#7c3aed',
|
||||
700: '#6d28d9',
|
||||
800: '#5b21b6',
|
||||
900: '#4c1d95'
|
||||
},
|
||||
secondary: {
|
||||
50: '#ecfdf5',
|
||||
100: '#d1fae5',
|
||||
200: '#a7f3d0',
|
||||
300: '#6ee7b7',
|
||||
400: '#34d399',
|
||||
500: '#10b981',
|
||||
600: '#059669',
|
||||
700: '#047857',
|
||||
800: '#065f46',
|
||||
900: '#064e3b'
|
||||
},
|
||||
dark: {
|
||||
500: '#374151',
|
||||
600: '#1f2937',
|
||||
700: '#111827',
|
||||
800: '#0e1220',
|
||||
900: '#0a0e19'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- Assistent CSS -->
|
||||
<link href="{{ url_for('static', filename='css/assistant.css') }}" rel="stylesheet">
|
||||
|
||||
<!-- Basis-Stylesheet -->
|
||||
<link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
|
||||
|
||||
<!-- Base-Styles ausgelagert in eigene Datei -->
|
||||
<link href="{{ url_for('static', filename='css/base-styles.css') }}" rel="stylesheet">
|
||||
|
||||
<!-- Alpine.js -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js"></script>
|
||||
|
||||
<!-- Network Background Script -->
|
||||
<script src="{{ url_for('static', filename='network-background.js') }}"></script>
|
||||
|
||||
<!-- Hauptmodul laden (als ES6 Modul) -->
|
||||
<script type="module">
|
||||
import MindMap from "{{ url_for('static', filename='js/main.js') }}";
|
||||
// Alpine.js-Integration
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('layout', () => ({
|
||||
darkMode: false,
|
||||
mobileMenuOpen: false,
|
||||
userMenuOpen: false,
|
||||
showSettingsModal: false,
|
||||
|
||||
init() {
|
||||
this.fetchDarkModeFromSession();
|
||||
},
|
||||
|
||||
fetchDarkModeFromSession() {
|
||||
// Lade den Dark Mode-Status vom Server
|
||||
fetch('/get_dark_mode')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
this.darkMode = data.darkMode === 'true';
|
||||
document.querySelector('html').classList.toggle('dark', this.darkMode);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fehler beim Laden der Dark Mode-Einstellung:', error);
|
||||
});
|
||||
},
|
||||
|
||||
toggleDarkMode() {
|
||||
this.darkMode = !this.darkMode;
|
||||
document.querySelector('html').classList.toggle('dark', this.darkMode);
|
||||
|
||||
// Speichere den Dark Mode-Status auf dem Server
|
||||
fetch('/set_dark_mode', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ darkMode: this.darkMode })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
// Zusätzlich im localStorage speichern für sofortige Reaktion bei Seitenwechsel
|
||||
localStorage.setItem('darkMode', this.darkMode ? 'dark' : 'light');
|
||||
// Event auslösen für andere Komponenten
|
||||
document.dispatchEvent(new CustomEvent('darkModeToggled', {
|
||||
detail: { isDark: this.darkMode }
|
||||
}));
|
||||
} else {
|
||||
console.error('Fehler beim Speichern der Dark Mode-Einstellung:', data.error);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fehler beim Speichern der Dark Mode-Einstellung:', error);
|
||||
});
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
// MindMap global verfügbar machen (für Alpine.js und andere nicht-Module Skripte)
|
||||
window.MindMap = MindMap;
|
||||
</script>
|
||||
|
||||
<!-- Seitenspezifische Styles -->
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
<body data-page="{{ request.endpoint }}" class="relative overflow-x-hidden">
|
||||
<!-- Globaler Hintergrund -->
|
||||
<div class="full-page-bg"></div>
|
||||
<!-- Statischer Fallback-Hintergrund (wird nur angezeigt, wenn JavaScript deaktiviert ist) -->
|
||||
<div class="fixed inset-0 z-[-9] bg-cover bg-center opacity-50"></div>
|
||||
|
||||
<!-- App-Container -->
|
||||
<div id="app-container" class="flex flex-col min-h-screen" x-data="layout">
|
||||
<!-- Hauptnavigation -->
|
||||
<nav class="sticky top-0 left-0 right-0 z-50 transition-all duration-300 py-4 px-5 border-b glass-morphism"
|
||||
x-bind:class="darkMode ? 'glass-navbar-dark border-white/10' : 'glass-navbar-light border-gray-200/50'">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
<!-- Logo -->
|
||||
<a href="{{ url_for('index') }}" class="flex items-center group">
|
||||
<span class="text-2xl font-bold gradient-text transform transition-transform group-hover:scale-105">Systades</span>
|
||||
</a>
|
||||
|
||||
<!-- Hauptnavigation - Desktop -->
|
||||
<div class="hidden md:flex items-center space-x-5">
|
||||
<a href="{{ url_for('index') }}"
|
||||
class="nav-link flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? '{{ 'nav-link-active' if request.endpoint == 'index' else '' }}'
|
||||
: '{{ 'nav-link-light-active' if request.endpoint == 'index' else 'nav-link-light' }}'">
|
||||
<i class="fa-solid fa-home mr-2"></i>Start
|
||||
</a>
|
||||
<a href="{{ url_for('mindmap') }}"
|
||||
class="nav-link flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? '{{ 'nav-link-active' if request.endpoint == 'mindmap' else '' }}'
|
||||
: '{{ 'nav-link-light-active' if request.endpoint == 'mindmap' else 'nav-link-light' }}'">
|
||||
<i class="fa-solid fa-diagram-project mr-2"></i>Mindmap
|
||||
</a>
|
||||
<a href="{{ url_for('search_thoughts_page') }}"
|
||||
class="nav-link flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? '{{ 'nav-link-active' if request.endpoint == 'search_thoughts_page' else '' }}'
|
||||
: '{{ 'nav-link-light-active' if request.endpoint == 'search_thoughts_page' else 'nav-link-light' }}'">
|
||||
<i class="fa-solid fa-search mr-2"></i>Suche
|
||||
</a>
|
||||
<!-- KI-Assistent Button -->
|
||||
<button onclick="window.MindMap && window.MindMap.assistant && window.MindMap.assistant.toggleAssistant(true)"
|
||||
class="nav-link flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? 'bg-gradient-to-r from-purple-600/80 to-blue-500/80 text-white font-medium px-4 py-2 rounded-xl hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5'
|
||||
: 'bg-gradient-to-r from-purple-500/20 to-blue-400/20 text-gray-800 font-medium px-4 py-2 rounded-xl hover:shadow-md transition-all duration-300 hover:-translate-y-0.5'">
|
||||
<i class="fa-solid fa-robot mr-2"></i>KI-Chat
|
||||
</button>
|
||||
{% if current_user.is_authenticated %}
|
||||
<a href="{{ url_for('profile') }}"
|
||||
class="nav-link flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? '{{ 'nav-link-active' if request.endpoint == 'profile' else '' }}'
|
||||
: '{{ 'nav-link-light-active' if request.endpoint == 'profile' else 'nav-link-light' }}'">
|
||||
<i class="fa-solid fa-user mr-2"></i>Profil
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Rechte Seite -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Dark Mode Toggle Switch -->
|
||||
<div class="flex items-center cursor-pointer" @click="toggleDarkMode">
|
||||
<div class="relative w-12 h-6">
|
||||
<input type="checkbox" id="darkModeToggle" class="sr-only" x-model="darkMode">
|
||||
<div class="block w-12 h-6 rounded-full transition-colors duration-300"
|
||||
x-bind:class="darkMode ? 'bg-blue-400/50' : 'bg-gray-400/50'"></div>
|
||||
<div class="dot absolute left-1 top-1 w-4 h-4 rounded-full transition-transform duration-300 shadow-md"
|
||||
x-bind:class="darkMode ? 'bg-blue-500 transform translate-x-6' : 'bg-white'"></div>
|
||||
</div>
|
||||
<div class="ml-3 hidden sm:block"
|
||||
x-bind:class="darkMode ? 'text-white/90' : 'text-gray-700'">
|
||||
<span x-text="darkMode ? 'Dunkel' : 'Hell'"></span>
|
||||
</div>
|
||||
<div class="ml-2 sm:hidden"
|
||||
x-bind:class="darkMode ? 'text-white/90' : 'text-gray-700'">
|
||||
<i class="fa-solid" :class="darkMode ? 'fa-sun' : 'fa-moon'"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Profil-Link oder Login -->
|
||||
{% if current_user.is_authenticated %}
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button @click="open = !open"
|
||||
class="flex items-center space-x-2 p-2 rounded-full transition-all duration-300 cursor-pointer"
|
||||
x-bind:class="darkMode
|
||||
? 'bg-gray-800/80 text-white/90 hover:bg-gray-700/80'
|
||||
: 'bg-gray-200/80 text-gray-700 hover:bg-gray-300/80'">
|
||||
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white font-medium text-sm overflow-hidden"
|
||||
style="background: linear-gradient(135deg, #8b5cf6, #6366f1);">
|
||||
{% if current_user.avatar %}
|
||||
<img src="{{ current_user.avatar }}" alt="{{ current_user.username }}" class="w-full h-full object-cover">
|
||||
{% else %}
|
||||
{{ current_user.username[0].upper() }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="text-sm hidden lg:block">{{ current_user.username }}</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs hidden lg:block transition-transform duration-200"
|
||||
x-bind:class="open ? 'transform rotate-180' : ''"></i>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown-Menü -->
|
||||
<div x-show="open"
|
||||
@click.away="open = false"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
class="absolute right-0 mt-2 w-52 rounded-2xl overflow-hidden shadow-lg transform origin-top-right z-50"
|
||||
x-bind:class="darkMode
|
||||
? 'bg-gray-800/95 backdrop-blur-md border border-white/10'
|
||||
: 'bg-white/95 backdrop-blur-md border border-gray-200/50'">
|
||||
<a href="{{ url_for('profile') }}"
|
||||
class="block px-4 py-3 transition-colors duration-200 flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? 'text-white/90 hover:bg-purple-500/20'
|
||||
: 'text-gray-700 hover:bg-purple-500/10'">
|
||||
<i class="fa-solid fa-user mr-2 text-purple-400"></i>Profil
|
||||
</a>
|
||||
<a href="{{ url_for('my_account') }}"
|
||||
class="block px-4 py-3 transition-colors duration-200 flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? 'text-white/90 hover:bg-purple-500/20'
|
||||
: 'text-gray-700 hover:bg-purple-500/10'">
|
||||
<i class="fa-solid fa-bookmark mr-2 text-purple-400"></i>Meine Merkliste
|
||||
</a>
|
||||
<a href="{{ url_for('settings') }}"
|
||||
class="block px-4 py-3 transition-colors duration-200 flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? 'text-white/90 hover:bg-purple-500/20'
|
||||
: 'text-gray-700 hover:bg-purple-500/10'">
|
||||
<i class="fa-solid fa-gear mr-2 text-purple-400"></i>Einstellungen
|
||||
</a>
|
||||
<div class="my-2 h-px" x-bind:class="darkMode ? 'bg-white/10' : 'bg-gray-200'"></div>
|
||||
<a href="{{ url_for('logout') }}"
|
||||
class="block px-4 py-3 transition-colors duration-200 flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? 'text-white/90 hover:bg-red-500/20'
|
||||
: 'text-gray-700 hover:bg-red-500/10'">
|
||||
<i class="fa-solid fa-right-from-bracket mr-2 text-red-400"></i>Abmelden
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a href="{{ url_for('login') }}"
|
||||
class="flex items-center px-4 py-2.5 rounded-xl font-medium transition-all duration-300"
|
||||
x-bind:class="darkMode
|
||||
? 'bg-gray-800/80 text-white hover:bg-gray-700/80 shadow-md hover:shadow-lg hover:-translate-y-0.5'
|
||||
: 'bg-gray-200/80 text-gray-800 hover:bg-gray-300/80 shadow-sm hover:shadow-md hover:-translate-y-0.5'">
|
||||
<i class="fa-solid fa-user mr-2"></i>Mein Konto
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<!-- Mobilmenü-Button -->
|
||||
<button @click="mobileMenuOpen = !mobileMenuOpen"
|
||||
class="md:hidden rounded-xl p-2.5 transition-colors duration-200 focus:outline-none"
|
||||
x-bind:class="darkMode
|
||||
? 'text-white/90 hover:bg-gray-700/50'
|
||||
: 'text-gray-700 hover:bg-gray-200/80'">
|
||||
<i class="fa-solid" :class="mobileMenuOpen ? 'fa-times' : 'fa-bars'"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menü -->
|
||||
<div x-show="mobileMenuOpen"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 -translate-y-4"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 -translate-y-4"
|
||||
class="md:hidden w-full z-40 border-b"
|
||||
x-bind:class="darkMode
|
||||
? 'bg-gray-900/90 backdrop-blur-lg border-white/10'
|
||||
: 'bg-white/90 backdrop-blur-lg border-gray-200'">
|
||||
<div class="px-4 py-4 space-y-3">
|
||||
<a href="{{ url_for('index') }}"
|
||||
class="block py-3.5 px-4 rounded-xl transition-all duration-200 flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? '{{ 'bg-purple-500/20 text-white' if request.endpoint == 'index' else 'text-white/80 hover:bg-gray-800/80 hover:text-white' }}'
|
||||
: '{{ 'bg-purple-500/10 text-gray-900' if request.endpoint == 'index' else 'text-gray-700 hover:bg-gray-100 hover:text-gray-900' }}'">
|
||||
<i class="fa-solid fa-home w-5 mr-3"></i>Start
|
||||
</a>
|
||||
<a href="{{ url_for('mindmap') }}"
|
||||
class="block py-3.5 px-4 rounded-xl transition-all duration-200 flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? '{{ 'bg-purple-500/20 text-white' if request.endpoint == 'mindmap' else 'text-white/80 hover:bg-gray-800/80 hover:text-white' }}'
|
||||
: '{{ 'bg-purple-500/10 text-gray-900' if request.endpoint == 'mindmap' else 'text-gray-700 hover:bg-gray-100 hover:text-gray-900' }}'">
|
||||
<i class="fa-solid fa-diagram-project w-5 mr-3"></i>Mindmap
|
||||
</a>
|
||||
<a href="{{ url_for('search_thoughts_page') }}"
|
||||
class="block py-3.5 px-4 rounded-xl transition-all duration-200 flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? '{{ 'bg-purple-500/20 text-white' if request.endpoint == 'search_thoughts_page' else 'text-white/80 hover:bg-gray-800/80 hover:text-white' }}'
|
||||
: '{{ 'bg-purple-500/10 text-gray-900' if request.endpoint == 'search_thoughts_page' else 'text-gray-700 hover:bg-gray-100 hover:text-gray-900' }}'">
|
||||
<i class="fa-solid fa-search w-5 mr-3"></i>Suche
|
||||
</a>
|
||||
<!-- KI-Button für Mobilmenü -->
|
||||
<button onclick="window.MindMap && window.MindMap.assistant && window.MindMap.assistant.toggleAssistant(true); mobileMenuOpen = false;"
|
||||
class="block w-full text-left py-3.5 px-4 rounded-xl transition-all duration-200 flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? 'bg-gradient-to-r from-purple-600/30 to-blue-500/30 text-white hover:from-purple-600/40 hover:to-blue-500/40'
|
||||
: 'bg-gradient-to-r from-purple-500/10 to-blue-400/10 text-gray-900 hover:from-purple-500/20 hover:to-blue-400/20'">
|
||||
<i class="fa-solid fa-robot w-5 mr-3"></i>KI-Chat
|
||||
</button>
|
||||
{% if current_user.is_authenticated %}
|
||||
<a href="{{ url_for('profile') }}"
|
||||
class="block py-3.5 px-4 rounded-xl transition-all duration-200 flex items-center"
|
||||
x-bind:class="darkMode
|
||||
? '{{ 'bg-purple-500/20 text-white' if request.endpoint == 'profile' else 'text-white/80 hover:bg-gray-800/80 hover:text-white' }}'
|
||||
: '{{ 'bg-purple-500/10 text-gray-900' if request.endpoint == 'profile' else 'text-gray-700 hover:bg-gray-100 hover:text-gray-900' }}'">
|
||||
<i class="fa-solid fa-user w-5 mr-3"></i>Profil
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hauptinhalt -->
|
||||
<main class="flex-grow pt-6">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="mt-12 py-10 transition-colors duration-300 rounded-t-3xl mx-4 sm:mx-6 md:mx-8"
|
||||
:class="darkMode ? 'bg-gray-900/60 backdrop-blur-xl border-t border-white/10' : 'bg-white/60 backdrop-blur-xl border-t border-gray-200/50'">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
<!-- Logo und Beschreibung -->
|
||||
<div class="text-center md:text-left flex flex-col">
|
||||
<a href="{{ url_for('index') }}" class="text-2xl font-bold mb-4 gradient-text inline-block transform transition-transform hover:scale-105">Systades</a>
|
||||
<p class="mt-2 text-sm max-w-md"
|
||||
:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
|
||||
Eine interaktive Plattform zum Visualisieren, Erforschen und Teilen von Wissen und Gedanken in einem strukturierten Format.
|
||||
</p>
|
||||
<!-- Social Media Icons -->
|
||||
<div class="flex items-center space-x-4 mt-6 justify-center md:justify-start">
|
||||
<a href="#" class="transition-all duration-200 transform hover:scale-110 hover:-translate-y-1"
|
||||
:class="darkMode ? 'text-purple-400 hover:text-purple-300' : 'text-purple-600 hover:text-purple-500'">
|
||||
<i class="fab fa-twitter text-xl"></i>
|
||||
</a>
|
||||
<a href="#" class="transition-all duration-200 transform hover:scale-110 hover:-translate-y-1"
|
||||
:class="darkMode ? 'text-purple-400 hover:text-purple-300' : 'text-purple-600 hover:text-purple-500'">
|
||||
<i class="fab fa-linkedin text-xl"></i>
|
||||
</a>
|
||||
<a href="#" class="transition-all duration-200 transform hover:scale-110 hover:-translate-y-1"
|
||||
:class="darkMode ? 'text-purple-400 hover:text-purple-300' : 'text-purple-600 hover:text-purple-500'">
|
||||
<i class="fab fa-github text-xl"></i>
|
||||
</a>
|
||||
<a href="#" class="transition-all duration-200 transform hover:scale-110 hover:-translate-y-1"
|
||||
:class="darkMode ? 'text-purple-400 hover:text-purple-300' : 'text-purple-600 hover:text-purple-500'">
|
||||
<i class="fab fa-discord text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="grid grid-cols-2 gap-8">
|
||||
<div class="flex flex-col space-y-3">
|
||||
<h3 class="font-semibold text-lg mb-2"
|
||||
:class="darkMode ? 'text-white' : 'text-gray-800'">Navigation</h3>
|
||||
<a href="{{ url_for('index') }}" class="text-sm transition-all duration-200"
|
||||
:class="darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">
|
||||
Startseite
|
||||
</a>
|
||||
<a href="{{ url_for('mindmap') }}" class="text-sm transition-all duration-200"
|
||||
:class="darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">
|
||||
Mindmap
|
||||
</a>
|
||||
{% if current_user.is_authenticated %}
|
||||
<a href="{{ url_for('profile') }}" class="text-sm transition-all duration-200"
|
||||
:class="darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">
|
||||
Profil
|
||||
</a>
|
||||
<a href="{{ url_for('my_account') }}" class="text-sm transition-all duration-200"
|
||||
:class="darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">
|
||||
Meine Merkliste
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('login') }}" class="text-sm transition-all duration-200"
|
||||
:class="darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">
|
||||
Anmelden
|
||||
</a>
|
||||
<a href="{{ url_for('register') }}" class="text-sm transition-all duration-200"
|
||||
:class="darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">
|
||||
Registrieren
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col space-y-3">
|
||||
<h3 class="font-semibold text-lg mb-2"
|
||||
:class="darkMode ? 'text-white' : 'text-gray-800'">Rechtliches</h3>
|
||||
<a href="{{ url_for('impressum') }}" class="text-sm transition-all duration-200"
|
||||
:class="darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">
|
||||
Impressum
|
||||
</a>
|
||||
<a href="{{ url_for('datenschutz') }}" class="text-sm transition-all duration-200"
|
||||
:class="darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">
|
||||
Datenschutz
|
||||
</a>
|
||||
<a href="{{ url_for('agb') }}" class="text-sm transition-all duration-200"
|
||||
:class="darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">
|
||||
AGB
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter Anmeldung -->
|
||||
<div class="flex flex-col">
|
||||
<h3 class="font-semibold text-lg mb-4"
|
||||
:class="darkMode ? 'text-white' : 'text-gray-800'">Newsletter</h3>
|
||||
<p class="text-sm mb-4"
|
||||
:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
|
||||
Bleibe auf dem Laufenden mit unseren neuesten Funktionen und Updates.
|
||||
</p>
|
||||
<form class="flex flex-col space-y-3">
|
||||
<input type="email" placeholder="Deine E-Mail Adresse"
|
||||
class="px-4 py-2.5 rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500"
|
||||
:class="darkMode ? 'bg-gray-800/80 text-white border border-gray-700 focus:bg-gray-800' : 'bg-white/80 text-gray-800 border border-gray-300 focus:bg-white'" />
|
||||
<button type="submit"
|
||||
class="px-4 py-2.5 rounded-xl font-medium transition-all duration-300 bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-md hover:shadow-lg hover:-translate-y-0.5">
|
||||
Abonnieren
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Untere Linie -->
|
||||
<div class="mt-10 pt-6 border-t flex flex-col md:flex-row justify-between items-center"
|
||||
:class="darkMode ? 'border-gray-800/50 text-gray-400' : 'border-gray-300/50 text-gray-600'">
|
||||
<div class="text-xs md:text-sm mb-3 md:mb-0">
|
||||
© {{ current_year }} Systades. Alle Rechte vorbehalten.
|
||||
</div>
|
||||
<div class="text-xs md:text-sm">
|
||||
Designed with <i class="fas fa-heart text-pink-500"></i> in Deutschland
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Hilfsscripts -->
|
||||
{% block scripts %}{% endblock %}
|
||||
|
||||
<!-- KI-Chat Initialisierung -->
|
||||
<script type="module">
|
||||
// Importiere und initialisiere den ChatGPT-Assistenten direkt, um sicherzustellen,
|
||||
// dass er auf jeder Seite verfügbar ist, selbst wenn MindMap nicht geladen ist
|
||||
import ChatGPTAssistant from "{{ url_for('static', filename='js/modules/chatgpt-assistant.js') }}";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Prüfen, ob der Assistent bereits durch MindMap initialisiert wurde
|
||||
if (!window.MindMap || !window.MindMap.assistant) {
|
||||
console.log('KI-Assistent wird direkt initialisiert...');
|
||||
const assistant = new ChatGPTAssistant();
|
||||
assistant.init();
|
||||
|
||||
// Speichere in window.MindMap, falls es existiert, oder erstelle es
|
||||
if (!window.MindMap) {
|
||||
window.MindMap = {};
|
||||
}
|
||||
window.MindMap.assistant = assistant;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
64
templates/datenschutz.html
Normal file
64
templates/datenschutz.html
Normal file
@@ -0,0 +1,64 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Datenschutz{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="card p-6 md:p-8">
|
||||
<h1 class="text-3xl font-bold mb-6 gradient-text">Datenschutzerklärung</h1>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">1. Datenschutz auf einen Blick</h2>
|
||||
|
||||
<h3 class="text-lg font-bold mb-2">Allgemeine Hinweise</h3>
|
||||
<p class="mb-4">Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können. Ausführliche Informationen zum Thema Datenschutz entnehmen Sie unserer unter diesem Text aufgeführten Datenschutzerklärung.</p>
|
||||
|
||||
<h3 class="text-lg font-bold mb-2">Datenerfassung auf dieser Website</h3>
|
||||
<p class="mb-4"><strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong></p>
|
||||
<p class="mb-4">Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Impressum dieser Website entnehmen.</p>
|
||||
|
||||
<p class="mb-4"><strong>Wie erfassen wir Ihre Daten?</strong></p>
|
||||
<p class="mb-4">Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z. B. um Daten handeln, die Sie in ein Kontaktformular eingeben.</p>
|
||||
<p class="mb-4">Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor allem technische Daten (z. B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs). Die Erfassung dieser Daten erfolgt automatisch, sobald Sie diese Website betreten.</p>
|
||||
|
||||
<p class="mb-4"><strong>Wofür nutzen wir Ihre Daten?</strong></p>
|
||||
<p class="mb-4">Ein Teil der Daten wird erhoben, um eine fehlerfreie Bereitstellung der Website zu gewährleisten. Andere Daten können zur Analyse Ihres Nutzerverhaltens verwendet werden.</p>
|
||||
|
||||
<p class="mb-4"><strong>Welche Rechte haben Sie bezüglich Ihrer Daten?</strong></p>
|
||||
<p class="mb-4">Sie haben jederzeit das Recht, unentgeltlich Auskunft über Herkunft, Empfänger und Zweck Ihrer gespeicherten personenbezogenen Daten zu erhalten. Sie haben außerdem ein Recht, die Berichtigung oder Löschung dieser Daten zu verlangen. Wenn Sie eine Einwilligung zur Datenverarbeitung erteilt haben, können Sie diese Einwilligung jederzeit für die Zukunft widerrufen. Außerdem haben Sie das Recht, unter bestimmten Umständen die Einschränkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen.</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">2. Allgemeine Hinweise und Pflichtinformationen</h2>
|
||||
|
||||
<h3 class="text-lg font-bold mb-2">Datenschutz</h3>
|
||||
<p class="mb-4">Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.</p>
|
||||
<p class="mb-4">Wenn Sie diese Website benutzen, werden verschiedene personenbezogene Daten erhoben. Personenbezogene Daten sind Daten, mit denen Sie persönlich identifiziert werden können. Die vorliegende Datenschutzerklärung erläutert, welche Daten wir erheben und wofür wir sie nutzen. Sie erläutert auch, wie und zu welchem Zweck das geschieht.</p>
|
||||
<p class="mb-4">Wir weisen darauf hin, dass die Datenübertragung im Internet (z. B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.</p>
|
||||
|
||||
<h3 class="text-lg font-bold mb-2">Hinweis zur verantwortlichen Stelle</h3>
|
||||
<p class="mb-4">Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:</p>
|
||||
<p class="mb-4">
|
||||
MindMap GmbH<br>
|
||||
Musterstraße 123<br>
|
||||
12345 Musterstadt<br>
|
||||
Deutschland
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Telefon: +49 (0) 123 456789<br>
|
||||
E-Mail: info@mindmap-example.com
|
||||
</p>
|
||||
<p class="mb-4">Verantwortliche Stelle ist die natürliche oder juristische Person, die allein oder gemeinsam mit anderen über die Zwecke und Mittel der Verarbeitung von personenbezogenen Daten (z. B. Namen, E-Mail-Adressen o. Ä.) entscheidet.</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">3. Datenerfassung auf dieser Website</h2>
|
||||
|
||||
<h3 class="text-lg font-bold mb-2">Cookies</h3>
|
||||
<p class="mb-4">Unsere Internetseiten verwenden so genannte "Cookies". Cookies sind kleine Datenpakete und richten auf Ihrem Endgerät keinen Schaden an. Sie werden entweder vorübergehend für die Dauer einer Sitzung (Session-Cookies) oder dauerhaft (permanente Cookies) auf Ihrem Endgerät gespeichert. Session-Cookies werden nach Ende Ihres Besuchs automatisch gelöscht. Permanente Cookies bleiben auf Ihrem Endgerät gespeichert, bis Sie diese selbst löschen oder eine automatische Löschung durch Ihren Webbrowser erfolgt.</p>
|
||||
<p class="mb-4">Cookies können von uns (First-Party-Cookies) oder von Drittunternehmen stammen (sog. Third-Party-Cookies). Third-Party-Cookies ermöglichen die Einbindung bestimmter Dienstleistungen von Drittunternehmen innerhalb von Webseiten (z. B. Cookies zur Abwicklung von Zahlungsdienstleistungen).</p>
|
||||
<p class="mb-4">Die meisten Browser bieten Ihnen die Möglichkeit, das Setzen von Cookies für bestimmte Webseiten zu verbieten oder Cookies jedes Mal vor dem Akzeptieren anzuzeigen. Ebenso können Sie jederzeit mitgeteilt bekommen, sobald Ihr Browser ein neues Cookie empfängt.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
23
templates/errors/403.html
Normal file
23
templates/errors/403.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}403 - Zugriff verweigert{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-[65vh] flex flex-col items-center justify-center px-4 py-12">
|
||||
<div class="glass-effect max-w-2xl w-full p-8 rounded-lg border border-gray-300/20 dark:border-gray-700/30 shadow-lg">
|
||||
<div class="text-center">
|
||||
<h1 class="text-6xl font-bold text-primary-600 dark:text-primary-400 mb-4">403</h1>
|
||||
<h2 class="text-2xl font-semibold mb-4">Zugriff verweigert</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-8">Sie haben nicht die erforderlichen Berechtigungen, um auf diese Seite zuzugreifen. Bitte melden Sie sich an oder nutzen Sie ein Konto mit entsprechenden Rechten.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="{{ url_for('index') }}" class="btn-primary">
|
||||
<i class="fa-solid fa-home mr-2"></i>Zur Startseite
|
||||
</a>
|
||||
<a href="javascript:history.back()" class="btn-secondary">
|
||||
<i class="fa-solid fa-arrow-left mr-2"></i>Zurück
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
23
templates/errors/404.html
Normal file
23
templates/errors/404.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}404 - Seite nicht gefunden{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-[65vh] flex flex-col items-center justify-center px-4 py-12">
|
||||
<div class="glass-effect max-w-2xl w-full p-8 rounded-lg border border-gray-300/20 dark:border-gray-700/30 shadow-lg">
|
||||
<div class="text-center">
|
||||
<h1 class="text-6xl font-bold text-primary-600 dark:text-primary-400 mb-4">404</h1>
|
||||
<h2 class="text-2xl font-semibold mb-4">Seite nicht gefunden</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-8">Die gesuchte Seite existiert nicht oder wurde verschoben. Bitte prüfen Sie die URL oder nutzen Sie die Navigation.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="{{ url_for('index') }}" class="btn-primary">
|
||||
<i class="fa-solid fa-home mr-2"></i>Zur Startseite
|
||||
</a>
|
||||
<a href="javascript:history.back()" class="btn-secondary">
|
||||
<i class="fa-solid fa-arrow-left mr-2"></i>Zurück
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
23
templates/errors/429.html
Normal file
23
templates/errors/429.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}429 - Zu viele Anfragen{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-[65vh] flex flex-col items-center justify-center px-4 py-12">
|
||||
<div class="glass-effect max-w-2xl w-full p-8 rounded-lg border border-gray-300/20 dark:border-gray-700/30 shadow-lg">
|
||||
<div class="text-center">
|
||||
<h1 class="text-6xl font-bold text-primary-600 dark:text-primary-400 mb-4">429</h1>
|
||||
<h2 class="text-2xl font-semibold mb-4">Zu viele Anfragen</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-8">Sie haben zu viele Anfragen in kurzer Zeit gestellt. Bitte warten Sie einen Moment und versuchen Sie es dann erneut.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="{{ url_for('index') }}" class="btn-primary">
|
||||
<i class="fa-solid fa-home mr-2"></i>Zur Startseite
|
||||
</a>
|
||||
<a href="javascript:history.back()" class="btn-secondary">
|
||||
<i class="fa-solid fa-arrow-left mr-2"></i>Zurück
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
23
templates/errors/500.html
Normal file
23
templates/errors/500.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}500 - Serverfehler{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-[65vh] flex flex-col items-center justify-center px-4 py-12">
|
||||
<div class="glass-effect max-w-2xl w-full p-8 rounded-lg border border-gray-300/20 dark:border-gray-700/30 shadow-lg">
|
||||
<div class="text-center">
|
||||
<h1 class="text-6xl font-bold text-primary-600 dark:text-primary-400 mb-4">500</h1>
|
||||
<h2 class="text-2xl font-semibold mb-4">Interner Serverfehler</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-8">Es ist ein Fehler auf unserem Server aufgetreten. Unser Team wurde informiert und arbeitet bereits an einer Lösung. Bitte versuchen Sie es später erneut.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="{{ url_for('index') }}" class="btn-primary">
|
||||
<i class="fa-solid fa-home mr-2"></i>Zur Startseite
|
||||
</a>
|
||||
<a href="javascript:history.back()" class="btn-secondary">
|
||||
<i class="fa-solid fa-arrow-left mr-2"></i>Zurück
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
64
templates/impressum.html
Normal file
64
templates/impressum.html
Normal file
@@ -0,0 +1,64 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Impressum{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="card p-6 md:p-8">
|
||||
<h1 class="text-3xl font-bold mb-6 gradient-text">Impressum</h1>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">Angaben gemäß § 5 TMG</h2>
|
||||
<p class="mb-4">MindMap GmbH<br>
|
||||
Musterstraße 123<br>
|
||||
12345 Musterstadt<br>
|
||||
Deutschland</p>
|
||||
|
||||
<p class="mb-4">
|
||||
<strong>Vertreten durch:</strong><br>
|
||||
Max Mustermann, Geschäftsführer
|
||||
</p>
|
||||
|
||||
<p class="mb-4">
|
||||
<strong>Kontakt:</strong><br>
|
||||
Telefon: +49 (0) 123 456789<br>
|
||||
E-Mail: info@mindmap-example.com
|
||||
</p>
|
||||
|
||||
<p class="mb-4">
|
||||
<strong>Registereintrag:</strong><br>
|
||||
Eintragung im Handelsregister.<br>
|
||||
Registergericht: Amtsgericht Musterstadt<br>
|
||||
Registernummer: HRB 12345
|
||||
</p>
|
||||
|
||||
<p class="mb-4">
|
||||
<strong>Umsatzsteuer-ID:</strong><br>
|
||||
Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:<br>
|
||||
DE 123456789
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">Redaktionell verantwortlich</h2>
|
||||
<p>
|
||||
Max Mustermann<br>
|
||||
Musterstraße 123<br>
|
||||
12345 Musterstadt
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4">Haftungsausschluss</h2>
|
||||
|
||||
<h3 class="text-lg font-bold mb-2">Haftung für Inhalte</h3>
|
||||
<p class="mb-4">Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.</p>
|
||||
<p class="mb-4">Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.</p>
|
||||
|
||||
<h3 class="text-lg font-bold mb-2">Haftung für Links</h3>
|
||||
<p class="mb-4">Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.</p>
|
||||
<p>Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
603
templates/index.html
Normal file
603
templates/index.html
Normal file
@@ -0,0 +1,603 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Wissensnetzwerk{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
/* Hintergrund über die gesamte Seite erstrecken */
|
||||
html, body {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Entferne den Gradient-Hintergrund vollständig */
|
||||
.hero-gradient, .bg-fade {
|
||||
background: none !important;
|
||||
clip-path: none !important;
|
||||
}
|
||||
|
||||
.tech-line {
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, rgba(100, 100, 100, 0.1), transparent);
|
||||
}
|
||||
|
||||
.tech-dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(100, 100, 100, 0.2);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.dark .tech-line {
|
||||
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
}
|
||||
|
||||
.dark .tech-dot {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { r: 10; opacity: 0.7; }
|
||||
50% { r: 12; opacity: 1; }
|
||||
100% { r: 10; opacity: 0.7; }
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes iconPulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.icon-pulse {
|
||||
animation: iconPulse 3s ease-in-out infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Volle Seitenbreite für Container */
|
||||
#app-container, .container, main, .mx-auto, .py-12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Sicherstellen dass der Hintergrund die ganze Seite abdeckt */
|
||||
.full-page-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Chat-Animationen */
|
||||
.typing-dots span {
|
||||
animation-duration: 1.2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/* Chat-Nachrichten-Animation */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
#embedded-chat-messages > div {
|
||||
animation: fadeInUp 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Sanftes Scrollen im Chat */
|
||||
#embedded-chat-messages {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Benutzerdefinierter Scrollbar für den Chat */
|
||||
#embedded-chat-messages::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
#embedded-chat-messages::-webkit-scrollbar-track {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#embedded-chat-messages::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(139, 92, 246, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.dark #embedded-chat-messages::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(139, 92, 246, 0.5);
|
||||
}
|
||||
|
||||
/* Hover-Effekt für Quick-Query-Buttons */
|
||||
.quick-query-btn:hover {
|
||||
cursor: pointer;
|
||||
background: linear-gradient(to right, rgba(139, 92, 246, 0.1), rgba(96, 165, 250, 0.1));
|
||||
}
|
||||
|
||||
.dark .quick-query-btn:hover {
|
||||
background: linear-gradient(to right, rgba(139, 92, 246, 0.2), rgba(96, 165, 250, 0.2));
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Hintergrund für die gesamte Seite -->
|
||||
<div class="full-page-bg gradient-background"></div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative pt-20 pb-32">
|
||||
<!-- Hero Content -->
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="hero-heading mb-8 text-gray-900 dark:text-white">
|
||||
<span class="gradient-text inline-block transform transition-all duration-700 hover:scale-105">Wissen</span> neu
|
||||
<div class="mt-2 relative">
|
||||
<span class="relative inline-block">vernetzen
|
||||
<div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-purple-500/0 via-purple-500/70 to-purple-500/0 rounded-full"></div>
|
||||
</span>
|
||||
</div>
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-12">
|
||||
Erkunde komplexe Ideen visuell, schaffe Verbindungen und teile deine Gedanken
|
||||
in einem interaktiven Wissensnetzwerk.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<a href="{{ url_for('mindmap') }}" class="group transition-all duration-300 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium text-lg px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:shadow-purple-500/20 transform hover:-translate-y-1">
|
||||
<span class="flex items-center justify-center">
|
||||
<i class="fa-solid fa-diagram-project mr-3 text-purple-200 group-hover:text-white transition-all duration-300 animate-pulse"></i>
|
||||
<span class="relative">
|
||||
Mindmap erkunden
|
||||
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300"></span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
{% if not current_user.is_authenticated %}
|
||||
<a href="{{ url_for('register') }}" class="group transition-all duration-300 bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white font-medium text-lg px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:shadow-blue-500/20 transform hover:-translate-y-1">
|
||||
<span class="flex items-center justify-center">
|
||||
<i class="fa-solid fa-user-plus mr-3 text-blue-200 group-hover:text-white transition-all duration-300 icon-pulse"></i>
|
||||
<span class="relative">
|
||||
Konto erstellen
|
||||
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300"></span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tech illustration -->
|
||||
<div class="relative w-full max-w-4xl mx-auto h-80 sm:h-96">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="hidden md:block text-center">
|
||||
<div class="text-3xl font-bold gradient-text mb-2 animate-float">Systades</div>
|
||||
<div class="text-lg text-gray-700 dark:text-gray-300">WISSEN VERNETZEN</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Visualization with SVG -->
|
||||
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
|
||||
<!-- Glossy Nodes and Lines -->
|
||||
<defs>
|
||||
<radialGradient id="nodeGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
|
||||
<stop offset="0%" stop-color="rgba(139, 92, 246, 0.9)" />
|
||||
<stop offset="100%" stop-color="rgba(79, 70, 229, 0.5)" />
|
||||
</radialGradient>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="5" result="blur" />
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Network Lines -->
|
||||
<g class="lines">
|
||||
<!-- Connection network -->
|
||||
<line x1="200" y1="250" x2="400" y2="150" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
|
||||
<line x1="400" y1="150" x2="600" y2="250" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
|
||||
<line x1="600" y1="250" x2="400" y2="350" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
|
||||
<line x1="400" y1="350" x2="200" y2="250" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
|
||||
<line x1="400" y1="150" x2="400" y2="350" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
|
||||
<line x1="200" y1="250" x2="600" y2="250" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
|
||||
|
||||
<!-- Dark mode connections -->
|
||||
<line x1="200" y1="250" x2="400" y2="150" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
|
||||
<line x1="400" y1="150" x2="600" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
|
||||
<line x1="600" y1="250" x2="400" y2="350" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
|
||||
<line x1="400" y1="350" x2="200" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
|
||||
<line x1="400" y1="150" x2="400" y2="350" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
|
||||
<line x1="200" y1="250" x2="600" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
|
||||
|
||||
<!-- Pulse animation for some lines -->
|
||||
<line class="animate-pulse" x1="400" y1="150" x2="300" y2="200" stroke="rgba(139, 92, 246, 0.5)" stroke-width="2" />
|
||||
<line class="animate-pulse" x1="400" y1="350" x2="500" y2="300" stroke="rgba(168, 85, 247, 0.5)" stroke-width="2" />
|
||||
</g>
|
||||
|
||||
<!-- Network Nodes -->
|
||||
<g class="nodes">
|
||||
<circle cx="400" cy="150" r="15" fill="url(#nodeGradient)" filter="url(#glow)" class="animate-pulse float-animation" />
|
||||
<circle cx="200" cy="250" r="10" fill="url(#nodeGradient)" class="float-animation" />
|
||||
<circle cx="600" cy="250" r="10" fill="url(#nodeGradient)" class="float-animation" />
|
||||
<circle cx="400" cy="350" r="15" fill="url(#nodeGradient)" filter="url(#glow)" class="animate-pulse float-animation" />
|
||||
<circle cx="300" cy="200" r="8" fill="url(#nodeGradient)" class="float-animation" />
|
||||
<circle cx="500" cy="300" r="8" fill="url(#nodeGradient)" class="float-animation" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="py-20 relative">
|
||||
<div class="tech-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
|
||||
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="section-heading mb-4 text-gray-900 dark:text-white">Was ist <span class="gradient-text">Systades?</span></h2>
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
|
||||
Ein modernes Werkzeug zum Visualisieren, Erforschen und Teilen von Wissen
|
||||
in einer intuitiven, interaktiven Umgebung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- Feature Card 1 -->
|
||||
<div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
|
||||
<div class="icon mb-6 rounded-2xl shadow-lg">
|
||||
<i class="fa-solid fa-brain"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-3">Visualisiere Wissen</h3>
|
||||
<p>
|
||||
Sieh Wissen als vernetztes System, entdecke Zusammenhänge und erkenne überraschende
|
||||
Verbindungen zwischen verschiedenen Themengebieten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Card 2 -->
|
||||
<div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
|
||||
<div class="icon mb-6 rounded-2xl shadow-lg">
|
||||
<i class="fa-solid fa-lightbulb"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-3">Teile Gedanken</h3>
|
||||
<p>
|
||||
Füge deine eigenen Ideen und Perspektiven hinzu. Erstelle Verbindungen zu
|
||||
vorhandenen Gedanken und bereichere die wachsende Wissensbasis.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Card 3 -->
|
||||
<div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
|
||||
<div class="icon mb-6 rounded-2xl shadow-lg">
|
||||
<i class="fa-solid fa-users"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-3">Community</h3>
|
||||
<p>
|
||||
Sei Teil einer Gemeinschaft, die gemeinsam ein verteiltes Wissensarchiv aufbaut
|
||||
und sich in thematisch fokussierten Bereichen austauscht.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Card 4 -->
|
||||
<div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
|
||||
<div class="icon mb-6 rounded-2xl shadow-lg">
|
||||
<i class="fa-solid fa-robot"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-3">KI-Assistenz</h3>
|
||||
<p>
|
||||
Lass dir von künstlicher Intelligenz helfen, neue Zusammenhänge zu entdecken,
|
||||
Inhalte zusammenzufassen und Fragen zu beantworten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Card 5 -->
|
||||
<div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
|
||||
<div class="icon mb-6 rounded-2xl shadow-lg">
|
||||
<i class="fa-solid fa-search"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-3">Intelligente Suche</h3>
|
||||
<p>
|
||||
Finde genau die Informationen, die du suchst, mit fortschrittlichen Such- und
|
||||
Filterfunktionen für eine präzise Navigation durch das Wissen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Card 6 -->
|
||||
<div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
|
||||
<div class="icon mb-6 rounded-2xl shadow-lg">
|
||||
<i class="fa-solid fa-route"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-3">Geführte Pfade</h3>
|
||||
<p>
|
||||
Folge kuratierten Lernpfaden durch komplexe Themen oder erschaffe selbst
|
||||
Routen für andere, die deinen Gedankengängen folgen möchten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call to Action Section -->
|
||||
<section class="py-16 sm:py-20 md:py-24 relative overflow-hidden">
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="glass-effect p-6 sm:p-8 md:p-12 rounded-3xl transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl bg-gradient-to-br from-purple-500/15 to-blue-500/15 backdrop-blur-xl border border-white/10 shadow-lg">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
|
||||
<div class="md:w-2/3">
|
||||
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 text-gray-900 dark:text-white leading-tight">
|
||||
Bereit, <span class="gradient-text bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-blue-500">Wissen</span> neu zu entdecken?
|
||||
</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg mb-6 md:mb-0 max-w-2xl">
|
||||
Starte jetzt deine Reise durch das Wissensnetzwerk und erschließe neue Perspektiven.
|
||||
</p>
|
||||
</div>
|
||||
<div class="md:w-1/3 text-center md:text-right">
|
||||
<a href="{{ url_for('mindmap') }}" class="inline-flex items-center justify-center w-full md:w-auto btn-primary font-bold py-3 sm:py-3.5 px-6 sm:px-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
|
||||
<span class="flex items-center justify-center">
|
||||
<i class="fa-solid fa-arrow-right mr-2"></i>
|
||||
<span>Zur Mindmap</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Access Section -->
|
||||
<section class="py-16 sm:py-20">
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
|
||||
<!-- Themen-Übersicht -->
|
||||
<div class="glass-morphism p-6 sm:p-8 rounded-3xl transition-all duration-500 hover:-translate-y-3 hover:shadow-xl border border-white/10 backdrop-blur-md">
|
||||
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-800 dark:text-white">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-violet-500 to-fuchsia-500 flex items-center justify-center mr-3 sm:mr-4 shadow-md transform transition-transform duration-300 hover:scale-110">
|
||||
<i class="fa-solid fa-fire text-white text-base sm:text-lg"></i>
|
||||
</div>
|
||||
<span class="text-lg sm:text-xl md:text-2xl">Themen-Übersicht</span>
|
||||
</h3>
|
||||
<div class="space-y-3 sm:space-y-4 mb-6">
|
||||
<a href="{{ url_for('mindmap') }}" class="flex items-center p-3 sm:p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
|
||||
<div class="w-3 h-3 rounded-full bg-purple-400 mr-3 group-hover:scale-125 transition-transform"></div>
|
||||
<div class="flex-grow">
|
||||
<p class="font-medium text-gray-800 dark:text-gray-200">Wissensbereiche <span class="text-xs text-gray-500">(12)</span></p>
|
||||
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Überblick über Themenbereiche</p>
|
||||
</div>
|
||||
<i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
|
||||
</a>
|
||||
<a href="{{ url_for('search_thoughts_page') }}" class="flex items-center p-3 sm:p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
|
||||
<div class="w-3 h-3 rounded-full bg-blue-400 mr-3 group-hover:scale-125 transition-transform"></div>
|
||||
<div class="flex-grow">
|
||||
<p class="font-medium text-gray-800 dark:text-gray-200">Gedanken <span class="text-xs text-gray-500">(87)</span></p>
|
||||
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Konkrete Einträge durchsuchen</p>
|
||||
</div>
|
||||
<i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
|
||||
</a>
|
||||
<a href="#" class="flex items-center p-3 sm:p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
|
||||
<div class="w-3 h-3 rounded-full bg-green-400 mr-3 group-hover:scale-125 transition-transform"></div>
|
||||
<div class="flex-grow">
|
||||
<p class="font-medium text-gray-800 dark:text-gray-200">Verbindungen <span class="text-xs text-gray-500">(34)</span></p>
|
||||
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Beziehungen zwischen Gedanken</p>
|
||||
</div>
|
||||
<i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
|
||||
</a>
|
||||
</div>
|
||||
<a href="{{ url_for('search_thoughts_page') }}" class="btn-primary w-full text-center rounded-xl py-3 sm:py-3.5 transform transition-all duration-300 hover:-translate-y-1 hover:shadow-lg flex items-center justify-center">
|
||||
<span>Alle Themen entdecken</span>
|
||||
<i class="fa-solid fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- KI-Assistent mit eingebettetem Chat -->
|
||||
<div class="glass-morphism p-6 sm:p-8 rounded-3xl transition-all duration-500 hover:-translate-y-1 hover:shadow-xl backdrop-blur-md border border-white/10">
|
||||
<h3 class="text-xl md:text-2xl font-bold mb-4 flex flex-wrap sm:flex-nowrap items-center text-gray-800 dark:text-white">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center mr-3 sm:mr-4 shadow-lg transform transition-transform duration-300 hover:scale-110">
|
||||
<i class="fa-solid fa-robot text-white text-base sm:text-lg"></i>
|
||||
</div>
|
||||
<span class="mt-1 sm:mt-0">KI-Assistent</span>
|
||||
</h3>
|
||||
|
||||
<!-- Eingebettetes Chat-Interface -->
|
||||
<div id="embedded-assistant" class="rounded-xl border border-gray-200/50 dark:border-gray-700/50 overflow-hidden flex flex-col h-[300px]">
|
||||
<!-- Chat Verlauf -->
|
||||
<div id="embedded-chat-messages" class="flex-grow p-4 overflow-y-auto space-y-3 bg-white/70 dark:bg-gray-800/70">
|
||||
<!-- Begrüßungsnachricht -->
|
||||
<div class="flex items-start space-x-2">
|
||||
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
|
||||
<i class="fa-solid fa-robot text-white text-xs"></i>
|
||||
</div>
|
||||
<div class="max-w-[85%] bg-purple-100 dark:bg-gray-700 p-3 rounded-xl rounded-tl-none shadow-sm">
|
||||
<p class="text-sm text-gray-700 dark:text-gray-200">Hallo! Ich bin dein KI-Assistent. Wie kann ich dir helfen?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Eingabe -->
|
||||
<div class="p-3 border-t border-gray-200/70 dark:border-gray-700/70 bg-gray-50/90 dark:bg-gray-800/90">
|
||||
<form id="embedded-chat-form" class="flex items-center space-x-2">
|
||||
<input type="text" id="embedded-chat-input"
|
||||
placeholder="Stelle eine Frage..."
|
||||
class="flex-grow px-4 py-2 rounded-xl border bg-white/90 dark:bg-gray-700/90 border-gray-300 dark:border-gray-600 shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500 text-gray-700 dark:text-gray-200">
|
||||
<button type="submit"
|
||||
class="p-2 rounded-xl bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5">
|
||||
<i class="fa-solid fa-paper-plane"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Schnelllinks unter dem Chat -->
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
<button class="quick-query-btn px-2 sm:px-3 py-1 sm:py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-lg sm:rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
|
||||
Was ist Systades?
|
||||
</button>
|
||||
<button class="quick-query-btn px-2 sm:px-3 py-1 sm:py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-lg sm:rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
|
||||
Wie erstelle ich eine Mindmap?
|
||||
</button>
|
||||
<button class="quick-query-btn px-2 sm:px-3 py-1 sm:py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-lg sm:rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
|
||||
Zeige neueste Gedanken
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Vollständigen KI-Chat öffnen -->
|
||||
<button onclick="window.MindMap.assistant.toggleAssistant(true)" class="mt-4 btn-primary w-full text-center rounded-xl py-2 sm:py-2.5 shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 flex items-center justify-center">
|
||||
<i class="fa-solid fa-expand mr-2"></i>
|
||||
<span>Chat in Vollansicht öffnen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
<!-- JavaScript für eingebetteten Chat -->
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Warten bis MindMap und der Assistent initialisiert sind
|
||||
const waitForAssistant = setInterval(() => {
|
||||
if (window.MindMap && window.MindMap.assistant) {
|
||||
clearInterval(waitForAssistant);
|
||||
initEmbeddedChat();
|
||||
}
|
||||
}, 200);
|
||||
|
||||
function initEmbeddedChat() {
|
||||
const chatForm = document.getElementById('embedded-chat-form');
|
||||
const chatInput = document.getElementById('embedded-chat-input');
|
||||
const messagesContainer = document.getElementById('embedded-chat-messages');
|
||||
const quickQueryBtns = document.querySelectorAll('.quick-query-btn');
|
||||
|
||||
// Event-Listener für das Chat-Formular
|
||||
chatForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const userMessage = chatInput.value.trim();
|
||||
if (!userMessage) return;
|
||||
|
||||
// Nachricht des Benutzers anzeigen
|
||||
appendMessage('user', userMessage);
|
||||
chatInput.value = '';
|
||||
|
||||
// Anzeigen, dass der Assistent antwortet
|
||||
const typingIndicator = appendTypingIndicator();
|
||||
|
||||
// API-Anfrage an den Assistenten senden
|
||||
sendToAssistant(userMessage)
|
||||
.then(response => {
|
||||
// Entferne Tipp-Indikator
|
||||
typingIndicator.remove();
|
||||
// Zeige Antwort des Assistenten an
|
||||
appendMessage('assistant', response);
|
||||
})
|
||||
.catch(error => {
|
||||
typingIndicator.remove();
|
||||
appendMessage('assistant', 'Es tut mir leid, ich konnte deine Nachricht nicht verarbeiten. Bitte versuche es später noch einmal.');
|
||||
console.error('Fehler bei der Kommunikation mit dem Assistenten:', error);
|
||||
});
|
||||
});
|
||||
|
||||
// Schnellabfragen-Buttons
|
||||
quickQueryBtns.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const query = this.textContent.trim();
|
||||
chatInput.value = query;
|
||||
chatForm.dispatchEvent(new Event('submit'));
|
||||
});
|
||||
});
|
||||
|
||||
// Funktion zum Hinzufügen einer Nachricht zum Chat
|
||||
function appendMessage(sender, message) {
|
||||
const messageElement = document.createElement('div');
|
||||
messageElement.className = 'flex items-start space-x-2';
|
||||
|
||||
if (sender === 'user') {
|
||||
messageElement.innerHTML = `
|
||||
<div class="flex-grow"></div>
|
||||
<div class="max-w-[85%] bg-blue-100 dark:bg-blue-900/40 p-3 rounded-xl rounded-tr-none shadow-sm">
|
||||
<p class="text-sm text-gray-700 dark:text-gray-200">${message}</p>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-indigo-500 flex items-center justify-center flex-shrink-0">
|
||||
<i class="fa-solid fa-user text-white text-xs"></i>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
messageElement.innerHTML = `
|
||||
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
|
||||
<i class="fa-solid fa-robot text-white text-xs"></i>
|
||||
</div>
|
||||
<div class="max-w-[85%] bg-purple-100 dark:bg-gray-700 p-3 rounded-xl rounded-tl-none shadow-sm">
|
||||
<p class="text-sm text-gray-700 dark:text-gray-200">${message}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
messagesContainer.appendChild(messageElement);
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
|
||||
// Tipp-Indikator für "Assistent schreibt..."
|
||||
function appendTypingIndicator() {
|
||||
const indicatorElement = document.createElement('div');
|
||||
indicatorElement.className = 'flex items-start space-x-2 typing-indicator';
|
||||
indicatorElement.innerHTML = `
|
||||
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
|
||||
<i class="fa-solid fa-robot text-white text-xs"></i>
|
||||
</div>
|
||||
<div class="max-w-[85%] bg-purple-100 dark:bg-gray-700 p-3 rounded-xl rounded-tl-none shadow-sm">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
|
||||
<span class="mr-1">Tipp</span>
|
||||
<span class="typing-dots flex space-x-1">
|
||||
<span class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0ms;"></span>
|
||||
<span class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full animate-bounce" style="animation-delay: 150ms;"></span>
|
||||
<span class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full animate-bounce" style="animation-delay: 300ms;"></span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
messagesContainer.appendChild(indicatorElement);
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
return indicatorElement;
|
||||
}
|
||||
|
||||
// Sende Nachricht an den Assistenten und erhalte Antwort
|
||||
async function sendToAssistant(message) {
|
||||
try {
|
||||
const response = await fetch('/api/assistant', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
messages: [
|
||||
{ role: "system", content: "Du bist ein hilfreicher Assistent für das Wissensnetzwerk Systades." },
|
||||
{ role: "user", content: message }
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Unbekannter Fehler');
|
||||
}
|
||||
|
||||
return data.response || data.answer || 'Ich habe keine Antwort erhalten.';
|
||||
} catch (error) {
|
||||
console.error('Fehler bei der API-Anfrage:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
11
templates/layout.html
Normal file
11
templates/layout.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!-- Navigation -->
|
||||
<header class="w-full">
|
||||
<nav class="fixed top-0 z-50 w-full bg-dark-900 border-b border-gray-700">
|
||||
<!-- ... existing code ... -->
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Container -->
|
||||
<div class="container mx-auto px-4 pt-20 pb-10">
|
||||
<!-- ... existing code ... -->
|
||||
</div>
|
||||
55
templates/login.html
Normal file
55
templates/login.html
Normal file
@@ -0,0 +1,55 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Anmelden{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="flex justify-center items-center min-h-screen px-4 py-12">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
|
||||
<div class="p-6 sm:p-8">
|
||||
<h2 class="text-center text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-sign-in-alt mr-2"></i>
|
||||
Anmelden
|
||||
</h2>
|
||||
|
||||
<form method="POST" action="{{ url_for('login') }}" class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<label for="username" class="block text-sm font-medium text-gray-700">Benutzername</label>
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i class="fas fa-user text-gray-400"></i>
|
||||
</div>
|
||||
<input type="text" id="username" name="username" required
|
||||
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
placeholder="Benutzername eingeben">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="password" class="block text-sm font-medium text-gray-700">Passwort</label>
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i class="fas fa-lock text-gray-400"></i>
|
||||
</div>
|
||||
<input type="password" id="password" name="password" required
|
||||
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
placeholder="Passwort eingeben">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit"
|
||||
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
|
||||
<i class="fas fa-sign-in-alt mr-2"></i> Anmelden
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-sm text-gray-600">
|
||||
<p>Noch kein Konto? <a href="{{ url_for('register') }}" class="font-medium text-blue-600 hover:text-blue-500 transition-colors">Registrieren</a></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
1051
templates/mindmap.html
Normal file
1051
templates/mindmap.html
Normal file
File diff suppressed because it is too large
Load Diff
320
templates/my_account.html
Normal file
320
templates/my_account.html
Normal file
@@ -0,0 +1,320 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Meine Merkliste{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
/* Hintergrund über die gesamte Seite erstrecken */
|
||||
html, body {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.personal-mindmap-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 1rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dark .personal-mindmap-container {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.bookmark-item {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.bookmark-item:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.dark .empty-state {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Hauptbereich -->
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 pb-12">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
<span class="gradient-text">Meine Merkliste</span>
|
||||
</h1>
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300">
|
||||
Deine persönliche Sammlung gemerkter Wissensbereiche und Beiträge
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Persönliche Mindmap -->
|
||||
<div class="mb-12">
|
||||
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 flex items-center">
|
||||
<i class="fas fa-project-diagram mr-3 text-purple-500"></i>
|
||||
Meine Mindmap
|
||||
</h2>
|
||||
|
||||
<div id="personal-mindmap" class="personal-mindmap-container glass-morphism">
|
||||
<div id="empty-mindmap-message" class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="text-center p-6">
|
||||
<div class="text-6xl mb-4 opacity-20">
|
||||
<i class="fas fa-bookmark"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-2 text-gray-700 dark:text-gray-300">Deine persönliche Mindmap ist leer</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
|
||||
Merke dir Wissensbereiche und Gedanken in der Hauptmindmap, um deine persönliche Mindmap zu erstellen.
|
||||
</p>
|
||||
<a href="{{ url_for('mindmap') }}" class="mt-4 inline-block px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors">
|
||||
Zur Mindmap
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gemerkte Inhalte -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
|
||||
<!-- Wissensbereiche -->
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 flex items-center">
|
||||
<i class="fas fa-folder-open mr-3 text-blue-500"></i>
|
||||
Gemerkte Wissensbereiche
|
||||
</h2>
|
||||
|
||||
<div id="bookmarked-areas-container" class="space-y-4">
|
||||
<!-- Ladezustand -->
|
||||
<div class="animate-pulse space-y-4">
|
||||
<div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
||||
<div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
||||
<div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gedanken -->
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 flex items-center">
|
||||
<i class="fas fa-lightbulb mr-3 text-amber-500"></i>
|
||||
Gemerkte Gedanken
|
||||
</h2>
|
||||
|
||||
<div id="bookmarked-thoughts-container" class="space-y-4">
|
||||
<!-- Ladezustand -->
|
||||
<div class="animate-pulse space-y-4">
|
||||
<div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
||||
<div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
||||
<div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript für persönliche Mindmap -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Lade gespeicherte Bookmarks aus dem LocalStorage
|
||||
function loadBookmarkedNodes() {
|
||||
try {
|
||||
const bookmarked = localStorage.getItem('bookmarkedNodes');
|
||||
return bookmarked ? JSON.parse(bookmarked) : [];
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der gemerkten Knoten:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
const bookmarkedNodeIds = loadBookmarkedNodes();
|
||||
|
||||
// Prüfe, ob es gemerkte Knoten gibt
|
||||
if (bookmarkedNodeIds && bookmarkedNodeIds.length > 0) {
|
||||
// Verstecke die Leer-Nachricht
|
||||
document.getElementById('empty-mindmap-message').style.display = 'none';
|
||||
|
||||
// Initialisiere die persönliche Mindmap
|
||||
const personalMindmap = new MindMapVisualization('#personal-mindmap', {
|
||||
width: document.getElementById('personal-mindmap').clientWidth,
|
||||
height: 400,
|
||||
nodeRadius: 18,
|
||||
selectedNodeRadius: 22,
|
||||
linkDistance: 120,
|
||||
chargeStrength: -800,
|
||||
centerForce: 0.1,
|
||||
tooltipEnabled: true
|
||||
});
|
||||
|
||||
// Lade Daten für die Mindmap - hier müssten wir normalerweise die API nutzen,
|
||||
// aber als Fallback laden wir die Standarddaten und filtern sie
|
||||
window.setTimeout(() => {
|
||||
// Wenn die Hauptmindmap geladen ist, können wir deren Daten verwenden
|
||||
if (window.mindmapInstance) {
|
||||
// Filtere nur gemerkte Knoten und ihre Verbindungen
|
||||
const nodes = window.mindmapInstance.nodes.filter(node =>
|
||||
bookmarkedNodeIds.includes(node.id)
|
||||
);
|
||||
|
||||
// Finde Verbindungen zwischen den gemerkten Knoten
|
||||
const links = window.mindmapInstance.links.filter(link =>
|
||||
bookmarkedNodeIds.includes(link.source.id || link.source) &&
|
||||
bookmarkedNodeIds.includes(link.target.id || link.target)
|
||||
);
|
||||
|
||||
// Setze Daten und aktualisiere die Visualisierung
|
||||
personalMindmap.nodes = nodes;
|
||||
personalMindmap.links = links;
|
||||
personalMindmap.isLoading = false;
|
||||
personalMindmap.updateVisualization();
|
||||
} else {
|
||||
// Fallback: Leere Mindmap anzeigen
|
||||
document.getElementById('empty-mindmap-message').style.display = 'flex';
|
||||
}
|
||||
}, 800);
|
||||
|
||||
// Lade die gemerkten Inhalte
|
||||
loadBookmarkedContent(bookmarkedNodeIds);
|
||||
} else {
|
||||
// Zeige Leerzustand an
|
||||
const areasContainer = document.getElementById('bookmarked-areas-container');
|
||||
const thoughtsContainer = document.getElementById('bookmarked-thoughts-container');
|
||||
|
||||
areasContainer.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="text-4xl mb-2 opacity-20">
|
||||
<i class="fas fa-folder-open"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400">Keine gemerkten Wissensbereiche</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
thoughtsContainer.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="text-4xl mb-2 opacity-20">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400">Keine gemerkten Gedanken</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
// Funktion zum Laden der gemerkten Inhalte
|
||||
function loadBookmarkedContent(nodeIds) {
|
||||
if (!nodeIds || nodeIds.length === 0) return;
|
||||
|
||||
// In einer vollständigen Implementierung würden wir hier einen API-Aufruf machen
|
||||
// Für diese Demo erstellen wir Beispielinhalte
|
||||
|
||||
const areasContainer = document.getElementById('bookmarked-areas-container');
|
||||
const thoughtsContainer = document.getElementById('bookmarked-thoughts-container');
|
||||
|
||||
// Verschiedene Beispiel-Farben
|
||||
const colors = ['purple', 'blue', 'green', 'indigo', 'amber'];
|
||||
|
||||
// Leere die Container
|
||||
areasContainer.innerHTML = '';
|
||||
thoughtsContainer.innerHTML = '';
|
||||
|
||||
// Beispielinhalte für Wissensbereiche
|
||||
const areaTemplates = [
|
||||
{ name: 'Philosophie', description: 'Grundlagen philosophischen Denkens', count: 24 },
|
||||
{ name: 'Wissenschaft', description: 'Wissenschaftliche Methoden und Erkenntnisse', count: 42 },
|
||||
{ name: 'Technologie', description: 'Zukunftsweisende Technologien', count: 36 },
|
||||
{ name: 'Kunst', description: 'Künstlerische Ausdrucksformen', count: 18 },
|
||||
{ name: 'Psychologie', description: 'Menschliches Verhalten verstehen', count: 30 }
|
||||
];
|
||||
|
||||
// Beispielinhalte für Gedanken
|
||||
const thoughtTemplates = [
|
||||
{ title: 'Quantenphysik und Bewusstsein', author: 'Maria Schmidt', date: '12.04.2023' },
|
||||
{ title: 'Ethik in der künstlichen Intelligenz', author: 'Thomas Weber', date: '23.02.2023' },
|
||||
{ title: 'Die Rolle der Kunst in der Gesellschaft', author: 'Lena Müller', date: '05.06.2023' },
|
||||
{ title: 'Nachhaltige Entwicklung im 21. Jahrhundert', author: 'Michael Bauer', date: '18.08.2023' },
|
||||
{ title: 'Kognitive Verzerrungen im Alltag', author: 'Sophie Klein', date: '30.09.2023' }
|
||||
];
|
||||
|
||||
// Zeige nur so viele Elemente wie wir Knoten haben (bis zu 5)
|
||||
const areaCount = Math.min(nodeIds.length, 5);
|
||||
|
||||
if (areaCount > 0) {
|
||||
// Wissensbereiche hinzufügen
|
||||
for (let i = 0; i < areaCount; i++) {
|
||||
const area = areaTemplates[i];
|
||||
const colorClass = colors[i % colors.length];
|
||||
|
||||
areasContainer.innerHTML += `
|
||||
<a href="{{ url_for('mindmap') }}" class="bookmark-item block p-4 rounded-xl bg-white/80 dark:bg-gray-800/80 shadow-sm hover:shadow-md transition-all">
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-${colorClass}-100 dark:bg-${colorClass}-900/30 flex items-center justify-center mr-3">
|
||||
<i class="fas fa-bookmark text-${colorClass}-500"></i>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white">${area.name}</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">${area.description}</p>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">
|
||||
${area.count} Einträge
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
areasContainer.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="text-4xl mb-2 opacity-20">
|
||||
<i class="fas fa-folder-open"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400">Keine gemerkten Wissensbereiche</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Zeige bis zu 5 Gedanken an (oder weniger, falls weniger gemerkt wurden)
|
||||
const thoughtCount = Math.min(nodeIds.length, 5);
|
||||
|
||||
if (thoughtCount > 0) {
|
||||
// Gedanken hinzufügen
|
||||
for (let i = 0; i < thoughtCount; i++) {
|
||||
const thought = thoughtTemplates[i];
|
||||
const colorClass = colors[(i + 2) % colors.length]; // Andere Farben als für Bereiche
|
||||
|
||||
thoughtsContainer.innerHTML += `
|
||||
<a href="{{ url_for('mindmap') }}" class="bookmark-item block p-4 rounded-xl bg-white/80 dark:bg-gray-800/80 shadow-sm hover:shadow-md transition-all">
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-${colorClass}-100 dark:bg-${colorClass}-900/30 flex items-center justify-center mr-3">
|
||||
<i class="fas fa-lightbulb text-${colorClass}-500"></i>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white">${thought.title}</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Von ${thought.author} • ${thought.date}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
thoughtsContainer.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="text-4xl mb-2 opacity-20">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400">Keine gemerkten Gedanken</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
953
templates/profile.html
Normal file
953
templates/profile.html
Normal file
@@ -0,0 +1,953 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Profil{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
/* Grundstile für das Profil mit verbessertem Glasmorphismus */
|
||||
.profile-container {
|
||||
background: rgba(24, 28, 45, 0.75);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.profile-container:hover {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* Verbesserte Profile-Header mit dynamischer User-Anzeige */
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2rem;
|
||||
gap: 2.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: rgba(32, 36, 55, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 3px solid rgba(179, 143, 255, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 15px rgba(179, 143, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profile-avatar:hover {
|
||||
transform: scale(1.05);
|
||||
border: 3px solid rgba(179, 143, 255, 0.5);
|
||||
box-shadow: 0 12px 45px rgba(0, 0, 0, 0.3), 0 0 25px rgba(179, 143, 255, 0.35);
|
||||
}
|
||||
|
||||
.profile-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
.profile-avatar:hover img {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.profile-avatar-placeholder {
|
||||
font-size: 5rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.profile-avatar:hover .profile-avatar-placeholder {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.75rem;
|
||||
background: linear-gradient(135deg, #b38fff, #58a9ff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow: 0 2px 10px rgba(179, 143, 255, 0.3);
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
font-size: 1.35rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin-bottom: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.username-badge {
|
||||
background: rgba(179, 143, 255, 0.2);
|
||||
border: 1px solid rgba(179, 143, 255, 0.3);
|
||||
color: #b38fff;
|
||||
padding: 0.3rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.username-badge:hover {
|
||||
background: rgba(179, 143, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 0 0 8px rgba(179, 143, 255, 0.3);
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
max-width: 650px;
|
||||
margin-bottom: 1.5rem;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.profile-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profile-meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.profile-meta-item:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.profile-meta-icon {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Verbesserte Statistik-Karten mit interaktiven Effekten */
|
||||
.profile-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 1.75rem 1.25rem;
|
||||
background: rgba(32, 36, 55, 0.7);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at center, rgba(179, 143, 255, 0.15) 0%, transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.stat-item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
transform: translateY(-5px);
|
||||
background: rgba(32, 36, 55, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 0 0 20px rgba(179, 143, 255, 0.2);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.75rem;
|
||||
background: linear-gradient(135deg, #b38fff, #58a9ff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-item:hover .stat-value {
|
||||
transform: scale(1.1);
|
||||
text-shadow: 0 0 15px rgba(179, 143, 255, 0.5);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-item:hover .stat-label {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
/* Stat-Icon für visuelle Verstärkung */
|
||||
.stat-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: rgba(179, 143, 255, 0.7);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-item:hover .stat-icon {
|
||||
transform: scale(1.2) translateY(-3px);
|
||||
color: rgba(179, 143, 255, 1);
|
||||
}
|
||||
|
||||
/* Benutzer-Aktionsbereich */
|
||||
.profile-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.profile-action-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 16px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(32, 36, 55, 0.75);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.profile-action-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
background: rgba(179, 143, 255, 0.25);
|
||||
border: 1px solid rgba(179, 143, 255, 0.3);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 15px rgba(179, 143, 255, 0.2);
|
||||
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.profile-action-btn.primary {
|
||||
background: rgba(179, 143, 255, 0.25);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(179, 143, 255, 0.3);
|
||||
}
|
||||
|
||||
.profile-action-btn.primary:hover {
|
||||
background: rgba(179, 143, 255, 0.35);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 0 20px rgba(179, 143, 255, 0.35);
|
||||
}
|
||||
|
||||
/* Verbesserte Profil-Tabs */
|
||||
.profile-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(179, 143, 255, 0.5) rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.profile-tab {
|
||||
padding: 1rem 1.5rem;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-tab:hover {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.profile-tab.active {
|
||||
color: #b38fff;
|
||||
border-bottom: 3px solid #b38fff;
|
||||
background: rgba(179, 143, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Aktivitäten und Beiträge */
|
||||
.activity-feed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
background: rgba(32, 36, 55, 0.7);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
.activity-card:hover {
|
||||
transform: translateY(-3px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 15px rgba(179, 143, 255, 0.15);
|
||||
}
|
||||
|
||||
.activity-header {
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.activity-date {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.activity-content {
|
||||
padding: 1.5rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.activity-footer {
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.activity-reactions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.reaction-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reaction-button:hover {
|
||||
background: rgba(179, 143, 255, 0.15);
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.reaction-button.active {
|
||||
background: rgba(179, 143, 255, 0.2);
|
||||
color: #b38fff;
|
||||
}
|
||||
|
||||
.activity-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.9rem;
|
||||
background: rgba(179, 143, 255, 0.1);
|
||||
color: #b38fff;
|
||||
border: 1px solid rgba(179, 143, 255, 0.25);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background: rgba(179, 143, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 0 10px rgba(179, 143, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Verbesserte Einstellungskarten */
|
||||
.settings-card {
|
||||
background: rgba(32, 36, 55, 0.7);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 1.5rem;
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.settings-card:hover {
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2), 0 0 15px rgba(179, 143, 255, 0.15);
|
||||
}
|
||||
|
||||
.settings-card-header {
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.settings-card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.settings-label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.settings-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
background: rgba(24, 28, 45, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.settings-input:focus {
|
||||
border-color: rgba(179, 143, 255, 0.4);
|
||||
box-shadow: 0 0 0 3px rgba(179, 143, 255, 0.15);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Light Mode Anpassungen */
|
||||
html.light .profile-container,
|
||||
html.light .profile-tabs,
|
||||
html.light .activity-card,
|
||||
html.light .settings-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
html.light .profile-avatar {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 3px solid rgba(126, 63, 242, 0.3);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 0 15px rgba(126, 63, 242, 0.15);
|
||||
}
|
||||
|
||||
html.light .profile-name {
|
||||
background: linear-gradient(135deg, #7e3ff2, #3282f6);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
html.light .profile-username,
|
||||
html.light .profile-bio,
|
||||
html.light .activity-content {
|
||||
color: #1a202c;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
html.light .username-badge {
|
||||
background: rgba(126, 63, 242, 0.15);
|
||||
border: 1px solid rgba(126, 63, 242, 0.3);
|
||||
color: #7e3ff2;
|
||||
}
|
||||
|
||||
html.light .profile-meta {
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
html.light .stat-item,
|
||||
html.light .settings-input {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
html.light .stat-value {
|
||||
background: linear-gradient(135deg, #7e3ff2, #3282f6);
|
||||
}
|
||||
|
||||
html.light .stat-label {
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
html.light .profile-tab {
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
html.light .profile-tab:hover {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
html.light .profile-tab.active {
|
||||
color: #7e3ff2;
|
||||
border-bottom: 3px solid #7e3ff2;
|
||||
background: rgba(126, 63, 242, 0.08);
|
||||
}
|
||||
|
||||
html.light .activity-title,
|
||||
html.light .settings-card-header,
|
||||
html.light .settings-label {
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
html.light .activity-date {
|
||||
color: #718096;
|
||||
}
|
||||
|
||||
html.light .activity-footer {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
html.light .reaction-button {
|
||||
color: #4a5568;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
html.light .reaction-button:hover {
|
||||
background: rgba(126, 63, 242, 0.1);
|
||||
color: #7e3ff2;
|
||||
}
|
||||
|
||||
html.light .reaction-button.active {
|
||||
background: rgba(126, 63, 242, 0.15);
|
||||
color: #7e3ff2;
|
||||
}
|
||||
|
||||
html.light .action-button {
|
||||
background: rgba(126, 63, 242, 0.1);
|
||||
color: #7e3ff2;
|
||||
border: 1px solid rgba(126, 63, 242, 0.2);
|
||||
}
|
||||
|
||||
html.light .action-button:hover {
|
||||
background: rgba(126, 63, 242, 0.2);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-10">
|
||||
<!-- Profil-Container -->
|
||||
<div class="profile-container">
|
||||
<!-- Profil-Header mit Benutzerinformationen -->
|
||||
<div class="profile-header">
|
||||
<!-- Profilbild -->
|
||||
<div class="profile-avatar">
|
||||
{% if user.profile_image %}
|
||||
<img src="{{ user.profile_image }}" alt="{{ user.name }}" />
|
||||
{% else %}
|
||||
<div class="profile-avatar-placeholder">
|
||||
<i class="fas fa-user"></i>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Profilinformationen -->
|
||||
<div class="profile-info">
|
||||
<h1 class="profile-name">{{ user.name|default('Max Mustermann') }}</h1>
|
||||
<div class="profile-username">
|
||||
@{{ user.username|default('maxmustermann') }}
|
||||
{% if user.verified %}
|
||||
<span class="username-badge">
|
||||
<i class="fas fa-check-circle mr-1"></i> Verifiziert
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<p class="profile-bio">
|
||||
{{ user.bio|default('Willkommen auf meinem Profil! Ich bin daran interessiert, Wissen zu vernetzen und neue Verbindungen zwischen verschiedenen Themengebieten zu entdecken. Mein Ziel ist es, ein tieferes Verständnis für komplexe Zusammenhänge zu entwickeln.') }}
|
||||
</p>
|
||||
|
||||
<!-- Meta-Informationen -->
|
||||
<div class="profile-meta">
|
||||
<div class="profile-meta-item">
|
||||
<i class="fas fa-map-marker-alt profile-meta-icon"></i>
|
||||
<span>{{ user.location|default('Berlin, Deutschland') }}</span>
|
||||
</div>
|
||||
<div class="profile-meta-item">
|
||||
<i class="fas fa-calendar-alt profile-meta-icon"></i>
|
||||
<span>Mitglied seit {{ user.joined_date|default('Januar 2023') }}</span>
|
||||
</div>
|
||||
<div class="profile-meta-item">
|
||||
<i class="fas fa-globe profile-meta-icon"></i>
|
||||
<span>{{ user.website|default('www.beispiel.de') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Profil-Aktionen -->
|
||||
<div class="profile-actions">
|
||||
<button class="profile-action-btn primary">
|
||||
<i class="fas fa-user-plus mr-1"></i> Folgen
|
||||
</button>
|
||||
<button class="profile-action-btn">
|
||||
<i class="fas fa-comment mr-1"></i> Nachricht
|
||||
</button>
|
||||
<button class="profile-action-btn">
|
||||
<i class="fas fa-share-alt mr-1"></i> Teilen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiken -->
|
||||
<div class="profile-stats">
|
||||
<!-- Gedanken -->
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
</div>
|
||||
<div class="stat-value">{{ user.thoughts_count|default('42') }}</div>
|
||||
<div class="stat-label">Gedanken</div>
|
||||
</div>
|
||||
|
||||
<!-- Verbindungen -->
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-project-diagram"></i>
|
||||
</div>
|
||||
<div class="stat-value">{{ user.connections_count|default('128') }}</div>
|
||||
<div class="stat-label">Verbindungen</div>
|
||||
</div>
|
||||
|
||||
<!-- Follower -->
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-users"></i>
|
||||
</div>
|
||||
<div class="stat-value">{{ user.followers_count|default('567') }}</div>
|
||||
<div class="stat-label">Follower</div>
|
||||
</div>
|
||||
|
||||
<!-- Beiträge -->
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-comment-dots"></i>
|
||||
</div>
|
||||
<div class="stat-value">{{ user.contributions_count|default('89') }}</div>
|
||||
<div class="stat-label">Beiträge</div>
|
||||
</div>
|
||||
|
||||
<!-- Bewertung -->
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="stat-value">{{ user.rating|default('4.8') }}</div>
|
||||
<div class="stat-label">Bewertung</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs und Inhaltsbereich -->
|
||||
<div class="glass-card">
|
||||
<!-- Profil-Tabs -->
|
||||
<div class="profile-tabs">
|
||||
<div class="profile-tab active" data-tab="activity">Aktivitäten</div>
|
||||
<div class="profile-tab" data-tab="thoughts">Gedanken</div>
|
||||
<div class="profile-tab" data-tab="collections">Sammlungen</div>
|
||||
<div class="profile-tab" data-tab="connections">Verbindungen</div>
|
||||
<div class="profile-tab" data-tab="settings">Einstellungen</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab-Inhalte -->
|
||||
<div class="p-6">
|
||||
<!-- Aktivitäts-Tab (Standardmäßig angezeigt) -->
|
||||
<div class="tab-content" id="activity-tab">
|
||||
<div class="activity-feed">
|
||||
<!-- Aktivität 1 -->
|
||||
<div class="activity-card">
|
||||
<div class="activity-header">
|
||||
<div class="activity-title">Neuer Gedanke hinzugefügt</div>
|
||||
<div class="activity-date">vor 2 Stunden</div>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<p>Ich habe einen neuen Gedanken zum Thema "Künstliche Intelligenz und Kreativität" hinzugefügt. Wie können KI-Tools uns dabei helfen, kreativer zu denken?</p>
|
||||
</div>
|
||||
<div class="activity-footer">
|
||||
<div class="activity-reactions">
|
||||
<button class="reaction-button">
|
||||
<i class="fas fa-thumbs-up"></i> <span>24</span>
|
||||
</button>
|
||||
<button class="reaction-button">
|
||||
<i class="fas fa-comment"></i> <span>8</span>
|
||||
</button>
|
||||
<button class="reaction-button">
|
||||
<i class="fas fa-share"></i> <span>3</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="activity-actions">
|
||||
<button class="action-button">
|
||||
Ansehen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aktivität 2 -->
|
||||
<div class="activity-card">
|
||||
<div class="activity-header">
|
||||
<div class="activity-title">Verbindung erstellt</div>
|
||||
<div class="activity-date">vor 1 Tag</div>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<p>Ich habe eine neue Verbindung zwischen "Nachhaltige Entwicklung" und "Digitale Transformation" hergestellt. Es gibt interessante Überschneidungen in diesen Bereichen.</p>
|
||||
</div>
|
||||
<div class="activity-footer">
|
||||
<div class="activity-reactions">
|
||||
<button class="reaction-button active">
|
||||
<i class="fas fa-thumbs-up"></i> <span>42</span>
|
||||
</button>
|
||||
<button class="reaction-button">
|
||||
<i class="fas fa-comment"></i> <span>12</span>
|
||||
</button>
|
||||
<button class="reaction-button">
|
||||
<i class="fas fa-share"></i> <span>7</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="activity-actions">
|
||||
<button class="action-button">
|
||||
Ansehen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aktivität 3 -->
|
||||
<div class="activity-card">
|
||||
<div class="activity-header">
|
||||
<div class="activity-title">Sammlung erstellt</div>
|
||||
<div class="activity-date">vor 3 Tagen</div>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<p>Ich habe eine neue Sammlung zum Thema "Zukunftstechnologien" erstellt. Diese Sammlung enthält Gedanken zu KI, Quantencomputing, Biotechnologie und mehr.</p>
|
||||
</div>
|
||||
<div class="activity-footer">
|
||||
<div class="activity-reactions">
|
||||
<button class="reaction-button">
|
||||
<i class="fas fa-thumbs-up"></i> <span>17</span>
|
||||
</button>
|
||||
<button class="reaction-button">
|
||||
<i class="fas fa-comment"></i> <span>4</span>
|
||||
</button>
|
||||
<button class="reaction-button">
|
||||
<i class="fas fa-share"></i> <span>2</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="activity-actions">
|
||||
<button class="action-button">
|
||||
Ansehen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weitere Tab-Inhalte (werden per JavaScript angezeigt) -->
|
||||
<div class="tab-content hidden" id="thoughts-tab">
|
||||
<p class="text-center text-gray-400 py-12">
|
||||
<i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
|
||||
Gedanken werden geladen...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tab-content hidden" id="collections-tab">
|
||||
<p class="text-center text-gray-400 py-12">
|
||||
<i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
|
||||
Sammlungen werden geladen...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tab-content hidden" id="connections-tab">
|
||||
<p class="text-center text-gray-400 py-12">
|
||||
<i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
|
||||
Verbindungen werden geladen...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tab-content hidden" id="settings-tab">
|
||||
<!-- Einstellungs-Tab-Inhalt -->
|
||||
<div class="settings-card">
|
||||
<div class="settings-card-header">Profilinformationen</div>
|
||||
<div class="settings-card-body">
|
||||
<div class="settings-group">
|
||||
<label class="settings-label" for="name">Name</label>
|
||||
<input type="text" id="name" class="settings-input" value="{{ user.name|default('Max Mustermann') }}" />
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label class="settings-label" for="bio">Über mich</label>
|
||||
<textarea id="bio" class="settings-input" rows="4">{{ user.bio|default('Willkommen auf meinem Profil! Ich bin daran interessiert, Wissen zu vernetzen und neue Verbindungen zwischen verschiedenen Themengebieten zu entdecken.') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label class="settings-label" for="location">Standort</label>
|
||||
<input type="text" id="location" class="settings-input" value="{{ user.location|default('Berlin, Deutschland') }}" />
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label class="settings-label" for="website">Website</label>
|
||||
<input type="url" id="website" class="settings-input" value="{{ user.website|default('https://www.beispiel.de') }}" />
|
||||
</div>
|
||||
|
||||
<button class="profile-action-btn primary mt-4">
|
||||
<i class="fas fa-save mr-1"></i> Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card">
|
||||
<div class="settings-card-header">Datenschutz und Sicherheit</div>
|
||||
<div class="settings-card-body">
|
||||
<div class="settings-group">
|
||||
<label class="settings-label" for="email">E-Mail-Adresse</label>
|
||||
<input type="email" id="email" class="settings-input" value="{{ user.email|default('beispiel@email.com') }}" />
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label class="settings-label" for="password">Neues Passwort</label>
|
||||
<input type="password" id="password" class="settings-input" placeholder="Neues Passwort eingeben" />
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label class="settings-label" for="password_confirm">Passwort bestätigen</label>
|
||||
<input type="password" id="password_confirm" class="settings-input" placeholder="Passwort wiederholen" />
|
||||
</div>
|
||||
|
||||
<button class="profile-action-btn primary mt-4">
|
||||
<i class="fas fa-lock mr-1"></i> Passwort aktualisieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Profil-Tab-Funktionalität
|
||||
const tabs = document.querySelectorAll('.profile-tab');
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
// Alle Tabs deaktivieren
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
|
||||
// Aktuellen Tab aktivieren
|
||||
this.classList.add('active');
|
||||
|
||||
// Alle Tab-Inhalte ausblenden
|
||||
tabContents.forEach(content => content.classList.add('hidden'));
|
||||
|
||||
// Entsprechenden Tab-Inhalt anzeigen
|
||||
const tabId = this.getAttribute('data-tab');
|
||||
document.getElementById(`${tabId}-tab`).classList.remove('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
// Like-Button-Funktionalität
|
||||
const reactionButtons = document.querySelectorAll('.reaction-button');
|
||||
|
||||
reactionButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
// Toggle active-Klasse
|
||||
this.classList.toggle('active');
|
||||
|
||||
// Aktueller Zählerstand
|
||||
const countElement = this.querySelector('span');
|
||||
let count = parseInt(countElement.textContent);
|
||||
|
||||
// Zähler aktualisieren
|
||||
if (this.classList.contains('active')) {
|
||||
count += 1;
|
||||
} else {
|
||||
count -= 1;
|
||||
}
|
||||
|
||||
countElement.textContent = count;
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
115
templates/register.html
Normal file
115
templates/register.html
Normal file
@@ -0,0 +1,115 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Registrieren{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="flex justify-center items-center mt-10 px-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-white bg-opacity-80 backdrop-blur-lg rounded-lg shadow-md border border-white border-opacity-30 p-6 md:p-8 transition-all duration-300 transform hover:shadow-lg">
|
||||
<h2 class="text-center mb-6 text-gray-800 font-bold text-2xl flex items-center justify-center">
|
||||
<i class="fas fa-user-plus mr-2 text-blue-600"></i>
|
||||
Registrieren
|
||||
</h2>
|
||||
|
||||
<form method="POST" action="{{ url_for('register') }}" class="needs-validation space-y-6" novalidate>
|
||||
<div class="space-y-2">
|
||||
<label for="username" class="block text-gray-700 font-medium text-sm">Benutzername</label>
|
||||
<div class="relative flex items-center">
|
||||
<span class="absolute left-3 text-blue-600">
|
||||
<i class="fas fa-user"></i>
|
||||
</span>
|
||||
<input type="text" class="pl-10 w-full rounded-md border border-gray-300 py-2 px-4 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 transition-all duration-200"
|
||||
id="username" name="username" placeholder="Dein Benutzername" required>
|
||||
</div>
|
||||
<div class="invalid-feedback text-red-600 text-sm hidden">
|
||||
Bitte gib einen Benutzernamen ein.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="email" class="block text-gray-700 font-medium text-sm">E-Mail</label>
|
||||
<div class="relative flex items-center">
|
||||
<span class="absolute left-3 text-blue-600">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
<input type="email" class="pl-10 w-full rounded-md border border-gray-300 py-2 px-4 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 transition-all duration-200"
|
||||
id="email" name="email" placeholder="name@beispiel.de" required>
|
||||
</div>
|
||||
<div class="invalid-feedback text-red-600 text-sm hidden">
|
||||
Bitte gib eine gültige E-Mail-Adresse ein.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="password" class="block text-gray-700 font-medium text-sm">Passwort</label>
|
||||
<div class="relative flex items-center">
|
||||
<span class="absolute left-3 text-blue-600">
|
||||
<i class="fas fa-lock"></i>
|
||||
</span>
|
||||
<input type="password" class="pl-10 w-full rounded-md border border-gray-300 py-2 px-4 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 transition-all duration-200"
|
||||
id="password" name="password" placeholder="Mindestens 8 Zeichen" required>
|
||||
<button class="absolute right-2 text-gray-500 hover:text-gray-700 focus:outline-none" type="button" id="togglePassword">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="invalid-feedback text-red-600 text-sm hidden">
|
||||
Bitte gib ein sicheres Passwort ein.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md shadow-sm transition-all duration-200 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
|
||||
<i class="fas fa-user-plus mr-2"></i> Konto erstellen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4 text-gray-700 text-sm">
|
||||
<p>Bereits registriert? <a href="{{ url_for('login') }}" class="text-blue-600 hover:text-blue-800 font-medium transition-colors duration-200">Anmelden</a></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Formularvalidierung aktivieren
|
||||
(function() {
|
||||
'use strict';
|
||||
var forms = document.querySelectorAll('.needs-validation');
|
||||
Array.prototype.slice.call(forms).forEach(function(form) {
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Zeige Fehlermeldungen an
|
||||
form.querySelectorAll(':invalid').forEach(function(input) {
|
||||
input.parentNode.nextElementSibling.classList.remove('hidden');
|
||||
});
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
|
||||
// Verstecke Fehlermeldungen bei Eingabe
|
||||
form.querySelectorAll('input').forEach(function(input) {
|
||||
input.addEventListener('input', function() {
|
||||
if (this.checkValidity()) {
|
||||
this.parentNode.nextElementSibling.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Passwort-Sichtbarkeit umschalten
|
||||
const togglePassword = document.querySelector('#togglePassword');
|
||||
const password = document.querySelector('#password');
|
||||
|
||||
togglePassword.addEventListener('click', function() {
|
||||
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
|
||||
password.setAttribute('type', type);
|
||||
this.querySelector('i').classList.toggle('fa-eye');
|
||||
this.querySelector('i').classList.toggle('fa-eye-slash');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
105
templates/search.html
Normal file
105
templates/search.html
Normal file
@@ -0,0 +1,105 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Suche{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<!-- Filter-Sidebar -->
|
||||
<div class="w-full md:w-1/3 lg:w-1/4 mb-6">
|
||||
<div class="bg-white/10 backdrop-blur-md rounded-xl p-6 shadow-lg">
|
||||
<h4 class="text-xl font-semibold mb-4">Erweiterte Suche</h4>
|
||||
<form id="search-form">
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-1">Suchbegriff</label>
|
||||
<div class="flex items-center border rounded-lg overflow-hidden bg-white/5">
|
||||
<span class="px-3 py-2 text-gray-400">
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
<input type="text" class="w-full bg-transparent border-0 focus:ring-0 py-2 px-1" name="q" placeholder="Suche...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-1">Schlagworte</label>
|
||||
<div class="flex items-center border rounded-lg overflow-hidden bg-white/5">
|
||||
<span class="px-3 py-2 text-gray-400">
|
||||
<i class="fas fa-tags"></i>
|
||||
</span>
|
||||
<input type="text" class="w-full bg-transparent border-0 focus:ring-0 py-2 px-1" name="keywords" placeholder="Schlagworte (kommagetrennt)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-1">Minimale Bewertung</label>
|
||||
<div class="flex items-center border rounded-lg overflow-hidden bg-white/5">
|
||||
<span class="px-3 py-2 text-gray-400">
|
||||
<i class="fas fa-star"></i>
|
||||
</span>
|
||||
<select class="w-full bg-transparent border-0 focus:ring-0 py-2 px-1" name="min_rating">
|
||||
<option value="">Alle</option>
|
||||
<option value="4">4+ Sterne</option>
|
||||
<option value="3">3+ Sterne</option>
|
||||
<option value="2">2+ Sterne</option>
|
||||
<option value="1">1+ Stern</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-1">Quellentyp</label>
|
||||
<div class="flex items-center border rounded-lg overflow-hidden bg-white/5">
|
||||
<span class="px-3 py-2 text-gray-400">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
</span>
|
||||
<select class="w-full bg-transparent border-0 focus:ring-0 py-2 px-1" name="source_type">
|
||||
<option value="">Alle</option>
|
||||
<option value="PDF">PDF</option>
|
||||
<option value="Markdown">Markdown</option>
|
||||
<option value="Text">Text</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<label class="block text-sm font-medium mb-1">Beziehungstyp</label>
|
||||
<div class="flex items-center border rounded-lg overflow-hidden bg-white/5">
|
||||
<span class="px-3 py-2 text-gray-400">
|
||||
<i class="fas fa-project-diagram"></i>
|
||||
</span>
|
||||
<select class="w-full bg-transparent border-0 focus:ring-0 py-2 px-1" name="relation_type">
|
||||
<option value="">Alle</option>
|
||||
<option value="SUPPORTS">Stützt</option>
|
||||
<option value="CONTRADICTS">Widerspricht</option>
|
||||
<option value="BUILDS_UPON">Baut auf auf</option>
|
||||
<option value="GENERALIZES">Verallgemeinert</option>
|
||||
<option value="SPECIFIES">Spezifiziert</option>
|
||||
<option value="INSPIRES">Inspiriert</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-2 px-4 rounded-lg hover:opacity-90 transition-all flex items-center justify-center">
|
||||
<i class="fas fa-search mr-2"></i> Suchen
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Suchergebnisse -->
|
||||
<div class="w-full md:w-2/3 lg:w-3/4">
|
||||
<div class="bg-white/10 backdrop-blur-md rounded-xl p-6 shadow-lg mb-6">
|
||||
<h3 class="text-2xl font-semibold mb-2">Suchergebnisse</h3>
|
||||
<p class="text-gray-300 text-sm">Nutze die Filter links, um deine Suche zu präzisieren.</p>
|
||||
</div>
|
||||
|
||||
<div id="search-results" class="mb-6">
|
||||
<!-- Suchergebnisse werden hier dynamisch eingefügt -->
|
||||
<div class="bg-white/10 backdrop-blur-md rounded-xl p-8 shadow-lg text-center">
|
||||
<i class="fas fa-search text-5xl mb-6 text-blue-400"></i>
|
||||
<h5 class="text-xl font-medium mb-3">Wissen entdecken</h5>
|
||||
<p class="text-gray-300">Gib einen Suchbegriff ein, um in der wissenschaftlichen Wissensdatenbank zu suchen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
269
templates/settings.html
Normal file
269
templates/settings.html
Normal 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 %}
|
||||
Reference in New Issue
Block a user