Spaces:
Sleeping
Sleeping
| /* CrossFakeNet — style.css */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg: #0a0a0f; | |
| --bg2: #111118; | |
| --bg3: #1a1a24; | |
| --border: rgba(255,255,255,0.08); | |
| --border-a:rgba(255,255,255,0.2); | |
| --text: #e8e8f0; | |
| --muted: #6b6b80; | |
| --blue: #3b82f6; | |
| --blue-lt: #93c5fd; | |
| --mono: 'DM Mono', monospace; | |
| --display:'Syne', sans-serif; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--mono); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| body::before { | |
| content: ''; | |
| position: fixed; inset: 0; | |
| background-image: | |
| linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), | |
| linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px); | |
| background-size: 40px 40px; | |
| pointer-events: none; z-index: 0; | |
| } | |
| .app { | |
| position: relative; z-index: 1; | |
| max-width: 860px; margin: 0 auto; | |
| padding: 48px 24px 80px; | |
| } | |
| /* Header */ | |
| .header { margin-bottom: 48px; text-align: center; } | |
| .header-badge { | |
| display: inline-block; font-size: 10px; | |
| letter-spacing: 0.15em; text-transform: uppercase; | |
| color: var(--muted); border: 1px solid var(--border); | |
| padding: 4px 12px; border-radius: 100px; margin-bottom: 16px; | |
| } | |
| .header h1 { | |
| font-family: var(--display); font-size: clamp(28px,5vw,42px); | |
| font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; | |
| color: #fff; margin-bottom: 12px; | |
| } | |
| .header h1 span { color: var(--blue); } | |
| .header p { font-size: 13px; color: var(--muted); max-width: 480px; margin: 0 auto; line-height: 1.7; } | |
| /* Modality grid */ | |
| .modality-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } | |
| .modality-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 32px; } | |
| @media(max-width:560px){ .modality-grid { grid-template-columns: repeat(3,1fr); } } | |
| .mod-btn { | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: 10px; padding: 14px 8px 12px; | |
| cursor: pointer; transition: all 0.2s; | |
| text-align: center; color: var(--muted); | |
| font-family: var(--mono); font-size: 11px; | |
| display: flex; flex-direction: column; align-items: center; gap: 8px; | |
| } | |
| .mod-btn:hover { border-color: var(--border-a); color: var(--text); background: var(--bg3); } | |
| .mod-btn.active { border-color: var(--blue); color: var(--blue-lt); background: rgba(59,130,246,0.08); } | |
| .mod-icon { font-size: 22px; line-height: 1; } | |
| .mod-name { font-weight: 500; } | |
| /* Model tag */ | |
| .model-tag { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; | |
| color: var(--muted); border: 1px solid var(--border); | |
| padding: 4px 10px; border-radius: 6px; margin-bottom: 20px; background: var(--bg2); | |
| } | |
| .model-tag span { color: #a78bfa; } | |
| /* Pipeline */ | |
| .pipeline { | |
| display: flex; align-items: center; | |
| gap: 0; margin-bottom: 28px; | |
| overflow-x: auto; padding-bottom: 4px; | |
| } | |
| .pipeline::-webkit-scrollbar { height: 3px; } | |
| .pipeline::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } | |
| .pipe-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; } | |
| .pipe-dot { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:14px; } | |
| .pipe-step.active .pipe-dot { border-color: var(--blue); background: rgba(59,130,246,0.12); } | |
| .pipe-label { font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); text-align:center; max-width:56px; } | |
| .pipe-arrow { flex-shrink:0; width:24px; height:2px; background:var(--border); position:relative; margin:0 2px; margin-bottom:18px; } | |
| .pipe-arrow::after { content:''; position:absolute; right:-1px; top:-3px; border-left:5px solid var(--border); border-top:4px solid transparent; border-bottom:4px solid transparent; } | |
| /* Panel */ | |
| .panel { display:none; animation: fadeIn 0.25s ease; } | |
| .panel.visible { display: block; } | |
| @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } | |
| /* Input card */ | |
| .input-card { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:20px; } | |
| .input-card label { display:block; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } | |
| textarea, input[type="text"], input[type="url"], select { | |
| width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px; | |
| color:var(--text); font-family:var(--mono); font-size:13px; padding:12px 14px; | |
| outline:none; transition:border-color 0.2s; resize:none; | |
| } | |
| textarea:focus, input:focus, select:focus { border-color: rgba(59,130,246,0.5); } | |
| textarea { min-height:100px; } | |
| select option { background:#1a1a24; } | |
| .upload-zone { | |
| border:1.5px dashed var(--border); border-radius:10px; | |
| padding:32px 20px; text-align:center; cursor:pointer; | |
| transition:all 0.2s; background:var(--bg3); | |
| } | |
| .upload-zone:hover { border-color:var(--blue); background:rgba(59,130,246,0.04); } | |
| .upload-zone p { font-size:12px; color:var(--muted); margin-top:8px; } | |
| .upload-zone .big { font-size:28px; margin-bottom:6px; } | |
| .upload-zone .filename { font-size:12px; color:var(--blue-lt); margin-top:8px; padding:4px 10px; background:rgba(59,130,246,0.1); border-radius:6px; display:inline-block; } | |
| .row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } | |
| @media(max-width:540px){ .row { grid-template-columns:1fr; } } | |
| /* Analyze button */ | |
| .analyze-btn { | |
| width:100%; padding:16px; background:var(--blue); border:none; | |
| border-radius:10px; color:#fff; font-family:var(--display); | |
| font-size:15px; font-weight:600; letter-spacing:0.02em; | |
| cursor:pointer; transition:all 0.2s; | |
| } | |
| .analyze-btn:hover { background:#2563eb; transform:translateY(-1px); } | |
| .analyze-btn:active { transform:translateY(0); } | |
| .analyze-btn:disabled{ background:var(--bg3); color:var(--muted); cursor:not-allowed; transform:none; } | |
| /* Progress */ | |
| .progress-wrap { display:none; margin:20px 0; } | |
| .progress-wrap.show { display:block; } | |
| .progress-steps { display:flex; flex-direction:column; gap:8px; } | |
| .prog-step { | |
| display:flex; align-items:center; gap:10px; | |
| font-size:12px; color:var(--muted); | |
| padding:8px 12px; border-radius:8px; border:1px solid transparent; transition:all 0.3s; | |
| } | |
| .prog-step.running { color:var(--blue-lt); border-color:rgba(59,130,246,0.3); background:rgba(59,130,246,0.06); } | |
| .prog-step.done { color:#6ee7b7; border-color:rgba(52,211,153,0.3); background:rgba(52,211,153,0.05); } | |
| .prog-dot { width:8px; height:8px; border-radius:50%; background:var(--border); flex-shrink:0; transition:background 0.3s; } | |
| .prog-step.running .prog-dot { background:var(--blue); animation:pulse 1s infinite; } | |
| .prog-step.done .prog-dot { background:#34d399; } | |
| @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} } | |
| /* Error */ | |
| .error-box { | |
| margin:16px 0; padding:14px 18px; border-radius:10px; | |
| background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.3); | |
| color:#f87171; font-size:13px; | |
| } | |
| /* Result card */ | |
| .result-card { margin-top:24px; background:var(--bg2); border-radius:14px; overflow:hidden; border:1px solid var(--border); animation:fadeIn 0.35s ease; } | |
| .result-header { padding:20px 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); } | |
| .result-sub-label { font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; } | |
| .verdict { font-family:var(--display); font-size:28px; font-weight:800; letter-spacing:-0.02em; } | |
| .verdict.FAKE { color:#f87171; } | |
| .verdict.REAL { color:#34d399; } | |
| .verdict.UNCERTAIN { color:#fbbf24; } | |
| .confidence-pill { font-size:12px; padding:6px 14px; border-radius:100px; } | |
| .pill-FAKE { background:rgba(248,113,113,0.12); color:#f87171; border:1px solid rgba(248,113,113,0.3); } | |
| .pill-REAL { background:rgba(52,211,153,0.12); color:#34d399; border:1px solid rgba(52,211,153,0.3); } | |
| .pill-UNCERTAIN { background:rgba(251,191,36,0.12); color:#fbbf24; border:1px solid rgba(251,191,36,0.3); } | |
| .result-body { padding:20px 24px; } | |
| .signal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:20px; } | |
| .signal-card { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:12px 14px; } | |
| .signal-card .sig-label { font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; } | |
| .signal-card .sig-val { font-size:17px; font-weight:500; font-family:var(--display); } | |
| .signal-card .sig-model { font-size:10px; color:var(--muted); margin-top:3px; } | |
| .sig-high { color:#f87171; } | |
| .sig-low { color:#34d399; } | |
| .bar-wrap { margin-bottom:14px; } | |
| .bar-label { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:5px; } | |
| .bar-track { height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; } | |
| .bar-fill { height:100%; border-radius:3px; transition:width 0.8s cubic-bezier(0.4,0,0.2,1); width:0; } | |
| .bar-fake { background:linear-gradient(90deg,#dc2626,#f87171); } | |
| .bar-real { background:linear-gradient(90deg,#059669,#34d399); } | |
| .bar-neutral { background:linear-gradient(90deg,#6366f1,#a78bfa); } | |
| .transcript-box { background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:12px 14px; font-size:12px; color:var(--muted); line-height:1.7; margin-bottom:16px; } | |
| .transcript-box strong { color:var(--text); } | |
| .explanation-box { background:var(--bg3); border:1px solid var(--border); border-left:3px solid #6366f1; border-radius:0 8px 8px 0; padding:12px 14px; font-size:12px; color:var(--muted); line-height:1.7; } | |
| .explanation-box strong { color:var(--text); } | |
| .result-footer { padding:14px 24px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:10px; color:var(--muted); letter-spacing:0.06em; } | |
| .footer-dot { width:6px; height:6px; border-radius:50%; background:var(--muted); } | |
| /* Models section */ | |
| .models-used { margin-top:40px; padding-top:28px; border-top:1px solid var(--border); } | |
| .models-used h3 { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; } | |
| .models-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; } | |
| .model-chip { background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; display:flex; align-items:center; gap:8px; } | |
| .mci { font-size:16px; } | |
| .mcn { font-size:11px; color:var(--text); font-weight:500; } | |
| .mcr { font-size:10px; color:var(--muted); } | |