265 lines
8.7 KiB
HTML
265 lines
8.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Mindmap{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* Spezifische Stile für die Mindmap-Seite */
|
|
#cy {
|
|
width: 100%;
|
|
height: 600px;
|
|
background-color: var(--bg-secondary);
|
|
transition: background-color 0.3s ease;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.mindmap-container {
|
|
position: relative;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.dark .mindmap-container {
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.mindmap-toolbar {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
padding: 0.75rem;
|
|
background-color: var(--bg-secondary);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
body:not(.dark) .mindmap-toolbar {
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.875rem;
|
|
border-radius: 0.375rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.category-filters {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
padding: 0.75rem;
|
|
background-color: var(--bg-secondary);
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.category-filter {
|
|
border: none;
|
|
border-radius: 0.25rem;
|
|
padding: 0.25rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
color: white;
|
|
}
|
|
|
|
.category-filter:not(.active) {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.category-filter:hover:not(.active) {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Kontextmenü */
|
|
#context-menu {
|
|
position: absolute;
|
|
border-radius: 0.375rem;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dark #context-menu {
|
|
background-color: #232837;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
body:not(.dark) #context-menu {
|
|
background-color: white;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
#context-menu .menu-item {
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.dark #context-menu .menu-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
body:not(.dark) #context-menu .menu-item:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Zusätzliches Layout */
|
|
.mindmap-section {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.mindmap-section {
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="flex flex-col lg:flex-row gap-8">
|
|
<!-- Hauptinhalt -->
|
|
<div class="w-full lg:w-3/4">
|
|
<!-- Mindmap-Titelbereich -->
|
|
<div class="mb-6">
|
|
<h1 class="text-3xl font-bold mb-2 mystical-glow"
|
|
x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
|
|
Wissenslandkarte
|
|
</h1>
|
|
<p class="opacity-80 text-lg"
|
|
x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
|
|
Visualisiere die Verbindungen zwischen Gedanken und Konzepten
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Mindmap-Container -->
|
|
<div class="mindmap-container">
|
|
<!-- Toolbar -->
|
|
<div class="mindmap-toolbar">
|
|
<button id="fit-btn" class="mindmap-action-btn">
|
|
<i class="fa-solid fa-expand"></i>
|
|
<span>Ansicht anpassen</span>
|
|
</button>
|
|
<button id="reset-btn" class="mindmap-action-btn">
|
|
<i class="fa-solid fa-undo"></i>
|
|
<span>Zurücksetzen</span>
|
|
</button>
|
|
<button id="toggle-labels-btn" class="mindmap-action-btn">
|
|
<i class="fa-solid fa-tags"></i>
|
|
<span>Labels ein/aus</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Hauptvisualisierung -->
|
|
<div id="cy"></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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Seitenleiste -->
|
|
<div class="w-full lg:w-1/4 space-y-6">
|
|
<!-- Nutzlänge -->
|
|
<div class="p-5 rounded-lg overflow-hidden border transition-colors duration-300"
|
|
x-bind:class="darkMode ? 'bg-slate-800/40 border-slate-700/50' : 'bg-white border-slate-200'">
|
|
<h3 class="text-xl font-semibold mb-3"
|
|
x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
|
|
<i class="fa-solid fa-circle-info text-purple-400 mr-2"></i>Über die Mindmap
|
|
</h3>
|
|
<div x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Kategorienlegende -->
|
|
<div class="p-5 rounded-lg overflow-hidden border transition-colors duration-300"
|
|
x-bind:class="darkMode ? 'bg-slate-800/40 border-slate-700/50' : 'bg-white border-slate-200'">
|
|
<h3 class="text-xl font-semibold mb-3"
|
|
x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
|
|
<i class="fa-solid fa-palette text-purple-400 mr-2"></i>Kategorien
|
|
</h3>
|
|
<div id="category-legend" class="space-y-2 text-sm"
|
|
x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
|
|
<!-- Wird dynamisch befüllt -->
|
|
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-purple-500 mr-2"></span> Philosophie</div>
|
|
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span> Wissenschaft</div>
|
|
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-orange-500 mr-2"></span> Technologie</div>
|
|
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-pink-500 mr-2"></span> Künste</div>
|
|
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-blue-500 mr-2"></span> Psychologie</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Meine Mindmaps -->
|
|
{% if current_user.is_authenticated %}
|
|
<div class="p-5 rounded-lg overflow-hidden border transition-colors duration-300"
|
|
x-bind:class="darkMode ? 'bg-slate-800/40 border-slate-700/50' : 'bg-white border-slate-200'">
|
|
<h3 class="text-xl font-semibold mb-3"
|
|
x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
|
|
<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"
|
|
x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
|
|
{% 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>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Sobald die Seite und die Scripte geladen sind, initialisiere die Mindmap
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (window.MindMap && window.MindMap.pageInitializers && window.MindMap.pageInitializers.mindmap) {
|
|
window.MindMap.pageInitializers.mindmap();
|
|
} else {
|
|
console.error('Mindmap-Initialisierung konnte nicht gefunden werden!');
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |