Spaces:
Sleeping
Sleeping
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VSL — Mẫu cử chỉ</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background: #0f0f1a; | |
| color: #e2e8f0; | |
| font-family: 'Segoe UI', sans-serif; | |
| padding: 32px 24px; | |
| } | |
| h1 { | |
| text-align: center; | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin-bottom: 6px; | |
| color: #a78bfa; | |
| } | |
| p.sub { | |
| text-align: center; | |
| color: #94a3b8; | |
| font-size: 0.88rem; | |
| margin-bottom: 28px; | |
| } | |
| h2 { | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| margin-bottom: 14px; | |
| padding-left: 4px; | |
| } | |
| h2.confirmed { color: #34d399; } | |
| h2.next { color: #60a5fa; } | |
| .section { max-width: 1100px; margin: 0 auto 36px; } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 16px; | |
| } | |
| .card { | |
| background: #1e1e2e; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| border: 1px solid #2d2d3f; | |
| transition: transform 0.15s, border-color 0.15s; | |
| cursor: pointer; | |
| } | |
| .card:hover { transform: translateY(-3px); } | |
| .confirmed .card:hover { border-color: #34d399; } | |
| .next .card:hover { border-color: #60a5fa; } | |
| .card video { | |
| width: 100%; | |
| display: block; | |
| background: #000; | |
| height: 160px; | |
| object-fit: cover; | |
| } | |
| .label { | |
| padding: 8px 12px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| text-align: center; | |
| } | |
| a.back { | |
| display: block; | |
| text-align: center; | |
| margin-top: 8px; | |
| color: #7c3aed; | |
| text-decoration: none; | |
| font-size: 0.88rem; | |
| } | |
| a.back:hover { text-decoration: underline; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Mẫu cử chỉ VSL</h1> | |
| <p class="sub">Hover để xem — thử ký theo trước camera</p> | |
| <div class="section confirmed"> | |
| <h2 class="confirmed">✓ Đã nhận diện tốt</h2> | |
| <div class="grid" id="grid-confirmed"></div> | |
| </div> | |
| <div class="section next"> | |
| <h2 class="next">→ Thử tiếp 10 gloss tiềm năng</h2> | |
| <div class="grid" id="grid-next"></div> | |
| </div> | |
| <a class="back" href="/">← Quay lại demo</a> | |
| <script> | |
| const confirmed = ["Con mèo","Đi","Bảo vệ","Khỏe","Thức dậy","Nhà","Cảm ơn","Trường học","Bệnh viện","Đồng ý","Nghỉ ngơi"]; | |
| const next = ["Muốn","Ô tô","Nghề nghiệp","Làm việc","Em","Nhẹ","Nói","Cô","Giường","Anh"]; | |
| function makeCard(g) { | |
| const card = document.createElement("div"); | |
| card.className = "card"; | |
| card.innerHTML = ` | |
| <video src="/static/samples/${encodeURIComponent(g)}.mp4" | |
| loop muted playsinline preload="auto"> | |
| </video> | |
| <div class="label">${g}</div> | |
| `; | |
| const v = card.querySelector("video"); | |
| card.addEventListener("mouseenter", () => v.play()); | |
| card.addEventListener("mouseleave", () => { v.pause(); v.currentTime = 0; }); | |
| return card; | |
| } | |
| confirmed.forEach(g => document.getElementById("grid-confirmed").appendChild(makeCard(g))); | |
| next.forEach(g => document.getElementById("grid-next").appendChild(makeCard(g))); | |
| </script> | |
| </body> | |
| </html> | |