internal/handler/index.html

<style>
*{box-sizing:border-box;margin:0;padding:0}
.rp-wrap{font-family:'Courier New',monospace;color:#c8a84b;background:#0d0d0d;border-radius:8px;overflow:hidden}
.rp-header{background:#1a1200;border-bottom:2px solid #c8a84b;padding:1rem 1.5rem;display:flex;align-items:center;gap:1rem}
.rp-star{color:#cc0000;font-size:22px}
.rp-title{font-size:18px;font-weight:bold;letter-spacing:4px;color:#c8a84b}
.rp-sub{font-size:10px;letter-spacing:3px;color:#7a6228;margin-top:2px}
.red-bar{height:4px;background:#cc0000}
.rp-body{padding:1.5rem}
.sec-label{font-size:10px;letter-spacing:4px;color:#7a6228;border-bottom:1px solid #3a2a00;padding-bottom:5px;margin-bottom:1rem}
.status-row{display:flex;gap:8px;margin-bottom:1.5rem}
.scard{flex:1;background:#1a1200;border:1px solid #3a2a00;border-left:3px solid #c8a84b;padding:.75rem}
.scard .val{font-size:16px;color:#c8a84b;font-weight:bold;margin-bottom:2px}
.scard .lbl{font-size:10px;color:#7a6228;letter-spacing:2px}
.online{color:#44aa99}
.url-box{background:#111;border:1px solid #3a2a00;border-left:3px solid #cc0000;padding:.75rem 1rem;margin-bottom:1.5rem}
.url-label{font-size:10px;color:#7a6228;letter-spacing:3px;margin-bottom:5px}
.url-val{font-size:13px;color:#e8c86b;word-break:break-all}
.key-val{font-size:12px;color:#c8a84b;margin-top:3px}
.models-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:1.5rem}
.model-item{background:#1a1200;border:1px solid #2a1e00;padding:6px 10px;display:flex;align-items:center;gap:8px}
.model-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dot-green{background:#44aa99}
.dot-gold{background:#c8a84b}
.model-name{font-size:11px;color:#c8a84b}
.box{background:rgba(26,18,0,0.4);border:1px solid #3a2a00;padding:1.2rem;margin-bottom:1.5rem}
.box-title{color:#ff3333;font-size:13px;letter-spacing:2px;margin-bottom:1rem;font-weight:bold}
.box-title::before{content:'★ '}
.ranking-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rank-name{color:#daa520;width:110px;font-size:12px;font-weight:bold;flex-shrink:0}
.bar-wrap{flex:1;background:#080808;height:13px;border:1px solid #222}
.bar{background:#cc0000;height:100%;transition:width .8s ease-out}
.tkns{color:#7a6228;width:90px;text-align:right;font-size:11px}
.focus-tree{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.focus-node{border:1px solid #ff3333;color:#ff3333;padding:4px 9px;font-size:10px;text-transform:uppercase;background:rgba(255,0,0,0.05)}
.tank-section{background:#1a1200;border:1px solid #3a2a00;padding:1.2rem;margin-bottom:1.5rem}
.tank-title{font-size:13px;color:#cc0000;letter-spacing:3px;margin-bottom:1rem;font-weight:bold}
.tank-row{display:flex;gap:10px;margin-bottom:7px;align-items:center}
.tank-name{font-size:12px;color:#e8c86b;width:75px;flex-shrink:0}
.tank-bar-wrap{flex:1;background:#0d0d0d;height:14px}
.tank-bar{height:100%;background:#cc0000}
.tank-era{font-size:10px;color:#7a6228;width:75px;text-align:right}
.quote{border-left:3px solid #ff3333;background:rgba(255,0,0,0.03);padding:12px;margin-bottom:1.5rem;font-style:italic;color:#888;font-size:12px}
.footer{border-top:1px solid #3a2a00;padding:.75rem 1.5rem;text-align:center;font-size:10px;color:#4a3a10;letter-spacing:3px}
.classified{color:#cc0000}
</style>
<div class="rp-wrap">
  <div class="rp-header">
    <div class="rp-star">&#9733;</div>
    <div>
      <div class="rp-title">ROW-PROXY // CCCP</div>
      <div class="rp-sub">SOVIET ARMORED DIVISION — AI GATEWAY SYSTEM — 1960-1985</div>
    </div>
    <div style="margin-left:auto;text-align:right">
      <div style="font-size:10px;color:#44aa99;letter-spacing:2px">&#9679; SISTEMA ACTIVO</div>
      <div style="font-size:10px;color:#7a6228;margin-top:2px">HUGGING FACE DEPLOY</div>
    </div>
  </div>
  <div class="red-bar"></div>
  <div class="rp-body">
    <div class="sec-label">// ESTADO DEL SISTEMA</div>
    <div class="status-row">
      <div class="scard"><div class="val online">&#9679; ONLINE</div><div class="lbl">PROXY STATUS</div></div>
      <div class="scard"><div class="val" id="model-count">8</div><div class="lbl">MODELOS ACTIVOS</div></div>
      <div class="scard"><div class="val">TOP SECRET</div><div class="lbl">API KEY</div></div>
    </div>
    <div class="sec-label">// PUNTO DE ACCESO</div>
    <div class="url-box">
      <div class="url-label">BASE URL — PRODUCCION</div>
      <div class="url-val">https://moge-row-row-proxy.hf.space/v1</div>
      <div class="key-val">API KEY: TOP SECRET</div>
    </div>
    <div class="sec-label">// MODELOS DISPONIBLES</div>
    <div class="models-grid">
      <div class="model-item"><div class="model-dot dot-green"></div><div class="model-name">claude-sonnet-4-6</div></div>
      <div class="model-item"><div class="model-dot dot-green"></div><div class="model-name">claude-haiku-4-5</div></div>
      <div class="model-item"><div class="model-dot dot-green"></div><div class="model-name">claude-opus-4-6</div></div>
      <div class="model-item"><div class="model-dot dot-green"></div><div class="model-name">claude-3-5-sonnet</div></div>
      <div class="model-item"><div class="model-dot dot-gold"></div><div class="model-name">glm-4.7</div></div>
      <div class="model-item"><div class="model-dot dot-gold"></div><div class="model-name">glm-4.7-thinking</div></div>
      <div class="model-item"><div class="model-dot dot-gold"></div><div class="model-name">glm-5</div></div>
      <div class="model-item"><div class="model-dot dot-gold"></div><div class="model-name">glm-5-thinking</div></div>
    </div>
    <div class="sec-label">// HOI4 — FRENTE ORIENTAL — TOP COMANDANTES</div>
    <div class="box">
      <div class="box-title">TOP USUARIOS (COMANDANTES)</div>
      <div id="ranking-frente">
        <div style="color:#7a6228;text-align:center;padding:10px;font-size:12px">CONECTANDO AL SERVIDOR CENTRAL...</div>
      </div>
    </div>
    <div class="sec-label">// ARBOL DE ENFOQUE SOVIETICO</div>
    <div class="box">
      <div class="box-title">ARBOL DE ENFOQUE</div>
      <div class="focus-tree">
        <div class="focus-node">INDUSTRIA DE GUERRA</div>
        <div class="focus-node">COLLECTIVIZACION</div>
        <div class="focus-node">PURGA MILITAR</div>
        <div class="focus-node">LEND-LEASE</div>
        <div class="focus-node">PACTO RIBBENTROP</div>
        <div class="focus-node">DEFENSA EN PROFUNDIDAD</div>
        <div class="focus-node">NvrrrB has been here</div>
      </div>
    </div>
    <div class="quote">
      "La victoria es para aquellos que no retroceden. Ni un paso atras."<br>
      — Orden No. 227, Stalin — 1942 — NO STEP BACK
    </div>
  </div>
  <div class="footer"><span class="classified">&#9733; CLASIFICADO &#9733;</span> &mdash; ROW-PROXY v1.0 &mdash; CCCP AI GATEWAY &mdash; <span class="classified">&#9733; CLASIFICADO &#9733;</span></div>
</div>
<script>
async function updateStats(){
  try{
    const r=await fetch(window.location.origin+'/stats');
    const data=await r.json();
    const container=document.getElementById('ranking-frente');
    const entries=Object.entries(data.keys||{}).map(([name,info])=>({name,tokens:info.tokens||0})).sort((a,b)=>b.requests-a.requests);
    if(!entries.length)return;
    const maxTokens=Math.max(...entries.map(e=>e.tokens),5000);
    container.innerHTML=entries.map((u,i)=>`
      <div class="ranking-row">
        <div class="rank-name">${u.name.toUpperCase()}</div>
        <div class="bar-wrap"><div class="bar" style="width:${Math.min((i+1)*25,100)}%"></div></div>
        <div class="tkns">TOP ${i+1}</div>
      </div>`).join('');
  }catch(e){console.error(e);}
}
setInterval(updateStats,5000);updateStats();
</script>