REPOSITORY OVERVIEWLive repository statistics
★ 0Stars
⑂ 0Forks
◯ 0Open issues
◉ 0Watchers
42/100
OPENREPOHUB HEALTH SIGNALLimited signals
A transparent discovery signal based on current public GitHub metadata.
Recent activity35% weight
52 Community adoption25% weight
0 Maintenance state20% weight
100 License clarity10% weight
0 Project information10% weight
35 This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
README preview
Modelo de 4 Partes — Ecosistema de Pagos 💳
Diagrama interactivo del modelo de 4 partes para pagos con tarjeta. Herramienta educativa y de presentación para entender el flujo de transacciones.

🎯 Demo
Ver Demo en Vivo
📸 Preview
👤 Tarjetahabiente ──────────────► 🏪 Comercio
│ │
│ │
│ 🌐 Marcas │
│ Visa/MC/Amex │
│ │
▼ ▼
🏛️ Banco Emisor ◄────────────── 🏦 Adquirente
(MP Emisor) (MP Operador)
✨ Características
- 🎬 Animación paso a paso - Visualiza el flujo completo de una transacción
- 🖱️ Interactivo - Click en actores para ver detalles
- 👁️ Múltiples vistas - Flujo completo, MP Operador, MP Emisor, Interco
- 💰 Desglose de fees - Interchange, Scheme Fee, MDR
- ⌨️ Keyboard shortcuts - SPACE para play/pause, ESC para reset
- 📱 Responsive - Funciona en desktop y mobile
🏗️ Estructura del Proyecto
modelo-4-partes/
├── index.html # HTML principal
├── css/
│ ├── variables.css # Variables de diseño (colores, espacios)
│ ├── base.css # Estilos base y reset
│ ├── header.css # Estilos del header
│ ├── actors.css # Estilos de las tarjetas de actores
│ ├── connections.css # Estilos de conexiones SVG
│ ├── sidebar.css # Estilos del panel lateral
│ └── animations.css # Animaciones CSS
├── js/
│ ├── data/
│ │ ├── actors.js # Datos de los actores
│ │ ├── steps.js # Pasos del flujo
│ │ └── fees.js # Información de fees por país
│ ├── components/
│ │ ├── header.js # Componente header
│ │ ├── diagram.js # Componente diagrama
│ │ └── sidebar.js # Componente sidebar
│ ├── core/
│ │ ├── state.js # Manejo de estado global
│ │ └── animation.js # Controlador de animaciones
│ └── app.js # Inicialización principal
└── README.md
🚀 Cómo usar
Opción 1: GitHub Pages (Recomendado)
- Fork este repositorio
- Ve a Settings → Pages
- En "Source", selecciona "main" branch
- Tu sitio estará en
https://tu-usuario.github.io/modelo-4-partes/
Opción 2: Local
- Clona el repositorio
ALGORITHMICALLY RELATEDSimilar Open-Source Projects
Selected from shared topics, language and repository description—not editorial ratings.
Esta es una traducción de la serie de libros de You Don't Know JS (book series), la cual es una serie de 6 libros que navegan profundamente en los mecanismos básicos y avanzados del lenguaje JavaScript. La primera edición de la serie está ahora completa.
64/100 healthActive repositoryHas homepage
No license#es6#es6-classes#es6-javascript#es6-promises
⑂ 68 forks◯ 2 issuesUpdated Jun 22, 2026
Project homepage ↗Código del tutorial: Crea una Página Estilo Netflix con HTML CSS y Javascript
34/100 healthActive repository
CSSNo license
⑂ 71 forks◯ 3 issuesUpdated Mar 20, 2025