feat: added customization options

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>