871 lines
42 KiB
HTML
871 lines
42 KiB
HTML
<!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">
|
|
|
|
<!-- 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">
|
|
|
|
<!-- Tailwind CSS -->
|
|
<link href="{{ url_for('static', filename='css/main.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>
|
|
|
|
<!-- Globale Stile für konsistentes Glasmorphismus-Design -->
|
|
<style>
|
|
/* Globale Variablen */
|
|
:root {
|
|
--dark-bg: #0e1220;
|
|
--dark-card-bg: rgba(24, 28, 45, 0.8);
|
|
--dark-element-bg: rgba(24, 28, 45, 0.8);
|
|
--light-bg: #f0f4f8;
|
|
--light-card-bg: rgba(255, 255, 255, 0.85);
|
|
--accent-color: #b38fff;
|
|
--accent-gradient: linear-gradient(135deg, #b38fff, #58a9ff);
|
|
--accent-gradient-hover: linear-gradient(135deg, #c7a8ff, #70b5ff);
|
|
--blur-amount: 20px;
|
|
--border-radius: 28px;
|
|
--card-border-radius: 24px;
|
|
--button-radius: 18px;
|
|
--nav-item-radius: 14px;
|
|
}
|
|
|
|
/* Dark Mode Einstellungen */
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Base Styles */
|
|
html, body {
|
|
background-color: var(--dark-bg) !important;
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
color: #ffffff;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
overflow-x: hidden;
|
|
transition: background-color 0.5s ease, color 0.5s ease;
|
|
}
|
|
|
|
/* Sicherstellen, dass der dunkle Hintergrund die gesamte Seite abdeckt */
|
|
#app-container, .container, main, .mx-auto, .py-12, #content-wrapper {
|
|
background-color: transparent !important;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Light Mode Einstellungen */
|
|
html.light, html.light body {
|
|
background-color: var(--light-bg) !important;
|
|
color: #1a202c;
|
|
}
|
|
|
|
/* Große Headings mit verbesserten Stilen */
|
|
h1.hero-heading {
|
|
font-size: clamp(2.5rem, 8vw, 5rem);
|
|
line-height: 1.1;
|
|
font-weight: 800;
|
|
letter-spacing: -0.03em;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
h2.section-heading {
|
|
font-size: clamp(1.75rem, 5vw, 3rem);
|
|
line-height: 1.2;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
/* Verbesserte Glasmorphismus-Stile */
|
|
.glass-morphism {
|
|
background: var(--dark-card-bg);
|
|
backdrop-filter: blur(var(--blur-amount));
|
|
-webkit-backdrop-filter: blur(var(--blur-amount));
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: var(--card-border-radius);
|
|
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.glass-morphism:hover {
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.glass-morphism-light {
|
|
background: var(--light-card-bg);
|
|
backdrop-filter: blur(var(--blur-amount));
|
|
-webkit-backdrop-filter: blur(var(--blur-amount));
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
border-radius: var(--card-border-radius);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.glass-morphism-light:hover {
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Verbesserte Navbar-Styles */
|
|
.glass-navbar-dark {
|
|
background: rgba(14, 18, 32, 0.85);
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
|
|
border-radius: 0 0 20px 20px;
|
|
}
|
|
|
|
.glass-navbar-light {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
border-color: rgba(0, 0, 0, 0.05);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
|
border-radius: 0 0 20px 20px;
|
|
}
|
|
|
|
/* Verbesserte Button-Stile mit besserer Lesbarkeit und stärkeren Farbverläufen */
|
|
.btn, button, .button, [type="button"], [type="submit"] {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border-radius: var(--button-radius);
|
|
padding: 0.75rem 1.5rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.4px;
|
|
color: rgba(255, 255, 255, 1);
|
|
background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(168, 85, 247, 0.8));
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
outline: none;
|
|
}
|
|
|
|
.btn:hover, button:hover, .button:hover, [type="button"]:hover, [type="submit"]:hover {
|
|
background: linear-gradient(135deg, rgba(129, 140, 248, 0.9), rgba(192, 132, 252, 0.9));
|
|
transform: translateY(-3px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25), 0 0 12px rgba(179, 143, 255, 0.35);
|
|
color: white;
|
|
}
|
|
|
|
.btn:active, button:active, .button:active, [type="button"]:active, [type="submit"]:active {
|
|
transform: translateY(1px);
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Navigation Stile mit verbesserten Farbverläufen */
|
|
.nav-link {
|
|
transition: all 0.25s ease;
|
|
border-radius: var(--nav-item-radius);
|
|
padding: 0.625rem 1rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.3px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: rgba(179, 143, 255, 0.2);
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.nav-link-active {
|
|
background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(139, 92, 246, 0.3));
|
|
color: white;
|
|
font-weight: 600;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.nav-link-active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 10%;
|
|
width: 80%;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
|
|
}
|
|
|
|
/* Light-Mode Navigation Stile */
|
|
.nav-link-light {
|
|
color: rgba(26, 32, 44, 0.85);
|
|
}
|
|
|
|
.nav-link-light:hover {
|
|
background: rgba(179, 143, 255, 0.15);
|
|
color: rgba(26, 32, 44, 1);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.nav-link-light-active {
|
|
background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(139, 92, 246, 0.2));
|
|
color: rgba(26, 32, 44, 1);
|
|
font-weight: 600;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.nav-link-light-active::after {
|
|
background: linear-gradient(90deg, transparent, rgba(26, 32, 44, 0.5), transparent);
|
|
}
|
|
|
|
/* Entfernung von Gradient-Hintergrund überall */
|
|
.gradient-bg, .purple-gradient, .gradient-purple-bg {
|
|
background: var(--dark-bg) !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
/* Verbesserte Light-Mode-Stile für Buttons */
|
|
html.light .btn, html.light button, html.light .button,
|
|
html.light [type="button"], html.light [type="submit"] {
|
|
background: linear-gradient(135deg, rgba(124, 58, 237, 0.7), rgba(139, 92, 246, 0.7));
|
|
color: #ffffff;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
text-shadow: none;
|
|
}
|
|
|
|
html.light .btn:hover, html.light button:hover, html.light .button:hover,
|
|
html.light [type="button"]:hover, html.light [type="submit"]:hover {
|
|
background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(168, 85, 247, 0.85));
|
|
color: #ffffff;
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 0 12px rgba(179, 143, 255, 0.2);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Verbesserte Buttons mit Glasmorphismus */
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, rgba(179, 143, 255, 0.8), rgba(88, 169, 255, 0.8));
|
|
backdrop-filter: blur(var(--blur-amount));
|
|
-webkit-backdrop-filter: blur(var(--blur-amount));
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: var(--button-radius);
|
|
color: white !important;
|
|
font-weight: 600;
|
|
padding: 0.75rem 1.5rem;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
|
|
background: linear-gradient(135deg, rgba(190, 160, 255, 0.9), rgba(100, 180, 255, 0.9));
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: rgba(32, 36, 55, 0.8);
|
|
backdrop-filter: blur(var(--blur-amount));
|
|
-webkit-backdrop-filter: blur(var(--blur-amount));
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--button-radius);
|
|
color: white;
|
|
font-weight: 500;
|
|
padding: 0.75rem 1.5rem;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
|
|
background: rgba(38, 42, 65, 0.9);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* Steuerungsbutton-Stil */
|
|
.control-btn {
|
|
padding: 0.5rem 1rem;
|
|
background: rgba(32, 36, 55, 0.8);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 14px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: all 0.25s ease;
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
}
|
|
|
|
.control-btn:hover {
|
|
background: rgba(38, 42, 65, 0.9);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Verbesserter Farbverlauf-Text */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, rgba(200, 170, 255, 1), rgba(100, 180, 255, 1));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
text-shadow: 0 2px 10px rgba(179, 143, 255, 0.3);
|
|
filter: drop-shadow(0 2px 6px rgba(179, 143, 255, 0.3));
|
|
}
|
|
|
|
/* Globaler Hintergrund */
|
|
.full-page-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: var(--dark-bg);
|
|
z-index: -10;
|
|
}
|
|
|
|
html.light .full-page-bg {
|
|
background-color: var(--light-bg);
|
|
}
|
|
|
|
/* Animationen für Hintergrundeffekte */
|
|
@keyframes float {
|
|
0% { transform: translateY(0); }
|
|
50% { transform: translateY(-12px); }
|
|
100% { transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: 0.7; transform: scale(1); }
|
|
50% { opacity: 1; transform: scale(1.05); }
|
|
100% { opacity: 0.7; transform: scale(1); }
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
/* Verbesserter Container für konsistente Layouts */
|
|
.page-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
/* Dark Mode Toggle Stile */
|
|
.dot {
|
|
transform: translateX(0);
|
|
transition: transform 0.3s ease-in-out, background-color 0.3s ease;
|
|
}
|
|
|
|
input:checked ~ .dot {
|
|
transform: translateX(100%);
|
|
background-color: #58a9ff;
|
|
}
|
|
|
|
input:checked ~ .block {
|
|
background-color: rgba(88, 169, 255, 0.4);
|
|
}
|
|
|
|
/* Feature Cards mit Glasmorphismus und Farbverlauf */
|
|
.feature-card {
|
|
border-radius: var(--card-border-radius);
|
|
padding: 2rem;
|
|
transition: all 0.3s ease;
|
|
background: linear-gradient(145deg, rgba(32, 36, 55, 0.7), rgba(24, 28, 45, 0.9));
|
|
backdrop-filter: blur(var(--blur-amount));
|
|
-webkit-backdrop-filter: blur(var(--blur-amount));
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
background: linear-gradient(145deg, rgba(40, 44, 65, 0.8), rgba(28, 32, 50, 0.95));
|
|
}
|
|
|
|
html.light .feature-card {
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(240, 240, 250, 0.9));
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
html.light .feature-card:hover {
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 245, 255, 0.95));
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.feature-card .icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1.25rem;
|
|
background: linear-gradient(135deg, rgba(124, 58, 237, 0.8), rgba(139, 92, 246, 0.6));
|
|
color: white;
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.75rem;
|
|
color: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
html.light .feature-card h3 {
|
|
color: rgba(26, 32, 44, 0.95);
|
|
}
|
|
|
|
.feature-card p {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
html.light .feature-card p {
|
|
color: rgba(26, 32, 44, 0.75);
|
|
}
|
|
</style>
|
|
|
|
<!-- 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" style="background-image: url('{{ url_for('static', filename='network-bg.jpg') }}');"></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>
|
|
{% 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>
|
|
{% 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 %}
|
|
</body>
|
|
</html> |