From 8920047c55ad8e67840295f8677e073623e4fbd5 Mon Sep 17 00:00:00 2001
From: Pablo Moreno <pablo@kasfactory.net>
Date: Wed, 22 Jul 2026 11:26:57 +0200
Subject: [PATCH] feat: improved UI

---
 crochet/locale/en/LC_MESSAGES/django.po       | 169 ++++++++++--------
 crochet/locale/es/LC_MESSAGES/django.po       | 164 +++++++++--------
 crochet/static/js/account-settings-tabs.js    |  22 +++
 crochet/static/js/cover-image.js              |   3 +-
 crochet/static/js/dom-refs.js                 |   1 +
 .../templates/crochet/account_settings.html   | 101 +++++++----
 crochet/templates/crochet/pattern.html        |  73 +++++---
 7 files changed, 319 insertions(+), 214 deletions(-)
 create mode 100644 crochet/static/js/account-settings-tabs.js

diff --git a/crochet/locale/en/LC_MESSAGES/django.po b/crochet/locale/en/LC_MESSAGES/django.po
index b795050..13999b3 100644
--- a/crochet/locale/en/LC_MESSAGES/django.po
+++ b/crochet/locale/en/LC_MESSAGES/django.po
@@ -2,18 +2,18 @@ msgid ""
 msgstr ""
 "Project-Id-Version: crochet\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2026-07-22 08:00+0000\n"
+"POT-Creation-Date: 2026-07-22 08:53+0000\n"
 "Language: en\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
 #: crochet/forms.py:48 crochet/forms.py:96
-#: crochet/templates/crochet/account_settings.html:29
+#: crochet/templates/crochet/account_settings.html:49
 msgid "Email"
 msgstr "Email"
 
-#: crochet/forms.py:128 crochet/templates/crochet/account_settings.html:22
+#: crochet/forms.py:128 crochet/templates/crochet/account_settings.html:40
 msgid "Nombre para mostrar"
 msgstr "Display name"
 
@@ -34,7 +34,7 @@ msgstr ""
 "deleted. This action cannot be undone."
 
 #: crochet/templates/crochet/_account_delete_form.html:19
-#: crochet/templates/crochet/account_settings.html:48
+#: crochet/templates/crochet/account_settings.html:68
 msgid "Eliminar cuenta"
 msgstr "Delete account"
 
@@ -59,7 +59,7 @@ msgid "Contraseña actualizada."
 msgstr "Password updated."
 
 #: crochet/templates/crochet/_account_password_form.html:19
-#: crochet/templates/crochet/account_settings.html:36
+#: crochet/templates/crochet/account_settings.html:56
 #: crochet/templates/crochet/password_reset_confirm.html:30
 msgid "Cambiar contraseña"
 msgstr "Change password"
@@ -109,7 +109,7 @@ msgid "Actualizado el %(date)s"
 msgstr "Updated on %(date)s"
 
 #: crochet/templates/crochet/account_home.html:44
-#: crochet/templates/crochet/pattern.html:163
+#: crochet/templates/crochet/pattern.html:182
 msgid "Vista previa"
 msgstr "Preview"
 
@@ -128,11 +128,19 @@ msgstr "You don't have any patterns yet."
 msgid "Ajustes de la cuenta"
 msgstr "Account settings"
 
-#: crochet/templates/crochet/account_settings.html:41
-msgid "Volver a mis patrones"
-msgstr "Back to my patterns"
+#: crochet/templates/crochet/account_settings.html:30
+msgid "Perfil"
+msgstr "Profile"
 
-#: crochet/templates/crochet/account_settings.html:50
+#: crochet/templates/crochet/account_settings.html:31
+msgid "Seguridad"
+msgstr "Security"
+
+#: crochet/templates/crochet/account_settings.html:32
+msgid "Zona de peligro"
+msgstr "Danger zone"
+
+#: crochet/templates/crochet/account_settings.html:70
 msgid "Esto borrará tu cuenta y todos tus patrones de forma permanente."
 msgstr "This will permanently delete your account and all your patterns."
 
@@ -474,208 +482,216 @@ msgstr "More options"
 msgid "Guardado"
 msgstr "Saved"
 
-#: crochet/templates/crochet/pattern.html:72
-msgid "Personalización de página"
-msgstr "Page customization"
-
-#: crochet/templates/crochet/pattern.html:76
+#: crochet/templates/crochet/pattern.html:78
 msgid "Título del patrón"
 msgstr "Pattern title"
 
-#: crochet/templates/crochet/pattern.html:77
+#: crochet/templates/crochet/pattern.html:79
 msgid "Título del patrón..."
 msgstr "Pattern title..."
 
-#: crochet/templates/crochet/pattern.html:80
-msgid "Autor"
-msgstr "Author"
-
-#: crochet/templates/crochet/pattern.html:81
-msgid "Autor..."
-msgstr "Author..."
-
-#: crochet/templates/crochet/pattern.html:86
+#: crochet/templates/crochet/pattern.html:82
 msgid "Imagen de portada"
 msgstr "Cover image"
 
-#: crochet/templates/crochet/pattern.html:89
+#: crochet/templates/crochet/pattern.html:95
+msgid "Añadir imagen"
+msgstr "Add image"
+
+#: crochet/templates/crochet/pattern.html:98
+msgid "Cambiar"
+msgstr "Change"
+
+#: crochet/templates/crochet/pattern.html:103
 msgid "No se ha podido subir la imagen de portada. Inténtalo de nuevo."
 msgstr "Couldn't upload the cover image. Please try again."
 
-#: crochet/templates/crochet/pattern.html:103
-#: crochet/templates/crochet/pattern.html:187
+#: crochet/templates/crochet/pattern.html:114
+msgid "Personalización de página"
+msgstr "Page customization"
+
+#: crochet/templates/crochet/pattern.html:117
+msgid "Autor"
+msgstr "Author"
+
+#: crochet/templates/crochet/pattern.html:118
+msgid "Autor..."
+msgstr "Author..."
+
+#: crochet/templates/crochet/pattern.html:122
+#: crochet/templates/crochet/pattern.html:206
 msgid "Color del texto"
 msgstr "Text color"
 
-#: crochet/templates/crochet/pattern.html:107
+#: crochet/templates/crochet/pattern.html:126
 msgid "Color de acento (títulos)"
 msgstr "Accent color (headings)"
 
-#: crochet/templates/crochet/pattern.html:111
-#: crochet/templates/crochet/pattern.html:187
+#: crochet/templates/crochet/pattern.html:130
+#: crochet/templates/crochet/pattern.html:206
 msgid "Color de fondo"
 msgstr "Background color"
 
-#: crochet/templates/crochet/pattern.html:115
+#: crochet/templates/crochet/pattern.html:134
 msgid "Tipografía"
 msgstr "Font"
 
-#: crochet/templates/crochet/pattern.html:121
+#: crochet/templates/crochet/pattern.html:140
 msgid "Monoespaciada"
 msgstr "Monospace"
 
-#: crochet/templates/crochet/pattern.html:125
+#: crochet/templates/crochet/pattern.html:144
 msgid "Tamaño de letra"
 msgstr "Font size"
 
-#: crochet/templates/crochet/pattern.html:127
+#: crochet/templates/crochet/pattern.html:146
 msgid "Pequeño"
 msgstr "Small"
 
-#: crochet/templates/crochet/pattern.html:128
+#: crochet/templates/crochet/pattern.html:147
 msgid "Normal"
 msgstr "Normal"
 
-#: crochet/templates/crochet/pattern.html:129
+#: crochet/templates/crochet/pattern.html:148
 msgid "Grande"
 msgstr "Large"
 
-#: crochet/templates/crochet/pattern.html:133
+#: crochet/templates/crochet/pattern.html:152
 msgid "Alineación del texto"
 msgstr "Text alignment"
 
-#: crochet/templates/crochet/pattern.html:135
+#: crochet/templates/crochet/pattern.html:154
 msgid "Izquierda"
 msgstr "Left"
 
-#: crochet/templates/crochet/pattern.html:136
+#: crochet/templates/crochet/pattern.html:155
 msgid "Centrado"
 msgstr "Center"
 
-#: crochet/templates/crochet/pattern.html:137
+#: crochet/templates/crochet/pattern.html:156
 msgid "Justificado"
 msgstr "Justify"
 
-#: crochet/templates/crochet/pattern.html:141
+#: crochet/templates/crochet/pattern.html:160
 msgid "Tamaño de página"
 msgstr "Page size"
 
-#: crochet/templates/crochet/pattern.html:146
+#: crochet/templates/crochet/pattern.html:165
 msgid "Carta (Letter)"
 msgstr "Letter"
 
-#: crochet/templates/crochet/pattern.html:151
+#: crochet/templates/crochet/pattern.html:170
 msgid "Orientación"
 msgstr "Orientation"
 
-#: crochet/templates/crochet/pattern.html:153
+#: crochet/templates/crochet/pattern.html:172
 msgid "Vertical"
 msgstr "Portrait"
 
-#: crochet/templates/crochet/pattern.html:154
+#: crochet/templates/crochet/pattern.html:173
 msgid "Horizontal"
 msgstr "Landscape"
 
-#: crochet/templates/crochet/pattern.html:162
-#: crochet/templates/crochet/pattern.html:170
+#: crochet/templates/crochet/pattern.html:181
+#: crochet/templates/crochet/pattern.html:189
 msgid "Secciones"
 msgstr "Sections"
 
-#: crochet/templates/crochet/pattern.html:172
+#: crochet/templates/crochet/pattern.html:191
 msgid "Colapsar todo"
 msgstr "Collapse all"
 
