Download index.html from a40login/test: direct link, hf CLI and curl.
- Browser
- Download file 79.1 kB
-
https://huggingface.co/spaces/a40login/test/resolve/main/index.html
- Command line
-
hf download hf://spaces/a40login/test/index.html
-
curl -L -o index.html https://huggingface.co/spaces/a40login/test/resolve/main/index.html
79.1 kB
| <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"> | |
| <!-- App Container --> | |
| <div id="app" class="min-h-screen"> | |
| <!-- Auth Screens --> | |
| <div id="auth-screens"> | |
| <!-- Login Screen --> | |
| <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> | |
| <!-- Dashboard --> | |
| <div id="dashboard" class="hidden min-h-screen"> | |
| <!-- Navigation --> | |
| <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> | |
| <!-- Profile dropdown --> | |
| <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"> | |
| <!-- Mobile menu button --> | |
| <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> | |
| <!-- Mobile menu, show/hide based on menu state. --> | |
| <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> | |
| <!-- Main Content --> | |
| <div class="py-6"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <!-- Dashboard Section --> | |
| <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> | |
| <!-- Stats --> | |
| <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> | |
| <!-- Quick Actions --> | |
| <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> | |
| <!-- Recent Activity --> | |
| <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> | |
| <!-- Agents Section --> | |
| <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"> | |
| <!-- Agent Card 1 --> | |
| <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> | |
| <!-- Agent Card 2 --> | |
| <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> | |
| <!-- Agent Card 3 --> | |
| <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> | |
| <!-- Agent Card 4 --> | |
| <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> | |
| <!-- Agent Card 5 --> | |
| <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> | |
| <!-- Add New Agent Card --> | |
| <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> | |
| <!-- Prompts Section --> | |
| <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> | |
| <!-- Filters --> | |
| <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> | |
| <!-- Prompts Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Prompt Card 1 --> | |
| <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> | |
| <!-- Prompt Card 2 --> | |
| <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> | |
| <!-- Prompt Card 3 --> | |
| <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> | |
| <!-- Prompt Card 4 --> | |
| <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> | |
| <!-- Prompt Card 5 --> | |
| <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> | |
| <!-- Prompt Card 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">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> | |
| <!-- Knowledge Base Section --> | |
| <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> | |
| <!-- Knowledge Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Document Card 1 --> | |
| <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> | |
| <!-- Document Card 2 --> | |
| <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> | |
| <!-- Document Card 3 --> | |
| <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> | |
| <!-- Document Card 4 --> | |
| <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> | |
| <!-- Document Card 5 --> | |
| <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> | |
| <!-- Document Card 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-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> | |
| <!-- AI Chat Section --> | |
| <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)]"> | |
| <!-- Chat Header --> | |
| <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> | |
| <!-- Chat Messages --> | |
| <div class="flex-1 overflow-y-auto bg-white dark:bg-slate-800 p-4"> | |
| <!-- AI Response --> | |
| <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> | |
| <!-- User Message --> | |
| <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> | |
| <!-- AI Response --> | |
| <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> | |
| <!-- Chat Input --> | |
| <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> | |