Spaces:

abc1181
/

vscode

Paused

App Files Files Community

abc1181 commited on May 5

Commit

3f7f1bb

verified ·

1 Parent(s): 56a7b7f

Create static/browser.html

Browse files

Files changed (1) hide show

static/browser.html +302 -0

static/browser.html ADDED Viewed

	@@ -0,0 +1,302 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Browser</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#dee1e6;
+  --tab-active:#ffffff;
+  --blue:#1a73e8;
+  --text:#202124;
+  --icon:#5f6368;
+  --hover:rgba(0,0,0,0.08);
+  --green:#188038;
+}
+html,body{
+  height:100vh;overflow:hidden;
+  font-family:-apple-system,'Segoe UI',Roboto,sans-serif;
+  font-size:13px;background:#202124;
+  display:flex;flex-direction:column;
+}
+/* ── Tab strip ── */
+#tab-strip{
+  display:flex;align-items:flex-end;
+  background:var(--bg);
+  padding:6px 0 0 6px;height:36px;
+  -webkit-app-region:drag;user-select:none;
+}
+.tab{
+  display:flex;align-items:center;gap:6px;
+  padding:0 8px 0 10px;height:28px;
+  background:var(--tab-active);
+  border-radius:8px 8px 0 0;
+  min-width:120px;max-width:200px;flex:0 0 auto;
+  position:relative;cursor:default;
+}
+.tab-fav{width:16px;height:16px;border-radius:2px;flex-shrink:0}
+.tab-lbl{
+  flex:1;overflow:hidden;white-space:nowrap;
+  text-overflow:ellipsis;color:var(--text);font-size:12px;
+}
+.tab-x{
+  width:16px;height:16px;border:none;background:transparent;
+  border-radius:50%;cursor:pointer;color:var(--icon);
+  font-size:16px;line-height:1;display:flex;
+  align-items:center;justify-content:center;flex-shrink:0;
+}
+.tab-x:hover{background:rgba(0,0,0,0.12)}
+/* ── Toolbar ── */
+#toolbar{
+  display:flex;align-items:center;gap:2px;
+  background:var(--bg);padding:4px 8px;height:40px;
+}
+.nb{
+  width:32px;height:32px;border:none;background:transparent;
+  border-radius:50%;cursor:pointer;display:flex;
+  align-items:center;justify-content:center;
+  color:var(--icon);flex-shrink:0;
+}
+.nb:hover:not([disabled]){background:var(--hover)}
+.nb[disabled]{opacity:.38;cursor:default}
+.nb svg{width:18px;height:18px;fill:var(--icon)}
+/* Omnibox */
+#omni{
+  flex:1;display:flex;align-items:center;
+  background:#fff;border-radius:100px;
+  height:32px;padding:0 10px;gap:6px;
+  border:1.5px solid transparent;
+  transition:border-color .15s,box-shadow .15s;
+}
+#omni:focus-within{
+  border-color:var(--blue);
+  box-shadow:0 0 0 3px rgba(26,115,232,.2);
+}
+#lock{display:flex;align-items:center;flex-shrink:0}
+#lock svg{width:13px;height:13px;fill:var(--green)}
+#url{
+  flex:1;border:none;outline:none;
+  font-size:13px;color:var(--text);
+  background:transparent;min-width:0;
+}
+#star{flex-shrink:0;cursor:pointer;color:var(--icon);line-height:0}
+#star svg{width:16px;height:16px;fill:var(--icon)}
+/* ── Viewport ── */
+#vp-wrap{
+  flex:1;background:#fff;position:relative;overflow:hidden;
+}
+#vp{
+  width:100%;height:100%;display:block;
+  cursor:default;outline:none;
+}
+/* Loading */
+#overlay{
+  position:absolute;inset:0;background:#fff;
+  display:flex;flex-direction:column;
+  align-items:center;justify-content:center;
+  gap:14px;z-index:9;transition:opacity .3s;
+}
+#overlay.gone{opacity:0;pointer-events:none}
+.spin{
+  width:36px;height:36px;border:3px solid #dee1e6;
+  border-top-color:var(--blue);border-radius:50%;
+  animation:sp .7s linear infinite;
+}
+@keyframes sp{to{transform:rotate(360deg)}}
+/* Status */
+#status{
+  position:absolute;bottom:8px;right:10px;
+  background:rgba(0,0,0,.5);color:#fff;
+  font-size:11px;padding:2px 8px;border-radius:10px;
+  z-index:10;pointer-events:none;transition:opacity .5s;
+}
+#status.ok{opacity:0}
+</style>
+</head>
+<body>
+<!-- Tab strip -->
+<div id="tab-strip">
+  <div class="tab">
+    <img class="tab-fav" id="fav"
+      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23bbb'/%3E%3C/svg%3E">
+    <span class="tab-lbl" id="t-title">New Tab</span>
+    <button class="tab-x">✕</button>
+  </div>
+</div>
+<!-- Toolbar -->
+<div id="toolbar">
+  <!-- Back -->
+  <button class="nb" id="b-back" disabled title="Go back">
+    <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+  </button>
+  <!-- Forward -->
+  <button class="nb" id="b-fwd" disabled title="Go forward">
+    <svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
+  </button>
+  <!-- Reload -->
+  <button class="nb" id="b-rel" title="Reload">
+    <svg viewBox="0 0 24 24"><path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+  </button>
+  <!-- Omnibox -->
+  <div id="omni">
+    <span id="lock">
+      <svg viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>
+    </span>
+    <input id="url" type="text" placeholder="Search or type a URL"
+           autocomplete="off" spellcheck="false">
+    <span id="star">
+      <svg viewBox="0 0 24 24"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>
+    </span>
+  </div>
+  <!-- Menu -->
+  <button class="nb" title="Chrome menu" style="margin-left:2px">
+    <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
+  </button>
+</div>
+<!-- Viewport -->
+<div id="vp-wrap">
+  <canvas id="vp" tabindex="0"></canvas>
+  <div id="overlay">
+    <div class="spin"></div>
+    <span style="color:#5f6368">Connecting to browser…</span>
+  </div>
+  <div id="status">●</div>
+</div>
+<script>
+const vp      = document.getElementById('vp');
+const ctx     = vp.getContext('2d');
+const urlIn   = document.getElementById('url');
+const tTitle  = document.getElementById('t-title');
+const fav     = document.getElementById('fav');
+const overlay = document.getElementById('overlay');
+const statusEl= document.getElementById('status');
+const bBack   = document.getElementById('b-back');
+const bFwd    = document.getElementById('b-fwd');
+const bRel    = document.getElementById('b-rel');
+const lock    = document.getElementById('lock');
+const BW = 1280, BH = 800;
+// ── WebSocket ─────────────────────────────────────────────────────
+const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+const WS    = `${proto}//${location.host}/browser/ws`;
+let ws = null;
+function setStatus(msg, ok=false){
+  statusEl.textContent = msg;
+  statusEl.className   = ok ? 'ok' : '';
+}
+function connect(){
+  ws = new WebSocket(WS);
+  ws.onopen  = () => { setStatus('●', true); overlay.classList.add('gone'); };
+  ws.onclose = () => { setStatus('Reconnecting…'); setTimeout(connect, 2000); };
+  ws.onerror = () => setStatus('Error');
+  ws.onmessage = async ({data}) => {
+    const msg = JSON.parse(data);
+    if (msg.type === 'frame'){
+      const ab  = Uint8Array.from(atob(msg.data), c=>c.charCodeAt(0));
+      const bmp = await createImageBitmap(new Blob([ab],{type:'image/jpeg'}));
+      const cw  = vp.parentElement.clientWidth;
+      const ch  = vp.parentElement.clientHeight;
+      if (vp.width!==cw) vp.width=cw;
+      if (vp.height!==ch) vp.height=ch;
+      ctx.drawImage(bmp, 0, 0, cw, ch);
+      bmp.close();
+    } else if (msg.type === 'nav'){
+      urlIn.value = msg.url||'';
+      document.title = tTitle.textContent = msg.title||'New Tab';
+      // favicon
+      try {
+        const u = new URL(msg.url);
+        fav.src = u.origin+'/favicon.ico';
+        fav.onerror = () => fav.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23bbb'/%3E%3C/svg%3E";
+      } catch{}
+      // lock colour
+      const secure = msg.url?.startsWith('https');
+      lock.style.color = secure ? '#188038' : '#5f6368';
+      lock.querySelector('svg').style.fill = lock.style.color;
+    }
+  };
+}
+const send = obj => ws?.readyState===1 && ws.send(JSON.stringify(obj));
+// ── Coords ────────────────────────────────────────────────────────
+const coord = e => {
+  const r = vp.getBoundingClientRect();
+  return {
+    x: Math.round((e.clientX-r.left) * (BW/r.width)),
+    y: Math.round((e.clientY-r.top)  * (BH/r.height))
+  };
+};
+// ── Mouse ─────────────────────────────────────────────────────────
+vp.onmousedown  = e => { vp.focus(); send({type:'mousedown', ...coord(e)}); };
+vp.onmouseup    = e => send({type:'mouseup',   ...coord(e)});
+vp.onclick      = e => send({type:'click',     ...coord(e)});
+vp.ondblclick   = e => send({type:'dblclick',  ...coord(e)});
+vp.onmousemove  = e => send({type:'mousemove', ...coord(e)});
+vp.onwheel      = e => { e.preventDefault(); send({type:'wheel',dx:e.deltaX,dy:e.deltaY}); };
+vp.oncontextmenu= e => e.preventDefault();
+// ── Keyboard ──────────────────────────────────────────────────────
+const SPECIALS = new Set([
+  'Enter','Backspace','Delete','Tab','Escape',
+  'ArrowLeft','ArrowRight','ArrowUp','ArrowDown',
+  'Home','End','PageUp','PageDown',
+  'F1','F2','F3','F4','F5','F6','F7','F8','F9','F10','F11','F12',
+  'Insert','CapsLock'
+]);
+vp.addEventListener('keydown', e => {
+  e.preventDefault();
+  const k = e.key;
+  if (e.ctrlKey || e.metaKey || e.altKey || SPECIALS.has(k)){
+    send({type:'keydown', key:k,
+          ctrl:e.ctrlKey, shift:e.shiftKey, alt:e.altKey, meta:e.metaKey});
+  } else if (k.length===1){
+    send({type:'type', text:k});
+  }
+});
+// ── URL bar ───��───────────────────────────────────────────────────
+urlIn.addEventListener('keydown', e => {
+  if (e.key==='Enter'){
+    send({type:'navigate', url:urlIn.value.trim()});
+    vp.focus();
+  }
+  e.stopPropagation();
+});
+urlIn.onclick = e => e.stopPropagation();
+// ── Nav buttons ───────────────────────────────────────────────────
+bBack.onclick = () => send({type:'back'});
+bFwd.onclick  = () => send({type:'forward'});
+bRel.onclick  = () => send({type:'reload'});
+// ── Resize ────────────────────────────────────────────────────────
+new ResizeObserver(() => {
+  vp.width  = vp.parentElement.clientWidth;
+  vp.height = vp.parentElement.clientHeight;
+}).observe(vp.parentElement);
+connect();
+</script>
+</body>
+</html>