diff --git a/CLAUDE.md b/CLAUDE.md index 0119d60..499f131 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -225,4 +225,4 @@ gunicorn netcop_hub.wsgi:application 4. Check WorkflowRequest/WorkflowResponse creation --- -Last updated: Last updated: Last updated: Last updated: Last updated: Last updated: Last updated: 2025-07-31 19:18:31 +Last updated: Last updated: Last updated: Last updated: Last updated: Last updated: Last updated: Last updated: 2025-07-31 22:55:38 diff --git a/agents/templates/agents/marketplace.html b/agents/templates/agents/marketplace.html index 72a18a4..b5fcd6c 100644 --- a/agents/templates/agents/marketplace.html +++ b/agents/templates/agents/marketplace.html @@ -129,102 +129,137 @@ .agents-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: var(--spacing-lg); + grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); + gap: 24px; + max-width: 1200px; + margin: 0 auto; } .agent-card { - background: var(--surface); - border: 2px solid var(--outline-variant); - border-radius: var(--radius-lg); - padding: var(--spacing-lg); - transition: all 0.3s ease; - text-decoration: none; + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 16px; + padding: 0; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: inherit; - display: block; + display: flex; + flex-direction: column; position: relative; overflow: hidden; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .agent-card:hover { - border-color: var(--primary); - transform: translateY(-4px); - box-shadow: var(--shadow-lg); - background: var(--surface-variant); + transform: translateY(-2px); + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + border-color: #d1d5db; } .agent-header { + padding: 24px 24px 0 24px; display: flex; - align-items: center; - gap: var(--spacing-md); - margin-bottom: var(--spacing-md); + align-items: flex-start; + gap: 16px; + margin-bottom: 16px; } .agent-icon { - font-size: 2.5rem; - width: 60px; - height: 60px; + font-size: 32px; + width: 56px; + height: 56px; display: flex; align-items: center; justify-content: center; - background: var(--surface-variant); - border-radius: var(--radius-md); - border: 2px solid var(--outline-variant); + background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); + border-radius: 14px; + flex-shrink: 0; + border: none; +} + +.agent-info { + flex: 1; + min-width: 0; } .agent-info h3 { - font-size: 1.2rem; - font-weight: 600; - color: var(--on-surface); - margin: 0 0 var(--spacing-xs) 0; + font-size: 20px; + font-weight: 700; + color: #111827; + margin: 0 0 4px 0; + line-height: 1.3; + letter-spacing: -0.025em; } .agent-price { - font-size: 1rem; - font-weight: 700; - color: var(--primary); + font-size: 16px; + font-weight: 600; + color: #059669; margin: 0; + opacity: 0.9; } .agent-description { - color: var(--on-surface-variant); - line-height: 1.5; - margin-bottom: var(--spacing-lg); - font-size: 14px; + color: #6b7280; + line-height: 1.6; + margin: 0 24px 24px 24px; + font-size: 15px; + font-weight: 400; } .agent-footer { + padding: 20px 24px 24px 24px; display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; margin-top: auto; + border-top: 1px solid #f3f4f6; + background: #fafafa; } .agent-category { - background: var(--surface-variant); - color: var(--on-surface-variant); - padding: 4px 12px; - border-radius: var(--radius-sm); - font-size: 12px; + background: #f3f4f6; + color: #6b7280; + padding: 6px 12px; + border-radius: 20px; + font-size: 13px; font-weight: 500; text-transform: capitalize; + letter-spacing: 0.025em; } .try-btn { - background: var(--primary); + background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; - padding: 8px 16px; - border-radius: var(--radius-sm); - font-size: 13px; + padding: 10px 20px; + border-radius: 10px; + font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s ease; + box-shadow: 0 2px 4px 0 rgba(59, 130, 246, 0.3); + letter-spacing: 0.025em; + text-decoration: none; + display: inline-block; + text-align: center; } .try-btn:hover { - background: var(--primary-dark); - transform: scale(1.05); + background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); + transform: translateY(-1px); + box-shadow: 0 4px 8px 0 rgba(59, 130, 246, 0.4); + color: white; +} + +.try-btn.login-required { + background: linear-gradient(135deg, #000000 0%, #1f1f1f 100%); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4); +} + +.try-btn.login-required:hover { + background: linear-gradient(135deg, #1f1f1f 0%, #000000 100%); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5); + color: white; } .no-results { @@ -256,11 +291,51 @@ .agents-grid { grid-template-columns: 1fr; + gap: 16px; + padding: 0 16px; } .category-filter { justify-content: center; } + + .agent-header { + padding: 20px 20px 0 20px; + gap: 12px; + } + + .agent-icon { + width: 48px; + height: 48px; + font-size: 28px; + } + + .agent-info h3 { + font-size: 18px; + } + + .agent-description { + margin: 0 20px 20px 20px; + font-size: 14px; + } + + .agent-footer { + padding: 16px 20px 20px 20px; + flex-direction: column; + gap: 12px; + align-items: stretch; + } + + .agent-category { + text-align: center; + } + + .try-btn { + width: 100%; + text-align: center; + padding: 12px 20px; + border-radius: 12px; + } } {% endblock %} @@ -318,7 +393,7 @@ {% if agents %}
AI-powered data analysis
-Worldwide weather forecasts
-Problem analysis method
+Analyze and summarize PDFs
AI-powered data analysis
+Analyze and summarize PDFs