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

Overhaul website to modernize design, integrate SVG visualizations, and enhance KI functionality; update documentation for MindMapProjekt.

Browse Source
This commit is contained in:
Till Tomczak
2025-04-27 15:09:29 +02:00
parent 88f8e98df0
commit 968515ce2b
79 changed files with 110 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

593
templates/base.html Normal file
View File

@@ -0,0 +1,593 @@
<!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>
<!-- Neural Network Background CSS -->
<link href="{{ url_for('static', filename='css/neural-network-background.css') }}" rel="stylesheet">
<!-- Neural Network Background Script -->
<script src="{{ url_for('static', filename='neural-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: true, // Default to dark mode
mobileMenuOpen: false,
userMenuOpen: false,
showSettingsModal: false,
init() {
this.fetchDarkModeFromSession();
},
fetchDarkModeFromSession() {
// Lade den Dark Mode-Status vom Server
fetch('/api/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('/api/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 %}
<!-- Custom dark mode styles -->
<style>
/* Dark mystical theme */
.dark {
--bg-primary: #0a0e19;
--bg-secondary: #111827;
--text-primary: #f9fafb;
--text-secondary: #e5e7eb;
--accent-primary: #6d28d9;
--accent-secondary: #8b5cf6;
--glow-effect: 0 0 15px rgba(124, 58, 237, 0.5);
}
/* Light theme with mystical tones */
:root {
--bg-primary: #f8fafc;
--bg-secondary: #f1f5f9;
--text-primary: #1e293b;
--text-secondary: #475569;
--accent-primary: #7c3aed;
--accent-secondary: #8b5cf6;
--glow-effect: 0 0 15px rgba(139, 92, 246, 0.3);
}
body.dark {
background-color: var(--bg-primary);
color: var(--text-primary);
}
/* Mystical glowing effects */
.mystical-glow {
text-shadow: var(--glow-effect);
}
.gradient-text {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none;
}
/* Glass morphism effects */
.glass-morphism {
backdrop-filter: blur(10px);
}
.dark .glass-navbar-dark {
background-color: rgba(10, 14, 25, 0.8);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.glass-navbar-light {
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body data-page="{{ request.endpoint }}" class="relative overflow-x-hidden dark">
<!-- 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-900/90 to-indigo-800/90 text-white font-medium px-4 py-2 rounded-xl hover:shadow-lg hover:shadow-purple-800/30 transition-all duration-300'
: 'bg-gradient-to-r from-purple-600/30 to-indigo-500/30 text-gray-800 font-medium px-4 py-2 rounded-xl hover:shadow-md transition-all duration-300'">
<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-purple-800/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-purple-600 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 %}
<div class="flex items-center space-x-2">
<a href="{{ url_for('login') }}"
class="py-2 px-4 rounded-lg transition-all duration-300"
x-bind:class="darkMode
? 'text-white/90 hover:bg-dark-700/80'
: 'text-gray-700 hover:bg-gray-100/80'">
<i class="fa-solid fa-sign-in-alt mr-2"></i>Login
</a>
<a href="{{ url_for('register') }}"
class="py-2 px-4 rounded-lg transition-all duration-300 font-medium"
x-bind:class="darkMode
? 'bg-purple-800/80 text-white hover:bg-purple-700/80'
: 'bg-purple-600/20 text-gray-700 hover:bg-purple-600/30'">
Registrieren
</a>
</div>
{% 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">
&copy; {{ 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>