Spaces:
Paused
Paused
| :root { | |
| --bg-color: #0a0f1e; | |
| --panel-bg: rgba(20, 30, 55, 0.75); | |
| --panel-border: rgba(255, 255, 255, 0.09); | |
| --cyan: #06b6d4; | |
| --cyan-dim: rgba(6, 182, 212, 0.12); | |
| --purple: #8b5cf6; | |
| --purple-dim: rgba(139, 92, 246, 0.12); | |
| --orange: #f97316; | |
| --orange-dim: rgba(249, 115, 22, 0.15); | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --danger: #ef4444; | |
| --danger-dim: rgba(239, 68, 68, 0.12); | |
| --success: #10b981; | |
| --success-dim: rgba(16, 185, 129, 0.12); | |
| --drone-color: #f97316; | |
| --drone-glow: rgba(249, 115, 22, 0.35); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; } | |
| body { | |
| background-color: var(--bg-color); | |
| color: var(--text-main); | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| transition: background 0.4s; | |
| } | |
| /* Drone mode body tint */ | |
| body.drone-active { background-color: #0d0a00; } | |
| /* ======================== | |
| Background Orbs | |
| ======================== */ | |
| .background-orbs { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; } | |
| .orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.45; animation: float 22s infinite ease-in-out; } | |
| .orb-1 { width: 500px; height: 500px; background: var(--cyan-dim); top: -100px; left: -100px; } | |
| .orb-2 { width: 420px; height: 420px; background: var(--purple-dim); bottom: -60px; right: 8%; animation-delay: -6s; } | |
| .orb-3 { width: 320px; height: 320px; background: rgba(59,130,246,0.08); top: 40%; left: 32%; animation-delay: -12s; } | |
| body.drone-active .orb-1 { background: var(--orange-dim); } | |
| body.drone-active .orb-2 { background: var(--orange-dim); } | |
| @keyframes float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-28px) scale(1.05); } } | |
| /* ======================== | |
| Utilities | |
| ======================== */ | |
| .text-cyan { color: var(--cyan); } | |
| .text-purple { color: var(--purple); } | |
| .text-gray { color: var(--text-muted); } | |
| .text-danger { color: var(--danger); } | |
| .text-success { color: var(--success); } | |
| .text-orange { color: var(--orange); } | |
| .mt-2 { margin-top: 0.5rem; } | |
| .mt-3 { margin-top: 1rem; } | |
| .mt-4 { margin-top: 2rem; } | |
| .text-center { text-align: center; } | |
| .text-small { font-size: 0.82rem; } | |
| .d-flex { display: flex; } | |
| .flex-col { flex-direction: column; } | |
| .hidden { display: none ; } | |
| /* ======================== | |
| Glass Panels | |
| ======================== */ | |
| .glass-panel { | |
| background: var(--panel-bg); | |
| backdrop-filter: blur(14px); | |
| -webkit-backdrop-filter: blur(14px); | |
| border: 1px solid var(--panel-border); | |
| border-radius: 18px; | |
| padding: 1.5rem; | |
| box-shadow: 0 4px 24px rgba(0,0,0,0.25); | |
| } | |
| /* ======================== | |
| Navigation | |
| ======================== */ | |
| .glass-nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0.85rem 2.5rem; | |
| background: rgba(10, 15, 30, 0.88); | |
| backdrop-filter: blur(16px); | |
| border-bottom: 1px solid var(--panel-border); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| gap: 1rem; | |
| } | |
| .logo { font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; } | |
| .version-tag { font-size: 0.65rem; font-weight: 600; background: var(--orange-dim); color: var(--orange); padding: 2px 8px; border-radius: 20px; border: 1px solid var(--orange); letter-spacing: 0.05em; } | |
| .nav-links { display: flex; gap: 0.6rem; } | |
| .nav-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.95rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 8px; transition: all 0.25s; display: flex; align-items: center; gap: 0.45rem; } | |
| .nav-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.05); } | |
| .nav-btn.active { color: var(--cyan); background: var(--cyan-dim); } | |
| /* Nav drone badge */ | |
| .nav-drone-badge { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); padding: 0.4rem 0.9rem; border-radius: 20px; border: 1px solid var(--panel-border); background: rgba(255,255,255,0.04); transition: 0.3s; white-space: nowrap; } | |
| .nav-drone-badge.active { color: var(--orange); border-color: var(--orange); background: var(--orange-dim); box-shadow: 0 0 12px var(--drone-glow); animation: dronePulse 2s infinite; } | |
| @keyframes dronePulse { 0%,100% { box-shadow: 0 0 10px var(--drone-glow); } 50% { box-shadow: 0 0 22px var(--drone-glow); } } | |
| /* ======================== | |
| Layout | |
| ======================== */ | |
| .content { padding: 2rem 3rem; max-width: 1440px; margin: 0 auto; } | |
| .tab-content { display: none; animation: fadeIn 0.35s ease; } | |
| .tab-content.active { display: block; } | |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } | |
| /* ======================== | |
| Stats Grid | |
| ======================== */ | |
| .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } | |
| .stat-card { display: flex; align-items: center; gap: 1.4rem; transition: transform 0.3s; } | |
| .stat-card:hover { transform: translateY(-4px); } | |
| .stat-icon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } | |
| .stat-icon.cyan { background: var(--cyan-dim); color: var(--cyan); } | |
| .stat-icon.purple { background: var(--purple-dim); color: var(--purple); } | |
| .stat-icon.orange { background: var(--orange-dim); color: var(--orange); } | |
| .stat-icon.green { background: var(--success-dim); color: var(--success); } | |
| .stat-icon.red { background: var(--danger-dim); color: var(--danger); } | |
| .stat-icon.indicator { background: rgba(255,255,255,0.05); color: var(--text-muted); transition: 0.3s; } | |
| .stat-icon.indicator.on { background: var(--success-dim); color: var(--success); box-shadow: 0 0 14px rgba(16,185,129,0.3); } | |
| /* ======================== | |
| Models Status Bar | |
| ======================== */ | |
| .models-status-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 0.85rem 1.2rem; } | |
| .model-chip { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; border: 1px solid transparent; transition: 0.3s; } | |
| .model-chip.loading { color: var(--text-muted); border-color: var(--panel-border); background: rgba(255,255,255,0.04); } | |
| .model-chip.active { color: var(--success); border-color: var(--success); background: var(--success-dim); } | |
| .model-chip.inactive { color: var(--danger); border-color: var(--danger); background: var(--danger-dim); } | |
| .model-chip.drone { color: var(--orange); border-color: var(--orange); background: var(--orange-dim); } | |
| /* ======================== | |
| Camera UI | |
| ======================== */ | |
| .camera-container { padding: 0; overflow: hidden; display: flex; flex-direction: column; } | |
| .camera-header { padding: 1.2rem 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--panel-border); flex-wrap: wrap; gap: 0.8rem; } | |
| .camera-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } | |
| .video-feed-wrapper { width: 100%; aspect-ratio: 16/9; background: #000; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } | |
| .video-feed-wrapper img { width: 100%; height: 100%; object-fit: contain; z-index: 2; position: relative; } | |
| .no-signal { text-align: center; color: var(--text-muted); position: absolute; z-index: 1; } | |
| .no-signal i { font-size: 3rem; margin-bottom: 1rem; } | |
| /* Scan line */ | |
| .scanline { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--cyan); opacity: 0; z-index: 3; box-shadow: 0 0 10px var(--cyan); } | |
| .video-feed-wrapper.active .scanline { animation: scan 3s linear infinite; opacity: 0.5; } | |
| body.drone-active .video-feed-wrapper.active .scanline { background: var(--orange); box-shadow: 0 0 10px var(--orange); } | |
| @keyframes scan { 0% { top: 0; } 100% { top: 100%; } } | |
| /* Drone badge overlay on video */ | |
| .drone-badge-overlay { position: absolute; top: 12px; left: 12px; z-index: 10; display: flex; align-items: center; gap: 6px; background: rgba(249,115,22,0.85); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 5px 12px; border-radius: 20px; letter-spacing: 0.08em; animation: dronePulse 2s infinite; backdrop-filter: blur(6px); } | |
| /* Drone Mode Toggle Switch */ | |
| .drone-toggle-wrap { display: flex; align-items: center; gap: 0.55rem; } | |
| .drone-label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: color 0.3s; } | |
| body.drone-active .drone-label { color: var(--orange); } | |
| .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; } | |
| .toggle-switch input { opacity: 0; width: 0; height: 0; } | |
| .toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.1); border-radius: 34px; transition: 0.3s; border: 1px solid var(--panel-border); } | |
| .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 2px; background: var(--text-muted); border-radius: 50%; transition: 0.3s; } | |
| .toggle-switch input:checked + .toggle-slider { background: var(--orange-dim); border-color: var(--orange); box-shadow: 0 0 10px var(--drone-glow); } | |
| .toggle-switch input:checked + .toggle-slider::before { transform: translateX(19px); background: var(--orange); } | |
| /* RTSP input */ | |
| .rtsp-wrap { display: flex; } | |
| .rtsp-input { width: 260px; font-size: 0.82rem; padding: 0.6rem 0.9rem; } | |
| /* ======================== | |
| Inputs and Forms | |
| ======================== */ | |
| .grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } | |
| .tabs-sub { display: flex; background: rgba(0,0,0,0.25); border-radius: 8px; padding: 4px; margin-bottom: 1.5rem; } | |
| .sub-btn { flex: 1; padding: 0.5rem; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 6px; transition: 0.25s; font-weight: 500; } | |
| .sub-btn.active { background: var(--panel-bg); color: var(--text-main); box-shadow: 0 2px 6px rgba(0,0,0,0.15); } | |
| .sub-content { display: none; } | |
| .sub-content.active { display: block; animation: fadeIn 0.3s; } | |
| .input-group label { display: block; font-size: 0.88rem; font-weight: 500; margin-bottom: 0.45rem; color: var(--text-muted); } | |
| .glass-input { width: 100%; padding: 0.75rem 1rem; background: rgba(0,0,0,0.25); border: 1px solid var(--panel-border); border-radius: 8px; color: var(--text-main); outline: none; transition: 0.25s; } | |
| .glass-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-dim); } | |
| body.drone-active .glass-input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-dim); } | |
| /* ======================== | |
| Buttons | |
| ======================== */ | |
| .btn { padding: 0.75rem 1.4rem; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; transition: 0.25s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.92rem; } | |
| .btn-primary { background: var(--cyan); color: #000; } | |
| .btn-primary:hover { background: #0891b2; transform: translateY(-2px); box-shadow: 0 6px 16px var(--cyan-dim); } | |
| .btn-primary.stop { background: var(--danger); color: #fff; } | |
| .btn-primary.stop:hover { background: #dc2626; box-shadow: 0 6px 16px var(--danger-dim); } | |
| .btn-submit { width: 100%; background: var(--cyan-dim); color: var(--cyan); border: 1px solid var(--cyan); margin-top: 1rem; } | |
| .btn-submit:hover { background: var(--cyan); color: #000; } | |
| .purple-btn { background: var(--purple-dim); color: var(--purple); border-color: var(--purple); } | |
| .purple-btn:hover { background: var(--purple); color: #fff; } | |
| .btn-live { width: 100%; background: rgba(255,255,255,0.05); color: var(--text-main); border: 1px solid var(--panel-border); } | |
| .btn-live:hover { background: rgba(255,255,255,0.1); } | |
| /* ======================== | |
| Upload Zone | |
| ======================== */ | |
| .upload-area { border: 2px dashed var(--panel-border); border-radius: 12px; padding: 2rem; text-align: center; margin-top: 1.4rem; cursor: pointer; transition: 0.3s; background: rgba(0,0,0,0.1); } | |
| .upload-area:hover, .upload-area.dragover { border-color: var(--cyan); background: var(--cyan-dim); } | |
| .upload-area i { font-size: 2.5rem; color: var(--cyan); margin-bottom: 0.9rem; } | |
| .file-count { text-align: center; margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-muted); } | |
| .hidden-input { display: none; } | |
| /* ======================== | |
| Lists | |
| ======================== */ | |
| .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; } | |
| .delete-controls { display: flex; gap: 0.5rem; } | |
| .glass-input-small { padding: 0.4rem 0.8rem; background: rgba(0,0,0,0.2); border: 1px solid var(--panel-border); border-radius: 6px; color: var(--text-main); outline: none; font-size: 0.88rem; } | |
| .btn-danger-small { padding: 0.4rem 0.8rem; background: var(--danger-dim); color: var(--danger); border: 1px solid var(--danger); border-radius: 6px; cursor: pointer; transition: 0.25s; } | |
| .btn-danger-small:hover { background: var(--danger); color: #fff; } | |
| .list-container { display: flex; flex-direction: column; gap: 0.7rem; max-height: 360px; overflow-y: auto; padding-right: 0.5rem; } | |
| .list-item { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1rem; background: rgba(0,0,0,0.2); border-radius: 8px; border: 1px solid var(--panel-border); transition: 0.2s; } | |
| .list-item:hover { background: rgba(0,0,0,0.38); border-color: var(--text-muted); } | |
| .list-item .name { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } | |
| .list-item .badge { background: var(--panel-bg); padding: 2px 10px; border-radius: 12px; font-size: 0.78rem; color: var(--text-muted); border: 1px solid var(--panel-border); } | |
| /* ======================== | |
| Custom Scrollbar | |
| ======================== */ | |
| .custom-scroll::-webkit-scrollbar { width: 5px; } | |
| .custom-scroll::-webkit-scrollbar-track { background: transparent; } | |
| .custom-scroll::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 10px; } | |
| .custom-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } | |
| /* ======================== | |
| Toast | |
| ======================== */ | |
| #toast-container { position: fixed; bottom: 1.8rem; right: 1.8rem; z-index: 1000; display: flex; flex-direction: column; gap: 0.8rem; } | |
| .toast { background: var(--panel-bg); backdrop-filter: blur(14px); border: 1px solid var(--success); padding: 0.9rem 1.4rem; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 0.75rem; animation: slideIn 0.3s cubic-bezier(0.1,1,0.2,1) forwards; font-size: 0.9rem; } | |
| .toast.error { border-color: var(--danger); } | |
| .toast.success i { color: var(--success); } | |
| .toast.error i { color: var(--danger); } | |
| @keyframes slideIn { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } | |
| /* ======================== | |
| Fullscreen Overlay | |
| ======================== */ | |
| .fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.88); z-index: 2000; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(10px); animation: fadeIn 0.3s ease; } | |
| /* ======================== | |
| Training Modal (Camera Preview) | |
| ======================== */ | |
| .training-modal { | |
| width: 680px; | |
| max-width: 95vw; | |
| max-height: 95vh; | |
| overflow-y: auto; | |
| padding: 0; | |
| border-color: var(--cyan); | |
| box-shadow: 0 0 50px var(--cyan-dim), 0 20px 60px rgba(0,0,0,0.5); | |
| animation: scaleUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| .train-modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.2rem 1.5rem; | |
| border-bottom: 1px solid var(--panel-border); | |
| } | |
| .train-modal-header h2 { | |
| font-size: 1.2rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| color: var(--cyan); | |
| } | |
| .train-subject-badge { | |
| background: var(--cyan-dim); | |
| color: var(--cyan); | |
| padding: 4px 14px; | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| border: 1px solid var(--cyan); | |
| } | |
| /* Video container */ | |
| .train-video-container { | |
| width: 100%; | |
| aspect-ratio: 16/9; | |
| background: #000; | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| } | |
| .train-video-container img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .train-no-signal { | |
| position: absolute; | |
| text-align: center; | |
| color: var(--text-muted); | |
| z-index: 1; | |
| } | |
| .train-no-signal i { font-size: 2.5rem; color: var(--cyan); margin-bottom: 0.8rem; } | |
| .train-no-signal p { margin-top: 0.5rem; } | |
| /* Progress Dots */ | |
| .train-progress-dots { | |
| display: flex; | |
| justify-content: center; | |
| gap: 12px; | |
| padding: 1.2rem 1.5rem 0.6rem; | |
| } | |
| .train-progress-dots .dot { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 2px solid rgba(255, 255, 255, 0.15); | |
| transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| position: relative; | |
| } | |
| .train-progress-dots .dot.active { | |
| border-color: var(--cyan); | |
| background: var(--cyan-dim); | |
| box-shadow: 0 0 12px var(--cyan-dim); | |
| animation: dotPulse 1.2s infinite; | |
| } | |
| .train-progress-dots .dot.captured { | |
| background: var(--cyan); | |
| border-color: var(--cyan); | |
| box-shadow: 0 0 10px var(--cyan-dim); | |
| transform: scale(1.15); | |
| } | |
| .train-progress-dots .dot.captured::after { | |
| content: '✓'; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 0.55rem; | |
| color: #000; | |
| font-weight: 900; | |
| } | |
| @keyframes dotPulse { | |
| 0%, 100% { box-shadow: 0 0 8px var(--cyan-dim); } | |
| 50% { box-shadow: 0 0 20px var(--cyan-dim); transform: scale(1.2); } | |
| } | |
| /* Status text */ | |
| .train-status-text { | |
| text-align: center; | |
| padding: 0.4rem 1.5rem; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| /* Training buttons */ | |
| .train-btn-row { | |
| display: flex; | |
| gap: 0.8rem; | |
| padding: 1rem 1.5rem 1.5rem; | |
| justify-content: center; | |
| } | |
| .train-capture-btn { | |
| flex: 2; | |
| background: linear-gradient(135deg, var(--cyan), #0891b2); | |
| color: #000; | |
| font-weight: 700; | |
| font-size: 1rem; | |
| padding: 0.85rem 1.6rem; | |
| border-radius: 12px; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| } | |
| .train-capture-btn:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px var(--cyan-dim); | |
| } | |
| .train-capture-btn:active:not(:disabled) { | |
| transform: scale(0.97); | |
| } | |
| .train-capture-btn:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| /* Shutter ring animation on capture */ | |
| .train-capture-btn::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 12px; | |
| border: 3px solid rgba(255,255,255,0.5); | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| .train-capture-btn:active::before { | |
| opacity: 1; | |
| animation: shutterRing 0.3s ease-out; | |
| } | |
| @keyframes shutterRing { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 100% { transform: scale(1.3); opacity: 0; } | |
| } | |
| .train-done-btn { | |
| flex: 1; | |
| background: var(--success-dim); | |
| color: var(--success); | |
| border: 1px solid var(--success); | |
| border-radius: 10px; | |
| transition: all 0.25s; | |
| } | |
| .train-done-btn:hover { background: var(--success); color: #fff; transform: translateY(-2px); } | |
| .train-cancel-btn { | |
| flex: 1; | |
| background: var(--danger-dim); | |
| color: var(--danger); | |
| border: 1px solid var(--danger); | |
| border-radius: 10px; | |
| transition: all 0.25s; | |
| } | |
| .train-cancel-btn:hover { background: var(--danger); color: #fff; transform: translateY(-2px); } | |
| .spinner { width: 48px; height: 48px; border: 4px solid rgba(6,182,212,0.2); border-radius: 50%; border-top-color: var(--cyan); animation: spin 1s linear infinite; margin: 0 auto 1.5rem; } | |
| @keyframes spin { 100% { transform: rotate(360deg); } } | |
| /* ======================== | |
| Profiles & Search | |
| ======================== */ | |
| .progress-bar-bg { width: 100%; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; } | |
| .progress-bar-fill { height: 100%; width: 0%; background: var(--cyan); transition: width 0.3s ease; box-shadow: 0 0 10px var(--cyan-dim); } | |
| .profile-card { background: rgba(0,0,0,0.25); border: 1px solid var(--panel-border); border-radius: 12px; padding: 1rem; margin-bottom: 0.8rem; transition: 0.25s; } | |
| .profile-card:hover { border-color: var(--cyan); background: rgba(0,0,0,0.4); } | |
| .profile-card.active-search { border-color: var(--success); box-shadow: 0 0 15px var(--success-dim); } | |
| .profile-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--panel-border); padding-bottom: 0.6rem; margin-bottom: 0.8rem; } | |
| .profile-header h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; } | |
| .profile-stats { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); } | |
| .stat-row { display: flex; align-items: center; gap: 0.5rem; } | |
| .color-dots { display: flex; gap: 0.3rem; } | |
| .color-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); } | |
| /* New stat-badge grid for profile cards */ | |
| .profile-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } | |
| .stat-badge { display: flex; align-items: flex-start; gap: 0.6rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 0.6rem 0.7rem; transition: 0.2s; } | |
| .stat-badge:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); } | |
| .stat-badge > i { font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; } | |
| .stat-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } | |
| .stat-value { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); line-height: 1.2; } | |
| .stat-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } | |
| .height-bar-bg { width: 100%; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-top: 4px; overflow: hidden; } | |
| .height-bar-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--cyan)); border-radius: 2px; transition: width 0.5s ease; } | |
| .search-btn { margin-top: 1rem; width: 100%; } | |
| /* ======================== | |
| Target Found Popup | |
| ======================== */ | |
| .target-found-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); z-index: 3000; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(10px); animation: fadeIn 0.3s ease; } | |
| .target-found-modal { background: rgba(0, 15, 5, 0.9); border: 2px solid var(--success); border-radius: 16px; padding: 3rem; text-align: center; box-shadow: 0 0 50px rgba(16, 185, 129, 0.4); max-width: 500px; animation: scaleUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } | |
| .target-found-modal .target-icon { font-size: 5rem; color: var(--success); margin-bottom: 1.5rem; text-shadow: 0 0 20px var(--success); } | |
| .target-found-modal h2 { color: #fff; font-size: 2.2rem; margin-bottom: 0.5rem; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 0 10px rgba(255,255,255,0.5); } | |
| .target-found-modal p { color: #ddd; font-size: 1.05rem; line-height: 1.6; } | |
| .target-found-modal p strong { color: var(--success); font-size: 1.15rem; } | |
| .pulse { animation: pulseDanger 1.5s infinite; } | |
| @keyframes pulseDanger { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } | |
| @keyframes scaleUp { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } | |
| /* ======================== | |
| Verification Status Bar (in profile cards) | |
| ======================== */ | |
| .verify-status-bar { | |
| margin-top: 0.8rem; | |
| padding: 0.65rem 0.85rem; | |
| background: rgba(0,0,0,0.3); | |
| border: 1px solid var(--warning); | |
| border-radius: 10px; | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| color: var(--warning); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.4rem; | |
| animation: fadeIn 0.3s ease; | |
| line-height: 1.4; | |
| } | |
| .verify-status-bar i { | |
| margin-right: 0.4rem; | |
| } | |
| .verify-progress-bar { | |
| width: 100%; | |
| height: 5px; | |
| background: rgba(255,255,255,0.08); | |
| border-radius: 3px; | |
| margin-top: 0.4rem; | |
| overflow: hidden; | |
| } | |
| .verify-progress-fill { | |
| height: 100%; | |
| background: var(--cyan); | |
| border-radius: 3px; | |
| transition: width 0.5s ease; | |
| box-shadow: 0 0 8px var(--cyan-dim); | |
| } | |
| /* Per-modality mini scores in verify status bar */ | |
| .verify-scores-mini { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-top: 0.35rem; | |
| flex-wrap: wrap; | |
| } | |
| .verify-scores-mini span { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| padding: 1px 6px; | |
| background: rgba(255,255,255,0.06); | |
| border-radius: 4px; | |
| letter-spacing: 0.03em; | |
| } | |
| .verify-scores-mini.confirmed span { | |
| color: var(--success); | |
| background: var(--success-dim); | |
| } | |
| /* ======================== | |
| 6-Modality Signal Grid (Profile Cards) | |
| ======================== */ | |
| .modality-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 0.45rem; | |
| margin-top: 0.6rem; | |
| } | |
| .modality-chip { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.45rem; | |
| padding: 0.4rem 0.6rem; | |
| border-radius: 8px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| border: 1px solid transparent; | |
| transition: all 0.25s; | |
| line-height: 1.2; | |
| } | |
| .modality-chip i { | |
| font-size: 0.85rem; | |
| flex-shrink: 0; | |
| width: 18px; | |
| text-align: center; | |
| } | |
| .modality-chip span { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .modality-chip.mod-active { | |
| background: rgba(16, 185, 129, 0.08); | |
| border-color: rgba(16, 185, 129, 0.25); | |
| color: var(--success); | |
| } | |
| .modality-chip.mod-active i { | |
| color: var(--success); | |
| } | |
| .modality-chip.mod-inactive { | |
| background: rgba(255, 255, 255, 0.03); | |
| border-color: rgba(255, 255, 255, 0.06); | |
| color: var(--text-muted); | |
| } | |
| .modality-chip.mod-inactive i { | |
| color: rgba(148, 163, 184, 0.5); | |
| } | |
| .modality-chip .color-dots { | |
| margin-left: auto; | |
| } | |
| /* ======================== | |
| Camera Calibration Panel | |
| ======================== */ | |
| .calib-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 0.8rem; | |
| } | |
| .calib-grid .input-group label { | |
| font-size: 0.78rem; | |
| } | |
| .calib-grid .glass-input { | |
| padding: 0.55rem 0.75rem; | |
| font-size: 0.88rem; | |
| } | |
| .calibration-badge { | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| margin-left: 0.5rem; | |
| background: var(--danger-dim); | |
| color: var(--danger); | |
| border: 1px solid var(--danger); | |
| letter-spacing: 0.05em; | |
| vertical-align: middle; | |
| } | |
| .calibration-badge.calibrated { | |
| background: var(--success-dim); | |
| color: var(--success); | |
| border-color: var(--success); | |
| } | |
| /* ======================== | |
| Match Event Log | |
| ======================== */ | |
| .match-event { | |
| flex-wrap: wrap; | |
| padding: 0.65rem 0.8rem; | |
| } | |
| .match-event .name { | |
| font-size: 0.88rem; | |
| } | |
| .match-event .badge { | |
| font-weight: 700; | |
| font-size: 0.85rem; | |
| } | |
| /* ======================== | |
| Warning color variable | |
| ======================== */ | |
| :root { | |
| --warning: #f59e0b; | |
| --warning-dim: rgba(245, 158, 11, 0.12); | |
| } | |
| /* ======================== | |
| Responsive | |
| ======================== */ | |
| @media (max-width: 1100px) { | |
| .stats-grid { grid-template-columns: repeat(2, 1fr); } | |
| .grid-2col { grid-template-columns: 1fr; } | |
| .content { padding: 1.5rem; } | |
| .glass-nav { padding: 0.85rem 1.25rem; } | |
| .calib-grid { grid-template-columns: 1fr 1fr; } | |
| } | |
| @media (max-width: 600px) { | |
| .stats-grid { grid-template-columns: 1fr; } | |
| .camera-controls { flex-direction: column; align-items: stretch; } | |
| .rtsp-input { width: 100%; } | |
| .calib-grid { grid-template-columns: 1fr; } | |
| .modality-grid { grid-template-columns: 1fr; } | |
| } | |