| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"/> |
| <title>Authrix</title> |
| <style> |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| body { |
| width: 320px; |
| background: #0c150f; |
| color: #dae5da; |
| font-family: 'Segoe UI', system-ui, sans-serif; |
| font-size: 13px; |
| } |
| |
| |
| .header { |
| padding: 14px 16px 12px; |
| border-bottom: 1px solid rgba(0,255,156,0.12); |
| background: rgba(0,255,156,0.04); |
| display: flex; align-items: center; justify-content: space-between; |
| } |
| .logo { |
| display: flex; align-items: center; gap: 8px; |
| font-size: 14px; font-weight: 700; letter-spacing: 0.12em; |
| color: #00ff9c; text-shadow: 0 0 10px rgba(0,255,156,0.4); |
| } |
| .logo-dot { |
| width: 8px; height: 8px; border-radius: 50%; |
| background: #00ff9c; box-shadow: 0 0 8px #00ff9c; |
| animation: pulse 2s ease-in-out infinite; |
| } |
| @keyframes pulse { |
| 0%,100% { opacity:1; box-shadow:0 0 8px #00ff9c; } |
| 50% { opacity:0.4; box-shadow:none; } |
| } |
| .status-badge { |
| font-size: 9px; font-weight: 700; letter-spacing: 0.1em; |
| padding: 3px 8px; border-radius: 99px; |
| border: 1px solid rgba(0,255,156,0.3); |
| color: #00ff9c; background: rgba(0,255,156,0.08); |
| } |
| .status-badge.offline { |
| border-color: rgba(255,68,102,0.3); |
| color: #ff4466; background: rgba(255,68,102,0.08); |
| } |
| .status-badge.loading { |
| border-color: rgba(255,170,0,0.3); |
| color: #ffaa00; background: rgba(255,170,0,0.08); |
| } |
| |
| |
| .body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } |
| |
| |
| .page-card { |
| background: rgba(255,255,255,0.03); |
| border: 1px solid rgba(255,255,255,0.07); |
| border-radius: 8px; padding: 9px 12px; |
| display: flex; align-items: center; gap: 10px; |
| } |
| .page-icon { font-size: 18px; flex-shrink: 0; } |
| .page-title { |
| font-size: 11px; font-weight: 600; color: #dae5da; |
| overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
| } |
| .page-sub { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 2px; } |
| |
| |
| .btn-capture { |
| width: 100%; padding: 13px; |
| background: linear-gradient(135deg, #00ff9c, #00cc6a); |
| color: #002110; border: none; border-radius: 10px; |
| font-size: 13px; font-weight: 700; letter-spacing: 0.08em; |
| cursor: pointer; transition: all 0.2s; |
| box-shadow: 0 0 24px rgba(0,255,156,0.3); |
| display: flex; align-items: center; justify-content: center; gap: 8px; |
| } |
| .btn-capture:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 0 36px rgba(0,255,156,0.5); |
| } |
| .btn-capture:active { transform: scale(0.98); } |
| .btn-capture:disabled { |
| opacity: 0.4; cursor: not-allowed; transform: none; |
| box-shadow: none; |
| } |
| |
| |
| .divider { |
| display: flex; align-items: center; gap: 8px; |
| color: rgba(255,255,255,0.2); font-size: 10px; letter-spacing: 0.1em; |
| } |
| .divider::before, .divider::after { |
| content: ''; flex: 1; height: 1px; |
| background: rgba(255,255,255,0.07); |
| } |
| |
| |
| .url-row { display: flex; gap: 6px; } |
| .url-input { |
| flex: 1; padding: 8px 10px; |
| background: rgba(255,255,255,0.04); |
| border: 1px solid rgba(255,255,255,0.1); |
| border-radius: 7px; color: #dae5da; |
| font-size: 11px; font-family: monospace; |
| outline: none; transition: border-color 0.2s; |
| } |
| .url-input::placeholder { color: rgba(255,255,255,0.2); } |
| .url-input:focus { border-color: rgba(0,255,156,0.4); } |
| .btn-url { |
| padding: 8px 12px; |
| background: rgba(0,255,156,0.1); |
| border: 1px solid rgba(0,255,156,0.25); |
| border-radius: 7px; color: #00ff9c; |
| font-size: 11px; font-weight: 600; cursor: pointer; |
| transition: all 0.2s; white-space: nowrap; |
| } |
| .btn-url:hover { background: rgba(0,255,156,0.18); } |
| .btn-url:disabled { opacity: 0.4; cursor: not-allowed; } |
| |
| |
| .how-it-works { |
| background: rgba(255,255,255,0.02); |
| border: 1px solid rgba(255,255,255,0.05); |
| border-radius: 8px; padding: 9px 12px; |
| } |
| .how-label { |
| font-size: 9px; font-weight: 700; letter-spacing: 0.15em; |
| color: rgba(255,255,255,0.25); text-transform: uppercase; margin-bottom: 7px; |
| } |
| .how-step { |
| display: flex; align-items: center; gap: 8px; |
| font-size: 10px; color: rgba(255,255,255,0.4); padding: 2px 0; |
| } |
| .how-step-num { |
| width: 16px; height: 16px; border-radius: 50%; |
| background: rgba(0,255,156,0.1); border: 1px solid rgba(0,255,156,0.2); |
| display: flex; align-items: center; justify-content: center; |
| font-size: 9px; font-weight: 700; color: #00ff9c; flex-shrink: 0; |
| } |
| |
| |
| #last-result { |
| background: rgba(255,255,255,0.03); |
| border: 1px solid rgba(255,255,255,0.07); |
| border-radius: 8px; padding: 9px 12px; |
| display: none; |
| } |
| .result-label { |
| font-size: 9px; font-weight: 700; letter-spacing: 0.15em; |
| color: rgba(255,255,255,0.25); text-transform: uppercase; margin-bottom: 5px; |
| } |
| .result-row { display: flex; align-items: center; justify-content: space-between; } |
| .result-verdict { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; } |
| .result-conf { font-size: 16px; font-weight: 700; font-family: monospace; } |
| .result-bar-wrap { |
| height: 3px; background: rgba(255,255,255,0.06); |
| border-radius: 99px; overflow: hidden; margin: 5px 0; |
| } |
| .result-bar { height: 100%; border-radius: 99px; transition: width 0.8s ease; } |
| .result-file { font-size: 9px; color: rgba(255,255,255,0.2); font-family: monospace; |
| overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| |
| |
| .footer { |
| padding: 9px 16px; |
| border-top: 1px solid rgba(255,255,255,0.05); |
| display: flex; align-items: center; justify-content: space-between; |
| } |
| .footer-link { |
| font-size: 10px; color: rgba(0,255,156,0.5); |
| text-decoration: none; letter-spacing: 0.06em; transition: color 0.2s; |
| } |
| .footer-link:hover { color: #00ff9c; } |
| .model-info { font-size: 9px; color: rgba(255,255,255,0.2); letter-spacing: 0.06em; } |
| |
| |
| #offline-warn { |
| display: none; |
| background: rgba(255,68,102,0.06); |
| border: 1px solid rgba(255,68,102,0.2); |
| border-radius: 7px; padding: 8px 10px; |
| font-size: 10px; color: rgba(255,68,102,0.8); |
| line-height: 1.5; |
| } |
| #offline-warn code { |
| display: block; margin-top: 4px; |
| font-family: monospace; color: rgba(255,68,102,0.6); |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="header"> |
| <div class="logo"> |
| <div class="logo-dot"></div> |
| AUTHRIX AI |
| </div> |
| <div id="statusBadge" class="status-badge offline">OFFLINE</div> |
| </div> |
|
|
| <div class="body"> |
|
|
| |
| <div class="page-card"> |
| <div class="page-icon">🎬</div> |
| <div style="flex:1;min-width:0;"> |
| <div class="page-title" id="pageTitle">Loading…</div> |
| <div class="page-sub" id="pageSub">Detecting page</div> |
| </div> |
| </div> |
|
|
| |
| <div id="offline-warn"> |
| Backend not reachable. |
| <code>Visit: aarav13-authrix.hf.space</code> |
| </div> |
|
|
| |
| <button class="btn-capture" id="btnCapture"> |
| <span>⬤</span> Capture & Analyze Video |
| </button> |
|
|
| |
| <div class="divider">OR PASTE URL</div> |
|
|
| |
| <div class="url-row"> |
| <input class="url-input" id="urlInput" type="url" |
| placeholder="https://example.com/video.mp4" /> |
| <button class="btn-url" id="btnUrl">Analyze</button> |
| </div> |
|
|
| |
| <div class="how-it-works"> |
| <div class="how-label">How it works</div> |
| <div class="how-step"><div class="how-step-num">1</div>Records 8s of the playing video</div> |
| <div class="how-step"><div class="how-step-num">2</div>Sends to local AI for analysis</div> |
| <div class="how-step"><div class="how-step-num">3</div>Shows FAKE / REAL verdict on page</div> |
| </div> |
|
|
| |
| <div id="last-result"> |
| <div class="result-label">Last Result</div> |
| <div class="result-row"> |
| <div id="lastVerdict" class="result-verdict">—</div> |
| <div id="lastConf" class="result-conf">—</div> |
| </div> |
| <div class="result-bar-wrap"> |
| <div id="lastBar" class="result-bar" style="width:0%"></div> |
| </div> |
| <div id="lastFile" class="result-file">—</div> |
| </div> |
|
|
| </div> |
|
|
| <div class="footer"> |
| <a class="footer-link" href="http://localhost:8000" target="_blank">Open Full App ↗</a> |
| <div class="model-info" id="modelInfo">VIT ENSEMBLE</div> |
| </div> |
|
|
| <script src="popup.js"></script> |
| </body> |
| </html> |
|
|
