498 lines
12 KiB
HTML
498 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Interaktive Mindmap{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/src/mindmap.css') }}">
|
|
<style>
|
|
/* Grundlegendes Layout */
|
|
.mindmap-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: calc(100vh - 64px);
|
|
background: linear-gradient(135deg, #1a1f2e 0%, #0f172a 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Hauptcontainer für die Mindmap */
|
|
#cy {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Header-Bereich */
|
|
.mindmap-header {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 1.5rem;
|
|
background: rgba(15, 23, 42, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
z-index: 10;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Aktionsmenü im Header */
|
|
.mindmap-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.action-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 0.5rem;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.action-button:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.action-button.primary {
|
|
background: rgba(139, 92, 246, 0.3);
|
|
}
|
|
|
|
.action-button.primary:hover {
|
|
background: rgba(139, 92, 246, 0.5);
|
|
}
|
|
|
|
.action-button.danger {
|
|
background: rgba(220, 38, 38, 0.3);
|
|
}
|
|
|
|
.action-button.danger:hover {
|
|
background: rgba(220, 38, 38, 0.5);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* CRUD Panel */
|
|
.crud-panel {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(15, 23, 42, 0.9);
|
|
border-radius: 1rem;
|
|
padding: 1rem;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
z-index: 10;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.crud-button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 0.75rem;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.crud-button:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.crud-button i {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.crud-button span {
|
|
font-size: 0.7rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.crud-button.create {
|
|
background: rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.crud-button.create:hover {
|
|
background: rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
.crud-button.edit {
|
|
background: rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
.crud-button.edit:hover {
|
|
background: rgba(245, 158, 11, 0.5);
|
|
}
|
|
|
|
.crud-button.delete {
|
|
background: rgba(220, 38, 38, 0.3);
|
|
}
|
|
|
|
.crud-button.delete:hover {
|
|
background: rgba(220, 38, 38, 0.5);
|
|
}
|
|
|
|
.crud-button.save {
|
|
background: rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.crud-button.save:hover {
|
|
background: rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Ladeanzeige */
|
|
.loader {
|
|
border: 4px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
border-top: 4px solid #60a5fa;
|
|
width: 40px;
|
|
height: 40px;
|
|
animation: spin 1s linear infinite;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -20px;
|
|
margin-left: -20px;
|
|
z-index: 5;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Status-Meldung */
|
|
.status-message {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(15, 23, 42, 0.9);
|
|
padding: 1rem 2rem;
|
|
border-radius: 0.5rem;
|
|
color: white;
|
|
font-size: 1rem;
|
|
z-index: 15;
|
|
text-align: center;
|
|
max-width: 80%;
|
|
}
|
|
|
|
/* Bearbeitungsmodus-Hinweis */
|
|
.edit-mode-indicator {
|
|
position: fixed;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
background: rgba(245, 158, 11, 0.8);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.9rem;
|
|
z-index: 1000;
|
|
display: none;
|
|
}
|
|
|
|
.edit-mode-indicator.active {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Kontext-Menü */
|
|
.context-menu {
|
|
position: absolute;
|
|
background: rgba(30, 41, 59, 0.95);
|
|
border-radius: 8px;
|
|
padding: 8px 0;
|
|
min-width: 160px;
|
|
z-index: 2000;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.context-menu-item {
|
|
padding: 8px 16px;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.context-menu-item:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="mindmap-container">
|
|
<!-- Header -->
|
|
<div class="mindmap-header">
|
|
<h1 class="mindmap-title">Interaktive Wissenslandkarte</h1>
|
|
|
|
<!-- Aktionsmenü -->
|
|
<div class="mindmap-actions">
|
|
<button id="toggleEditMode" class="action-button primary">
|
|
<i class="fas fa-edit"></i>
|
|
<span>Bearbeiten</span>
|
|
</button>
|
|
<button id="saveChanges" class="action-button" style="display: none;">
|
|
<i class="fas fa-save"></i>
|
|
<span>Speichern</span>
|
|
</button>
|
|
<button id="cancelEdit" class="action-button danger" style="display: none;">
|
|
<i class="fas fa-times"></i>
|
|
<span>Abbrechen</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ladeanzeige -->
|
|
<div id="loader" class="loader"></div>
|
|
|
|
<!-- Status-Meldung -->
|
|
<div id="statusMessage" class="status-message" style="display: none;">Lade Mindmap...</div>
|
|
|
|
<!-- Bearbeitungsmodus-Hinweis -->
|
|
<div id="editModeIndicator" class="edit-mode-indicator">
|
|
<i class="fas fa-pencil-alt"></i>
|
|
<span>Bearbeitungsmodus</span>
|
|
</div>
|
|
|
|
<!-- Hauptvisualisierung -->
|
|
<div id="cy"></div>
|
|
|
|
<!-- Kontrollpanel -->
|
|
<div class="control-panel">
|
|
<button id="zoomIn" class="control-button">
|
|
<i class="fas fa-search-plus"></i>
|
|
<span>Vergrößern</span>
|
|
</button>
|
|
<button id="zoomOut" class="control-button">
|
|
<i class="fas fa-search-minus"></i>
|
|
<span>Verkleinern</span>
|
|
</button>
|
|
<button id="resetView" class="control-button">
|
|
<i class="fas fa-sync"></i>
|
|
<span>Zurücksetzen</span>
|
|
</button>
|
|
<button id="toggleLegend" class="control-button">
|
|
<i class="fas fa-layer-group"></i>
|
|
<span>Legende</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- CRUD Buttons (anfänglich ausgeblendet) -->
|
|
<div id="crudPanel" class="crud-panel" style="display: none;">
|
|
<button id="createNode" class="crud-button create">
|
|
<i class="fas fa-plus-circle"></i>
|
|
<span>Knoten erstellen</span>
|
|
</button>
|
|
<button id="createEdge" class="crud-button create">
|
|
<i class="fas fa-link"></i>
|
|
<span>Verbindung</span>
|
|
</button>
|
|
<button id="editNode" class="crud-button edit" disabled>
|
|
<i class="fas fa-edit"></i>
|
|
<span>Bearbeiten</span>
|
|
</button>
|
|
<button id="deleteElement" class="crud-button delete" disabled>
|
|
<i class="fas fa-trash-alt"></i>
|
|
<span>Löschen</span>
|
|
</button>
|
|
<button id="saveMindmap" class="crud-button save">
|
|
<i class="fas fa-save"></i>
|
|
<span>Speichern</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Info-Panel -->
|
|
<div id="infoPanel" class="info-panel">
|
|
<h3 class="info-title">Knotendetails</h3>
|
|
<div class="info-content"></div>
|
|
</div>
|
|
|
|
<!-- Kategorie-Legende -->
|
|
<div id="categoryLegend" class="category-legend">
|
|
<div class="category-item">
|
|
<div class="category-color" style="background-color: #9F7AEA;"></div>
|
|
<span>Philosophie</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-color" style="background-color: #60A5FA;"></div>
|
|
<span>Wissenschaft</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-color" style="background-color: #10B981;"></div>
|
|
<span>Technologie</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-color" style="background-color: #F59E0B;"></div>
|
|
<span>Künste</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-color" style="background-color: #EF4444;"></div>
|
|
<span>Psychologie</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<!-- Cytoscape und Erweiterungen -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-cose-bilkent/4.1.0/cytoscape-cose-bilkent.min.js"></script>
|
|
|
|
<!-- Unsere JavaScript-Dateien -->
|
|
<script src="{{ url_for('static', filename='js/update_mindmap.js') }}"></script>
|
|
|
|
<!-- Initialisierung -->
|
|
<script>
|
|
// DOM-Ready-Event - die Initialisierung erfolgt durch den startMindmapApp()-Aufruf
|
|
// in der update_mindmap.js
|
|
</script>
|
|
{% endblock %} |