Download index.html from brainable/se3: direct link, hf CLI and curl.
- Browser
- Download file 36 kB
-
https://huggingface.co/spaces/brainable/se3/resolve/main/index.html
- Command line
-
hf download hf://spaces/brainable/se3/index.html
-
curl -L -o index.html https://huggingface.co/spaces/brainable/se3/resolve/main/index.html
36 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>My Agents | Agent Builder</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#00ff9d', | |
| secondary: '#00b4ff', | |
| dark: '#0a0a0a', | |
| darker: '#050505', | |
| light: '#f0f0f0', | |
| gray: { | |
| 800: '#1e1e1e', | |
| 700: '#2d2d2d', | |
| 600: '#3a3a3a', | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| mono: ['Roboto Mono', 'monospace'], | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'blink': 'blink 1s step-end infinite', | |
| }, | |
| keyframes: { | |
| blink: { | |
| '0%, 100%': { opacity: '1' }, | |
| '50%': { opacity: '0' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .terminal-input::before { | |
| content: '> '; | |
| color: #00ff9d; | |
| } | |
| .code-block { | |
| position: relative; | |
| } | |
| .code-block::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 100%; | |
| background: linear-gradient(to bottom, #00ff9d, #00b4ff); | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 10px rgba(0, 255, 157, 0.5); | |
| } | |
| .glow-effect:hover { | |
| box-shadow: 0 0 15px rgba(0, 255, 157, 0.7); | |
| } | |
| .sidebar-item:hover { | |
| background: linear-gradient(90deg, rgba(0, 255, 157, 0.1) 0%, rgba(0, 255, 157, 0) 100%); | |
| border-left: 2px solid #00ff9d; | |
| } | |
| .sidebar-item.active { | |
| background: linear-gradient(90deg, rgba(0, 255, 157, 0.2) 0%, rgba(0, 255, 157, 0) 100%); | |
| border-left: 2px solid #00ff9d; | |
| } | |
| .tab-item { | |
| position: relative; | |
| } | |
| .tab-item.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background-color: #00ff9d; | |
| } | |
| .agent-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 255, 157, 0.2); | |
| } | |
| .status-active { | |
| background-color: rgba(0, 255, 157, 0.1); | |
| color: #00ff9d; | |
| } | |
| .status-draft { | |
| background-color: rgba(0, 180, 255, 0.1); | |
| color: #00b4ff; | |
| } | |
| .status-paused { | |
| background-color: rgba(255, 165, 0, 0.1); | |
| color: #ffa500; | |
| } | |
| .status-error { | |
| background-color: rgba(255, 0, 0, 0.1); | |
| color: #ff5555; | |
| } | |
| .grid-stack { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .dropdown-content { | |
| display: none; | |
| position: absolute; | |
| right: 0; | |
| background-color: #1e1e1e; | |
| min-width: 160px; | |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| z-index: 1; | |
| border: 1px solid #2d2d2d; | |
| border-radius: 6px; | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| .dropdown-content a { | |
| color: #f0f0f0; | |
| padding: 10px 16px; | |
| text-decoration: none; | |
| display: block; | |
| font-size: 14px; | |
| } | |
| .dropdown-content a:hover { | |
| background-color: #2d2d2d; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark text-light font-sans flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-darker border-r border-gray-800 flex flex-col"> | |
| <div class="p-4 border-b border-gray-800 flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-dark"></i> | |
| </div> | |
| <h1 class="text-xl font-bold"> | |
| <span class="text-primary">Agent</span>Builder | |
| </h1> | |
| </div> | |
| <div class="p-4 border-b border-gray-800"> | |
| <button class="w-full bg-primary hover:bg-opacity-90 text-dark font-semibold py-2 px-4 rounded-md flex items-center justify-center transition-all"> | |
| <i class="fas fa-plus mr-2"></i> New Agent | |
| </button> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <div class="p-2"> | |
| <h3 class="text-xs uppercase text-gray-500 font-mono tracking-wider mb-2 px-3">Navigation</h3> | |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-sliders-h mr-3 text-gray-400"></i> | |
| <span>Agent Builder</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-store mr-3 text-gray-400"></i> | |
| <span>MCP Store</span> | |
| </a> | |
| <a href="#" class="sidebar-item active flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <i class="fas fa-boxes mr-3 text-primary"></i> | |
| <span>My Agents</span> | |
| </a> | |
| </div> | |
| <div class="p-2 mt-4"> | |
| <h3 class="text-xs uppercase text-gray-500 font-mono tracking-wider mb-2 px-3">Recent Agents</h3> | |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <div class="w-2 h-2 rounded-full bg-primary mr-3"></div> | |
| <span>Customer Support Bot</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <div class="w-2 h-2 rounded-full bg-secondary mr-3"></div> | |
| <span>Data Analyzer</span> | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all"> | |
| <div class="w-2 h-2 rounded-full bg-gray-500 mr-3"></div> | |
| <span>Content Generator</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="p-4 border-t border-gray-800"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium">John Doe</div> | |
| <div class="text-xs text-gray-500">Admin</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Bar --> | |
| <div class="bg-darker border-b border-gray-800 p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <h2 class="text-xl font-bold"> | |
| <span class="text-primary">My</span> Agents | |
| </h2> | |
| <div class="ml-4 text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded font-mono"> | |
| <span class="text-primary">12</span> agents total | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative mr-4"> | |
| <input type="text" placeholder="Search agents..." class="bg-gray-800 border border-gray-700 rounded-md pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent w-64"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i> | |
| </div> | |
| <div class="relative mr-4"> | |
| <select class="bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent appearance-none pr-8"> | |
| <option>All Status</option> | |
| <option>Active</option> | |
| <option>Draft</option> | |
| <option>Paused</option> | |
| <option>Error</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500 pointer-events-none"></i> | |
| </div> | |
| <div class="relative"> | |
| <select class="bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent appearance-none pr-8"> | |
| <option>Sort by: Last Modified</option> | |
| <option>Sort by: Name</option> | |
| <option>Sort by: Created Date</option> | |
| <option>Sort by: Usage</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500 pointer-events-none"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Content Area --> | |
| <div class="flex-1 overflow-auto p-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Stats Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm text-gray-400">Total Agents</div> | |
| <div class="text-2xl font-bold">12</div> | |
| </div> | |
| <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-robot text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span class="text-primary">+2</span> this month | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm text-gray-400">Active</div> | |
| <div class="text-2xl font-bold">8</div> | |
| </div> | |
| <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-play text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span class="text-primary">64%</span> of total | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm text-gray-400">API Calls</div> | |
| <div class="text-2xl font-bold">1.2K</div> | |
| </div> | |
| <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-bolt text-yellow-500"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span class="text-primary">+28%</span> from last week | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm text-gray-400">Storage Used</div> | |
| <div class="text-2xl font-bold">3.2GB</div> | |
| </div> | |
| <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-database text-secondary"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span class="text-primary">42%</span> of limit | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Agent Grid --> | |
| <div class="grid-stack"> | |
| <!-- Agent Card 1 --> | |
| <div class="agent-card bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-all duration-300"> | |
| <div class="p-4 border-b border-gray-700 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-headset text-primary"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Customer Support Bot</h3> | |
| <div class="text-xs text-gray-500">Last modified: 2 hours ago</div> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-500 hover:text-light p-1 rounded"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content"> | |
| <a href="#"><i class="fas fa-edit mr-2"></i> Edit</a> | |
| <a href="#"><i class="fas fa-copy mr-2"></i> Duplicate</a> | |
| <a href="#"><i class="fas fa-pause mr-2"></i> Pause</a> | |
| <a href="#"><i class="fas fa-trash mr-2 text-red-500"></i> Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-sm text-gray-400 mb-4">Handles customer inquiries and support tickets with natural language understanding.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="status-active text-xs px-2 py-1 rounded-full">Active</span> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-bolt mr-1 text-yellow-500"></i> 342 calls today | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-2 bg-gray-900 border-t border-gray-700 flex justify-between items-center"> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-calendar mr-1"></i> Created: May 12, 2023 | |
| </div> | |
| <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> | |
| <i class="fas fa-play mr-1"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Agent Card 2 --> | |
| <div class="agent-card bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-all duration-300"> | |
| <div class="p-4 border-b border-gray-700 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-secondary bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-chart-line text-secondary"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Data Analyzer</h3> | |
| <div class="text-xs text-gray-500">Last modified: 1 day ago</div> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-500 hover:text-light p-1 rounded"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content"> | |
| <a href="#"><i class="fas fa-edit mr-2"></i> Edit</a> | |
| <a href="#"><i class="fas fa-copy mr-2"></i> Duplicate</a> | |
| <a href="#"><i class="fas fa-pause mr-2"></i> Pause</a> | |
| <a href="#"><i class="fas fa-trash mr-2 text-red-500"></i> Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-sm text-gray-400 mb-4">Processes and visualizes complex datasets with automated insights generation.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="status-active text-xs px-2 py-1 rounded-full">Active</span> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-bolt mr-1 text-yellow-500"></i> 128 calls today | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-2 bg-gray-900 border-t border-gray-700 flex justify-between items-center"> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-calendar mr-1"></i> Created: Apr 28, 2023 | |
| </div> | |
| <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> | |
| <i class="fas fa-play mr-1"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Agent Card 3 --> | |
| <div class="agent-card bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-all duration-300"> | |
| <div class="p-4 border-b border-gray-700 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-pen-fancy text-yellow-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Content Generator</h3> | |
| <div class="text-xs text-gray-500">Last modified: 3 days ago</div> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-500 hover:text-light p-1 rounded"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content"> | |
| <a href="#"><i class="fas fa-edit mr-2"></i> Edit</a> | |
| <a href="#"><i class="fas fa-copy mr-2"></i> Duplicate</a> | |
| <a href="#"><i class="fas fa-play mr-2"></i> Activate</a> | |
| <a href="#"><i class="fas fa-trash mr-2 text-red-500"></i> Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-sm text-gray-400 mb-4">Creates marketing content, blog posts, and social media updates on demand.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="status-paused text-xs px-2 py-1 rounded-full">Paused</span> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-bolt mr-1 text-yellow-500"></i> 0 calls today | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-2 bg-gray-900 border-t border-gray-700 flex justify-between items-center"> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-calendar mr-1"></i> Created: Jun 5, 2023 | |
| </div> | |
| <button class="text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all"> | |
| <i class="fas fa-play mr-1"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Agent Card 4 --> | |
| <div class="agent-card bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-all duration-300"> | |
| <div class="p-4 border-b border-gray-700 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-language text-purple-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Multilingual Translator</h3> | |
| <div class="text-xs text-gray-500">Last modified: 5 hours ago</div> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-500 hover:text-light p-1 rounded"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content"> | |
| <a href="#"><i class="fas fa-edit mr-2"></i> Edit</a> | |
| <a href="#"><i class="fas fa-copy mr-2"></i> Duplicate</a> | |
| <a href="#"><i class="fas fa-pause mr-2"></i> Pause</a> | |
| <a href="#"><i class="fas fa-trash mr-2 text-red-500"></i> Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-sm text-gray-400 mb-4">Translates between 50+ languages while preserving context and nuance.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="status-active text-xs px-2 py-1 rounded-full">Active</span> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-bolt mr-1 text-yellow-500"></i> 89 calls today | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-2 bg-gray-900 border-t border-gray-700 flex justify-between items-center"> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-calendar mr-1"></i> Created: May 22, 2023 | |
| </div> | |
| <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all"> | |
| <i class="fas fa-play mr-1"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Agent Card 5 --> | |
| <div class="agent-card bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-all duration-300"> | |
| <div class="p-4 border-b border-gray-700 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-calendar-check text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Appointment Scheduler</h3> | |
| <div class="text-xs text-gray-500">Last modified: 1 week ago</div> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-500 hover:text-light p-1 rounded"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content"> | |
| <a href="#"><i class="fas fa-edit mr-2"></i> Edit</a> | |
| <a href="#"><i class="fas fa-copy mr-2"></i> Duplicate</a> | |
| <a href="#"><i class="fas fa-play mr-2"></i> Activate</a> | |
| <a href="#"><i class="fas fa-trash mr-2 text-red-500"></i> Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-sm text-gray-400 mb-4">Manages calendar appointments and sends reminders to clients automatically.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="status-draft text-xs px-2 py-1 rounded-full">Draft</span> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-bolt mr-1 text-yellow-500"></i> 0 calls today | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-2 bg-gray-900 border-t border-gray-700 flex justify-between items-center"> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-calendar mr-1"></i> Created: Jun 12, 2023 | |
| </div> | |
| <button class="text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all"> | |
| <i class="fas fa-play mr-1"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Agent Card 6 --> | |
| <div class="agent-card bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-all duration-300"> | |
| <div class="p-4 border-b border-gray-700 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-red-500 bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-bug text-red-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Code Debugger</h3> | |
| <div class="text-xs text-gray-500">Last modified: 2 days ago</div> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-500 hover:text-light p-1 rounded"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content"> | |
| <a href="#"><i class="fas fa-edit mr-2"></i> Edit</a> | |
| <a href="#"><i class="fas fa-copy mr-2"></i> Duplicate</a> | |
| <a href="#"><i class="fas fa-play mr-2"></i> Activate</a> | |
| <a href="#"><i class="fas fa-trash mr-2 text-red-500"></i> Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-sm text-gray-400 mb-4">Analyzes and fixes code errors in multiple programming languages.</p> | |
| <div class="flex items-center justify-between"> | |
| <span class="status-error text-xs px-2 py-1 rounded-full">Error</span> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-bolt mr-1 text-yellow-500"></i> 0 calls today | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-2 bg-gray-900 border-t border-gray-700 flex justify-between items-center"> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-calendar mr-1"></i> Created: May 30, 2023 | |
| </div> | |
| <button class="text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all"> | |
| <i class="fas fa-play mr-1"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <!-- New Agent Card --> | |
| <div class="agent-card bg-gray-800 border-2 border-dashed border-gray-700 rounded-xl overflow-hidden transition-all duration-300 flex flex-col items-center justify-center p-8 hover:border-primary hover:bg-gray-800 hover:bg-opacity-50 cursor-pointer"> | |
| <div class="w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center mb-4"> | |
| <i class="fas fa-plus text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="text-lg font-medium mb-2">Create New Agent</h3> | |
| <p class="text-sm text-gray-400 text-center mb-4">Build a custom AI agent tailored to your specific needs</p> | |
| <button class="text-sm bg-primary hover:bg-opacity-90 text-dark px-4 py-2 rounded transition-all"> | |
| <i class="fas fa-plus mr-2"></i> New Agent | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="mt-8 flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span class="font-medium">1-6</span> of <span class="font-medium">12</span> agents | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-800 border border-gray-700 rounded text-sm disabled:opacity-50" disabled> | |
| <i class="fas fa-chevron-left"></i> Previous | |
| </button> | |
| <button class="px-3 py-1 bg-gray-800 border border-gray-700 rounded text-sm font-medium">1</button> | |
| <button class="px-3 py-1 bg-gray-800 border border-gray-700 rounded text-sm hover:bg-gray-700">2</button> | |
| <button class="px-3 py-1 bg-gray-800 border border-gray-700 rounded text-sm"> | |
| Next <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle dropdown menus | |
| document.querySelectorAll('.dropdown').forEach(dropdown => { | |
| const button = dropdown.querySelector('button'); | |
| const content = dropdown.querySelector('.dropdown-content'); | |
| button.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| content.style.display = content.style.display === 'block' ? 'none' : 'block'; | |
| }); | |
| // Close when clicking outside | |
| document.addEventListener('click', () => { | |
| content.style.display = 'none'; | |
| }); | |
| }); | |
| // Agent card hover effects | |
| document.querySelectorAll('.agent-card').forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.classList.add('shadow-lg'); | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.classList.remove('shadow-lg'); | |
| }); | |
| }); | |
| // Sidebar navigation | |
| const sidebarItems = document.querySelectorAll('.sidebar-item'); | |
| sidebarItems.forEach(item => { | |
| item.addEventListener('click', function() { | |
| sidebarItems.forEach(i => i.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=brainable/se3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |