<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content"> <meta name="theme-color" content="#14161c"> <title>JumPHP IDE Remote</title> <link rel="stylesheet" href="css/shell.css"> <link rel="stylesheet" href="css/views.css"></head><body> <header id="bar"> <span id="dot" class="dot" data-state="idle"></span> <div class="title"><strong id="project">JumPHP IDE</strong><small id="status"></small></div> <span id="device" class="device"></span> <button id="disconnect" class="ghost" hidden>Disconnect</button> </header> <!-- pairing / waiting / denied: shown over the panels until the host answers welcome --> <section id="gate" class="gate"> <form id="pairForm" class="card" autocomplete="off"> <h1 id="pairTitle">Connect to your IDE</h1> <p id="pairHint" class="muted"></p> <label><span id="deviceLabel">Name of this device</span><input id="deviceName" maxlength="40" required></label> <label><input id="pairLink" inputmode="url" placeholder="https://…#r=…&k=…" spellcheck="false"></label> <p id="pairError" class="error" hidden></p> <button id="pairButton" type="submit">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>Retry</button> </div> </section> <main id="panels" hidden> <nav id="tabs" role="tablist"></nav> <div id="views"> <!-- one container per panel id: the views fill them (js/views/*.js) --> <section id="panel-claude" class="panel" role="tabpanel" hidden></section> <section id="panel-terminal" class="panel" role="tabpanel" hidden></section> <section id="panel-files" class="panel" role="tabpanel" hidden></section> </div> </main> <script type="module" src="js/app.js"></script> <script type="module" src="js/views/claude.js"></script> <script type="module" src="js/views/terminal.js"></script> <script type="module" src="js/views/files.js"></script></body></html>