topology mode banner

src/routes/Vote.svelte

@@ -2,7 +2,7 @@
     import { onMount, onDestroy } from "svelte";
     import type { IViewer } from "./viewers/IViewer";
     import { createViewer } from "./viewers/ViewerFactory";
-    import { Cube, WatsonHealth3DPrintMesh } from "carbon-icons-svelte";
+    import { Cube, WatsonHealth3DPrintMesh, Information } from "carbon-icons-svelte";
     import { getConfig } from "./utils/getConfig";
 
     interface Data {
@@ -235,6 +235,12 @@
     </div>
     <h2 class="center-title">Which is better?</h2>
     <p class="center-subtitle">Use mouse/touch to change the view.</p>
+    {#if data.vote_type === "topology"}
+        <div class="topology-warning">
+            <Information size={20} class="topology-warning-icon" />
+            <span class="topology-warning-text">Topology Mode • Zoom in to see mesh details</span>
+        </div>
+    {/if}
     <div class="voting-container">
         <div bind:this={containerA} class="canvas-container">
             <div bind:this={overlayA} class="loading-overlay">

static/global.css

@@ -633,3 +633,29 @@ body {
 .dev-banner span {
     margin: 0;
 }
+
+/* Topology Warning Banner */
+.topology-warning {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background: rgba(56, 133, 224, 0.15);
+    border: 1px solid rgba(56, 133, 224, 0.3);
+    border-radius: 6px;
+    padding: 12px 16px;
+    margin: 16px 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #87ceeb;
+}
+
+.topology-warning-icon {
+    flex-shrink: 0;
+    color: #3885e0;
+}
+
+.topology-warning-text {
+    margin: 0;
+    text-align: center;
+}