-#: crochet/templates/crochet/pattern.html:172
+#: crochet/templates/crochet/pattern.html:191
 msgid "Expandir todo"
 msgstr "Expand all"
 
-#: crochet/templates/crochet/pattern.html:177
+#: crochet/templates/crochet/pattern.html:196
 msgid "Añadir sección"
 msgstr "Add section"
 
-#: crochet/templates/crochet/pattern.html:180
+#: crochet/templates/crochet/pattern.html:199
 msgid "Título"
 msgstr "Title"
 
-#: crochet/templates/crochet/pattern.html:180
+#: crochet/templates/crochet/pattern.html:199
 msgid "Título..."
 msgstr "Title..."
 
-#: crochet/templates/crochet/pattern.html:182
+#: crochet/templates/crochet/pattern.html:201
 msgid "Subtítulo"
 msgstr "Subtitle"
 
-#: crochet/templates/crochet/pattern.html:182
+#: crochet/templates/crochet/pattern.html:201
 msgid "Subtítulo..."
 msgstr "Subtitle..."
 
-#: crochet/templates/crochet/pattern.html:184
+#: crochet/templates/crochet/pattern.html:203
 msgid "Texto"
 msgstr "Text"
 
-#: crochet/templates/crochet/pattern.html:184
+#: crochet/templates/crochet/pattern.html:203
 msgid "Escribe aquí..."
 msgstr "Write here..."
 
-#: crochet/templates/crochet/pattern.html:186
-#: crochet/templates/crochet/pattern.html:187
+#: crochet/templates/crochet/pattern.html:205
+#: crochet/templates/crochet/pattern.html:206
 msgid "Nota"
 msgstr "Note"
 
-#: crochet/templates/crochet/pattern.html:186
+#: crochet/templates/crochet/pattern.html:205
 msgid "Escribe una nota o consejo..."
 msgstr "Write a note or tip..."
 
-#: crochet/templates/crochet/pattern.html:189
+#: crochet/templates/crochet/pattern.html:208
 msgid "Materiales"
 msgstr "Materials"
 
-#: crochet/templates/crochet/pattern.html:189
+#: crochet/templates/crochet/pattern.html:208
 msgid "Añadir material..."
 msgstr "Add material..."
 
-#: crochet/templates/crochet/pattern.html:189
+#: crochet/templates/crochet/pattern.html:208
 msgid "Añadir línea"
 msgstr "Add line"
 
-#: crochet/templates/crochet/pattern.html:191
-#: crochet/templates/crochet/pattern.html:193
+#: crochet/templates/crochet/pattern.html:210
+#: crochet/templates/crochet/pattern.html:212
 msgid "Imagen"
 msgstr "Image"
 
-#: crochet/templates/crochet/pattern.html:193
+#: crochet/templates/crochet/pattern.html:212
 msgid "No se ha podido subir la imagen. Inténtalo de nuevo."
 msgstr "Couldn't upload the image. Please try again."
 
-#: crochet/templates/crochet/pattern.html:195
+#: crochet/templates/crochet/pattern.html:214
 msgid "Patrón"
 msgstr "Pattern"
 
-#: crochet/templates/crochet/pattern.html:195
+#: crochet/templates/crochet/pattern.html:214
 msgid "Elementos"
 msgstr "Elements"
 
-#: crochet/templates/crochet/pattern.html:197
+#: crochet/templates/crochet/pattern.html:216
 msgid "Grupo"
 msgstr "Group"
 
-#: crochet/templates/crochet/pattern.html:201
+#: crochet/templates/crochet/pattern.html:220
 msgid "Arrastrar para reordenar"
 msgstr "Drag to reorder"
 
-#: crochet/templates/crochet/pattern.html:202
+#: crochet/templates/crochet/pattern.html:221
 msgid "Colapsar / expandir"
 msgstr "Collapse / expand"
 
-#: crochet/templates/crochet/pattern.html:203
+#: crochet/templates/crochet/pattern.html:222
 msgid "Duplicar sección"
 msgstr "Duplicate section"
 
-#: crochet/templates/crochet/pattern.html:204
+#: crochet/templates/crochet/pattern.html:223
 msgid "Eliminar sección"
 msgstr "Delete section"
 
-#: crochet/templates/crochet/pattern.html:205
+#: crochet/templates/crochet/pattern.html:224
 msgid ""
 "¿Seguro que quieres eliminar este grupo? Se eliminarán también todas las "
 "secciones que contiene."
@@ -683,7 +699,7 @@ msgstr ""
 "Are you sure you want to delete this group? All sections inside it will also "
 "be deleted."
 
-#: crochet/templates/crochet/pattern.html:210
+#: crochet/templates/crochet/pattern.html:229
 msgid "Añade una sección para ver aquí el resultado."
 msgstr "Add a section to see the result here."
 
