| /* src/styles/Dashboard.css */ | |
| .dashboard-page { | |
| background-color: #0F172A; | |
| color: #F8FAFC; | |
| font-family: 'Inter', sans-serif; | |
| padding: 40px; | |
| min-height: 100vh; | |
| } | |
| .dashboard-title { | |
| font-size: 32px; | |
| font-weight: bold; | |
| margin-bottom: 32px; | |
| } | |
| .dashboard-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 32px; | |
| } | |
| .dashboard-actions button { | |
| margin-left: 10px; | |
| padding: 8px 16px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| } | |
| .logout-button { | |
| background-color: #f44336; | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| } | |
| .reports-button { | |
| background-color: #2196f3; | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| } | |
| .reports-button:hover, | |
| .logout-button:hover { | |
| opacity: 0.8; | |
| } | |
| .dashboard-main { | |
| display: flex; | |
| gap: 32px; | |
| flex-wrap: wrap; | |
| margin-bottom: 48px; | |
| } | |
| .upload-section { | |
| flex: 1; | |
| background-color: #1E293B; | |
| padding: 24px; | |
| border-radius: 16px; | |
| text-align: center; | |
| } | |
| .upload-section p { | |
| margin-bottom: 16px; | |
| font-size: 16px; | |
| } | |
| .file-input { | |
| display: block; | |
| margin: 12px auto; | |
| color: #CBD5E1; | |
| } | |
| .analyze-button { | |
| background-color: #22C55E; | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 10px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| } | |
| .analyze-button:hover { | |
| background-color: #16A34A; | |
| } | |
| .output-panel { | |
| flex: 1; | |
| background-color: #1F2937; | |
| padding: 24px; | |
| border-radius: 16px; | |
| } | |
| .output-panel h2 { | |
| margin-bottom: 16px; | |
| color: #94A3B8; | |
| } | |
| .output-status { | |
| font-size: 20px; | |
| font-weight: bold; | |
| color: #22C55E; | |
| margin-bottom: 12px; | |
| } | |
| .highlight { | |
| color: #38BDF8; | |
| } | |
| .confidence { | |
| color: #FACC15; | |
| } | |
| .severity-high { | |
| color: #EF4444; | |
| } | |
| .preview-section { | |
| display: flex; | |
| gap: 32px; | |
| flex-wrap: wrap; | |
| } | |
| .image-card { | |
| flex: 1; | |
| background-color: #1E293B; | |
| padding: 20px; | |
| border-radius: 16px; | |
| } | |
| .image-label { | |
| font-size: 18px; | |
| margin-bottom: 12px; | |
| } | |
| .image-placeholder { | |
| background-color: #334155; | |
| height: 180px; | |
| border-radius: 12px; | |
| } | |