Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <title>Video Template Builder (FFmpeg)</title> | |
| <link rel="stylesheet" href="/static/styles.css"/> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Video Template Builder</h1> | |
| <p class="sub">Create/edit templates (JSON) → Render via API.</p> | |
| </header> | |
| <main class="grid"> | |
| <section class="panel"> | |
| <h2>Templates</h2> | |
| <div class="row"> | |
| <button id="refresh">Refresh</button> | |
| <button id="new">New</button> | |
| </div> | |
| <ul id="list" class="list"></ul> | |
| </section> | |
| <section class="panel"> | |
| <h2>Editor</h2> | |
| <div class="row"> | |
| <input id="tplId" placeholder="template id (e.g. my_tpl)" /> | |
| <button id="save">Save</button> | |
| </div> | |
| <textarea id="json" spellcheck="false"></textarea> | |
| <p class="hint">Tip: Use <code>{name}</code> placeholder in text.value and pass it during render.</p> | |
| </section> | |
| <section class="panel"> | |
| <h2>Render</h2> | |
| <div class="row"> | |
| <input id="name" placeholder="name variable" value="Marne"/> | |
| <button id="render">Render</button> | |
| </div> | |
| <div id="renderStatus" class="status"></div> | |
| <video id="player" controls></video> | |
| <p class="hint">Renders are CPU-only and can take a bit on free tier.</p> | |
| </section> | |
| </main> | |
| <footer> | |
| <span>Endpoints: <code>/api/templates</code>, <code>/api/render</code>, <code>/api/jobs/<id></code></span> | |
| </footer> | |
| <script src="/static/main.js"></script> | |
| </body> | |
| </html> | |