603 lines
28 KiB
HTML
603 lines
28 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Wissensnetzwerk{% 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;
|
|
}
|
|
|
|
/* Entferne den Gradient-Hintergrund vollständig */
|
|
.hero-gradient, .bg-fade {
|
|
background: none !important;
|
|
clip-path: none !important;
|
|
}
|
|
|
|
.tech-line {
|
|
height: 1px;
|
|
background: linear-gradient(to right, transparent, rgba(100, 100, 100, 0.1), transparent);
|
|
}
|
|
|
|
.tech-dot {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background-color: rgba(100, 100, 100, 0.2);
|
|
position: absolute;
|
|
}
|
|
|
|
.dark .tech-line {
|
|
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
}
|
|
|
|
.dark .tech-dot {
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { r: 10; opacity: 0.7; }
|
|
50% { r: 12; opacity: 1; }
|
|
100% { r: 10; opacity: 0.7; }
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes iconPulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.icon-pulse {
|
|
animation: iconPulse 3s ease-in-out infinite;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Volle Seitenbreite für Container */
|
|
#app-container, .container, main, .mx-auto, .py-12 {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Sicherstellen dass der Hintergrund die ganze Seite abdeckt */
|
|
.full-page-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Chat-Animationen */
|
|
.typing-dots span {
|
|
animation-duration: 1.2s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
/* Chat-Nachrichten-Animation */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(0, 10px, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
#embedded-chat-messages > div {
|
|
animation: fadeInUp 0.3s ease-out forwards;
|
|
}
|
|
|
|
/* Sanftes Scrollen im Chat */
|
|
#embedded-chat-messages {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Benutzerdefinierter Scrollbar für den Chat */
|
|
#embedded-chat-messages::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
#embedded-chat-messages::-webkit-scrollbar-track {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#embedded-chat-messages::-webkit-scrollbar-thumb {
|
|
background-color: rgba(139, 92, 246, 0.3);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.dark #embedded-chat-messages::-webkit-scrollbar-thumb {
|
|
background-color: rgba(139, 92, 246, 0.5);
|
|
}
|
|
|
|
/* Hover-Effekt für Quick-Query-Buttons */
|
|
.quick-query-btn:hover {
|
|
cursor: pointer;
|
|
background: linear-gradient(to right, rgba(139, 92, 246, 0.1), rgba(96, 165, 250, 0.1));
|
|
}
|
|
|
|
.dark .quick-query-btn:hover {
|
|
background: linear-gradient(to right, rgba(139, 92, 246, 0.2), rgba(96, 165, 250, 0.2));
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hintergrund für die gesamte Seite -->
|
|
<div class="full-page-bg gradient-background"></div>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative pt-20 pb-32">
|
|
<!-- 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">
|
|
<span class="gradient-text inline-block transform transition-all duration-700 hover:scale-105">Wissen</span> neu
|
|
<div class="mt-2 relative">
|
|
<span class="relative inline-block">vernetzen
|
|
<div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-purple-500/0 via-purple-500/70 to-purple-500/0 rounded-full"></div>
|
|
</span>
|
|
</div>
|
|
</h1>
|
|
<p class="text-xl md:text-2xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-12">
|
|
Erkunde komplexe Ideen visuell, schaffe Verbindungen und teile deine Gedanken
|
|
in einem interaktiven Wissensnetzwerk.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
|
<a href="{{ url_for('mindmap') }}" class="group transition-all duration-300 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium text-lg px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:shadow-purple-500/20 transform hover:-translate-y-1">
|
|
<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 animate-pulse"></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="group transition-all duration-300 bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white font-medium text-lg px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:shadow-blue-500/20 transform hover:-translate-y-1">
|
|
<span class="flex items-center justify-center">
|
|
<i class="fa-solid fa-user-plus mr-3 text-blue-200 group-hover:text-white transition-all duration-300 icon-pulse"></i>
|
|
<span class="relative">
|
|
Konto erstellen
|
|
<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>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tech illustration -->
|
|
<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">Systades</div>
|
|
<div class="text-lg text-gray-700 dark:text-gray-300">WISSEN VERNETZEN</div>
|
|
</div>
|
|
|
|
<!-- Network Visualization with SVG -->
|
|
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
|
|
<!-- Glossy Nodes and Lines -->
|
|
<defs>
|
|
<radialGradient id="nodeGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
|
|
<stop offset="0%" stop-color="rgba(139, 92, 246, 0.9)" />
|
|
<stop offset="100%" stop-color="rgba(79, 70, 229, 0.5)" />
|
|
</radialGradient>
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="5" result="blur" />
|
|
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Network Lines -->
|
|
<g class="lines">
|
|
<!-- Connection network -->
|
|
<line x1="200" y1="250" x2="400" y2="150" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
|
|
<line x1="400" y1="150" x2="600" y2="250" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
|
|
<line x1="600" y1="250" x2="400" y2="350" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
|
|
<line x1="400" y1="350" x2="200" y2="250" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
|
|
<line x1="400" y1="150" x2="400" y2="350" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
|
|
<line x1="200" y1="250" x2="600" y2="250" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
|
|
|
|
<!-- Dark mode connections -->
|
|
<line x1="200" y1="250" x2="400" y2="150" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
|
|
<line x1="400" y1="150" x2="600" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
|
|
<line x1="600" y1="250" x2="400" y2="350" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
|
|
<line x1="400" y1="350" x2="200" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
|
|
<line x1="400" y1="150" x2="400" y2="350" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
|
|
<line x1="200" y1="250" x2="600" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
|
|
|
|
<!-- Pulse animation for some lines -->
|
|
<line class="animate-pulse" x1="400" y1="150" x2="300" y2="200" stroke="rgba(139, 92, 246, 0.5)" stroke-width="2" />
|
|
<line class="animate-pulse" x1="400" y1="350" x2="500" y2="300" stroke="rgba(168, 85, 247, 0.5)" stroke-width="2" />
|
|
</g>
|
|
|
|
<!-- Network Nodes -->
|
|
<g class="nodes">
|
|
<circle cx="400" cy="150" r="15" fill="url(#nodeGradient)" filter="url(#glow)" class="animate-pulse float-animation" />
|
|
<circle cx="200" cy="250" r="10" fill="url(#nodeGradient)" class="float-animation" />
|
|
<circle cx="600" cy="250" r="10" fill="url(#nodeGradient)" class="float-animation" />
|
|
<circle cx="400" cy="350" r="15" fill="url(#nodeGradient)" filter="url(#glow)" class="animate-pulse float-animation" />
|
|
<circle cx="300" cy="200" r="8" fill="url(#nodeGradient)" class="float-animation" />
|
|
<circle cx="500" cy="300" r="8" fill="url(#nodeGradient)" class="float-animation" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="py-20 relative">
|
|
<div class="tech-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 einer intuitiven, interaktiven Umgebung.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Feature Card 1 -->
|
|
<div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
|
|
<div class="icon mb-6 rounded-2xl shadow-lg">
|
|
<i class="fa-solid fa-brain"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3">Visualisiere Wissen</h3>
|
|
<p>
|
|
Sieh Wissen als vernetztes System, entdecke Zusammenhänge und erkenne überraschende
|
|
Verbindungen zwischen verschiedenen Themengebieten.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Card 2 -->
|
|
<div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
|
|
<div class="icon mb-6 rounded-2xl shadow-lg">
|
|
<i class="fa-solid fa-lightbulb"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3">Teile Gedanken</h3>
|
|
<p>
|
|
Füge deine eigenen Ideen und Perspektiven hinzu. Erstelle Verbindungen zu
|
|
vorhandenen Gedanken und bereichere die wachsende Wissensbasis.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Card 3 -->
|
|
<div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
|
|
<div class="icon mb-6 rounded-2xl shadow-lg">
|
|
<i class="fa-solid fa-users"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3">Community</h3>
|
|
<p>
|
|
Sei Teil einer Gemeinschaft, die gemeinsam ein verteiltes Wissensarchiv aufbaut
|
|
und sich in thematisch fokussierten Bereichen austauscht.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Card 4 -->
|
|
<div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
|
|
<div class="icon mb-6 rounded-2xl shadow-lg">
|
|
<i class="fa-solid fa-robot"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3">KI-Assistenz</h3>
|
|
<p>
|
|
Lass dir von künstlicher Intelligenz helfen, neue Zusammenhänge zu entdecken,
|
|
Inhalte zusammenzufassen und Fragen zu beantworten.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Card 5 -->
|
|
<div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
|
|
<div class="icon mb-6 rounded-2xl shadow-lg">
|
|
<i class="fa-solid fa-search"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3">Intelligente Suche</h3>
|
|
<p>
|
|
Finde genau die Informationen, die du suchst, mit fortschrittlichen Such- und
|
|
Filterfunktionen für eine präzise Navigation durch das Wissen.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Card 6 -->
|
|
<div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
|
|
<div class="icon mb-6 rounded-2xl shadow-lg">
|
|
<i class="fa-solid fa-route"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-3">Geführte Pfade</h3>
|
|
<p>
|
|
Folge kuratierten Lernpfaden durch komplexe Themen oder erschaffe selbst
|
|
Routen für andere, die deinen Gedankengängen folgen möchten.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Call to Action Section -->
|
|
<section class="py-16 sm:py-20 md:py-24 relative overflow-hidden">
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div class="glass-effect p-6 sm:p-8 md:p-12 rounded-3xl transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl bg-gradient-to-br from-purple-500/15 to-blue-500/15 backdrop-blur-xl border border-white/10 shadow-lg">
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
|
|
<div class="md:w-2/3">
|
|
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 text-gray-900 dark:text-white leading-tight">
|
|
Bereit, <span class="gradient-text bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-blue-500">Wissen</span> neu zu entdecken?
|
|
</h2>
|
|
<p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg mb-6 md:mb-0 max-w-2xl">
|
|
Starte jetzt deine Reise durch das Wissensnetzwerk und erschließe neue Perspektiven.
|
|
</p>
|
|
</div>
|
|
<div class="md:w-1/3 text-center md:text-right">
|
|
<a href="{{ url_for('mindmap') }}" class="inline-flex items-center justify-center w-full md:w-auto btn-primary font-bold py-3 sm:py-3.5 px-6 sm:px-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
|
|
<span class="flex items-center justify-center">
|
|
<i class="fa-solid fa-arrow-right mr-2"></i>
|
|
<span>Zur Mindmap</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Quick Access Section -->
|
|
<section class="py-16 sm:py-20">
|
|
<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-6 lg:gap-8">
|
|
<!-- Themen-Übersicht -->
|
|
<div class="glass-morphism p-6 sm:p-8 rounded-3xl transition-all duration-500 hover:-translate-y-3 hover:shadow-xl border border-white/10 backdrop-blur-md">
|
|
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-800 dark:text-white">
|
|
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-violet-500 to-fuchsia-500 flex items-center justify-center mr-3 sm:mr-4 shadow-md transform transition-transform duration-300 hover:scale-110">
|
|
<i class="fa-solid fa-fire text-white text-base sm:text-lg"></i>
|
|
</div>
|
|
<span class="text-lg sm:text-xl md:text-2xl">Themen-Übersicht</span>
|
|
</h3>
|
|
<div class="space-y-3 sm:space-y-4 mb-6">
|
|
<a href="{{ url_for('mindmap') }}" class="flex items-center p-3 sm: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-xs sm: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 sm: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-xs sm: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 sm: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-xs sm: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 sm:py-3.5 transform transition-all duration-300 hover:-translate-y-1 hover:shadow-lg flex items-center justify-center">
|
|
<span>Alle Themen entdecken</span>
|
|
<i class="fa-solid fa-arrow-right ml-2"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- KI-Assistent mit eingebettetem Chat -->
|
|
<div class="glass-morphism p-6 sm:p-8 rounded-3xl transition-all duration-500 hover:-translate-y-1 hover:shadow-xl backdrop-blur-md border border-white/10">
|
|
<h3 class="text-xl md:text-2xl font-bold mb-4 flex flex-wrap sm:flex-nowrap items-center text-gray-800 dark:text-white">
|
|
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center mr-3 sm:mr-4 shadow-lg transform transition-transform duration-300 hover:scale-110">
|
|
<i class="fa-solid fa-robot text-white text-base sm:text-lg"></i>
|
|
</div>
|
|
<span class="mt-1 sm:mt-0">KI-Assistent</span>
|
|
</h3>
|
|
|
|
<!-- Eingebettetes Chat-Interface -->
|
|
<div id="embedded-assistant" class="rounded-xl border border-gray-200/50 dark:border-gray-700/50 overflow-hidden flex flex-col h-[300px]">
|
|
<!-- Chat Verlauf -->
|
|
<div id="embedded-chat-messages" class="flex-grow p-4 overflow-y-auto space-y-3 bg-white/70 dark:bg-gray-800/70">
|
|
<!-- Begrüßungsnachricht -->
|
|
<div class="flex items-start space-x-2">
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
|
|
<i class="fa-solid fa-robot text-white text-xs"></i>
|
|
</div>
|
|
<div class="max-w-[85%] bg-purple-100 dark:bg-gray-700 p-3 rounded-xl rounded-tl-none shadow-sm">
|
|
<p class="text-sm text-gray-700 dark:text-gray-200">Hallo! Ich bin dein KI-Assistent. Wie kann ich dir helfen?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Eingabe -->
|
|
<div class="p-3 border-t border-gray-200/70 dark:border-gray-700/70 bg-gray-50/90 dark:bg-gray-800/90">
|
|
<form id="embedded-chat-form" class="flex items-center space-x-2">
|
|
<input type="text" id="embedded-chat-input"
|
|
placeholder="Stelle eine Frage..."
|
|
class="flex-grow px-4 py-2 rounded-xl border bg-white/90 dark:bg-gray-700/90 border-gray-300 dark:border-gray-600 shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500 text-gray-700 dark:text-gray-200">
|
|
<button type="submit"
|
|
class="p-2 rounded-xl bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5">
|
|
<i class="fa-solid fa-paper-plane"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schnelllinks unter dem Chat -->
|
|
<div class="mt-4 flex flex-wrap gap-2">
|
|
<button class="quick-query-btn px-2 sm:px-3 py-1 sm:py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-lg sm:rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
|
|
Was ist Systades?
|
|
</button>
|
|
<button class="quick-query-btn px-2 sm:px-3 py-1 sm:py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-lg sm:rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
|
|
Wie erstelle ich eine Mindmap?
|
|
</button>
|
|
<button class="quick-query-btn px-2 sm:px-3 py-1 sm:py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-lg sm:rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
|
|
Zeige neueste Gedanken
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Vollständigen KI-Chat öffnen -->
|
|
<button onclick="window.MindMap.assistant.toggleAssistant(true)" class="mt-4 btn-primary w-full text-center rounded-xl py-2 sm:py-2.5 shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 flex items-center justify-center">
|
|
<i class="fa-solid fa-expand mr-2"></i>
|
|
<span>Chat in Vollansicht öffnen</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{% endblock %}
|
|
|
|
<!-- JavaScript für eingebetteten Chat -->
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Warten bis MindMap und der Assistent initialisiert sind
|
|
const waitForAssistant = setInterval(() => {
|
|
if (window.MindMap && window.MindMap.assistant) {
|
|
clearInterval(waitForAssistant);
|
|
initEmbeddedChat();
|
|
}
|
|
}, 200);
|
|
|
|
function initEmbeddedChat() {
|
|
const chatForm = document.getElementById('embedded-chat-form');
|
|
const chatInput = document.getElementById('embedded-chat-input');
|
|
const messagesContainer = document.getElementById('embedded-chat-messages');
|
|
const quickQueryBtns = document.querySelectorAll('.quick-query-btn');
|
|
|
|
// Event-Listener für das Chat-Formular
|
|
chatForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const userMessage = chatInput.value.trim();
|
|
if (!userMessage) return;
|
|
|
|
// Nachricht des Benutzers anzeigen
|
|
appendMessage('user', userMessage);
|
|
chatInput.value = '';
|
|
|
|
// Anzeigen, dass der Assistent antwortet
|
|
const typingIndicator = appendTypingIndicator();
|
|
|
|
// API-Anfrage an den Assistenten senden
|
|
sendToAssistant(userMessage)
|
|
.then(response => {
|
|
// Entferne Tipp-Indikator
|
|
typingIndicator.remove();
|
|
// Zeige Antwort des Assistenten an
|
|
appendMessage('assistant', response);
|
|
})
|
|
.catch(error => {
|
|
typingIndicator.remove();
|
|
appendMessage('assistant', 'Es tut mir leid, ich konnte deine Nachricht nicht verarbeiten. Bitte versuche es später noch einmal.');
|
|
console.error('Fehler bei der Kommunikation mit dem Assistenten:', error);
|
|
});
|
|
});
|
|
|
|
// Schnellabfragen-Buttons
|
|
quickQueryBtns.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const query = this.textContent.trim();
|
|
chatInput.value = query;
|
|
chatForm.dispatchEvent(new Event('submit'));
|
|
});
|
|
});
|
|
|
|
// Funktion zum Hinzufügen einer Nachricht zum Chat
|
|
function appendMessage(sender, message) {
|
|
const messageElement = document.createElement('div');
|
|
messageElement.className = 'flex items-start space-x-2';
|
|
|
|
if (sender === 'user') {
|
|
messageElement.innerHTML = `
|
|
<div class="flex-grow"></div>
|
|
<div class="max-w-[85%] bg-blue-100 dark:bg-blue-900/40 p-3 rounded-xl rounded-tr-none shadow-sm">
|
|
<p class="text-sm text-gray-700 dark:text-gray-200">${message}</p>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-indigo-500 flex items-center justify-center flex-shrink-0">
|
|
<i class="fa-solid fa-user text-white text-xs"></i>
|
|
</div>
|
|
`;
|
|
} else {
|
|
messageElement.innerHTML = `
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
|
|
<i class="fa-solid fa-robot text-white text-xs"></i>
|
|
</div>
|
|
<div class="max-w-[85%] bg-purple-100 dark:bg-gray-700 p-3 rounded-xl rounded-tl-none shadow-sm">
|
|
<p class="text-sm text-gray-700 dark:text-gray-200">${message}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
messagesContainer.appendChild(messageElement);
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
}
|
|
|
|
// Tipp-Indikator für "Assistent schreibt..."
|
|
function appendTypingIndicator() {
|
|
const indicatorElement = document.createElement('div');
|
|
indicatorElement.className = 'flex items-start space-x-2 typing-indicator';
|
|
indicatorElement.innerHTML = `
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
|
|
<i class="fa-solid fa-robot text-white text-xs"></i>
|
|
</div>
|
|
<div class="max-w-[85%] bg-purple-100 dark:bg-gray-700 p-3 rounded-xl rounded-tl-none shadow-sm">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
|
|
<span class="mr-1">Tipp</span>
|
|
<span class="typing-dots flex space-x-1">
|
|
<span class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0ms;"></span>
|
|
<span class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full animate-bounce" style="animation-delay: 150ms;"></span>
|
|
<span class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full animate-bounce" style="animation-delay: 300ms;"></span>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
`;
|
|
messagesContainer.appendChild(indicatorElement);
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
return indicatorElement;
|
|
}
|
|
|
|
// Sende Nachricht an den Assistenten und erhalte Antwort
|
|
async function sendToAssistant(message) {
|
|
try {
|
|
const response = await fetch('/api/assistant', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
messages: [
|
|
{ role: "system", content: "Du bist ein hilfreicher Assistent für das Wissensnetzwerk Systades." },
|
|
{ role: "user", content: message }
|
|
]
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Unbekannter Fehler');
|
|
}
|
|
|
|
return data.response || data.answer || 'Ich habe keine Antwort erhalten.';
|
|
} catch (error) {
|
|
console.error('Fehler bei der API-Anfrage:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |