|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Workflow Hub</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/@supabase/supabase-js@2"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.auth-bg { |
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); |
|
|
} |
|
|
.dashboard-card { |
|
|
transition: all 0.3s ease; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.dashboard-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
|
border-color: rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
background-color: #3b82f6; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
.active-nav::after { |
|
|
width: 100%; |
|
|
} |
|
|
.prompt-card { |
|
|
background: rgba(30, 41, 59, 0.5); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.prompt-card:hover { |
|
|
background: rgba(30, 41, 59, 0.7); |
|
|
} |
|
|
.dark .dark\:bg-slate-800 { |
|
|
background-color: #1e293b; |
|
|
} |
|
|
.dark .dark\:text-white { |
|
|
color: #fff; |
|
|
} |
|
|
.ai-response { |
|
|
border-left: 3px solid #3b82f6; |
|
|
background: rgba(30, 41, 59, 0.3); |
|
|
} |
|
|
.markdown-content h1 { |
|
|
font-size: 1.5rem; |
|
|
font-weight: bold; |
|
|
margin: 1rem 0; |
|
|
} |
|
|
.markdown-content h2 { |
|
|
font-size: 1.25rem; |
|
|
font-weight: bold; |
|
|
margin: 0.75rem 0; |
|
|
} |
|
|
.markdown-content pre { |
|
|
background: #0f172a; |
|
|
padding: 1rem; |
|
|
border-radius: 0.5rem; |
|
|
overflow-x: auto; |
|
|
} |
|
|
.markdown-content code { |
|
|
font-family: monospace; |
|
|
background: #0f172a; |
|
|
padding: 0.2rem 0.4rem; |
|
|
border-radius: 0.25rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 transition-colors duration-200"> |
|
|
|
|
|
<div id="app" class="min-h-screen"> |
|
|
|
|
|
<div id="auth-screens"> |
|
|
|
|
|
<div id="login-screen" class="hidden min-h-screen flex items-center justify-center p-4 auth-bg"> |
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-8 w-full max-w-md"> |
|
|
<div class="text-center mb-8"> |
|
|
<h1 class="text-3xl font-bold text-slate-800 dark:text-white">AI Workflow Hub</h1> |
|
|
<p class="text-slate-600 dark:text-slate-300 mt-2">Sign in to access your AI tools</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<button id="google-signin" class="w-full flex items-center justify-center gap-2 bg-white dark:bg-slate-700 text-slate-700 dark:text-white py-3 px-4 rounded-lg border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-600 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"> |
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google logo" class="h-5 w-5"> |
|
|
Continue with Google |
|
|
</button> |
|
|
|
|
|
<div class="relative flex items-center py-4"> |
|
|
<div class="flex-grow border-t border-slate-300 dark:border-slate-600"></div> |
|
|
<span class="flex-shrink mx-2 text-slate-500 dark:text-slate-400">or</span> |
|
|
<div class="flex-grow border-t border-slate-300 dark:border-slate-600"></div> |
|
|
</div> |
|
|
|
|
|
<form id="email-login-form" class="space-y-4"> |
|
|
<div> |
|
|
<label for="login-email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Email</label> |
|
|
<input type="email" id="login-email" required |
|
|
class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="login-password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Password</label> |
|
|
<input type="password" id="login-password" required |
|
|
class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="remember-me" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded"> |
|
|
<label for="remember-me" class="ml-2 block text-sm text-slate-700 dark:text-slate-300">Remember me</label> |
|
|
</div> |
|
|
<a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">Forgot password?</a> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"> |
|
|
Sign In |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 text-center"> |
|
|
<p class="text-slate-600 dark:text-slate-400">Don't have an account? |
|
|
<a href="#" id="show-signup" class="text-blue-600 dark:text-blue-400 font-medium hover:text-blue-500 dark:hover:text-blue-300">Sign up</a> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="dashboard" class="hidden min-h-screen"> |
|
|
|
|
|
<nav class="bg-white dark:bg-slate-800 shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<span class="text-xl font-bold text-blue-600 dark:text-blue-400">AI Hub</span> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="#" data-section="dashboard" class="nav-link active-nav border-blue-500 text-slate-900 dark:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Dashboard |
|
|
</a> |
|
|
<a href="#" data-section="agents" class="nav-link border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Agents |
|
|
</a> |
|
|
<a href="#" data-section="prompts" class="nav-link border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Prompts |
|
|
</a> |
|
|
<a href="#" data-section="knowledge" class="nav-link border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Knowledge |
|
|
</a> |
|
|
<a href="#" data-section="chat" class="nav-link border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
AI Chat |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button id="theme-toggle" type="button" class="bg-white dark:bg-slate-700 p-1 rounded-full text-slate-400 dark:text-slate-300 hover:text-slate-500 dark:hover:text-slate-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
<span class="sr-only">Toggle theme</span> |
|
|
<i class="fas fa-moon dark:hidden h-6 w-6"></i> |
|
|
<i class="fas fa-sun hidden dark:block h-6 w-6"></i> |
|
|
</button> |
|
|
|
|
|
<button type="button" class="ml-3 bg-white dark:bg-slate-700 p-1 rounded-full text-slate-400 dark:text-slate-300 hover:text-slate-500 dark:hover:text-slate-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
<span class="sr-only">View notifications</span> |
|
|
<i class="fas fa-bell h-6 w-6"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div class="ml-3 relative"> |
|
|
<div> |
|
|
<button type="button" class="bg-white dark:bg-slate-700 rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> |
|
|
<span class="sr-only">Open user menu</span> |
|
|
<img class="h-8 w-8 rounded-full" id="nav-profile-img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="user-menu" class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-slate-700 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-600" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-600" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a> |
|
|
<a href="#" id="sign-out" class="block px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-600" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
|
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars h-6 w-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sm:hidden hidden" id="mobile-menu"> |
|
|
<div class="pt-2 pb-3 space-y-1"> |
|
|
<a href="#" data-section="dashboard" class="bg-blue-50 dark:bg-slate-700 border-blue-500 text-blue-700 dark:text-blue-400 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dashboard</a> |
|
|
<a href="#" data-section="agents" class="border-transparent text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Agents</a> |
|
|
<a href="#" data-section="prompts" class="border-transparent text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Prompts</a> |
|
|
<a href="#" data-section="knowledge" class="border-transparent text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Knowledge</a> |
|
|
<a href="#" data-section="chat" class="border-transparent text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">AI Chat</a> |
|
|
</div> |
|
|
<div class="pt-4 pb-3 border-t border-slate-200 dark:border-slate-600"> |
|
|
<div class="flex items-center px-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" id="mobile-profile-img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<div class="text-base font-medium text-slate-800 dark:text-white" id="mobile-profile-name">John Doe</div> |
|
|
<div class="text-sm font-medium text-slate-500 dark:text-slate-400" id="mobile-profile-email">john@example.com</div> |
|
|
</div> |
|
|
<button id="mobile-theme-toggle" type="button" class="ml-auto flex-shrink-0 bg-white dark:bg-slate-700 p-1 rounded-full text-slate-400 dark:text-slate-300 hover:text-slate-500 dark:hover:text-slate-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
<span class="sr-only">Toggle theme</span> |
|
|
<i class="fas fa-moon dark:hidden h-6 w-6"></i> |
|
|
<i class="fas fa-sun hidden dark:block h-6 w-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-3 space-y-1"> |
|
|
<a href="#" class="block px-4 py-2 text-base font-medium text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700">Your Profile</a> |
|
|
<a href="#" class="block px-4 py-2 text-base font-medium text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700">Settings</a> |
|
|
<a href="#" id="mobile-sign-out" class="block px-4 py-2 text-base font-medium text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700">Sign out</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="py-6"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
|
|
|
<div id="dashboard-section" class="section-content"> |
|
|
<div class="mb-6"> |
|
|
<h1 class="text-2xl font-bold text-slate-800 dark:text-white">Dashboard</h1> |
|
|
<p class="text-slate-600 dark:text-slate-400">Welcome back! Here's your AI workflow hub.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> |
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-lg bg-blue-50 dark:bg-slate-700 text-blue-600 dark:text-blue-400"> |
|
|
<i class="fas fa-bolt text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-sm font-medium text-slate-500 dark:text-slate-400">Active Agents</p> |
|
|
<p class="text-2xl font-semibold text-slate-900 dark:text-white">12</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-lg bg-green-50 dark:bg-slate-700 text-green-600 dark:text-green-400"> |
|
|
<i class="fas fa-code text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-sm font-medium text-slate-500 dark:text-slate-400">Saved Prompts</p> |
|
|
<p class="text-2xl font-semibold text-slate-900 dark:text-white">47</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-lg bg-purple-50 dark:bg-slate-700 text-purple-600 dark:text-purple-400"> |
|
|
<i class="fas fa-book text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-sm font-medium text-slate-500 dark:text-slate-400">Knowledge Docs</p> |
|
|
<p class="text-2xl font-semibold text-slate-900 dark:text-white">23</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="text-lg font-medium text-slate-800 dark:text-white mb-4">Quick Actions</h2> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> |
|
|
<button class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 text-left hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border border-slate-200 dark:border-slate-700"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-2 rounded-md bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 mr-3"> |
|
|
<i class="fas fa-comment-dots"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-slate-800 dark:text-white">New Chat</h3> |
|
|
<p class="text-sm text-slate-500 dark:text-slate-400">Start a conversation</p> |
|
|
</div> |
|
|
</div> |
|
|
</button> |
|
|
|
|
|
<button class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 text-left hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border border-slate-200 dark:border-slate-700"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-2 rounded-md bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 mr-3"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-slate-800 dark:text-white">Add Prompt</h3> |
|
|
<p class="text-sm text-slate-500 dark:text-slate-400">Create new prompt</p> |
|
|
</div> |
|
|
</div> |
|
|
</button> |
|
|
|
|
|
<button class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 text-left hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border border-slate-200 dark:border-slate-700"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-2 rounded-md bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400 mr-3"> |
|
|
<i class="fas fa-file-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-slate-800 dark:text-white">New Doc</h3> |
|
|
<p class="text-sm text-slate-500 dark:text-slate-400">Add to knowledge base</p> |
|
|
</div> |
|
|
</div> |
|
|
</button> |
|
|
|
|
|
<button class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 text-left hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border border-slate-200 dark:border-slate-700"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-2 rounded-md bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-400 mr-3"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-slate-800 dark:text-white">Run Agent</h3> |
|
|
<p class="text-sm text-slate-500 dark:text-slate-400">Execute workflow</p> |
|
|
</div> |
|
|
</div> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm overflow-hidden dashboard-card"> |
|
|
<div class="px-6 py-5 border-b border-slate-200 dark:border-slate-700"> |
|
|
<h3 class="text-lg font-medium leading-6 text-slate-900 dark:text-white">Recent Activity</h3> |
|
|
</div> |
|
|
<div class="divide-y divide-slate-200 dark:divide-slate-700"> |
|
|
<div class="px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-comment text-blue-500"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-slate-900 dark:text-white">New chat started</div> |
|
|
<div class="text-sm text-slate-500 dark:text-slate-400">With GPT-4 about marketing strategies</div> |
|
|
</div> |
|
|
<div class="ml-auto text-sm text-slate-500 dark:text-slate-400"> |
|
|
2h ago |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-code text-green-500"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-slate-900 dark:text-white">Prompt saved</div> |
|
|
<div class="text-sm text-slate-500 dark:text-slate-400">"Content calendar generator"</div> |
|
|
</div> |
|
|
<div class="ml-auto text-sm text-slate-500 dark:text-slate-400"> |
|
|
5h ago |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-robot text-purple-500"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-slate-900 dark:text-white">Agent executed</div> |
|
|
<div class="text-sm text-slate-500 dark:text-slate-400">"Social media post generator"</div> |
|
|
</div> |
|
|
<div class="ml-auto text-sm text-slate-500 dark:text-slate-400"> |
|
|
1d ago |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-4 bg-slate-50 dark:bg-slate-700 text-right"> |
|
|
<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
View All Activity |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="agents-section" class="section-content hidden"> |
|
|
<div class="mb-6"> |
|
|
<h1 class="text-2xl font-bold text-slate-800 dark:text-white">AI Agents</h1> |
|
|
<p class="text-slate-600 dark:text-slate-400">Pre-configured automation workflows</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card"> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-3 rounded-lg bg-blue-50 dark:bg-slate-700 text-blue-600 dark:text-blue-400 mr-4"> |
|
|
<i class="fas fa-comment-dots text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Social Caption Generator</h3> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Creates engaging social media captions based on your input</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">Instagram</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Twitter</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">LinkedIn</span> |
|
|
</div> |
|
|
<button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"> |
|
|
Run Agent |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card"> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-3 rounded-lg bg-green-50 dark:bg-slate-700 text-green-600 dark:text-green-400 mr-4"> |
|
|
<i class="fas fa-image text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Image Generator</h3> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Creates AI-generated images based on your description</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">DALL·E</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">Stable Diffusion</span> |
|
|
</div> |
|
|
<button class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"> |
|
|
Run Agent |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card"> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-3 rounded-lg bg-purple-50 dark:bg-slate-700 text-purple-600 dark:text-purple-400 mr-4"> |
|
|
<i class="fas fa-chart-line text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Data Analyzer</h3> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Analyzes and visualizes your data with AI insights</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">CSV</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200">Excel</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">JSON</span> |
|
|
</div> |
|
|
<button class="w-full bg-purple-600 text-white py-2 px-4 rounded-lg hover:bg-purple-700 transition focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"> |
|
|
Run Agent |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card"> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-3 rounded-lg bg-yellow-50 dark:bg-slate-700 text-yellow-600 dark:text-yellow-400 mr-4"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Email Writer</h3> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Composes professional emails based on your brief</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">Business</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Follow-up</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">Cold Outreach</span> |
|
|
</div> |
|
|
<button class="w-full bg-yellow-600 text-white py-2 px-4 rounded-lg hover:bg-yellow-700 transition focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2"> |
|
|
Run Agent |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card"> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-3 rounded-lg bg-red-50 dark:bg-slate-700 text-red-600 dark:text-red-400 mr-4"> |
|
|
<i class="fas fa-file-alt text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Content Summarizer</h3> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Summarizes long articles and documents</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">Articles</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">PDFs</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">Webpages</span> |
|
|
</div> |
|
|
<button class="w-full bg-red-600 text-white py-2 px-4 rounded-lg hover:bg-red-700 transition focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"> |
|
|
Run Agent |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card border-2 border-dashed border-slate-300 dark:border-slate-600 hover:border-blue-500 dark:hover:border-blue-400 transition-colors flex flex-col items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-plus text-3xl text-slate-400 dark:text-slate-500 mb-3"></i> |
|
|
<h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Create New Agent</h3> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Build a custom AI workflow</p> |
|
|
<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
New Agent |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="prompts-section" class="section-content hidden"> |
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h1 class="text-2xl font-bold text-slate-800 dark:text-white">Prompt Library</h1> |
|
|
<p class="text-slate-600 dark:text-slate-400">Your collection of AI prompts and templates</p> |
|
|
</div> |
|
|
<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
<i class="fas fa-plus mr-2"></i> New Prompt |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6 bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 dashboard-card"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Category</label> |
|
|
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-slate-300 dark:border-slate-600 dark:bg-slate-700 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
|
<option>All Categories</option> |
|
|
<option>Marketing</option> |
|
|
<option>Content</option> |
|
|
<option>Code</option> |
|
|
<option>Analysis</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">AI Model</label> |
|
|
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-slate-300 dark:border-slate-600 dark:bg-slate-700 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
|
<option>All Models</option> |
|
|
<option>GPT-4</option> |
|
|
<option>GPT-3.5</option> |
|
|
<option>Claude</option> |
|
|
<option>Gemini</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Sort By</label> |
|
|
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-slate-300 dark:border-slate-600 dark:bg-slate-700 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> |
|
|
<option>Recently Used</option> |
|
|
<option>Most Popular</option> |
|
|
<option>A-Z</option> |
|
|
<option>Newest First</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Search</label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-search text-slate-400"></i> |
|
|
</div> |
|
|
<input type="text" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 sm:text-sm border-slate-300 dark:border-slate-600 dark:bg-slate-700 rounded-md" placeholder="Search prompts..."> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="prompt-card rounded-lg p-4 cursor-pointer transition-colors"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="font-medium text-slate-800 dark:text-white">Blog Post Outline</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">GPT-4</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Generates a structured outline for a blog post based on your topic and keywords.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Content</span> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">SEO</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center text-sm text-slate-500 dark:text-slate-400"> |
|
|
<i class="fas fa-history mr-1"></i> 2 days ago |
|
|
</div> |
|
|
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"> |
|
|
<i class="fas fa-play"></i> Run |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="prompt-card rounded-lg p-4 cursor-pointer transition-colors"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="font-medium text-slate-800 dark:text-white">Python Code Debugger</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">Claude</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Analyzes and fixes errors in your Python code with explanations.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">Programming</span> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">Debugging</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center text-sm text-slate-500 dark:text-slate-400"> |
|
|
<i class="fas fa-history mr-1"></i> 1 week ago |
|
|
</div> |
|
|
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"> |
|
|
<i class="fas fa-play"></i> Run |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="prompt-card rounded-lg p-4 cursor-pointer transition-colors"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="font-medium text-slate-800 dark:text-white">Cold Email Template</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">GPT-4</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Creates professional cold email templates for outreach campaigns.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">Sales</span> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">Outreach</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center text-sm text-slate-500 dark:text-slate-400"> |
|
|
<i class="fas fa-history mr-1"></i> 3 days ago |
|
|
</div> |
|
|
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"> |
|
|
<i class="fas fa-play"></i> Run |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="prompt-card rounded-lg p-4 cursor-pointer transition-colors"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="font-medium text-slate-800 dark:text-white">Data Analysis Report</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Gemini</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Generates insights and reports from your dataset in natural language.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">Analysis</span> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">Data</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center text-sm text-slate-500 dark:text-slate-400"> |
|
|
<i class="fas fa-history mr-1"></i> 5 days ago |
|
|
</div> |
|
|
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"> |
|
|
<i class="fas fa-play"></i> Run |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="prompt-card rounded-lg p-4 cursor-pointer transition-colors"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="font-medium text-slate-800 dark:text-white">Social Media Post</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">GPT-4</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Creates engaging social media posts for various platforms.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">Marketing</span> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200">Social</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center text-sm text-slate-500 dark:text-slate-400"> |
|
|
<i class="fas fa-history mr-1"></i> 1 day ago |
|
|
</div> |
|
|
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"> |
|
|
<i class="fas fa-play"></i> Run |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="prompt-card rounded-lg p-4 cursor-pointer transition-colors"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="font-medium text-slate-800 dark:text-white">Product Description</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">GPT-4</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Writes compelling product descriptions for e-commerce.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">E-commerce</span> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">SEO</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center text-sm text-slate-500 dark:text-slate-400"> |
|
|
<i class="fas fa-history mr-1"></i> 4 days ago |
|
|
</div> |
|
|
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"> |
|
|
<i class="fas fa-play"></i> Run |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="knowledge-section" class="section-content hidden"> |
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h1 class="text-2xl font-bold text-slate-800 dark:text-white">Knowledge Base</h1> |
|
|
<p class="text-slate-600 dark:text-slate-400">Your centralized documentation and resources</p> |
|
|
</div> |
|
|
<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
<i class="fas fa-plus mr-2"></i> New Document |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-6 dashboard-card cursor-pointer"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="p-3 rounded-lg bg-blue-50 dark:bg-slate-700 text-blue-600 dark:text-blue-400 mr-4"> |
|
|
<i class="fas fa-file-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">API Documentation</h3> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">Endpoints and usage examples for our REST API</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">API</span> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">Technical</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-6 dashboard-card cursor-pointer"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="p-3 rounded-lg bg-green-50 dark:bg-slate-700 text-green-600 dark:text-green-400 mr-4"> |
|
|
<i class="fas fa-book"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Style Guide</h3> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">Brand guidelines and content writing standards</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Brand</span> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">Content</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-6 dashboard-card cursor-pointer"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="p-3 rounded-lg bg-purple-50 dark:bg-slate-700 text-purple-600 dark:text-purple-400 mr-4"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Onboarding</h3> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">New employee onboarding process and resources</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">HR</span> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">Process</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-6 dashboard-card cursor-pointer"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="p-3 rounded-lg bg-red-50 dark:bg-slate-700 text-red-600 dark:text-red-400 mr-4"> |
|
|
<i class="fas fa-server"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Infrastructure</h3> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">Server setup and deployment procedures</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">DevOps</span> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">Technical</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-6 dashboard-card cursor-pointer"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="p-3 rounded-lg bg-yellow-50 dark:bg-slate-700 text-yellow-600 dark:text-yellow-400 mr-4"> |
|
|
<i class="fas fa-chart-pie"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Analytics</h3> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">Metrics definitions and reporting standards</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">Data</span> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">Reporting</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-6 dashboard-card cursor-pointer"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="p-3 rounded-lg bg-indigo-50 dark:bg-slate-700 text-indigo-600 dark:text-indigo-400 mr-4"> |
|
|
<i class="fas fa-lightbulb"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Best Practices</h3> |
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">Team knowledge and lessons learned</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">Knowledge</span> |
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Process</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chat-section" class="section-content hidden"> |
|
|
<div class="mb-6"> |
|
|
<h1 class="text-2xl font-bold text-slate-800 dark:text-white">AI Chat</h1> |
|
|
<p class="text-slate-600 dark:text-slate-400">Conversational interface with multiple AI models</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col h-[calc(100vh-200px)]"> |
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-t-xl shadow-sm p-4 border-b border-slate-200 dark:border-slate-700"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h2 class="text-lg font-medium text-slate-800 dark:text-white">New Conversation</h2> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div> |
|
|
<label for="ai-model" class="sr-only">AI Model</label> |
|
|
<select id="ai-model" class="block w-full rounded-md border-slate-300 dark:border-slate-600 dark:bg-slate-700 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"> |
|
|
<option>GPT-4</option> |
|
|
<option>GPT-3.5</option> |
|
|
<option>Claude 3</option> |
|
|
<option>Gemini Pro</option> |
|
|
<option>DeepSeek</option> |
|
|
</select> |
|
|
</div> |
|
|
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
<i class="fas fa-plus mr-1"></i> New |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto bg-white dark:bg-slate-800 p-4"> |
|
|
|
|
|
<div class="mb-6 ai-response p-4 rounded-lg"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-600 dark:text-blue-400"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-slate-900 dark:text-white mb-1">AI Assistant</div> |
|
|
<div class="markdown-content text-sm text-slate-700 dark:text-slate-300"> |
|
|
<p>Hello! I'm your AI assistant. How can I help you today? Here are some things I can do:</p> |
|
|
<ul class="list-disc pl-5 mt-2"> |
|
|
<li>Answer questions on various topics</li> |
|
|
<li>Help with content creation and editing</li> |
|
|
<li>Generate code and explain programming concepts</li> |
|
|
<li>Analyze and summarize documents</li> |
|
|
</ul> |
|
|
<p class="mt-2">What would you like to work on?</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6 p-4 rounded-lg bg-slate-100 dark:bg-slate-700"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-slate-200 dark:bg-slate-600 flex items-center justify-center text-slate-600 dark:text-slate-300"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-slate-900 dark:text-white mb-1">You</div> |
|
|
<div class="text-sm text-slate-700 dark:text-slate-300"> |
|
|
Can you help me write a Python script to analyze CSV data? |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6 ai-response p-4 rounded-lg"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-600 dark:text-blue-400"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-slate-900 dark:text-white mb-1">AI Assistant</div> |
|
|
<div class="markdown-content text-sm text-slate-700 dark:text-slate-300"> |
|
|
<p>Certainly! Here's a Python script using pandas to analyze CSV data:</p> |
|
|
<pre><code class="language-python">import pandas as pd |
|
|
|
|
|
# Load the CSV file |
|
|
df = pd.read_csv('data.csv') |
|
|
|
|
|
# Display basic statistics |
|
|
print(df.describe()) |
|
|
|
|
|
# Show the first 5 rows |
|
|
print(df.head()) |
|
|
|
|
|
# Calculate specific metrics |
|
|
average_value = df['column_name'].mean() |
|
|
max_value = df['column_name'].max() |
|
|
|
|
|
print(f"Average: {average_value}") |
|
|
print(f"Maximum: {max_value}")</code></pre> |
|
|
<p class="mt-2">You'll need to install pandas first if you don't have it:</p> |
|
|
<pre><code class="language-bash">pip install pandas</code></pre> |
|
|
<p class="mt-2">Would you like me to explain any part of this in more detail or modify it for your specific needs?</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-b-xl shadow-sm p-4 border-t border-slate-200 dark:border-slate-700"> |
|
|
<div class="flex items-end space-x-2"> |
|
|
<div class="flex-1"> |
|
|
<textarea rows="2" class="block w-full rounded-md border-slate-300 dark:border-slate-600 dark:bg-slate-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="Type your message..."></textarea> |
|
|
</div> |
|
|
<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> Send |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-2 flex justify-between items-center text-xs text-slate-500 dark:text-slate-400"> |
|
|
<div> |
|
|
<button type="button" class="inline-flex items-center text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300"> |
|
|
<i class="fas fa-paperclip mr-1"></i> Attach |
|
|
</button> |
|
|
<button type="button" class="ml-3 inline-flex items-center text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300"> |
|
|
<i class="fas fa-code mr-1"></i> Code |
|
|
</button> |
|
|
</div> |
|
|
<div> |
|
|
<span>Press Enter to send, Shift+Enter for new line</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// Initialize Supabase |
|
|
const supabaseUrl = 'https://your-project.supabase.co'; |
|
|
const supabaseKey = 'your-anon-key'; |
|
|
const supabase = supabase.createClient(supabaseUrl, supabaseKey); |
|
|
|
|
|
// App State |
|
|
const state = { |
|
|
currentScreen: 'login', |
|
|
currentSection: 'dashboard', |
|
|
user: null, |
|
|
darkMode: localStorage.getItem('darkMode') === 'true' || |
|
|
(!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches) |
|
|
}; |
|
|
|
|
|
// DOM Elements |
|
|
const authScreens = document.getElementById('auth-screens'); |
|
|
const loginScreen = document.getElementById('login-screen'); |
|
|
const dashboard = document.getElementById('dashboard'); |
|
|
const googleSignInBtn = document.getElementById('google-signin'); |
|
|
const signOutBtn = document.getElementById('sign-out'); |
|
|
const mobileSignOutBtn = document.getElementById('mobile-sign-out'); |
|
|
const mobileMenuBtn = document.querySelector('[aria-controls="mobile-menu"]'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
const userMenuBtn = document.getElementById(' |
|
|
</html> |
