| """ |
| Enhanced CSS styles for ARF demo |
| Comprehensive styling for expressive Tab 1 |
| """ |
|
|
| def get_styles() -> str: |
| """Get all CSS styles for the ARF demo""" |
| return """ |
| /* ===== Base Styles ===== */ |
| .demo-container { |
| max-width: 1800px; |
| margin: 0 auto; |
| padding: 20px; |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; |
| } |
| |
| .header-section { |
| text-align: center; |
| margin-bottom: 25px; |
| padding: 30px 40px; |
| background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); |
| color: white; |
| border-radius: 16px; |
| box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15); |
| } |
| |
| .status-bar { |
| display: flex; |
| justify-content: center; |
| gap: 20px; |
| margin-bottom: 30px; |
| padding: 15px; |
| background: #f8fafc; |
| border-radius: 12px; |
| border: 1px solid #e2e8f0; |
| flex-wrap: wrap; |
| } |
| |
| .status-item { |
| padding: 8px 16px; |
| background: white; |
| border-radius: 8px; |
| font-size: 14px; |
| font-weight: 500; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| border: 1px solid #e2e8f0; |
| } |
| |
| .status-item.active { |
| background: #10b981; |
| color: white; |
| border-color: #10b981; |
| } |
| |
| /* ===== Tab 1 Specific Styles ===== */ |
| |
| /* Scenario Card */ |
| .scenario-card { |
| border: 1px solid #e2e8f0; |
| border-radius: 14px; |
| padding: 20px; |
| background: white; |
| box-shadow: 0 4px 12px rgba(0,0,0,0.05); |
| margin-bottom: 20px; |
| transition: all 0.3s ease; |
| } |
| |
| .scenario-card:hover { |
| box-shadow: 0 8px 24px rgba(0,0,0,0.08); |
| transform: translateY(-2px); |
| } |
| |
| .scenario-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 15px; |
| padding-bottom: 12px; |
| border-bottom: 2px solid #f1f5f9; |
| } |
| |
| .scenario-header h3 { |
| margin: 0; |
| font-size: 18px; |
| color: #1e293b; |
| } |
| |
| .severity-badge { |
| padding: 4px 12px; |
| border-radius: 20px; |
| font-size: 12px; |
| font-weight: bold; |
| color: white; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .severity-badge.high { |
| background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); |
| } |
| |
| .severity-badge.medium { |
| background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); |
| } |
| |
| .severity-badge.low { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| } |
| |
| .scenario-details { |
| margin-top: 15px; |
| } |
| |
| .scenario-detail-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 8px; |
| padding: 4px 0; |
| } |
| |
| .detail-label { |
| font-size: 13px; |
| color: #64748b; |
| font-weight: 500; |
| } |
| |
| .detail-value { |
| font-size: 14px; |
| color: #1e293b; |
| font-weight: 600; |
| } |
| |
| .detail-value.revenue-risk { |
| color: #ef4444; |
| font-weight: 700; |
| } |
| |
| .scenario-tags { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| margin-top: 15px; |
| padding-top: 12px; |
| border-top: 1px solid #f1f5f9; |
| } |
| |
| .scenario-tag { |
| padding: 3px 8px; |
| background: #f1f5f9; |
| border-radius: 6px; |
| font-size: 11px; |
| color: #475569; |
| font-weight: 500; |
| } |
| |
| /* Agent Cards */ |
| .agent-card { |
| border: 2px solid; |
| border-radius: 14px; |
| padding: 18px; |
| background: white; |
| text-align: center; |
| flex: 1; |
| margin: 5px; |
| min-height: 180px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: space-between; |
| transition: all 0.3s ease; |
| } |
| |
| .agent-card:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 12px 24px rgba(0,0,0,0.1); |
| } |
| |
| .agent-card.detection { |
| border-color: #3b82f6; |
| background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); |
| } |
| |
| .agent-card.recall { |
| border-color: #8b5cf6; |
| background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); |
| } |
| |
| .agent-card.decision { |
| border-color: #10b981; |
| background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); |
| } |
| |
| .agent-icon { |
| font-size: 32px; |
| margin-bottom: 10px; |
| } |
| |
| .agent-content { |
| width: 100%; |
| } |
| |
| .agent-content h4 { |
| margin: 0 0 8px 0; |
| font-size: 16px; |
| color: #1e293b; |
| } |
| |
| .agent-status-text { |
| font-size: 13px; |
| color: #475569; |
| margin-bottom: 12px; |
| line-height: 1.4; |
| } |
| |
| .agent-metrics { |
| display: flex; |
| justify-content: space-around; |
| margin-bottom: 12px; |
| } |
| |
| .agent-metric { |
| font-size: 11px; |
| padding: 3px 8px; |
| background: rgba(255, 255, 255, 0.8); |
| border-radius: 6px; |
| color: #475569; |
| font-weight: 500; |
| } |
| |
| .agent-status { |
| display: inline-block; |
| padding: 5px 14px; |
| border-radius: 20px; |
| font-size: 12px; |
| font-weight: bold; |
| color: white; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .agent-status.active { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| } |
| |
| /* OSS vs Enterprise Sections */ |
| .oss-section, .enterprise-section { |
| padding: 20px; |
| border-radius: 14px; |
| margin-bottom: 15px; |
| flex: 1; |
| min-height: 320px; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .oss-section { |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); |
| border: 2px solid #0ea5e9; |
| } |
| |
| .enterprise-section { |
| background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); |
| border: 2px solid #10b981; |
| } |
| |
| .edition-header { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| margin-bottom: 15px; |
| padding-bottom: 12px; |
| border-bottom: 2px solid rgba(255, 255, 255, 0.3); |
| } |
| |
| .edition-icon { |
| font-size: 28px; |
| } |
| |
| .edition-header h3 { |
| margin: 0; |
| font-size: 20px; |
| color: #1e293b; |
| flex: 1; |
| } |
| |
| .edition-badge { |
| padding: 4px 10px; |
| background: rgba(255, 255, 255, 0.9); |
| border-radius: 8px; |
| font-size: 11px; |
| font-weight: bold; |
| color: #475569; |
| } |
| |
| .edition-description { |
| margin-bottom: 20px; |
| padding: 12px; |
| background: rgba(255, 255, 255, 0.7); |
| border-radius: 10px; |
| } |
| |
| .edition-description p { |
| margin: 0; |
| font-size: 14px; |
| color: #475569; |
| font-weight: 500; |
| } |
| |
| .intent-card, .execution-card { |
| background: white; |
| border-radius: 12px; |
| padding: 20px; |
| box-shadow: 0 4px 12px rgba(0,0,0,0.05); |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .intent-header, .execution-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 15px; |
| padding-bottom: 10px; |
| border-bottom: 1px solid #f1f5f9; |
| } |
| |
| .intent-header h4, .execution-header h4 { |
| margin: 0; |
| font-size: 16px; |
| color: #1e293b; |
| } |
| |
| .intent-confidence { |
| padding: 4px 10px; |
| background: #dbeafe; |
| color: #1d4ed8; |
| border-radius: 6px; |
| font-size: 12px; |
| font-weight: bold; |
| } |
| |
| .execution-mode { |
| padding: 4px 10px; |
| background: #10b981; |
| color: white; |
| border-radius: 6px; |
| font-size: 12px; |
| font-weight: bold; |
| text-transform: uppercase; |
| } |
| |
| .execution-mode.autonomous { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| } |
| |
| .execution-mode.approval { |
| background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); |
| } |
| |
| .intent-details, .execution-details { |
| flex: 1; |
| } |
| |
| .intent-details p, .execution-details p { |
| margin: 8px 0; |
| font-size: 14px; |
| color: #475569; |
| } |
| |
| .intent-details strong, .execution-details strong { |
| color: #1e293b; |
| } |
| |
| .savings-highlight { |
| color: #10b981; |
| font-weight: 700; |
| font-size: 16px; |
| } |
| |
| .boundary-stop, .boundary-start { |
| margin-top: 20px; |
| text-align: center; |
| } |
| |
| .stop-line, .start-line { |
| height: 2px; |
| background: linear-gradient(90deg, transparent, #3b82f6, transparent); |
| margin: 8px 0; |
| } |
| |
| .start-line { |
| background: linear-gradient(90deg, transparent, #10b981, transparent); |
| } |
| |
| .stop-text, .start-text { |
| font-size: 12px; |
| font-weight: bold; |
| padding: 6px 12px; |
| border-radius: 8px; |
| display: inline-block; |
| } |
| |
| .stop-text { |
| background: #fee2e2; |
| color: #dc2626; |
| } |
| |
| .start-text { |
| background: #dcfce7; |
| color: #166534; |
| } |
| |
| /* Metric Cards */ |
| .metric-card { |
| border: 1px solid #e2e8f0; |
| border-radius: 12px; |
| padding: 18px; |
| background: white; |
| margin: 8px; |
| text-align: center; |
| flex: 1; |
| min-width: 140px; |
| transition: all 0.3s ease; |
| } |
| |
| .metric-card:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 8px 16px rgba(0,0,0,0.08); |
| } |
| |
| .metric-card.detection { |
| border-left: 4px solid #3b82f6; |
| } |
| |
| .metric-card.mttr { |
| border-left: 4px solid #10b981; |
| } |
| |
| .metric-card.auto-heal { |
| border-left: 4px solid #8b5cf6; |
| } |
| |
| .metric-card.savings { |
| border-left: 4px solid #f59e0b; |
| } |
| |
| .metric-icon { |
| font-size: 28px; |
| margin-bottom: 10px; |
| } |
| |
| .metric-content h4 { |
| margin: 0 0 8px 0; |
| font-size: 14px; |
| color: #64748b; |
| font-weight: 600; |
| } |
| |
| .metric-value { |
| font-size: 28px; |
| font-weight: bold; |
| color: #1e40af; |
| margin: 8px 0; |
| } |
| |
| .metric-card.mttr .metric-value { |
| color: #10b981; |
| } |
| |
| .metric-card.auto-heal .metric-value { |
| color: #8b5cf6; |
| } |
| |
| .metric-card.savings .metric-value { |
| color: #f59e0b; |
| } |
| |
| .metric-comparison { |
| font-size: 12px; |
| color: #64748b; |
| margin: 0; |
| } |
| |
| /* Buttons */ |
| .oss-btn { |
| background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); |
| color: white !important; |
| border: none; |
| padding: 16px 24px; |
| border-radius: 12px; |
| font-weight: 600; |
| font-size: 16px; |
| width: 100%; |
| transition: all 0.3s ease; |
| } |
| |
| .oss-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3); |
| } |
| |
| .enterprise-btn { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| color: white !important; |
| border: none; |
| padding: 16px 24px; |
| border-radius: 12px; |
| font-weight: 600; |
| font-size: 16px; |
| width: 100%; |
| transition: all 0.3s ease; |
| } |
| |
| .enterprise-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3); |
| } |
| |
| .button-info { |
| font-size: 12px; |
| color: #64748b; |
| text-align: center; |
| margin-top: 6px !important; |
| font-style: italic; |
| } |
| |
| /* Approval Status */ |
| .approval-status { |
| border: 2px solid #e2e8f0; |
| border-radius: 14px; |
| padding: 20px; |
| background: white; |
| margin-top: 20px; |
| } |
| |
| .approval-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 15px; |
| padding-bottom: 12px; |
| border-bottom: 2px solid #f1f5f9; |
| } |
| |
| .approval-header h4 { |
| margin: 0; |
| font-size: 16px; |
| color: #1e293b; |
| } |
| |
| .approval-badge { |
| padding: 4px 12px; |
| border-radius: 8px; |
| font-size: 12px; |
| font-weight: bold; |
| text-transform: uppercase; |
| } |
| |
| .approval-badge.not-required { |
| background: #10b981; |
| color: white; |
| } |
| |
| .approval-badge.required { |
| background: #f59e0b; |
| color: white; |
| } |
| |
| .approval-badge.pending { |
| background: #3b82f6; |
| color: white; |
| } |
| |
| .approval-content { |
| margin-top: 15px; |
| } |
| |
| .approval-content p { |
| margin: 8px 0; |
| font-size: 14px; |
| color: #475569; |
| } |
| |
| .approval-workflow { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| margin-top: 20px; |
| } |
| |
| .workflow-step { |
| padding: 12px; |
| background: #f8fafc; |
| border-radius: 10px; |
| border-left: 4px solid #3b82f6; |
| font-size: 14px; |
| color: #475569; |
| font-weight: 500; |
| } |
| |
| .demo-info { |
| font-size: 12px; |
| color: #64748b; |
| text-align: center; |
| margin-top: 8px !important; |
| font-style: italic; |
| } |
| |
| /* Footer */ |
| .footer { |
| text-align: center; |
| padding: 25px; |
| color: #6b7280; |
| font-size: 14px; |
| margin-top: 40px; |
| border-top: 2px solid #e5e7eb; |
| background: #f9fafb; |
| border-radius: 12px; |
| } |
| |
| .footer strong { |
| color: #1e293b; |
| font-size: 16px; |
| } |
| |
| .footer-links { |
| margin-top: 15px; |
| display: flex; |
| justify-content: center; |
| gap: 20px; |
| flex-wrap: wrap; |
| } |
| |
| .footer-links a { |
| color: #3b82f6; |
| text-decoration: none; |
| font-weight: 500; |
| transition: color 0.2s ease; |
| } |
| |
| .footer-links a:hover { |
| color: #1d4ed8; |
| text-decoration: underline; |
| } |
| |
| /* Responsive Adjustments */ |
| @media (max-width: 1200px) { |
| .status-bar { |
| gap: 10px; |
| } |
| |
| .status-item { |
| font-size: 13px; |
| padding: 6px 12px; |
| } |
| |
| .agent-card { |
| min-height: 200px; |
| } |
| |
| .metric-card { |
| min-width: 120px; |
| } |
| } |
| |
| /* Gradient backgrounds for panels */ |
| .gradio-container .tab-nav { |
| background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); |
| border-radius: 12px; |
| padding: 8px; |
| margin-bottom: 20px; |
| } |
| |
| .gradio-container .tab-nav .selected { |
| background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; |
| color: white !important; |
| font-weight: 600; |
| border-radius: 10px; |
| } |
| """ |
