Polish web UI: gold theme, scrollable left panel, header cleanup

- Retheme accent from red to the Tripo gold (#F9CF00) across the dark
UI: tokens, logo, buttons, focus rings, hovers, viewer glow, and the
sampling progress bar. Generate button now uses dark ink text for
contrast on gold. Destructive/error reds are intentionally kept.
- Rename the title "Splat" to "TripoSplat".
- Make the left panel scrollable with the Generate button pinned to the
bottom (inner .panel-left-scroll), so the upload area is no longer
clipped when the settings accordion is expanded.
- Move the Paper/Blog/GitHub links into the header center and drop the
tagline; remove the redundant left-panel title and the duplicate
bottom "drag to orbit" hint (the viewer keeps its top-left one).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

index.html

@@ -20,15 +20,17 @@
   --bg-input: rgba(255, 255, 255, 0.045);
   --border: rgba(255, 255, 255, 0.06);
   --border-hover: rgba(255, 255, 255, 0.12);
-  --border-focus: rgba(255, 77, 79, 0.45);
-  --text: #e2e8f0;
-  --text-secondary: #94a3b8;
-  --text-muted: #64748b;
-  --text-faint: #475569;
-  --accent: #ff4d4f;
-  --accent-dark: #d9363e;
-  --accent-glow: rgba(255, 77, 79, 0.25);
-  --accent-subtle: rgba(255, 77, 79, 0.08);
+  --border-focus: rgba(249, 207, 0, 0.5);
+  --text: #e8eaf0;
+  --text-secondary: #9aa3b2;
+  --text-muted: #6b7488;
+  --text-faint: #4b5366;
+  --accent: #F9CF00;
+  --accent-light: #ffe14d;
+  --accent-dark: #d4af00;
+  --accent-ink: #1a1500;
+  --accent-glow: rgba(249, 207, 0, 0.28);
+  --accent-subtle: rgba(249, 207, 0, 0.1);
   --success: #34d399;
   --error: #f87171;
   --radius-sm: 6px;
@@ -64,9 +66,9 @@ body::before {
   position: fixed;
   inset: 0;
   background:
-    radial-gradient(ellipse at 15% 25%, rgba(255, 77, 79, 0.07) 0%, transparent 55%),
-    radial-gradient(ellipse at 85% 75%, rgba(255, 120, 117, 0.05) 0%, transparent 50%),
-    radial-gradient(ellipse at 50% 50%, rgba(63, 27, 27, 0.15) 0%, transparent 70%);
+    radial-gradient(ellipse at 15% 25%, rgba(249, 207, 0, 0.08) 0%, transparent 55%),
+    radial-gradient(ellipse at 85% 75%, rgba(255, 225, 77, 0.05) 0%, transparent 50%),
+    radial-gradient(ellipse at 50% 50%, rgba(60, 50, 8, 0.18) 0%, transparent 70%);
   pointer-events: none;
   z-index: 0;
   animation: bgPulse 25s ease-in-out infinite alternate;
@@ -113,25 +115,16 @@ body::before {
 .logo-text {
   font-size: 18px;
   font-weight: 700;
-  background: linear-gradient(135deg, #ff9c6e, #ff4d4f);
+  background: linear-gradient(135deg, #fff0a8, var(--accent) 55%, var(--accent-dark));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  letter-spacing: -0.3px;
+  letter-spacing: -0.2px;
 }
 .header-center {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  font-size: 12px;
-  color: var(--text-muted);
-  max-width: 400px;
-  text-align: center;
-  line-height: 1.4;
-  display: none;
-}
-@media (min-width: 1100px) { .header-center { display: block; } }
-.header-right {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -146,8 +139,8 @@ body::before {
   transition: all var(--transition-fast);
 }
 .header-link:hover {
-  color: var(--text);
-  background: var(--bg-surface);
+  color: var(--accent);
+  background: var(--accent-subtle);
 }
 
 /* ======================================================================
@@ -171,13 +164,24 @@ body::before {
 .panel-left, .panel-right {
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
   padding: 20px;
 }
+.panel-right {
+  overflow-y: auto;
+}
 .panel-left {
   width: var(--panel-left-w);
   min-width: 280px;
   border-right: 1px solid var(--border);
+  overflow: hidden;            /* the inner area scrolls; button stays pinned */
+}
+/* Scrollable region holding upload / examples / settings. */
+.panel-left-scroll {
+  flex: 1 1 auto;
+  min-height: 0;               /* allow the flex child to shrink so it can scroll */
+  overflow-y: auto;
+  margin-right: -8px;          /* keep content clear of the scrollbar */
+  padding-right: 8px;
 }
 .panel-right {
   width: var(--panel-right-w);
@@ -245,12 +249,12 @@ body::before {
   overflow: hidden;
 }
 #upload-area:hover {
-  border-color: rgba(255, 77, 79, 0.35);
+  border-color: rgba(249, 207, 0, 0.4);
   background: var(--accent-subtle);
 }
 #upload-area.drag-over {
   border-color: var(--accent);
-  background: rgba(255, 77, 79, 0.12);
+  background: rgba(249, 207, 0, 0.14);
   transform: scale(1.01);
 }
 #upload-area.has-image {
@@ -331,7 +335,7 @@ body::before {
   position: relative;
 }
 .example-thumb:hover {
-  border-color: rgba(255, 77, 79, 0.35);
+  border-color: rgba(249, 207, 0, 0.4);
   transform: scale(1.06);
   box-shadow: 0 4px 16px rgba(0,0,0,0.3);
 }
@@ -429,7 +433,7 @@ select {
 input[type="number"]:focus,
 select:focus {
   border-color: var(--border-focus);
-  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);
+  box-shadow: 0 0 0 3px rgba(249, 207, 0, 0.12);
 }
 select {
   appearance: none;
@@ -481,14 +485,14 @@ input[type="range"]::-moz-range-thumb {
 .btn-primary {
   width: 100%;
   padding: 13px 16px;
-  margin-top: auto;
-  background: linear-gradient(135deg, #ff4d4f 0%, #d9363e 100%);
+  margin-top: 16px;
+  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
   border: none;
   border-radius: var(--radius-md);
-  color: #fff;
+  color: var(--accent-ink);
   font-family: inherit;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -503,7 +507,7 @@ input[type="range"]::-moz-range-thumb {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.12) 50%, transparent 75%);
+  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.4) 50%, transparent 75%);
   transform: translateX(-120%);
   transition: transform 0.65s ease;
 }
@@ -511,7 +515,7 @@ input[type="range"]::-moz-range-thumb {
   transform: translateX(120%);
 }
 .btn-primary:hover:not(:disabled) {
-  box-shadow: 0 6px 24px rgba(255, 77, 79, 0.35), 0 0 0 1px rgba(255, 77, 79, 0.2);
+  box-shadow: 0 6px 24px rgba(249, 207, 0, 0.38), 0 0 0 1px rgba(249, 207, 0, 0.25);
   transform: translateY(-1px);
 }
 .btn-primary:active:not(:disabled) {
@@ -522,7 +526,7 @@ input[type="range"]::-moz-range-thumb {
   cursor: not-allowed;
 }
 .btn-primary.loading {
-  background: linear-gradient(135deg, #d9363e 0%, #ad2128 100%);
+  background: linear-gradient(135deg, var(--accent-dark) 0%, #9c8000 100%);
   pointer-events: none;
 }
 .btn-icon {
@@ -543,7 +547,7 @@ input[type="range"]::-moz-range-thumb {
   transition: box-shadow var(--transition-slow);
 }
 .viewer-wrap.active {
-  box-shadow: 0 0 40px rgba(255, 77, 79, 0.08), 0 0 80px rgba(255, 120, 117, 0.04);
+  box-shadow: 0 0 40px rgba(249, 207, 0, 0.1), 0 0 80px rgba(255, 225, 77, 0.05);
 }
 .viewer-placeholder {
   display: flex;
@@ -575,18 +579,6 @@ input[type="range"]::-moz-range-thumb {
   position: absolute;
   inset: 0;
 }
-.viewer-bar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 0 0;
-  flex-shrink: 0;
-}
-.viewer-hint {
-  font-size: 11px;
-  color: var(--text-muted);
-  letter-spacing: 0.3px;
-}
 
 /* ======================================================================
    GENERATION PROGRESS OVERLAY (inside the viewer)
@@ -626,7 +618,7 @@ input[type="range"]::-moz-range-thumb {
   height: 100%;
   width: 0%;
   border-radius: 3px;
-  background: linear-gradient(90deg, #ff9c6e, #ff4d4f);
+  background: linear-gradient(90deg, var(--accent-light), var(--accent));
   box-shadow: 0 0 12px var(--accent-glow);
   transition: width 0.3s ease;
 }
@@ -832,7 +824,9 @@ input[type="range"]::-moz-range-thumb {
     border-bottom: 1px solid var(--border);
   }
   .panel-center { min-height: 400px; }
-  .header-center { display: none; }
+  /* Let the left panel flow with the page instead of an inner scroll. */
+  .panel-left { overflow: visible; }
+  .panel-left-scroll { overflow: visible; min-height: 0; }
   :root {
     --panel-left-w: 100%;
     --panel-right-w: 100%;
@@ -848,12 +842,9 @@ input[type="range"]::-moz-range-thumb {
 <header id="app-header">
   <div class="header-left">
     <img class="logo-img" src="https://cdn-web.tripo3d.ai/tripo-web/logo/tripo-logo1.webp" alt="Tripo AI Logo">
-    <span class="logo-text">Splat</span>
+    <span class="logo-text">TripoSplat</span>
   </div>
   <div class="header-center">
-    Single image → high-quality 3D Gaussians by <a href="https://www.tripo3d.ai/" style="color:var(--accent);text-decoration:none" target="_blank">TripoAI</a>
-  </div>
-  <div class="header-right">
     <a class="header-link" href="https://arxiv.org/abs/2605.16355" target="_blank" rel="noopener">Paper</a>
     <a class="header-link" href="https://www.tripo3d.ai/research/triposplat" target="_blank" rel="noopener">Blog</a>
     <a class="header-link" href="https://github.com/VAST-AI-Research/TripoSplat" target="_blank" rel="noopener">GitHub</a>
@@ -867,10 +858,8 @@ input[type="range"]::-moz-range-thumb {
 
   <!-- =============== LEFT PANEL =============== -->
   <aside class="panel panel-left" id="panel-left">
-    <div class="panel-header">
-      <h2 class="panel-title">Image to 3D</h2>
-      <span class="badge">Gaussian Splatting</span>
-    </div>
+    <!-- Scrollable content; the Generate button below stays pinned -->
+    <div class="panel-left-scroll">
 
     <!-- Upload area -->
     <div id="upload-area">
@@ -936,10 +925,9 @@ input[type="range"]::-moz-range-thumb {
       </div>
     </div>
 
-    <!-- Spacer -->
-    <div style="flex:1;min-height:12px"></div>
+    </div><!-- /.panel-left-scroll -->
 
-    <!-- Generate button -->
+    <!-- Generate button (always pinned to the bottom) -->
     <button class="btn-primary" id="generate-btn" type="button" disabled>
       <svg class="btn-icon" id="generate-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0L14.59 8.41 23 12 14.59 15.59 12 24 9.41 15.59 1 12 9.41 8.41Z"/></svg>
       <span id="generate-label">Generate</span>
@@ -969,9 +957,6 @@ input[type="range"]::-moz-range-thumb {
         <div class="gen-progress-pct" id="gen-progress-pct"></div>
       </div>
     </div>
-    <div class="viewer-bar">
-      <span class="viewer-hint">drag to orbit &nbsp;·&nbsp; scroll to zoom &nbsp;·&nbsp; right-drag to pan</span>
-    </div>
   </section>
 
   <!-- =============== RIGHT PANEL =============== -->