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

✨ feat: enhance mindmap functionality and improve user interaction

Browse Source
This commit is contained in:
Marwin
2025-05-06 21:23:29 +01:00
parent 2d083f5c0a
commit 903e095b66
4 changed files with 1297 additions and 1720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

622
templates/mindmap.html
View File

@@ -1,486 +1,228 @@
{% extends "base.html" %}
{% block title %}Mindmap{% endblock %}
{% block title %}Interaktive Mindmap{% endblock %}
{% block extra_css %}
<style>
/* Vollflächige Mindmap-Gestaltung */
html, body {
height: 100%;
overflow-x: hidden;
margin: 0;
padding: 0;
}
/* Container für die vollflächige Mindmap */
.mindmap-fullscreen-container {
position: absolute;
top: 64px; /* Höhe der Navbar */
left: 0;
/* Grundlegendes Layout */
.mindmap-container {
position: relative;
width: 100%;
height: calc(100vh - 64px);
z-index: 1;
background: linear-gradient(135deg, #1a1f2e 0%, #0f172a 100%);
overflow: hidden;
}
/* Cytoscape Container - vollflächig */
/* Hauptcontainer für die Mindmap */
#cy {
width: 100%;
height: 100%;
background-color: #0a0e19; /* Dunkler Hintergrund für Universum */
position: relative;
overflow: hidden;
background: transparent;
}
/* Universum-Hintergrund */
#cy::before {
content: '';
/* Header-Bereich */
.mindmap-header {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(1px, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
radial-gradient(2px, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
radial-gradient(3px, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 60px 60px, 120px 120px, 180px 180px;
background-position: 0 0, 30px 30px, 60px 60px;
pointer-events: none;
z-index: 1;
animation: starsShimmer 60s linear infinite;
}
@keyframes starsShimmer {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}
/* Header-Overlay für Titel und Steuerung */
.mindmap-header-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1rem 2rem;
background: rgba(10, 14, 25, 0.7);
backdrop-filter: blur(5px);
z-index: 5;
padding: 1.5rem;
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Toolbar-Stil für das Universum-Design */
.mindmap-toolbar {
display: flex;
gap: 1rem;
flex-wrap: wrap;
padding: 0.75rem;
background-color: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(8px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
/* Button-Stil */
.mindmap-action-btn {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.7rem;
font-size: 0.8rem;
border-radius: 8px;
background-color: rgba(139, 92, 246, 0.2);
color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(139, 92, 246, 0.4);
cursor: pointer;
transition: all 0.2s ease;
}
.mindmap-action-btn:hover {
background-color: rgba(139, 92, 246, 0.35);
transform: translateY(-1px);
box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
}
/* Info-Panel im Universum-Stil */
.mindmap-info-panel {
position: absolute;
right: 1rem;
top: 5rem;
width: 280px;
background-color: rgba(10, 14, 25, 0.8);
border-radius: 12px;
box-shadow: 0 0 25px rgba(139, 92, 246, 0.3);
border: 1px solid rgba(139, 92, 246, 0.3);
padding: 1.25rem;
color: #f1f5f9;
opacity: 0;
transform: translateX(20px);
transition: all 0.3s ease;
pointer-events: none;
z-index: 10;
backdrop-filter: blur(10px);
}
.mindmap-info-panel.visible {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.info-panel-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(139, 92, 246, 0.3);
color: rgba(255, 255, 255, 0.95);
}
/* Kosmische Knoten-Stile */
.node {
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.node circle {
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
filter: drop-shadow(0 0 8px rgba(var(--node-color, 139, 92, 246), 0.7));
}
.node:hover circle {
filter: drop-shadow(0 0 15px rgba(var(--node-color, 139, 92, 246), 0.9));
}
.node text {
transition: all 0.3s ease;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}
/* Verbindungs-Stil */
.link {
stroke: rgba(255, 255, 255, 0.3);
stroke-dasharray: 5, 5;
stroke-width: 1;
transition: all 0.5s ease;
}
.link:hover {
stroke: rgba(139, 92, 246, 0.7);
stroke-width: 2;
stroke-dasharray: none;
filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.7));
}
/* Seitenleiste schwebend */
.sidebar-container {
position: absolute;
right: 1rem;
top: 120px;
width: 320px;
z-index: 10;
max-height: calc(100vh - 200px);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(139, 92, 246, 0.5) rgba(15, 23, 42, 0.2);
padding-right: 0.5rem;
}
.sidebar-container::-webkit-scrollbar {
width: 6px;
}
.sidebar-container::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.2);
border-radius: 10px;
}
.sidebar-container::-webkit-scrollbar-thumb {
background-color: rgba(139, 92, 246, 0.5);
border-radius: 10px;
}
/* Sidebar-Panel im Universum-Stil */
.sidebar-panel {
background-color: rgba(15, 23, 42, 0.75);
border-radius: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(139, 92, 246, 0.2);
padding: 1.25rem;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.9);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.sidebar-panel:hover {
border-color: rgba(139, 92, 246, 0.4);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(139, 92, 246, 0.3);
transform: translateY(-2px);
}
/* Footer Positionierung ganz unten */
.page-footer {
position: relative;
width: 100%;
margin-top: calc(100vh - 64px); /* Sicherstellen, dass der Footer nach der vollen Höhe kommt */
z-index: 2;
background-color: rgba(10, 14, 25, 0.9);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(139, 92, 246, 0.3);
.mindmap-title {
font-size: 2rem;
font-weight: 700;
color: #fff;
margin: 0;
background: linear-gradient(90deg, #60a5fa, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Kontrollpanel */
.control-panel {
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
background: rgba(15, 23, 42, 0.9);
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 10;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.control-button {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
margin: 0.5rem 0;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 0.5rem;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
}
.control-button:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateX(-5px);
}
.control-button i {
margin-right: 0.75rem;
}
/* Info-Panel */
.info-panel {
position: absolute;
left: 2rem;
top: 50%;
transform: translateY(-50%);
background: rgba(15, 23, 42, 0.9);
border-radius: 1rem;
padding: 1.5rem;
width: 300px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 10;
border: 1px solid rgba(255, 255, 255, 0.1);
opacity: 0;
transform: translateX(-20px);
transition: all 0.3s ease;
}
.info-panel.visible {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.info-title {
font-size: 1.25rem;
font-weight: 600;
color: #fff;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.info-content {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
line-height: 1.6;
}
/* Kategorie-Legende */
.category-legend {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
background: rgba(15, 23, 42, 0.9);
border-radius: 1rem;
padding: 1rem 2rem;
display: flex;
gap: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 10;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.category-item {
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.category-color {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 0.5rem;
}
/* Animationen */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse {
animation: pulse 2s infinite;
}
</style>
{% endblock %}
{% block content %}
<!-- Vollflächige Mindmap -->
<div class="mindmap-fullscreen-container">
<!-- Header-Overlay -->
<div class="mindmap-header-overlay">
<h1 class="text-3xl font-bold mb-2 mystical-glow text-white">
Wissenslandkarte
</h1>
<p class="opacity-80 text-lg text-gray-300">
Visualisiere die Verbindungen zwischen Gedanken und Konzepten
</p>
<div class="mindmap-container">
<!-- Header -->
<div class="mindmap-header">
<h1 class="mindmap-title">Interaktive Wissenslandkarte</h1>
</div>
<!-- Mindmap-Container -->
<div class="mindmap-container">
<!-- Toolbar -->
<div class="mindmap-toolbar">
<button id="fit-btn" class="mindmap-action-btn" title="An Fenstergröße anpassen">
<i class="fa-solid fa-expand"></i>
<span>Anpassen</span>
</button>
<button id="reset-btn" class="mindmap-action-btn" title="Ansicht zurücksetzen">
<i class="fa-solid fa-undo"></i>
<span>Zurücksetzen</span>
</button>
<button id="zoom-in-btn" class="mindmap-action-btn" title="Einzoomen">
<i class="fa-solid fa-magnifying-glass-plus"></i>
<span>Zoom+</span>
</button>
<button id="zoom-out-btn" class="mindmap-action-btn" title="Auszoomen">
<i class="fa-solid fa-magnifying-glass-minus"></i>
<span>Zoom-</span>
</button>
<button id="toggle-labels-btn" class="mindmap-action-btn" title="Labels ein/ausblenden">
<i class="fa-solid fa-tags"></i>
<span>Labels</span>
</button>
<button id="fullscreen-btn" class="mindmap-action-btn" title="Vollbildmodus">
<i class="fa-solid fa-expand"></i>
<span>Vollbild</span>
</button>
</div>
<!-- Hauptvisualisierung -->
<div id="cy"></div>
<!-- Hauptvisualisierung -->
<div id="cy"></div>
<!-- Kontrollpanel -->
<div class="control-panel">
<button class="control-button" id="zoom-in">
<i class="fas fa-search-plus"></i> Einzoomen
</button>
<button class="control-button" id="zoom-out">
<i class="fas fa-search-minus"></i> Auszoomen
</button>
<button class="control-button" id="reset-view">
<i class="fas fa-compress-arrows-alt"></i> Ansicht zurücksetzen
</button>
<button class="control-button" id="toggle-legend">
<i class="fas fa-layer-group"></i> Legende ein/aus
</button>
</div>
<!-- Info-Panel -->
<div id="node-info-panel" class="mindmap-info-panel">
<h4 class="info-panel-title">Knoteninfo</h4>
<p id="node-description" class="info-panel-description">Wählen Sie einen Knoten aus...</p>
<div class="node-navigation">
<h5 class="node-navigation-title">Verknüpfte Knoten</h5>
<div id="connected-nodes" class="node-links">
<!-- Wird dynamisch befüllt -->
</div>
</div>
<!-- Info-Panel -->
<div class="info-panel" id="node-info">
<h3 class="info-title">Knoteninformationen</h3>
<div class="info-content">
<p>Wählen Sie einen Knoten aus, um Details anzuzeigen.</p>
</div>
</div>
<!-- Schwebende Seitenleiste -->
<div class="sidebar-container">
<!-- Nutzungsinfo -->
<div class="sidebar-panel" data-sidebar="about-mindmap">
<h3 class="text-xl font-semibold mb-3 text-white">
<i class="fa-solid fa-circle-info text-purple-400 mr-2"></i>Über die Mindmap
</h3>
<div class="text-gray-300">
<p class="mb-2">Die interaktive Wissenslandkarte zeigt Verbindungen zwischen verschiedenen Gedanken und Konzepten.</p>
<p class="mb-2">Sie können:</p>
<ul class="list-disc pl-5 space-y-1 text-sm">
<li>Knoten auswählen, um Details zu sehen</li>
<li>Zoomen (Mausrad oder Pinch-Geste)</li>
<li>Die Karte verschieben (Drag & Drop)</li>
<li>Die Toolbar nutzen für weitere Aktionen</li>
</ul>
</div>
<!-- Kategorie-Legende -->
<div class="category-legend">
<div class="category-item">
<span class="category-color" style="background: #60a5fa;"></span>
Philosophie
</div>
<!-- Kategorienlegende -->
<div class="sidebar-panel" data-sidebar="categories">
<h3 class="text-xl font-semibold mb-3 text-white">
<i class="fa-solid fa-palette text-purple-400 mr-2"></i>Kategorien
</h3>
<div id="category-legend" class="space-y-2 text-sm text-gray-300">
<!-- Wird dynamisch befüllt -->
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-indigo-600 mr-2 glow-effect"></span> Philosophie</div>
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-emerald-600 mr-2 glow-effect"></span> Wissenschaft</div>
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-indigo-500 mr-2 glow-effect"></span> Technologie</div>
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-violet-500 mr-2 glow-effect"></span> Künste</div>
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-cyan-700 mr-2 glow-effect"></span> Psychologie</div>
</div>
<div class="category-item">
<span class="category-color" style="background: #8b5cf6;"></span>
Wissenschaft
</div>
<!-- Knotenbeschreibung -->
<div class="sidebar-panel hidden" data-sidebar="node-description">
<h3 class="text-xl font-semibold mb-3 text-white" data-node-title>
Knotenbeschreibung
</h3>
<div class="space-y-3 text-gray-300">
<p class="text-sm leading-relaxed" data-node-description>
Wählen Sie einen Knoten in der Mindmap aus, um dessen Beschreibung hier anzuzeigen.
</p>
<div class="pt-2 mt-2 border-t border-slate-700/50">
<button class="text-xs px-3 py-1.5 rounded bg-indigo-900/30 text-indigo-300 hover:bg-indigo-800/40 transition-colors"
onclick="window.mindmapInstance && window.mindmapInstance.selectedNode && window.mindmapInstance.centerNodeInView(window.mindmapInstance.selectedNode)">
<i class="fa-solid fa-crosshairs mr-1"></i> Knoten zentrieren
</button>
</div>
</div>
<div class="category-item">
<span class="category-color" style="background: #10b981;"></span>
Technologie
</div>
<!-- Meine Mindmaps -->
{% if current_user.is_authenticated %}
<div class="sidebar-panel">
<h3 class="text-xl font-semibold mb-3 text-white">
<i class="fa-solid fa-map text-purple-400 mr-2"></i>Meine Mindmaps
</h3>
<div class="mb-3">
<a href="{{ url_for('create_mindmap') }}" class="w-full inline-block py-2 px-4 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-center text-sm font-medium transition-colors">
<i class="fa-solid fa-plus mr-1"></i> Neue Mindmap erstellen
</a>
</div>
<div class="space-y-2 max-h-60 overflow-y-auto text-gray-300">
{% if user_mindmaps %}
{% for mindmap in user_mindmaps %}
<a href="{{ url_for('user_mindmap', mindmap_id=mindmap.id) }}" class="block p-2 hover:bg-purple-500/20 rounded-lg transition-colors">
<div class="text-sm font-medium">{{ mindmap.name }}</div>
<div class="text-xs opacity-70">{{ mindmap.nodes|length }} Knoten</div>
</a>
{% endfor %}
{% else %}
<p class="text-sm italic">Sie haben noch keine eigenen Mindmaps erstellt.</p>
{% endif %}
</div>
<div class="category-item">
<span class="category-color" style="background: #f59e0b;"></span>
Künste
</div>
<div class="category-item">
<span class="category-color" style="background: #ef4444;"></span>
Psychologie
</div>
{% endif %}
</div>
</div>
<!-- Footer - Position ganz unten -->
<footer class="page-footer py-6 px-4">
<div class="container mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<p class="text-sm text-gray-400">&copy; 2023 Systades. Alle Rechte vorbehalten.</p>
</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">
<i class="fab fa-github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
</div>
</footer>
{% endblock %}
{% block extra_js %}
<!-- Cytoscape -->
<script src="{{ url_for('static', filename='js/cytoscape.min.js') }}"></script>
<!-- Mindmap initialisierung -->
<script src="{{ url_for('static', filename='js/mindmap-init.js') }}"></script>
<!-- Update Mindmap mit wissenschaftlichen Knoten -->
<script src="{{ url_for('static', filename='js/update_mindmap.js') }}"></script>
<!-- Verbesserte Interaktion -->
<script src="{{ url_for('static', filename='js/mindmap-interaction.js') }}"></script>
<!-- Universum-Stil für Mindmap -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Spezielle Anpassungen für das Universum-Design
if (window.cy) {
// Planeteneffekt für Knoten hinzufügen
cy.style()
.selector('node')
.style({
'width': 'mapData(score, 0, 10, 30, 80)',
'height': 'mapData(score, 0, 10, 30, 80)',
'background-color': 'data(color)',
'border-width': 2,
'border-color': 'white',
'border-opacity': 0.3,
'box-shadow': '0 0 15px 2px #8b5cf6',
'text-outline-width': 2,
'text-outline-color': '#0a0e19',
'text-outline-opacity': 0.9,
'font-size': 12
})
.selector('edge')
.style({
'width': 1.5,
'line-color': 'rgba(255, 255, 255, 0.3)',
'line-style': 'dashed',
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'target-arrow-color': 'rgba(255, 255, 255, 0.6)',
'arrow-scale': 0.7
})
.selector(':selected')
.style({
'border-width': 4,
'border-color': '#f8f32b',
'border-opacity': 0.8,
'box-shadow': '0 0 20px 5px #f8f32b'
})
.update();
// Glow-Effekt und Bewegung für Universum-Look
cy.nodes().forEach(node => {
// Zufällige "Planeten"-Größe basierend auf Typ
const score = Math.floor(Math.random() * 10) + 1;
node.data('score', score);
// Subtile Animation für Schwebeeffekt
const originalPos = node.position();
setInterval(() => {
const offsetX = (Math.random() - 0.5) * 2;
const offsetY = (Math.random() - 0.5) * 2;
node.animate({
position: { x: originalPos.x + offsetX, y: originalPos.y + offsetY },
duration: 3000,
easing: 'ease-in-out',
complete: function() {
node.animate({
position: { x: originalPos.x, y: originalPos.y },
duration: 3000,
easing: 'ease-in-out'
});
}
});
}, 8000);
});
}
});
</script>
{% endblock %}