restore full html soviet theme IS-2

internal/handler/index.html

@@ -1,95 +1,173 @@
 <!DOCTYPE html>
-<html lang='es'>
+<html lang="es">
 <head>
-    <meta charset='UTF-8'>
-    <title>ROW-PROXY // FRENTE ORIENTAL</title>
-    <style>
-        body { background: #0d0d0c; color: #d4d4d4; font-family: 'Courier New', monospace; padding: 20px; line-height: 1.2; }
-        .monitor { max-width: 1000px; margin: auto; }
-        .section-header { color: #7a6228; font-size: 12px; letter-spacing: 4px; margin: 20px 0 10px 0; border-bottom: 1px solid #2a2a1f; padding-bottom: 5px; }
-        .box { background: rgba(26, 18, 0, 0.4); border: 1px solid #3a2a00; padding: 20px; margin-bottom: 20px; position: relative; }
-        h2 { color: #ff3333; font-size: 14px; letter-spacing: 2px; margin-bottom: 15px; font-weight: bold; }
-        h2::before { content: '★ '; }
-        .ranking-row { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
-        .name { color: #daa520; width: 120px; font-size: 13px; font-weight: bold; flex-shrink: 0; }
-        .bar-container { flex-grow: 1; background: #080808; height: 14px; border: 1px solid #222; }
-        .bar { background: #cc0000; height: 100%; transition: width 0.8s ease-out; }
-        .tokens { color: #7a6228; width: 100px; text-align: right; font-size: 11px; }
-        .focus-tree { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
-        .focus-node { border: 1px solid #ff3333; color: #ff3333; padding: 5px 10px; font-size: 10px; text-transform: uppercase; background: rgba(255,0,0,0.05); }
-        .quote { border-left: 3px solid #ff3333; background: rgba(255, 0, 0, 0.03); padding: 15px; margin-top: 20px; font-style: italic; color: #888; }
-        .url-display { color: #e8c86b; font-size: 14px; border-left: 3px solid #cc0000; padding-left: 15px; }
-    </style>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>ROW-PROXY // CCCP</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{background:#0d0d0d;font-family:"Courier New",monospace;color:#c8a84b}
+.header{background:#1a1200;border-bottom:2px solid #c8a84b;padding:1.5rem 2rem;display:flex;align-items:center;gap:1rem}
+.star{color:#cc0000;font-size:28px}
+.header-title{font-size:22px;font-weight:bold;letter-spacing:4px;color:#c8a84b}
+.header-sub{font-size:11px;letter-spacing:3px;color:#7a6228;margin-top:2px}
+.red-bar{height:4px;background:#cc0000}
+.content{padding:2rem;max-width:900px;margin:0 auto}
+.section-label{font-size:10px;letter-spacing:4px;color:#7a6228;border-bottom:1px solid #3a2a00;padding-bottom:6px;margin-bottom:1rem;margin-top:1.5rem}
+.status-row{display:flex;gap:1rem;margin-bottom:1rem}
+.status-card{flex:1;background:#1a1200;border:1px solid #3a2a00;border-left:3px solid #c8a84b;padding:1rem}
+.status-card .val{font-size:18px;color:#c8a84b;font-weight:bold;margin-bottom:2px}
+.status-card .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:1rem 1.25rem;margin-bottom:1rem}
+.url-label{font-size:10px;color:#7a6228;letter-spacing:3px;margin-bottom:6px}
+.url-val{font-size:13px;color:#e8c86b;word-break:break-all}
+.key-row{display:flex;align-items:center;gap:8px;margin-top:6px}
+.key-val{font-size:12px;color:#c8a84b;font-family:monospace}
+.reveal-btn{background:#2a1e00;border:1px solid #c8a84b;color:#c8a84b;font-size:10px;padding:3px 10px;cursor:pointer;letter-spacing:2px;font-family:"Courier New"}
+.reveal-btn:hover{background:#3a2a00}
+.models-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1rem}
+.model-item{background:#1a1200;border:1px solid #2a1e00;padding:8px 12px;display:flex;align-items:center;gap:8px}
+.model-dot{width:6px;height:6px;background:#44aa99;border-radius:50%;flex-shrink:0}
+.model-dot.glm{background:#c8a84b}
+.model-name{font-size:11px;color:#c8a84b}
+.tank-section{background:#1a1200;border:1px solid #3a2a00;padding:1.5rem;margin-bottom:1rem}
+.tank-title{font-size:13px;color:#cc0000;letter-spacing:3px;margin-bottom:1rem;font-weight:bold}
+.tank-row{display:flex;gap:1rem;margin-bottom:8px;align-items:center}
+.tank-name{font-size:12px;color:#e8c86b;width:100px;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:100px;text-align:right;flex-shrink:0}
+.soviet-section{background:#1a1200;border:1px solid #3a2a00;padding:1.5rem;margin-bottom:1rem}
+.blueprint{color:#cc0000;font-size:10px;line-height:1.4;margin:0.5rem 0;font-family:"Courier New"}
+.soviet-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:1rem}
+.soviet-pill{background:#2a1000;border:1px solid #cc0000;color:#cc0000;font-size:9px;padding:3px 8px;letter-spacing:1px}
+.commander-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:1rem}
+.commander-card{background:#0d0d0d;border:1px solid #2a1e00;padding:8px 12px}
+.cmd-name{font-size:12px;color:#e8c86b;font-weight:bold}
+.cmd-trait{font-size:10px;color:#7a6228;margin-top:2px;letter-spacing:1px}
+.quote-box{background:#0d0d0d;border-left:3px solid #cc0000;padding:0.75rem 1rem;margin-top:1rem;font-size:11px;color:#7a6228;font-style:italic}
+.footer{border-top:1px solid #3a2a00;padding:1rem 2rem;text-align:center;font-size:10px;color:#4a3a10;letter-spacing:3px;margin-top:1rem}
+.classified{color:#cc0000}
+</style>
 </head>
 <body>
-    <div class='monitor'>
-        <div class='section-header'>// HOI4 - NO STEP BACK - FRENTE ORIENTAL</div>
-        <div class='box'>
-            <h2>TOP USUARIOS (COMANDANTES)</h2>
-            <div id='ranking-frente'>
-                <div style='color:#7a6228; text-align:center; padding:10px;'>CONECTANDO AL SERVIDOR CENTRAL...</div>
-            </div>
-        </div>
-        <div class='box'>
-            <h2>ARBOL DE ENFOQUE SOVIETICO</h2>
-            <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'>FRENTE POPULAR</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 class='section-header'>// PUNTO DE ACCESO</div>
-        <div class='url-display'>BASE URL: https://moge-row-row-proxy.hf.space/v1</div>
+<div class="header">
+  <div class="star">&#9733;</div>
+  <div>
+    <div class="header-title">ROW-PROXY // CCCP</div>
+    <div class="header-sub">&#9733; SOVIET ARMORED DIVISION — AI GATEWAY — НИ ШАГУ НАЗАД — 1941-1985 &#9733;</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">HF DEPLOY // GO v1.23</div>
+  </div>
+</div>
+<div class="red-bar"></div>
+<div class="content">
+
+  <div class="section-label">// ESTADO DEL SISTEMA</div>
+  <div class="status-row">
+    <div class="status-card"><div class="val online">&#9679; ONLINE</div><div class="lbl">PROXY STATUS</div></div>
+    <div class="status-card"><div class="val">24</div><div class="lbl">MODELOS ACTIVOS</div></div>
+    <div class="status-card"><div class="val">GLM-4.7</div><div class="lbl">MOTOR PRINCIPAL</div></div>
+  </div>
+
+  <div class="section-label">// PUNTO DE ACCESO — CLASIFICADO</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-row">
+      <span class="key-val">API KEY: </span>
+      <span class="key-val" id="keyval">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>
+      <button class="reveal-btn" onclick="toggleKey()">REVELAR</button>
     </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: name,
-                    tokens: info.tokens || 0
-                })).sort((a, b) => b.tokens - a.tokens);
-                if (entries.length === 0) return;
-                const maxTokens = Math.max(...entries.map(e => e.tokens), 5000);
-                container.innerHTML = entries.map(u => `
-                    <div class='ranking-row'>
-                        <div class='name'>${u.name.toUpperCase()}</div>
-                        <div class='bar-container'><div class='bar' style='width:${Math.min((u.tokens/maxTokens)*100, 100)}%'></div></div>
-                        <div class='tokens'>${u.tokens.toLocaleString()} TKNS</div>
-                    </div>`).join('');
-            } catch(e) { console.error(e); }
-        }
-        setInterval(updateStats, 5000); updateStats();
-    </script>
+  </div>
+
+  <div class="section-label">// MODELOS DISPONIBLES</div>
+  <div class="models-grid">
+    <div class="model-item"><div class="model-dot"></div><div class="model-name">claude-sonnet-4-6</div></div>
+    <div class="model-item"><div class="model-dot"></div><div class="model-name">claude-haiku-4-5</div></div>
+    <div class="model-item"><div class="model-dot"></div><div class="model-name">claude-opus-4-6</div></div>
+    <div class="model-item"><div class="model-dot"></div><div class="model-name">claude-3-5-sonnet</div></div>
+    <div class="model-item"><div class="model-dot glm"></div><div class="model-name">glm-4.7-thinking</div></div>
+    <div class="model-item"><div class="model-dot glm"></div><div class="model-name">glm-5</div></div>
+    <div class="model-item"><div class="model-dot glm"></div><div class="model-name">glm-5-thinking</div></div>
+    <div class="model-item"><div class="model-dot glm"></div><div class="model-name">glm-4.5-air</div></div>
+  </div>
+
+  <div class="section-label">// MODELOS MAS USADOS</div>
+  <div class="tank-section">
+    <div class="tank-title">&#9733; USO DE MODELOS EN TIEMPO REAL</div>
+    <div id="model-stats">
+      <div class="tank-row"><div class="tank-name">claude-sonnet</div><div class="tank-bar-wrap"><div class="tank-bar" style="width:0%" id="bar-claude"></div></div><div class="tank-era" id="tok-claude">0 tokens</div></div>
+      <div class="tank-row"><div class="tank-name">glm-4.7</div><div class="tank-bar-wrap"><div class="tank-bar" style="width:0%" id="bar-glm47"></div></div><div class="tank-era" id="tok-glm47">0 tokens</div></div>
+      <div class="tank-row"><div class="tank-name">glm-5</div><div class="tank-bar-wrap"><div class="tank-bar" style="width:0%" id="bar-glm5"></div></div><div class="tank-era" id="tok-glm5">0 tokens</div></div>
+    </div>
+  </div>
+
+  <div class="section-label">&#9733; UNION SOVIETICA — FRENTE ORIENTAL</div>
+  <div class="soviet-section">
+    <div class="tank-title">&#9733; ESQUEMA TECNICO — IS-2 STALIN</div>
+    <pre class="blueprint">
+         ___________
+        |  IS-2 &#9733;  |
+   _____|___________|_____
+  |  [==]  STALIN  [==]  |
+  |_______________________|
+    ||  O         O  ||
+    ||_______________||
+   /    122mm D-25T      /________________________  |  BLINDAJE: 120mm FRENTE |
+  |  MOTOR:  V-2-IS 520HP   |
+  |  VELOCIDAD: 37 km/h     |
+  |  TRIPULACION: 4 hombres |
+  |_________________________|
+    </pre>
+    <div class="soviet-pills">
+      <div class="soviet-pill">&#9733; ACERO SOVIETICO</div>
+      <div class="soviet-pill">&#9733; 122MM D-25T</div>
+      <div class="soviet-pill">&#9733; BLINDAJE 120MM</div>
+      <div class="soviet-pill">&#9733; V-2-IS 520HP</div>
+      <div class="soviet-pill">&#9733; KURSK 1943</div>
+      <div class="soviet-pill">&#9733; BERLIN 1945</div>
+    </div>
+
+    <div class="tank-title" style="margin-top:1rem">&#9733; TOP COMANDANTES</div>
+    <div class="commander-grid" id="users-grid">
+      <div class="commander-card"><div class="cmd-name">Cargando...</div><div class="cmd-trait">CONECTANDO AL SERVIDOR</div></div>
+    </div>
+
+    <div class="quote-box">
+      &ldquo;La victoria es para aquellos que no retroceden. Ni un paso atras.&rdquo;<br>
+      <span style="color:#c8a84b;font-style:normal">— Orden No. 227, Stalin — 1942 — &#9733; НИ ШАГУ НАЗАД</span>
+    </div>
+  </div>
+
+</div>
+<div class="footer">
+  <span class="classified">&#9733; CLASIFICADO &#9733;</span> &mdash; ROW-PROXY v1.0 &mdash; CCCP AI GATEWAY &mdash; НИ ШАГУ НАЗАД &mdash; <span class="classified">&#9733; CLASIFICADO &#9733;</span>
+</div>
 <script>
+var revealed = false;
+var key = "free";
+function toggleKey() {
+  revealed = !revealed;
+  document.getElementById("keyval").textContent = revealed ? key : "████████";
+  document.querySelector(".reveal-btn").textContent = revealed ? "OCULTAR" : "REVELAR";
+}
 function loadStats() {
-  fetch('/stats')
-    .then(r => r.json())
-    .then(data => {
-      var keys = Object.values(data.keys || {});
-      keys.sort(function(a,b){ return b.requests - a.requests; });
-      var grid = document.getElementById('users-grid');
-      if (keys.length === 0) {
-        grid.innerHTML = '<div class="commander-card"><div class="cmd-name">Sin usuarios aun</div><div class="cmd-trait">SE EL PRIMERO EN USAR LA PROXY</div></div>';
-        return;
-      }
-      grid.innerHTML = keys.slice(0,4).map(function(k){
-        return '<div class="commander-card"><div class="cmd-name">' + k.name + '</div><div class="cmd-trait">SOLICITUDES: ' + k.requests + ' // TOKENS: ' + k.tokens + '</div></div>';
-      }).join('');
-      var freeEl = document.getElementById('free-count');
-      if (freeEl) freeEl.textContent = (data.free_reqs || 0) + '/340';
-    })
-    .catch(function(){ });
+  fetch("/stats").then(r=>r.json()).then(data=>{
+    var keys = Object.values(data.keys || {});
+    keys.sort(function(a,b){ return b.tokens - a.tokens; });
+    var grid = document.getElementById("users-grid");
+    if(keys.length===0){
+      grid.innerHTML = "<div class="commander-card"><div class="cmd-name">Sin usuarios</div><div class="cmd-trait">SE EL PRIMERO</div></div>";
+      return;
+    }
+    grid.innerHTML = keys.slice(0,4).map(function(k){
+      return "<div class="commander-card"><div class="cmd-name">"+(k.name||"?")+("</div><div class="cmd-trait">SOLICITUDES: "+k.requests+" // TOKENS: "+k.tokens+"</div></div>");
+    }).join("");
+  }).catch(function(){});
 }
 loadStats();
 setInterval(loadStats, 30000);