Mario55666 · Mario55666 · Jul 16, 2026 · Jul 16, 2026 · Jul 17, 2026 · Jul 17, 2026
diff --git a/README.md b/README.md
@@ -169,7 +169,7 @@ In order to run this project you need:
 <li>
 <details>
 <summary>Choice Picker</summary>
-<p>A cutting-edge web application leveraging HTML, CSS, and JavaScript technologies to facilitate user selection from a customizable range of options. The application features an intuitive interface with a text input field, where users can enter their preferred choices. Upon submission, the system randomly cycles through the entered options and lands on a selected choice, which is prominently highlighted with a distinct color scheme, distinguishing it from the other options.</p>
+<p>A cutting-edge web application leveraging HTML, CSS, and JavaScript technologies to facilitate user selection from a customizable range of options. The application features an intuitive interface with a text input field, where users can enter their preferred choices. Upon submission, the system randomly cycles through the entered options and lands on a selected choice, which is prominently highlighted with a distinct color scheme, distinguishing it from the other options.</p>
 <ul>
 <li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/ChoicePicker/">Live Demo</a></li>
 <li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/ChoicePicker">Source</a></li>
@@ -595,6 +595,36 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>EPUB Reader (Fixed Layout)</summary>
+<p>A vanilla HTML, CSS and JavaScript EPUB reader built on epub.js. It detects EPUB3 fixed-layout ("diseño fijo") books — comics and illustrated books with CSS keyframe animations and embedded JavaScript — and renders them page by page at their intended size instead of reflowing the text, re-triggering each page's animations and scripts as you navigate. Drag and drop (or open) any .epub file to try it.</p>
+<ul>
+<li><a href="https://github.com/Mario55666/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/EpubReader">Source</a></li>
+</ul> 
+</details>
+</li>
+
+<li>
+<details>
+<summary>EPUB Visual Editor</summary>
+<p>A vanilla HTML, CSS and JavaScript web app to read and visually edit an EPUB's HTML, CSS and text. Load a .epub, browse its DOM tree per chapter, click any element to highlight and select it, edit its HTML or CSS (CodeMirror editors with syntax highlighting, CSS property autocomplete and a common-properties panel with color/font/size pickers), edit text inline or in bulk, undo/redo your changes, and export the result as a new .epub file.</p>
+<ul>
+<li><a href="https://github.com/Mario55666/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/EpubVisualEditor">Source</a></li>
+</ul> 
+</details>
+</li>
+
+<li>
+<details>
+<summary>EPUB Interactive Button Catalog</summary>
+<p>A self-contained interactive button catalog designed to be embedded as a chapter of a scripted EPUB3. Six CSS hover effects (sliding underline, liquid fill, double-sided 3D flip, holographic gradient, lift with shadow, border draw — inspired by Prismic's CSS hover effects article) paired with Anime.js click animations using camelCase CSS properties. Includes a book-format 600x800 container, a button navigation list, three modal dialogs (welcome, confirmation, test), an event diagnostic tool, and robust click+touchend handling that solves the classic "buttons don't respond" problem in EPUB readers. Ships both as a single HTML file and as a ready-to-read .epub with Anime.js bundled inside.</p>
+<ul>
+<li><a href="https://github.com/Mario55666/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/EpubButtonCatalog">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

diff --git a/Source-Code/EpubButtonCatalog/README.md b/Source-Code/EpubButtonCatalog/README.md
@@ -0,0 +1,58 @@
+# Catálogo de Botones Interactivos para EPUB3
+
+Catálogo autocontenido de **botones con efectos hover en CSS y animaciones de clic con [Anime.js](https://animejs.com/v3/documentation/#cssProperties)**, diseñado para insertarse como capítulo de un **EPUB3 interactivo** (con la propiedad `scripted`). Todo el HTML, CSS y JavaScript vive en un solo archivo, comentado en español.
+
+## Contenido
+
+```
+EpubButtonCatalog/
+├── catalogo-botones.html    # El catálogo completo (HTML + CSS + JS en un archivo)
+├── catalogo-botones.epub    # EPUB3 ya empaquetado y listo para probar en un lector
+├── make_catalog_epub.py     # Script que genera el .epub a partir del .html
+└── README.md
+```
+
+## Los 6 efectos hover (inspirados en [Prismic — CSS hover effects](https://prismic.io/blog/css-hover-effects))
+
+| # | Botón | Efecto hover | Animación de clic (Anime.js, camelCase) |
+|---|-------|--------------|------------------------------------------|
+| 1 | Subrayado deslizante | Línea que crece bajo el texto | Rebote elástico (`scale`) |
+| 2 | Relleno líquido | Ola que inunda el fondo | Cambio de color (`backgroundColor`) |
+| 3 | Tarjeta de dos caras | Giro 3D que muestra el reverso | Giro completo (`rotateY`) |
+| 4 | Holográfico | Degradado multicolor + brillo | Pulso de radio (`borderRadius`) |
+| 5 | Elevación con sombra | Se levanta de la página | Sacudida (`translateX`) |
+| 6 | Borde dibujado | El marco se dibuja solo | Espaciado de letras (`letterSpacing`) |
+
+## Componentes de la interfaz
+
+- **Contenedor tipo libro** de 600×800 px con scroll interno; el contenido es fluido (reflowable) dentro de él, y el `<meta name="viewport" content="width=600, height=800"/>` hace que los visores que respetan el formato del documento (como el Editor Visual de EPUB de esta colección) lo enmarquen con proporción de libro.
+- **Lista de botones**: panel desplegable que enumera los 6 botones; al tocar uno, la vista se desplaza hasta él y lo resalta.
+- **Tres diálogos modales** (implementados con divs superpuestos, por compatibilidad con motores que aún no soportan `dialog`):
+  - **Bienvenida** al cargar la página, explicando el catálogo.
+  - **Confirmación** al tocar cualquier botón: *"Efecto aplicado correctamente sobre [nombre del botón]"*.
+  - **Prueba** con el botón "Probar efecto": *"Prueba realizada. Revisa la previsualización para ver el efecto en acción."*
+- **Diagnóstico de eventos**: botón que verifica y reporta si JavaScript está activo, si Anime.js cargó, cuántos oyentes de eventos hay registrados y si el entorno tiene soporte táctil.
+
+## La solución al problema de los clics en lectores EPUB
+
+Los botones fallan en lectores EPUB por tres causas típicas, y el código las ataca todas:
+
+1. **El visor entrega eventos táctiles, no clics.** Cada acción se registra con `addEventListener` tanto para `click` como para `touchend`, así el toque responde de inmediato sin depender del clic sintético.
+2. **Escuchar ambos eventos dispara la acción dos veces.** `preventDefault()` en `touchend` cancela el clic emulado, y un sello de tiempo ignora cualquier clic que llegue menos de 700 ms después de un toque (verificado con prueba automatizada: exactamente 1 disparo por tap).
+3. **El visor tiene JavaScript desactivado.** Eso no puede arreglarse desde el código, pero se hace visible al instante: la insignia de estado dice "JavaScript inactivo" por defecto y solo el propio script la cambia a "activo". Si la ves roja dentro de un lector, ya sabes la causa.
+
+Además, `touch-action: manipulation` elimina el retraso de ~300 ms del doble toque en visores móviles, y todo botón responde visualmente incluso sin Anime.js (animación CSS de respaldo) para que el tacto nunca parezca "muerto".
+
+## Cómo usar
+
+- **En el navegador**: abre `catalogo-botones.html` directamente (carga Anime.js desde CDN, necesita conexión).
+- **En un lector EPUB**: abre `catalogo-botones.epub` (lleva Anime.js empaquetado dentro, funciona sin conexión). Probado con lectores basados en navegador; en lectores con JavaScript desactivado, la insignia roja lo indica.
+- **Para regenerar el EPUB**: descarga `anime.min.js` (v3) a `vendor/anime.min.js` y ejecuta `python3 make_catalog_epub.py`.
+
+## Nota sobre el Editor Visual de EPUB
+
+El proyecto hermano `EpubVisualEditor` puede abrir este EPUB: el visor de edición muestra el contenido **sin ejecutar sus scripts** (aislamiento deliberado del sandbox), y el botón **"Probar como lector"** lo abre en una ventana emergente **con los scripts activos**, donde los botones, diálogos y animaciones funcionan exactamente como en un lector real.
+
+## Créditos
+
+Curso de Infografía 2026 · Mg Mario Quiroz Martinez
diff --git a/Source-Code/EpubButtonCatalog/catalogo-botones.epub b/Source-Code/EpubButtonCatalog/catalogo-botones.epub