feat(pose_3d): markup HTML + CSS della tab

web/index.html

@@ -5,6 +5,7 @@
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <title>presa-mano</title>
 <link rel="stylesheet" href="/static/style.css" />
+  <link rel="stylesheet" href="/static/pose_3d.css">
 </head>
 <body>
 <header>
@@ -17,6 +18,7 @@
     <button class="tab" data-tab="grasp">Cerca modello</button>
     <button class="tab" data-tab="view3d">Vista 3D</button>
     <button class="tab" data-tab="right-arm">Braccio DX</button>
+    <button class="tab" data-tab="pose-3d">Pose 3D</button>
     <button class="tab" data-tab="ee">Movimento EE</button>
   </nav>
   <div class="status-strip" id="statusStrip"></div>
@@ -465,6 +467,77 @@
   </div>
 </section>
 
+<!-- ============================== POSE 3D ============================== -->
+<section class="panel" id="tab-pose-3d">
+  <div class="p3-layout">
+    <div class="p3-viewport">
+      <canvas id="p3Canvas"></canvas>
+      <div class="p3-mode-badge" id="p3ModeBadge">Editor</div>
+      <div class="p3-help">click polso = seleziona · gizmo: T sposta / R ruota · drag = muovi · orbit = wheel/drag fondo · pan = shift+drag</div>
+    </div>
+    <aside class="p3-sidebar">
+      <div class="p3-section">
+        <h3>Modalità</h3>
+        <div class="p3-row">
+          <label><input type="radio" name="p3Mode" value="editor" checked> Editor (simulato)</label>
+          <label><input type="radio" name="p3Mode" value="jog"> Jog (move reale)</label>
+        </div>
+        <label class="p3-check"><input type="checkbox" id="p3Precise" checked> Precise (controllo accurato)</label>
+      </div>
+
+      <div class="p3-section">
+        <h3>Polso attivo</h3>
+        <div class="p3-row">
+          <label><input type="radio" name="p3Side" value="right" checked> Destro</label>
+          <label><input type="radio" name="p3Side" value="left"> Sinistro</label>
+        </div>
+        <div class="p3-row">
+          <label><input type="radio" name="p3Gizmo" value="translate" checked> T sposta</label>
+          <label><input type="radio" name="p3Gizmo" value="rotate"> R ruota</label>
+        </div>
+      </div>
+
+      <div class="p3-section">
+        <h3>Posa target</h3>
+        <div class="p3-readout">
+          <div>X <span id="p3X">—</span> mm</div>
+          <div>Y <span id="p3Y">—</span> mm</div>
+          <div>Z <span id="p3Z">—</span> mm</div>
+          <div>R <span id="p3R">—</span>°</div>
+          <div>P <span id="p3P">—</span>°</div>
+          <div>W <span id="p3W">—</span>°</div>
+        </div>
+        <div class="p3-status" id="p3Status">— polso fermo</div>
+        <div class="p3-row" id="p3EditorActions">
+          <button id="p3ApplyBtn">Applica (Editor)</button>
+          <button id="p3CancelBtn">Annulla modifica</button>
+        </div>
+      </div>
+
+      <div class="p3-section">
+        <h3>Pose salvate</h3>
+        <div class="p3-row">
+          <select id="p3PoseSelect"><option value="">(seleziona)</option></select>
+        </div>
+        <div class="p3-row">
+          <button id="p3PoseGoBtn">Vai</button>
+          <input type="text" id="p3PoseName" placeholder="nome" maxlength="40">
+          <button id="p3PoseSaveBtn">Salva</button>
+          <button id="p3PoseDelBtn">✕</button>
+        </div>
+      </div>
+
+      <div class="p3-section">
+        <button id="p3UnlockBtn">Sblocca braccia</button>
+      </div>
+
+      <div class="p3-section" id="p3ErrorBox" style="display:none">
+        <div class="p3-error" id="p3ErrorText"></div>
+      </div>
+    </aside>
+  </div>
+</section>
+
 <!-- ============================== EE ============================== -->
 <section class="panel" id="tab-ee">
   <div class="grid-2">
@@ -527,5 +600,6 @@
 <script src="/static/app.js"></script>
 <script type="module" src="/static/work_plane.js"></script>
 <script type="module" src="/static/right_arm.js"></script>
+<script type="module" src="/static/pose_3d.js"></script>
 </body>
 </html>