File size: 7,160 Bytes
c670ef6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
<!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 -->
<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 Content -->
<main class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<!-- Left Sidebar - Agent Selection -->
<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> |