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

🎨 feat: update mindmap templates and JS module for improved UI design

Browse Source
This commit is contained in:
Till Tomczak
2025-05-01 16:11:42 +02:00
parent 4982cddeef
commit c74d3164bb
3 changed files with 521 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
templates/mindmap.html
View File

@@ -126,162 +126,140 @@
{% endblock %}
{% block content %}
<div class="container mx-auto px-4">
<div class="mb-8">
<h1 class="text-3xl font-bold mb-2 gradient-text">Interaktive Mindmap</h1>
<p class="text-gray-500 dark:text-gray-400">Visualisieren und erkunden Sie Wissensnetze und Gedankenkonstrukte</p>
</div>
<div class="mindmap-section">
<!-- Linke Spalte: Mindmap -->
<div class="mindmap-container">
<!-- Suchleiste -->
<div class="mindmap-toolbar">
<div class="flex-1">
<input type="text" id="search-mindmap"
class="w-full max-w-md px-3 py-2 rounded-lg"
x-bind:class="darkMode ? 'bg-gray-800 border border-gray-700 text-white' : 'bg-white border border-gray-300 text-gray-700'"
placeholder="In der Mindmap suchen...">
</div>
<button id="addNode" class="btn"
x-bind:class="darkMode ? 'bg-primary-600 hover:bg-primary-700 text-white' : 'bg-primary-500 hover:bg-primary-600 text-white'">
<i class="fa-solid fa-plus"></i>
<span class="hidden sm:inline">Knoten hinzufügen</span>
</button>
<button id="addEdge" class="btn"
x-bind:class="darkMode ? 'bg-primary-600 hover:bg-primary-700 text-white' : 'bg-primary-500 hover:bg-primary-600 text-white'">
<i class="fa-solid fa-link"></i>
<span class="hidden sm:inline">Verbindung</span>
</button>
<button id="reLayout" class="btn"
x-bind:class="darkMode ? 'bg-gray-700 hover:bg-gray-600 text-white' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'">
<i class="fa-solid fa-compass-drafting"></i>
<span class="hidden sm:inline">Anordnen</span>
</button>
<div class="relative" x-data="{ open: false }">
<button @click="open = !open" class="btn"
x-bind:class="darkMode ? 'bg-gray-700 hover:bg-gray-600 text-white' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'">
<i class="fa-solid fa-ellipsis-vertical"></i>
<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 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-48 origin-top-right z-10 rounded-md shadow-lg"
x-bind:class="darkMode ? 'bg-gray-800' : 'bg-white'">
<div class="py-1">
<button id="editNode" class="block w-full text-left px-4 py-2 text-sm hover:bg-gray-700"
x-bind:class="darkMode ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-700 hover:bg-gray-100'">
<i class="fa-solid fa-edit mr-2"></i>Knoten bearbeiten
</button>
<button id="deleteNode" class="block w-full text-left px-4 py-2 text-sm hover:bg-red-600/20"
x-bind:class="darkMode ? 'text-gray-300 hover:bg-red-600/20' : 'text-gray-700 hover:bg-red-100'">
<i class="fa-solid fa-trash-alt mr-2"></i>Knoten löschen
</button>
<button id="deleteEdge" class="block w-full text-left px-4 py-2 text-sm hover:bg-red-600/20"
x-bind:class="darkMode ? 'text-gray-300 hover:bg-red-600/20' : 'text-gray-700 hover:bg-red-100'">
<i class="fa-solid fa-unlink mr-2"></i>Verbindung löschen
</button>
<button id="exportMindmap" class="block w-full text-left px-4 py-2 text-sm"
x-bind:class="darkMode ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-700 hover:bg-gray-100'">
<i class="fa-solid fa-file-export mr-2"></i>Exportieren
</button>
<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>
<!-- Kategoriefilter -->
<div id="category-filters" class="category-filters"></div>
<!-- Mindmap-Visualisierung -->
<div id="cy"></div>
</div>
<!-- Rechte Spalte: Detail-Ansicht und Interaktionen -->
<div class="space-y-6">
<!-- Knoteninformationen -->
<div class="card p-5"
x-bind:class="darkMode ? 'bg-gray-800/80 border border-gray-700' : 'bg-white/90 border border-gray-200'">
<h2 class="text-xl font-semibold mb-3"
<!-- 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 mr-2"></i>Information
</h2>
<div id="node-details">
<p class="text-sm"
x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
Wählen Sie einen Knoten aus der Mindmap aus, um Details anzuzeigen.
</p>
<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>
<!-- Verbundene Gedanken -->
<div class="card p-5"
x-bind:class="darkMode ? 'bg-gray-800/80 border border-gray-700' : 'bg-white/90 border border-gray-200'">
<div class="flex justify-between items-center mb-3">
<h2 class="text-xl font-semibold"
x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
<i class="fa-solid fa-lightbulb mr-2"></i>Gedanken
</h2>
<button class="btn-sm"
x-bind:class="darkMode ? 'bg-primary-600 hover:bg-primary-700 text-white' : 'bg-primary-500 hover:bg-primary-600 text-white'">
<i class="fa-solid fa-plus mr-1"></i>Neu
</button>
</div>
<div id="thoughts-container">
<p class="text-sm"
x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
Wählen Sie einen Knoten aus, um zugehörige Gedanken zu sehen.
</p>
</div>
</div>
<!-- Schnellhilfe -->
<div class="card p-5"
x-bind:class="darkMode ? 'bg-gray-800/80 border border-gray-700' : 'bg-white/90 border border-gray-200'">
<h2 class="text-xl font-semibold mb-3"
<!-- 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-circle-question mr-2"></i>Schnellhilfe
</h2>
<ul class="text-sm space-y-2"
x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
<li><i class="fa-solid fa-mouse mr-2"></i>Klicken Sie auf einen Knoten, um ihn auszuwählen</li>
<li><i class="fa-solid fa-arrows-up-down-left-right mr-2"></i>Ziehen Sie die Maus, um die Ansicht zu verschieben</li>
<li><i class="fa-solid fa-magnifying-glass-plus mr-2"></i>Mausrad zum Zoomen</li>
<li><i class="fa-solid fa-right-click mr-2"></i>Rechtsklick für Kontextmenü</li>
</ul>
<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>
<!-- Cytoscape.js für die Mindmap-Visualisierung -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
<!-- Socket.IO für Echtzeitaktualisierungen -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
{% endblock %}
{% block scripts %}
{% block extra_js %}
<script>
// Sobald die Seite und die Scripte geladen sind, initialisiere die Mindmap
document.addEventListener('DOMContentLoaded', function() {
// Verarbeite Dark-Mode-Umschaltungen für die Mindmap-Visualisierung
document.addEventListener('darkModeToggled', function(event) {
// Hier könnten wir das Mindmap-Styling basierend auf Dark/Light-Mode aktualisieren
// z.B. Hintergrundfarben, Knotenfarben etc.
console.log('Dark Mode für Mindmap aktualisiert:', event.detail.isDark);
});
// Weitere Mindmap-spezifische Initialisierung
// Sollte mit dem vorhandenen mindmap.js-Modul funktionieren
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 %}