ui: final HOI4 soviet focus tree interface

internal/handler/index.html

@@ -2,74 +2,86 @@
 <html lang="es">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ROW-PROXY // CCCP</title>
+    <title>ROW-PROXY // FRENTE ORIENTAL</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}
-        .section-label{font-size:10px;letter-spacing:4px;color:#7a6228;border-bottom:1px solid #3a2a00;padding-bottom:6px;margin-bottom:1rem}
-        .tank-section{background:#1a1200;border:1px solid #3a2a00;padding:1.5rem;margin-bottom:2rem}
-        .tank-title{font-size:14px;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:120px;flex-shrink:0}
-        .tank-bar-wrap{flex:1;background:#0d0d0d;height:16px;border:1px solid #3a2a00}
-        .tank-bar{height:100%;background:#cc0000;transition: width 0.5s ease-in-out;}
-        .tank-tokens{font-size:10px;color:#c8a84b;width:100px;text-align:right}
-        .url-box{background:#111;border:1px solid #3a2a00;border-left:3px solid #cc0000;padding:1rem 1.25rem;margin-bottom:2rem}
-        .url-val{font-size:13px;color:#e8c86b;word-break:break-all}
-        .footer{border-top:1px solid #3a2a00;padding:1rem 2rem;text-align:center;font-size:10px;color:#4a3a10;letter-spacing:3px}
+        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: "★ "; }
+        
+        /* Estilo HOI4 Rankings */
+        .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; }
+
+        /* Arbol de Enfoque */
+        .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>
 </head>
 <body>
-    <div class="header">
-        <div class="star">★</div>
-        <div>
-            <div class="header-title">ROW-PROXY // CCCP</div>
-            <div class="header-sub">SOVIET ARMORED DIVISION — AI GATEWAY SYSTEM</div>
+    <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>
-    <div class="red-bar"></div>
-    <div class="content">
-        <div class="section-label">// REPORTE DE INTELIGENCIA DE COMANDANTES</div>
-        <div class="tank-section" id="ranking-container">
-            <div class="tank-title">★ ESTADO DEL FRENTE ORIENTAL (TOKENS)</div>
-            <div style="color:#7a6228; text-align:center; padding:20px;">SINCRONIZANDO CON EL KREMLIN...</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-label">// PUNTO DE ACCESO</div>
-        <div class="url-box">
-            <div style="font-size:10px;color:#7a6228;letter-spacing:3px;margin-bottom:6px">BASE URL</div>
-            <div class="url-val">https://moge-row-row-proxy.hf.space/v1</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>
-    <div class="footer">★ CLASIFICADO ★ — ROW-PROXY v1.0 — CCCP AI — ★ CLASIFICADO ★</div>
+
     <script>
         async function updateStats() {
             try {
                 const r = await fetch(window.location.origin + "/stats");
                 const data = await r.json();
-                const container = document.getElementById("ranking-container");
+                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;
-                let html = "<div class=\"tank-title\">★ ESTADO DEL FRENTE ORIENTAL (TOKENS)</div>";
-                const maxTokens = Math.max(...entries.map(e => e.tokens), 1000);
-                entries.forEach(u => {
-                    const width = Math.min((u.tokens / maxTokens) * 100, 100);
-                    html += `<div class="tank-row">
-                        <div class="tank-name">${u.name.toUpperCase()}</div>
-                        <div class="tank-bar-wrap"><div class="tank-bar" style="width:${width}%"></div></div>
-                        <div class="tank-tokens">${u.tokens.toLocaleString()} TKNS</div>
-                    </div>`;
-                });
-                container.innerHTML = html;
+
+                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();