| <!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> |
