pablo/crochet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added more sections and page customization

Browse Source
This commit is contained in:
Pablo Moreno
2026-07-13 12:34:42 +02:00
parent bfb020531b
commit 692cd2b481
3 changed files with 328 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+63 -1
View File
@@ -8,6 +8,10 @@
<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>
@@ -33,6 +37,59 @@
<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>
@@ -53,6 +110,11 @@
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"
@@ -68,7 +130,7 @@
</section>
<section id="panel-output" class="w-full md:w-1/2 border border-base-300 rounded-box p-4 panel-hidden-mobile">
<h2 class="text-lg font-semibold mb-2">Vista previa</h2>
<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>