marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor UI and enhance functionality: Update welcome messages and input placeholders in the chat assistant, implement connection count updates in the mindmap visualization, and change branding from "MindMap" to "Systades" across templates for a cohesive user experience.

Browse Source
This commit is contained in:
Marwin
2025-04-26 18:40:27 +01:00
parent 4797cc3b72
commit 14474c4eab
4 changed files with 125 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
website/static/js/modules/chatgpt-assistant.js
View File

@@ -24,7 +24,7 @@ class ChatGPTAssistant {
this.setupEventListeners();
// Ersten Willkommensnachricht anzeigen
this.addMessage("assistant", "Wie kann ich dir heute helfen?");
this.addMessage("assistant", "Frage den KI-Assistenten");
}
/**
@@ -71,7 +71,7 @@ class ChatGPTAssistant {
this.inputField = document.createElement('input');
this.inputField.type = 'text';
this.inputField.placeholder = 'Frage stellen...';
this.inputField.placeholder = 'Frage den KI-Assistenten';
this.inputField.className = 'flex-1 border border-gray-300 dark:border-dark-600 dark:bg-dark-700 dark:text-white rounded-l-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500';
const sendButton = document.createElement('button');

61
website/static/js/modules/mindmap.js
View File

@@ -425,6 +425,9 @@ class MindMapVisualization {
// Simulation neu starten
this.simulation.restart();
// Update connection counts
this.updateConnectionCounts();
}
ticked() {
@@ -610,6 +613,64 @@ class MindMapVisualization {
this.focusNode(matchingNodes[0].id);
}
}
/**
* Updates the thought_count property for each node based on existing connections
*/
updateConnectionCounts() {
// Reset all counts first
this.nodes.forEach(node => {
// Initialize thought_count if it doesn't exist
if (typeof node.thought_count !== 'number') {
node.thought_count = 0;
}
// Count connections for this node
const connectedNodes = this.getConnectedNodes(node);
node.thought_count = connectedNodes.length;
});
// Update UI to show counts
this.updateNodeLabels();
}
/**
* Updates the visual representation of node labels to include connection counts
*/
updateNodeLabels() {
if (!this.textElements) return;
this.textElements.text(d => {
if (d.thought_count > 0) {
return `${d.name} (${d.thought_count})`;
}
return d.name;
});
}
/**
* Adds a new connection between nodes and updates the counts
*/
addConnection(sourceNode, targetNode) {
if (!sourceNode || !targetNode) return false;
// Check if connection already exists
if (this.isConnected(sourceNode, targetNode)) return false;
// Add new connection
this.links.push({
source: sourceNode.id,
target: targetNode.id
});
// Update counts
this.updateConnectionCounts();
// Update visualization
this.updateVisualization();
return true;
}
}
// Exportiere die Klasse für die Verwendung in anderen Modulen

14
website/templates/base.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MindMap - {% block title %}{% endblock %}</title>
<title>Systades - {% block title %}{% endblock %}</title>
<!-- Favicon -->
<link rel="icon" href="{{ url_for('static', filename='img/favicon.svg') }}" type="image/svg+xml">
@@ -11,8 +11,8 @@
<!-- Meta Tags -->
<meta name="description" content="Eine interaktive Plattform zum Visualisieren, Erforschen und Teilen von Wissen">
<meta name="keywords" content="mindmap, wissen, visualisierung, lernen, gedanken, theorie">
<meta name="author" content="MindMap-Team">
<meta name="keywords" content="systades, wissen, visualisierung, lernen, gedanken, theorie">
<meta name="author" content="Systades-Team">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -550,7 +550,7 @@
<div class="container mx-auto flex justify-between items-center">
<!-- Logo -->
<a href="{{ url_for('index') }}" class="flex items-center group">
<span class="text-2xl font-bold gradient-text transform transition-transform group-hover:scale-105">MindMap</span>
<span class="text-2xl font-bold gradient-text transform transition-transform group-hover:scale-105">Systades</span>
</a>
<!-- Hauptnavigation - Desktop -->
@@ -727,11 +727,11 @@
<!-- Footer -->
<footer class="mt-12 py-10 transition-colors duration-300 rounded-t-3xl mx-4 sm:mx-6 md:mx-8"
:class="darkMode ? 'glass-morphism' : 'glass-morphism-light'">
:class="darkMode ? 'bg-gray-900/40 backdrop-blur-md border border-white/10' : 'bg-white/40 backdrop-blur-md border border-gray-200/50'">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center md:items-start">
<div class="mb-8 md:mb-0 text-center md:text-left">
<a href="{{ url_for('index') }}" class="text-2xl font-bold gradient-text inline-block transform transition-transform hover:scale-105">MindMap</a>
<a href="{{ url_for('index') }}" class="text-2xl font-bold gradient-text inline-block transform transition-transform hover:scale-105">Systades</a>
<p class="mt-3 text-sm max-w-sm"
:class="darkMode ? 'text-gray-400' : 'text-gray-600'">Eine interaktive Plattform zum Visualisieren, Erforschen und Teilen von Wissen.</p>
</div>
@@ -775,7 +775,7 @@
<div class="mt-8 pt-6 text-center text-xs"
:class="darkMode ? 'border-t border-gray-800/50 text-gray-500' : 'border-t border-gray-300/50 text-gray-600'">
&copy; {{ current_year }} MindMap. Alle Rechte vorbehalten.
&copy; {{ current_year }} Systades. Alle Rechte vorbehalten.
</div>
</div>
</footer>

96
website/templates/index.html
View File

@@ -121,7 +121,7 @@
<div class="relative w-full max-w-4xl mx-auto h-80 sm:h-96">
<div class="absolute inset-0 flex items-center justify-center">
<div class="hidden md:block text-center">
<div class="text-3xl font-bold gradient-text mb-2 animate-float">MindMap</div>
<div class="text-3xl font-bold gradient-text mb-2 animate-float">Systades</div>
<div class="text-lg text-gray-700 dark:text-gray-300">WISSEN VERNETZEN</div>
</div>
@@ -183,7 +183,7 @@
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="section-heading mb-4 text-gray-900 dark:text-white">Was ist <span class="gradient-text">MindMap?</span></h2>
<h2 class="section-heading mb-4 text-gray-900 dark:text-white">Was ist <span class="gradient-text">Systades?</span></h2>
<p class="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
Ein modernes Werkzeug zum Visualisieren, Erforschen und Teilen von Wissen
in einer intuitiven, interaktiven Umgebung.
@@ -294,7 +294,44 @@
<section class="py-16">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- KI-Chat -->
<!-- Themen-Übersicht -->
<div class="glass-morphism p-8 rounded-3xl transition-all duration-500 hover:-translate-y-3 hover:shadow-xl">
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-800 dark:text-white">
<div class="w-12 h-12 rounded-2xl bg-gradient-to-r from-violet-500 to-fuchsia-500 flex items-center justify-center mr-4 shadow-md">
<i class="fa-solid fa-fire text-white text-lg"></i>
</div>
Themen-Übersicht
</h3>
<div class="space-y-4 mb-6">
<a href="{{ url_for('mindmap') }}" class="flex items-center p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
<div class="w-3 h-3 rounded-full bg-purple-400 mr-3 group-hover:scale-125 transition-transform"></div>
<div class="flex-grow">
<p class="font-medium text-gray-800 dark:text-gray-200">Wissensbereiche <span class="text-xs text-gray-500">(12)</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Überblick über Themenbereiche</p>
</div>
<i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
</a>
<a href="{{ url_for('search_thoughts_page') }}" class="flex items-center p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
<div class="w-3 h-3 rounded-full bg-blue-400 mr-3 group-hover:scale-125 transition-transform"></div>
<div class="flex-grow">
<p class="font-medium text-gray-800 dark:text-gray-200">Gedanken <span class="text-xs text-gray-500">(87)</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Konkrete Einträge durchsuchen</p>
</div>
<i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
</a>
<a href="#" class="flex items-center p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
<div class="w-3 h-3 rounded-full bg-green-400 mr-3 group-hover:scale-125 transition-transform"></div>
<div class="flex-grow">
<p class="font-medium text-gray-800 dark:text-gray-200">Verbindungen <span class="text-xs text-gray-500">(34)</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Beziehungen zwischen Gedanken</p>
</div>
<i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
<a href="{{ url_for('search_thoughts_page') }}" class="btn-primary w-full text-center rounded-xl py-3.5">Alle Themen entdecken</a>
</div>
<!-- Google-like KI-Assistent Search Bar -->
<div class="glass-morphism p-8 rounded-3xl transition-all duration-500 hover:-translate-y-3 hover:shadow-xl">
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-800 dark:text-white">
<div class="w-12 h-12 rounded-2xl bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center mr-4 shadow-md">
@@ -306,13 +343,27 @@
Stelle Fragen, lasse dir Themen erklären oder finde neue Verbindungen mit Hilfe
unseres KI-Assistenten.
</p>
<!-- Google-like Search Bar -->
<div class="mb-6">
<div class="relative">
<input type="text" placeholder="Frage den KI-Assistenten"
class="w-full px-4 py-3.5 rounded-xl border bg-white/50 dark:bg-gray-800/50 border-gray-300 dark:border-gray-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
onkeypress="if(event.keyCode==13) window.MindMap.assistant.toggleAssistant(true);">
<button onclick="window.MindMap.assistant.toggleAssistant(true)"
class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-purple-500 dark:hover:text-purple-400 focus:outline-none transition-all duration-200">
<i class="fa-solid fa-search"></i>
</button>
</div>
</div>
<div class="glass-morphism p-5 rounded-2xl mb-6 transition-all duration-300 hover:shadow-md bg-gradient-to-br from-purple-500/5 to-blue-500/5 border border-white/10">
<div class="flex items-start">
<div class="w-10 h-10 rounded-xl bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center flex-shrink-0 mr-3 shadow-md">
<i class="fa-solid fa-robot text-white"></i>
</div>
<div>
<p class="text-sm text-gray-700 dark:text-gray-300">Wie kann ich dir heute helfen?</p>
<p class="text-sm text-gray-700 dark:text-gray-300">Frage den KI-Assistenten</p>
<div class="mt-4 flex flex-wrap gap-2">
<a href="{{ url_for('mindmap') }}" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
Erkunde die Mindmap
@@ -329,43 +380,6 @@
</div>
<button onclick="window.MindMap.assistant.toggleAssistant(true)" class="btn-primary w-full text-center rounded-xl py-3.5 shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1">KI-Chat starten</button>
</div>
<!-- Themen-Übersicht -->
<div class="glass-morphism p-8 rounded-3xl transition-all duration-500 hover:-translate-y-3 hover:shadow-xl">
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-800 dark:text-white">
<div class="w-12 h-12 rounded-2xl bg-gradient-to-r from-violet-500 to-fuchsia-500 flex items-center justify-center mr-4 shadow-md">
<i class="fa-solid fa-fire text-white text-lg"></i>
</div>
Themen-Übersicht
</h3>
<div class="space-y-4 mb-6">
<a href="{{ url_for('mindmap') }}" class="flex items-center p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
<div class="w-3 h-3 rounded-full bg-purple-400 mr-3 group-hover:scale-125 transition-transform"></div>
<div class="flex-grow">
<p class="font-medium text-gray-800 dark:text-gray-200">Wissensbereiche</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Überblick über Themenbereiche</p>
</div>
<i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
</a>
<a href="{{ url_for('search_thoughts_page') }}" class="flex items-center p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
<div class="w-3 h-3 rounded-full bg-blue-400 mr-3 group-hover:scale-125 transition-transform"></div>
<div class="flex-grow">
<p class="font-medium text-gray-800 dark:text-gray-200">Gedanken</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Konkrete Einträge durchsuchen</p>
</div>
<i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
</a>
<a href="#" class="flex items-center p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
<div class="w-3 h-3 rounded-full bg-green-400 mr-3 group-hover:scale-125 transition-transform"></div>
<div class="flex-grow">
<p class="font-medium text-gray-800 dark:text-gray-200">Verbindungen</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Beziehungen zwischen Gedanken</p>
</div>
<i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
<a href="{{ url_for('search_thoughts_page') }}" class="btn-primary w-full text-center rounded-xl py-3.5">Alle Themen entdecken</a>
</div>
</div>
</div>
</section>