Remote: reboot / shutdown the Pi from the Output tab

Add POST /api/power/:action (reboot|shutdown) that runs `sudo systemctl
reboot|poweroff` (sudo is passwordless on the appliance), replying before the
host tears down. Two red buttons in the Output tab use a two-tap confirm to
avoid accidental power-offs.

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

public/css/mobile.css

@@ -35,6 +35,9 @@ button { cursor: pointer; }
 button:active { filter: brightness(1.3); }
 button.wide { width: 100%; margin-top: 10px; font-size: 15px; }
 #audio-src { width: 100%; }
+button.danger { border-color: rgba(255,120,120,.5); color: #ffb3b3; background: rgba(255,80,80,.10); }
+button.danger.armed { background: #c0392b; color: #fff; border-color: #c0392b; animation: pulse 1s infinite; }
+@keyframes pulse { 50% { filter: brightness(1.35); } }
 input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; padding: 0; height: 34px; border: none; }
 input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 4px; background: rgba(255,255,255,.14); }
 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); margin-top: -9px; box-shadow: 0 1px 4px rgba(0,0,0,.5); }

public/index.html

@@ -126,6 +126,10 @@
       </select>
       <button id="rec" class="wide">🔴 Avvia registrazione</button>
       <div id="rec-status" class="hint"></div>
+      <label class="lbl">Dispositivo</label>
+      <button id="pw-reboot" class="wide danger">🔄 Riavvia Raspberry</button>
+      <button id="pw-shutdown" class="wide danger">⏻ Spegni Raspberry</button>
+      <div id="pw-status" class="hint">Tocca due volte per confermare. Dopo lo spegnimento, per riaccendere stacca e riattacca l'alimentazione.</div>
     </section>
   </main>
 

public/js/control.js

@@ -576,6 +576,24 @@ function updateRec() {
   $('#rec').classList.toggle('recording', recOn);
 }
 
+// Power: reboot / shutdown the Pi. Two-tap confirm to avoid accidental taps.
+function armPower(btnId, action) {
+  const btn = $('#' + btnId); if (!btn) return;
+  const orig = btn.textContent; let armed = false, t = null;
+  btn.addEventListener('click', () => {
+    if (!armed) {
+      armed = true; btn.classList.add('armed'); btn.textContent = '⚠️ Tocca per confermare';
+      t = setTimeout(() => { armed = false; btn.classList.remove('armed'); btn.textContent = orig; }, 4000);
+      return;
+    }
+    clearTimeout(t); armed = false; btn.classList.remove('armed'); btn.textContent = orig;
+    $('#pw-status').textContent = action === 'reboot' ? '🔄 Riavvio in corso… il telecomando si riconnette da solo tra ~40s.' : '⏻ Spegnimento in corso… per riaccendere stacca e riattacca l\'alimentazione.';
+    fetch('/api/power/' + action, { method: 'POST' }).catch(() => {});
+  });
+}
+armPower('pw-reboot', 'reboot');
+armPower('pw-shutdown', 'shutdown');
+
 // ---- Reports ---------------------------------------------------------------
 function setMeter(id, v) { const e = $('#' + id); if (e) e.style.width = Math.min(100, (v || 0) * 100) + '%'; }
 djv.onReport((m) => {