661 lines
25 KiB
HTML
661 lines
25 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Wissensnetzwerk{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* Full height and width for the page */
|
|
html, body {
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Remove gradient backgrounds */
|
|
.hero-gradient, .bg-fade {
|
|
background: none !important;
|
|
clip-path: none !important;
|
|
}
|
|
|
|
/* Style elements */
|
|
.mystical-line {
|
|
height: 1px;
|
|
background: linear-gradient(to right, transparent, rgba(109, 40, 217, 0.2), transparent);
|
|
}
|
|
|
|
.dark .mystical-line {
|
|
background: linear-gradient(to right, transparent, rgba(139, 92, 246, 0.2), transparent);
|
|
}
|
|
|
|
/* Text reveal animation */
|
|
@keyframes textReveal {
|
|
0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
|
|
100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
|
|
}
|
|
|
|
.text-reveal {
|
|
animation: textReveal 1s cubic-bezier(0.77, 0, 0.18, 1) forwards;
|
|
}
|
|
|
|
/* Marker-Animation für den Text */
|
|
@keyframes markerAnimation {
|
|
0% { width: 0; opacity: 0; }
|
|
20% { width: 100%; opacity: 0.7; }
|
|
80% { width: 100%; opacity: 0.7; }
|
|
100% { width: 0; opacity: 0; }
|
|
}
|
|
|
|
.marker-animation {
|
|
position: relative;
|
|
}
|
|
|
|
.marker-animation::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 6px;
|
|
width: 0;
|
|
background: linear-gradient(to right, rgba(109, 40, 217, 0.3), rgba(139, 92, 246, 0.6), rgba(109, 40, 217, 0.3));
|
|
border-radius: 3px;
|
|
opacity: 0;
|
|
animation: markerAnimation 2.5s ease-in-out forwards;
|
|
}
|
|
|
|
.marker-animation-delay::after {
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
.delay-1 { animation-delay: 0.2s; }
|
|
.delay-2 { animation-delay: 0.4s; }
|
|
.delay-3 { animation-delay: 0.6s; }
|
|
|
|
/* Home page specific styles */
|
|
.featured-card {
|
|
transition: transform 0.5s ease, box-shadow 0.5s ease;
|
|
border: 1px solid;
|
|
border-color: rgba(139, 92, 246, 0.1);
|
|
}
|
|
|
|
.dark .featured-card {
|
|
border-color: rgba(109, 40, 217, 0.2);
|
|
background-color: rgba(17, 24, 39, 0.7);
|
|
}
|
|
|
|
.featured-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.dark .featured-card:hover {
|
|
box-shadow: 0 5px 15px rgba(109, 40, 217, 0.2);
|
|
border-color: rgba(109, 40, 217, 0.3);
|
|
}
|
|
|
|
.featured-card:hover {
|
|
box-shadow: 0 5px 15px rgba(139, 92, 246, 0.1);
|
|
border-color: rgba(139, 92, 246, 0.2);
|
|
}
|
|
|
|
/* Chat section styles */
|
|
.embedded-chat {
|
|
height: 500px;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -5px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.dark .embedded-chat {
|
|
background-color: rgba(17, 24, 39, 0.7);
|
|
border-color: rgba(109, 40, 217, 0.2);
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 5px 10px -5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.embedded-chat {
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
border-color: rgba(139, 92, 246, 0.1);
|
|
}
|
|
|
|
#embedded-chat-messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 1.25rem;
|
|
min-height: 320px;
|
|
}
|
|
|
|
.chat-input-container {
|
|
padding: 1.25rem;
|
|
border-top: 1px solid;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.dark .chat-input-container {
|
|
background-color: rgba(17, 24, 39, 0.6);
|
|
border-color: rgba(75, 85, 99, 0.4);
|
|
}
|
|
|
|
.mystical-input {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
border: 1px solid rgba(209, 213, 219, 0.5);
|
|
color: #4B5563;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 0.5rem;
|
|
outline: none;
|
|
transition: all 0.3s ease;
|
|
width: 100%;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.dark .mystical-input {
|
|
background-color: rgba(31, 41, 55, 0.7);
|
|
border-color: rgba(75, 85, 99, 0.4);
|
|
color: #E5E7EB;
|
|
}
|
|
|
|
.mystical-input:focus {
|
|
border-color: rgba(139, 92, 246, 0.5);
|
|
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
|
|
}
|
|
|
|
.dark .mystical-input:focus {
|
|
border-color: rgba(139, 92, 246, 0.5);
|
|
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
|
|
}
|
|
|
|
/* Verbesserte Lesbarkeit für Chat-Nachrichten */
|
|
.chat-message {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.chat-bubble {
|
|
padding: 1rem;
|
|
border-radius: 0.75rem;
|
|
max-width: 85%;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.assistant-bubble {
|
|
background-color: rgba(243, 244, 246, 0.95);
|
|
color: #374151;
|
|
}
|
|
|
|
.dark .assistant-bubble {
|
|
background-color: rgba(31, 41, 55, 0.95);
|
|
color: #E5E7EB;
|
|
}
|
|
|
|
.user-bubble {
|
|
background-color: rgba(139, 92, 246, 0.15);
|
|
color: #4B5563;
|
|
}
|
|
|
|
.dark .user-bubble {
|
|
background-color: rgba(124, 58, 237, 0.3);
|
|
color: #E5E7EB;
|
|
}
|
|
|
|
/* Beispiel-Buttons verbessert */
|
|
.quick-query-container {
|
|
margin-top: 0.75rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.quick-query-btn {
|
|
font-size: 0.8rem;
|
|
padding: 0.4rem 0.75rem;
|
|
border-radius: 2rem;
|
|
background-color: rgba(243, 244, 246, 0.8);
|
|
color: #4B5563;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
white-space: nowrap;
|
|
border: 1px solid rgba(209, 213, 219, 0.5);
|
|
}
|
|
|
|
.dark .quick-query-btn {
|
|
background-color: rgba(55, 65, 81, 0.8);
|
|
color: #E5E7EB;
|
|
border-color: rgba(75, 85, 99, 0.4);
|
|
}
|
|
|
|
.quick-query-btn:hover {
|
|
background-color: rgba(229, 231, 235, 0.9);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.dark .quick-query-btn:hover {
|
|
background-color: rgba(75, 85, 99, 0.9);
|
|
}
|
|
|
|
/* Chat typing indicator */
|
|
.typing-dots span {
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
margin-right: 3px;
|
|
background-color: currentColor;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.typing-dots span:nth-child(1) {
|
|
animation: dot-pulse 1.2s infinite ease-in-out;
|
|
}
|
|
|
|
.typing-dots span:nth-child(2) {
|
|
animation: dot-pulse 1.2s infinite ease-in-out 0.2s;
|
|
}
|
|
|
|
.typing-dots span:nth-child(3) {
|
|
animation: dot-pulse 1.2s infinite ease-in-out 0.4s;
|
|
}
|
|
|
|
@keyframes dot-pulse {
|
|
0%, 100% { transform: scale(1); opacity: 0.5; }
|
|
50% { transform: scale(1.3); opacity: 1; }
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
<section class="relative pt-20 pb-24">
|
|
<!-- Hero Content -->
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div class="text-center mb-16">
|
|
<h1 class="hero-heading mb-8 text-gray-900 dark:text-white">
|
|
<div class="overflow-hidden flex justify-center gap-6">
|
|
<span class="relative inline-block text-reveal marker-animation">Wissen.</span>
|
|
<span class="relative inline-block text-reveal delay-1 marker-animation marker-animation-delay">Vernetzen.</span>
|
|
</div>
|
|
</h1>
|
|
<div class="overflow-hidden">
|
|
<p class="text-xl md:text-2xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-12 text-reveal delay-3">
|
|
Erkunde komplexe Ideen visuell, schaffe Verbindungen und teile deine Gedanken
|
|
in einem interaktiven Wissensnetzwerk.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
|
<a href="{{ url_for('mindmap') }}" class="mystical-button mystical-button-primary group transition-all duration-300">
|
|
<span class="flex items-center justify-center">
|
|
<i class="fa-solid fa-diagram-project mr-3 text-purple-200 group-hover:text-white transition-all duration-300"></i>
|
|
<span class="relative">
|
|
Mindmap erkunden
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300"></span>
|
|
</span>
|
|
</span>
|
|
</a>
|
|
{% if not current_user.is_authenticated %}
|
|
<a href="{{ url_for('register') }}" class="mystical-button mystical-button-secondary group transition-all duration-300">
|
|
<span class="flex items-center justify-center">
|
|
<i class="fa-solid fa-user-plus mr-3 group-hover:text-accent-secondary-dark dark:group-hover:text-accent-secondary-light transition-all duration-300"></i>
|
|
<span class="relative">
|
|
Konto erstellen
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-accent-primary-light dark:bg-accent-primary-dark group-hover:w-full transition-all duration-300"></span>
|
|
</span>
|
|
</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Central logo and name -->
|
|
<div class="relative w-full max-w-4xl mx-auto h-40 sm:h-60 mb-16">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="text-center">
|
|
<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>
|
|
<!-- Animierte Pfeilspitze -->
|
|
<div class="mt-6 flex justify-center">
|
|
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-white animate-bounce-slow">
|
|
<path d="M10 12L0 2L2 0L10 8L18 0L20 2L10 12Z" fill="currentColor" fill-opacity="0.7"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="py-20 relative">
|
|
<div class="mystical-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
|
|
|
|
<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">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 einem interaktiven
|
|
Netzwerk, das dir hilft, Verbindungen zu entdecken und dein Wissen zu organisieren.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
|
|
<!-- Feature 1: Visualize -->
|
|
<div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm">
|
|
<div class="mb-4 text-purple-600 dark:text-purple-400">
|
|
<i class="fa-solid fa-diagram-project text-3xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Visualisiere Wissen</h3>
|
|
<p class="text-gray-700 dark:text-gray-300">
|
|
Organisiere Gedanken und Ideen in einem interaktiven Netzwerk, das komplexe Beziehungen
|
|
visuell darstellt und neue Verbindungen offenbart.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature 2: Connect -->
|
|
<div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm">
|
|
<div class="mb-4 text-indigo-600 dark:text-indigo-400">
|
|
<i class="fa-solid fa-network-wired text-3xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Verknüpfe Gedanken</h3>
|
|
<p class="text-gray-700 dark:text-gray-300">
|
|
Entdecke Zusammenhänge zwischen scheinbar unzusammenhängenden Ideen und schaffe dein
|
|
persönliches Wissensnetzwerk über verschiedene Bereiche hinweg.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature 3: Share -->
|
|
<div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm">
|
|
<div class="mb-4 text-purple-600 dark:text-purple-400">
|
|
<i class="fa-solid fa-share-nodes text-3xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Teile und Entdecke</h3>
|
|
<p class="text-gray-700 dark:text-gray-300">
|
|
Tausche Erkenntnisse mit anderen aus und erweitere dein Wissen durch die
|
|
Perspektiven und Gedanken der Community.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- AI Assistant Preview -->
|
|
<section class="py-20 relative">
|
|
<div class="mystical-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
|
|
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="section-heading mb-4 text-gray-900 dark:text-white">Dein <span class="gradient-text">KI-Assistent</span></h2>
|
|
<p class="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
|
|
Unser integrierter KI-Assistent hilft dir, Wissen zu organisieren, Verbindungen zu finden und
|
|
Einsichten zu gewinnen.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Chat Interface Preview -->
|
|
<div class="max-w-3xl mx-auto">
|
|
<div class="embedded-chat" id="demo-chat">
|
|
<!-- Chat Header -->
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-3">
|
|
<i class="fa-solid fa-robot text-sm"></i>
|
|
</div>
|
|
<span class="font-medium text-gray-800 dark:text-gray-200">Systades Assistent (4o-mini)</span>
|
|
</div>
|
|
<div>
|
|
<button id="open-real-assistant" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
|
|
<i class="fa-solid fa-expand"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Messages -->
|
|
<div id="embedded-chat-messages" class="border-b-0">
|
|
<!-- Assistant Message -->
|
|
<div class="chat-message flex">
|
|
<div class="w-9 h-9 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-3 flex-shrink-0">
|
|
<i class="fa-solid fa-robot text-sm"></i>
|
|
</div>
|
|
<div class="chat-bubble assistant-bubble">
|
|
<div class="markdown-content">
|
|
<p>Hallo! Ich bin dein Systades-Assistent. Wie kann ich dir heute helfen?</p>
|
|
<p>Du kannst mir Fragen zu:</p>
|
|
<ul>
|
|
<li><strong>Gedanken</strong> in der Datenbank</li>
|
|
<li><strong>Kategorien</strong> und Wissensgebieten</li>
|
|
<li><strong>Mindmaps</strong> und Visualisierungsmöglichkeiten</li>
|
|
</ul>
|
|
<p>stellen.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Message -->
|
|
<div class="chat-message flex justify-end">
|
|
<div class="chat-bubble user-bubble">
|
|
<p>
|
|
Kann ich mit deiner Hilfe eine Mindmap zum Thema Künstliche Intelligenz erstellen?
|
|
</p>
|
|
</div>
|
|
<div class="w-9 h-9 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-700 dark:text-gray-300 ml-3 flex-shrink-0">
|
|
<i class="fa-solid fa-user text-sm"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Assistant Response -->
|
|
<div class="chat-message flex" id="demo-ai-response">
|
|
<div class="w-9 h-9 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-3 flex-shrink-0">
|
|
<i class="fa-solid fa-robot text-sm"></i>
|
|
</div>
|
|
<div class="chat-bubble assistant-bubble">
|
|
<div class="markdown-content">
|
|
<p>Ja, natürlich! Ich kann dir dabei helfen, eine Mindmap zum Thema <strong>Künstliche Intelligenz</strong> zu erstellen.</p>
|
|
<p>Du kannst wie folgt vorgehen:</p>
|
|
<ol>
|
|
<li>Gehe zur <strong>Mindmap</strong>-Ansicht</li>
|
|
<li>Suche nach dem Knoten "Künstliche Intelligenz" unter der Kategorie "Technologie"</li>
|
|
<li>Füge diesen Knoten zu deiner persönlichen Mindmap hinzu</li>
|
|
<li>Ergänze verwandte Themen wie <em>Machine Learning, Neural Networks oder Data Science</em></li>
|
|
</ol>
|
|
<p>Soll ich dir noch mehr spezifische Informationen zu KI-Teilgebieten geben?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Input -->
|
|
<div class="chat-input-container">
|
|
<div class="flex">
|
|
<input type="text" placeholder="Stelle eine Frage..." class="mystical-input flex-grow" disabled>
|
|
<button class="ml-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-3 py-2 rounded-lg disabled:opacity-50 flex-shrink-0 hover:shadow-md transition-all duration-200" disabled>
|
|
<i class="fa-solid fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
<!-- Quick Queries -->
|
|
<div class="quick-query-container">
|
|
<span class="text-sm text-gray-500 dark:text-gray-400 mr-1">Beispiele:</span>
|
|
<button data-question="Was sind die wichtigsten Grundlagen der Künstlichen Intelligenz?" class="quick-query-btn hover:shadow-sm">KI-Grundlagen</button>
|
|
<button data-question="Wie kann ich eine Mindmap zum Thema Neuronale Netzwerke erstellen?" class="quick-query-btn hover:shadow-sm">Mindmap erstellen</button>
|
|
<button data-question="Zeige mir alle verfügbaren Kategorien in der Datenbank" class="quick-query-btn hover:shadow-sm">Datenbank durchsuchen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Try it Button -->
|
|
<div class="text-center mt-10">
|
|
<button onclick="window.MindMap && window.MindMap.assistant && window.MindMap.assistant.sendQuestion('Hallo! Ich möchte mehr über die Funktionen der Wissensdatenbank erfahren. Was kann ich hier alles machen?')"
|
|
class="mystical-button mystical-button-primary inline-flex items-center">
|
|
<i class="fa-solid fa-robot mr-2"></i>
|
|
KI-Assistenten ausprobieren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Getting Started Section -->
|
|
<section class="py-20 relative">
|
|
<div class="mystical-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
|
|
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="section-heading mb-4 text-gray-900 dark:text-white">So <span class="gradient-text">funktioniert's</span></h2>
|
|
<p class="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
|
|
In wenigen einfachen Schritten kannst du mit Systades beginnen, dein Wissen zu organisieren.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Step Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- Step 1 -->
|
|
<div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm relative overflow-hidden">
|
|
<div class="absolute top-4 right-4 w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold">
|
|
1
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Konto erstellen</h3>
|
|
<p class="text-gray-700 dark:text-gray-300 mb-4">
|
|
Registriere dich für ein kostenloses Konto, um deine persönliche Wissenslandschaft zu erstellen.
|
|
</p>
|
|
{% if not current_user.is_authenticated %}
|
|
<a href="{{ url_for('register') }}" class="text-purple-600 dark:text-purple-400 hover:underline">
|
|
Jetzt registrieren <i class="fa-solid fa-arrow-right ml-1"></i>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm relative overflow-hidden">
|
|
<div class="absolute top-4 right-4 w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold">
|
|
2
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Mindmap erkunden</h3>
|
|
<p class="text-gray-700 dark:text-gray-300 mb-4">
|
|
Entdecke die öffentliche Wissensmindmap und füge Knoten zu deiner persönlichen Landschaft hinzu.
|
|
</p>
|
|
<a href="{{ url_for('mindmap') }}" class="text-purple-600 dark:text-purple-400 hover:underline">
|
|
Zur Mindmap <i class="fa-solid fa-arrow-right ml-1"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm relative overflow-hidden">
|
|
<div class="absolute top-4 right-4 w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold">
|
|
3
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Gedanken teilen</h3>
|
|
<p class="text-gray-700 dark:text-gray-300 mb-4">
|
|
Teile deine eigenen Gedanken, verbinde sie mit vorhandenen Knoten und baue das kollektive Wissen aus.
|
|
</p>
|
|
{% if current_user.is_authenticated %}
|
|
<a href="{{ url_for('profile') }}" class="text-purple-600 dark:text-purple-400 hover:underline">
|
|
Zum Profil <i class="fa-solid fa-arrow-right ml-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<a href="{{ url_for('login') }}" class="text-purple-600 dark:text-purple-400 hover:underline">
|
|
Jetzt anmelden <i class="fa-solid fa-arrow-right ml-1"></i>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Call to Action -->
|
|
<section class="py-20 relative">
|
|
<div class="mystical-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
|
|
|
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="section-heading mb-6 text-gray-900 dark:text-white">Bereit, dein <span class="gradient-text">Wissen zu vernetzen</span>?</h2>
|
|
<p class="text-lg text-gray-700 dark:text-gray-300 mb-8">
|
|
Tritt unserer wachsenden Community bei und entdecke eine neue Art, Wissen zu organisieren und zu teilen.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="{{ url_for('mindmap') }}" class="mystical-button mystical-button-primary">
|
|
<i class="fa-solid fa-diagram-project mr-2"></i> Mindmap erkunden
|
|
</a>
|
|
{% if not current_user.is_authenticated %}
|
|
<a href="{{ url_for('register') }}" class="mystical-button mystical-button-secondary">
|
|
<i class="fa-solid fa-user-plus mr-2"></i> Konto erstellen
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Expand-Button mit dem echten Assistenten verknüpfen
|
|
const openRealAssistantBtn = document.getElementById('open-real-assistant');
|
|
if (openRealAssistantBtn) {
|
|
openRealAssistantBtn.addEventListener('click', function() {
|
|
if (window.MindMap && window.MindMap.assistant) {
|
|
window.MindMap.assistant.toggleAssistant(true);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Auch die Beispiel-Buttons im Demo-Chat klickbar machen
|
|
const quickQueryButtons = document.querySelectorAll('.quick-query-btn');
|
|
quickQueryButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
if (window.MindMap && window.MindMap.assistant) {
|
|
const question = button.getAttribute('data-question');
|
|
if (question) {
|
|
window.MindMap.assistant.sendQuestion(question);
|
|
} else {
|
|
// Fallback auf den Button-Text, falls kein data-question Attribut gesetzt ist
|
|
const queryText = button.textContent.trim();
|
|
window.MindMap.assistant.sendQuestion(queryText);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Styling für die markdown-content hinzufügen
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.markdown-content h1, .markdown-content h2, .markdown-content h3,
|
|
.markdown-content h4, .markdown-content h5, .markdown-content h6 {
|
|
font-weight: bold;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.markdown-content h1 { font-size: 1.4rem; }
|
|
.markdown-content h2 { font-size: 1.3rem; }
|
|
.markdown-content h3 { font-size: 1.2rem; }
|
|
.markdown-content h4 { font-size: 1.1rem; }
|
|
.markdown-content ul, .markdown-content ol {
|
|
padding-left: 1.5rem;
|
|
margin: 0.5rem 0;
|
|
}
|
|
.markdown-content ul { list-style-type: disc; }
|
|
.markdown-content ol { list-style-type: decimal; }
|
|
.markdown-content p { margin: 0.5rem 0; }
|
|
.markdown-content code {
|
|
font-family: monospace;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
}
|
|
.markdown-content pre {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
padding: 0.5rem;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
margin: 0.5rem 0;
|
|
}
|
|
.dark .markdown-content code {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.dark .markdown-content pre {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
});
|
|
</script>
|
|
{% endblock %} |