320 lines
12 KiB
HTML
320 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Meine Merkliste{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* Hintergrund über die gesamte Seite erstrecken */
|
|
html, body {
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.personal-mindmap-container {
|
|
width: 100%;
|
|
height: 400px;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
border-radius: 1rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dark .personal-mindmap-container {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.bookmark-item {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.bookmark-item:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.dark .empty-state {
|
|
background-color: rgba(255, 255, 255, 0.03);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hauptbereich -->
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 pb-12">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
<span class="gradient-text">Meine Merkliste</span>
|
|
</h1>
|
|
<p class="text-lg text-gray-700 dark:text-gray-300">
|
|
Deine persönliche Sammlung gemerkter Wissensbereiche und Beiträge
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Persönliche Mindmap -->
|
|
<div class="mb-12">
|
|
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 flex items-center">
|
|
<i class="fas fa-project-diagram mr-3 text-purple-500"></i>
|
|
Meine Mindmap
|
|
</h2>
|
|
|
|
<div id="personal-mindmap" class="personal-mindmap-container glass-morphism">
|
|
<div id="empty-mindmap-message" class="absolute inset-0 flex items-center justify-center">
|
|
<div class="text-center p-6">
|
|
<div class="text-6xl mb-4 opacity-20">
|
|
<i class="fas fa-bookmark"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-2 text-gray-700 dark:text-gray-300">Deine persönliche Mindmap ist leer</h3>
|
|
<p class="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
|
|
Merke dir Wissensbereiche und Gedanken in der Hauptmindmap, um deine persönliche Mindmap zu erstellen.
|
|
</p>
|
|
<a href="{{ url_for('mindmap') }}" class="mt-4 inline-block px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors">
|
|
Zur Mindmap
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gemerkte Inhalte -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
|
|
<!-- Wissensbereiche -->
|
|
<div>
|
|
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 flex items-center">
|
|
<i class="fas fa-folder-open mr-3 text-blue-500"></i>
|
|
Gemerkte Wissensbereiche
|
|
</h2>
|
|
|
|
<div id="bookmarked-areas-container" class="space-y-4">
|
|
<!-- Ladezustand -->
|
|
<div class="animate-pulse space-y-4">
|
|
<div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
|
<div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
|
<div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gedanken -->
|
|
<div>
|
|
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 flex items-center">
|
|
<i class="fas fa-lightbulb mr-3 text-amber-500"></i>
|
|
Gemerkte Gedanken
|
|
</h2>
|
|
|
|
<div id="bookmarked-thoughts-container" class="space-y-4">
|
|
<!-- Ladezustand -->
|
|
<div class="animate-pulse space-y-4">
|
|
<div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
|
<div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
|
<div class="h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript für persönliche Mindmap -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Lade gespeicherte Bookmarks aus dem LocalStorage
|
|
function loadBookmarkedNodes() {
|
|
try {
|
|
const bookmarked = localStorage.getItem('bookmarkedNodes');
|
|
return bookmarked ? JSON.parse(bookmarked) : [];
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der gemerkten Knoten:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
const bookmarkedNodeIds = loadBookmarkedNodes();
|
|
|
|
// Prüfe, ob es gemerkte Knoten gibt
|
|
if (bookmarkedNodeIds && bookmarkedNodeIds.length > 0) {
|
|
// Verstecke die Leer-Nachricht
|
|
document.getElementById('empty-mindmap-message').style.display = 'none';
|
|
|
|
// Initialisiere die persönliche Mindmap
|
|
const personalMindmap = new MindMapVisualization('#personal-mindmap', {
|
|
width: document.getElementById('personal-mindmap').clientWidth,
|
|
height: 400,
|
|
nodeRadius: 18,
|
|
selectedNodeRadius: 22,
|
|
linkDistance: 120,
|
|
chargeStrength: -800,
|
|
centerForce: 0.1,
|
|
tooltipEnabled: true
|
|
});
|
|
|
|
// Lade Daten für die Mindmap - hier müssten wir normalerweise die API nutzen,
|
|
// aber als Fallback laden wir die Standarddaten und filtern sie
|
|
window.setTimeout(() => {
|
|
// Wenn die Hauptmindmap geladen ist, können wir deren Daten verwenden
|
|
if (window.mindmapInstance) {
|
|
// Filtere nur gemerkte Knoten und ihre Verbindungen
|
|
const nodes = window.mindmapInstance.nodes.filter(node =>
|
|
bookmarkedNodeIds.includes(node.id)
|
|
);
|
|
|
|
// Finde Verbindungen zwischen den gemerkten Knoten
|
|
const links = window.mindmapInstance.links.filter(link =>
|
|
bookmarkedNodeIds.includes(link.source.id || link.source) &&
|
|
bookmarkedNodeIds.includes(link.target.id || link.target)
|
|
);
|
|
|
|
// Setze Daten und aktualisiere die Visualisierung
|
|
personalMindmap.nodes = nodes;
|
|
personalMindmap.links = links;
|
|
personalMindmap.isLoading = false;
|
|
personalMindmap.updateVisualization();
|
|
} else {
|
|
// Fallback: Leere Mindmap anzeigen
|
|
document.getElementById('empty-mindmap-message').style.display = 'flex';
|
|
}
|
|
}, 800);
|
|
|
|
// Lade die gemerkten Inhalte
|
|
loadBookmarkedContent(bookmarkedNodeIds);
|
|
} else {
|
|
// Zeige Leerzustand an
|
|
const areasContainer = document.getElementById('bookmarked-areas-container');
|
|
const thoughtsContainer = document.getElementById('bookmarked-thoughts-container');
|
|
|
|
areasContainer.innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="text-4xl mb-2 opacity-20">
|
|
<i class="fas fa-folder-open"></i>
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-400">Keine gemerkten Wissensbereiche</p>
|
|
</div>
|
|
`;
|
|
|
|
thoughtsContainer.innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="text-4xl mb-2 opacity-20">
|
|
<i class="fas fa-lightbulb"></i>
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-400">Keine gemerkten Gedanken</p>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
|
|
// Funktion zum Laden der gemerkten Inhalte
|
|
function loadBookmarkedContent(nodeIds) {
|
|
if (!nodeIds || nodeIds.length === 0) return;
|
|
|
|
// In einer vollständigen Implementierung würden wir hier einen API-Aufruf machen
|
|
// Für diese Demo erstellen wir Beispielinhalte
|
|
|
|
const areasContainer = document.getElementById('bookmarked-areas-container');
|
|
const thoughtsContainer = document.getElementById('bookmarked-thoughts-container');
|
|
|
|
// Verschiedene Beispiel-Farben
|
|
const colors = ['purple', 'blue', 'green', 'indigo', 'amber'];
|
|
|
|
// Leere die Container
|
|
areasContainer.innerHTML = '';
|
|
thoughtsContainer.innerHTML = '';
|
|
|
|
// Beispielinhalte für Wissensbereiche
|
|
const areaTemplates = [
|
|
{ name: 'Philosophie', description: 'Grundlagen philosophischen Denkens', count: 24 },
|
|
{ name: 'Wissenschaft', description: 'Wissenschaftliche Methoden und Erkenntnisse', count: 42 },
|
|
{ name: 'Technologie', description: 'Zukunftsweisende Technologien', count: 36 },
|
|
{ name: 'Kunst', description: 'Künstlerische Ausdrucksformen', count: 18 },
|
|
{ name: 'Psychologie', description: 'Menschliches Verhalten verstehen', count: 30 }
|
|
];
|
|
|
|
// Beispielinhalte für Gedanken
|
|
const thoughtTemplates = [
|
|
{ title: 'Quantenphysik und Bewusstsein', author: 'Maria Schmidt', date: '12.04.2023' },
|
|
{ title: 'Ethik in der künstlichen Intelligenz', author: 'Thomas Weber', date: '23.02.2023' },
|
|
{ title: 'Die Rolle der Kunst in der Gesellschaft', author: 'Lena Müller', date: '05.06.2023' },
|
|
{ title: 'Nachhaltige Entwicklung im 21. Jahrhundert', author: 'Michael Bauer', date: '18.08.2023' },
|
|
{ title: 'Kognitive Verzerrungen im Alltag', author: 'Sophie Klein', date: '30.09.2023' }
|
|
];
|
|
|
|
// Zeige nur so viele Elemente wie wir Knoten haben (bis zu 5)
|
|
const areaCount = Math.min(nodeIds.length, 5);
|
|
|
|
if (areaCount > 0) {
|
|
// Wissensbereiche hinzufügen
|
|
for (let i = 0; i < areaCount; i++) {
|
|
const area = areaTemplates[i];
|
|
const colorClass = colors[i % colors.length];
|
|
|
|
areasContainer.innerHTML += `
|
|
<a href="{{ url_for('mindmap') }}" class="bookmark-item block p-4 rounded-xl bg-white/80 dark:bg-gray-800/80 shadow-sm hover:shadow-md transition-all">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 rounded-lg bg-${colorClass}-100 dark:bg-${colorClass}-900/30 flex items-center justify-center mr-3">
|
|
<i class="fas fa-bookmark text-${colorClass}-500"></i>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<h3 class="font-semibold text-gray-900 dark:text-white">${area.name}</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">${area.description}</p>
|
|
</div>
|
|
<div class="text-xs text-gray-500 dark:text-gray-400">
|
|
${area.count} Einträge
|
|
</div>
|
|
</div>
|
|
</a>
|
|
`;
|
|
}
|
|
} else {
|
|
areasContainer.innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="text-4xl mb-2 opacity-20">
|
|
<i class="fas fa-folder-open"></i>
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-400">Keine gemerkten Wissensbereiche</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Zeige bis zu 5 Gedanken an (oder weniger, falls weniger gemerkt wurden)
|
|
const thoughtCount = Math.min(nodeIds.length, 5);
|
|
|
|
if (thoughtCount > 0) {
|
|
// Gedanken hinzufügen
|
|
for (let i = 0; i < thoughtCount; i++) {
|
|
const thought = thoughtTemplates[i];
|
|
const colorClass = colors[(i + 2) % colors.length]; // Andere Farben als für Bereiche
|
|
|
|
thoughtsContainer.innerHTML += `
|
|
<a href="{{ url_for('mindmap') }}" class="bookmark-item block p-4 rounded-xl bg-white/80 dark:bg-gray-800/80 shadow-sm hover:shadow-md transition-all">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 rounded-lg bg-${colorClass}-100 dark:bg-${colorClass}-900/30 flex items-center justify-center mr-3">
|
|
<i class="fas fa-lightbulb text-${colorClass}-500"></i>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<h3 class="font-semibold text-gray-900 dark:text-white">${thought.title}</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Von ${thought.author} • ${thought.date}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
`;
|
|
}
|
|
} else {
|
|
thoughtsContainer.innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="text-4xl mb-2 opacity-20">
|
|
<i class="fas fa-lightbulb"></i>
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-400">Keine gemerkten Gedanken</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |