Agent Management Dashboard

// [Previous code remains the same] export default async function server(request: Request): Promise { const css = ` :root { --primary-color: #6a11cb; --secondary-color: #2575fc; --background-color: #f4f6f9; --text-color: #333; --card-background: white; --accent-color: #4CAF50; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; } .agent-management-dashboard { max-width: 1200px; margin: 0 auto; padding: 20px; background-color: var(--background-color); } .account-creation { background: var(--card-background); border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); padding: 40px; max-width: 500px; margin: 0 auto; text-align: center; } .account-creation h2 { color: var(--primary-color); margin-bottom: 30px; font-size: 24px; } .account-creation form { display: flex; flex-direction: column; gap: 20px; } .account-creation input, .account-creation select { width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 16px; transition: border-color 0.3s ease; } .account-creation input:focus, .account-creation select:focus { outline: none; border-color: var(--primary-color); } .account-creation button { background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); color: white; border: none; padding: 15px; border-radius: 8px; font-size: 16px; cursor: pointer; transition: transform 0.3s ease; } .account-creation button:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .dashboard-content { display: grid; grid-template-columns: 1fr 300px; gap: 30px; background: var(--card-background); border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); padding: 30px; } .user-info { background-color: #f4f4f4; border-radius: 8px; padding: 20px; text-align: center; } .user-info h2 { color: var(--primary-color); margin-bottom: 15px; } .subscription-details { background-color: white; border-radius: 8px; padding: 15px; margin-top: 15px; } .agent-management-section { background-color: #f9f9f9; border-radius: 8px; padding: 20px; } .agents-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; } .agent-card { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .agent-card:hover { transform: translateY(-5px); } .agent-actions { display: flex; gap: 15px; } .agent-actions button { flex: 1; background-color: var(--accent-color); color: white; border: none; padding: 12px; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; } .agent-actions button:hover { background-color: #45a049; } .agent-creation-form, .agent-deployment-form { background: var(--card-background); border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); padding: 30px; max-width: 600px; margin: 0 auto; } .location-inputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px; } .location-inputs input, .location-inputs select { width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; } @media (max-width: 768px) { .dashboard-content { grid-template-columns: 1fr; } .location-inputs { grid-template-columns: 1fr; } } `; return new Response(` Agent Management Dashboard

`, { headers: { "content-type": "text/html", "Access-Control-Allow-Origin": "*" } }); }

nxtlvlmike