Spaces:

Cauanne
/

Checkerpayt

Sleeping

File size: 37,879 Bytes

ea2ac1c

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
<title>BY: Rei Hotmart Checker Payt V2</title>
<audio id="liveAudio" src="/static/live.mp3" preload="auto"></audio>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js" defer></script>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:      #000000;
  --surface: #050505;
  --card:    #0a0a0a;
  --border:  #1a1a1a;
  --border2: #ffffff;
  --green:   #00ff88;
  --green-d: #00e680;
  --red:     #ff1744;
  --red-d:   #e6154d;
  --yellow:  #ffffff;
  --blue:    #ffffff;
  --purple:  #ffffff;
  --cyan:    #ffffff;
  --orange:  #cccccc;
  --text:    #ffffff;
  --muted:   #444444;
  --radius:  12px;
  --mono: 'Share Tech Mono', monospace;
  --hud:  'Orbitron', monospace;
  --body: 'Inter', sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh;overflow-x:hidden}
#bgc{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06}
.wrap{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:0 16px 40px}

/* ── HEADER ── */
.header{padding:30px 0 20px;text-align:center}
.header::after{content:'';display:block;height:3px;margin-top:20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 15%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.1) 85%, transparent);
  animation:hline 6s linear infinite;box-shadow: 0 0 25px rgba(255,255,255,0.3);}
@keyframes hline{0%,100%{opacity:.4}50%{opacity:1}}
.logo{font-family:var(--hud);font-size:clamp(28px,8vw,64px);font-weight:900;letter-spacing:8px;
			  background:linear-gradient(135deg,#fff,#eee); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; text-shadow: 0 0 15px #fff;
			  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
			  text-transform: uppercase;animation:lp 3s ease-in-out infinite}
@keyframes lp{0%,100%{opacity:1}50%{opacity:0.95}}
.logo-sub{font-family:var(--mono);font-size:12px;letter-spacing:4px;color:var(--muted);margin-top:8px;font-weight:600}
.logo-sub em{color:#ffffff;font-style:normal;font-weight:900}

/* ── TOP BAR ── */
.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);
  padding:12px 20px;margin:15px 0;font-family:var(--mono);font-size:13px;box-shadow: 0 0 25px rgba(0,255,136,0.15),inset 0 0 15px rgba(0,255,136,0.05)}
