Spaces:
Paused
Paused
| /* CSS Variables for Premium Aesthetics */ | |
| :root { | |
| --bg-dark: #0a0c10; | |
| --bg-card: rgba(20, 24, 33, 0.65); | |
| --border-color: rgba(255, 255, 255, 0.08); | |
| --border-focus: rgba(124, 77, 255, 0.4); | |
| --text-primary: #f1f3f9; | |
| --text-secondary: #909bb4; | |
| --text-disabled: #4e5566; | |
| --primary: #6c5ce7; | |
| --primary-hover: #5b4bc4; | |
| --accent: #00cec9; | |
| --accent-hover: #00b5b0; | |
| --success: #00db8b; | |
| --warning: #ff9f43; | |
| --danger: #ff5252; | |
| --info: #0984e3; | |
| --font-main: 'Outfit', sans-serif; | |
| --font-mono: 'Space Grotesk', sans-serif; | |
| --radius-sm: 8px; | |
| --radius-md: 16px; | |
| --radius-lg: 24px; | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Reset */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| color: var(--text-primary); | |
| font-family: var(--font-main); | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| /* Glassmorphism Background elements */ | |
| .glass-bg { | |
| position: absolute; | |
| width: 600px; | |
| height: 600px; | |
| background: radial-gradient(circle, rgba(108, 92, 231, 0.12) 0%, rgba(0, 206, 201, 0.05) 50%, rgba(0,0,0,0) 100%); | |
| top: -10%; | |
| right: -10%; | |
| z-index: -1; | |
| filter: blur(80px); | |
| pointer-events: none; | |
| } | |
| /* App Container */ | |
| .app-container { | |
| width: 100%; | |
| max-width: 1600px; | |
| padding: 30px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| z-index: 1; | |
| } | |
| /* Header */ | |
| .app-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px 20px; | |
| background: var(--bg-card); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .logo-icon { | |
| font-size: 2.5rem; | |
| background: linear-gradient(135deg, var(--primary), var(--accent)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .logo-text h1 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| } | |
| .logo-text span { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| .status-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| background: rgba(255, 255, 255, 0.04); | |
| padding: 8px 16px; | |
| border-radius: 50px; | |
| border: 1px solid var(--border-color); | |
| font-family: var(--font-mono); | |
| font-size: 0.9rem; | |
| } | |
| .pulse-dot { | |
| width: 10px; | |
| height: 10px; | |
| background-color: var(--success); | |
| border-radius: 50%; | |
| box-shadow: 0 0 0 0 rgba(0, 219, 139, 0.7); | |
| animation: pulse 1.6s infinite; | |
| } | |
| /* Grid Layout */ | |
| .app-grid { | |
| display: grid; | |
| grid-template-columns: 450px 1fr; | |
| gap: 30px; | |
| align-items: start; | |
| } | |
| @media (max-width: 1100px) { | |
| .app-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Cards */ | |
| .card { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 30px; | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25); | |
| position: relative; | |
| transition: var(--transition); | |
| } | |
| .card:hover { | |
| border-color: rgba(255, 255, 255, 0.12); | |
| } | |
| .config-card { | |
| min-height: 500px; | |
| } | |
| .results-card { | |
| min-height: 700px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .section-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-bottom: 25px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: 12px; | |
| } | |
| /* Input Fields */ | |
| .input-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin-bottom: 20px; | |
| } | |
| .input-group label { | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| textarea { | |
| width: 100%; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| padding: 12px; | |
| font-family: var(--font-main); | |
| font-size: 0.95rem; | |
| line-height: 1.5; | |
| resize: vertical; | |
| transition: var(--transition); | |
| } | |
| textarea:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15); | |
| } | |
| /* Upload boxes */ | |
| .upload-box { | |
| border: 2px dashed var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 24px; | |
| text-align: center; | |
| position: relative; | |
| margin-bottom: 20px; | |
| cursor: pointer; | |
| background: rgba(255, 255, 255, 0.01); | |
| transition: var(--transition); | |
| } | |
| .upload-box:hover { | |
| border-color: var(--primary); | |
| background: rgba(108, 92, 231, 0.02); | |
| } | |
| .upload-box.drag-over { | |
| border-color: var(--accent); | |
| background: rgba(0, 206, 201, 0.05); | |
| } | |
| .file-input { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0; | |
| cursor: pointer; | |
| } | |
| .upload-icon { | |
| font-size: 2.2rem; | |
| margin-bottom: 12px; | |
| transition: var(--transition); | |
| } | |
| .before-icon { | |
| color: var(--accent); | |
| } | |
| .after-icon { | |
| color: var(--primary); | |
| } | |
| .upload-box:hover .upload-icon { | |
| transform: translateY(-4px); | |
| } | |
| .upload-box h3 { | |
| font-size: 1.05rem; | |
| font-weight: 500; | |
| margin-bottom: 6px; | |
| } | |
| .upload-box p { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Buttons */ | |
| .actions { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| margin-top: 25px; | |
| } | |
| .btn { | |
| width: 100%; | |
| padding: 14px; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| font-family: var(--font-main); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| transition: var(--transition); | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: #fff; | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| background: var(--primary-hover); | |
| } | |
| .btn-accent { | |
| background: var(--accent); | |
| color: #0a0c10; | |
| } | |
| .btn-accent:hover:not(:disabled) { | |
| background: var(--accent-hover); | |
| } | |
| .btn-danger { | |
| background: transparent; | |
| border: 1px solid var(--danger); | |
| color: var(--danger); | |
| } | |
| .btn-danger:hover:not(:disabled) { | |
| background: rgba(255, 82, 82, 0.1); | |
| } | |
| .btn-disabled, .btn:disabled { | |
| background: var(--text-disabled) ; | |
| color: var(--text-secondary) ; | |
| cursor: not-allowed; | |
| opacity: 0.5; | |
| } | |
| /* Tooltips */ | |
| .tooltip { | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| position: relative; | |
| } | |
| /* Processing Overlay Screen */ | |
| .processing-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(10, 12, 16, 0.95); | |
| border-radius: var(--radius-md); | |
| z-index: 10; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 40px; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| .progress-container { | |
| width: 100%; | |
| max-width: 380px; | |
| text-align: center; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .progress-container h2 { | |
| font-size: 1.4rem; | |
| font-weight: 600; | |
| } | |
| .progress-container p { | |
| font-size: 0.95rem; | |
| color: var(--text-secondary); | |
| min-height: 44px; | |
| } | |
| .progress-bar-bg { | |
| width: 100%; | |
| height: 8px; | |
| background: rgba(255, 255, 255, 0.08); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| margin-top: 10px; | |
| } | |
| .progress-bar-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent), var(--primary)); | |
| border-radius: 10px; | |
| transition: width 0.4s ease; | |
| } | |
| .progress-percentage { | |
| font-family: var(--font-mono); | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| } | |
| /* Results Placeholder */ | |
| .placeholder-msg { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| max-width: 500px; | |
| margin: 100px auto; | |
| gap: 15px; | |
| } | |
| .placeholder-icon { | |
| font-size: 4rem; | |
| background: linear-gradient(135deg, var(--accent), var(--primary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 10px; | |
| } | |
| .placeholder-msg h3 { | |
| font-size: 1.4rem; | |
| font-weight: 600; | |
| } | |
| .placeholder-msg p { | |
| font-size: 0.95rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| /* Active Results Content */ | |
| .results-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| animation: fadeIn 0.4s ease-in-out; | |
| } | |
| /* Video side-by-side comparison */ | |
| .videos-comparison-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| } | |
| @media (max-width: 768px) { | |
| .videos-comparison-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .video-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .video-container h4 { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .video-container video { | |
| width: 100%; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-color); | |
| background: #000; | |
| aspect-ratio: 16/9; | |
| object-fit: contain; | |
| } | |
| /* Report Section */ | |
| .report-section { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .report-section h3 { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| /* Dynamic Cards Grid */ | |
| .asset-cards-grid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| /* Glassmorphic asset detail card */ | |
| .asset-card { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 20px; | |
| display: grid; | |
| grid-template-columns: 1.5fr 1fr 1fr 1.2fr; | |
| align-items: center; | |
| gap: 20px; | |
| transition: var(--transition); | |
| } | |
| .asset-card:hover { | |
| background: rgba(255, 255, 255, 0.04); | |
| transform: translateY(-2px); | |
| border-color: rgba(255, 255, 255, 0.15); | |
| } | |
| .asset-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .asset-label { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| text-transform: capitalize; | |
| } | |
| .asset-score { | |
| font-family: var(--font-mono); | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Crop image frame */ | |
| .crop-img-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| align-items: center; | |
| } | |
| .crop-img-container span { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| .crop-frame { | |
| width: 90px; | |
| height: 90px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-color); | |
| background: rgba(0,0,0,0.3); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .crop-frame img { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: cover; | |
| } | |
| .crop-missing-icon { | |
| font-size: 1.8rem; | |
| color: var(--text-disabled); | |
| } | |
| /* Badge Status Styles */ | |
| .status-badge { | |
| padding: 8px 16px; | |
| border-radius: 50px; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| text-align: center; | |
| display: inline-block; | |
| width: fit-content; | |
| } | |
| .badge-intact { | |
| background: rgba(0, 219, 139, 0.12); | |
| color: var(--success); | |
| border: 1px solid rgba(0, 219, 139, 0.2); | |
| } | |
| .badge-fair { | |
| background: rgba(255, 159, 67, 0.12); | |
| color: var(--warning); | |
| border: 1px solid rgba(255, 159, 67, 0.2); | |
| } | |
| .badge-damaged { | |
| background: rgba(255, 82, 82, 0.12); | |
| color: var(--danger); | |
| border: 1px solid rgba(255, 82, 82, 0.2); | |
| } | |
| .badge-missing { | |
| background: rgba(255, 82, 82, 0.12); | |
| color: var(--danger); | |
| border: 1px solid rgba(255, 82, 82, 0.2); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .badge-new { | |
| background: rgba(9, 132, 227, 0.12); | |
| color: var(--info); | |
| border: 1px solid rgba(9, 132, 227, 0.2); | |
| } | |
| /* Spinner Animation */ | |
| .spinner { | |
| width: 60px; | |
| height: 60px; | |
| position: relative; | |
| margin: 20px auto; | |
| } | |
| .double-bounce1, .double-bounce2 { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| background-color: var(--accent); | |
| opacity: 0.6; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| animation: bounce 2.0s infinite ease-in-out; | |
| } | |
| .double-bounce2 { | |
| background-color: var(--primary); | |
| animation-delay: -1.0s; | |
| } | |
| /* Helpers */ | |
| .hidden { | |
| display: none ; | |
| } | |
| .text-success { color: var(--success); } | |
| .text-danger { color: var(--danger); } | |
| /* Keyframe Animations */ | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(0, 219, 139, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(0, 219, 139, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(0, 219, 139, 0); | |
| } | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { | |
| transform: scale(0.0); | |
| } 50% { | |
| transform: scale(1.0); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Settings, Select and Inputs */ | |
| .settings-row { | |
| display: flex; | |
| gap: 15px; | |
| width: 100%; | |
| } | |
| .settings-row .half { | |
| flex: 1; | |
| } | |
| .styled-select, .styled-input { | |
| width: 100%; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| padding: 10px 12px; | |
| font-family: var(--font-main); | |
| font-size: 0.9rem; | |
| transition: var(--transition); | |
| } | |
| .styled-select:focus, .styled-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15); | |
| } | |
| /* Card layout update for AI Explanations */ | |
| .asset-card { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| transition: var(--transition); | |
| } | |
| .asset-card-main { | |
| display: grid; | |
| grid-template-columns: 1.5fr 1fr 1fr 1.2fr; | |
| align-items: center; | |
| gap: 20px; | |
| width: 100%; | |
| } | |
| .asset-explanation { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| border-top: 1px dashed var(--border-color); | |
| padding-top: 12px; | |
| margin-top: 2px; | |
| line-height: 1.5; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| } | |
| .explanation-icon { | |
| color: var(--accent); | |
| margin-top: 3px; | |
| font-size: 0.95rem; | |
| } | |
| /* Summary Dashboard Banner styling */ | |
| .summary-banner { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 15px; | |
| width: 100%; | |
| margin-bottom: 25px; | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| .summary-card { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 18px 15px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| gap: 5px; | |
| transition: var(--transition); | |
| } | |
| .summary-card:hover { | |
| transform: translateY(-2px); | |
| border-color: rgba(255, 255, 255, 0.15); | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .summary-card.highlight { | |
| background: linear-gradient(135deg, rgba(108, 92, 231, 0.06), rgba(0, 206, 201, 0.04)); | |
| border-color: rgba(108, 92, 231, 0.2); | |
| } | |
| .summary-card-val { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| font-family: var(--font-mono); | |
| } | |
| .summary-card-val.time { | |
| color: var(--accent); | |
| text-shadow: 0 0 10px rgba(0, 206, 201, 0.2); | |
| } | |
| .summary-card-val.before { | |
| color: var(--success); | |
| } | |
| .summary-card-val.after { | |
| color: var(--warning); | |
| } | |
| .summary-card-val.missing { | |
| color: var(--danger); | |
| } | |
| .summary-card-label { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-secondary); | |
| } | |
| .discovered-labels-list { | |
| grid-column: 1 / -1; | |
| background: rgba(255, 255, 255, 0.01); | |
| border: 1px dashed var(--border-color); | |
| border-radius: var(--radius-sm); | |
| padding: 12px 18px; | |
| text-align: left; | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .discovered-tag { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--border-color); | |
| border-radius: 50px; | |
| padding: 2px 10px; | |
| font-size: 0.8rem; | |
| color: var(--text-primary); | |
| font-family: var(--font-mono); | |
| } | |