Add

templates/index.html

@@ -7,6 +7,9 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
   <style>
+
+
+
     /* ══ TOKENS ══ */
     :root {
       --g0:#000000; --g1:#050d05; --g2:#0a150a; --g3:#0f1f0f; --g4:#1a2e1a;
@@ -56,29 +59,29 @@
     }
 
     /* ══ WRAPPER — flex column, full height ══ */
-    .wrapper {
-      position: relative; z-index: 1;
-      width: 100%; max-width: 1200px;
-      margin: 0 auto;
-      padding: 0 1.5rem;
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-    }
+.wrapper {
+  width: 100%;
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 0 1.2rem;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
 
     /* ══ HEADER — compact, fixed height ══ */
     header {
       flex-shrink: 0;
-      border-bottom: 1px solid var(--border);
-      padding: .75rem 0;
+      border-bottom: 10px solid var(--border);
+      padding: 1rem 0;
       display: flex; align-items: center; justify-content: space-between;
       animation: fadeIn .5s ease both;
     }
     .logo { display:flex; align-items:center; gap:.75rem; }
     .logo-icon {
-      width:32px; height:32px; border:1.5px solid var(--green);
-      display:grid; place-items:center; font-size:.95rem;
+      width:42px; height:42px; border:1.5px solid var(--green);
+      display:grid; place-items:center; font-size:1.1rem;
       box-shadow: 0 0 14px var(--green-glow), inset 0 0 8px var(--green-glow);
       animation: pulse-box 3s ease-in-out infinite;
     }
@@ -87,7 +90,7 @@
       50%{box-shadow:0 0 22px rgba(0,255,65,.3),inset 0 0 14px rgba(0,255,65,.2);}
     }
     .logo-text {
-      font-family:var(--ff-head); font-size:1.5rem; font-weight:700;
+      font-family:var(--ff-head); font-size:2rem; font-weight:700;
       letter-spacing:.15em; text-shadow:0 0 20px rgba(0,255,65,.6);
     }
     .logo-text span { color:var(--green3); }
@@ -101,16 +104,16 @@
 
     .header-right { display:flex; align-items:center; gap:1.2rem; }
     .status-dot {
-      display:flex; align-items:center; gap:.4rem;
-      font-family:var(--ff-mono); font-size:0.5rem; color:var(--muted);
+      display:flex; align-items:center; gap:.9rem;
+      font-family:var(--ff-mono); font-size:0.72rem; color:var(--muted);
     }
     .dot {
-      width:6px; height:6px; border-radius:50%;
+      width:7px; height:7px; border-radius:50%;
       background:var(--green); box-shadow:0 0 8px var(--green);
       animation:blink 2s step-end infinite;
     }
     @keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
-    .version { font-family:var(--ff-mono); font-size:.58rem; color:var(--green-dim); letter-spacing:.1em; }
+    .version { font-family:var(--ff-mono); font-size:.7rem; color:var(--green-dim); letter-spacing:.1em; }
 
     /* ── Classes strip row — sits between header and grid ── */
     .classes-bar {
@@ -120,11 +123,11 @@
       border-bottom: 1px solid var(--border);
       animation: fadeIn .6s ease .1s both;
     }
-    .cs-label { font-family:var(--ff-mono); font-size:.52rem; color:var(--green-dim); letter-spacing:.15em; white-space:nowrap; }
+    .cs-label { font-family:var(--ff-mono); font-size:.72rem; color:var(--green-dim); letter-spacing:.15em; white-space:nowrap; }
     .cs-pills  { display:flex; gap:.35rem; flex-wrap:wrap; }
     .cs-pill {
-      font-family:var(--ff-mono); font-size:.55rem;
-      padding:.15rem .5rem;
+      font-family:var(--ff-mono); font-size:.72rem;
+      padding:.22rem .65rem;
       border:1px solid var(--border); border-radius:2px;
       color:var(--green-dim); transition:all .2s; cursor:default;
     }
