Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Screenshot to HTML - Control Panel</title> | |
| <link href="https://cdn.tailwindcss.com" rel="stylesheet"> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| </head> | |
| <body class="ssth_container"> | |
| <div class="container mx-auto p-6"> | |
| <h1 class="ssth_title">Screenshot to HTML Control Panel</h1> | |
| <!-- Tabs --> | |
| <div class="ssth_tab_container"> | |
| <button class="ssth_tab_button active" data-tab="url">URL to Files</button> | |
| <button class="ssth_tab_button" data-tab="image">Image Upload</button> | |
| </div> | |
| <!-- URL Tab Content --> | |
| <div id="url" class="tab-content active"> | |
| <form id="url-form" class="ssth_form_card"> | |
| <div class="mb-4"> | |
| <label class="ssth_form_label" for="url">Webpage URL</label> | |
| <input type="text" id="url" name="url" class="ssth_form_input" placeholder="Enter URL here..." required> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="ssth_form_label" for="max_height">Max Height (pixels)</label> | |
| <input type="number" id="max_height" name="max_height" min="100" max="2000" value="1000" class="ssth_form_input"> | |
| </div> | |
| <div> | |
| <label class="ssth_form_label" for="timeout">Timeout (ms)</label> | |
| <input type="number" id="timeout" name="timeout" min="1000" max="60000" step="1000" value="30000" class="ssth_form_input"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="ssth_form_label">Image Format</label> | |
| <div class="ssth_form_radio_group"> | |
| <label class="ssth_form_radio_label"><input type="radio" name="image_format" value="PNG" checked>PNG</label> | |
| <label class="ssth_form_radio_label"><input type="radio" name="image_format" value="JPEG">JPEG</label> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="ssth_form_label" for="model">Gemini Model</label> | |
| <select id="model" name="model_name" class="ssth_form_select"> | |
| {% for model in models %} | |
| <option value="{{ model }}" {% if model == default_model %}selected{% endif %}>{{ model }}</option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <button type="button" class="ssth_form_submit_button" id="url-submit">Extract Files from URL</button> | |
| </form> | |
| </div> | |
| <!-- Image Tab Content --> | |
| <div id="image" class="tab-content"> | |
| <form id="image-form" enctype="multipart/form-data" class="ssth_form_card"> | |
| <div class="mb-4"> | |
| <label class="ssth_form_label" for="image">Upload Screenshot</label> | |
| <input type="file" id="image" name="image" accept="image/*" class="ssth_form_input" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="ssth_form_label" for="model_upload">Gemini Model</label> | |
| <select id="model_upload" name="model_name" class="ssth_form_select"> | |
| {% for model in models %} | |
| <option value="{{ model }}" {% if model == default_model %}selected{% endif %}>{{ model }}</option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <button type="button" class="ssth_form_submit_button" id="image-submit">Extract Files from Image</button> | |
| </form> | |
| </div> | |
| <!-- Status Messages and Progress Bar --> | |
| <div id="status-area" class="ssth_status_area"> | |
| <div id="status-messages" class="ssth_status_messages"></div> | |
| <div id="progress-bar-container" class="ssth_progress_bar_container"> | |
| <div id="progress-bar" class="ssth_progress_bar"></div> | |
| </div> | |
| </div> | |
| <!-- Results Layout --> | |
| <div class="ssth_results_layout"> | |
| <div class="ssth_preview_area"> | |
| <div class="ssth_website_preview_section"> | |
| <h2 class="ssth_section_title">Website Preview</h2> | |
| <div id="preview" class="ssth_preview_container"> | |
| <iframe id="preview-iframe" style="width: 100%; height: 100%; border: none;"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ssth_code_area"> | |
| <div class="ssth_files_section"> | |
| <h2 class="ssth_section_title">Generated Files</h2> | |
| <div id="files" class="space-y-4"></div> | |
| </div> | |
| <div class="ssth_combined_code_section"> | |
| <h2 class="ssth_section_title">Combined HTML (All Code in One File)</h2> | |
| <div class="ssth_combined_code_container" id="combined-code"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> |