From 74268306d0eed6665e334f21d5b6d22814853e52 Mon Sep 17 00:00:00 2001
From: drjones <drjones@templeofdoom.com>
Date: Sun, 20 Sep 2026 18:57:39 -0700
Subject: [PATCH] Interactive quality tester: radar sweep + cycling scan status
 + animated score gauge + staggered check reveal

---
 templates/quality.html | 182 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 153 insertions(+), 29 deletions(-)

diff --git a/templates/quality.html b/templates/quality.html
index 2a8354e..19a5d52 100644
--- a/templates/quality.html
+++ b/templates/quality.html
@@ -1,53 +1,177 @@
 {% extends "base.html" %}
 {% block title %}IP Quality Tester — Clean Proxys{% endblock %}
 {% block body %}
-<h2>IP Quality <span class="accent">Tester</span></h2>
-<p class="sub">Check how clean a proxy is before you trust it. {{ price }} sats (~$0.15) per check, billed to your wallet.</p>
+<style>
+  .qc { max-width: 720px; margin: 0 auto; }
+  .stage { display: flex; flex-direction: column; align-items: center; padding: 30px 0 20px; min-height: 320px; }
 
-<div class="card">
-  <h3>Run a check</h3>
-  <p class="muted" style="font-size:14px">Leave blank to test your own Clean Proxys proxy, or paste any <span class="mono">socks5://</span> or <span class="mono">http://</span> proxy.</p>
+  /* ---- radar (scanning state) ---- */
+  .radar {
+    position: relative; width: 220px; height: 220px; border-radius: 50%;
+    background: radial-gradient(circle, rgba(0,229,255,.04) 0%, rgba(3,6,11,.6) 70%);
+    border: 1px solid var(--border); overflow: hidden;
+    box-shadow: 0 0 50px rgba(0,229,255,.12), inset 0 0 40px rgba(0,229,255,.05);
+  }
+  .radar .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(0,229,255,.18); }
+  .radar .r1 { inset: 15%; } .radar .r2 { inset: 30%; } .radar .r3 { inset: 45%; }
+  .radar .cross::before, .radar .cross::after {
+    content:""; position:absolute; background: rgba(0,229,255,.15); left: 50%; top: 0; height: 100%; width: 1px;
+  }
+  .radar .cross::after { transform: rotate(90deg); }
+  .radar .sweep {
+    position: absolute; inset: 0; border-radius: 50%;
+    background: conic-gradient(from 0deg, rgba(0,255,156,.55), rgba(0,255,156,.12) 22%, transparent 40%);
+    animation: sweep 2.4s linear infinite;
+  }
+  @keyframes sweep { to { transform: rotate(360deg); } }
+  .radar .dot {
+    position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px;
+    border-radius: 50%; background: var(--neon); box-shadow: 0 0 12px var(--neon);
+    animation: pulse 1.2s ease-in-out infinite;
+  }
+  .radar .blip {
+    position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--neon2);
+    box-shadow: 0 0 10px var(--neon2); opacity: 0;
+  }
+  @keyframes pulse { 0%,100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.3); opacity: 1; } }
+  .scan-status {
+    margin-top: 22px; font-family: var(--mono); font-size: 14px; color: var(--neon2);
+    letter-spacing: .5px; min-height: 20px;
+  }
+  .scan-status::after { content: "▌"; animation: blink 1s step-end infinite; }
+  @keyframes blink { 50% { opacity: 0; } }
+
+  /* ---- gauge (result state) ---- */
+  .gauge-wrap { position: relative; width: 220px; height: 220px; }
+  .gauge-wrap svg { transform: rotate(-90deg); }
+  .gauge-wrap .track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 14; }
+  .gauge-wrap .fill { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1); }
+  .gauge-wrap .val {
+    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  }
+  .gauge-wrap .val .num { font-family: var(--mono); font-size: 56px; font-weight: 800; line-height: 1; }
+  .gauge-wrap .val .sub { font-size: 11px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
+
+  .checks { width: 100%; margin-top: 10px; }
+  .chk {
+    display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
+    border: 1px solid var(--border); margin: 8px 0; background: var(--surface);
+    opacity: 0; transform: translateY(8px); animation: in .4s ease forwards;
+  }
+  @keyframes in { to { opacity: 1; transform: translateY(0); } }
+  .chk .ic { font-size: 18px; width: 24px; text-align: center; }
+  .chk .nm { font-weight: 600; flex: 1; }
+  .chk .dt { color: var(--muted); font-size: 13px; text-align: right; }
+  .chk.pass { border-color: rgba(0,255,156,.25); }
+  .chk.fail { border-color: rgba(255,77,109,.25); }
+  .verdict { text-align: center; margin-top: 14px; font-weight: 700; letter-spacing: 1px; }
+</style>
+
+<h2>IP Quality <span class="accent">Tester</span></h2>
+<p class="sub" style="text-align:center">Check how clean a proxy is before you trust it. {{ price }} sats (~$0.15) per scan, billed to your wallet.</p>
+
+<div class="card qc">
+  <h3>Run a scan</h3>
+  <p class="muted" style="font-size:14px">Leave blank to test your own Clean Proxys proxy, or paste any <span class="mono">socks5://</span> / <span class="mono">http://</span> proxy.</p>
   <form id="qf" onsubmit="return runQuality(event)">
     <label>Proxy (optional)</label>
     <input type="text" id="proxy" placeholder="socks5://user:pass@host:1080" style="font-family:var(--mono)">
-    <input type="submit" value="Run quality check ({{ price }} sats)">
+    <input type="submit" id="runbtn" value="Scan proxy ({{ price }} sats)">
   </form>
+
+  <div class="stage" id="stage">
+    <div class="muted">Scan output appears here.</div>
+  </div>
 </div>
 
-<div id="result" style="margin-top:18px"></div>
-
 <script>
+const STATUSES = ["Resolving egress IP…", "Classifying ISP / ASN…", "Checking proxy & VPN flags…", "Querying 3 blacklists…", "Measuring latency…", "Testing header anonymity…"];
+const C = 2 * Math.PI * 88; // gauge circumference (r=88)
+
+function radarHTML(){
+  return '<div class="radar"><div class="cross"></div><div class="ring r1"></div><div class="ring r2"></div><div class="ring r3"></div><div class="sweep"></div><div class="dot"></div><div class="blip" id="blip"></div></div><div class="scan-status" id="status">Booting scanner…</div>';
+}
+
 async function runQuality(e){
   e.preventDefault();
-  const r = document.getElementById('result');
-  r.innerHTML = '<div class="card"><p class="muted">Running checks…</p></div>';
+  const stage = document.getElementById('stage');
+  const btn = document.getElementById('runbtn');
+  btn.disabled = true; btn.value = 'Scanning…';
+  stage.innerHTML = radarHTML();
+
+  // cycling status + radar blips
+  let i = 0;
+  const status = document.getElementById('status');
+  const blip = document.getElementById('blip');
+  status.textContent = STATUSES[0];
+  const iv = setInterval(() => {
+    i = (i + 1) % STATUSES.length;
+    status.textContent = STATUSES[i];
+    // random blip position on the radar
+    const a = Math.random() * Math.PI * 2, r = 20 + Math.random() * 75;
+    blip.style.left = (110 + Math.cos(a) * r) + 'px';
+    blip.style.top = (110 + Math.sin(a) * r) + 'px';
+    blip.style.opacity = 1;
+    setTimeout(() => blip.style.opacity = 0, 500);
+  }, 700);
+
   const fd = new FormData();
   fd.append('proxy', document.getElementById('proxy').value);
   let data;
   try { data = await (await fetch('/quality/run', {method:'POST', body: fd})).json(); }
-  catch(err){ r.innerHTML = '<div class="flash warn">Check failed.</div>'; return false; }
+  catch(err){ clearInterval(iv); stage.innerHTML = '<div class="flash warn">Scan failed.</div>'; btn.disabled=false; btn.value='Scan proxy ({{ price }} sats)'; return false; }
+
+  clearInterval(iv);
   if (data.error){
-    r.innerHTML = '<div class="flash warn">'+data.error+' — <a href="/wallet">deposit</a> first.</div>';
+    stage.innerHTML = '<div class="flash warn">'+data.error+' — <a href="/wallet">deposit</a> first.</div>';
+    btn.disabled=false; btn.value='Scan proxy ({{ price }} sats)';
     return false;
   }
-  const b = data.breakdown || {};
-  const checksHtml = (data.checks||[]).map(c =>
-    '<tr><td>'+(c[1]?'✅':'❌')+'</td><td>'+c[0]+'</td><td class="muted" style="font-size:13px">'+c[2]+'</td></tr>'
-  ).join('');
-  const scoreColor = data.score >= 70 ? 'var(--neon)' : (data.score >= 40 ? 'var(--warn)' : 'var(--danger)');
-  const bl = (b.blacklists && b.blacklists.length) ? b.blacklists.join(', ') : 'none';
-  r.innerHTML =
-    '<div class="card">'
-    + '<div style="display:flex;align-items:center;gap:22px;flex-wrap:wrap">'
-    + '<div style="font-size:54px;font-weight:800;font-family:var(--mono);color:'+scoreColor+'">'+data.score+'<span style="font-size:18px;color:var(--muted)">/100</span></div>'
-    + '<div><div class="lbl" style="color:var(--muted)">'+ (b.geo||'') + ' · ' + (b.isp||'') + '</div>'
-    + '<div class="muted" style="font-size:14px">egress <span class="mono">'+(b.egress_ip||'-')+'</span> · '+ (b.latency_ms||'') +'ms</div>'
-    + '<div class="muted" style="font-size:13px">hosting: '+(b.hosting?'yes':'no')+' · proxy-flagged: '+(b.proxy_flagged?'yes':'no')+' · blacklists: '+bl+'</div></div>'
-    + '</div>'
-    + '<table style="width:100%;margin-top:18px"><tr><th></th><th>Check</th><th>Detail</th></tr>'+checksHtml+'</table>'
-    + '<p class="muted" style="font-size:12px;margin-top:12px">charged '+data.charged_sats+' sats</p>'
-    + '</div>';
+  renderResult(data);
+  btn.disabled=false; btn.value='Scan proxy ({{ price }} sats)';
   return false;
 }
+
+function renderResult(data){
+  const stage = document.getElementById('stage');
+  const b = data.breakdown || {};
+  const color = data.score >= 70 ? 'var(--neon)' : (data.score >= 40 ? 'var(--warn)' : 'var(--danger)');
+  const verdict = data.score >= 70 ? 'CLEAN — ready to go' : (data.score >= 40 ? 'USABLE — check the flagged items' : 'DIRTY — not recommended');
+
+  stage.innerHTML =
+    '<div class="gauge-wrap">'
+    + '<svg width="220" height="220"><circle class="track" cx="110" cy="110" r="88"></circle>'
+    + '<circle class="fill" id="fill" cx="110" cy="110" r="88" stroke="'+color+'" stroke-dasharray="'+C+'" stroke-dashoffset="'+C+'"></circle></svg>'
+    + '<div class="val"><div class="num" id="num" style="color:'+color+'">0</div><div class="sub">score / 100</div></div>'
+    + '</div>'
+    + '<div class="muted" style="margin-top:8px;font-size:14px">'+(b.geo||'')+' · '+(b.isp||'')+'</div>'
+    + '<div class="muted" style="font-size:13px">egress <span class="mono">'+(b.egress_ip||'-')+'</span> · '+ (b.latency_ms||'') +'ms</div>'
+    + '<div class="checks" id="checks"></div>'
+    + '<div class="verdict" style="color:'+color+'">'+verdict+'</div>';
+
+  // animate gauge + count-up
+  const fill = document.getElementById('fill');
+  const num = document.getElementById('num');
+  const target = data.score, dur = 1300, t0 = performance.now();
+  function tick(t){
+    const p = Math.min(1, (t - t0) / dur);
+    const ease = 1 - Math.pow(1 - p, 3); // cubic ease-out
+    const val = Math.round(target * ease);
+    num.textContent = val;
+    fill.style.strokeDashoffset = (C * (1 - target/100 * ease)).toFixed(2);
+    if (p < 1) requestAnimationFrame(tick);
+  }
+  requestAnimationFrame(tick);
+
+  // staggered check reveal
+  const chkWrap = document.getElementById('checks');
+  (data.checks || []).forEach((c, idx) => {
+    const el = document.createElement('div');
+    el.className = 'chk ' + (c[1] ? 'pass' : 'fail');
+    el.style.animationDelay = (0.5 + idx * 0.12) + 's';
+    el.innerHTML = '<span class="ic">'+(c[1]?'✅':'❌')+'</span><span class="nm">'+c[0]+'</span><span class="dt">'+c[2]+'</span>';
+    chkWrap.appendChild(el);
+  });
+}
 </script>
 {% endblock %}