|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>KI-Agenten Plattform | Deutsche AI-Lösungen</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #3b82f6, #8b5cf6); |
|
|
} |
|
|
.sidebar-item.active { |
|
|
background-color: rgba(255,255,255,0.1); |
|
|
border-left: 4px solid #8b5cf6; |
|
|
} |
|
|
.page-transition { |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
.page-hidden { |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
} |
|
|
.page-visible { |
|
|
opacity: 1; |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } |
|
|
} |
|
|
.agent-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans text-gray-800"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="w-64 bg-gray-900 text-white flex flex-col border-r border-gray-800"> |
|
|
<div class="p-4 border-b border-gray-800"> |
|
|
<h1 class="text-2xl font-bold flex items-center"> |
|
|
<i class="fas fa-robot mr-2 text-blue-400"></i> |
|
|
KI-Agenten |
|
|
</h1> |
|
|
<p class="text-gray-400 text-sm mt-1">Deutsche AI-Lösungen</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-y-auto"> |
|
|
<div class="p-4"> |
|
|
<h2 class="text-lg font-semibold text-gray-300 mb-2 flex items-center"> |
|
|
<i class="fas fa-home mr-2 text-blue-400"></i> |
|
|
Navigation |
|
|
</h2> |
|
|
<ul class="space-y-1"> |
|
|
<li class="sidebar-item active px-3 py-2 rounded cursor-pointer flex items-center" onclick="showPage('dashboard')"> |
|
|
<i class="fas fa-tachometer-alt mr-2 text-blue-400"></i> |
|
|
Dashboard |
|
|
</li> |
|
|
<li class="sidebar-item px-3 py-2 rounded cursor-pointer flex items-center" onclick="showPage('agents')"> |
|
|
<i class="fas fa-robot mr-2 text-purple-400"></i> |
|
|
Meine Agenten |
|
|
</li> |
|
|
<li class="sidebar-item px-3 py-2 rounded cursor-pointer flex items-center" onclick="showPage('workflows')"> |
|
|
<i class="fas fa-project-diagram mr-2 text-green-400"></i> |
|
|
Workflows |
|
|
</li> |
|
|
<li class="sidebar-item px-3 py-2 rounded cursor-pointer flex items-center" onclick="showPage('knowledge')"> |
|
|
<i class="fas fa-brain mr-2 text-yellow-400"></i> |
|
|
Wissensbasis |
|
|
</li> |
|
|
<li class="sidebar-item px-3 py-2 rounded cursor-pointer flex items-center" onclick="showPage('analytics')"> |
|
|
<i class="fas fa-chart-bar mr-2 text-red-400"></i> |
|
|
Analysen |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-gray-800"> |
|
|
<h2 class="text-lg font-semibold text-gray-300 mb-2 flex items-center"> |
|
|
<i class="fas fa-cog mr-2 text-blue-400"></i> |
|
|
Einstellungen |
|
|
</h2> |
|
|
<ul class="space-y-1"> |
|
|
<li class="sidebar-item px-3 py-2 rounded cursor-pointer flex items-center" onclick="showPage('integrations')"> |
|
|
<i class="fas fa-plug mr-2 text-gray-400"></i> |
|
|
Integrationen |
|
|
</li> |
|
|
<li class="sidebar-item px-3 py-2 rounded cursor-pointer flex items-center" onclick="showPage('team')"> |
|
|
<i class="fas fa-users mr-2 text-gray-400"></i> |
|
|
Team |
|
|
</li> |
|
|
<li class="sidebar-item px-3 py-2 rounded cursor-pointer flex items-center" onclick="showPage('billing')"> |
|
|
<i class="fas fa-credit-card mr-2 text-gray-400"></i> |
|
|
Abrechnung |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-gray-800"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium">Max Mustermann</p> |
|
|
<p class="text-xs text-gray-400">Admin</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-white shadow-sm z-10"> |
|
|
<div class="flex items-center justify-between px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<h2 id="page-title" class="text-xl font-semibold">Dashboard</h2> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Suchen..." |
|
|
class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
<button class="pulse-animation gradient-bg text-white py-2 px-4 rounded-lg font-medium flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
Neuer Agent |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
|
|
|
|
|
<div id="dashboard-page" class="page-transition page-visible"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Willkommen zurück, Max</h2> |
|
|
<p class="text-gray-600">Hier ist dein Überblick über die KI-Agenten Plattform</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Aktive Agenten</p> |
|
|
<h3 class="text-2xl font-bold">12</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-500"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Laufende Workflows</p> |
|
|
<h3 class="text-2xl font-bold">5</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-500"> |
|
|
<i class="fas fa-project-diagram"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">API-Anfragen (24h)</p> |
|
|
<h3 class="text-2xl font-bold">1,248</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-500"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Speicherplatz</p> |
|
|
<h3 class="text-2xl font-bold">37%</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-500"> |
|
|
<i class="fas fa-database"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 mb-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold">Letzte Aktivitäten</h3> |
|
|
<button class="text-sm text-blue-500 hover:text-blue-700">Alle anzeigen</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 rounded-full bg-blue-100 text-blue-500 mr-3"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Kunden-Support Agent aktualisiert</p> |
|
|
<p class="text-sm text-gray-500">Vor 12 Minuten von Max Mustermann</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 rounded-full bg-green-100 text-green-500 mr-3"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Workflow "Datenanalyse" erfolgreich abgeschlossen</p> |
|
|
<p class="text-sm text-gray-500">Vor 1 Stunde automatisch</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 rounded-full bg-purple-100 text-purple-500 mr-3"> |
|
|
<i class="fas fa-project-diagram"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Neuer Workflow erstellt</p> |
|
|
<p class="text-sm text-gray-500">Vor 3 Stunden von Anna Schmidt</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Neuen Agenten erstellen</h3> |
|
|
<p class="text-gray-600 mb-4">Erstelle einen neuen KI-Agenten für spezifische Aufgaben</p> |
|
|
<button class="gradient-bg text-white py-2 px-4 rounded-lg font-medium w-full"> |
|
|
Agent erstellen |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Workflow starten</h3> |
|
|
<p class="text-gray-600 mb-4">Automatisierte Prozesse mit mehreren Agenten</p> |
|
|
<button class="gradient-bg text-white py-2 px-4 rounded-lg font-medium w-full"> |
|
|
Workflow erstellen |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Wissensbasis erweitern</h3> |
|
|
<p class="text-gray-600 mb-4">Füge neues Wissen für deine Agenten hinzu</p> |
|
|
<button class="gradient-bg text-white py-2 px-4 rounded-lg font-medium w-full"> |
|
|
Dokument hochladen |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="agents-page" class="page-transition page-hidden"> |
|
|
<div class="mb-6 flex justify-between items-center"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Meine Agenten</h2> |
|
|
<p class="text-gray-600">Verwalte deine KI-Agenten und deren Konfigurationen</p> |
|
|
</div> |
|
|
<button class="gradient-bg text-white py-2 px-4 rounded-lg font-medium flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
Neuer Agent |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="agent-card bg-white rounded-lg shadow p-6 transition-all duration-300"> |
|
|
<div class="flex items-start justify-between mb-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-500 mr-3"> |
|
|
<i class="fas fa-headset"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Kunden-Support</h3> |
|
|
<p class="text-gray-500 text-sm">Beantwortet Kundenanfragen</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Aktiv</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Beantwortet automatisch Kundenanfragen per E-Mail und Chat mit natürlicher Sprache.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">#support</span> |
|
|
<span class="px-2 py-1 bg-purple-100 text-purple-600 text-xs rounded-full">#nlp</span> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded-full">#24/7</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center text-sm"> |
|
|
<span class="text-gray-500">Zuletzt aktualisiert: 12.05.2023</span> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="agent-card bg-white rounded-lg shadow p-6 transition-all duration-300"> |
|
|
<div class="flex items-start justify-between mb-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-500 mr-3"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Daten-Analyst</h3> |
|
|
<p class="text-gray-500 text-sm">Analysiert Geschäftsdaten</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Aktiv</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Verarbeitet große Datenmengen und erstellt automatische Berichte und Vorhersagen.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">#analytics</span> |
|
|
<span class="px-2 py-1 bg-red-100 text-red-600 text-xs rounded-full">#machinelearning</span> |
|
|
<span class="px-2 py-1 bg-yellow-100 text-yellow-600 text-xs rounded-full">#reports</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center text-sm"> |
|
|
<span class="text-gray-500">Zuletzt aktualisiert: 05.05.2023</span> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="agent-card bg-white rounded-lg shadow p-6 transition-all duration-300"> |
|
|
<div class="flex items-start justify-between mb-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-500 mr-3"> |
|
|
<i class="fas fa-language"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg">Übersetzer</h3> |
|
|
<p class="text-gray-500 text-sm">Mehrsprachige Übersetzungen</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">In Wartung</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Übersetzt Texte zwischen 15 Sprachen mit hoher Genauigkeit und natürlichem Sprachfluss.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">#translation</span> |
|
|
<span class="px-2 py-1 bg-purple-100 text-purple-600 text-xs rounded-full">#multilingual</span> |
|
|
<span class="px-2 py-1 bg-pink-100 text-pink-600 text-xs rounded-full">#nlp</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center text-sm"> |
|
|
<span class="text-gray-500">Zuletzt aktualisiert: 28.04.2023</span> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="workflows-page" class="page-transition page-hidden"> |
|
|
<div class="mb-6 flex justify-between items-center"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Workflows</h2> |
|
|
<p class="text-gray-600">Automatisierte Prozesse mit mehreren KI-Agenten</p> |
|
|
</div> |
|
|
<button class="gradient-bg text-white py-2 px-4 rounded-lg font-medium flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
Neuer Workflow |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden mb-6"> |
|
|
<div class="grid grid-cols-12 bg-gray-100 p-4 font-medium text-gray-700"> |
|
|
<div class="col-span-4">Name</div> |
|
|
<div class="col-span-2">Status</div> |
|
|
<div class="col-span-2">Agenten</div> |
|
|
<div class="col-span-2">Letzte Ausführung</div> |
|
|
<div class="col-span-2">Aktionen</div> |
|
|
</div> |
|
|
|
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="grid grid-cols-12 p-4 items-center hover:bg-gray-50"> |
|
|
<div class="col-span-4 font-medium">Kunden-Support Pipeline</div> |
|
|
<div class="col-span-2"> |
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Aktiv</span> |
|
|
</div> |
|
|
<div class="col-span-2">3 Agenten</div> |
|
|
<div class="col-span-2 text-sm text-gray-500">Heute, 10:32</div> |
|
|
<div class="col-span-2 flex space-x-2"> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-chart-bar"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-12 p-4 items-center hover:bg-gray-50"> |
|
|
<div class="col-span-4 font-medium">Tägliche Berichterstattung</div> |
|
|
<div class="col-span-2"> |
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Aktiv</span> |
|
|
</div> |
|
|
<div class="col-span-2">2 Agenten</div> |
|
|
<div class="col-span-2 text-sm text-gray-500">Gestern, 06:00</div> |
|
|
<div class="col-span-2 flex space-x-2"> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-chart-bar"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-12 p-4 items-center hover:bg-gray-50"> |
|
|
<div class="col-span-4 font-medium">Datenbereinigung</div> |
|
|
<div class="col-span-2"> |
|
|
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">Pausiert</span> |
|
|
</div> |
|
|
<div class="col-span-2">1 Agent</div> |
|
|
<div class="col-span-2 text-sm text-gray-500">15.05.2023</div> |
|
|
<div class="col-span-2 flex space-x-2"> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-chart-bar"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Workflow Editor</h3> |
|
|
<div class="bg-gray-100 rounded-lg p-4 h-64 flex items-center justify-center text-gray-500"> |
|
|
<p>Wähle einen Workflow aus oder erstelle einen neuen, um ihn zu bearbeiten</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="knowledge-page" class="page-transition page-hidden"> |
|
|
<div class="mb-6 flex justify-between items-center"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Wissensbasis</h2> |
|
|
<p class="text-gray-600">Zentrales Wissen für deine KI-Agenten</p> |
|
|
</div> |
|
|
<button class="gradient-bg text-white py-2 px-4 rounded-lg font-medium flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
Dokument hinzufügen |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Dokumente</p> |
|
|
<h3 class="text-2xl font-bold">248</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-500"> |
|
|
<i class="fas fa-file-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Kategorien</p> |
|
|
<h3 class="text-2xl font-bold">12</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-500"> |
|
|
<i class="fas fa-folder"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Genutzter Speicher</p> |
|
|
<h3 class="text-2xl font-bold">37%</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-500"> |
|
|
<i class="fas fa-database"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Letztes Update</p> |
|
|
<h3 class="text-2xl font-bold">Heute</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-500"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden mb-6"> |
|
|
<div class="grid grid-cols-12 bg-gray-100 p-4 font-medium text-gray-700"> |
|
|
<div class="col-span-5">Name</div> |
|
|
<div class="col-span-2">Typ</div> |
|
|
<div class="col-span-2">Größe</div> |
|
|
<div class="col-span-2">Hinzugefügt</div> |
|
|
<div class="col-span-1">Aktionen</div> |
|
|
</div> |
|
|
|
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="grid grid-cols-12 p-4 items-center hover:bg-gray-50"> |
|
|
<div class="col-span-5 font-medium flex items-center"> |
|
|
<i class="fas fa-file-pdf text-red-500 mr-2"></i> |
|
|
Produkthandbuch 2023 |
|
|
</div> |
|
|
<div class="col-span-2 text-sm text-gray-500">PDF</div> |
|
|
<div class="col-span-2 text-sm text-gray-500">4.2 MB</div> |
|
|
<div class="col-span-2 text-sm text-gray-500">12.05.2023</div> |
|
|
<div class="col-span-1 flex justify-end"> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-12 p-4 items-center hover:bg-gray-50"> |
|
|
<div class="col-span-5 font-medium flex items-center"> |
|
|
<i class="fas fa-file-excel text-green-500 mr-2"></i> |
|
|
Kundenfeedback Q1 2023 |
|
|
</div> |
|
|
<div class="col-span-2 text-sm text-gray-500">Excel</div> |
|
|
<div class="col-span-2 text-sm text-gray-500">1.8 MB</div> |
|
|
<div class="col-span-2 text-sm text-gray-500">05.05.2023</div> |
|
|
<div class="col-span-1 flex justify-end"> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-12 p-4 items-center hover:bg-gray-50"> |
|
|
<div class="col-span-5 font-medium flex items-center"> |
|
|
<i class="fas fa-file-word text-blue-500 mr-2"></i> |
|
|
Support-Richtlinien |
|
|
</div> |
|
|
<div class="col-span-2 text-sm text-gray-500">Word</div> |
|
|
<div class="col-span-2 text-sm text-gray-500">2.5 MB</div> |
|
|
<div class="col-span-2 text-sm text-gray-500">28.04.2023</div> |
|
|
<div class="col-span-1 flex justify-end"> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Dokument hochladen</h3> |
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50"> |
|
|
<i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i> |
|
|
<p class="font-medium">Dateien hierher ziehen oder klicken zum Auswählen</p> |
|
|
<p class="text-gray-500 text-sm mt-1">Unterstützte Formate: PDF, DOCX, XLSX, PPTX, TXT, CSV</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="analytics-page" class="page-transition page-hidden"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Analysen</h2> |
|
|
<p class="text-gray-600">Leistungsmetriken und Nutzungsstatistiken</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Agenten-Nutzung</h3> |
|
|
<div class="h-64 flex items-center justify-center text-gray-500"> |
|
|
<p>Liniendiagramm der Agenten-Nutzung</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Workflow-Ausführungen</h3> |
|
|
<div class="h-64 flex items-center justify-center text-gray-500"> |
|
|
<p>Balkendiagramm der Workflow-Ausführungen</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">API-Anfragen</h3> |
|
|
<div class="h-64 flex items-center justify-center text-gray-500"> |
|
|
<p>Kreisdiagramm der API-Anfragen</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 mb-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold">Detaillierte Statistiken</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<select class="border border-gray-300 rounded-md px-3 py-1 text-sm"> |
|
|
<option>Letzte 7 Tage</option> |
|
|
<option>Letzte 30 Tage</option> |
|
|
<option>Dieses Quartal</option> |
|
|
<option>Dieses Jahr</option> |
|
|
</select> |
|
|
<button class="border border-gray-300 rounded-md px-3 py-1 text-sm"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-96 flex items-center justify-center text-gray-500"> |
|
|
<p>Detailliertes Liniendiagramm mit verschiedenen Metriken</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Top Agenten</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Kunden-Support</span> |
|
|
<span>1,248 Anfragen</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Daten-Analyst</span> |
|
|
<span>842 Anfragen</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-purple-500 h-2 rounded-full" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Übersetzer</span> |
|
|
<span>512 Anfragen</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-green-500 h-2 rounded-full" style="width: 30%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Systemauslastung</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>CPU</span> |
|
|
<span>37%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-yellow-500 h-2 rounded-full" style="width: 37%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>RAM</span> |
|
|
<span>58%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-red-500 h-2 rounded-full" style="width: 58%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Speicher</span> |
|
|
<span>42%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 42%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="integrations-page" class="page-transition page-hidden"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Integrationen</h2> |
|
|
<p class="text-gray-600">Verbinde deine KI-Agenten mit anderen Diensten</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-500 mr-3"> |
|
|
<i class="fab fa-slack"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold">Slack</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Integriere deine Agenten direkt in Slack-Kanäle für Team-Kommunikation.</p> |
|
|
<button class="w-full border border-gray-300 rounded-md py-2 text-sm font-medium"> |
|
|
Konfigurieren |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-500 mr-3"> |
|
|
<i class="fab fa-google"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold">Google Workspace</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Verbinde mit Google Docs, Sheets und Drive für Dokumentenverarbeitung.</p> |
|
|
<button class="w-full border border-gray-300 rounded-md py-2 text-sm font-medium"> |
|
|
Konfigurieren |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-500 mr-3"> |
|
|
<i class="fas fa-database"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold">SQL Datenbanken</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Verbinde mit MySQL, PostgreSQL oder anderen SQL-Datenbanken.</p> |
|
|
<button class="w-full border border-gray-300 rounded-md py-2 text-sm font-medium"> |
|
|
Konfigurieren |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Benutzerdefinierte Integration</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">API-Endpunkt</label> |
|
|
<input type="text" placeholder="https://api.example.com/v1" |
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Authentifizierung</label> |
|
|
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>API Key</option> |
|
|
<option>OAuth 2.0</option> |
|
|
<option>Basic Auth</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label> |
|
|
<textarea rows="3" placeholder="Beschreibe den Zweck dieser Integration..." |
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
|
|
</div> |
|
|
<div class="flex justify-end"> |
|
|
<button class="gradient-bg text-white px-4 py-2 rounded-md hover:opacity-90"> |
|
|
Integration speichern |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="team-page" class="page-transition page-hidden"> |
|
|
<div class="mb-6 flex justify-between items-center"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Team</h2> |
|
|
<p class="text-gray-600">Verwalte Teammitglieder und Berechtigungen</p> |
|
|
</div> |
|
|
<button class="gradient-bg text-white py-2 px-4 rounded-lg font-medium flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
Mitglied einladen |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden mb-6"> |
|
|
<div class="grid grid-cols-12 bg-gray-100 p-4 font-medium text-gray-700"> |
|
|
<div class="col-span-4">Mitglied</div> |
|
|
<div class="col-span-3">Rolle</div> |
|
|
<div class="col-span-3">Letzte Aktivität</div> |
|
|
<div class="col-span-2">Aktionen</div> |
|
|
</div> |
|
|
|
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="grid grid-cols-12 p-4 items-center hover:bg-gray-50"> |
|
|
<div class="col-span-4 flex items-center"> |
|
|
<div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold mr-3"> |
|
|
MM |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Max Mustermann</p> |
|
|
<p class="text-sm text-gray-500">max@beispiel.de</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-span-3"> |
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Admin</span> |
|
|
</div> |
|
|
<div class="col-span-3 text-sm text-gray-500">Heute, 11:45</div> |
|
|
<div class="col-span-2 flex justify-end"> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-12 p-4 items-center hover:bg-gray-50"> |
|
|
<div class="col-span-4 flex items-center"> |
|
|
<div class="h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold mr-3"> |
|
|
AS |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Anna Schmidt</p> |
|
|
<p class="text-sm text-gray-500">anna@beispiel.de</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-span-3"> |
|
|
<span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">Entwickler</span> |
|
|
</div> |
|
|
<div class="col-span-3 text-sm text-gray-500">Gestern, 15:30</div> |
|
|
<div class="col-span-2 flex justify-end"> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-12 p-4 items-center hover:bg-gray-50"> |
|
|
<div class="col-span-4 flex items-center"> |
|
|
<div class="h-10 w-10 rounded-full bg-green-500 flex items-center justify-center text-white font-bold mr-3"> |
|
|
TJ |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Thomas Jäger</p> |
|
|
<p class="text-sm text-gray-500">thomas@beispiel.de</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="col-span-3"> |
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Analyst</span> |
|
|
</div> |
|
|
<div class="col-span-3 text-sm text-gray-500">15.05.2023</div> |
|
|
<div class="col-span-2 flex justify-end"> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Neues Teammitglied einladen</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">E-Mail</label> |
|
|
<input type="email" placeholder="mitglied@beispiel.de" |
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Rolle</label> |
|
|
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>Admin</option> |
|
|
<option>Entwickler</option> |
|
|
<option>Analyst</option> |
|
|
<option>Betrachter</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-end"> |
|
|
<button class="gradient-bg text-white px-4 py-2 rounded-md hover:opacity-90 w-full"> |
|
|
Einladung senden |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="billing-page" class="page-transition page-hidden"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Abrechnung</h2> |
|
|
<p class="text-gray-600">Verwalte dein Abonnement und Zahlungsmethoden</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Aktueller Plan</h3> |
|
|
<div class="bg-blue-50 border border-blue-100 rounded-lg p-4 mb-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<div> |
|
|
<p class="font-medium">Professional</p> |
|
|
<p class="text-sm text-gray-600">€49/Monat</p> |
|
|
</div> |
|
|
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Aktiv</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mb-3">10 aktive Agenten, 50 Workflows, 100GB Speicher</p> |
|
|
<button class="w-full border border-blue-500 text-blue-500 rounded-md py-2 text-sm font-medium hover:bg-blue-50"> |
|
|
Plan ändern |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-600">Nächste Rechnung</span> |
|
|
<span class="font-medium">01.06.2023</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-600">Zahlungsmethode</span> |
|
|
<span class="font-medium">Mastercard **** 4242</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-600">Rechnungsadresse</span> |
|
|
<span class="font-medium">Musterstraße 1, 10115 Berlin</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Nutzungsübersicht</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Agenten</span> |
|
|
<span>8/10</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Workflows</span> |
|
|
<span>32/50</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-purple-500 h-2 rounded-full" style="width: 64%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Speicher</span> |
|
|
<span>37GB/100GB</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-green-500 h-2 rounded-full" style="width: 37%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>API-Anfragen</span> |
|
|
<span>12,482/50,000</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-yellow-500 h-2 rounded-full" style="width: 25%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Rechnungen</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded"> |
|
|
<div> |
|
|
<p class="font-medium">Mai 2023</p> |
|
|
<p class="text-sm text-gray-500">01.05.2023</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm font-medium">€49,00</span> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded"> |
|
|
<div> |
|
|
<p class="font-medium">April 2023</p> |
|
|
<p class="text-sm text-gray-500">01.04.2023</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm font-medium">€49,00</span> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded"> |
|
|
<div> |
|
|
<p class="font-medium">März 2023</p> |
|
|
<p class="text-sm text-gray-500">01.03.2023</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm font-medium">€49,00</span> |
|
|
<button class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full border border-gray-300 rounded-md py-2 text-sm font-medium mt-4 hover:bg-gray-50"> |
|
|
Alle Rechnungen anzeigen |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Zahlungsmethode</h3> |
|
|
<div class="border border-gray-200 rounded-lg p-4 mb-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fab fa-cc-mastercard text-2xl text-gray-700 mr-3"></i> |
|
|
<div> |
|
|
<p class="font-medium">Mastercard</p> |
|
|
<p class="text-sm text-gray-600">**** **** **** 4242</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Standard</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm text-gray-600"> |
|
|
<span>Läuft ab 05/24</span> |
|
|
<button class="text-blue-500 hover:text-blue-700">Bearbeiten</button> |
|
|
</div> |
|
|
</div> |
|
|
<button class="gradient-bg text-white px-4 py-2 rounded-md hover:opacity-90"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
Neue Zahlungsmethode hinzufügen |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="new-agent-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl"> |
|
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
|
<h3 class="text-lg font-semibold">Neuen Agenten erstellen</h3> |
|
|
<button class="text-gray-500 hover:text-gray-700" onclick="closeModal('new-agent-modal')"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="p-6"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Name des Agenten</label> |
|
|
<input type="text" placeholder="z.B. Kunden-Support Agent" |
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label> |
|
|
<textarea rows="3" placeholder="Beschreibe die Hauptaufgaben dieses Agenten..." |
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Kategorie</label> |
|
|
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>Support</option> |
|
|
<option>Analyse</option> |
|
|
<option>Übersetzung</option> |
|
|
<option>Datenverarbeitung</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Modell</label> |
|
|
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>DeepSeek V3.1</option> |
|
|
<option>Local LLM</option> |
|
|
<option>GPT-4</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Wissensbasis</label> |
|
|
<div class="border border-gray-300 rounded-md p-2 max-h-32 overflow-y-auto"> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="knowledge-1" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<label for="knowledge-1" class="ml-2 block text-sm text-gray-700"> |
|
|
Produkthandbuch 2023 |
|
|
</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="knowledge-2" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<label for="knowledge-2" class="ml-2 block text-sm text-gray-700"> |
|
|
Support-Richtlinien |
|
|
</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="knowledge-3" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
|
|
<label for="knowledge-3" class="ml-2 block text-sm text-gray-700"> |
|
|
FAQ Dokument |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50" onclick="closeModal('new-agent-modal')"> |
|
|
Abbrechen |
|
|
</button> |
|
|
<button class="gradient-bg text-white px-4 py-2 rounded-md hover:opacity-90"> |
|
|
<i class="fas fa-save mr-2"></i> |
|
|
Agent erstellen |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function showPage(pageId) { |
|
|
|
|
|
document.querySelectorAll('.page-transition').forEach(page => { |
|
|
page.classList.add('page-hidden'); |
|
|
page.classList.remove('page-visible'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById(pageId + '-page').classList.remove('page-hidden'); |
|
|
document.getElementById(pageId + '-page').classList.add('page-visible'); |
|
|
|
|
|
|
|
|
const titles = { |
|
|
'dashboard': 'Dashboard', |
|
|
'agents': 'Meine Agenten', |
|
|
'workflows': 'Workflows', |
|
|
'knowledge': 'Wissensbasis', |
|
|
'analytics': 'Analysen', |
|
|
'integrations': 'Integrationen', |
|
|
'team': 'Team', |
|
|
'billing': 'Abrechnung' |
|
|
}; |
|
|
document.getElementById('page-title').textContent = titles[pageId]; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.sidebar-item').forEach(item => { |
|
|
item.classList.remove('active'); |
|
|
}); |
|
|
event.currentTarget.classList.add('active'); |
|
|
} |
|
|
|
|
|
|
|
|
function openModal(modalId) { |
|
|
document.getElementById(modalId).classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function closeModal(modalId) { |
|
|
document.getElementById(modalId).classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('[onclick*="new-agent-modal"]').forEach(button => { |
|
|
button.addEventListener('click', () => openModal('new-agent-modal')); |
|
|
}); |
|
|
|
|
|
|
|
|
async function createAgent(agentData) { |
|
|
|
|
|
console.log('Creating agent:', agentData); |
|
|
|
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1500)); |
|
|
|
|
|
return { |
|
|
success: true, |
|
|
agentId: 'agent_' + Math.random().toString(36).substr(2, 9), |
|
|
message: 'Agent erfolgreich erstellt' |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
showPage('dashboard'); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=a40login/agenten" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
