Card hover affordance: dim thumbnail + centered play triangle on episode/demo cards

egoSample/index.html

@@ -7,6 +7,11 @@ header{padding:22px 26px 6px}h1{margin:4px 0 4px;font-size:22px}.sub{color:#9aa1
 .card{background:#12151c;border:1px solid #232733;border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
 .card:hover{border-color:#3a4a6a;transform:translateY(-2px)}
 .card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#000;display:block}
+.card .ph{position:relative;display:block;line-height:0}
+.card .ph::after{content:"";position:absolute;inset:0;background:rgba(8,10,15,.30);opacity:0;transition:opacity .16s ease;pointer-events:none}
+.card .pi{position:absolute;left:50%;top:50%;width:54px;height:54px;opacity:0;pointer-events:none;background:rgba(255,255,255,.95);clip-path:polygon(18% 3%,18% 97%,93% 50%);filter:drop-shadow(0 2px 12px rgba(0,0,0,.6));transform:translate(-50%,-50%) scale(.86);transition:opacity .16s ease,transform .16s ease}
+.card:hover .ph::after{opacity:1}
+.card:hover .pi{opacity:1;transform:translate(-50%,-50%) scale(1)}
 .card .m{padding:11px 13px 13px}.card .t{font-size:15px;margin:0 0 7px}
 .card .r{display:flex;align-items:center;gap:10px;font-size:12px;color:#9aa1ad}
 .chip{background:#1b2740;color:#7fb2ff;border-radius:5px;padding:2px 8px;font-size:11px;font-family:ui-monospace,monospace}
@@ -14,9 +19,9 @@ header{padding:22px 26px 6px}h1{margin:4px 0 4px;font-size:22px}.sub{color:#9aa1
 </style></head><body>
 <header><a class="back" href="../index.html">&larr; all datasets</a><h1>Ego Sample</h1>
 <div class="sub">6 episodes &middot; PICO first-person ego &middot; stereo fisheye + depth + 3D hand/head pose</div></header>
-<div class="grid"><a class="card" href="demo02/viewer.html"><img src="demo02/thumb.jpg" alt="demo02"><div class="m"><div class="t">demo02 &middot; Organizing Refrigerator Items</div><div class="r"><span class="chip">HOME-ORGANIZE</span><span>41.7s</span></div></div></a>
-<a class="card" href="demo05/viewer.html"><img src="demo05/thumb.jpg" alt="demo05"><div class="m"><div class="t">demo05 &middot; Organizing Fan Power Cord</div><div class="r"><span class="chip">STORAGE-BOX</span><span>72.5s</span></div></div></a>
-<a class="card" href="demo07/viewer.html"><img src="demo07/thumb.jpg" alt="demo07"><div class="m"><div class="t">demo07 &middot; Dicing Watermelon For Storage</div><div class="r"><span class="chip">CHOP-CUT</span><span>373.0s</span></div></div></a>
-<a class="card" href="demo08/viewer.html"><img src="demo08/thumb.jpg" alt="demo08"><div class="m"><div class="t">demo08 &middot; Wiping Office Desk Surface</div><div class="r"><span class="chip">OFFICE-CLEAN</span><span>85.8s</span></div></div></a>
-<a class="card" href="demo09/viewer.html"><img src="demo09/thumb.jpg" alt="demo09"><div class="m"><div class="t">demo09 &middot; Arranging Fruits on Retail Shelf</div><div class="r"><span class="chip">RETAIL-SHELF</span><span>55.0s</span></div></div></a>
-<a class="card" href="demo10/viewer.html"><img src="demo10/thumb.jpg" alt="demo10"><div class="m"><div class="t">demo10 &middot; Trimming Threads From Garment</div><div class="r"><span class="chip">MFG-SEW</span><span>22.5s</span></div></div></a></div></body></html>
+<div class="grid"><a class="card" href="demo02/viewer.html"><div class="ph"><img src="demo02/thumb.jpg" alt="demo02"><span class="pi"></span></div><div class="m"><div class="t">demo02 &middot; Organizing Refrigerator Items</div><div class="r"><span class="chip">HOME-ORGANIZE</span><span>41.7s</span></div></div></a>
+<a class="card" href="demo05/viewer.html"><div class="ph"><img src="demo05/thumb.jpg" alt="demo05"><span class="pi"></span></div><div class="m"><div class="t">demo05 &middot; Organizing Fan Power Cord</div><div class="r"><span class="chip">STORAGE-BOX</span><span>72.5s</span></div></div></a>
+<a class="card" href="demo07/viewer.html"><div class="ph"><img src="demo07/thumb.jpg" alt="demo07"><span class="pi"></span></div><div class="m"><div class="t">demo07 &middot; Dicing Watermelon For Storage</div><div class="r"><span class="chip">CHOP-CUT</span><span>373.0s</span></div></div></a>
+<a class="card" href="demo08/viewer.html"><div class="ph"><img src="demo08/thumb.jpg" alt="demo08"><span class="pi"></span></div><div class="m"><div class="t">demo08 &middot; Wiping Office Desk Surface</div><div class="r"><span class="chip">OFFICE-CLEAN</span><span>85.8s</span></div></div></a>
+<a class="card" href="demo09/viewer.html"><div class="ph"><img src="demo09/thumb.jpg" alt="demo09"><span class="pi"></span></div><div class="m"><div class="t">demo09 &middot; Arranging Fruits on Retail Shelf</div><div class="r"><span class="chip">RETAIL-SHELF</span><span>55.0s</span></div></div></a>
+<a class="card" href="demo10/viewer.html"><div class="ph"><img src="demo10/thumb.jpg" alt="demo10"><span class="pi"></span></div><div class="m"><div class="t">demo10 &middot; Trimming Threads From Garment</div><div class="r"><span class="chip">MFG-SEW</span><span>22.5s</span></div></div></a></div></body></html>

teleop.html

@@ -9,6 +9,11 @@ header{padding:22px 26px 6px}h1{margin:0 0 4px;font-size:22px}
 .card{background:#12151c;border:1px solid #232733;border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
 .card:hover{border-color:#3a4a6a;transform:translateY(-2px)}
 .card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#000;display:block}
+.card .ph{position:relative;display:block;line-height:0}
+.card .ph::after{content:"";position:absolute;inset:0;background:rgba(8,10,15,.30);opacity:0;transition:opacity .16s ease;pointer-events:none}
+.card .pi{position:absolute;left:50%;top:50%;width:54px;height:54px;opacity:0;pointer-events:none;background:rgba(255,255,255,.95);clip-path:polygon(18% 3%,18% 97%,93% 50%);filter:drop-shadow(0 2px 12px rgba(0,0,0,.6));transform:translate(-50%,-50%) scale(.86);transition:opacity .16s ease,transform .16s ease}
+.card:hover .ph::after{opacity:1}
+.card:hover .pi{opacity:1;transform:translate(-50%,-50%) scale(1)}
 .card .m{padding:11px 13px 13px}
 .card .t{font-size:15px;margin:0 0 7px}
 .card .r{display:flex;align-items:center;gap:10px;font-size:12px;color:#9aa1ad}
@@ -16,12 +21,12 @@ header{padding:22px 26px 6px}h1{margin:0 0 4px;font-size:22px}
 @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
 @media(max-width:600px){.grid{grid-template-columns:1fr}}
 </style></head><body>
-<header><a href="index.html" style="color:#6f92c8;text-decoration:none;font-size:13px;display:inline-block;margin-bottom:6px">← all datasets</a><br><h1>Pick up the water bottle and put it in the basket</h1><div class="sub">6 episodes · robot <code>Futurist</code> · LeRobot dual-arm teleop</div></header>
+<header><a href="index.html" style="color:#6f92c8;text-decoration:none;font-size:13px;display:inline-block;margin-bottom:6px">← all datasets</a><br><h1>Pick up the water bottle and put it in the basket</h1><div class="sub">6 episodes · robot <code>a2</code> · LeRobot dual-arm teleop</div></header>
 <div class="note">Preview viewers for LeRobot dual-arm teleop episodes. Click a card to open its synced multi-camera viewer (video + depth + tactile + robot-state charts). Download links on each viewer point to the source files on HuggingFace.</div>
-<div class="grid"><a class="card" href="ep0/viewer.html"><img src="ep0/thumb.jpg" alt="episode 0"><div class="m"><div class="t">Episode 0 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">Futurist</span><span>18.2s</span><span>545 frames</span></div></div></a>
-<a class="card" href="ep1/viewer.html"><img src="ep1/thumb.jpg" alt="episode 1"><div class="m"><div class="t">Episode 1 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">Futurist</span><span>18.8s</span><span>563 frames</span></div></div></a>
-<a class="card" href="ep2/viewer.html"><img src="ep2/thumb.jpg" alt="episode 2"><div class="m"><div class="t">Episode 2 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">Futurist</span><span>18.7s</span><span>562 frames</span></div></div></a>
-<a class="card" href="ep3/viewer.html"><img src="ep3/thumb.jpg" alt="episode 3"><div class="m"><div class="t">Episode 3 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">Futurist</span><span>20.5s</span><span>614 frames</span></div></div></a>
-<a class="card" href="ep4/view.html"><img src="ep4/thumb.jpg" alt="episode 4"><div class="m"><div class="t">Episode 4 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">Futurist</span><span>22.4s</span><span>673 frames</span></div></div></a>
-<a class="card" href="ep5/viewer.html"><img src="ep5/thumb.jpg" alt="episode 5"><div class="m"><div class="t">Episode 5 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">Futurist</span><span>18.4s</span><span>553 frames</span></div></div></a></div>
+<div class="grid"><a class="card" href="ep0/viewer.html"><div class="ph"><img src="ep0/thumb.jpg" alt="episode 0"><span class="pi"></span></div><div class="m"><div class="t">Episode 0 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">A2</span><span>18.2s</span><span>545 frames</span></div></div></a>
+<a class="card" href="ep1/viewer.html"><div class="ph"><img src="ep1/thumb.jpg" alt="episode 1"><span class="pi"></span></div><div class="m"><div class="t">Episode 1 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">A2</span><span>18.8s</span><span>563 frames</span></div></div></a>
+<a class="card" href="ep2/viewer.html"><div class="ph"><img src="ep2/thumb.jpg" alt="episode 2"><span class="pi"></span></div><div class="m"><div class="t">Episode 2 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">A2</span><span>18.7s</span><span>562 frames</span></div></div></a>
+<a class="card" href="ep3/viewer.html"><div class="ph"><img src="ep3/thumb.jpg" alt="episode 3"><span class="pi"></span></div><div class="m"><div class="t">Episode 3 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">A2</span><span>20.5s</span><span>614 frames</span></div></div></a>
+<a class="card" href="ep4/view.html"><div class="ph"><img src="ep4/thumb.jpg" alt="episode 4"><span class="pi"></span></div><div class="m"><div class="t">Episode 4 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">A2</span><span>22.4s</span><span>673 frames</span></div></div></a>
+<a class="card" href="ep5/viewer.html"><div class="ph"><img src="ep5/thumb.jpg" alt="episode 5"><span class="pi"></span></div><div class="m"><div class="t">Episode 5 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">A2</span><span>18.4s</span><span>553 frames</span></div></div></a></div>
 </body></html>