Vocabulary-flashcards

Tarjetas de vocabulario de inglés con traducción y ejemplo en contexto

Nota: La aplicación es un single-file. Todo el código (HTML, CSS y JavaScript) está contenido en un único archivo para facilitar su distribución y uso offline.

🎮 Cómo Usar

Interacción Individual

• Click/Tap en cualquier tarjeta para voltearla
• Frente: muestra la palabra en inglés, emoji y categoría
• Reverso: muestra la traducción al español y ejemplo de uso

Controles Globales

| Botón | Función | |——-|———| | 🔄 Flip All | Voltea todas las tarjetas simultáneamente | | ↺ Reset All | Devuelve todas las tarjetas a su posición inicial |

Indicadores de Progreso

• Contador: Muestra “Revealed: X / 15”
• Barra de progreso: Visualización gráfica del avance

🎨 Diseño Visual

• Paleta de colores: Gradiente oscuro (#1a1a2e → #0f3460) con acentos naranja/dorado (#f7971e, #ffd200)
• Tipografía: Segoe UI (system font stack)
• Efectos:
  • Sombras suaves en tarjetas
  • Bordes gradiente en frente de tarjetas
  • Animación de entrada escalonada (stagger)

📱 Responsive Breakpoints

Breakpoint	Columnas	Altura tarjeta
< 600px	1	200px
601-900px	2	220px
901-1200px	3	220px
> 1200px	4+	220px

👨‍🏫 Contexto Educativo

Institución: Institución Educativa Cisneros / Liceo Cisneros
Asignatura: Lengua Extranjera - Inglés
Grado: 11°
Nivel: A1-A2 (Principiante a Pre-intermedio)

📝 Créditos

Diseñado por: Profesor Edgar Herrera Morales
Tecnologías de IA utilizadas:

• Pollinations.AI - Generación de contenido
• Anthropic Claude.ai (Sonnet 4.6) - Asistencia en desarrollo

---

⭐ Perfecto para: Clases de inglés, estudio individual, repaso de vocabulario escolar

📄 Licencia: Uso educativo libre

This site is open source. Improve this page.