340 lines
8.8 KiB
HTML
340 lines
8.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Interaktive Mindmap{% endblock %}
|
|
|
|
{% block extra_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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 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%;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="mindmap-container">
|
|
<!-- Header -->
|
|
<div class="mindmap-header">
|
|
<h1 class="mindmap-title">Interaktive Wissenslandkarte</h1>
|
|
</div>
|
|
|
|
<!-- Ladeanzeige -->
|
|
<div id="loader" class="loader"></div>
|
|
|
|
<!-- Status-Meldung -->
|
|
<div id="statusMessage" class="status-message" style="display: none;">Lade Mindmap...</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>
|
|
|
|
<!-- 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>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('DOMContentLoaded Event ausgelöst');
|
|
|
|
const cyContainer = document.getElementById('cy');
|
|
const loader = document.getElementById('loader');
|
|
const statusMessage = document.getElementById('statusMessage');
|
|
|
|
if (cyContainer) {
|
|
console.log('Container gefunden:', cyContainer);
|
|
|
|
// Loader und Statusmeldung anzeigen
|
|
loader.style.display = 'block';
|
|
statusMessage.textContent = 'Lade Mindmap...';
|
|
statusMessage.style.display = 'block';
|
|
|
|
// Prüfen, ob Cytoscape vorhanden ist
|
|
if (typeof cytoscape !== 'undefined') {
|
|
console.log('Cytoscape ist verfügbar');
|
|
|
|
// Initialisieren der Mindmap
|
|
initializeMindmap().then(() => {
|
|
// Erfolg: Loader und Statusmeldung ausblenden
|
|
loader.style.display = 'none';
|
|
statusMessage.style.display = 'none';
|
|
}).catch(error => {
|
|
// Fehler: Fehlermeldung anzeigen
|
|
console.error('Mindmap-Initialisierung fehlgeschlagen', error);
|
|
loader.style.display = 'none';
|
|
statusMessage.textContent = 'Mindmap konnte nicht initialisiert werden: ' + error.message;
|
|
statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
|
|
statusMessage.style.display = 'block';
|
|
});
|
|
} else {
|
|
console.error('Cytoscape ist nicht verfügbar');
|
|
loader.style.display = 'none';
|
|
statusMessage.textContent = 'Cytoscape-Bibliothek konnte nicht geladen werden';
|
|
statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
|
|
statusMessage.style.display = 'block';
|
|
}
|
|
} else {
|
|
console.error('Container #cy nicht gefunden');
|
|
}
|
|
|
|
// Zoom-Funktionen
|
|
document.getElementById('zoomIn').addEventListener('click', function() {
|
|
if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
|
|
});
|
|
|
|
document.getElementById('zoomOut').addEventListener('click', function() {
|
|
if (window.cy) window.cy.zoom(window.cy.zoom() * 0.8);
|
|
});
|
|
|
|
document.getElementById('resetView').addEventListener('click', function() {
|
|
if (window.cy) window.cy.fit();
|
|
});
|
|
|
|
document.getElementById('toggleLegend').addEventListener('click', function() {
|
|
const legend = document.getElementById('categoryLegend');
|
|
legend.style.display = legend.style.display === 'none' ? 'flex' : 'none';
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |