Brian — Frontend & accessible UI

Original widget source shown as inert text. Arming is a UI simulation; no broker connection, market feed or order placement.

ที่มา: 05_brian_frontend_execution_widget.html
Source SHA-256: 70f7267a2fe3f8264efa01fcefcf08f1e09b049e2ddaee46a5a86f61de595428

Published excerpt/source viewer; original archived privately. Hash identifies source bytes, not authorship, endorsement or production acceptance.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brian — XpFirm Micro-Terminal Quick-Execution Widget</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace; }
  body { background: #07090E; color: #F1F5F9; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
  .widget { background: #0D111A; border: 1px solid #1B2333; border-radius: 8px; width: 380px; padding: 18px; box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
  .widget-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1B2333; padding-bottom: 10px; margin-bottom: 14px; }
  .tag { font-size: 10px; font-weight: 700; color: #D4AF37; letter-spacing: 1px; }
  .price { font-size: 20px; font-weight: 800; font-family: ui-monospace, monospace; color: #FFFFFF; }
  .legs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
  .leg-pill { background: #07090E; border: 1px solid #1B2333; border-radius: 4px; padding: 8px 4px; text-align: center; font-size: 10px; font-family: ui-monospace, monospace; }
  .leg-pill.active { border-color: #10B981; color: #10B981; background: rgba(16, 185, 129, 0.08); }
  .action-btn { width: 100%; background: #EF4444; color: #FFFFFF; font-weight: 800; font-size: 12px; border: none; border-radius: 6px; padding: 12px; cursor: pointer; letter-spacing: 1px; transition: all 0.2s; }
  .action-btn.cleared { background: #10B981; color: #07090E; }
  .status-text { font-size: 10px; text-align: center; color: #8492A6; margin-top: 10px; font-family: ui-monospace, monospace; }
</style>
</head>
<body>
<div class="widget">
  <div class="widget-head">
    <div>
      <span class="tag">XPFIRM QUICK WIDGET</span>
      <div style="font-size:12px; font-weight:700; color:#CBD5E1;">XAUUSD · 4-LEG LIMIT</div>
    </div>
    <div class="price" id="livePrice">2748.50</div>
  </div>
  <div style="font-size:11px; color:#8492A6; margin-bottom:6px;">Order Legs (1 Idea = 4 Equal Slices):</div>
  <div class="legs-grid">
    <div class="leg-pill active">L1: +300</div>
    <div class="leg-pill active">L2: +600</div>
    <div class="leg-pill active">L3: +900</div>
    <div class="leg-pill active">L4: +1200</div>
  </div>
  <button class="action-btn" id="execBtn" onclick="toggleSim()">LOCKED: FAIL-CLOSED GATE ACTIVE</button>
  <div class="status-text" id="statusDesc">All 12 Gates must pass before order can be sent.</div>
</div>
<script>
let armed = false;
function toggleSim() {
  armed = !armed;
  const btn = document.getElementById('execBtn');
  const desc = document.getElementById('statusDesc');
  if (armed) {
    btn.className = 'action-btn cleared';
    btn.textContent = 'TRANSMIT 4-LEG LIMIT (ARMED)';
    desc.textContent = '12/12 Gates verified. Simulation only — no broker connection.';
  } else {
    btn.className = 'action-btn';
    btn.textContent = 'LOCKED: FAIL-CLOSED GATE ACTIVE';
    desc.textContent = 'All 12 Gates must pass before order can be sent.';
  }
}
</script>
</body>
</html>