<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content"> <meta name="theme-color" content="#0d0f14"> <title>JumPHP Screen</title> <link rel="stylesheet" href="css/screen.css?v=0.1.1"></head><body> <!-- pairing / waiting: until the PC allows this device and the video arrives --> <section id="gate" class="gate"> <form id="pairForm" class="card" autocomplete="off"> <h1 data-t="title">Your computer's screen</h1> <p class="muted" data-t="hint">In the JumPHP IDE, click the “Screen on a phone” button (next to the menu), then scan its QR code or paste its link here.</p> <label><span data-t="device">Name of this device</span><input id="deviceName" maxlength="40" required></label> <label><span data-t="link">Link</span><input id="pairLink" inputmode="url" placeholder="https://…#r=…&k=…" spellcheck="false"></label> <p id="pairError" class="error" hidden></p> <button type="submit" data-t="connect">Connect</button> </form> <div id="wait" class="card" hidden> <div class="spinner" aria-hidden="true"></div> <p id="waitText"></p> <button id="retry" class="ghost" hidden data-t="retry">Retry</button> </div> </section> <main id="stage" hidden> <div id="view"><video id="video" autoplay playsinline muted disablepictureinpicture></video><div id="cursor" hidden></div></div> <div id="stats" hidden></div> <input id="kbd" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" enterkeyhint="send" aria-label="keyboard"> <div id="keys" hidden> <div class="row"> <button data-k="Escape">Esc</button><button data-k="Tab">Tab</button> <button data-mod="Control_L" class="mod">Ctrl</button><button data-mod="Alt_L" class="mod">Alt</button><button data-mod="Shift_L" class="mod">Shift</button><button data-mod="Super_L" class="mod">⊞</button> <button data-k="Left">←</button><button data-k="Up">↑</button><button data-k="Down">↓</button><button data-k="Right">→</button> <button data-k="Home">Home</button><button data-k="End">End</button><button data-k="Prior">PgUp</button><button data-k="Next">PgDn</button> <button data-k="BackSpace">⌫</button><button data-k="Delete">Del</button><button data-k="Return">⏎</button> <button data-combo="Control_L+c">Ctrl+C</button><button data-combo="Control_L+v">Ctrl+V</button><button data-combo="Control_L+x">Ctrl+X</button><button data-combo="Control_L+z">Ctrl+Z</button><button data-combo="Control_L+a">Ctrl+A</button><button data-combo="Control_L+s">Ctrl+S</button> <button data-combo="Alt_L+Tab">Alt+Tab</button> </div> <div class="row"> <button data-k="F1">F1</button><button data-k="F2">F2</button><button data-k="F3">F3</button><button data-k="F4">F4</button><button data-k="F5">F5</button><button data-k="F6">F6</button> <button data-k="F7">F7</button><button data-k="F8">F8</button><button data-k="F9">F9</button><button data-k="F10">F10</button><button data-k="F11">F11</button><button data-k="F12">F12</button> <button data-k="Insert">Ins</button><button data-k="Print">PrtSc</button><button data-combo="Control_L+Shift_L+t">Ctrl+Shift+T</button> <button data-b="2">🖱 middle</button><button data-b="3">🖱 right</button> </div> </div> <nav id="bar"> <button id="menuBtn" class="round" aria-label="menu">☰</button> <div id="tools" hidden> <button id="modeBtn" data-t="touchpad">Touchpad</button> <button id="kbdBtn">⌨</button> <button id="keysBtn">Fn</button> <button id="fitBtn" data-t="fit">Fit</button> <button id="oneBtn">1:1</button> <select id="quality" aria-label="quality"> <option value="1500">1.5 Mb/s</option><option value="4000">4 Mb/s</option><option value="8000" selected>8 Mb/s</option><option value="16000">16 Mb/s</option><option value="30000">30 Mb/s</option> </select> <button id="statsBtn">📈</button> <button id="fullBtn">⛶</button> <button id="byeBtn" class="danger" data-t="disconnect">Disconnect</button> </div> </nav> <div id="toast" hidden></div> </main> <script type="module" src="js/app.js?v=0.1.1"></script></body></html>