Spaces:
Running
Running
Card hover affordance: dim thumbnail + centered play triangle on episode/demo cards
263b156 verified | <html lang="en"><head><meta charset="utf-8"><title>Ego Sample</title><style> | |
| :root{color-scheme:dark}*{box-sizing:border-box} | |
| body{margin:0;background:#0b0d12;color:#e6e8ee;font-family:-apple-system,"PingFang SC","Helvetica Neue",Arial,sans-serif} | |
| header{padding:22px 26px 6px}h1{margin:4px 0 4px;font-size:22px}.sub{color:#9aa1ad;font-size:13px} | |
| .back{color:#6f92c8;text-decoration:none;font-size:13px} | |
| .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px 26px 40px} | |
| .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} | |
| @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 class="back" href="../index.html">← all datasets</a><h1>Ego Sample</h1> | |
| <div class="sub">6 episodes · PICO first-person ego · stereo fisheye + depth + 3D hand/head pose</div></header> | |
| <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 · 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 · 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 · 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 · 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 · 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 · Trimming Threads From Garment</div><div class="r"><span class="chip">MFG-SEW</span><span>22.5s</span></div></div></a></div></body></html> |