teleopSample/index.html

<!doctype html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Teleop Sample</title>
<style>
:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:#07090d;color:#e6e8ee;font:14px/1.5 -apple-system,"Helvetica Neue",Arial,"PingFang SC",sans-serif}
.wrap{display:flex;height:100vh;overflow:hidden}
.side{width:296px;flex:0 0 296px;background:#0b0e13;border-right:1px solid #1c2028;overflow-y:auto}
.side .st{display:flex;align-items:baseline;gap:9px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#8890a0;padding:15px 15px 8px}
.side .st .back{text-transform:none;letter-spacing:0;font-size:12px;color:#6f92c8;text-decoration:none;white-space:nowrap;flex-shrink:0}
.side .st .back:hover{text-decoration:underline}
.cat{border-top:1px solid #14181f}
.cat > .ch{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 15px;cursor:pointer;background:#0e1219}
.cat > .ch:hover{background:#12151c}
.cat > .ch .ct{font-size:12px;font-weight:700;letter-spacing:.02em}
.cat > .ch .cc{font-size:10.5px;color:#6f7787;flex-shrink:0}
.cat > .ch .ct::before{content:"\25B8";color:#6f7787;display:inline-block;width:14px}
.cat.open > .ch .ct::before{content:"\25BE"}
.cbody{display:none}.cat.open .cbody{display:block}
.leaf{padding:9px 12px 9px 29px;cursor:pointer;border-left:3px solid transparent}
.leaf:hover{background:#12151c}
.leaf.on{background:#152036;border-left-color:#6f9fe0}
.leaf .lt{font-size:12.5px;font-weight:600}
.leaf .lm{font-size:10.5px;color:#7f8896;margin-top:2px;display:flex;gap:7px;align-items:center}
.rig{font:9.5px ui-monospace,monospace;color:#6f92c8;background:#12151c;border:1px solid #1c2028;border-radius:4px;padding:0 4px}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.bar{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid #1c2028;background:#0b0e13;min-height:44px}
.bar .title{font-size:13px;color:#c7ccd6}.bar .title b{color:#e6e8ee}
iframe{flex:1;width:100%;border:0;background:#07090d}
.empty{margin:auto;color:#6f7787;font-size:13px}
</style></head><body>
<div class="wrap">
  <nav class="side">
    <div class="st"><a class="back" href="../index.html">&larr; all datasets</a><span>Teleop Sample &mdash; 22 episodes</span></div>
    <div id="nav"></div>
  </nav>
  <div class="main">
    <div class="bar" id="bar"><span class="empty">select an episode on the left</span></div>
    <iframe id="stage" allow="autoplay" src="about:blank"></iframe>
  </div>
</div>
<script id="D" type="application/json">[["Memory module insertion  ·  Faber U", "Faber U", [{"label": "episode 0", "hash": "mem_ep0", "src": "mem_ep0.html", "dur": 25.63, "spans": 4}, {"label": "episode 1", "hash": "mem_ep1", "src": "mem_ep1.html", "dur": 36.8, "spans": 4}]], ["Place drink on coaster  ·  Faber U", "Faber U", [{"label": "episode 0", "hash": "drink_ep0", "src": "drink_ep0.html", "dur": 22.53, "spans": 3}, {"label": "episode 1", "hash": "drink_ep1", "src": "drink_ep1.html", "dur": 18.23, "spans": 3}]], ["Sort garment bags  ·  Faber U", "Faber U", [{"label": "episode 0", "hash": "sort_ep0", "src": "sort_ep0.html", "dur": 36.77, "spans": 16}, {"label": "episode 1", "hash": "sort_ep1", "src": "sort_ep1.html", "dur": 31.2, "spans": 16}]], ["Wipe table with sponge  ·  Faber U", "Faber U", [{"label": "episode 0", "hash": "wipe_ep0", "src": "wipe_ep0.html", "dur": 24.33, "spans": 3}, {"label": "episode 1", "hash": "wipe_ep1", "src": "wipe_ep1.html", "dur": 26.47, "spans": 3}]], ["Pick up the water bottle and put it in the basket  ·  Futurist", "Futurist", [{"label": "episode 0", "hash": "legacy-ep0", "src": "https://faradayfuture-sampleviewer.static.hf.space/teleopSample/ep0/viewer.html", "dur": 18.2, "spans": 3}, {"label": "episode 1", "hash": "legacy-ep1", "src": "https://faradayfuture-sampleviewer.static.hf.space/teleopSample/ep1/viewer.html", "dur": 18.8, "spans": 3}, {"label": "episode 2", "hash": "legacy-ep2", "src": "https://faradayfuture-sampleviewer.static.hf.space/teleopSample/ep2/viewer.html", "dur": 18.7, "spans": 3}, {"label": "episode 3", "hash": "legacy-ep3", "src": "https://faradayfuture-sampleviewer.static.hf.space/teleopSample/ep3/viewer.html", "dur": 20.5, "spans": 3}, {"label": "episode 4", "hash": "legacy-ep4", "src": "https://faradayfuture-sampleviewer.static.hf.space/teleopSample/ep4/viewer.html", "dur": 22.4, "spans": 3}, {"label": "episode 5", "hash": "legacy-ep5", "src": "https://faradayfuture-sampleviewer.static.hf.space/teleopSample/ep5/viewer.html", "dur": 18.4, "spans": 3}]], ["Place the water bottle into the white plastic tray on the checkout counter  ·  Faber U", "Faber U", [{"label": "episode 0", "hash": "20260707052527", "src": "faberU/t2_water_bottle_into_steel_tray/20260707052527/viewer.html", "dur": 11.0, "spans": 7}, {"label": "episode 1", "hash": "20260707052609", "src": "faberU/t2_water_bottle_into_steel_tray/20260707052609/viewer.html", "dur": 11.6, "spans": 7}]], ["Place the juice bottle onto the patterned plate  ·  Faber U", "Faber U", [{"label": "episode 0", "hash": "20260724050827", "src": "faberU/t3_juice_bottle_onto_plate/20260724050827/viewer.html", "dur": 10.1, "spans": 8}, {"label": "episode 1", "hash": "20260724050737", "src": "faberU/t3_juice_bottle_onto_plate/20260724050737/viewer.html", "dur": 9.6, "spans": 8}]], ["Place the juice bottle into the black tray  ·  Faber U", "Faber U", [{"label": "episode 0", "hash": "20260728075709", "src": "faberU/t4_juice_bottle_into_black_tray/20260728075709/viewer.html", "dur": 5.9, "spans": 7}, {"label": "episode 1", "hash": "20260728080339", "src": "faberU/t4_juice_bottle_into_black_tray/20260728080339/viewer.html", "dur": 8.0, "spans": 7}]], ["Pick up the green-tea bottle and lift it  ·  Faber U", "Faber U", [{"label": "episode 0", "hash": "20260730045152", "src": "faberU/t6_pick_up_green_tea_bottle/20260730045152/viewer.html", "dur": 9.9, "spans": 4}, {"label": "episode 1", "hash": "20260730045050", "src": "faberU/t6_pick_up_green_tea_bottle/20260730045050/viewer.html", "dur": 8.0, "spans": 5}]]]</script>
<script>
const TREE = JSON.parse(document.getElementById('D').textContent);
const esc = s => (s||'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));

function build(){
  const box = document.getElementById('nav');
  TREE.forEach(([cat, rig, leaves], ci)=>{
    const c = document.createElement('div'); c.className = 'cat' + (ci===0?' open':'');
    c.innerHTML = `<div class="ch"><span class="ct">${esc(cat)}</span><span class="cc">${leaves.length}</span></div><div class="cbody"></div>`;
    c.querySelector('.ch').onclick = ()=>c.classList.toggle('open');
    const body = c.querySelector('.cbody');
    leaves.forEach(m=>{
      const el = document.createElement('div'); el.className = 'leaf';
      el.innerHTML = `<div class="lt">${esc(m.label)}</div>
        <div class="lm"><span class="rig">${esc(rig)}</span>${m.dur.toFixed(0)}s · ${m.spans} steps</div>`;
      el.onclick = ()=>go(m.hash);
      el._hash = m.hash; el._m = m; el._cat = cat;
      body.appendChild(el);
    });
    box.appendChild(c);
  });
}
function openLeaf(el){
  document.querySelectorAll('.leaf.on').forEach(x=>x.classList.remove('on'));
  el.classList.add('on');
  el.closest('.cat').classList.add('open');
  el.scrollIntoView({block:'nearest'});
  const m = el._m;
  document.getElementById('stage').src = m.src;
  document.getElementById('bar').innerHTML =
    `<span class="title"><b>${esc(el._cat)}</b> &middot; ${esc(m.label)}</span>`;
}
function go(hash){ if(location.hash.slice(1)===hash) route(); else location.hash = hash; }
function route(){
  const h = decodeURIComponent(location.hash.slice(1));
  let el = [...document.querySelectorAll('.leaf')].find(x=>x._hash===h)
        || document.querySelector('.cat.open .leaf') || document.querySelector('.leaf');
  if(el) openLeaf(el);
}
window.addEventListener('hashchange', route);
build(); route();
</script>
</body></html>