.tb-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);transition:all .3s;flex-shrink:0}
.tb-dot.on{background:#00ff88;box-shadow:0 0 20px #00ff88;animation:db 1s ease-in-out infinite}
@keyframes db{0%,100%{opacity:1}50%{opacity:.3}}
.tb-s{display:flex;align-items:center;gap:10px}
.tb-s span{color:#ffffff;font-weight:bold}
.tb-clock{color:#ffffff;letter-spacing:2px;font-weight:bold}
.tb-el{color:var(--muted);font-size:12px}

/* ── STATS ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:15px 0}
.stat{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);
  padding:18px 12px 15px;text-align:center;position:relative;overflow:hidden;transition:all .3s ease;
  box-shadow: 0 0 20px rgba(0,0,0,0.4),inset 0 0 10px rgba(0,0,0,0.2)}
.stat:hover{transform: translateY(-5px); border-color: var(--border2); box-shadow: 0 0 35px rgba(0,255,136,0.2),inset 0 0 15px rgba(0,255,136,0.05)}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--radius) var(--radius) 0 0}
.s-live::before{background:linear-gradient(90deg,#00e680,#00ff88);box-shadow: 0 0 15px #00ff88}
.s-die::before {background:linear-gradient(90deg,#e6154d,#ff1744);box-shadow: 0 0 15px #ff1744}
.s-err::before {background:linear-gradient(90deg,#ff9500,#ffff00);box-shadow: 0 0 15px #ffff00}
.s-tot::before {background:linear-gradient(90deg,#0088ff,#00d4ff);box-shadow: 0 0 15px #00d4ff}
.stat-lbl{font-family:var(--mono);font-size:14px;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px;font-weight:bold}
.s-live .stat-lbl{color:#ffffff} .s-die .stat-lbl{color:#ff1744}
.s-err .stat-lbl{color:#ffffff} .s-tot .stat-lbl{color:#ffffff}
.stat-val{font-family:var(--hud);font-size:clamp(36px,8vw,64px);font-weight:900;line-height:1}
.s-live .stat-val{color:var(--green); text-shadow: 0 0 15px rgba(0,255,136,0.3)}
.s-die  .stat-val{color:var(--red); text-shadow: 0 0 15px rgba(255,23,68,0.3)}
.s-err  .stat-val{color:var(--yellow); text-shadow: 0 0 15px rgba(255,255,0,0.3)}
.s-tot  .stat-val{color:var(--blue); text-shadow: 0 0 15px rgba(0,212,255,0.3)}
.stat-rate{font-family:var(--mono);font-size:14px;color:var(--muted);margin-top:6px;font-weight:500}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.3);text-shadow:0 0 50px var(--green)}100%{transform:scale(1)}}
.s-live.pop .stat-val{animation:pop .5s ease}

/* ── PROGRESS ── */
.prog-wrap{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:15px 20px;margin:12px 0;box-shadow: 0 0 20px rgba(0,0,0,0.4),inset 0 0 10px rgba(0,0,0,0.2)}
.prog-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:16px;color:var(--muted);margin-bottom:10px;font-weight:bold}
.prog-head b{color:#ffffff;font-size:18px}
.prog-track{height:10px;background:var(--surface);border-radius:6px;overflow:hidden;border:1px solid var(--border)}
.prog-fill{height:100%;width:0%;background:linear-gradient(90deg,#00ff88,#00ffff);border-radius:6px;transition:width .5s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: 0 0 20px #00ff88}

/* ── THREADS PANEL ── */
.threads-panel{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);padding:15px 20px;margin:12px 0;box-shadow: 0 0 20px rgba(0,0,0,0.4),inset 0 0 10px rgba(0,0,0,0.2)}
.threads-hd{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:16px;color:var(--muted);margin-bottom:12px;font-weight:bold}
.threads-hd b{color:#cccccc;font-size:18px}
.threads-grid{display:flex;flex-wrap:wrap;gap:10px}
.thread-slot{flex:1;min-width:180px;background:var(--surface);border:2px solid var(--border);border-radius:10px;
  padding:12px 18px;font-family:var(--mono);font-size:14px;display:flex;align-items:center;gap:12px;transition:all .3s;min-height:55px}
.thread-slot.active{border-color:#00ffff;background:rgba(0,255,255,.12);box-shadow: 0 0 25px rgba(0,255,255,0.3),inset 0 0 10px rgba(0,255,255,0.1)}
.thread-slot.done-live{border-color:#ffffff;background:rgba(0,255,136,.15);animation:flashG .6s ease;box-shadow: 0 0 20px rgba(0,255,136,0.4)}
.thread-slot.done-die {border-color:#ff1744;background:rgba(255,23,68,.15); animation:flashR .6s ease;box-shadow: 0 0 20px rgba(255,23,68,0.4)}
.thread-slot.done-err {border-color:#ffffff;background:rgba(255,255,0,.12); animation:flashY .6s ease;box-shadow: 0 0 20px rgba(255,255,0,0.3)}
@keyframes flashG{0%{box-shadow:0 0 30px #00ff8899,inset 0 0 10px rgba(0,255,136,0.2)}100%{box-shadow:none}}
@keyframes flashR{0%{box-shadow:0 0 30px #ff174499,inset 0 0 10px rgba(255,23,68,0.2)}100%{box-shadow:none}}
@keyframes flashY{0%{box-shadow:0 0 30px #ffff0099,inset 0 0 10px rgba(255,255,0,0.2)}100%{box-shadow:none}}
.t-spin{width:12px;height:12px;border:2px solid var(--border2);border-top-color:#00ffff;
  border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0;display:none;box-shadow: 0 0 10px #00ffff}
.thread-slot.active .t-spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.t-num{color:var(--muted);font-size:13px;flex-shrink:0;font-weight:bold}
.t-card{color:#00ffff;flex:1;font-size:14px;font-weight:600;word-break:break-all}
.thread-slot:not(.active) .t-card{color:var(--muted);opacity:.5}

/* ── MAIN GRID ── */
.grid{display:grid;grid-template-columns:420px 1fr;gap:16px;margin-top:16px}

/* ── PANEL ── */
.panel{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow: 0 0 25px rgba(0,0,0,0.4),inset 0 0 10px rgba(0,0,0,0.2)}
.panel-hd{background:var(--surface);border-bottom:2px solid var(--border);padding:12px 18px;display:flex;align-items:center;gap:10px}
.ph-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:#ff9500;box-shadow: 0 0 10px #ff9500}
.ph-ttl{font-family:var(--mono);font-size:16px;letter-spacing:3px;text-transform:uppercase;color:#ffffff;font-weight:bold}
.ph-act{margin-left:auto;background:none;border:none;font-family:var(--mono);font-size:11px;
  color:var(--muted);cursor:pointer;letter-spacing:1px;transition:all .2s;padding:6px 10px;border-radius:6px}
.ph-act:hover{color:#ffffff;background: rgba(255,255,0,0.15)}
.panel-body{padding:18px;flex:1;display:flex;flex-direction:column;gap:15px}

/* ── TEXTAREA ── */
.ta{width:100%;height:250px;background:var(--surface);border:2px solid var(--border);border-radius:10px;
  color:#ffffff;font-family:var(--mono);font-size:16px;padding:18px;resize:vertical;outline:none;
  line-height:1.6;transition:all .3s;-webkit-appearance:none;box-shadow: 0 0 15px rgba(0,0,0,0.3),inset 0 0 10px rgba(0,0,0,0.2);font-weight:600}
.ta:focus{border-color:#ffffff;box-shadow:0 0 0 3px #00ff8833, inset 0 0 15px rgba(0,255,136,0.1),0 0 20px rgba(0,255,136,0.2)}
.ta::placeholder{color:#1a2a3a;font-style:italic}
.ta:disabled{opacity:.4;cursor:not-allowed}

/* ── THREAD CONTROL ── */
.thread-ctrl{display:flex;align-items:center;gap:12px;background:var(--surface);border:2px solid var(--border);border-radius:10px;padding:12px 18px;box-shadow: 0 0 15px rgba(0,0,0,0.3),inset 0 0 10px rgba(0,0,0,0.2);transition:all .3s}
.thread-ctrl:hover{border-color:var(--border2);box-shadow: 0 0 25px rgba(255,149,0,0.2),inset 0 0 10px rgba(255,149,0,0.05)}
.tc-lbl{font-family:var(--mono);font-size:16px;color:var(--text);white-space:nowrap;font-weight:bold}
.tc-lbl em{color:#cccccc;font-style:normal;font-weight:900}
input[type=range]{flex:1;accent-color:var(--orange);cursor:pointer;height:6px;min-width:0}
.tc-val{font-family:var(--hud);font-size:24px;color:#cccccc;font-weight:900;min-width:40px;text-align:center}

.hint{font-family:var(--mono);font-size:14px;color:var(--muted);padding:12px 18px;
  background:var(--surface);border-radius:8px;border-left:4px solid #00d4ff;line-height:1.4;box-shadow: inset 0 0 10px rgba(0,0,0,0.2)}
.hint span{color:#00ffff;font-weight:bold}

/* ── BUTTONS ── */
.btn-row{display:flex;gap:10px}
.btn{flex:1;padding:18px 15px;border:none;border-radius:10px;font-family:var(--hud);font-size:14px;
  font-weight:900;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .3s;
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;border:2px solid transparent}
.btn::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}
.btn:hover:not(:disabled)::after{left:100%}
.btn-start{background:linear-gradient(135deg,#00e680,#00ff88);color:var(--bg);box-shadow: 0 0 20px rgba(0,255,136,0.4)}
.btn-start:hover:not(:disabled){transform:scale(1.02);box-shadow: 0 0 35px rgba(0,255,136,0.6)}
.btn-stop{background:linear-gradient(135deg,#e6154d,#ff1744);color:var(--text);box-shadow: 0 0 20px rgba(255,23,68,0.4)}
.btn-stop:hover:not(:disabled){transform:scale(1.02);box-shadow: 0 0 35px rgba(255,23,68,0.6)}
.btn:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1)}

/* ── LOGS ── */
.log-panel{flex:1;background:var(--card);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow: 0 0 25px rgba(0,0,0,0.4),inset 0 0 10px rgba(0,0,0,0.2)}
.log-body{flex:1;padding:10px;overflow-y:auto;max-height:400px;min-height:400px;font-family:var(--mono);font-size:13px;display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,0.2)}
.log-body::-webkit-scrollbar{width:6px}
.log-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.log-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:10px;opacity:.5}
.log-empty .ico{font-size:40px}

.entry{padding:10px 14px;border-radius:8px;background:var(--surface);border-left:4px solid var(--muted);animation:fadeIn .3s ease;transition:all .2s}
@keyframes fadeIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.entry:hover{background:rgba(255,255,255,0.03)}
.entry.live{border-color:var(--green);background:rgba(0,255,136,0.05);color:var(--green)}
.entry.die{border-color:var(--red);background:rgba(255,23,68,0.03);color:var(--red)}
.entry.error{border-color:var(--yellow);background:rgba(255,255,0,0.03);color:var(--yellow)}
.entry-top{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.badge{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.b-live{background:var(--green);color:var(--bg)}
.b-die{background:var(--red);color:var(--text)}
.b-erro{background:var(--yellow);color:var(--bg)}
.b-info{background:var(--blue);color:var(--bg)}
.b-t{color:var(--cyan);font-weight:bold;font-size:11px}
.b-tempo{color:var(--muted);font-size:11px}
.e-card{font-weight:bold;letter-spacing:1px}
.live .e-card{color:var(--green)}
.die .e-card{color:var(--red)}
.e-ts{margin-left:auto;color:var(--muted);font-size:11px;flex-shrink:0}
.b-tempo{color:var(--muted);font-size:11px;flex-shrink:0;background:rgba(255,255,255,0.05);padding:2px 6px;border-radius:4px}
.entry-msg{color:var(--muted);font-size:12px;line-height:1.4;word-break:break-all;opacity:0.7}
.live .entry-msg{color:var(--green);opacity:0.8}
.die .entry-msg{color:var(--text);opacity:0.6}

/* ── LIVES LIST ── */
.lives-panel{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow: 0 0 25px rgba(0,0,0,0.4),inset 0 0 10px rgba(0,0,0,0.2)}
.lives-body{flex:1;padding:10px;overflow-y:auto;max-height:300px;background:rgba(0,255,136,0.02)}
.lives-body::-webkit-scrollbar{width:6px}
.lives-body::-webkit-scrollbar-thumb{background:var(--green);border-radius:3px}
.live-item{padding:12px;border-radius:8px;background:rgba(0,255,136,0.05);border:1px solid rgba(0,255,136,0.2);margin-bottom:10px;font-family:var(--mono);animation:slideIn .3s ease;box-shadow: 0 2px 10px rgba(0,0,0,0.2)}
@keyframes slideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.lives-empty{padding:40px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:14px}

/* ── ACTION BUTTONS (LIVES) ── */
.lives-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px;background:var(--surface);border-top:2px solid var(--border)}
.btn-action{padding:15px;border:none;border-radius:10px;font-family:var(--hud);font-size:12px;font-weight:900;color:var(--text);cursor:pointer;transition:all .3s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-transform:uppercase;letter-spacing:1px}
.btn-download{background:linear-gradient(135deg,#8e2de2,#4a00e0);box-shadow: 0 0 15px rgba(142,45,226,0.4)}
.btn-copy{background:linear-gradient(135deg,#00d2ff,#3a7bd5);box-shadow: 0 0 15px rgba(0,210,255,0.4)}
.btn-action:hover{transform:translateY(-3px);filter:brightness(1.2)}
.btn-action span{font-size:10px;opacity:.8;font-family:var(--mono)}

/* ── TOASTS ── */
#toasts{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{padding:14px 24px;border-radius:10px;font-family:var(--mono);font-size:14px;font-weight:bold;color:var(--text);box-shadow: 0 10px 30px rgba(0,0,0,0.5);animation:toastIn .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
@keyframes toastIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
.toast.ok{background:var(--green);color:var(--bg)}
.toast.err{background:var(--red)}
.toast.info{background:var(--blue);color:var(--bg)}

/* ── MOBILE ── */
@media(max-width:900px){
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .logo{font-size:40px}
}
</style>
</head>
<body>
<canvas id="bgc"></canvas>
<audio id="liveAudio" preload="auto">
  <source src="/static/live.mp3" type="audio/mpeg">
</audio>

<div class="wrap">
  <header class="header">
    <div class="logo">REI HOTMART</div>
    <div class="logo-sub">PAYT CHECKER <em>V2.0</em> · ULTIMATE EDITION</div>
  </header>

  <div class="topbar">
    <div class="tb-s">
      <div id="dot" class="tb-dot"></div>
      <div id="statusLbl">STATUS: <span style="color:var(--muted);">INATIVO</span></div>
    </div>
    <div class="tb-clock" id="clock">00:00:00</div>
    <div class="tb-el">ELAPSED: <span id="elapsed">00:00</span></div>
    <div class="tb-s">
      <span id="threadCount">0 / 1</span> THREADS ACTIVE
    </div>
    <div class="tb-s">
      <button onclick="playLiveSound()" style="background:var(--green); color:var(--bg); border:none; padding:4px 10px; border-radius:4px; font-family:var(--mono); font-weight:bold; cursor:pointer; font-size:11px;">TESTAR ÁUDIO 🔊</button>
    </div>
  </div>

  <div class="stats">
    <div class="stat s-live" id="cLive">
      <div class="stat-lbl">Lives</div>
      <div class="stat-val" id="vLive">0</div>
      <div class="stat-rate" id="rLive">0%</div>
    </div>
    <div class="stat s-die">
      <div class="stat-lbl">Dies</div>
      <div class="stat-val" id="vDie">0</div>
      <div class="stat-rate" id="rDie">0%</div>
    </div>
    <div class="stat s-err">
      <div class="stat-lbl">Errors</div>
      <div class="stat-val" id="vErr">0</div>
      <div class="stat-rate" id="rErr">0%</div>
    </div>
    <div class="stat s-tot">
      <div class="stat-lbl">Total</div>
      <div class="stat-val" id="vTot">0</div>
      <div class="stat-rate" id="rTot">0 checked</div>
    </div>
  </div>

  <div class="prog-wrap">
    <div class="prog-head">
      <span>PROGRESSO GERAL</span>
      <b id="progPct">0%</b>
    </div>
    <div class="prog-track">
      <div id="progBar" class="prog-fill"></div>
    </div>
    <div style="text-align:center; margin-top:8px; font-family:var(--mono); font-size:12px; color:var(--muted);" id="progLbl">0 / 0</div>
  </div>

  <div class="threads-panel">
    <div class="threads-hd">
      <span>MONITOR DE THREADS</span>
      <b>ACTIVE SLOTS</b>
    </div>
    <div class="threads-grid" id="threadsGrid">
      <!-- Slots via JS -->
    </div>
  </div>

  <div class="grid">
    <div class="panel">
      <div class="panel-hd">
        <div class="ph-dot"></div>
        <div class="ph-ttl">Terminal de Entrada</div>
        <span id="card-count-badge" class="badge b-info" style="display:none; margin-left:10px;">0 CARDS</span>
        <button class="ph-act" onclick="clearInput()">[ LIMPAR ]</button>
      </div>
      <div class="panel-body">
        <textarea id="cardsInput" class="ta" placeholder="numero|mes|ano|cvv&#10;numero|mes|ano|cvv..."></textarea>
        
        <div class="thread-ctrl">
          <div class="tc-lbl">THREADS: <em id="thrLabel">1</em></div>
          <input type="range" id="thrSlider" min="1" max="4" value="1" oninput="onSlider(this.value)">
          <div class="tc-val" id="thrVal">1</div>
        </div>

        <div class="hint">
          <span>DICA:</span> Use de 1 a 4 threads para melhor performance sem bloqueios.
        </div>

        <div class="btn-row">
          <button id="btnStart" class="btn btn-start" onclick="doStart()">INICIAR CHECKER</button>
          <button id="btnStop" class="btn btn-stop" onclick="doStop()" disabled>PARAR</button>
        </div>
      </div>
    </div>

    <div style="display:flex; flex-direction:column; gap:16px;">
      <div class="lives-panel">
        <div class="panel-hd">
          <div class="ph-dot" style="background:var(--green); box-shadow:0 0 10px var(--green)"></div>
          <div class="ph-ttl" style="color:var(--green)">LIVES ENCONTRADAS (<span id="liveCnt">0</span>)</div>
          <button class="ph-act" onclick="playLiveSound()" style="color:var(--orange); border:1px solid var(--orange); margin-right:5px;">TESTAR ÁUDIO</button>
<button class="ph-act" onclick="clearLives()">LIMPAR</button>
        </div>
        <div id="livesList" class="lives-body">
          <div class="lives-empty">
            <div class="ico">✨</div>
            <div>Nenhuma live ainda…</div>
          </div>
        </div>
        <div class="lives-actions">
          <button class="btn-action btn-download" onclick="downloadLives()">
            ↓ BAIXAR LIVES (.TXT)
            <span>SALVAR ARQUIVO</span>
          </button>
          <button class="btn-action btn-copy" onclick="copyLives()">
            📋 COPIAR LIVES
            <span>PARA O CLIPBOARD</span>
          </button>
        </div>
      </div>

      <div class="log-panel">
        <div class="panel-hd">
          <div class="ph-dot" style="background:var(--blue); box-shadow:0 0 10px var(--blue)"></div>
          <div class="ph-ttl" style="color:var(--blue)">CONSOLE DE RESULTADOS</div>
          <button class="ph-act" onclick="clearLog()">LIMPAR LOG</button>
        </div>
        <div id="log" class="log-body">
          <div class="log-empty">
            <div class="ico">📡</div>
            <div>Aguardando início do processamento...</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="toasts"></div>

<script>
/* ── MATRIX ── */
(function(){
  const cv=document.getElementById('bgc'),cx=cv.getContext('2d');
  function rs(){cv.width=innerWidth;cv.height=innerHeight}rs();addEventListener('resize',rs);
  const CH='01アイウエオカキクケコサシスセソタチツテトナニヌネノ';
  let dr=[];
  function init(){dr=Array.from({length:Math.floor(cv.width/18)},()=>Math.random()*cv.height/18|0)}
  init();addEventListener('resize',init);
  function draw(){
    cx.fillStyle='rgba(2,4,10,.08)';cx.fillRect(0,0,cv.width,cv.height);
    cx.fillStyle='#00ff88';cx.font='12px Share Tech Mono';
    dr.forEach((y,i)=>{
      cx.fillText(CH[Math.random()*CH.length|0],i*18,y*18);
      if(y*18>cv.height&&Math.random()>.975)dr[i]=0;dr[i]++;
    });
  }
  let last=0;(function loop(ts){if(ts-last>60){draw();last=ts}requestAnimationFrame(loop)})(0);
})();

/* ── CLOCK ── */
setInterval(()=>{document.getElementById('clock').textContent=new Date().toTimeString().slice(0,8)},1000);

/* ── CARD COUNTER ── */
const cardsInput = document.getElementById('cardsInput');
const cardCountBadge = document.getElementById('card-count-badge');
const vTot = document.getElementById('vTot');
cardsInput.addEventListener('input', () => {
  const lines = cardsInput.value.split('\n').filter(l => l.trim() !== '' && !l.trim().startsWith('#'));
  const count = lines.length;
  if (count > 0) {
    cardCountBadge.textContent = `${count} CARDS`;
    cardCountBadge.style.display = 'inline-block';
    if(!running) vTot.textContent = count;
  } else {
    cardCountBadge.style.display = 'none';
    if(!running) vTot.textContent = '0';
  }
});

/* ── ELAPSED ── */
let _ts=null,_el=null;
function startEl(){_ts=Date.now();_el=setInterval(()=>{const s=Math.floor((Date.now()-_ts)/1000);document.getElementById('elapsed').textContent=String(Math.floor(s/60)).padStart(2,'0')+':'+String(s%60).padStart(2,'0')},500)}
function stopEl(){clearInterval(_el);_el=null}

/* ── ÁUDIO DE LIVE ── */
const liveAudio = new Audio('/static/live.mp3');
liveAudio.preload = 'auto';

function playLiveSound(){
  try {
    console.log('Tentando tocar áudio de LIVE...');
    liveAudio.pause();
    liveAudio.currentTime = 0;
    
    const playPromise = liveAudio.play();
    if (playPromise !== undefined) {
      playPromise.then(() => {
        console.log('Áudio reproduzido com sucesso!');
      }).catch(e => {
        console.error('Erro na reprodução (Autoplay bloqueado?):', e);
        toast('Clique no botão "TESTAR ÁUDIO" para habilitar o som!', 'info');
      });
    }
  } catch(e) {
    console.error('Erro crítico ao tocar áudio:', e);
  }
}

// Prepara o áudio sem tocar automaticamente
document.addEventListener('click', () => {
  liveAudio.load();
}, { once: true });

/* ── SLIDER ── */
function onSlider(v){
  document.getElementById('thrLabel').textContent=v;
  document.getElementById('thrVal').textContent=v;
  if(!running)buildThreadsGrid(parseInt(v));
}

/* ── THREADS GRID ── */
let _numThreads=1;
let _activeSlots = new Set();

function buildThreadsGrid(n){
  _numThreads=n;
  const g=document.getElementById('threadsGrid');g.innerHTML='';
  for(let i=0;i<n;i++){
    const d=document.createElement('div');
    d.className='thread-slot';d.id='tslot-'+i;
    d.innerHTML=`<div class="t-spin"></div><span class="t-num">T${i+1}</span><span class="t-card" id="tc-${i}">— aguardando —</span>`;
    g.appendChild(d);
  }
  updateActiveThreadCount();
}
buildThreadsGrid(1);

function updateActiveThreadCount() {
  document.getElementById('threadCount').textContent=`${_activeSlots.size} / ${_numThreads}`;
}

function threadStart(slot,card){
  const el=document.getElementById('tslot-'+slot);if(!el)return;
  el.className='thread-slot active';
  const tc=document.getElementById('tc-'+slot);if(tc)tc.textContent=card;
  _activeSlots.add(slot);
  updateActiveThreadCount();
}

function threadDone(slot,status){
  const el=document.getElementById('tslot-'+slot);if(!el)return;
  const cls={'LIVE':'done-live','DIE':'done-die','ERROR':'done-err','ERRO':'done-err'}[status]||'';
  el.className='thread-slot '+cls;
  const tc=document.getElementById('tc-'+slot);if(tc)tc.textContent='— concluído —';
  _activeSlots.delete(slot);
  updateActiveThreadCount();
  setTimeout(()=>{
    if(el && !el.classList.contains('active')) {
      el.className='thread-slot';
      if(tc)tc.textContent='— aguardando —';
    }
  },1800);
}

function resetThreads(){
  _activeSlots.clear();
  for(let i=0;i<_numThreads;i++){
    const el=document.getElementById('tslot-'+i);
    if(el){
      el.className='thread-slot';
      const tc=document.getElementById('tc-'+i);
      if(tc)tc.textContent='— aguardando —';
    }
  }
  updateActiveThreadCount();
}

/* ── SOCKET.IO ── */
let socket=null,running=false;
function initSocket(){
  socket=io({
    transports: ['polling', 'websocket'],
    reconnection: true,
    reconnectionAttempts: Infinity,
    reconnectionDelay: 500,
    reconnectionDelayMax: 2000,
    timeout: 20000,
    autoConnect: true
  });
  
  socket.on('sync_state', d => {
    updateStats(d);
    if(d.running){
      running = true;
      setUI(true);
      if(!_el) startEl();
      buildThreadsGrid(d.threads || 1);
      addLog('info','SYS',null,`🔄 Reconectado — checker rodando (${d.checked}/${d.total})`,null,null,null);
      if(d.results && d.results.length){
        d.results.forEach(e=>{ if(e.status==='LIVE') addLive(e.card, e.tempo, e.msg); });
      }
    } else {
      running = false;
      setUI(false);
      addLog('info','SYS',null,'Conectado ao servidor — pronto',null,null,null);
    }
  });

  socket.on('started',d=>{
    running=true;setUI(true);startEl();buildThreadsGrid(d.threads||1);resetThreads();
    addLog('info','SYS',null,`⚡ Iniciado · ${d.total} cartão(ões) · ${d.threads} thread(s)`,null,null,null);
    toast(`Iniciado com ${d.threads} thread(s)!`,'ok');
    // Resetar estatísticas
    vLiv.textContent='0'; vDie.textContent='0'; vErr.textContent='0'; vTot.textContent=d.total||0;
    updateStats({total:d.total||0,checked:0,lives:0,dies:0,errors:0});
  });

  socket.on('thread_start',d=>threadStart(d.slot,d.card));

  socket.on('result',d=>{
    const {entry:e,stats:s}=d;
    threadDone(e.slot,e.status);
    addLog(e.status.toLowerCase(),e.status,e.card,e.msg,e.ts,e.slot,e.tempo);
    updateStats(s);
    
    // Atualização inteligente da textarea: Remove apenas o card processado, mantendo a ordem.
    const textarea = document.getElementById('cardsInput');
    const lines = textarea.value.split('\n');
    const target = e.card.trim();
    const idx = lines.findIndex(l => l.trim() === target);
    if(idx !== -1) {
      lines.splice(idx, 1);
      textarea.value = lines.join('\n');
    }
    
    // Atualiza o contador de cards no badge
    const count = lines.filter(l => l.trim() !== '' && !l.trim().startsWith('#')).length;
    if (count > 0) {
      cardCountBadge.textContent = `${count} CARDS`;
      cardCountBadge.style.display = 'inline-block';
    } else {
      cardCountBadge.style.display = 'none';
    }
    
    if(e.status==='LIVE'){
      addLive(e.card, e.tempo, e.msg);
      pulseLive();
      playLiveSound();
      toast('🟢 LIVE: '+e.card.split('|')[0],'ok');
    }
  });

  socket.on('finished',d=>{
    running=false;setUI(false);stopEl();resetThreads();updateStats(d.stats);
    addLog('info','SYS',null,d.stopped?'⛔ Checker parado.':'✔ Checker finalizado!',null,null,null);
    toast(d.stopped?'Checker parado!':'Checker finalizado!','info');
  });

  socket.on('disconnect',()=>{
    addLog('info','SYS',null,'⚠️ Conexão perdida — reconectando...',null,null,null);
  });
}
window.addEventListener('load', () => {
  setTimeout(initSocket, 200);
  // Notificação persistente para ativar o som
  setTimeout(() => {
    const soundToast = toast('🔊 Clique AQUI ou no botão "TESTAR ÁUDIO" para ativar o som das LIVES!', 'info', 0);
    soundToast.style.cursor = 'pointer';
    soundToast.style.border = '2px solid var(--green)';
    soundToast.style.animation = 'pulse 2s infinite';
    
    const enableSound = () => {
      // playLiveSound(); <- Removido para não tocar som ao carregar a página
      soundToast.style.transition = 'opacity 0.5s';
      soundToast.style.opacity = '0';
      setTimeout(() => soundToast.remove(), 500);
      document.removeEventListener('click', enableSound);
    };
    
    soundToast.addEventListener('click', enableSound);
    document.addEventListener('click', enableSound, { once: true });
  }, 1000);
});

// Adicionando animação de pulso para o toast de som
const style = document.createElement('style');
style.innerHTML = `
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
}`;
document.head.appendChild(style);

/* ── UI ── */
function setUI(on){
  const dot=document.getElementById('dot'),lbl=document.getElementById('statusLbl');
  document.getElementById('btnStart').disabled=on;
  document.getElementById('btnStop').disabled=!on;
  document.getElementById('cardsInput').disabled=on;
  document.getElementById('thrSlider').disabled=on;
  if(on){
    dot.className='tb-dot on';
    lbl.innerHTML='STATUS: <span style="color:var(--green); text-shadow: 0 0 10px var(--green);">EM EXECUÇÃO</span>';
  } else {
    dot.className='tb-dot';
    lbl.innerHTML='STATUS: <span style="color:var(--muted);">INATIVO</span>';
  }
}

function updateStats(s){
  const vLive = document.getElementById('vLive');
  const vDie = document.getElementById('vDie');
  const vErr = document.getElementById('vErr');
  const vTot = document.getElementById('vTot');
  
  vLive.textContent = String(s.lives || 0);
  vDie.textContent = String(s.dies || 0);
  vErr.textContent = String(s.errors || 0);
  vTot.textContent = String(s.total || 0);
  
  document.getElementById('liveCnt').textContent = String(s.lives || 0);
  const tot=s.checked||1;
  document.getElementById('rLive').textContent=Math.round((s.lives||0)/tot*100)+'%';
  document.getElementById('rDie').textContent=Math.round((s.dies||0)/tot*100)+'%';
  document.getElementById('rErr').textContent=Math.round((s.errors||0)/tot*100)+'%';
  document.getElementById('rTot').textContent=(s.checked||0)+' checked';
  const pct=s.total>0?Math.round((s.checked||0)/s.total*100):0;
  document.getElementById('progBar').style.width=pct+'%';
  document.getElementById('progPct').textContent=pct+'%';
  document.getElementById('progLbl').textContent=`${s.checked||0} / ${s.total||0}`;
}

function pulseLive(){
  const c=document.getElementById('cLive');
  c.classList.remove('pop');void c.offsetWidth;c.classList.add('pop');
  setTimeout(()=>c.classList.remove('pop'),600);
}

function playLiveSound() {
  const audio = document.getElementById('liveAudio');
  if (audio) {
    audio.currentTime = 0;
    audio.play().catch(e => console.log('Erro ao tocar áudio:', e));
  }
}

function addLog(type,badge,card,msg,ts,slot,tempo){
  const log=document.getElementById('log');
  const empty=log.querySelector('.log-empty');if(empty)empty.remove();

  const bMap={live:'b-live',die:'b-die',erro:'b-erro',error:'b-erro',info:'b-info',sys:'b-info'};
  const cls=bMap[type]||'b-info';
  const el=document.createElement('div');
  el.className=`entry ${type}`;

  const tBadge  = (slot!=null)          ? `<span class="b-t">T${slot+1}</span>` : '';
  const tempoBadge = (tempo!=null&&tempo>0) ? `<span class="b-tempo" style="margin-left: 8px; color: var(--muted); font-size: 12px;">${tempo}s</span>` : '';
  const cardHtml = card ? `<span class="e-card">${esc(card)}</span>` : '';

  const msgLine = msg ? `<div class="entry-msg" style="margin-top: 4px; font-size: 13px; color: var(--text); opacity: 0.9;">${esc(msg)}</div>` : '';

  el.innerHTML =
    `<div class="entry-top" style="display: flex; align-items: center; flex-wrap: wrap;">`+
      `<span class="badge ${cls}" style="margin-right: 8px;">${esc(badge)}</span>`+
      tBadge+
      `<div style="display: flex; align-items: center;">`+
        cardHtml+
        tempoBadge+
      `</div>`+
    `</div>`+
    msgLine;

  log.appendChild(el);
  log.scrollTop=log.scrollHeight;
}

function addLive(card, tempo, msg){
  const list=document.getElementById('livesList');
  const empty=list.querySelector('.lives-empty');if(empty)empty.remove();
  const el=document.createElement('div');el.className='live-item';
  
  const tempoHtml = tempo ? `<span style="color:var(--muted); font-size:11px; float:right;">${tempo}s</span>` : '';
  
  el.innerHTML = `
    <div style="border-bottom:1px solid rgba(0,255,136,0.1); padding-bottom:5px; margin-bottom:5px;">
      <span style="color:#00ff88; font-weight:bold; font-size:16px; letter-spacing:1px;">${esc(card)}</span>
      ${tempoHtml}
    </div>
    <div style="color:rgba(255,255,255,0.8); font-size:13px; line-height:1.4; word-break:break-all;">
      ${esc(msg)}
    </div>
  `;
  
  list.appendChild(el);
  list.scrollTop=list.scrollHeight;
}

function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}

function toast(msg,type,duration=3500){
  const c=document.getElementById('toasts');
  const t=document.createElement('div');t.className=`toast ${type}`;t.textContent=msg;
  c.appendChild(t);
  if(duration > 0) {
    setTimeout(()=>{t.style.transition='opacity .3s';t.style.opacity='0';setTimeout(()=>t.remove(),320)},duration);
  }
  return t;
}

function clearInput(){ document.getElementById('cardsInput').value=''; vTot.textContent='0'; cardCountBadge.style.display='none'; }
function clearLog(){ document.getElementById('log').innerHTML='<div class="log-empty"><div class="ico">📡</div><div>Aguardando início do processamento...</div></div>'; }
function clearLives(){ document.getElementById('livesList').innerHTML='<div class="lives-empty"><div class="ico">✨</div><div>Nenhuma live ainda…</div></div>'; document.getElementById('liveCnt').textContent='0'; }

async function doStart(){
  const cards=document.getElementById('cardsInput').value.trim();
  if(!cards){toast('Cole os cartões antes de iniciar!','err');return}
  const threads=parseInt(document.getElementById('thrSlider').value)||1;
  clearLives();
  clearLog();
  document.getElementById('progBar').style.width='0%';
  document.getElementById('progPct').textContent='0%';
  document.getElementById('progLbl').textContent='0 / 0';
  document.getElementById('vLive').textContent='0';
  document.getElementById('vDie').textContent='0';
  document.getElementById('vErr').textContent='0';
  document.getElementById('vTot').textContent='0';
  document.getElementById('rLive').textContent='0%';
  document.getElementById('rDie').textContent='0%';
  document.getElementById('rErr').textContent='0%';
  document.getElementById('rTot').textContent='0 checked';
  resetThreads();
  try{
    const r=await fetch('/api/start',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({cards,threads})});
    const d=await r.json();
    if(!r.ok)toast(d.msg||'Erro ao iniciar','err');
  }catch(e){toast('Erro de conexão','err')}
}

async function doStop(){
  try{
    document.getElementById('btnStop').disabled=true;
    await fetch('/api/stop',{method:'POST'});
  }catch(e){toast('Erro ao parar','err')}
}

async function downloadLives(){
  window.location.href='/api/download/lives';
}

function copyLives(){
  const items = document.querySelectorAll('.live-item');
  if(items.length === 0) { toast('Nenhuma live para copiar!','err'); return; }
  let txt = '';
  items.forEach(el => { txt += el.textContent + '\n'; });
  navigator.clipboard.writeText(txt).then(() => {
    toast('Lives copiadas com sucesso!','ok');
  }).catch(() => {
    toast('Erro ao copiar lives','err');
  });
}
</script>
</body>
</html>