Spaces:
Sleeping
Sleeping
| /* ========================================================= | |
| DeepFake Detection System - style.css | |
| Dark AI/security theme, fully responsive. | |
| ========================================================= */ | |
| :root { | |
| --bg: #060a13; | |
| --bg-2: #0b1220; | |
| --card: rgba(15, 23, 42, 0.72); | |
| --card-solid: #0f172a; | |
| --border: rgba(148, 163, 184, 0.16); | |
| --text: #e2e8f0; | |
| --muted: #94a3b8; | |
| --accent: #22d3ee; | |
| --accent-2: #a78bfa; | |
| --green: #34d399; | |
| --red: #f87171; | |
| --amber: #fbbf24; | |
| --radius: 16px; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| /* Make sure the hidden attribute always wins over any display rule */ | |
| [hidden] { display: none ; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; | |
| background: | |
| radial-gradient(900px 500px at 85% -10%, rgba(167, 139, 250, 0.14), transparent 60%), | |
| radial-gradient(800px 500px at 10% 0%, rgba(34, 211, 238, 0.12), transparent 55%), | |
| var(--bg); | |
| color: var(--text); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| line-height: 1.55; | |
| } | |
| .bg-grid { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| background-image: | |
| linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px); | |
| background-size: 44px 44px; | |
| mask-image: radial-gradient(ellipse at 50% 20%, black 30%, transparent 75%); | |
| pointer-events: none; | |
| } | |
| main { | |
| width: min(1080px, calc(100% - 40px)); | |
| margin: 0 auto; | |
| padding: 26px 0 50px; | |
| flex: 1; | |
| } | |
| /* ---------------- Navbar ---------------- */ | |
| .navbar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| width: min(1080px, calc(100% - 40px)); | |
| margin: 14px auto 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 12px 18px; | |
| border-radius: var(--radius); | |
| background: rgba(8, 12, 22, 0.8); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--border); | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| text-decoration: none; | |
| color: var(--text); | |
| font-weight: 700; | |
| font-size: 1.06rem; | |
| letter-spacing: 0.02em; | |
| } | |
| .brand em { | |
| font-style: normal; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-2)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .nav-links { display: flex; gap: 6px; } | |
| .nav-links a { | |
| color: var(--muted); | |
| text-decoration: none; | |
| font-size: 0.93rem; | |
| padding: 8px 13px; | |
| border-radius: 10px; | |
| transition: color 0.2s, background 0.2s; | |
| } | |
| .nav-links a:hover { color: var(--text); background: rgba(148, 163, 184, 0.08); } | |
| .nav-links a.active { | |
| color: #06121a; | |
| font-weight: 600; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-2)); | |
| } | |
| /* ---------------- Flash messages ---------------- */ | |
| .flash-stack { | |
| width: min(1080px, calc(100% - 40px)); | |
| margin: 16px auto 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .flash { | |
| padding: 11px 16px; | |
| border-radius: 12px; | |
| font-size: 0.95rem; | |
| border: 1px solid; | |
| animation: slideIn 0.25s ease; | |
| } | |
| .flash-error { | |
| background: rgba(248, 113, 113, 0.1); | |
| border-color: rgba(248, 113, 113, 0.35); | |
| color: #fecaca; | |
| } | |
| .flash-success { | |
| background: rgba(52, 211, 153, 0.1); | |
| border-color: rgba(52, 211, 153, 0.35); | |
| color: #bbf7d0; | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateY(-6px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ---------------- Hero ---------------- */ | |
| .hero { text-align: center; padding: 46px 10px 26px; } | |
| .hero h1 { | |
| font-size: clamp(1.9rem, 4.5vw, 3rem); | |
| letter-spacing: -0.02em; | |
| line-height: 1.15; | |
| } | |
| .grad-text { | |
| background: linear-gradient(90deg, #34d399, #22d3ee); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .grad-text-red { | |
| background: linear-gradient(90deg, #f472b6, #f87171); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .hero p { | |
| color: var(--muted); | |
| max-width: 640px; | |
| margin: 14px auto 18px; | |
| font-size: 1.02rem; | |
| } | |
| .chip-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 9px; | |
| } | |
| .chip { | |
| font-size: 0.82rem; | |
| color: var(--text); | |
| padding: 6px 12px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border); | |
| background: rgba(148, 163, 184, 0.07); | |
| white-space: nowrap; | |
| } | |
| /* ---------------- Panels & cards ---------------- */ | |
| .panel { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| backdrop-filter: blur(8px); | |
| box-shadow: 0 18px 45px rgba(2, 6, 17, 0.5); | |
| } | |
| .upload-panel { | |
| max-width: 720px; | |
| margin: 0 auto; | |
| padding: 22px; | |
| } | |
| .tabs { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 8px; | |
| padding: 6px; | |
| border-radius: 12px; | |
| background: rgba(2, 6, 17, 0.55); | |
| border: 1px solid var(--border); | |
| margin-bottom: 16px; | |
| } | |
| .tab { | |
| appearance: none; | |
| border: 0; | |
| cursor: pointer; | |
| padding: 11px 8px; | |
| border-radius: 9px; | |
| font-size: 0.98rem; | |
| font-weight: 600; | |
| color: var(--muted); | |
| background: transparent; | |
| transition: background 0.2s, color 0.2s, box-shadow 0.2s; | |
| } | |
| .tab:hover { color: var(--text); } | |
| .tab.active { | |
| color: #06121a; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-2)); | |
| box-shadow: 0 6px 18px rgba(34, 211, 238, 0.25); | |
| } | |
| /* ---------------- Dropzone ---------------- */ | |
| .dropzone { | |
| display: block; | |
| border: 1.6px dashed rgba(148, 163, 184, 0.35); | |
| border-radius: 14px; | |
| padding: 38px 18px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: border-color 0.2s, background 0.2s, transform 0.15s; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .dropzone:hover, .dropzone.dragover { | |
| border-color: var(--accent); | |
| background: rgba(34, 211, 238, 0.06); | |
| } | |
| .dropzone.dragover { transform: scale(1.01); } | |
| .dz-title { font-size: 1.08rem; font-weight: 600; margin-top: 10px; } | |
| .dz-sub { color: var(--muted); font-size: 0.86rem; margin-top: 4px; } | |
| .dropzone input[type="file"] { | |
| position: absolute; | |
| inset: 0; | |
| opacity: 0; | |
| cursor: pointer; | |
| } | |
| .preview { | |
| position: relative; | |
| margin-top: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 12px; | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| background: rgba(2, 6, 17, 0.45); | |
| } | |
| .preview img, | |
| .preview video { | |
| width: 92px; | |
| height: 92px; | |
| object-fit: cover; | |
| border-radius: 10px; | |
| background: #000; | |
| flex-shrink: 0; | |
| } | |
| .preview-meta { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| min-width: 0; | |
| } | |
| .preview-meta span:first-child { | |
| font-weight: 600; | |
| overflow-wrap: anywhere; | |
| } | |
| .preview-meta span:last-child { color: var(--muted); font-size: 0.85rem; } | |
| .remove-btn { | |
| margin-left: auto; | |
| appearance: none; | |
| border: 1px solid var(--border); | |
| background: rgba(148, 163, 184, 0.08); | |
| color: var(--muted); | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 50%; | |
| font-size: 1.15rem; | |
| cursor: pointer; | |
| flex-shrink: 0; | |
| transition: color 0.2s, border-color 0.2s; | |
| } | |
| .remove-btn:hover { color: var(--red); border-color: var(--red); } | |
| .limits { | |
| margin-top: 10px; | |
| text-align: center; | |
| color: var(--muted); | |
| font-size: 0.82rem; | |
| } | |
| /* ---------------- Buttons ---------------- */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| text-decoration: none; | |
| cursor: pointer; | |
| border: 1px solid transparent; | |
| border-radius: 12px; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| padding: 11px 20px; | |
| transition: transform 0.15s, box-shadow 0.2s, filter 0.2s; | |
| } | |
| .btn:hover { transform: translateY(-1px); filter: brightness(1.07); } | |
| .btn:active { transform: translateY(0); } | |
| .btn-primary { | |
| color: #06121a; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-2)); | |
| box-shadow: 0 10px 26px rgba(34, 211, 238, 0.28); | |
| } | |
| .btn-ghost { | |
| color: var(--text); | |
| background: rgba(148, 163, 184, 0.09); | |
| border-color: var(--border); | |
| } | |
| .btn-danger { | |
| color: #fecaca; | |
| background: rgba(248, 113, 113, 0.12); | |
| border-color: rgba(248, 113, 113, 0.4); | |
| } | |
| .btn-lg { | |
| width: 100%; | |
| margin-top: 18px; | |
| font-size: 1.08rem; | |
| padding: 15px 22px; | |
| border-radius: 14px; | |
| } | |
| .btn-sm { padding: 8px 14px; font-size: 0.85rem; } | |
| .btn-xs { padding: 5px 10px; font-size: 0.78rem; border-radius: 9px; } | |
| .btn-icon { font-size: 1.1em; } | |
| /* ---------------- Stats ---------------- */ | |
| .mini-stats, .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 14px; | |
| margin: 26px auto 0; | |
| } | |
| .stat-card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| text-align: center; | |
| padding: 20px 12px; | |
| backdrop-filter: blur(8px); | |
| } | |
| .stat-value { | |
| display: block; | |
| font-size: 1.9rem; | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-2)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .stat-label { color: var(--muted); font-size: 0.86rem; } | |
| .stat-green .stat-value { | |
| background: linear-gradient(90deg, #34d399, #86efac); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| } | |
| .stat-red .stat-value { | |
| background: linear-gradient(90deg, #f87171, #fca5a5); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| } | |
| /* ---------------- Steps ---------------- */ | |
| .steps { margin-top: 48px; text-align: center; } | |
| .steps h2 { font-size: 1.5rem; margin-bottom: 18px; } | |
| .steps-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 14px; | |
| text-align: left; | |
| } | |
| .step-card { padding: 20px; } | |
| .step-num { | |
| font-size: 0.85rem; | |
| font-weight: 800; | |
| color: var(--accent); | |
| letter-spacing: 0.14em; | |
| } | |
| .step-card h3 { margin: 8px 0 6px; font-size: 1.08rem; } | |
| .step-card p { color: var(--muted); font-size: 0.92rem; } | |
| /* ---------------- Result page ---------------- */ | |
| .page-title h1 { font-size: 1.7rem; margin-bottom: 4px; } | |
| .muted { color: var(--muted); } | |
| .verdict-hero { | |
| display: flex; | |
| align-items: center; | |
| gap: 28px; | |
| padding: 30px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| text-align: left; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .verdict-real { border-color: rgba(52, 211, 153, 0.4); } | |
| .verdict-fake { border-color: rgba(248, 113, 113, 0.45); } | |
| .ring-bg { | |
| fill: none; | |
| stroke: rgba(148, 163, 184, 0.14); | |
| stroke-width: 9; | |
| } | |
| .ring-fg { | |
| fill: none; | |
| stroke-width: 9; | |
| stroke-linecap: round; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| filter: drop-shadow(0 0 6px currentColor); | |
| } | |
| .ring-green { stroke: var(--green); color: var(--green); } | |
| .ring-red { stroke: var(--red); color: var(--red); } | |
| .ring-grey { stroke: var(--muted); color: var(--muted); } | |
| .ring-text { | |
| fill: var(--text); | |
| font-size: 1.55rem; | |
| font-weight: 800; | |
| } | |
| .ring-sub { fill: var(--muted); font-size: 0.5rem; letter-spacing: 0.12em; } | |
| .verdict-main { flex: 1; min-width: 220px; } | |
| .verdict-kicker { | |
| text-transform: uppercase; | |
| letter-spacing: 0.18em; | |
| font-size: 0.75rem; | |
| color: var(--muted); | |
| margin-bottom: 8px; | |
| } | |
| .verdict-badge { | |
| font-size: clamp(2rem, 5vw, 3rem); | |
| letter-spacing: -0.01em; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .badge-real { color: var(--green); text-shadow: 0 0 24px rgba(52, 211, 153, 0.45); } | |
| .badge-unknown { color: var(--muted); } | |
| .badge-fake { | |
| color: var(--red); | |
| text-shadow: 0 0 24px rgba(248, 113, 113, 0.5); | |
| animation: pulseRed 1.6s ease-in-out infinite; | |
| } | |
| @keyframes pulseRed { | |
| 0%, 100% { text-shadow: 0 0 18px rgba(248, 113, 113, 0.35); } | |
| 50% { text-shadow: 0 0 34px rgba(248, 113, 113, 0.75); } | |
| } | |
| .verdict-note { color: var(--muted); margin-top: 10px; font-size: 0.94rem; max-width: 480px; } | |
| .prob-bars { margin-top: 16px; padding: 20px 22px; } | |
| .prob-row { | |
| display: grid; | |
| grid-template-columns: 52px 1fr 58px; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 7px 0; | |
| } | |
| .prob-label { font-size: 0.88rem; font-weight: 700; } | |
| .prob-real-label { color: var(--green); } | |
| .prob-fake-label { color: var(--red); } | |
| .prob-track { | |
| height: 12px; | |
| border-radius: 999px; | |
| background: rgba(2, 6, 17, 0.6); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| } | |
| .prob-fill { | |
| height: 100%; | |
| border-radius: 999px; | |
| animation: growBar 0.9s cubic-bezier(0.2, 0.7, 0.3, 1); | |
| } | |
| .fill-real { background: linear-gradient(90deg, #059669, #34d399); } | |
| .fill-fake { background: linear-gradient(90deg, #dc2626, #f87171); } | |
| .prob-value { text-align: right; font-size: 0.9rem; color: var(--muted); } | |
| @keyframes growBar { from { transform: scaleX(0); } to { transform: scaleX(1); } } | |
| .prob-fill { transform-origin: left center; } | |
| .details-panel { margin-top: 16px; padding: 24px; } | |
| .details-panel h2, .table-panel h2, .recent-panel h2 { | |
| font-size: 1.2rem; | |
| margin-bottom: 16px; | |
| } | |
| .detail-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); | |
| gap: 10px; | |
| } | |
| .detail-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| padding: 12px 14px; | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| background: rgba(2, 6, 17, 0.4); | |
| } | |
| .detail-item span { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; } | |
| .detail-item strong { font-size: 0.97rem; overflow-wrap: anywhere; } | |
| .action-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 22px; | |
| } | |
| /* ---------------- History page ---------------- */ | |
| .table-panel, .recent-panel { margin-top: 18px; padding: 22px; } | |
| .table-head-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| margin-bottom: 14px; | |
| } | |
| .table-head-row h2 { margin-bottom: 0; } | |
| .table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); } | |
| table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 780px; } | |
| thead th { | |
| text-align: left; | |
| padding: 11px 13px; | |
| background: rgba(2, 6, 17, 0.65); | |
| color: var(--muted); | |
| font-size: 0.76rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| white-space: nowrap; | |
| } | |
| tbody td { | |
| padding: 11px 13px; | |
| border-top: 1px solid var(--border); | |
| white-space: nowrap; | |
| } | |
| tbody tr:hover { background: rgba(148, 163, 184, 0.05); } | |
| .cell-file { max-width: 220px; overflow: hidden; text-overflow: ellipsis; } | |
| .chip-pred { | |
| padding: 4px 11px; | |
| border-radius: 999px; | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| } | |
| .chip-real { color: #052e21; background: linear-gradient(90deg, #34d399, #6ee7b7); } | |
| .chip-fake { color: #2f0707; background: linear-gradient(90deg, #f87171, #fda4af); } | |
| .chip-unknown { color: #0b1220; background: #94a3b8; } | |
| .empty-state { text-align: center; padding: 38px 10px; } | |
| .empty-state p { color: var(--muted); margin-bottom: 14px; } | |
| .recent-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } | |
| .recent-list li { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 13px; | |
| border: 1px solid var(--border); | |
| border-radius: 11px; | |
| background: rgba(2, 6, 17, 0.4); | |
| } | |
| .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } | |
| .dot-real { background: var(--green); box-shadow: 0 0 10px rgba(52, 211, 153, 0.7); } | |
| .dot-fake { background: var(--red); box-shadow: 0 0 10px rgba(248, 113, 113, 0.7); } | |
| .dot-unknown { background: var(--muted); } | |
| .recent-name { | |
| font-weight: 600; | |
| max-width: 320px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .recent-meta { margin-left: auto; color: var(--muted); font-size: 0.83rem; white-space: nowrap; } | |
| /* ---------------- Scanning overlay ---------------- */ | |
| .scanning-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 200; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 26px; | |
| background: rgba(4, 8, 16, 0.88); | |
| backdrop-filter: blur(6px); | |
| } | |
| .scanner { | |
| position: relative; | |
| width: 130px; | |
| height: 130px; | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 6px; | |
| padding: 6px; | |
| border-radius: 18px; | |
| border: 1px solid rgba(34, 211, 238, 0.4); | |
| } | |
| .scan-face span { | |
| border-radius: 6px; | |
| background: rgba(34, 211, 238, 0.14); | |
| border: 1px solid rgba(34, 211, 238, 0.25); | |
| animation: cellBlink 1.2s ease-in-out infinite; | |
| } | |
| .scan-face span:nth-child(2n) { animation-delay: 0.2s; } | |
| .scan-face span:nth-child(3n) { animation-delay: 0.45s; } | |
| @keyframes cellBlink { | |
| 0%, 100% { opacity: 0.35; } | |
| 50% { opacity: 1; background: rgba(34, 211, 238, 0.3); } | |
| } | |
| .scan-line { | |
| position: absolute; | |
| left: 6px; | |
| right: 6px; | |
| height: 3px; | |
| border-radius: 3px; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-2)); | |
| box-shadow: 0 0 14px rgba(34, 211, 238, 0.8); | |
| animation: scanMove 1.5s ease-in-out infinite alternate; | |
| } | |
| @keyframes scanMove { | |
| from { top: 8px; } | |
| to { top: 116px; } | |
| } | |
| .scan-status { color: var(--muted); letter-spacing: 0.08em; font-size: 0.95rem; } | |
| /* ---------------- Footer ---------------- */ | |
| footer { | |
| border-top: 1px solid var(--border); | |
| margin-top: 30px; | |
| padding: 20px; | |
| text-align: center; | |
| color: var(--muted); | |
| font-size: 0.84rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| /* ---------------- Responsive ---------------- */ | |
| @media (max-width: 640px) { | |
| .navbar { flex-direction: column; gap: 8px; } | |
| .nav-links { justify-content: center; } | |
| .hero { padding-top: 30px; } | |
| .verdict-hero { text-align: center; flex-direction: column; } | |
| .recent-meta { margin-left: 0; white-space: normal; } | |
| .recent-list li { flex-wrap: wrap; } | |
| .action-row .btn { width: 100%; } | |
| } | |