timer-controller.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer Controller</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;600;700;800&family=Red+Hat+Text:wght@400;500;600&family=Red+Hat+Mono:wght@400;500&display=swap');
:root{--bg:#151515;--card:#1F1F1F;--border:#333;--red:#EE0000;--green:#00E676;--yellow:#FFD600;--white:#F0F0F0;--gray:#6A6E73;--gray-light:#D2D2D2}
body{font-family:'Red Hat Text',sans-serif;background:var(--bg);color:var(--white);min-height:100vh;padding:20px}
h1{font-family:'Red Hat Display',sans-serif;font-size:1.4rem;margin-bottom:4px}
h2{font-family:'Red Hat Display',sans-serif;font-size:1rem;color:var(--gray-light);margin-bottom:12px}

.controller{max-width:480px;margin:0 auto}
.header{text-align:center;padding:20px 0 24px;border-bottom:1px solid var(--border);margin-bottom:20px}
.header .dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;margin-right:6px}

/* SECTIONS */
.section{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}
.section-title{font-family:'Red Hat Display',sans-serif;font-size:.82rem;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}

/* BIG BUTTONS */
.big-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.big-btn{padding:18px;border-radius:10px;border:2px solid var(--border);background:var(--bg);color:var(--white);font-family:'Red Hat Display',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:all .15s;text-align:center}
.big-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.big-btn:active{transform:translateY(0)}
.big-btn.start{border-color:rgba(0,230,118,0.4);color:var(--green)}.big-btn.start:hover{background:rgba(0,230,118,0.1)}
.big-btn.pause{border-color:rgba(255,214,0,0.4);color:var(--yellow)}.big-btn.pause:hover{background:rgba(255,214,0,0.1)}
.big-btn.stop{border-color:rgba(238,0,0,0.4);color:var(--red)}.big-btn.stop:hover{background:rgba(238,0,0,0.1)}
.big-btn.reset{border-color:rgba(106,110,115,0.4);color:var(--gray-light)}.big-btn.reset:hover{background:rgba(106,110,115,0.1)}

/* PRESETS */
.preset-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.preset-btn{padding:12px 8px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--gray-light);font-family:'Red Hat Mono',monospace;font-size:.85rem;font-weight:500;cursor:pointer;text-align:center;transition:all .15s}
.preset-btn:hover{border-color:var(--red);color:var(--white)}
.preset-btn.active{border-color:var(--red);background:rgba(238,0,0,0.1);color:var(--red)}

/* CUSTOM TIME */
.custom-time{display:flex;gap:8px;align-items:center}
.time-input{width:70px;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--white);font-family:'Red Hat Mono',monospace;font-size:1.1rem;text-align:center;font-weight:700}
.time-input:focus{outline:none;border-color:var(--red)}
.time-label{font-size:.78rem;color:var(--gray)}
.set-btn{padding:10px 16px;border-radius:8px;border:1px solid var(--red);background:rgba(238,0,0,0.1);color:var(--red);font-family:'Red Hat Text',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer}
.set-btn:hover{background:rgba(238,0,0,0.2)}

/* ADJUST */
.adjust-row{display:flex;gap:8px;justify-content:center}
.adjust-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--gray-light);font-family:'Red Hat Mono',monospace;font-size:.9rem;cursor:pointer;transition:all .15s}
.adjust-btn:hover{border-color:var(--gray-light);color:var(--white)}

/* FADE CONFIG */
.fade-row{display:flex;align-items:center;gap:12px}
.fade-slider{flex:1;-webkit-appearance:none;height:6px;border-radius:3px;background:#333;outline:none}
.fade-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--red);cursor:pointer}
.fade-value{font-family:'Red Hat Mono',monospace;font-size:.9rem;color:var(--gray-light);min-width:40px;text-align:right}

/* STATUS */
.status-display{text-align:center;padding:8px;font-family:'Red Hat Mono',monospace;font-size:.8rem;color:var(--gray);border-top:1px solid var(--border);margin-top:8px;padding-top:12px}

