|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Super Agent Task Execution</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
.gradient-bg { |
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
} |
|
.agent-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
} |
|
.fade-in { |
|
animation: fadeIn 0.5s ease-in-out; |
|
} |
|
@keyframes fadeIn { |
|
from { opacity: 0; } |
|
to { opacity: 1; } |
|
} |
|
.typing { |
|
border-right: 2px solid; |
|
animation: typing 1s steps(40, end), blink-caret .75s step-end infinite; |
|
} |
|
@keyframes typing { |
|
from { width: 0 } |
|
to { width: 100% } |
|
} |
|
@keyframes blink-caret { |
|
from, to { border-color: transparent } |
|
50% { border-color: #4f46e5; } |
|
} |
|
.task-progress { |
|
height: 4px; |
|
background-color: #e5e7eb; |
|
border-radius: 2px; |
|
overflow: hidden; |
|
} |
|
.task-progress-bar { |
|
height: 100%; |
|
background: linear-gradient(90deg, #4f46e5, #a855f7); |
|
transition: width 0.3s ease; |
|
} |
|
.pulse { |
|
animation: pulse 2s infinite; |
|
} |
|
@keyframes pulse { |
|
0% { opacity: 1; } |
|
50% { opacity: 0.5; } |
|
100% { opacity: 1; } |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50 min-h-screen"> |
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
<div class="container mx-auto px-4 py-6"> |
|
<div class="flex justify-between items-center"> |
|
<div class="flex items-center space-x-3"> |
|
<i class="fas fa-robot text-3xl"></i> |
|
<h1 class="text-2xl font-bold">Super Agent Task Execution</h1> |
|
<span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded-full">v0.3</span> |
|
</div> |
|
<div class="flex space-x-4"> |
|
<button class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg flex items-center space-x-2 transition"> |
|
<i class="fas fa-tasks"></i> |
|
<span>Task Dashboard</span> |
|
</button> |
|
<button class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg flex items-center space-x-2 transition"> |
|
<i class="fas fa-cog"></i> |
|
<span>Settings</span> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> |
|
|
|
<div class="lg:col-span-1 space-y-6"> |
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Agent Task Queue</h2> |
|
<div class="space-y-4"> |
|
<div class="bg-indigo-50 rounded-lg p-4"> |
|
<div class="flex justify-between items-center mb-2"> |
|
<h3 class="font-medium text-indigo-700">Pending Tasks</h3> |
|
<span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded-full">3</span> |
|
</div> |
|
<div class="space-y-3"> |
|
<div class="bg-white p-3 rounded-lg border border-gray-200"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<p class="text-sm font-medium">Plan trip to San Diego</p> |
|
<p class="text-xs text-gray-500">Planner Agent</p> |
|
</div> |
|
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-0.5 rounded-full">Queued</span> |
|
</div> |
|
</div> |
|
<div class="bg-white p-3 rounded-lg border border-gray-200"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<p class="text-sm font-medium">Make dinner reservation</p> |
|
<p class="text-xs text-gray-500">Phone Agent</p> |
|
</div> |
|
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-0.5 rounded-full">Queued</span> |
|
</div> |
|
</div> |
|
<div class="bg-white p-3 rounded-lg border border-gray-200"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<p class="text-sm font-medium">Research fusion energy</p> |
|
<p class="text-xs text-gray-500">Research Agent</p> |
|
</div> |
|
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-0.5 rounded-full">Queued</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bg-green-50 rounded-lg p-4"> |
|
<div class="flex justify-between items-center mb-2"> |
|
<h3 class="font-medium text-green-700">Active Tasks</h3> |
|
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">2</span> |
|
</div> |
|
<div class="space-y-3"> |
|
<div class="bg-white p-3 rounded-lg border border-gray-200"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<p class="text-sm font-medium">Analyze sales data</p> |
|
<p class="text-xs text-gray-500">Data Analysis Agent</p> |
|
</div> |
|
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded-full">Running</span> |
|
</div> |
|
<div class=" |
|
</html> |
