feat: initial commit

2026-07-08 13:24:48 +02:00
commit cc1fab88ec
4 changed files with 607 additions and 0 deletions
@@ -0,0 +1,65 @@
+<!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>
+</head>
+
+<body>
+  <main>
+
+    <div class="flex gap-4 p-4 items-start">
+
+      <section id="panel-top" class="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>
+          <div class="flex gap-2">
+            <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>
+          </div>
+        </div>
+        <div class="flex 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-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>
+        </div>
+        <div id="panel-top-sections" class="flex flex-col gap-4"
+          data-drag-title="Arrastrar para reordenar"
+          data-collapse-title="Colapsar / expandir"
+          data-remove-title="Eliminar sección"></div>
+      </section>
+
+      <section id="panel-output" class="w-1/2 border border-base-300 rounded-box p-4">
+        <div class="flex items-center justify-between mb-2 no-print">
+          <h2 class="text-lg font-semibold">Vista previa</h2>
+          <button id="export-pdf" type="button" class="btn btn-sm">Exportar a PDF</button>
+        </div>
+        <div id="panel-output-text" class="text-sm"
+          data-empty-message="Añade una sección para ver aquí el resultado."></div>
+      </section>
+
+    </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" id="1"> PB</li>
+      <li class="my-2 breadcrumb cursor-pointer" id="2">Disminución</li>
+    </ul>
+  </main>
+</body>
+<script src="js/main.js"></script>
+
+</html>