Upload 3 files

static/css/style.css

@@ -51,9 +51,9 @@ canvas#canvas3d {
     position: relative;
     z-index: 20;
     width: 100%;
-    max-width: 1300px;
+    max-width: 1400px;
     margin: 0 auto;
-    padding: 1rem 2rem;
+    padding: 0.5rem 1.5rem;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
@@ -191,16 +191,16 @@ input[type="file"]:hover::file-selector-button {
 /* Metrics Dashboard */
 .metrics-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 1.5rem;
-    margin: 2.5rem 0;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1rem;
+    margin: 1.5rem 0;
 }
 
 .metric-item {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.1);
-    padding: 2rem;
+    padding: 1.2rem;
     transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
     overflow: hidden;
@@ -215,22 +215,22 @@ input[type="file"]:hover::file-selector-button {
 }
 
 .metric-value {
-    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-size: clamp(1.8rem, 4vw, 2.8rem);
     font-weight: 900;
     letter-spacing: -0.05em;
     display: block;
     color: white;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.2rem;
     line-height: 1;
 }
 
 .metric-label {
-    font-size: 14px;
+    font-size: 11px;
     text-transform: uppercase;
-    letter-spacing: 0.25em;
-    opacity: 1;
+    letter-spacing: 0.2em;
+    opacity: 0.8;
     font-weight: 800;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.2rem;
     display: block;
 }
 
@@ -278,7 +278,7 @@ input[type="file"]:hover::file-selector-button {
     width: 100%;
     overflow-x: auto;
     overflow-y: auto;
-    max-height: 500px;
+    max-height: 420px;
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.08);
@@ -286,8 +286,6 @@ input[type="file"]:hover::file-selector-button {
     scrollbar-width: thin;
     scrollbar-color: var(--secondary-color) transparent;
     position: relative;
-    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
-    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
 }
 
 /* Smart indicating effect: show more contrast on inner content */
@@ -433,10 +431,11 @@ td {
 
 .cm-table th,
 .cm-table td {
-    padding: 0.8rem;
+    padding: 0.4rem;
     border: 1px solid rgba(255, 255, 255, 0.05);
     text-align: center;
-    min-width: 50px;
+    min-width: 35px;
+    font-size: 10px;
 }
 
 .cm-label-row th {
@@ -606,12 +605,12 @@ td {
 
 @media (min-width: 1100px) {
     .report-grid {
-        grid-template-columns: 1fr 400px;
+        grid-template-columns: 1fr 380px;
     }
 
     .sticky-side {
         position: sticky;
-        top: 2rem;
+        top: 1rem;
         height: min-content;
     }
 }

templates/index.html

@@ -139,8 +139,14 @@
                 }
                 const displayP = Math.floor(p);
                 loaderBar.style.width = displayP + '%';
-                loaderText.innerText = `PROCS / ANALYZING DATA [${displayP}%]`;
-            }, 60); // Faster update interval for "aliveness"
+
+                let phase = "ANALYZING";
+                if (displayP > 30) phase = "INFERENCING";
+                if (displayP > 70) phase = "GRADATING";
+                if (displayP > 90) phase = "COMPILING REPORT";
+
+                loaderText.innerText = `PROCS / ${phase} DATA [${displayP}%]`;
+            }, 80);
         });
 
         function confirmFlush() {

templates/report.html

@@ -20,13 +20,13 @@
             </div>
         </nav>
 
-        <header>
-            <p class="label-mini">Batch Processing Overview</p>
-            <h1>ANALYTICS<br /><span class="italic">REPORT</span></h1>
-            <div style="margin-top: 1.5rem;">
-                <a href="/download/{{ report_file }}" class="btn-launch" style="text-decoration: none;">Export Result
-                    Dataset</a>
+        <header style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem;">
+            <div>
+                <p class="label-mini">Batch Processing Overview</p>
+                <h1 style="font-size: 3rem;">ANALYTICS <span class="italic">REPORT</span></h1>
             </div>
+            <a href="/download/{{ report_file }}" class="btn-launch"
+                style="text-decoration: none; padding: 0.8rem 1.5rem; font-size: 10px;">Export Result Dataset</a>
         </header>
 
         {% if metrics %}
@@ -129,7 +129,7 @@
         </div>
         {% endif %}
 
-        <section class="upload-card" style="margin-top: 4rem; padding: 2.5rem; border-radius: 8px;">
+        <section class="upload-card" style="margin-top: 1rem; padding: 1.5rem; border-radius: 8px;">
             <p class="label-mini">Inference Manifest</p>
             <div class="table-wrapper">
                 <table>