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:
603
templates/index.html
Normal file
603
templates/index.html
Normal file
@@ -0,0 +1,603 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user