https://github.com/tufulbo/tufulbo.github.io
Soccer Lineup Maker (Pickup Soccer organizer)
https://github.com/tufulbo/tufulbo.github.io
football futbol lineup open-source organizer soccer sport sports
Last synced: 3 months ago
JSON representation
Soccer Lineup Maker (Pickup Soccer organizer)
- Host: GitHub
- URL: https://github.com/tufulbo/tufulbo.github.io
- Owner: tufulbo
- Created: 2025-05-02T00:13:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-10-21T07:53:06.000Z (11 months ago)
- Last Synced: 2025-10-21T09:35:05.097Z (11 months ago)
- Topics: football, futbol, lineup, open-source, organizer, soccer, sport, sports
- Language: JavaScript
- Homepage: https://tufulbo.github.io/
- Size: 217 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⚽ Soccer Lineup Maker (Organizador de Formaciones)
Una aplicación web para crear y compartir alineaciones de partidos de fútbol, con un campo interactivo y controles sencillos.
**Desplegada en:** [https://tufulbo.github.io](https://tufulbo.github.io)
---
## ✨ Características
- **Configura el partido:** Ajusta hora, costo y formación (5v5, 6v6, 7v7).
- **Organiza equipos:** Ingresa nombres de jugadores y genera dos equipos automáticamente.
- **Campo interactivo:** Intercambia posiciones de jugadores con clics.
- **Comparte fácilmente:**
- Copia alineaciones como texto.
- Genera imágenes (720x1080 px, optimizadas para WhatsApp).
- **Diseño responsivo:** Funciona en móviles, tabletas y escritorios.
- **Favicon SVG:** Ícono de página definido en el HTML.
---
## 🛠 Tecnologías
- **HTML:** Estructura (`index.html`)
- **CSS:** Estilos responsivos (`styles.css`)
- **JavaScript:** Interactividad y generación de imágenes con [html2canvas](https://html2canvas.hertzen.com/) (`script.js`)
- **GitHub Pages:** Hospedaje
---
## 🚀 Cómo Usar
### En GitHub Pages
1. Visita: [https://tufulbo.github.io](https://tufulbo.github.io)
2. Los cambios en la rama `main` se reflejan en 1 a 10 minutos.
### Localmente
```bash
git clone https://github.com/juancruzdal/juancruzdal.github.io.git
cd juancruzdal.github.io
npx http-server
```
Accede a: [http://localhost:8080](http://localhost:8080)
---
## 📋 Instrucciones
1. Ajusta hora, costo y formación.
2. Ingresa nombres de jugadores (uno por línea) y haz clic en **Generar Equipos**.
3. Intercambia jugadores en el campo con clics.
4. Usa los botones **Compartir**, **Copiar Imagen** o **Copiar Texto** para compartir.
---
## 📂 Estructura del Proyecto
```
juancruzdal.github.io/
├── index.html # Página principal
├── styles.css # Estilos
├── script.js # Lógica JavaScript
└── README.md # Documentación
```
---
## 📝 Notas
- **WhatsApp:** Las imágenes generadas (720x1080 px) están optimizadas para vistas previas.
- **Compatibilidad:** El favicon SVG funciona en navegadores modernos.
### 🚧 Mejoras futuras
- Guardar alineaciones localmente.
- Personalizar colores del campo.
---
## 🤝 Contribuir
1. Haz un **fork** del repositorio.
2. Crea una nueva rama:
```bash
git checkout -b mi-funcionalidad
```
3. Realiza tus cambios y haz commit:
```bash
git commit -m "Nueva funcionalidad"
```
4. Sube tu rama:
```bash
git push origin mi-funcionalidad
```
5. Crea un **Pull Request**.
---
## 📜 Licencia
Distribuido bajo la licencia **MIT**.
---
## 📬 Contacto
Creado por [juancruzdal](https://github.com/juancruzdal).
¿Sugerencias o problemas? ¡[Abre un issue](https://github.com/juancruzdal/juancruzdal.github.io/issues)!