@@ -813,6 +829,9 @@ msgstr "This pattern doesn't have any content yet."
 msgid "Tu cuenta se ha eliminado correctamente."
 msgstr "Your account has been deleted successfully."
 
+#~ msgid "Volver a mis patrones"
+#~ msgstr "Back to my patterns"
+
 #~ msgid "Ir a mis patrones"
 #~ msgstr "Go to my patterns"
 
diff --git a/crochet/locale/es/LC_MESSAGES/django.po b/crochet/locale/es/LC_MESSAGES/django.po
index 0d79eb3..1c41937 100644
--- a/crochet/locale/es/LC_MESSAGES/django.po
+++ b/crochet/locale/es/LC_MESSAGES/django.po
@@ -2,18 +2,18 @@ msgid ""
 msgstr ""
 "Project-Id-Version: crochet\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2026-07-22 08:00+0000\n"
+"POT-Creation-Date: 2026-07-22 08:53+0000\n"
 "Language: es\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
 #: crochet/forms.py:48 crochet/forms.py:96
-#: crochet/templates/crochet/account_settings.html:29
+#: crochet/templates/crochet/account_settings.html:49
 msgid "Email"
 msgstr ""
 
-#: crochet/forms.py:128 crochet/templates/crochet/account_settings.html:22
+#: crochet/forms.py:128 crochet/templates/crochet/account_settings.html:40
 msgid "Nombre para mostrar"
 msgstr ""
 
@@ -32,7 +32,7 @@ msgid ""
 msgstr ""
 
 #: crochet/templates/crochet/_account_delete_form.html:19
-#: crochet/templates/crochet/account_settings.html:48
+#: crochet/templates/crochet/account_settings.html:68
 msgid "Eliminar cuenta"
 msgstr ""
 
@@ -57,7 +57,7 @@ msgid "Contraseña actualizada."
 msgstr ""
 
 #: crochet/templates/crochet/_account_password_form.html:19
-#: crochet/templates/crochet/account_settings.html:36
+#: crochet/templates/crochet/account_settings.html:56
 #: crochet/templates/crochet/password_reset_confirm.html:30
 msgid "Cambiar contraseña"
 msgstr ""
@@ -105,7 +105,7 @@ msgid "Actualizado el %(date)s"
 msgstr ""
 
 #: crochet/templates/crochet/account_home.html:44
-#: crochet/templates/crochet/pattern.html:163
+#: crochet/templates/crochet/pattern.html:182
 msgid "Vista previa"
 msgstr ""
 
@@ -124,11 +124,19 @@ msgstr ""
 msgid "Ajustes de la cuenta"
 msgstr ""
 
-#: crochet/templates/crochet/account_settings.html:41
-msgid "Volver a mis patrones"
+#: crochet/templates/crochet/account_settings.html:30
+msgid "Perfil"
 msgstr ""
 
-#: crochet/templates/crochet/account_settings.html:50
+#: crochet/templates/crochet/account_settings.html:31
+msgid "Seguridad"
+msgstr ""
+
+#: crochet/templates/crochet/account_settings.html:32
+msgid "Zona de peligro"
+msgstr ""
+
+#: crochet/templates/crochet/account_settings.html:70
 msgid "Esto borrará tu cuenta y todos tus patrones de forma permanente."
 msgstr ""
 
@@ -442,214 +450,222 @@ msgstr ""
 msgid "Guardado"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:72
-msgid "Personalización de página"
-msgstr ""
-
-#: crochet/templates/crochet/pattern.html:76
+#: crochet/templates/crochet/pattern.html:78
 msgid "Título del patrón"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:77
+#: crochet/templates/crochet/pattern.html:79
 msgid "Título del patrón..."
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:80
-msgid "Autor"
-msgstr ""
-
-#: crochet/templates/crochet/pattern.html:81
-msgid "Autor..."
-msgstr ""
-
-#: crochet/templates/crochet/pattern.html:86
+#: crochet/templates/crochet/pattern.html:82
 msgid "Imagen de portada"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:89
-msgid "No se ha podido subir la imagen de portada. Inténtalo de nuevo."
+#: crochet/templates/crochet/pattern.html:95
+msgid "Añadir imagen"
+msgstr ""
+
+#: crochet/templates/crochet/pattern.html:98
+msgid "Cambiar"
 msgstr ""
 
 #: crochet/templates/crochet/pattern.html:103
-#: crochet/templates/crochet/pattern.html:187
+msgid "No se ha podido subir la imagen de portada. Inténtalo de nuevo."
+msgstr ""
+
+#: crochet/templates/crochet/pattern.html:114
+msgid "Personalización de página"
+msgstr ""
+
+#: crochet/templates/crochet/pattern.html:117
+msgid "Autor"
+msgstr ""
+
+#: crochet/templates/crochet/pattern.html:118
+msgid "Autor..."
+msgstr ""
+
+#: crochet/templates/crochet/pattern.html:122
+#: crochet/templates/crochet/pattern.html:206
 msgid "Color del texto"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:107