/* MOBILE FRIENDLY */
@media(max-width:400px){.preset-row{grid-template-columns:repeat(3,1fr)}}
</style>
</head>
<body>
<div class="controller">
  <div class="header">
    <h1><span class="dot"></span> Timer Controller</h1>
    <p style="font-size:.82rem;color:var(--gray)">Control the display timer from this device</p>
  </div>

  <!-- MAIN CONTROLS -->
  <div class="section">
    <div class="section-title">Controls</div>
    <div class="big-btn-row">
      <button class="big-btn start" onclick="send('start')">&#9654; Start</button>
      <button class="big-btn pause" onclick="send('pause')">&#10074;&#10074; Pause</button>
    </div>
    <div class="big-btn-row">
      <button class="big-btn stop" onclick="send('stop')">&#9632; Stop</button>
      <button class="big-btn reset" onclick="send('reset')">&#8634; Reset</button>
    </div>
  </div>

  <!-- QUICK PRESETS -->
  <div class="section">
    <div class="section-title">Quick Presets</div>
    <div class="preset-row">
      <button class="preset-btn" onclick="setPreset(1,this)">1:00</button>
      <button class="preset-btn" onclick="setPreset(2,this)">2:00</button>
      <button class="preset-btn" onclick="setPreset(3,this)">3:00</button>
      <button class="preset-btn active" onclick="setPreset(5,this)">5:00</button>
      <button class="preset-btn" onclick="setPreset(10,this)">10:00</button>
    </div>
    <div class="preset-row">
      <button class="preset-btn" onclick="setPreset(15,this)">15:00</button>
      <button class="preset-btn" onclick="setPreset(20,this)">20:00</button>
      <button class="preset-btn" onclick="setPreset(30,this)">30:00</button>
      <button class="preset-btn" onclick="setPreset(45,this)">45:00</button>
      <button class="preset-btn" onclick="setPreset(60,this)">60:00</button>
    </div>
  </div>

  <!-- TOA LAUNCH PRESETS -->
  <div class="section">
    <div class="section-title">TOA Launch</div>
    <div class="preset-row" style="grid-template-columns:repeat(4,1fr)">
      <button class="preset-btn" onclick="setPreset(8,this)">8:00</button>
      <button class="preset-btn" onclick="setPreset(25,this)">25:00</button>
      <button class="preset-btn" onclick="setPreset(10,this)">10:00</button>
      <button class="preset-btn" onclick="setPreset(5,this)">5:00</button>
    </div>
  </div>

  <!-- CUSTOM TIME -->
  <div class="section">
    <div class="section-title">Custom Duration</div>
    <div class="custom-time">
      <input type="number" class="time-input" id="customMin" value="5" min="0" max="999">
      <span class="time-label">min</span>
      <input type="number" class="time-input" id="customSec" value="0" min="0" max="59">
      <span class="time-label">sec</span>
      <button class="set-btn" onclick="setCustom()">Set & Reset</button>
    </div>
  </div>

  <!-- ADJUST ON THE FLY -->
  <div class="section">
    <div class="section-title">Adjust Time</div>
    <div class="adjust-row">
      <button class="adjust-btn" onclick="send('adjust',{delta:-30})">-30s</button>
      <button class="adjust-btn" onclick="send('adjust',{delta:-60})">-1m</button>
      <button class="adjust-btn" onclick="send('adjust',{delta:60})">+1m</button>
      <button class="adjust-btn" onclick="send('adjust',{delta:30})">+30s</button>
    </div>
  </div>

  <!-- FADE CONFIG -->
  <div class="section">
    <div class="section-title">Color Fade Start</div>
    <p style="font-size:.78rem;color:var(--gray);margin-bottom:10px">When should the countdown start fading from green to red?</p>
    <div class="fade-row">
      <span style="font-size:.72rem;color:var(--gray)">50%</span>
      <input type="range" class="fade-slider" id="fadeSlider" min="50" max="95" value="75" oninput="updateFade()">
      <span style="font-size:.72rem;color:var(--gray)">95%</span>
      <span class="fade-value" id="fadeValue">75%</span>
    </div>
    <div style="display:flex;gap:4px;margin-top:10px;height:8px;border-radius:4px;overflow:hidden">
      <div style="flex:3;background:var(--green)"></div>
      <div style="flex:1;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red))"></div>
    </div>
    <p style="font-size:.68rem;color:var(--gray);margin-top:6px">Green until <span id="fadeLabel">75%</span> elapsed, then fades through yellow and orange to red.</p>
  </div>

  <!-- CONNECTION INFO -->
  <div class="section">
    <div class="section-title">How to Connect</div>
    <p style="font-size:.82rem;color:var(--gray-light);line-height:1.6;margin-bottom:12px">
      <strong>Same computer:</strong> Open both this controller and <code style="background:#252525;padding:2px 6px;border-radius:4px;font-size:.78rem">timer-display.html</code> in the same browser. They communicate instantly via BroadcastChannel.
    </p>
    <p style="font-size:.82rem;color:var(--gray-light);line-height:1.6;margin-bottom:12px">
      <strong>Different devices:</strong> Open both files on a shared web server (even <code style="background:#252525;padding:2px 6px;border-radius:4px;font-size:.78rem">python -m http.server</code> works). For true remote control across networks, add the WebSocket relay code (see architecture doc).
    </p>
    <p style="font-size:.82rem;color:var(--gray-light);line-height:1.6">
      <strong>Keyboard shortcuts</strong> (on the display): <code style="background:#252525;padding:2px 6px;border-radius:4px;font-size:.78rem">Space</code> = toggle, <code style="background:#252525;padding:2px 6px;border-radius:4px;font-size:.78rem">R</code> = reset, <code style="background:#252525;padding:2px 6px;border-radius:4px;font-size:.78rem">&#8593;/&#8595;</code> = adjust, <code style="background:#252525;padding:2px 6px;border-radius:4px;font-size:.78rem">F</code> = fullscreen
    </p>
    <div class="status-display" id="statusDisplay">
      Last command: none
    </div>
  </div>
