Spaces:
Running
Running
| /* Cloud Connector Styles for MorphGuard */ | |
| .cloud-feature { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .cloud-feature h3 { | |
| color: var(--accent-primary); | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .cloud-feature h3 i { | |
| font-size: 1.2em; | |
| } | |
| /* Status Messages */ | |
| .status-message { | |
| padding: 15px; | |
| border-radius: 6px; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .status-message.success { | |
| background: rgba(34, 197, 94, 0.1); | |
| border: 1px solid rgba(34, 197, 94, 0.3); | |
| color: #22c55e; | |
| } | |
| .status-message.warning { | |
| background: rgba(251, 191, 36, 0.1); | |
| border: 1px solid rgba(251, 191, 36, 0.3); | |
| color: #fbbf24; | |
| } | |
| .free-tier-notice { | |
| margin-top: 10px; | |
| font-size: 0.9em; | |
| opacity: 0.8; | |
| } | |
| .setup-instructions { | |
| margin-top: 15px; | |
| padding: 10px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: 4px; | |
| font-size: 0.9em; | |
| } | |
| .setup-instructions ul { | |
| margin: 10px 0; | |
| padding-left: 20px; | |
| } | |
| /* Provider Status */ | |
| .provider-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| padding: 15px; | |
| background: var(--bg-secondary); | |
| border-radius: 6px; | |
| margin-bottom: 10px; | |
| } | |
| .provider-status.enabled { | |
| border-left: 4px solid #22c55e; | |
| } | |
| .provider-status.disabled { | |
| border-left: 4px solid #ef4444; | |
| opacity: 0.6; | |
| } | |
| .provider-status i { | |
| font-size: 1.5em; | |
| } | |
| .status-badge { | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 0.8em; | |
| font-weight: 600; | |
| margin-left: auto; | |
| } | |
| .provider-status.enabled .status-badge { | |
| background: #22c55e; | |
| color: white; | |
| } | |
| .provider-status.disabled .status-badge { | |
| background: #ef4444; | |
| color: white; | |
| } | |
| .usage-bar { | |
| width: 200px; | |
| height: 6px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 3px; | |
| position: relative; | |
| margin-top: 5px; | |
| } | |
| .usage-fill { | |
| height: 100%; | |
| background: var(--accent-primary); | |
| border-radius: 3px; | |
| transition: width 0.3s ease; | |
| } | |
| .usage-text { | |
| position: absolute; | |
| top: -20px; | |
| right: 0; | |
| font-size: 0.8em; | |
| color: var(--text-secondary); | |
| } | |
| /* Forms */ | |
| .cloud-form { | |
| display: grid; | |
| gap: 15px; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .form-group label { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .form-group input, | |
| .form-group select { | |
| padding: 10px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus { | |
| outline: none; | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.2); | |
| } | |
| .file-input { | |
| position: relative; | |
| display: inline-block; | |
| cursor: pointer; | |
| } | |
| .file-input input[type="file"] { | |
| position: absolute; | |
| left: -9999px; | |
| } | |
| .file-input-label { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 15px; | |
| background: var(--accent-primary); | |
| color: white; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .file-input-label:hover { | |
| background: var(--accent-secondary); | |
| } | |
| .submit-btn { | |
| padding: 12px 24px; | |
| background: var(--accent-primary); | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .submit-btn:hover { | |
| background: var(--accent-secondary); | |
| transform: translateY(-1px); | |
| } | |
| .submit-btn:disabled { | |
| background: #6b7280; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| /* Results Display */ | |
| .verification-result, | |
| .detection-result, | |
| .training-result { | |
| background: var(--bg-secondary); | |
| border-radius: 8px; | |
| padding: 20px; | |
| margin-top: 20px; | |
| } | |
| .result-header { | |
| display: flex; | |
| justify-content: between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: 15px; | |
| } | |
| .result-header h3 { | |
| margin: 0; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .verification-result.verified .result-header h3 { | |
| color: #22c55e; | |
| } | |
| .verification-result.not-verified .result-header h3 { | |
| color: #ef4444; | |
| } | |
| .provider-badge { | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 0.8em; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .provider-badge.aws { | |
| background: #ff9900; | |
| color: white; | |
| } | |
| .provider-badge.azure { | |
| background: #0078d4; | |
| color: white; | |
| } | |
| .providers-used { | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 0.8em; | |
| font-weight: 600; | |
| background: var(--accent-primary); | |
| color: white; | |
| } | |
| /* Detail Items */ | |
| .verification-details, | |
| .detection-details { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .detail-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 8px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .detail-item:last-child { | |
| border-bottom: none; | |
| } | |
| .detail-item label { | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .confidence-score { | |
| font-size: 1.2em; | |
| font-weight: 700; | |
| color: var(--accent-primary); | |
| } | |
| .verification-id, | |
| .blockchain-tx { | |
| font-family: monospace; | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 2px 6px; | |
| border-radius: 3px; | |
| font-size: 0.9em; | |
| } | |
| /* Enhanced Checks */ | |
| .enhanced-checks { | |
| margin-top: 20px; | |
| padding: 15px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: 6px; | |
| } | |
| .enhanced-checks h4 { | |
| margin: 0 0 15px 0; | |
| color: var(--text-primary); | |
| } | |
| .checks-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .check-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 12px; | |
| border-radius: 4px; | |
| font-size: 0.9em; | |
| } | |
| .check-item.pass { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: #22c55e; | |
| } | |
| .check-item.fail { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: #ef4444; | |
| } | |
| .overall-confidence { | |
| text-align: center; | |
| font-weight: 600; | |
| font-size: 1.1em; | |
| color: var(--accent-primary); | |
| } | |
| /* Training Stats */ | |
| .training-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-card { | |
| text-align: center; | |
| padding: 15px; | |
| background: var(--bg-primary); | |
| border-radius: 6px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .stat-value { | |
| font-size: 2em; | |
| font-weight: 700; | |
| color: var(--accent-primary); | |
| margin-bottom: 5px; | |
| } | |
| .stat-label { | |
| font-size: 0.9em; | |
| color: var(--text-secondary); | |
| } | |
| /* Cost Analysis */ | |
| .cost-analysis { | |
| margin-top: 20px; | |
| padding: 15px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: 6px; | |
| } | |
| .cost-analysis h4 { | |
| margin: 0 0 15px 0; | |
| color: var(--text-primary); | |
| } | |
| .cost-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 10px; | |
| } | |
| .cost-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 8px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .cost-value { | |
| font-weight: 600; | |
| color: var(--accent-primary); | |
| } | |
| .savings-value { | |
| font-weight: 600; | |
| color: #22c55e; | |
| } | |
| /* Face Details */ | |
| .face-details { | |
| margin-top: 20px; | |
| } | |
| .face-details h4 { | |
| margin: 0 0 15px 0; | |
| color: var(--text-primary); | |
| } | |
| .faces-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 15px; | |
| } | |
| .face-card { | |
| padding: 15px; | |
| background: var(--bg-primary); | |
| border-radius: 6px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .face-card h5 { | |
| margin: 0 0 10px 0; | |
| color: var(--accent-primary); | |
| } | |
| .face-attributes div { | |
| padding: 4px 0; | |
| font-size: 0.9em; | |
| color: var(--text-secondary); | |
| } | |
| /* Demographics */ | |
| .demographic-distribution { | |
| margin-top: 20px; | |
| padding: 15px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: 6px; | |
| } | |
| .demographic-distribution h4 { | |
| margin: 0 0 15px 0; | |
| color: var(--text-primary); | |
| } | |
| .demographics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 15px; | |
| } | |
| .demo-category { | |
| padding: 10px; | |
| background: var(--bg-primary); | |
| border-radius: 4px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .demo-category h5 { | |
| margin: 0 0 8px 0; | |
| color: var(--accent-primary); | |
| font-size: 0.9em; | |
| } | |
| .demo-category div { | |
| font-size: 0.8em; | |
| color: var(--text-secondary); | |
| padding: 2px 0; | |
| } | |
| /* Usage Summary */ | |
| .usage-summary, | |
| .performance-summary { | |
| padding: 15px; | |
| background: var(--bg-secondary); | |
| border-radius: 6px; | |
| margin-bottom: 15px; | |
| } | |
| .usage-summary h4, | |
| .performance-summary h4 { | |
| margin: 0 0 15px 0; | |
| color: var(--text-primary); | |
| } | |
| .usage-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 10px; | |
| } | |
| .usage-stat { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 8px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .usage-stat:last-child { | |
| border-bottom: none; | |
| } | |
| .usage-stat label { | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .usage-stat span { | |
| color: var(--text-primary); | |
| } | |
| /* Performance Metrics */ | |
| .perf-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 15px; | |
| } | |
| .perf-card { | |
| padding: 15px; | |
| background: var(--bg-primary); | |
| border-radius: 6px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .perf-card h5 { | |
| margin: 0 0 10px 0; | |
| color: var(--accent-primary); | |
| } | |
| .perf-stat { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 4px 0; | |
| font-size: 0.9em; | |
| } | |
| .perf-stat label { | |
| color: var(--text-secondary); | |
| } | |
| /* Loading State */ | |
| .loading-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 15px; | |
| padding: 40px; | |
| text-align: center; | |
| } | |
| .loading-spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 4px solid rgba(var(--accent-primary-rgb), 0.3); | |
| border-left-color: var(--accent-primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .loading-message { | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| /* Error Notification */ | |
| .error-notification { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| max-width: 400px; | |
| animation: slideIn 0.3s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| .error-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 15px; | |
| background: #dc2626; | |
| color: white; | |
| border-radius: 6px; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); | |
| } | |
| .error-content button { | |
| background: none; | |
| border: none; | |
| color: white; | |
| cursor: pointer; | |
| padding: 0; | |
| margin-left: auto; | |
| font-size: 1.2em; | |
| } | |
| .error-content button:hover { | |
| opacity: 0.8; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .cloud-feature { | |
| padding: 15px; | |
| } | |
| .training-stats, | |
| .usage-stats, | |
| .perf-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .faces-grid, | |
| .demographics-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .result-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 10px; | |
| } | |
| .detail-item { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 5px; | |
| } | |
| .error-notification { | |
| left: 20px; | |
| right: 20px; | |
| max-width: none; | |
| } | |
| } | |
| /* Theme-specific adjustments */ | |
| .theme-cyberpunk .provider-badge.aws { | |
| background: #ff00ff; | |
| } | |
| .theme-cyberpunk .provider-badge.azure { | |
| background: #6600cc; | |
| } | |
| .theme-matrix .provider-badge.aws { | |
| background: #00ff00; | |
| } | |
| .theme-matrix .provider-badge.azure { | |
| background: #006400; | |
| } |