+#: crochet/templates/crochet/pattern.html:126
 msgid "Color de acento (títulos)"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:111
-#: crochet/templates/crochet/pattern.html:187
+#: crochet/templates/crochet/pattern.html:130
+#: crochet/templates/crochet/pattern.html:206
 msgid "Color de fondo"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:115
+#: crochet/templates/crochet/pattern.html:134
 msgid "Tipografía"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:121
+#: crochet/templates/crochet/pattern.html:140
 msgid "Monoespaciada"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:125
+#: crochet/templates/crochet/pattern.html:144
 msgid "Tamaño de letra"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:127
+#: crochet/templates/crochet/pattern.html:146
 msgid "Pequeño"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:128
+#: crochet/templates/crochet/pattern.html:147
 msgid "Normal"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:129
+#: crochet/templates/crochet/pattern.html:148
 msgid "Grande"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:133
+#: crochet/templates/crochet/pattern.html:152
 msgid "Alineación del texto"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:135
+#: crochet/templates/crochet/pattern.html:154
 msgid "Izquierda"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:136
+#: crochet/templates/crochet/pattern.html:155
 msgid "Centrado"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:137
+#: crochet/templates/crochet/pattern.html:156
 msgid "Justificado"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:141
+#: crochet/templates/crochet/pattern.html:160
 msgid "Tamaño de página"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:146
+#: crochet/templates/crochet/pattern.html:165
 msgid "Carta (Letter)"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:151
+#: crochet/templates/crochet/pattern.html:170
 msgid "Orientación"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:153
+#: crochet/templates/crochet/pattern.html:172
 msgid "Vertical"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:154
+#: crochet/templates/crochet/pattern.html:173
 msgid "Horizontal"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:162
-#: crochet/templates/crochet/pattern.html:170
+#: crochet/templates/crochet/pattern.html:181
+#: crochet/templates/crochet/pattern.html:189
 msgid "Secciones"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:172
+#: crochet/templates/crochet/pattern.html:191
 msgid "Colapsar todo"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:172
+#: crochet/templates/crochet/pattern.html:191
 msgid "Expandir todo"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:177
+#: crochet/templates/crochet/pattern.html:196
 msgid "Añadir sección"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:180
+#: crochet/templates/crochet/pattern.html:199
 msgid "Título"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:180
+#: crochet/templates/crochet/pattern.html:199
 msgid "Título..."
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:182
+#: crochet/templates/crochet/pattern.html:201
 msgid "Subtítulo"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:182
+#: crochet/templates/crochet/pattern.html:201
 msgid "Subtítulo..."
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:184
+#: crochet/templates/crochet/pattern.html:203
 msgid "Texto"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:184
+#: crochet/templates/crochet/pattern.html:203
 msgid "Escribe aquí..."
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:186
-#: crochet/templates/crochet/pattern.html:187
+#: crochet/templates/crochet/pattern.html:205
+#: crochet/templates/crochet/pattern.html:206
 msgid "Nota"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:186
+#: crochet/templates/crochet/pattern.html:205
 msgid "Escribe una nota o consejo..."
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:189
+#: crochet/templates/crochet/pattern.html:208
 msgid "Materiales"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:189
+#: crochet/templates/crochet/pattern.html:208
 msgid "Añadir material..."
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:189
+#: crochet/templates/crochet/pattern.html:208
 msgid "Añadir línea"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:191
-#: crochet/templates/crochet/pattern.html:193
+#: crochet/templates/crochet/pattern.html:210
+#: crochet/templates/crochet/pattern.html:212
 msgid "Imagen"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:193
+#: crochet/templates/crochet/pattern.html:212
 msgid "No se ha podido subir la imagen. Inténtalo de nuevo."
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:195
+#: crochet/templates/crochet/pattern.html:214
 msgid "Patrón"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:195
+#: crochet/templates/crochet/pattern.html:214
 msgid "Elementos"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:197
+#: crochet/templates/crochet/pattern.html:216
 msgid "Grupo"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:201
+#: crochet/templates/crochet/pattern.html:220
 msgid "Arrastrar para reordenar"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:202
+#: crochet/templates/crochet/pattern.html:221
 msgid "Colapsar / expandir"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:203
+#: crochet/templates/crochet/pattern.html:222
 msgid "Duplicar sección"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:204
+#: crochet/templates/crochet/pattern.html:223
 msgid "Eliminar sección"
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:205
+#: crochet/templates/crochet/pattern.html:224
 msgid ""
 "¿Seguro que quieres eliminar este grupo? Se eliminarán también todas las "
 "secciones que contiene."
 msgstr ""
 
