https://github.com/kenkyoo/mermaid-world-cup

Este proyecto utiliza **Mermaid.js**, una biblioteca que permite crear diagramas y gráficos directamente desde texto en Markdown. Representa las instancias finales de la Copa Mundial 2022, destacando los equipos y sus progresos desde los octavos de final hasta la final.
https://github.com/kenkyoo/mermaid-world-cup

html mermaid mermaid-diagrams mermaidjs world-cup-2022

Last synced: 4 months ago
JSON representation

Este proyecto utiliza **Mermaid.js**, una biblioteca que permite crear diagramas y gráficos directamente desde texto en Markdown. Representa las instancias finales de la Copa Mundial 2022, destacando los equipos y sus progresos desde los octavos de final hasta la final.

• Host: GitHub
• URL: https://github.com/kenkyoo/mermaid-world-cup
• Owner: Kenkyoo
• Created: 2024-12-02T08:32:24.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-12-02T09:15:59.000Z (11 months ago)
• Last Synced: 2024-12-29T17:36:24.649Z (10 months ago)
• Topics: html, mermaid, mermaid-diagrams, mermaidjs, world-cup-2022
• Language: HTML
• Homepage: https://kenkyoo.github.io/mermaid-world-cup/
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🌐 Diagrama de Instancias Finales - Copa Mundial 2022

Este proyecto utiliza **Mermaid.js**, una biblioteca que permite crear diagramas y gráficos directamente desde texto en Markdown. Representa las instancias finales de la Copa Mundial 2022, destacando los equipos y sus progresos desde los octavos de final hasta la final.

---

## 📋 Funcionalidades

- **Visualización con Mermaid.js**:

  - Dos diagramas interactivos muestran los equipos que compitieron en las instancias finales.

  - Una vista para cada lado del cuadro: 

    - **Argentina** avanzando hasta la victoria final.

    - **Francia**, el subcampeón, con su progreso.

- **Diseño Responsivo**:

  - Diagramas incrustados en un contenedor adaptable.

---

## 🛠️ Tecnologías Utilizadas

- **Mermaid.js**:

  - Genera gráficos en el navegador a partir de texto en un formato sencillo.

- **HTML5**:

  - Estructura básica de la página.

- **CSS**:

  - Estilo básico para el diseño.

- **JavaScript ES Modules**:

  - Importa Mermaid.js directamente desde una CDN.

---

⚠️ Notas Importantes

    Requiere un Navegador Moderno: Asegúrate de usar un navegador actualizado con soporte para ES Modules.

    Hosting Local: Si el archivo no funciona al abrirlo directamente, usa un servidor local (como live-server):

      npm install -g live-server

      live-server

📝 Licencia

Este proyecto está bajo la licencia MIT. Puedes usarlo, modificarlo y distribuirlo libremente.