Update custom frontend branding: use official Tripo AI colors and webp logo

index.html

@@ -20,15 +20,15 @@
   --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(139, 92, 246, 0.45);
+  --border-focus: rgba(255, 77, 79, 0.45);
   --text: #e2e8f0;
   --text-secondary: #94a3b8;
   --text-muted: #64748b;
   --text-faint: #475569;
-  --accent: #8b5cf6;
-  --accent-dark: #7c3aed;
-  --accent-glow: rgba(139, 92, 246, 0.25);
-  --accent-subtle: rgba(139, 92, 246, 0.08);
+  --accent: #ff4d4f;
+  --accent-dark: #d9363e;
+  --accent-glow: rgba(255, 77, 79, 0.25);
+  --accent-subtle: rgba(255, 77, 79, 0.08);
   --success: #34d399;
   --error: #f87171;
   --radius-sm: 6px;
@@ -64,9 +64,9 @@ body::before {
   position: fixed;
   inset: 0;
   background:
-    radial-gradient(ellipse at 15% 25%, rgba(99, 102, 241, 0.07) 0%, transparent 55%),
-    radial-gradient(ellipse at 85% 75%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
-    radial-gradient(ellipse at 50% 50%, rgba(30, 27, 75, 0.15) 0%, transparent 70%);
+    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%);
   pointer-events: none;
   z-index: 0;
   animation: bgPulse 25s ease-in-out infinite alternate;
@@ -105,15 +105,15 @@ body::before {
   align-items: center;
   gap: 10px;
 }
-.logo-icon {
-  width: 28px; height: 28px;
-  color: var(--accent);
-  filter: drop-shadow(0 0 6px var(--accent-glow));
+.logo-img {
+  height: 24px;
+  width: auto;
+  object-fit: contain;
 }
 .logo-text {
   font-size: 18px;
   font-weight: 700;
-  background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
+  background: linear-gradient(135deg, #ff9c6e, #ff4d4f);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -245,12 +245,12 @@ body::before {
   overflow: hidden;
 }
 #upload-area:hover {
-  border-color: rgba(139, 92, 246, 0.35);
+  border-color: rgba(255, 77, 79, 0.35);
   background: var(--accent-subtle);
 }
 #upload-area.drag-over {
   border-color: var(--accent);
-  background: rgba(139, 92, 246, 0.12);
+  background: rgba(255, 77, 79, 0.12);
   transform: scale(1.01);
 }
 #upload-area.has-image {
@@ -331,7 +331,7 @@ body::before {
   position: relative;
 }
 .example-thumb:hover {
-  border-color: rgba(139, 92, 246, 0.35);
+  border-color: rgba(255, 77, 79, 0.35);
   transform: scale(1.06);
   box-shadow: 0 4px 16px rgba(0,0,0,0.3);
 }
@@ -429,7 +429,7 @@ select {
 input[type="number"]:focus,
 select:focus {
   border-color: var(--border-focus);
-  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
+  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);
 }
 select {
   appearance: none;
@@ -482,7 +482,7 @@ input[type="range"]::-moz-range-thumb {
   width: 100%;
   padding: 13px 16px;
   margin-top: auto;
-  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
+  background: linear-gradient(135deg, #ff4d4f 0%, #d9363e 100%);
   border: none;
   border-radius: var(--radius-md);
   color: #fff;
@@ -511,7 +511,7 @@ input[type="range"]::-moz-range-thumb {
   transform: translateX(120%);
 }
 .btn-primary:hover:not(:disabled) {
-  box-shadow: 0 6px 24px rgba(139, 92, 246, 0.35), 0 0 0 1px rgba(139, 92, 246, 0.2);
+  box-shadow: 0 6px 24px rgba(255, 77, 79, 0.35), 0 0 0 1px rgba(255, 77, 79, 0.2);
   transform: translateY(-1px);
 }
 .btn-primary:active:not(:disabled) {
@@ -522,7 +522,7 @@ input[type="range"]::-moz-range-thumb {
   cursor: not-allowed;
 }
 .btn-primary.loading {
-  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
+  background: linear-gradient(135deg, #d9363e 0%, #ad2128 100%);
   pointer-events: none;
 }
 .btn-icon {
@@ -543,7 +543,7 @@ input[type="range"]::-moz-range-thumb {
   transition: box-shadow var(--transition-slow);
 }
 .viewer-wrap.active {
-  box-shadow: 0 0 40px rgba(139, 92, 246, 0.08), 0 0 80px rgba(99, 102, 241, 0.04);
+  box-shadow: 0 0 40px rgba(255, 77, 79, 0.08), 0 0 80px rgba(255, 120, 117, 0.04);
 }
 .viewer-placeholder {
   display: flex;
@@ -785,14 +785,8 @@ input[type="range"]::-moz-range-thumb {
      ===================================================================== -->
 <header id="app-header">
   <div class="header-left">
-    <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-      <path d="M12 2L3 7v10l9 5 9-5V7l-9-5z"/>
-      <path d="M12 22V12"/>
-      <path d="M3 7l9 5"/>
-      <path d="M21 7l-9 5"/>
-      <circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/>
-    </svg>
-    <span class="logo-text">TripoSplat</span>
+    <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>
   </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>