@@ -158,7 +161,7 @@
     }
     .panel-title {
       flex-shrink: 0;
-      font-family:var(--ff-mono); font-size:.58rem;
+      font-family:var(--ff-mono); font-size:.82rem;
       letter-spacing:.2em; color:var(--green3);
       text-transform:uppercase; margin-bottom:.75rem;
       display:flex; align-items:center; gap:.6rem;
@@ -192,9 +195,9 @@
       box-shadow:0 0 16px rgba(0,255,65,.12),inset 0 0 12px rgba(0,255,65,.04);
     }
     .model-card.active .mc-name { color:var(--green); }
-    .mc-icon { font-size:1rem; }
-    .mc-name { font-family:var(--ff-head); font-weight:600; font-size:.9rem; color:var(--green2); transition:color .2s; }
-    .mc-sub  { font-family:var(--ff-mono); font-size:.54rem; color:var(--muted); }
+    .mc-icon { font-size:1.2rem; }
+    .mc-name { font-family:var(--ff-head); font-weight:600; font-size:1.1rem; color:var(--green2); transition:color .2s; }
+    .mc-sub  { font-family:var(--ff-mono); font-size:.72rem; color:var(--muted); }
 
     /* ── INPUT TABS ── */
     .input-tabs {
@@ -202,9 +205,9 @@
       border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
     }
     .tab-btn {
-      flex:1; padding:.45rem; background:var(--g1);
+      flex:1; padding:.55rem; background:var(--g1);
       border:none; color:var(--muted); font-family:var(--ff-mono);
-      font-size:0.5rem; letter-spacing:.1em; cursor:pointer;
+      font-size:0.72rem; letter-spacing:.1em; cursor:pointer;
       transition:all .2s; text-transform:uppercase;
     }
     .tab-btn:hover  { background:var(--g3); color:var(--green2); }
@@ -216,7 +219,7 @@
     /* ── DROP ZONE — reduced height ── */
     .drop-zone {
       border:1.5px dashed var(--border2); border-radius:var(--r);
-      height: 130px;               /* fixed, no min-height */
+      height: 180px;               /* fixed, no min-height */
       display:flex; flex-direction:column;
       align-items:center; justify-content:center;
       gap:.5rem; cursor:pointer;
@@ -245,8 +248,8 @@
       border-radius:50%; display:grid; place-items:center;
       font-size:1rem; color:var(--green3);
     }
-    .dz-ph p  { font-family:var(--ff-mono); font-size:.65rem; color:var(--muted); }
-    .dz-ph em { font-family:var(--ff-mono); font-size:.56rem; color:var(--green-dim); font-style:normal; }
+    .dz-ph p  { font-family:var(--ff-mono); font-size:.82rem; color:var(--muted); }
+    .dz-ph em { font-family:var(--ff-mono); font-size:.68rem; color:var(--green-dim); font-style:normal; }
     #file-input { display:none; }
 
     /* ── URL INPUT ── */
@@ -257,7 +260,7 @@
       border:1px solid var(--border2); border-radius:var(--r);
       background:var(--g1); overflow:hidden;
     }
-    .url-prefix { font-family:var(--ff-mono); font-size:0.5rem; color:var(--green3); padding:0 .6rem; white-space:nowrap; border-right:1px solid var(--border); }
+    .url-prefix { font-family:var(--ff-mono); font-size:0.72rem; color:var(--green3); padding:0 .6rem; white-space:nowrap; border-right:1px solid var(--border); }
     .url-input {
       flex:1; background:transparent; border:none; outline:none;
       color:var(--green); font-family:var(--ff-mono); font-size:.72rem;
@@ -267,7 +270,7 @@
     .url-load-btn {
       padding:.55rem .8rem; background:rgba(0,255,65,.1); border:none;
       border-left:1px solid var(--border);
-      color:var(--green2); font-family:var(--ff-mono); font-size:0.5rem;
+      color:var(--green2); font-family:var(--ff-mono); font-size:0.72rem;
       cursor:pointer; transition:background .2s; white-space:nowrap;
     }
     .url-load-btn:hover { background:rgba(0,255,65,.2); }
@@ -285,7 +288,7 @@
       background:linear-gradient(135deg,var(--green3),var(--green-dim));
       border:1px solid var(--green3); border-radius:var(--r);
       color:var(--green); font-family:var(--ff-head);
-      font-size:1rem; font-weight:700; letter-spacing:.1em;
+      font-size:1.15rem; font-weight:700; letter-spacing:.1em;
       cursor:pointer; position:relative; overflow:hidden;
       transition:all .2s; text-transform:uppercase;
     }
