| 182 | }); |
| 183 | |
| 184 | function buildPlayerPage(projectName: string): string { |
| 185 | return `<!doctype html> |
| 186 | <html lang="en"> |
| 187 | <head> |
| 188 | <meta charset="UTF-8" /> |
| 189 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 190 | <title>${projectName} — HyperFrames Player</title> |
| 191 | <style> |
| 192 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 193 | body { |
| 194 | background: #0a0a0a; color: #fff; |
| 195 | font-family: system-ui, -apple-system, sans-serif; |
| 196 | height: 100vh; display: flex; flex-direction: column; |
| 197 | align-items: center; justify-content: center; |
| 198 | padding: 24px; |
| 199 | } |
| 200 | .player-wrap { |
| 201 | width: 100%; max-width: 1280px; aspect-ratio: 16/9; |
| 202 | border-radius: 8px; overflow: hidden; |
| 203 | } |
| 204 | hyperframes-player { width: 100%; height: 100%; } |
| 205 | .info { |
| 206 | margin-top: 16px; font-size: 12px; color: #444; |
| 207 | font-family: monospace; |
| 208 | } |
| 209 | </style> |
| 210 | </head> |
| 211 | <body> |
| 212 | <div class="player-wrap"> |
| 213 | <hyperframes-player src="/composition/index.html" controls muted></hyperframes-player> |
| 214 | </div> |
| 215 | <div class="info">${projectName} — hyperframes play</div> |
| 216 | <script src="/player.js"></script> |
| 217 | </body> |
| 218 | </html>`; |
| 219 | } |