feat: adicionar painel Agentes BrainSteel Web (Scout, Designer, Outreach, Orchestrator)
This commit is contained in:
Hermes
@@ -738,3 +738,334 @@ input:checked + .slider:before {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
BRAINSTEEL WEB - AGENTS PANEL STYLES
|
||||
============================================ */
|
||||
|
||||
.agents-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.agents-header h2 {
|
||||
font-size: 28px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.agents-header p {
|
||||
color: var(--text-secondary);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Agent Tabs */
|
||||
.agent-tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 30px;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.agent-tab-btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: var(--transition);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.agent-tab-btn:hover {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.agent-tab-btn.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.agent-tab-btn i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Agent Cards */
|
||||
.agent-section .agent-card {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
box-shadow: var(--shadow-md);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.agent-card h3 {
|
||||
font-size: 20px;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.agent-card h3 i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.agent-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Agent Inputs */
|
||||
.agent-inputs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.agent-inputs .form-control {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.agent-inputs .form-control:focus {
|
||||
border-color: var(--primary-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.agent-inputs .btn {
|
||||
padding: 12px 24px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Agent Status */
|
||||
.agent-status {
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 20px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
/* Scout Results */
|
||||
.scout-results {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scout-target-card {
|
||||
background: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border-color);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.scout-target-card:hover {
|
||||
border-color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.target-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.target-score {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.target-score.score-high { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
|
||||
.target-score.score-medium { background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%); }
|
||||
.target-score.score-low { background: linear-gradient(135deg, #718096 0%, #546e7a 100%); }
|
||||
|
||||
.target-info h4 {
|
||||
font-size: 16px;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.target-url {
|
||||
font-size: 12px;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.target-body {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.target-reason {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.target-meta {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
font-size: 12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.target-meta i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.target-niche {
|
||||
background: var(--bg-secondary);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.target-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.target-actions .btn {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Design Preview */
|
||||
.design-preview {
|
||||
background: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.design-preview iframe {
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Outreach Stats */
|
||||
.outreach-stats {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.outreach-stats span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.outreach-stats i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.outreach-stats strong {
|
||||
font-size: 18px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Orchestrator */
|
||||
.orchestrator-info {
|
||||
background: var(--bg-primary);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.orchestrator-info i {
|
||||
color: var(--info-color);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 16px 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
height: 8px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 4px;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
||||
border-radius: 4px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.agent-tabs {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.agent-tab-btn {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.agent-inputs {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.agent-inputs .form-control,
|
||||
.agent-inputs .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.target-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.outreach-stats {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user