Remove deprecated files and templates: Delete unused files including deployment scripts, environment configurations, and various HTML templates to streamline the project structure. This cleanup enhances maintainability and reduces clutter in the codebase.
This commit is contained in:
320
templates/my_account.html
Normal file
320
templates/my_account.html
Normal file
@@ -0,0 +1,320 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user