From 1cb41e36ad55bcc1f30c2ebc70a8abb1f46a00ae Mon Sep 17 00:00:00 2001
From: Pablo Moreno <pablo@kasfactory.net>
Date: Wed, 15 Jul 2026 10:43:42 +0200
Subject: [PATCH] feat: added customization options

---
 index.html          | 22 ++++++++++++++++-
 js/dom-refs.js      |  3 +++
 js/page-settings.js | 59 ++++++++++++++++++++++++++++++++++++---------
 js/render.js        |  7 ++++--
 js/section-types.js | 10 +++++---
 5 files changed, 83 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 47f9f89..492f533 100644
--- a/index.html
+++ b/index.html
@@ -68,6 +68,10 @@
               <span class="text-sm">Color del texto</span>
               <input id="page-text-color" type="color" value="#000000">
             </label>
+            <label class="flex flex-col gap-1">
+              <span class="text-sm">Color de acento (títulos)</span>
+              <input id="page-accent-color" type="color" value="#1d4ed8">
+            </label>
             <label class="flex flex-col gap-1">
               <span class="text-sm">Color de fondo</span>
               <input id="page-bg-color" type="color" value="#ffffff">
@@ -82,6 +86,22 @@
                 <option value="'Courier New', monospace">Monoespaciada</option>
               </select>
             </label>
+            <label class="flex flex-col gap-1">
+              <span class="text-sm">Tamaño de letra</span>
+              <select id="page-font-size-select" class="select select-bordered select-sm">
+                <option value="0.875rem">Pequeño</option>
+                <option value="1rem" selected>Normal</option>
+                <option value="1.25rem">Grande</option>
+              </select>
+            </label>
+            <label class="flex flex-col gap-1">
+              <span class="text-sm">Alineación del texto</span>
+              <select id="page-align-select" class="select select-bordered select-sm">
+                <option value="left" selected>Izquierda</option>
+                <option value="center">Centrado</option>
+                <option value="justify">Justificado</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">
@@ -145,7 +165,7 @@
 
         <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 no-print">Vista previa</h2>
-          <div id="panel-output-text" class="text-sm"
+          <div id="panel-output-text"
             data-empty-message="Añade una sección para ver aquí el resultado."></div>
         </section>
 
diff --git a/js/dom-refs.js b/js/dom-refs.js
index 24130bf..38c2a8a 100644
--- a/js/dom-refs.js
+++ b/js/dom-refs.js
@@ -15,8 +15,11 @@ export const panelOutput = document.getElementById('panel-output');
 export const pageTitleInput = document.getElementById('page-title-input');
 export const pageAuthorInput = document.getElementById('page-author-input');
 export const pageTextColorInput = document.getElementById('page-text-color');
+export const pageAccentColorInput = document.getElementById('page-accent-color');
 export const pageBgColorInput = document.getElementById('page-bg-color');
 export const pageFontSelect = document.getElementById('page-font-select');
+export const pageFontSizeSelect = document.getElementById('page-font-size-select');
+export const pageAlignSelect = document.getElementById('page-align-select');
 export const pageSizeSelect = document.getElementById('page-size-select');
 export const pageOrientationSelect = document.getElementById('page-orientation-select');
 export const pageSizeStyle = document.getElementById('page-size-style');
diff --git a/js/page-settings.js b/js/page-settings.js
index aeb5779..ebb30f2 100644
--- a/js/page-settings.js
+++ b/js/page-settings.js
@@ -1,31 +1,44 @@
-// Personalización de página: título, autor, color de texto y de fondo,
-// tipografía y tamaño/orientación del PDF. A diferencia de las secciones,
-// es única para todo el documento (no se repite, reordena ni duplica), así
-// que no pasa por serializeSections()/buildSectionsFrom(): se guarda
-// aparte (ver storage.js) y se aplica directamente sobre #panel-output.
+// Personalización de página: título, autor, color de texto/acento/fondo,
+// tipografía, tamaño y alineación de letra, y tamaño/orientación del PDF.
+// A diferencia de las secciones, es única para todo el documento (no se
+// repite, reordena ni duplica), así que no pasa por
+// serializeSections()/buildSectionsFrom(): se guarda aparte (ver
+// storage.js) y se aplica directamente sobre #panel-output.
 
 import {
   panelOutput,
+  outputText,
   pageTitleInput,
   pageAuthorInput,
   pageTextColorInput,
+  pageAccentColorInput,
   pageBgColorInput,
   pageFontSelect,
+  pageFontSizeSelect,
+  pageAlignSelect,
   pageSizeSelect,
   pageOrientationSelect,
   pageSizeStyle,
 } from './dom-refs.js';
 
-// Aplica a #panel-output el color de texto/fondo y la tipografía elegidos,
-// el tamaño de página al diálogo de impresión (a través de un <style>
-// propio, ya que @page no se puede tocar como una propiedad normal desde
-// JS), y el título del patrón como título de la pestaña del navegador (que
-// de paso el propio navegador suele usar como nombre sugerido al exportar
-// a PDF).
+// Aplica a #panel-output el color de texto/fondo, la tipografía, el
+// tamaño de letra y la alineación elegidos, el tamaño de página al diálogo
+// de impresión (a través de un <style> propio, ya que @page no se puede
+// tocar como una propiedad normal desde JS), y el título del patrón como
+// título de la pestaña del navegador (que de paso el propio navegador
+// suele usar como nombre sugerido al exportar a PDF).
 export function renderPageMeta() {
   panelOutput.style.color = pageTextColorInput.value;
   panelOutput.style.backgroundColor = pageBgColorInput.value;
   panelOutput.style.fontFamily = pageFontSelect.value;
+  panelOutput.style.textAlign = pageAlignSelect.value;
+  // En #panel-output-text (no en #panel-output): los títulos/notas/etc. ya
+  // usan sus propios tamaños relativos en "em" (ver render.js y
+  // section-types.js) para escalar junto con este valor. `rem` (lo que usan
+  // las clases normales de Tailwind, como "text-lg") ignora el font-size de
+  // cualquier ancestro y solo mira el de <html>, así que aplicar esto más
+  // arriba (o dejar clases en rem por debajo) no tenía ningún efecto.
+  outputText.style.fontSize = pageFontSizeSelect.value;
   pageSizeStyle.textContent = `@page { size: ${pageSizeSelect.value} ${pageOrientationSelect.value}; }`;
   document.title = pageTitleInput.value.trim() || 'Crochet';
 
@@ -37,6 +50,13 @@ export function renderPageMeta() {
   // pinta nada por sí sola en pantalla, solo la consume la regla @media
   // print de más abajo.
   document.documentElement.style.setProperty('--print-page-bg-color', pageBgColorInput.value);
+
+  // El color de acento se expone igual, como variable CSS, para que
+  // section-types.js pueda usarlo en el título/subtítulo (con una clase
+  // Tailwind `text-[var(--accent-color)]`) sin que ese módulo tenga que
+  // importar nada de aquí: ambos solo necesitan estar de acuerdo en el
+  // nombre de la variable.
+  document.documentElement.style.setProperty('--accent-color', pageAccentColorInput.value);
 }
 
 export function serializePageSettings() {
@@ -44,8 +64,11 @@ export function serializePageSettings() {
     title: pageTitleInput.value,
     author: pageAuthorInput.value,
     textColor: pageTextColorInput.value,
+    accentColor: pageAccentColorInput.value,
     bgColor: pageBgColorInput.value,
     font: pageFontSelect.value,
+    fontSize: pageFontSizeSelect.value,
+    align: pageAlignSelect.value,
     pageSize: pageSizeSelect.value,
     orientation: pageOrientationSelect.value,
   };
@@ -55,15 +78,27 @@ export function applyPageSettings(settings = {}) {
   pageTitleInput.value = settings.title || '';
   pageAuthorInput.value = settings.author || '';
   pageTextColorInput.value = settings.textColor || '#000000';
+  pageAccentColorInput.value = settings.accentColor || '#1d4ed8';
   pageBgColorInput.value = settings.bgColor || '#ffffff';
   pageFontSelect.value = settings.font || 'sans-serif';
+  pageFontSizeSelect.value = settings.fontSize || '1rem';
+  pageAlignSelect.value = settings.align || 'left';
   pageSizeSelect.value = settings.pageSize || 'A4';
   pageOrientationSelect.value = settings.orientation || 'portrait';
   renderPageMeta();
 }
 
 [pageTitleInput, pageAuthorInput].forEach(el => el.addEventListener('input', renderPageMeta));
-[pageTextColorInput, pageBgColorInput, pageFontSelect, pageSizeSelect, pageOrientationSelect].forEach(el => {
+[
+  pageTextColorInput,
+  pageAccentColorInput,
+  pageBgColorInput,
+  pageFontSelect,
+  pageFontSizeSelect,
+  pageAlignSelect,
+  pageSizeSelect,
+  pageOrientationSelect,
+].forEach(el => {
   el.addEventListener('input', renderPageMeta);
   el.addEventListener('change', renderPageMeta);
 });
diff --git a/js/render.js b/js/render.js
index 44aac9a..e2e6767 100644
--- a/js/render.js
+++ b/js/render.js
@@ -15,8 +15,11 @@ export function renderOutput() {
   // Título y autor del patrón (ver "Personalización de página"): son
   // configuración de todo el documento, no una sección más, así que se
   // pintan siempre delante, haya o no secciones añadidas.
-  appendOutputLine(outputText, 'h1', pageTitleInput.value.trim(), 'text-2xl font-bold mb-1');
-  appendOutputLine(outputText, 'p', pageAuthorInput.value.trim(), 'text-sm opacity-70 mb-2');
+  // Tamaños en "em" (no las clases normales de Tailwind, en "rem") para que
+  // escalen con el "Tamaño de letra" de #panel-output-text (ver
+  // page-settings.js): "rem" ignora el font-size de cualquier ancestro.
+  appendOutputLine(outputText, 'h1', pageTitleInput.value.trim(), 'text-[1.5em] font-bold mb-1');
+  appendOutputLine(outputText, 'p', pageAuthorInput.value.trim(), 'text-[0.875em] opacity-70 mb-2');
 
   // Si aún no se ha añadido ninguna sección, avisar en vez de dejar el
   // resultado vacío.
diff --git a/js/section-types.js b/js/section-types.js
index 22564d0..2dfaa07 100644
--- a/js/section-types.js
+++ b/js/section-types.js
@@ -135,8 +135,12 @@ const SECTION_TYPES = [
     create: (sectionData, container) => addTitleSection(addTitleBtn.dataset, sectionData?.text, container),
     matches: (section) => section.querySelector('.title-input'),
     serialize: (section, titleInput) => ({ type: 'title', text: getTranslations(titleInput) }),
+    // 'text-[var(--accent-color)]' lee la variable CSS que expone
+    // page-settings.js: así el título usa el color de acento elegido en
+    // "Personalización de página" sin que este módulo tenga que importar
+    // nada de allí, solo coincidir en el nombre de la variable.
     render: (section, titleInput, target) =>
-      appendOutputLine(target, 'h3', titleInput.value.trim(), 'text-lg font-bold mt-2 mb-1'),
+      appendOutputLine(target, 'h3', titleInput.value.trim(), 'text-[1.125em] font-bold mt-2 mb-1 text-[var(--accent-color)]'),
     getName: (titleInput) => titleInput.value.trim(),
   },
   {
@@ -146,7 +150,7 @@ const SECTION_TYPES = [
     matches: (section) => section.querySelector('.subtitle-input'),
     serialize: (section, subtitleInput) => ({ type: 'subtitle', text: getTranslations(subtitleInput) }),
     render: (section, subtitleInput, target) =>
-      appendOutputLine(target, 'h4', subtitleInput.value.trim(), 'text-base font-semibold mt-1 mb-1'),
+      appendOutputLine(target, 'h4', subtitleInput.value.trim(), 'text-[1em] font-semibold mt-1 mb-1 text-[var(--accent-color)]'),
     getName: (subtitleInput) => subtitleInput.value.trim(),
   },
   {
@@ -183,7 +187,7 @@ const SECTION_TYPES = [
       const text = noteInput.value.trim();
       if (!text) return;
       const note = document.createElement('div');
-      note.className = 'alert text-sm my-2';
+      note.className = 'alert text-[0.875em] my-2';
       const textColorInput = section.querySelector('.note-text-color');
       const bgColorInput = section.querySelector('.note-bg-color');
       if (textColorInput) note.style.color = textColorInput.value;