Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Short Video Maker</title> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>🎬 Short Video Maker</h1> | |
| <p>Create engaging short videos for TikTok, Instagram Reels, and YouTube Shorts</p> | |
| </header> | |
| <main> | |
| <section class="create-section"> | |
| <h2>Create New Video</h2> | |
| <form id="videoForm"> | |
| <div class="form-group"> | |
| <label>Orientation</label> | |
| <select id="orientation" class="input"> | |
| <option value="portrait">Portrait (9:16)</option> | |
| <option value="landscape">Landscape (16:9)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Voice</label> | |
| <select id="voice" class="input"> | |
| <option value="af_heart">Female - Heart</option> | |
| <option value="am_adam">Male - Adam</option> | |
| <option value="af_bella">Female - Bella</option> | |
| <option value="am_michael">Male - Michael</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Background Music Mood</label> | |
| <select id="music" class="input"> | |
| <option value="">Random</option> | |
| <option value="chill">Chill</option> | |
| <option value="happy">Happy</option> | |
| <option value="sad">Sad</option> | |
| <option value="excited">Excited</option> | |
| <option value="dark">Dark</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Music Volume</label> | |
| <select id="musicVolume" class="input"> | |
| <option value="high">High</option> | |
| <option value="medium">Medium</option> | |
| <option value="low">Low</option> | |
| <option value="muted">Muted</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Caption Position</label> | |
| <select id="captionPosition" class="input"> | |
| <option value="bottom">Bottom</option> | |
| <option value="center">Center</option> | |
| <option value="top">Top</option> | |
| </select> | |
| </div> | |
| <h3>Scenes</h3> | |
| <div id="scenesContainer"> | |
| <div class="scene"> | |
| <div class="form-group"> | |
| <label>Scene 1 - Text to Narrate</label> | |
| <textarea class="scene-text input" rows="3" placeholder="Enter the narration text..." required></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label>Search Keywords (comma separated)</label> | |
| <input type="text" class="scene-keywords input" placeholder="nature, forest, trees" required> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="button" id="addScene" class="btn btn-secondary">+ Add Scene</button> | |
| <div class="form-actions"> | |
| <button type="submit" class="btn btn-primary">Create Video</button> | |
| </div> | |
| </form> | |
| <div id="status" class="status hidden"></div> | |
| </section> | |
| <section class="videos-section"> | |
| <h2>Your Videos</h2> | |
| <div id="videosList" class="videos-grid"> | |
| <p class="loading">Loading videos...</p> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> | |