-#: crochet/templates/crochet/pattern.html:210
+#: crochet/templates/crochet/pattern.html:229
 msgid "Añade una sección para ver aquí el resultado."
 msgstr ""
 
diff --git a/crochet/static/js/account-settings-tabs.js b/crochet/static/js/account-settings-tabs.js
new file mode 100644
index 0000000..da9f3ce
--- /dev/null
+++ b/crochet/static/js/account-settings-tabs.js
@@ -0,0 +1,22 @@
+// Panel lateral de ajustes de la cuenta (ver account_settings.html): solo
+// alterna qué <section data-settings-panel> se ve, todo en la misma
+// página. Los formularios de cada pestaña siguen siendo los mismos
+// fragmentos HTMX de siempre, esto no los toca.
+const tabLinks = document.querySelectorAll('[data-settings-tab]');
+const panels = document.querySelectorAll('[data-settings-panel]');
+
+function showTab(tabName) {
+  panels.forEach((panel) => {
+    panel.classList.toggle('hidden', panel.dataset.settingsPanel !== tabName);
+  });
+  tabLinks.forEach((link) => {
+    link.classList.toggle('menu-active', link.dataset.settingsTab === tabName);
+  });
+}
+
+tabLinks.forEach((link) => {
+  link.addEventListener('click', (event) => {
+    event.preventDefault();
+    showTab(link.dataset.settingsTab);
+  });
+});
diff --git a/crochet/static/js/cover-image.js b/crochet/static/js/cover-image.js
index 64dcb14..2a5ec5e 100644
--- a/crochet/static/js/cover-image.js
+++ b/crochet/static/js/cover-image.js
@@ -3,7 +3,7 @@
 // sección de tipo "Imagen"): esto es un atributo del patrón entero, así que
 // se sube y aplica en cuanto se elige el archivo, sin esperar a "Guardar".
 
-import { coverImageInput, coverImageLargeUrlInput, coverImagePreview } from './dom-refs.js';
+import { coverImageInput, coverImageLargeUrlInput, coverImagePlaceholder, coverImagePreview } from './dom-refs.js';
 import { getCsrfToken } from './csrf.js';
 import { renderOutput } from './render.js';
 
