├── .gitattributes ├── styles.css └── index.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg: #0c0f14; 3 | --text: #ffffff; 4 | } 5 | 6 | html, body { 7 | margin: 0; 8 | background: var(--bg); 9 | color: var(--text); 10 | height: 100%; 11 | } 12 | 13 | #app { 14 | position: relative; 15 | width: 100vw; 16 | height: 100vh; 17 | display: grid; 18 | place-items: center; 19 | } 20 | 21 | video#webcam { 22 | position: absolute; 23 | max-width: 100vw; 24 | max-height: 100vh; 25 | object-fit: cover; 26 | filter: brightness(0.85) contrast(1.1); 27 | transform: scaleX(-1); 28 | border-radius: 8px; 29 | } 30 | 31 | canvas#overlay { 32 | position: absolute; 33 | max-width: 100vw; 34 | max-height: 100vh; 35 | pointer-events: none; 36 | transform: scaleX(-1); 37 | border-radius: 8px; 38 | } 39 | 40 | #cta { 41 | position: absolute; 42 | bottom: 24px; 43 | left: 24px; 44 | } 45 | 46 | #startBtn { 47 | background: #1a1f2b; 48 | color: #fff; 49 | border: 1px solid #334; 50 | padding: 10px 14px; 51 | border-radius: 6px; 52 | cursor: pointer; 53 | font-size: 14px; 54 | } 55 | 56 | #startBtn:disabled { opacity: 0.6; cursor: default; } 57 | 58 | 59 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hand HUD 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 20 |
21 |
22 | 23 | 426 | 427 | 428 | 429 | 430 | --------------------------------------------------------------------------------