153 lines
7.8 KiB
HTML
153 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Crochet</title>
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
<!-- Rellenada por js/dnd.js con el @page (tamaño/orientación) elegido en
|
|
"Personalización de página": un <style> aparte porque @page no se
|
|
puede cambiar como una propiedad normal desde JS. -->
|
|
<style id="page-size-style"></style>
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
|
|
<header class="flex flex-wrap items-center justify-between gap-2 p-4 no-print">
|
|
<h1 class="text-xl font-semibold">Crochet</h1>
|
|
<div class="flex gap-2 items-center">
|
|
<!-- Idioma del contenido (título/subtítulo/texto de cada sección), no
|
|
de la interfaz: la estructura de secciones es la misma para
|
|
todos los idiomas, solo cambian los textos que el usuario ha
|
|
escrito para el idioma seleccionado. Añadir un idioma nuevo es
|
|
solo cuestión de añadir una <option> aquí. -->
|
|
<select id="language-select" class="select select-sm select-bordered">
|
|
<option value="es" selected>Español</option>
|
|
<option value="en">English</option>
|
|
</select>
|
|
<button id="save-pattern" type="button" class="btn btn-sm btn-outline">Guardar</button>
|
|
<button id="load-pattern" type="button" class="btn btn-sm btn-outline">Cargar</button>
|
|
<button id="export-pdf" type="button" class="btn btn-sm">Exportar a PDF</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="p-4 pt-0">
|
|
|
|
<!-- Configuración única para todo el documento (no es una sección más:
|
|
no se repite, no se reordena ni se duplica), por eso vive fuera
|
|
de #panel-top-sections. <details> nativo para no necesitar JS
|
|
solo para plegarla/desplegarla. -->
|
|
<details class="border border-base-300 rounded-box p-4 mb-4 no-print">
|
|
<summary class="text-lg font-semibold cursor-pointer select-none">Personalización de página</summary>
|
|
<div class="flex flex-col gap-4 mt-4">
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<label class="flex flex-col gap-1 flex-1">
|
|
<span class="text-sm">Título del patrón</span>
|
|
<input id="page-title-input" type="text" class="input input-bordered" placeholder="Título del patrón...">
|
|
</label>
|
|
<label class="flex flex-col gap-1 flex-1">
|
|
<span class="text-sm">Autor</span>
|
|
<input id="page-author-input" type="text" class="input input-bordered" placeholder="Autor...">
|
|
</label>
|
|
</div>
|
|
<div class="flex flex-wrap items-end gap-4">
|
|
<label class="flex flex-col gap-1">
|
|
<span class="text-sm">Color de fondo</span>
|
|
<input id="page-bg-color" type="color" value="#ffffff">
|
|
</label>
|
|
<label class="flex flex-col gap-1">
|
|
<span class="text-sm">Tipografía</span>
|
|
<select id="page-font-select" class="select select-bordered select-sm">
|
|
<option value="sans-serif" selected>Sans-serif</option>
|
|
<option value="serif">Serif</option>
|
|
<option value="Georgia, serif">Georgia</option>
|
|
<option value="'Trebuchet MS', sans-serif">Trebuchet MS</option>
|
|
<option value="'Courier New', monospace">Monoespaciada</option>
|
|
</select>
|
|
</label>
|
|
<label class="flex flex-col gap-1">
|
|
<span class="text-sm">Tamaño de página</span>
|
|
<select id="page-size-select" class="select select-bordered select-sm">
|
|
<option value="A4" selected>A4</option>
|
|
<option value="A3">A3</option>
|
|
<option value="A5">A5</option>
|
|
<option value="letter">Carta (Letter)</option>
|
|
<option value="legal">Legal</option>
|
|
</select>
|
|
</label>
|
|
<label class="flex flex-col gap-1">
|
|
<span class="text-sm">Orientación</span>
|
|
<select id="page-orientation-select" class="select select-bordered select-sm">
|
|
<option value="portrait" selected>Vertical</option>
|
|
<option value="landscape">Horizontal</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="tabs tabs-boxed w-fit mb-4 md:hidden no-print">
|
|
<button id="tab-sections" type="button" class="tab tab-active">Secciones</button>
|
|
<button id="tab-output" type="button" class="tab">Vista previa</button>
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row gap-4">
|
|
|
|
<section id="panel-top" class="w-full md:w-1/2 border border-base-300 rounded-box p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="text-lg font-semibold">Secciones</h2>
|
|
<button id="toggle-collapse-all" type="button" class="btn btn-xs btn-outline"
|
|
data-collapse-all-label="Colapsar todo" data-expand-all-label="Expandir todo">Colapsar todo</button>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<button id="add-title-section" type="button" class="btn btn-sm"
|
|
data-type-label="Título" data-placeholder="Título...">+ Título</button>
|
|
<button id="add-subtitle-section" type="button" class="btn btn-sm"
|
|
data-type-label="Subtítulo" data-placeholder="Subtítulo...">+ Subtítulo</button>
|
|
<button id="add-text-section" type="button" class="btn btn-sm"
|
|
data-type-label="Texto" data-placeholder="Escribe aquí...">+ Texto</button>
|
|
<button id="add-note-section" type="button" class="btn btn-sm"
|
|
data-type-label="Nota" data-placeholder="Escribe una nota o consejo..."
|
|
data-text-color-label="Color del texto" data-bg-color-label="Color de fondo">+ Nota</button>
|
|
<button id="add-materials-section" type="button" class="btn btn-sm"
|
|
data-type-label="Materiales" data-placeholder="Añadir material..." data-add-line-label="+ Añadir línea">+ Materiales</button>
|
|
<button id="add-image-section" type="button" class="btn btn-sm"
|
|
data-type-label="Imagen">+ Imagen</button>
|
|
<button id="add-dnd-section" type="button" class="btn btn-sm"
|
|
data-type-label="Patrón" data-elements-label="Elementos">+ Patrón</button>
|
|
<button id="add-group-section" type="button" class="btn btn-sm"
|
|
data-type-label="Grupo">+ Grupo</button>
|
|
</div>
|
|
<div id="panel-top-sections" class="flex flex-col gap-4"
|
|
data-drag-title="Arrastrar para reordenar"
|
|
data-collapse-title="Colapsar / expandir"
|
|
data-duplicate-title="Duplicar sección"
|
|
data-remove-title="Eliminar sección"></div>
|
|
</section>
|
|
|
|
<section id="panel-output" class="w-full md:w-1/2 border border-base-300 rounded-box p-4 panel-hidden-mobile">
|
|
<h2 id="preview-title" class="text-lg font-semibold mb-2">Vista previa</h2>
|
|
<div id="panel-output-text" class="text-sm"
|
|
data-empty-message="Añade una sección para ver aquí el resultado."></div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Fuente de datos de los elementos arrastrables: se mantiene oculta y
|
|
se clona (haciéndola visible) dentro de cada sección de arrastrar y soltar. -->
|
|
<ul id="draggable-items-source" class="menu bg-base-100 w-full hidden">
|
|
<li class="my-2 breadcrumb cursor-pointer select-none" id="1"> PB</li>
|
|
<li class="my-2 breadcrumb cursor-pointer select-none" id="2">Disminución</li>
|
|
</ul>
|
|
</main>
|
|
</body>
|
|
<script src="js/dnd.js"></script>
|
|
|
|
</html>
|