mirror of
https://github.com/thecyberlearn/quantum-ai-v2.git
synced 2026-08-18 08:52:59 +00:00
✨ Enhance marketplace with modern design and authentication
- Redesign agent cards with sleek modern styling (white cards, gradient shadows) - Implement authentication-aware UI: blue "Try Now" vs black "Login to Try" - Add login_required decorator to agent detail views for security - Fix quick agents panel to show only 3 working agents - Update PDF Summarizer reset functionality to properly clear file uploads - Remove category badges for unauthenticated users to prevent layout issues 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
parent
4424780903
commit
c368bb55de
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@ -318,7 +393,7 @@
|
||||
{% if agents %}
|
||||
<div class="agents-grid">
|
||||
{% for agent in agents %}
|
||||
<a href="{% url 'agents:detail' agent.slug %}" class="agent-card">
|
||||
<div class="agent-card">
|
||||
<div class="agent-header">
|
||||
<div class="agent-icon">{{ agent.category.icon }}</div>
|
||||
<div class="agent-info">
|
||||
@ -328,10 +403,16 @@
|
||||
</div>
|
||||
<p class="agent-description">{{ agent.short_description }}</p>
|
||||
<div class="agent-footer">
|
||||
{% if user.is_authenticated %}
|
||||
<span class="agent-category">{{ agent.category.name }}</span>
|
||||
<button class="try-btn">Try Now →</button>
|
||||
</div>
|
||||
<a href="{% url 'agents:detail' agent.slug %}" class="try-btn">Try Now →</a>
|
||||
{% else %}
|
||||
<a href="{% url 'authentication:login' %}?next={% url 'agents:detail' agent.slug %}" class="try-btn login-required" style="width: 100%;">
|
||||
🔐 Login to Try
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
@ -183,6 +183,7 @@ def format_agent_message(agent_slug, input_data):
|
||||
|
||||
|
||||
# Web interface views
|
||||
@login_required
|
||||
def agent_detail_view(request, slug):
|
||||
"""Render agent detail page with dynamic form"""
|
||||
agent = get_object_or_404(Agent, slug=slug, is_active=True)
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
=== Documentation Auto-Update Summary ===
|
||||
Update Date: 2025-07-31 19:18:31
|
||||
Update Date: 2025-07-31 22:55:38
|
||||
|
||||
Recent Commits:
|
||||
- 4424780 🧹 Clean up marketplace to keep only 3 working agents
|
||||
- 400f2b7 📄 Add PDF Summarizer agent with advanced file upload system
|
||||
- cf8583d 💼 Add Job Posting Generator agent with comprehensive form schema
|
||||
- 27a1c7d 📚 Auto-update documentation after agents app implementation
|
||||
|
||||
Agents Changes:
|
||||
- agents/management/commands/create_pdf_summarizer_agent.py
|
||||
- agents/templates/agents/agent_detail.html
|
||||
- agents/templates/agents/marketplace.html
|
||||
- static/js/agents-core.js
|
||||
|
||||
Documentation Changes:
|
||||
|
||||
@ -534,6 +534,24 @@ function resetForm() {
|
||||
}
|
||||
});
|
||||
|
||||
// Reset file upload UI components
|
||||
const fileUploadContainers = document.querySelectorAll('.file-upload-container');
|
||||
fileUploadContainers.forEach(container => {
|
||||
const input = container.querySelector('.form-file-input');
|
||||
const label = container.querySelector('.file-upload-label');
|
||||
const selectedDiv = container.querySelector('.file-selected');
|
||||
|
||||
if (input) {
|
||||
input.value = '';
|
||||
}
|
||||
if (label) {
|
||||
label.style.display = 'block';
|
||||
}
|
||||
if (selectedDiv) {
|
||||
selectedDiv.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll back to form
|
||||
const formSection = document.getElementById('agentForm');
|
||||
if (formSection) {
|
||||
|
||||
@ -7,22 +7,6 @@
|
||||
</div>
|
||||
|
||||
<div class="quick-agents-grid">
|
||||
<a href="/agents/data-analyzer/" class="quick-agent-card">
|
||||
<div class="agent-icon">📊</div>
|
||||
<div class="agent-info">
|
||||
<h4>Data Analyzer</h4>
|
||||
<p>AI-powered data analysis</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/agents/weather-reporter/" class="quick-agent-card">
|
||||
<div class="agent-icon">🌤️</div>
|
||||
<div class="agent-info">
|
||||
<h4>Weather Reporter</h4>
|
||||
<p>Worldwide weather forecasts</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/agents/social-ads-generator/" class="quick-agent-card">
|
||||
<div class="agent-icon">📢</div>
|
||||
<div class="agent-info">
|
||||
@ -39,11 +23,11 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/agents/five-whys-analyzer/" class="quick-agent-card">
|
||||
<div class="agent-icon">🤔</div>
|
||||
<a href="/agents/pdf-summarizer/" class="quick-agent-card">
|
||||
<div class="agent-icon">📄</div>
|
||||
<div class="agent-info">
|
||||
<h4>Five Whys Analyzer</h4>
|
||||
<p>Problem analysis method</p>
|
||||
<h4>PDF Summarizer</h4>
|
||||
<p>Analyze and summarize PDFs</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -35,11 +35,11 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/agents/data-analyzer/" class="quick-agent-card">
|
||||
<div class="agent-icon">📊</div>
|
||||
<a href="/agents/pdf-summarizer/" class="quick-agent-card">
|
||||
<div class="agent-icon">📄</div>
|
||||
<div class="agent-info">
|
||||
<h4>Data Analyzer</h4>
|
||||
<p>AI-powered data analysis</p>
|
||||
<h4>PDF Summarizer</h4>
|
||||
<p>Analyze and summarize PDFs</p>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user