</div>

<script>
// ===== BROADCASTCHANNEL (same browser) =====
const CHANNEL_NAME = 'session-timer-2026';
let bc = null;
try {
  bc = new BroadcastChannel(CHANNEL_NAME);
} catch(e) {}

// ===== WEBSOCKET (cross-device) =====
let ws = null;
let wsConnected = false;

function connectWS() {
  if (location.protocol === 'file:') return;
  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
  const wsUrl = protocol + '//' + location.host;
  try {
    ws = new WebSocket(wsUrl);
    ws.onopen = () => {
      wsConnected = true;
      document.querySelector('.dot').style.background = 'var(--green)';
    };
    ws.onclose = () => {
      wsConnected = false;
      document.querySelector('.dot').style.background = 'var(--yellow)';
      setTimeout(connectWS, 3000);
    };
    ws.onerror = () => {};
  } catch(e) {}
}
connectWS();

function send(action, extra) {
  const cmd = { action, ...extra };

  // Send via ONE channel only — prefer WebSocket (works cross-device),
  // fall back to BroadcastChannel when the WS isn't connected.
  // Sending on both would cause the display to receive every command twice.
  if (ws && wsConnected && ws.readyState === 1) {
    ws.send(JSON.stringify(cmd));
  } else if (bc) {
    bc.postMessage(cmd);
  }

  // Update status
  const via = wsConnected ? 'WebSocket' : (bc ? 'Broadcast' : 'Local');
  const label = action === 'set' ? `Set to ${extra.minutes}:00` :
                action === 'setSecs' ? `Set to ${Math.floor(extra.seconds/60)}:${String(extra.seconds%60).padStart(2,'0')}` :
                action === 'adjust' ? `Adjusted ${extra.delta > 0 ? '+' : ''}${extra.delta}s` :
                action === 'setFadeStart' ? `Fade start: ${extra.percent}%` :
                action.charAt(0).toUpperCase() + action.slice(1);
  document.getElementById('statusDisplay').textContent = `Sent via ${via}: ${label}`;
}

function setPreset(minutes, btn) {
  document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  send('set', { minutes });
  document.getElementById('customMin').value = minutes;
  document.getElementById('customSec').value = 0;
}

function setCustom() {
  const m = parseInt(document.getElementById('customMin').value) || 0;
  const s = parseInt(document.getElementById('customSec').value) || 0;
  const total = m * 60 + s;
  if (total < 10) { alert('Minimum 10 seconds'); return; }
  send('setSecs', { seconds: total });
  document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
}

function updateFade() {
  const val = document.getElementById('fadeSlider').value;
  document.getElementById('fadeValue').textContent = val + '%';
  document.getElementById('fadeLabel').textContent = val + '%';
  send('setFadeStart', { percent: parseInt(val) });
}
</script>
</body>
</html>