@@ -320,8 +323,8 @@
       align-items:flex-start; justify-content:center;
       flex:1; gap:.5rem; padding:.5rem 0;
     }
-    .result-waiting .rw-title { font-family:var(--ff-head); font-size:.95rem; font-weight:600; color:var(--green3); }
-    .result-waiting .rw-sub  { font-family:var(--ff-mono); font-size:.66rem; color:var(--green-dim); line-height:1.75; }
+    .result-waiting .rw-title { font-family:var(--ff-head); font-size:1.15rem; font-weight:600; color:var(--green3); }
+    .result-waiting .rw-sub  { font-family:var(--ff-mono); font-size:.82rem; color:var(--green-dim); line-height:1.75; }
     .terminal-cursor {
       display:inline-block; width:7px; height:13px;
       background:var(--green); margin-left:2px;
@@ -339,12 +342,12 @@
     .rc-header  { display:flex; flex-direction:column; gap:.2rem; }
     .rc-label   { font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.2em; color:var(--green3); }
     .rc-class   {
-      font-family:var(--ff-head); font-size:2.6rem; font-weight:700;
+      font-family:var(--ff-head); font-size:3.4rem; font-weight:700;
       letter-spacing:-.01em; line-height:1; color:var(--green);
       text-shadow:0 0 30px rgba(0,255,65,.5);
     }
-    .rc-conf    { font-family:var(--ff-mono); font-size:.72rem; color:var(--muted); margin-top:.1rem; }
-    .rc-conf strong { color:var(--green2); font-size:.85rem; }
+    .rc-conf    { font-family:var(--ff-mono); font-size:.9rem; color:var(--muted); margin-top:.1rem; }
+    .rc-conf strong { color:var(--green2); font-size:1rem; }
 
     .conf-track {
       height:3px; background:var(--g4); border-radius:99px; overflow:hidden; margin-top:.4rem;
@@ -363,11 +366,11 @@
     .prob-row  { display:flex; flex-direction:column; gap:.18rem; }
     .prob-meta { display:flex; justify-content:space-between; align-items:baseline; }
     .prob-name {
-      font-family:var(--ff-body); font-size:.76rem; font-weight:400;
+      font-family:var(--ff-body); font-size:.9rem; font-weight:400;
       color:var(--muted); display:flex; align-items:center; gap:.35rem; text-transform:capitalize;
     }
     .prob-row.top .prob-name { color:var(--green); font-weight:600; }
-    .prob-pct  { font-family:var(--ff-mono); font-size:.65rem; color:var(--green-dim); }
+    .prob-pct  { font-family:var(--ff-mono); font-size:.78rem; color:var(--green-dim); }
     .prob-row.top .prob-pct { color:var(--green2); }
     .prob-track { height:4px; background:var(--g4); border-radius:99px; overflow:hidden; }
     .prob-fill  {
@@ -392,11 +395,11 @@
     .footer-bar {
       flex-shrink: 0;
       border-top: 1px solid var(--border);
-      padding: .35rem 0;
+      padding: .25rem 0;
       display: flex; justify-content: space-between; align-items: center;
       animation: fadeIn .8s ease .25s both;
     }
-    .footer-bar p { font-family:var(--ff-mono); font-size:.55rem; color:var(--green-dim); }
+    .footer-bar p { font-family:var(--ff-mono); font-size:.72rem; color:var(--green-dim); }
 
     @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
   </style>