🧩 Mosaico Digital Interactivo

Aplicación web que permite crear composiciones visuales en formato de grilla a partir de imágenes, videos y archivos HTML, generando automáticamente un archivo HTML descargable listo para compartir.

---

🚀 Características

• 📁 Carga múltiple de archivos:

  • Imágenes (.jpg, .png, etc.)
  • Videos (.mp4)
  • Archivos HTML interactivos

• 🧱 Generación automática de mosaicos en grilla

• 📐 Selección de relación de aspecto:

  • 1:1
  • 16:9
  • 9:16
  • 3:4
  • 4:3

• 🎯 Adaptación inteligente:

  • Si hay un número impar de elementos, el último panel se expande automáticamente

• 🔍 Lightbox para visualización ampliada de imágenes

• 📱 Diseño responsive (adaptado a móviles)

• 🖨️ Optimización para impresión

• 💾 Exportación automática a HTML independiente (todo embebido en Base64)

---

🧠 ¿Para qué sirve?

Esta herramienta es ideal para:

• 📚 Educación (presentaciones visuales, contenidos didácticos)
• 🎨 Portafolios creativos
• 📊 Visualización de proyectos
• 📰 Narrativas visuales
• 🧩 Integración de apps interactivas en grillas

---

🖥️ Uso

1. Abre el archivo index.html en tu navegador
2. Ingresa un título para tu mosaico
3. Selecciona la relación de aspecto
4. Carga tus archivos (imágenes, videos o HTML)
5. Haz clic en "Generar y Descargar HTML"
6. Se descargará un archivo listo para usar

---

⚙️ Tecnologías utilizadas

• HTML5
• CSS3 (Flexbox + Grid + Responsive Design)
• JavaScript (Vanilla JS)
• FileReader API (para conversión a Base64)

---

📁 Estructura del proyecto

/proyecto │── index.html │── js/ │ └── main.js

---

🔧 Funcionamiento técnico

• Los archivos cargados se convierten a Base64
• Se generan dinámicamente paneles según el tipo de contenido:
  • <img> para imágenes
  • <video> para videos
  • <iframe> para HTML
• Se construye una plantilla HTML completa embebida
• Se descarga automáticamente como archivo independiente

---

✨ Características destacadas

• No requiere backend
• No depende de librerías externas
• Funciona completamente en el navegador
• Genera contenido portable (offline-ready)

---

👨💻 Autor

Juan Guillermo Rivera Berrío

---

📌 Notas futuras (mejoras posibles)

• Drag & drop de archivos
• Reordenamiento de paneles
• Edición de textos por panel
• Exportación a PDF
• Plantillas de diseño predefinidas

---

📄 Licencia

Este proyecto puede ser utilizado con fines educativos y personales.