@@ -25,6 +25,7 @@ coverImageInput.addEventListener('change', async () => {
     const data = await response.json();
     coverImagePreview.src = data.thumbnailUrl;
     coverImagePreview.classList.remove('hidden');
+    coverImagePlaceholder.classList.add('hidden');
     // "Vista previa" (ver render.js) pinta la portada a partir de este
     // valor, igual que lee pageTitleInput/pageAuthorInput.
     coverImageLargeUrlInput.value = data.largeUrl;
diff --git a/crochet/static/js/dom-refs.js b/crochet/static/js/dom-refs.js
index ca5cb43..aac9088 100644
--- a/crochet/static/js/dom-refs.js
+++ b/crochet/static/js/dom-refs.js
@@ -27,4 +27,5 @@ export const pageSizeStyle = document.getElementById('page-size-style');
 // entero, igual que título/autor de arriba, no una sección más.
 export const coverImageInput = document.getElementById('cover-image-input');
 export const coverImagePreview = document.getElementById('cover-image-preview'); // Miniatura dentro del propio control de subida.
+export const coverImagePlaceholder = document.getElementById('cover-image-placeholder'); // Icono + texto que tapa la miniatura mientras no hay portada.
 export const coverImageLargeUrlInput = document.getElementById('cover-image-large-url'); // Leído por render.js para "Vista previa".
diff --git a/crochet/templates/crochet/account_settings.html b/crochet/templates/crochet/account_settings.html
index 424605f..e1018e3 100644
--- a/crochet/templates/crochet/account_settings.html
+++ b/crochet/templates/crochet/account_settings.html
@@ -1,5 +1,5 @@
 {% extends 'crochet/base.html' %}
-{% load i18n %}
+{% load static i18n %}
 
 {% block title %}{% trans 'Ajustes de la cuenta' %}{% endblock %}
 
@@ -14,43 +14,70 @@
 {% endblock %}
 
 {% block content %}
-  <main class="max-w-lg mx-auto px-4 py-8 flex flex-col gap-8">
-    <h1 class="text-2xl font-semibold">{% trans 'Ajustes de la cuenta' %}</h1>
+  <main class="max-w-4xl mx-auto px-4 py-8">
+    <h1 class="text-2xl font-semibold mb-6">{% trans 'Ajustes de la cuenta' %}</h1>
 
-    <section class="card bg-base-100 shadow border border-base-300">
-      <div class="card-body">
-        <h2 class="card-title text-lg">{% trans 'Nombre para mostrar' %}</h2>
-        {% include 'crochet/_account_display_name_form.html' %}
+    <div class="flex flex-col md:flex-row gap-8">
+      <!-- Panel lateral: solo cambia qué <section data-settings-panel> se
+           ve (ver account-settings-tabs.js), no hay URL ni petición nueva
+           por pestaña; los formularios de cada una siguen siendo los
+           mismos fragmentos HTMX de siempre. -->
+      <nav class="md:w-56 shrink-0 no-print">
+        <!-- w-full: .menu de daisyUI se ajusta al contenido por defecto
+             (no ocupa el 100% de su contenedor), así que sin esto quedaba
+             visiblemente más estrecho que las tarjetas de abajo en móvil. -->
+        <ul class="menu bg-base-100 rounded-box border border-base-300 p-2 w-full md:flex-col">
+          <li><a href="#" data-settings-tab="profile" class="menu-active">{% trans 'Perfil' %}</a></li>
+          <li><a href="#" data-settings-tab="security">{% trans 'Seguridad' %}</a></li>
+          <li><a href="#" data-settings-tab="danger" class="text-error">{% trans 'Zona de peligro' %}</a></li>
+        </ul>
+      </nav>
+
+      <div class="flex-1 min-w-0">
+        <section data-settings-panel="profile" class="flex flex-col gap-8">
+          <section class="card bg-base-100 shadow border border-base-300">
+            <div class="card-body">
+              <h2 class="card-title text-lg">{% trans 'Nombre para mostrar' %}</h2>
+              {% include 'crochet/_account_display_name_form.html' %}
+            </div>
+          </section>
+        </section>
+
+        <section data-settings-panel="security" class="hidden flex-col gap-8">
+          <section class="card bg-base-100 shadow border border-base-300">
+            <div class="card-body">
+              <h2 class="card-title text-lg">{% trans 'Email' %}</h2>
+              {% include 'crochet/_account_email_form.html' %}
+            </div>
+          </section>
+
+          <section class="card bg-base-100 shadow border border-base-300">
+            <div class="card-body">
+              <h2 class="card-title text-lg">{% trans 'Cambiar contraseña' %}</h2>
+              {% include 'crochet/_account_password_form.html' %}
+            </div>
+          </section>
+        </section>
+
+        <!-- Zona de peligro en su propia pestaña, no solo con border-error
+             de por sí: separada del resto de ajustes, no algo con lo que
+             te puedas topar sin querer bajando por la página. -->
+        <section data-settings-panel="danger" class="hidden flex-col gap-8">
+          <section class="card bg-base-100 shadow border border-error">
+            <div class="card-body">
+              <h2 class="card-title text-lg text-error">{% trans 'Eliminar cuenta' %}</h2>
+              <p class="text-sm text-base-content/70">
+                {% trans 'Esto borrará tu cuenta y todos tus patrones de forma permanente.' %}
+              </p>
+              {% include 'crochet/_account_delete_form.html' %}
+            </div>
+          </section>
+        </section>
       </div>
-    </section>
-
-    <section class="card bg-base-100 shadow border border-base-300">
-      <div class="card-body">
-        <h2 class="card-title text-lg">{% trans 'Email' %}</h2>
-        {% include 'crochet/_account_email_form.html' %}
-      </div>
-    </section>
-
-    <section class="card bg-base-100 shadow border border-base-300">
-      <div class="card-body">
-        <h2 class="card-title text-lg">{% trans 'Cambiar contraseña' %}</h2>
-        {% include 'crochet/_account_password_form.html' %}
-      </div>
-    </section>
-
-    <a href="{% url 'crochet:home' %}" class="link link-primary">{% trans 'Volver a mis patrones' %}</a>
-
-    <!-- Zona de peligro, aparte del resto (border-error): que se note a
-         simple vista que esto es irreversible, distinto de los ajustes de
-         arriba. -->
-    <section class="card bg-base-100 shadow border border-error">
-      <div class="card-body">
-        <h2 class="card-title text-lg text-error">{% trans 'Eliminar cuenta' %}</h2>
-        <p class="text-sm text-base-content/70">
-          {% trans 'Esto borrará tu cuenta y todos tus patrones de forma permanente.' %}
-        </p>
-        {% include 'crochet/_account_delete_form.html' %}
-      </div>
-    </section>
+    </div>
   </main>
 {% endblock %}
+
+{% block extra_js %}
+  <script defer src="{% static 'js/account-settings-tabs.js' %}"></script>
+{% endblock %}
diff --git a/crochet/templates/crochet/pattern.html b/crochet/templates/crochet/pattern.html
index 5d88f6b..99fb4a6 100644
--- a/crochet/templates/crochet/pattern.html
+++ b/crochet/templates/crochet/pattern.html
@@ -68,36 +68,55 @@
 
     <div class="p-4 pt-0">
 
+      <!-- Título e imagen de portada, fuera de "Personalización de página"
+           (aparte, no-print igual que el resto de controles del editor):
+           son la identidad del patrón, no un ajuste de estilo, así que se
+           quedan siempre a la vista en vez de detrás de un <details>
+           colapsado. -->
+      <div class="no-print">
+        <label class="flex flex-col gap-1 flex-1 mb-4">
+          <span class="text-sm">{% trans 'Título del patrón' %}</span>
+          <input id="page-title-input" type="text" class="input input-bordered" placeholder="{% trans 'Título del patrón...' %}">
+        </label>
+        <div class="flex flex-col gap-1 mb-4">
+          <span class="text-sm">{% trans 'Imagen de portada' %}</span>
+          <!-- <label for="cover-image-input">, no un botón de archivo
+               nativo: al pulsar sobre el propio recuadro (miniatura o
+               marcador de posición) se abre el selector de archivos igual
+               que con el input nativo, sin JS propio para eso. -->
+          <label for="cover-image-input"
+            class="group relative flex w-full max-w-md h-56 items-center justify-center overflow-hidden rounded-box border-2 border-dashed border-base-300 bg-base-200/40 cursor-pointer transition-colors hover:border-primary">
+            <img id="cover-image-preview" alt=""
+              src="{% if pattern.cover_image_thumbnail %}{{ pattern.cover_image_thumbnail.url }}{% endif %}"
+              class="absolute inset-0 h-full w-full object-cover{% if not pattern.cover_image_thumbnail %} hidden{% endif %}">
+            <span id="cover-image-placeholder"
+              class="flex flex-col items-center gap-2 px-2 text-center text-sm text-base-content/50{% if pattern.cover_image_thumbnail %} hidden{% endif %}">
+              <span class="text-5xl">🖼️</span>
+              {% trans 'Añadir imagen' %}
+            </span>
+            <span class="absolute inset-0 flex items-center justify-center bg-black/50 text-sm font-medium text-white opacity-0 transition-opacity group-hover:opacity-100">
+              {% trans 'Cambiar' %}
+            </span>
+          </label>
+          <input id="cover-image-input" type="file" accept="image/*" class="sr-only"
+            data-upload-url="{% url 'crochet:pattern_cover_upload' pattern.uuid %}"
+            data-error-message="{% trans 'No se ha podido subir la imagen de portada. Inténtalo de nuevo.' %}">
+          <!-- Tamaño "large" (no la miniatura de arriba, pensado solo para
+               ese control): lo lee render.js para pintarla en "Vista
+               previa", debajo del título, igual que hace
+               render_pattern_html() en la vista de solo lectura/PDF. -->
+          <input type="hidden" id="cover-image-large-url"
+            value="{% if pattern.cover_image_large %}{{ pattern.cover_image_large.url }}{% endif %}">
+        </div>
+      </div>
+
       <details class="border border-base-300 rounded-box p-4 mb-4 no-print">
         <summary class="text-lg font-semibold cursor-pointer select-none">{% trans '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">{% trans 'Título del patrón' %}</span>
-              <input id="page-title-input" type="text" class="input input-bordered" placeholder="{% trans 'Título del patrón...' %}">
-            </label>
-            <label class="flex flex-col gap-1 flex-1">
-              <span class="text-sm">{% trans 'Autor' %}</span>
-              <input id="page-author-input" type="text" class="input input-bordered" placeholder="{% trans 'Autor...' %}">
-            </label>
-          </div>
-          <div class="flex items-end gap-4">
-            <label class="flex flex-col gap-1 flex-1">
-              <span class="text-sm">{% trans 'Imagen de portada' %}</span>
-              <input id="cover-image-input" type="file" accept="image/*" class="file-input file-input-bordered"
-                data-upload-url="{% url 'crochet:pattern_cover_upload' pattern.uuid %}"
-                data-error-message="{% trans 'No se ha podido subir la imagen de portada. Inténtalo de nuevo.' %}">
-            </label>
-            <img id="cover-image-preview" alt=""
-              src="{% if pattern.cover_image_thumbnail %}{{ pattern.cover_image_thumbnail.url }}{% endif %}"
-              class="w-24 h-24 object-cover rounded-box border border-base-300{% if not pattern.cover_image_thumbnail %} hidden{% endif %}">
-            <!-- Tamaño "large" (no el thumbnail de arriba, pensado solo
-                 para ese control): lo lee render.js para pintarla en
-                 "Vista previa", debajo del título, igual que hace
-                 render_pattern_html() en la vista de solo lectura/PDF. -->
-            <input type="hidden" id="cover-image-large-url"
-              value="{% if pattern.cover_image_large %}{{ pattern.cover_image_large.url }}{% endif %}">
-          </div>
+          <label class="flex flex-col gap-1">
+            <span class="text-sm">{% trans 'Autor' %}</span>
+            <input id="page-author-input" type="text" class="input input-bordered" placeholder="{% trans 'Autor...' %}">
+          </label>
           <div class="flex flex-wrap items-end gap-4">
             <label class="flex flex-col gap-1">
               <span class="text-sm">{% trans 'Color del texto' %}</span>