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

Optimize network background animation and enhance UI styles: Adjust animation speeds for smoother transitions, implement dark mode support, and improve card and navbar styles with glassmorphism effects. Update HTML structure for better responsiveness and visual appeal.

Browse Source
This commit is contained in:
Till Tomczak
2025-04-25 23:39:41 +02:00
parent ab280b55af
commit 4797cc3b72
5 changed files with 829 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

456
website/static/css/style.css
View File

@@ -45,6 +45,12 @@
--success-bright: #50ffe4;
--warning-bright: #ffe050;
--danger-bright: #ff5050;
/* Neue verbesserte Glasmorphismus Variablen */
--glass-navbar-dark: rgba(14, 18, 32, 0.85);
--glass-navbar-light: rgba(255, 255, 255, 0.85);
--glass-card-dark: rgba(24, 28, 45, 0.8);
--glass-card-light: rgba(255, 255, 255, 0.8);
}
/* Basiselemente */
@@ -109,33 +115,302 @@ a:hover {
border: 1px solid rgba(154, 125, 255, 0.3);
}
.neumorph {
background: var(--card-bg);
border-radius: 16px;
box-shadow: var(--shadow-dark), var(--shadow-light);
margin-bottom: var(--standard-spacing);
padding: var(--standard-spacing);
/* Verbesserte Navbar Styles */
.glass-navbar-dark {
background: var(--glass-navbar-dark);
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);
}
.glass-navbar-light {
background: var(--glass-navbar-light);
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);
}
.nav-link {
padding: 0.6rem 1rem;
border-radius: 0.75rem;
font-weight: 500;
transition: all 0.25s ease;
position: relative;
color: rgba(255, 255, 255, 0.85);
}
.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: rgba(179, 143, 255, 0.3);
color: white;
font-weight: 600;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.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);
}
.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: rgba(179, 143, 255, 0.2);
color: rgba(26, 32, 44, 1);
font-weight: 600;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.nav-link-light-active::after {
background: linear-gradient(90deg, transparent, rgba(26, 32, 44, 0.5), transparent);
}
/* Neu gestylte Cards mit verbesserten Effekten */
.card {
background: var(--glass-card-dark);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: 1.25rem;
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 1.75rem;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
z-index: 1;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60%;
background: linear-gradient(to bottom,
rgba(179, 143, 255, 0.05) 0%,
rgba(179, 143, 255, 0) 100%);
z-index: -1;
transition: all 0.3s ease;
opacity: 0;
border-radius: 1.25rem 1.25rem 0 0;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.card:hover::before {
opacity: 1;
}
.card .icon {
font-size: 2.5rem;
margin-bottom: 1.5rem;
display: inline-block;
background: linear-gradient(135deg, #b38fff, #58a9ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 8px rgba(179, 143, 255, 0.4));
transition: all 0.3s ease;
}
.neumorph:hover {
box-shadow: var(--shadow-light), var(--shadow-dark), 0 0 20px rgba(154, 125, 255, 0.2);
.card:hover .icon {
transform: scale(1.1);
filter: drop-shadow(0 0 12px rgba(179, 143, 255, 0.6));
}
.neumorph-inset {
background: var(--card-bg);
border-radius: 16px;
box-shadow: var(--inner-shadow);
padding: var(--standard-spacing);
.card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #ffffff;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.card:hover h3 {
transform: translateY(-2px);
text-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
.card p {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
line-height: 1.6;
margin-bottom: 0;
}
/* Light Mode Card Styles */
.light .card {
background: var(--glass-card-light);
border: 1px solid rgba(0, 0, 0, 0.07);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.light .card::before {
background: linear-gradient(to bottom,
rgba(179, 143, 255, 0.03) 0%,
rgba(179, 143, 255, 0) 100%);
}
.light .card:hover {
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.light .card h3 {
color: #1a202c;
text-shadow: none;
}
.light .card p {
color: rgba(26, 32, 44, 0.9);
}
/* Verbesserte Feature-Card Variante */
.feature-card {
padding: 2rem;
border-radius: 1.5rem;
background: var(--glass-card-dark);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
z-index: 1;
}
.feature-card::before {
content: '';
position: absolute;
width: 150%;
height: 150%;
background: radial-gradient(
circle at top right,
rgba(179, 143, 255, 0.15),
transparent 70%
);
top: -25%;
right: -25%;
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
}
.feature-card:hover {
transform: translateY(-7px) scale(1.02);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.25);
}
.feature-card:hover::before {
opacity: 1;
}
.feature-card .icon {
font-size: 2.75rem;
margin-bottom: 1.25rem;
background: linear-gradient(135deg, #b38fff, #58a9ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 10px rgba(179, 143, 255, 0.6));
transition: all 0.3s ease;
}
.feature-card:hover .icon {
transform: scale(1.1) translateY(-3px);
filter: drop-shadow(0 0 15px rgba(179, 143, 255, 0.8));
}
.feature-card h3 {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.9rem;
color: #ffffff;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
letter-spacing: 0.2px;
transition: all 0.3s ease;
}
.feature-card:hover h3 {
transform: translateY(-2px);
}
.feature-card p {
color: rgba(255, 255, 255, 0.95);
font-size: 1.1rem;
line-height: 1.6;
font-weight: 400;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
letter-spacing: 0.3px;
}
/* Light Mode Anpassungen für Feature-Cards */
.light .feature-card {
background: var(--glass-card-light);
border: 1px solid rgba(0, 0, 0, 0.08);
color: #1a202c;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.light .feature-card:hover {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}
.light .feature-card h3 {
color: #1a202c;
text-shadow: none;
}
.light .feature-card p {
color: rgba(26, 32, 44, 0.9);
text-shadow: none;
}
/* Stilvolle Farbverläufe für Akzente */
.gradient-text {
background: linear-gradient(135deg, var(--primary-bright), var(--accent-bright));
background: linear-gradient(135deg, rgba(200, 170, 255, 1), rgba(100, 180, 255, 1));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 10px rgba(154, 125, 255, 0.3);
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));
}
.gradient-bg {
@@ -337,157 +612,6 @@ a:hover {
border-color: var(--accent-color);
}
/* Verbesserte Card-Komponenten mit Glassmorphismus */
.card {
background: rgba(30, 30, 46, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(72, 71, 138, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 20%,
rgba(0, 0, 0, 0) 80%
);
z-index: 0;
pointer-events: none;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(154, 125, 255, 0.2);
border-color: rgba(154, 125, 255, 0.3);
}
.card:hover::before {
opacity: 0.7;
}
.card-header {
background: rgba(20, 20, 40, 0.5);
border-bottom: 1px solid rgba(72, 71, 138, 0.2);
padding: 1rem 1.5rem;
position: relative;
border-radius: 16px 16px 0 0;
font-weight: 600;
}
.card-header::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: linear-gradient(
to right,
rgba(154, 125, 255, 0.2),
rgba(76, 223, 255, 0.2)
);
}
.card-header h5 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--light-color);
display: flex;
align-items: center;
}
.card-body {
position: relative;
z-index: 1;
padding: 1.5rem;
color: rgba(233, 233, 240, 0.9);
}
.card-footer {
background: rgba(20, 20, 40, 0.5);
border-top: 1px solid rgba(72, 71, 138, 0.2);
padding: 1rem 1.5rem;
position: relative;
border-radius: 0 0 16px 16px;
color: rgba(233, 233, 240, 0.7);
}
/* Feature cards auf der Homepage - Verbessertes Design */
.feature-card {
background: rgba(30, 30, 46, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(72, 71, 138, 0.2);
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
height: 100%;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 20%,
rgba(0, 0, 0, 0) 80%
);
z-index: 0;
pointer-events: none;
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 25px rgba(154, 125, 255, 0.2);
border-color: rgba(154, 125, 255, 0.3);
}
.feature-card .icon {
font-size: 3rem;
margin-bottom: 1.5rem;
display: inline-block;
color: var(--primary-bright);
text-shadow: 0 0 15px rgba(154, 125, 255, 0.5);
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
position: relative;
z-index: 1;
color: white;
}
.feature-card p {
color: rgba(233, 233, 240, 0.9);
font-size: 1rem;
line-height: 1.6;
position: relative;
z-index: 1;
}
/* Glass-effect für UI-Komponenten */
.glass-effect {
background: rgba(30, 30, 46, 0.5);

191
website/static/network-background.js
View File

@@ -1,14 +1,16 @@
// Animated Network Background
let canvas, ctx, networkImage;
let isImageLoaded = false;
let animationSpeed = 0.0005; // Speed of rotation
let scaleSpeed = 0.0002; // Speed of scaling
let opacitySpeed = 0.0003; // Speed of opacity change
let animationSpeed = 0.0003; // Reduzierte Geschwindigkeit für sanftere Rotation
let scaleSpeed = 0.0001; // Reduzierte Geschwindigkeit für sanftere Skalierung
let opacitySpeed = 0.0002; // Reduzierte Geschwindigkeit für sanftere Opazitätsänderung
let rotation = 0;
let scale = 1;
let opacity = 0.6;
let opacity = 0.7; // Höhere Basisopazität für bessere Sichtbarkeit
let scaleDirection = 1;
let opacityDirection = 1;
let animationFrameId = null;
let isDarkMode = document.documentElement.classList.contains('dark');
// Initialize the canvas and load the image
function initNetworkBackground() {
@@ -21,69 +23,108 @@ function initNetworkBackground() {
canvas.style.left = '0';
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.style.zIndex = '-1';
canvas.style.zIndex = '-5'; // Höher als -10 für den full-page-bg
canvas.style.pointerEvents = 'none'; // Stellt sicher, dass der Canvas keine Mausinteraktionen blockiert
document.body.appendChild(canvas);
} else {
canvas = document.getElementById('network-background');
}
// Set canvas size to window size
// Set canvas size to window size with pixel ratio consideration
resizeCanvas();
// Get context
ctx = canvas.getContext('2d');
// Get context with alpha enabled
ctx = canvas.getContext('2d', { alpha: true });
// Load the network image
networkImage = new Image();
networkImage.crossOrigin = "anonymous"; // Vermeidet CORS-Probleme
networkImage.src = '/static/network-bg.jpg';
// Fallback auf lokalen Pfad, falls der absolute Pfad fehlschlägt
networkImage.onerror = function() {
networkImage.src = 'static/network-bg.jpg';
};
networkImage.onload = function() {
isImageLoaded = true;
animate();
startAnimation();
};
// Handle window resize
window.addEventListener('resize', resizeCanvas);
window.addEventListener('resize', debounce(resizeCanvas, 250));
// Überwache Dark Mode-Änderungen
document.addEventListener('darkModeToggled', function(event) {
isDarkMode = event.detail.isDark;
});
}
// Resize canvas to match window size
// Hilfsfunktion zur Reduzierung der Resize-Event-Aufrufe
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
};
}
// Resize canvas to match window size with proper pixel ratio
function resizeCanvas() {
if (canvas) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (!canvas) return;
const pixelRatio = window.devicePixelRatio || 1;
const width = window.innerWidth;
const height = window.innerHeight;
// Set display size (css pixels)
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
// Set actual size in memory (scaled for pixel ratio)
canvas.width = width * pixelRatio;
canvas.height = height * pixelRatio;
// Scale context to match pixel ratio
if (ctx) {
ctx.scale(pixelRatio, pixelRatio);
}
// Wenn Animation läuft und Bild geladen, zeichne erneut
if (isImageLoaded && animationFrameId) {
drawNetworkImage();
}
}
// Animation loop
function animate() {
// Start animation
function startAnimation() {
if (!isImageLoaded) return;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Update animation parameters
rotation += animationSpeed;
// Update scale with oscillation
scale += scaleSpeed * scaleDirection;
if (scale > 1.1) {
scaleDirection = -1;
} else if (scale < 0.9) {
scaleDirection = 1;
// Cancel any existing animation
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
}
// Update opacity with oscillation
opacity += opacitySpeed * opacityDirection;
if (opacity > 0.8) {
opacityDirection = -1;
} else if (opacity < 0.5) {
opacityDirection = 1;
}
// Start animation loop
animate();
}
// Draw network image
function drawNetworkImage() {
if (!isImageLoaded || !ctx) return;
// Clear canvas with proper clear method
ctx.clearRect(0, 0, canvas.width / (window.devicePixelRatio || 1), canvas.height / (window.devicePixelRatio || 1));
// Save context state
ctx.save();
// Move to center of canvas
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.translate(canvas.width / (2 * (window.devicePixelRatio || 1)), canvas.height / (2 * (window.devicePixelRatio || 1)));
// Rotate
ctx.rotate(rotation);
@@ -91,28 +132,84 @@ function animate() {
// Scale
ctx.scale(scale, scale);
// Set global opacity
ctx.globalAlpha = opacity;
// Set global opacity, angepasst für Dark Mode
ctx.globalAlpha = isDarkMode ? opacity : opacity * 0.8;
// Bildgröße berechnen, um den Bildschirm abzudecken
const imgAspect = networkImage.width / networkImage.height;
const canvasAspect = canvas.width / canvas.height;
let drawWidth, drawHeight;
if (canvasAspect > imgAspect) {
drawWidth = canvas.width / (window.devicePixelRatio || 1);
drawHeight = drawWidth / imgAspect;
} else {
drawHeight = canvas.height / (window.devicePixelRatio || 1);
drawWidth = drawHeight * imgAspect;
}
// Draw image centered
ctx.drawImage(
networkImage,
-networkImage.width / 2,
-networkImage.height / 2,
networkImage.width,
networkImage.height
-drawWidth / 2,
-drawHeight / 2,
drawWidth,
drawHeight
);
// Restore context state
ctx.restore();
// Request next frame
requestAnimationFrame(animate);
}
// Initialize background when the DOM is loaded
// Animation loop
function animate() {
// Update animation parameters
rotation += animationSpeed;
// Update scale with oscillation
scale += scaleSpeed * scaleDirection;
if (scale > 1.05) { // Kleinerer Skalierungsbereich für weniger starke Größenänderung
scaleDirection = -1;
} else if (scale < 0.95) {
scaleDirection = 1;
}
// Update opacity with oscillation
opacity += opacitySpeed * opacityDirection;
if (opacity > 0.75) { // Kleinerer Opazitätsbereich für subtilere Änderungen
opacityDirection = -1;
} else if (opacity < 0.65) {
opacityDirection = 1;
}
// Draw the image
drawNetworkImage();
// Request next frame
animationFrameId = requestAnimationFrame(animate);
}
// Cleanup Funktion für Speicherbereinigung
function cleanupNetworkBackground() {
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
animationFrameId = null;
}
if (canvas && canvas.parentNode) {
canvas.parentNode.removeChild(canvas);
}
window.removeEventListener('resize', resizeCanvas);
}
// Führe Initialisierung aus, wenn DOM geladen ist
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initNetworkBackground);
} else {
initNetworkBackground();
}
}
// Führe Cleanup durch, wenn das Fenster geschlossen wird
window.addEventListener('beforeunload', cleanupNetworkBackground);

7
website/static/network-bg.jpg
View File

@@ -1,2 +1,5 @@
/* This is a placeholder for the network background image.
The actual image (d2efd014-1325-471f-b9a7-90d025eb81d6.png) should be copied here. */
/* Dies ist ein Platzhalter für das Netzwerk-Hintergrundbild.
Das eigentliche Bild sollte hier durch eine echte JPG-Datei ersetzt werden.
Empfohlene Bildgröße: mindestens 1920x1080px
Optimaler Stil: Dunkler Hintergrund mit abstrakten Verbindungslinien und Punkten */

573
website/templates/base.html
View File

@@ -114,9 +114,12 @@
--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: 24px;
--button-radius: 16px;
--border-radius: 28px;
--card-border-radius: 24px;
--button-radius: 18px;
--nav-item-radius: 14px;
}
/* Dark Mode Einstellungen */
@@ -134,11 +137,12 @@
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: var(--dark-bg) !important;
background-color: transparent !important;
width: 100%;
}
@@ -148,13 +152,30 @@
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(--border-radius);
border-radius: var(--card-border-radius);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
transition: all 0.3s ease;
}
@@ -170,7 +191,7 @@
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(--border-radius);
border-radius: var(--card-border-radius);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
}
@@ -181,26 +202,46 @@
transform: translateY(-2px);
}
/* Verbesserte Button-Stile mit besserer Lesbarkeit */
/* 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.25s ease;
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: rgba(80, 90, 130, 0.8);
border: 1px solid rgba(255, 255, 255, 0.18);
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: rgba(179, 143, 255, 0.65);
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);
@@ -212,19 +253,16 @@
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
/* Navigation Stile */
/* Navigation Stile mit verbesserten Farbverläufen */
.nav-link {
transition: all 0.25s ease;
border-radius: var(--border-radius);
padding: 10px 18px;
border-radius: var(--nav-item-radius);
padding: 0.625rem 1rem;
font-weight: 500;
letter-spacing: 0.3px;
color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
position: relative;
overflow: visible;
height: 40px !important;
}
.nav-link:hover {
@@ -234,14 +272,14 @@
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.nav-link.active {
background: rgba(179, 143, 255, 0.3);
.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 {
.nav-link-active::after {
content: '';
position: absolute;
bottom: 0;
@@ -253,7 +291,7 @@
/* Light-Mode Navigation Stile */
.nav-link-light {
color: rgba(26, 32, 44, 0.9);
color: rgba(26, 32, 44, 0.85);
}
.nav-link-light:hover {
@@ -262,14 +300,14 @@
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.nav-link-light.active {
background: rgba(179, 143, 255, 0.2);
.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 {
.nav-link-light-active::after {
background: linear-gradient(90deg, transparent, rgba(26, 32, 44, 0.5), transparent);
}
@@ -282,8 +320,8 @@
/* 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: rgba(255, 255, 255, 0.85);
color: #1a202c;
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;
@@ -291,7 +329,7 @@
html.light .btn:hover, html.light button:hover, html.light .button:hover,
html.light [type="button"]:hover, html.light [type="submit"]:hover {
background: rgba(179, 143, 255, 0.85);
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);
@@ -344,7 +382,7 @@
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: 12px;
border-radius: 14px;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.25s ease;
@@ -361,84 +399,14 @@
/* Verbesserter Farbverlauf-Text */
.gradient-text {
background: var(--accent-gradient);
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;
}
/* Kartenstil für Feature-Cards */
.feature-card {
background: rgba(24, 28, 45, 0.8);
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);
transition: all 0.3s ease;
padding: 1.75rem;
height: 100%;
display: flex;
flex-direction: column;
}
.feature-card:hover {
transform: translateY(-5px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
background: rgba(32, 36, 55, 0.9);
}
.feature-card .icon {
font-size: 2.75rem;
margin-bottom: 1.25rem;
background: linear-gradient(135deg, #b38fff, #58a9ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 10px rgba(179, 143, 255, 0.6));
}
.feature-card h3 {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.9rem;
color: #ffffff;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
letter-spacing: 0.2px;
}
.feature-card p {
color: rgba(255, 255, 255, 0.95);
font-size: 1.1rem;
line-height: 1.6;
font-weight: 400;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
letter-spacing: 0.3px;
}
/* Light Mode Anpassungen für Feature-Cards */
html.light .feature-card {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(0, 0, 0, 0.08);
color: #1a202c;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
html.light .feature-card:hover {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}
html.light .feature-card h3 {
color: #1a202c;
text-shadow: none;
}
html.light .feature-card p {
color: rgba(26, 32, 44, 0.9);
text-shadow: none;
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 */
@@ -484,16 +452,84 @@
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: #b38fff; /* Angepasst an Farbschema */
background-color: #58a9ff;
}
input:checked ~ .block {
background-color: rgba(179, 143, 255, 0.4); /* Angepasst an Farbschema */
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>
@@ -503,203 +539,228 @@
<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 style="position: sticky; top: 0; left: 0; right: 0; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); background: rgba(14, 18, 32, 0.75); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 2rem; z-index: 100; transition: all 0.3s ease; display: flex; justify-content: space-between; align-items: center;" x-bind:style="darkMode ? 'background: rgba(14, 18, 32, 0.75);' : 'background: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(0, 0, 0, 0.05);'">
<!-- Logo -->
<a href="{{ url_for('index') }}" style="display: flex; align-items: center; text-decoration: none;">
<span style="font-size: 1.5rem; font-weight: 700; background: linear-gradient(135deg, #b38fff, #58a9ff); -webkit-background-clip: text; background-clip: text; color: transparent;">MindMap</span>
</a>
<nav class="sticky top-0 left-0 right-0 z-50 transition-all duration-300 py-4 px-5 border-b"
x-bind:class="darkMode ? 'glass-navbar-dark' : 'glass-navbar-light'">
<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">MindMap</span>
</a>
<!-- Hauptnavigation - Desktop -->
<div style="display: none; align-items: center; gap: 1rem;" x-bind:style="window.innerWidth >= 768 ? 'display: flex;' : 'display: none;'">
<a href="{{ url_for('index') }}"
style="display: flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.75rem; font-weight: 500; transition: all 0.25s ease; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);"
x-bind:style="darkMode
? '{{ 'background: rgba(179, 143, 255, 0.3); color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);' if request.endpoint == 'index' else 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}'
: '{{ 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);' if request.endpoint == 'index' else 'background: transparent; color: rgba(26, 32, 44, 0.9);' }}'">
<i class="fa-solid fa-home" style="margin-right: 0.5rem;"></i>Start
</a>
<a href="{{ url_for('mindmap') }}"
style="display: flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.75rem; font-weight: 500; transition: all 0.25s ease; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);"
x-bind:style="darkMode
? '{{ 'background: rgba(179, 143, 255, 0.3); color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);' if request.endpoint == 'mindmap' else 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}'
: '{{ 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);' if request.endpoint == 'mindmap' else 'background: transparent; color: rgba(26, 32, 44, 0.9);' }}'">
<i class="fa-solid fa-diagram-project" style="margin-right: 0.5rem;"></i>Mindmap
</a>
{% if current_user.is_authenticated %}
<a href="{{ url_for('profile') }}"
style="display: flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.75rem; font-weight: 500; transition: all 0.25s ease; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);"
x-bind:style="darkMode
? '{{ 'background: rgba(179, 143, 255, 0.3); color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);' if request.endpoint == 'profile' else 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}'
: '{{ 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);' if request.endpoint == 'profile' else 'background: transparent; color: rgba(26, 32, 44, 0.9);' }}'">
<i class="fa-solid fa-user" style="margin-right: 0.5rem;"></i>Profil
</a>
{% endif %}
</div>
<!-- Rechte Seite -->
<div style="display: flex; align-items: center; gap: 1rem;">
<!-- Dark Mode Toggle Switch -->
<div style="display: flex; align-items: center; cursor: pointer;" @click="toggleDarkMode">
<div style="position: relative; width: 2.5rem; height: 1.5rem;">
<input type="checkbox" id="darkModeToggle" style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;" x-model="darkMode">
<div x-bind:style="darkMode ? 'background: rgba(88, 169, 255, 0.5);' : 'background: rgba(100, 100, 100, 0.5);'" style="width: 2.5rem; height: 1.5rem; border-radius: 9999px; transition: background-color 0.3s ease;"></div>
<div x-bind:style="darkMode ? 'transform: translateX(1rem); background-color: #58a9ff;' : 'transform: translateX(0); background-color: #ffffff;'" style="position: absolute; left: 0.25rem; top: 0.25rem; width: 1rem; height: 1rem; border-radius: 9999px; transition: transform 0.3s ease, background-color 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);"></div>
</div>
<div x-bind:style="darkMode ? 'color: rgba(255, 255, 255, 0.9);' : 'color: rgba(26, 32, 44, 0.9);'" style="margin-left: 0.75rem; display: none;" x-bind:style="window.innerWidth >= 640 ? 'display: block;' : 'display: none;'">
<span x-text="darkMode ? 'Hell' : 'Dunkel'"></span>
</div>
<div x-bind:style="darkMode ? 'color: rgba(255, 255, 255, 0.9);' : 'color: rgba(26, 32, 44, 0.9);'" style="margin-left: 0.75rem;" x-bind:style="window.innerWidth < 640 ? 'display: block;' : 'display: none;'">
<i class="fa-solid" :class="darkMode ? 'fa-sun' : 'fa-moon'"></i>
</div>
<!-- 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>
{% 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>
<!-- Mobilmenü-Button -->
<button @click="mobileMenuOpen = !mobileMenuOpen" style="display: none; padding: 0.5rem; border-radius: 0.5rem; border: none; background: transparent; cursor: pointer;" x-bind:style="window.innerWidth < 768 ? 'display: block;' : 'display: none;'">
<i class="fa-solid fa-bars" x-bind:style="darkMode ? 'color: rgba(255, 255, 255, 0.9);' : 'color: rgba(26, 32, 44, 0.9);'" style="font-size: 1.25rem;"></i>
</button>
<!-- Benutzermenü oder Login -->
{% if current_user.is_authenticated %}
<div style="position: relative;" x-data="{ open: false }">
<button @click="open = !open" style="display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: 9999px; border: none; transition: all 0.25s ease; cursor: pointer; outline: none;"
x-bind:style="darkMode
? 'background: rgba(32, 36, 55, 0.8); color: rgba(255, 255, 255, 0.9);'
: 'background: rgba(240, 240, 240, 0.8); color: rgba(26, 32, 44, 0.9);'">
<div style="width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.875rem; overflow: hidden; background-color: #6366f1;">
{% if current_user.avatar %}
<img src="{{ current_user.avatar }}" alt="{{ current_user.username }}" style="width: 100%; height: 100%; object-fit: cover;">
{% else %}
{{ current_user.username[0].upper() }}
{% endif %}
<!-- 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>
<span style="font-size: 0.875rem; display: none;" x-bind:style="window.innerWidth >= 1024 ? 'display: block;' : 'display: none;'">{{ current_user.username }}</span>
<i class="fa-solid fa-chevron-down" style="font-size: 0.75rem; transform: rotate(0deg); transition: transform 0.2s ease; display: none;" x-bind:style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'" x-bind:style="window.innerWidth >= 1024 ? 'display: block;' : 'display: none;'"></i>
</button>
<!-- Dropdown-Menü -->
<div x-show="open"
@click.away="open = false"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
style="position: absolute; right: 0; margin-top: 0.5rem; width: 12rem; border-radius: 0.75rem; overflow: hidden; z-index: 50; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); transform-origin: top right; transition: all 0.3s ease;"
x-bind:style="darkMode
? 'background: rgba(24, 28, 45, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1);'
: 'background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(0, 0, 0, 0.05);'">
<a href="{{ url_for('profile') }}" style="display: block; padding: 0.75rem 1rem; text-decoration: none; transition: all 0.25s ease;"
x-bind:style="darkMode
? 'color: rgba(255, 255, 255, 0.9);'
: 'color: rgba(26, 32, 44, 0.9);'"
onmouseover="this.style.backgroundColor = this.getAttribute('data-hover-bg')"
onmouseout="this.style.backgroundColor = 'transparent'"
x-bind:data-hover-bg="darkMode ? 'rgba(179, 143, 255, 0.2)' : 'rgba(179, 143, 255, 0.1)'">
<i class="fa-solid fa-user" style="margin-right: 0.5rem; color: #b38fff;"></i>Profil
</a>
<a href="{{ url_for('settings') }}" style="display: block; padding: 0.75rem 1rem; text-decoration: none; transition: all 0.25s ease;"
x-bind:style="darkMode
? 'color: rgba(255, 255, 255, 0.9);'
: 'color: rgba(26, 32, 44, 0.9);'"
onmouseover="this.style.backgroundColor = this.getAttribute('data-hover-bg')"
onmouseout="this.style.backgroundColor = 'transparent'"
x-bind:data-hover-bg="darkMode ? 'rgba(179, 143, 255, 0.2)' : 'rgba(179, 143, 255, 0.1)'">
<i class="fa-solid fa-gear" style="margin-right: 0.5rem; color: #b38fff;"></i>Einstellungen
</a>
<div style="margin: 0.5rem 0; height: 1px;" x-bind:style="darkMode ? 'background: rgba(255, 255, 255, 0.1);' : 'background: rgba(0, 0, 0, 0.05);'"></div>
<a href="{{ url_for('logout') }}" style="display: block; padding: 0.75rem 1rem; text-decoration: none; transition: all 0.25s ease;"
x-bind:style="darkMode
? 'color: rgba(255, 255, 255, 0.9);'
: 'color: rgba(26, 32, 44, 0.9);'"
onmouseover="this.style.backgroundColor = this.getAttribute('data-hover-bg')"
onmouseout="this.style.backgroundColor = 'transparent'"
x-bind:data-hover-bg="darkMode ? 'rgba(239, 68, 68, 0.2)' : 'rgba(239, 68, 68, 0.1)'">
<i class="fa-solid fa-right-from-bracket" style="margin-right: 0.5rem; color: #ef4444;"></i>Abmelden
</a>
</div>
<!-- Benutzermenü 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('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-purple-500/30 text-white hover:bg-purple-600/40 shadow-md hover:shadow-lg hover:-translate-y-0.5'
: 'bg-purple-500/20 text-gray-800 hover:bg-purple-500/30 shadow-sm hover:shadow-md hover:-translate-y-0.5'">
<i class="fa-solid fa-right-to-bracket mr-2"></i>Anmelden
</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>
{% else %}
<a href="{{ url_for('login') }}" style="display: flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.75rem; font-weight: 500; text-decoration: none; transition: all 0.25s ease; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);"
x-bind:style="darkMode
? 'background: rgba(179, 143, 255, 0.3); color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);'
: 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);'">
<i class="fa-solid fa-right-to-bracket" style="margin-right: 0.5rem;"></i>Anmelden
</a>
{% endif %}
</div>
</nav>
<!-- Mobile Menü (erscheint, wenn mobileMenuOpen true ist) -->
<!-- Mobile Menü -->
<div x-show="mobileMenuOpen"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-10"
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-10"
style="width: 100%; overflow: hidden; z-index: 90;"
x-bind:style="darkMode
? 'background: rgba(14, 18, 32, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255, 255, 255, 0.1);'
: 'background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid rgba(0, 0, 0, 0.05);'">
<div style="display: flex; flex-direction: column; padding: 1rem;">
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') }}"
style="display: flex; align-items: center; padding: 0.75rem 1rem; margin-bottom: 0.5rem; border-radius: 0.75rem; font-weight: 500; text-decoration: none; transition: all 0.25s ease;"
x-bind:style="darkMode
? '{{ 'background: rgba(179, 143, 255, 0.3); color: white;' if request.endpoint == 'index' else 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}'
: '{{ 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1);' if request.endpoint == 'index' else 'background: transparent; color: rgba(26, 32, 44, 0.9);' }}'">
<i class="fa-solid fa-home" style="margin-right: 0.5rem; width: 1.25rem;"></i>Start
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') }}"
style="display: flex; align-items: center; padding: 0.75rem 1rem; margin-bottom: 0.5rem; border-radius: 0.75rem; font-weight: 500; text-decoration: none; transition: all 0.25s ease;"
x-bind:style="darkMode
? '{{ 'background: rgba(179, 143, 255, 0.3); color: white;' if request.endpoint == 'mindmap' else 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}'
: '{{ 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1);' if request.endpoint == 'mindmap' else 'background: transparent; color: rgba(26, 32, 44, 0.9);' }}'">
<i class="fa-solid fa-diagram-project" style="margin-right: 0.5rem; width: 1.25rem;"></i>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>
{% if current_user.is_authenticated %}
<a href="{{ url_for('profile') }}"
style="display: flex; align-items: center; padding: 0.75rem 1rem; margin-bottom: 0.5rem; border-radius: 0.75rem; font-weight: 500; text-decoration: none; transition: all 0.25s ease;"
x-bind:style="darkMode
? '{{ 'background: rgba(179, 143, 255, 0.3); color: white;' if request.endpoint == 'profile' else 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}'
: '{{ 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1);' if request.endpoint == 'profile' else 'background: transparent; color: rgba(26, 32, 44, 0.9);' }}'">
<i class="fa-solid fa-user" style="margin-right: 0.5rem; width: 1.25rem;"></i>Profil
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-4">
<main class="flex-grow pt-6">
{% block content %}{% endblock %}
</main>
<!-- Footer -->
<footer class="mt-12 py-8 transition-colors duration-300" {# mt-16 changed to mt-12, py-10 changed to py-8 #}
<footer class="mt-12 py-10 transition-colors duration-300 rounded-t-3xl mx-4 sm:mx-6 md:mx-8"
:class="darkMode ? 'glass-morphism' : 'glass-morphism-light'">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center md:items-start">
<div class="mb-8 md:mb-0 text-center md:text-left">
<a href="{{ url_for('index') }}" class="text-2xl font-bold gradient-text">MindMap</a>
<p class="mt-2 text-sm max-w-sm"
<a href="{{ url_for('index') }}" class="text-2xl font-bold gradient-text inline-block transform transition-transform hover:scale-105">MindMap</a>
<p class="mt-3 text-sm max-w-sm"
:class="darkMode ? 'text-gray-400' : 'text-gray-600'">Eine interaktive Plattform zum Visualisieren, Erforschen und Teilen von Wissen.</p>
</div>
<div class="flex flex-wrap justify-center md:justify-start space-x-6 mb-8 md:mb-0">
<div class="flex flex-wrap justify-center md:justify-start space-x-4 sm:space-x-6 mb-8 md:mb-0">
<a href="{{ url_for('impressum') }}"
class="transition-colors text-sm px-3 py-2 rounded-lg"
:class="darkMode ? 'text-gray-400 hover:text-white hover:bg-gray-800/50' : 'text-gray-700 hover:text-gray-900 hover:bg-gray-200/50'">Impressum</a>
class="transition-all duration-200 text-sm px-4 py-2.5 rounded-xl"
:class="darkMode ? 'text-gray-400 hover:text-white hover:bg-purple-600/20 hover:shadow-md' : 'text-gray-700 hover:text-gray-900 hover:bg-purple-500/10 hover:shadow-sm'">
<span class="flex items-center">
<i class="fa-solid fa-info-circle mr-2 opacity-70"></i>
Impressum
</span>
</a>
<a href="{{ url_for('datenschutz') }}"
class="transition-colors text-sm px-3 py-2 rounded-lg"
:class="darkMode ? 'text-gray-400 hover:text-white hover:bg-gray-800/50' : 'text-gray-700 hover:text-gray-900 hover:bg-gray-200/50'">Datenschutz</a>
class="transition-all duration-200 text-sm px-4 py-2.5 rounded-xl"
:class="darkMode ? 'text-gray-400 hover:text-white hover:bg-purple-600/20 hover:shadow-md' : 'text-gray-700 hover:text-gray-900 hover:bg-purple-500/10 hover:shadow-sm'">
<span class="flex items-center">
<i class="fa-solid fa-shield-alt mr-2 opacity-70"></i>
Datenschutz
</span>
</a>
<a href="{{ url_for('agb') }}"
class="transition-colors text-sm px-3 py-2 rounded-lg"
:class="darkMode ? 'text-gray-400 hover:text-white hover:bg-gray-800/50' : 'text-gray-700 hover:text-gray-900 hover:bg-gray-200/50'">AGB</a>
class="transition-all duration-200 text-sm px-4 py-2.5 rounded-xl"
:class="darkMode ? 'text-gray-400 hover:text-white hover:bg-purple-600/20 hover:shadow-md' : 'text-gray-700 hover:text-gray-900 hover:bg-purple-500/10 hover:shadow-sm'">
<span class="flex items-center">
<i class="fa-solid fa-file-contract mr-2 opacity-70"></i>
AGB
</span>
</a>
</div>
<!-- Optional: Social Media Links oder andere Elemente -->
@@ -712,7 +773,7 @@
#}
</div>
<div class="mt-8 pt-6 text-center text-xs" {# mt-10 changed to mt-8 #}
<div class="mt-8 pt-6 text-center text-xs"
:class="darkMode ? 'border-t border-gray-800/50 text-gray-500' : 'border-t border-gray-300/50 text-gray-600'">
&copy; {{ current_year }} MindMap. Alle Rechte vorbehalten.
</div>

138
website/templates/index.html
View File

@@ -83,27 +83,31 @@
<div class="full-page-bg gradient-background"></div>
<!-- Hero Section -->
<section class="relative pt-16 pb-32">
<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="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight mb-8 text-gray-900 dark:text-white">
<span class="gradient-text">Wissen</span> neu
<div class="mt-2">vernetzen</div>
<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-4 justify-center">
<a href="{{ url_for('mindmap') }}" class="btn-primary text-lg px-8 py-4 rounded-lg">
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="{{ url_for('mindmap') }}" class="btn-primary text-lg px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:shadow-purple-500/10">
<span class="flex items-center">
<i class="fa-solid fa-diagram-project mr-3"></i>
<i class="fa-solid fa-diagram-project mr-3 animate-pulse"></i>
Mindmap erkunden
</span>
</a>
{% if not current_user.is_authenticated %}
<a href="{{ url_for('register') }}" class="gradient-btn text-lg px-8 py-4 rounded-lg shadow-lg">
<a href="{{ url_for('register') }}" class="btn-secondary text-lg px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:shadow-blue-500/10">
<span class="flex items-center">
<i class="fa-solid fa-user-plus mr-3 icon-pulse"></i>
Konto erstellen
@@ -117,7 +121,7 @@
<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">MindMap</div>
<div class="text-3xl font-bold gradient-text mb-2 animate-float">MindMap</div>
<div class="text-lg text-gray-700 dark:text-gray-300">WISSEN VERNETZEN</div>
</div>
@@ -126,8 +130,8 @@
<!-- Glossy Nodes and Lines -->
<defs>
<radialGradient id="nodeGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="rgba(64, 128, 255, 0.8)" />
<stop offset="100%" stop-color="rgba(64, 64, 225, 0.4)" />
<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" />
@@ -154,8 +158,8 @@
<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(64,96,255,0.4)" stroke-width="2" />
<line class="animate-pulse" x1="400" y1="350" x2="500" y2="300" stroke="rgba(128,64,255,0.4)" stroke-width="2" />
<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 -->
@@ -179,7 +183,7 @@
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900 dark:text-white">Was ist <span class="gradient-text">MindMap?</span></h2>
<h2 class="section-heading mb-4 text-gray-900 dark:text-white">Was ist <span class="gradient-text">MindMap?</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.
@@ -188,11 +192,11 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature Card 1 -->
<div class="card">
<div class="icon">
<i class="fa-solid fa-brain icon-pulse"></i>
<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>Visualisiere Wissen</h3>
<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.
@@ -200,11 +204,11 @@
</div>
<!-- Feature Card 2 -->
<div class="card">
<div class="icon">
<i class="fa-solid fa-lightbulb icon-pulse"></i>
<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>Teile Gedanken</h3>
<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.
@@ -212,11 +216,11 @@
</div>
<!-- Feature Card 3 -->
<div class="card">
<div class="icon">
<i class="fa-solid fa-users icon-pulse"></i>
<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>Community</h3>
<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.
@@ -224,11 +228,11 @@
</div>
<!-- Feature Card 4 -->
<div class="card">
<div class="icon">
<i class="fa-solid fa-robot icon-pulse"></i>
<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>KI-Assistenz</h3>
<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.
@@ -236,11 +240,11 @@
</div>
<!-- Feature Card 5 -->
<div class="card">
<div class="icon">
<i class="fa-solid fa-search icon-pulse"></i>
<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>Intelligente Suche</h3>
<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.
@@ -248,11 +252,11 @@
</div>
<!-- Feature Card 6 -->
<div class="card">
<div class="icon">
<i class="fa-solid fa-route icon-pulse"></i>
<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>Geführte Pfade</h3>
<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.
@@ -263,18 +267,18 @@
</section>
<!-- Call to Action Section -->
<section class="py-16 relative overflow-hidden">
<section class="py-20 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-8 md:p-12 rounded-lg">
<div class="glass-effect p-8 md:p-12 rounded-3xl transform transition-all duration-500 hover:-translate-y-2 hover:shadow-xl bg-gradient-to-br from-purple-500/10 to-blue-500/10 backdrop-blur-xl border border-white/10">
<div class="md:flex md:items-center md:justify-between">
<div class="md:w-2/3">
<h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">Bereit, Wissen neu zu entdecken?</h2>
<h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">Bereit, <span class="gradient-text">Wissen</span> neu zu entdecken?</h2>
<p class="text-gray-700 dark:text-gray-300 text-lg mb-6 md:mb-0">
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-block btn-primary font-bold py-3 px-8 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
<a href="{{ url_for('mindmap') }}" class="inline-block btn-primary font-bold py-3.5 px-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105">
<span class="flex items-center justify-center">
<i class="fa-solid fa-arrow-right mr-2"></i>
Zur Mindmap
@@ -289,74 +293,78 @@
<!-- Quick Access Section -->
<section class="py-16">
<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">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- KI-Chat -->
<div class="glass-effect p-6 rounded-lg">
<div class="glass-morphism p-8 rounded-3xl transition-all duration-500 hover:-translate-y-3 hover:shadow-xl">
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-800 dark:text-white">
<i class="fa-solid fa-robot text-primary-400 mr-2"></i>
<div class="w-12 h-12 rounded-2xl bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center mr-4 shadow-md">
<i class="fa-solid fa-robot text-white text-lg"></i>
</div>
KI-Assistent
</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6">
Stelle Fragen, lasse dir Themen erklären oder finde neue Verbindungen mit Hilfe
unseres KI-Assistenten.
</p>
<div class="glass-effect p-4 rounded-lg mb-4">
<div class="glass-morphism p-5 rounded-2xl mb-6 transition-all duration-300 hover:shadow-md bg-gradient-to-br from-purple-500/5 to-blue-500/5 border border-white/10">
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center flex-shrink-0 mr-3">
<i class="fa-solid fa-robot text-white text-sm"></i>
<div class="w-10 h-10 rounded-xl bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center flex-shrink-0 mr-3 shadow-md">
<i class="fa-solid fa-robot text-white"></i>
</div>
<div>
<p class="text-sm text-gray-700 dark:text-gray-300">Wie kann ich dir heute helfen?</p>
<div class="mt-3 flex flex-wrap gap-2">
<a href="{{ url_for('mindmap') }}" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 dark:bg-dark-700 dark:hover:bg-dark-600 rounded-full text-xs text-gray-700 dark:text-gray-300 transition">
<div class="mt-4 flex flex-wrap gap-2">
<a href="{{ url_for('mindmap') }}" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
Erkunde die Mindmap
</a>
<a href="{{ url_for('search_thoughts_page') }}" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 dark:bg-dark-700 dark:hover:bg-dark-600 rounded-full text-xs text-gray-700 dark:text-gray-300 transition">
<a href="{{ url_for('search_thoughts_page') }}" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
Themen durchsuchen
</a>
<a href="#" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 dark:bg-dark-700 dark:hover:bg-dark-600 rounded-full text-xs text-gray-700 dark:text-gray-300 transition">
<a href="#" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
Beziehungen erforschen
</a>
</div>
</div>
</div>
</div>
<button onclick="window.MindMap.assistant.toggleAssistant(true)" class="btn-outline w-full text-center rounded-lg">KI-Chat starten</button>
<button onclick="window.MindMap.assistant.toggleAssistant(true)" class="btn-primary w-full text-center rounded-xl py-3.5 shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1">KI-Chat starten</button>
</div>
<!-- Themen-Übersicht -->
<div class="glass-effect p-6 rounded-lg">
<div class="glass-morphism p-8 rounded-3xl transition-all duration-500 hover:-translate-y-3 hover:shadow-xl">
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-800 dark:text-white">
<i class="fa-solid fa-fire text-secondary-400 mr-2"></i>
<div class="w-12 h-12 rounded-2xl bg-gradient-to-r from-violet-500 to-fuchsia-500 flex items-center justify-center mr-4 shadow-md">
<i class="fa-solid fa-fire text-white text-lg"></i>
</div>
Themen-Übersicht
</h3>
<div class="space-y-4 mb-6">
<a href="{{ url_for('mindmap') }}" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition">
<div class="w-2 h-2 rounded-full bg-primary-400 mr-3"></div>
<a href="{{ url_for('mindmap') }}" class="flex items-center 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</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Überblick über Themenbereiche</p>
</div>
<i class="fa-solid fa-chevron-right text-gray-500"></i>
<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 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition">
<div class="w-2 h-2 rounded-full bg-secondary-400 mr-3"></div>
<a href="{{ url_for('search_thoughts_page') }}" class="flex items-center 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</p>
<p class="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"></i>
<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 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition">
<div class="w-2 h-2 rounded-full bg-green-400 mr-3"></div>
<a href="#" class="flex items-center 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</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Beziehungen zwischen Gedanken</p>
</div>
<i class="fa-solid fa-chevron-right text-gray-500"></i>
<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-outline w-full text-center rounded-lg">Alle Themen entdecken</a>
<a href="{{ url_for('search_thoughts_page') }}" class="btn-primary w-full text-center rounded-xl py-3.5">Alle Themen entdecken</a>
</div>
</div>
</div>