Modern Login Form - Copy this Html, Bootstrap Component to your project

{%-extends-"partials/base.html"-%}-{%-block-title-%}Comandos-y-Voces{%-endblock-title-%}-{%-block-extra_css-%}-<style>-body-{-font-family:-'Arial',-sans-serif;-background-color:-#f5f5f5;-color:-#333;-line-height:-1.6;-}-.container-{-max-width:-1200px;-margin:-0-auto;-padding:-20px;-}-.section-{-background-color:-#fff;-border-radius:-8px;-box-shadow:-0-2px-4px-rgba(0,0,0,0.1);-margin-bottom:-30px;-padding:-20px;-}-h2-{-color:-#e60000;-border-bottom:-2px-solid-#e60000;-padding-bottom:-10px;-margin-bottom:-20px;-}-.grid-{-display:-grid;-grid-template-columns:-1fr-1fr;-gap:-20px;-}-.form-container,-.list-container-{-background-color:-#fff;-border-radius:-8px;-padding:-20px;-}-input[type="text"],-textarea-{-width:-100%;-padding:-10px;-margin-bottom:-10px;-border:-1px-solid-#ddd;-border-radius:-4px;-}-button-{-background-color:-#e60000;-color:-#fff;-border:-none;-padding:-10px-20px;-border-radius:-4px;-cursor:-pointer;-transition:-background-color-0.3s;-}-button:hover-{-background-color:-#cc0000;-}-.button-group-{-display:-flex;-justify-content:-space-between;-}-.list-item-{-background-color:-#f9f9f9;-border:-1px-solid-#ddd;-border-radius:-4px;-padding:-10px;-margin-bottom:-10px;-}-.edit-button,-.delete-button-{-background-color:-#333;-color:-#fff;-border:-none;-padding:-5px-10px;-border-radius:-4px;-cursor:-pointer;-font-size:-0.8em;-}-.edit-button:hover,-.delete-button:hover-{-background-color:-#555;-}-.flash-messages-{-margin-bottom:-20px;-}-.flash-messages-div-{-padding:-10px;-border-radius:-4px;-margin-bottom:-10px;-}-.success-{-background-color:-#d4edda;-color:-#155724;-}-.error-{-background-color:-#f8d7da;-color:-#721c24;-}-.content-block-{-margin-bottom:-20px;-padding:-10px;-background-color:-#f9f9f9;-border-left:-4px-solid-#e60000;-}-.content-block-strong-{-font-weight:-bold;-color:-#333;-}-.prompts-section-{-margin-bottom:-2rem;-}-.prompts-container-{-display:-flex;-flex-wrap:-wrap;-gap:-1rem;-justify-content:-space-between;-}-.prompt-block-{-background-color:-#f8f9fa;-border:-1px-solid-#e9ecef;-border-radius:-0.25rem;-padding:-1rem;-flex:-1-1-300px;-}-.prompt-block-h3-{-margin-top:-0;-margin-bottom:-0.5rem;-color:-#495057;-}-.prompt-content-{-font-size:-0.9rem;-}-.prompt-content-p-{-margin:-0.5rem-0;-}-.variable-{-color:-#007bff;-font-weight:-bold;-}-</style>-{%-endblock-extra_css-%}-{%-block-content-%}-<div-class="container">-<div-class="flash-messages">-{%-with-messages-=-get_flashed_messages(with_categories=true)-%}-{%-if-messages-%}-{%-for-category,-message-in-messages-%}-<div-class="{{-category-}}">{{-message-}}</div>-{%-endfor-%}-{%-endif-%}-{%-endwith-%}-</div>-<section-class="section">-<section-class="prompts-section">-<h2>Prompts-de-OpenAI</h2>-<div-class="prompts-container">-<div-class="prompt-block">-<h3>Variables-de-Estructura</h3>-<div-class="prompt-content">-<p><strong>Título:</strong>-<span-class="variable">{titulo}</span></p>-<p><strong>Keyword:</strong>-<span-class="variable">{keyword}</span></p>-</div>-</div>-<div-class="prompt-block">-<h3>Variables-Escenas</h3>-<div-class="prompt-content">-<p><strong>Título:</strong>-<span-class="variable">{titulo}</span></p>-<p><strong>Estructura:</strong>-<span-class="variable">{estructura}</span></p>-</div>-</div>-<div-class="prompt-block">-<h3>Variables-Imágenes</h3>-<div-class="prompt-content">-<p><strong>Título:</strong>-<span-class="variable">{titulo}</span></p>-<p><strong>Guion:</strong>-<span-class="variable">{guion}</span></p>-</div>-</div>-</div>-</section>-<div-class="grid">-<div-class="form-container">-<form-id="openaiForm"-method="POST"-action="{{-url_for('save_item',-table='openai_prompts')-}}">-<input-type="hidden"-id="openaiId"-name="id">-<input-type="text"-id="openaiName"-name="name"-placeholder="Nombre"-required>-<textarea-id="openaiSystem"-name="system_prompt"-placeholder="Prompt-del-Sistema"-required></textarea>-<textarea-id="openaiUser"-name="user_prompt"-placeholder="Prompt-del-Usuario"-required></textarea>-<div-class="button-group">-<button-type="button"-onclick="resetForm('openaiForm')">Limpiar</button>-<button-type="submit">Guardar</button>-</div>-</form>-</div>-<div-class="list-container"-id="openaiList">-{{-openai_list-|-safe-}}-</div>-</div>-</section>-<section-class="section">-<h2>IDs-de-Voces-de-ElevenLabs</h2>-<div-class="grid">-<div-class="form-container">-<form-id="elevenlabsForm"-method="POST"-action="{{-url_for('save_item',-table='elevenlabs_voices')-}}">-<input-type="hidden"-id="elevenlabsId"-name="id">-<input-type="text"-id="elevenlabsName"-name="name"-placeholder="Name"-required>-<input-type="text"-id="elevenlabsVoiceId"-name="voice_id"-placeholder="Voice-ID"-required>-<div-class="button-group">-<button-type="button"-onclick="resetForm('elevenlabsForm')">Limpiar</button>-<button-type="submit">Guardar</button>-</div>-</form>-</div>-<div-class="list-container"-id="elevenlabsList">-{{-elevenlabs_list-|-safe-}}-</div>-</div>-</section>-<br>-</div>-{%-include-"partials/footer.html"-%}-{%-endblock-content-%}-{%-block-extra_js-%}-<script>-function-resetForm(formId)-{-document.getElementById(formId).reset();-document.querySelector(#${formId}-input[name="id"]).value-=-'';-}-function-deleteItem(table,-id)-{-if-(confirm('¿Estás-seguro-de-que-deseas-eliminar-este-elemento?'))-{-fetch(/delete/${table}/${id},-{-method:-'POST',-headers:-{-'Content-Type':-'application/x-www-form-urlencoded',-},-body:-''-})-.then(response-=>-{-if-(response.ok)-{-location.reload();-}-else-{-alert('Error-al-eliminar.-Por-favor,-inténtalo-de-nuevo.');-}-})-.catch(error-=>-{-console.error('Error:',-error);-alert('Ocurrió-un-error.-Por-favor,-inténtalo-nuevamente.');-});-}-}-function-editItem(element)-{-try-{-var-table-=-element.getAttribute('data-table');-var-id-=-element.getAttribute('data-id');-var-name-=-element.getAttribute('data-name')-||-'';-var-system_prompt-=-element.getAttribute('data-system_prompt')-||-'';-var-user_prompt-=-element.getAttribute('data-user_prompt')-||-'';-var-voice_id-=-element.getAttribute('data-voice_id')-||-'';-var-prompt-=-element.getAttribute('data-prompt')-||-'';-if-(table-===-'openai_prompts')-{-document.getElementById("openaiId").value-=-id;-document.getElementById("openaiName").value-=-name;-document.getElementById("openaiSystem").value-=-system_prompt;-document.getElementById("openaiUser").value-=-user_prompt;-document.getElementById('openaiForm').scrollIntoView({behavior:-'smooth'});-}-else-if-(table-===-'elevenlabs_voices')-{-document.getElementById("elevenlabsId").value-=-id;-document.getElementById("elevenlabsName").value-=-name;-document.getElementById("elevenlabsVoiceId").value-=-voice_id;-document.getElementById('elevenlabsForm').scrollIntoView({behavior:-'smooth'});-}-else-{-console.error('Unknown-table:',-table);-}-}-catch-(error)-{-console.error('Error-in-editItem:',-error);-alert('Se-ha-producido-un-error-al-editar.-Por-favor,-inténtalo-de-nuevo.');-}-}-document.addEventListener('DOMContentLoaded',-function()-{-const-editButtons-=-document.querySelectorAll('.edit-button');-editButtons.forEach(function(button)-{-button.addEventListener('click',-function()-{-editItem(this);-});-});-const-deleteButtons-=-document.querySelectorAll('.delete-button');-deleteButtons.forEach(function(button)-{-button.addEventListener('click',-function()-{-const-table-=-this.getAttribute('data-table');-const-id-=-this.getAttribute('data-id');-deleteItem(table,-id);-});-});-});-</script>-{%-endblock-extra_js-%}