| | <!DOCTYPE html> |
| | <html lang="pt-BR"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>HD French - Gerador de Hist贸rias em Quadrinhos</title> |
| | <link rel="stylesheet" href="styles.css"> |
| | </head> |
| | <body> |
| | <div class="container"> |
| | <header> |
| | <h1>HD French - Gerador de Hist贸rias em Quadrinhos</h1> |
| | <p>Crie hist贸rias em quadrinhos 煤nicas com intelig锚ncia artificial</p> |
| | </header> |
| |
|
| | <main> |
| | <section class="generator-form"> |
| | <h2>Crie sua Hist贸ria</h2> |
| | <form id="comic-form"> |
| | <div class="form-group"> |
| | <label for="theme">Tema da Hist贸ria:</label> |
| | <select id="theme" name="theme" required> |
| | <option value="adventure">Aventura</option> |
| | <option value="mystery">Mist茅rio</option> |
| | <option value="romance">Romance</option> |
| | </select> |
| | </div> |
| |
|
| | <div class="form-group"> |
| | <label for="title">T铆tulo da Hist贸ria:</label> |
| | <input type="text" id="title" name="title" placeholder="Digite o t铆tulo da hist贸ria" required> |
| | </div> |
| |
|
| | <div class="character-section"> |
| | <h3>Personagem Principal</h3> |
| | <div class="form-group"> |
| | <label for="appearance">Apar锚ncia:</label> |
| | <input type="text" id="appearance" name="appearance" placeholder="Ex: elfo com cabelos prateados e olhos esmeralda" required> |
| | </div> |
| |
|
| | <div class="form-group"> |
| | <label for="clothing">Roupas:</label> |
| | <input type="text" id="clothing" name="clothing" placeholder="Ex: roupas elegantes com padr玫es intrincados" required> |
| | </div> |
| |
|
| | <div class="form-group"> |
| | <label for="personality">Personalidade:</label> |
| | <input type="text" id="personality" name="personality" placeholder="Ex: s谩bio e curioso" required> |
| | </div> |
| |
|
| | <div class="form-group"> |
| | <label for="background">Hist贸rico:</label> |
| | <input type="text" id="background" name="background" placeholder="Ex: estudioso da biblioteca antiga" required> |
| | </div> |
| |
|
| | <div class="form-group"> |
| | <label for="abilities">Habilidades:</label> |
| | <input type="text" id="abilities" name="abilities" placeholder="Ex: usu谩rio de magia poderosa com conhecimento de l铆nguas antigas" required> |
| | </div> |
| | </div> |
| |
|
| | <button type="submit" id="generate-btn">Gerar Hist贸ria em Quadrinhos</button> |
| | </form> |
| | </section> |
| |
|
| | <section class="loading" id="loading" style="display: none;"> |
| | <h2>Gerando sua hist贸ria...</h2> |
| | <div class="spinner"></div> |
| | <p>Isso pode levar alguns minutos. Por favor, aguarde.</p> |
| | </section> |
| |
|
| | <section class="result" id="result" style="display: none;"> |
| | <h2>Sua Hist贸ria foi Gerada!</h2> |
| | <div id="comic-viewer"></div> |
| | <button id="new-story-btn">Criar Nova Hist贸ria</button> |
| | </section> |
| | </main> |
| |
|
| | <footer> |
| | <p>Hist贸rias geradas dinamicamente usando t茅cnicas inspiradas no Flux Schnell e API do Fireworks AI</p> |
| | </footer> |
| | </div> |
| |
|
| | <script src="script.js"></script> |
| | </body> |
| | </html> |
| |
|
