chore: automatic commit 2025-04-30 12:48

templates/my_account.html

@@ -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 %}