pack de iconos
This commit is contained in:
@@ -0,0 +1,129 @@
|
||||
# AGENTS.md - Directrices para el Agente
|
||||
|
||||
## Preferencias de Comportamiento
|
||||
|
||||
- **Idioma**: Responder siempre en español.
|
||||
- **Commits**: Redactar en inglés, usando `feat:`, `fix:`, `docs:`, `style:`, `refactor:`, `test:`, `chore:`
|
||||
- **Seguridad**: Nunca modificar archivos sin confirmación previa
|
||||
- **Proactividad**: Sugerir mejoras durante análisis del código
|
||||
|
||||
## Stack Tecnológico Habitual (Backend)
|
||||
|
||||
- **Lenguaje**: Python 3.10+
|
||||
- **Framework (POR DEFECTO)**: Django
|
||||
- **Alternativa**: FastAPI (solo si solicitado)
|
||||
- **Base de datos**: MySQL/InnoDB (PostgreSQL solo si solicitado)
|
||||
- **ORM**: Django ORM (SQLAlchemy para FastAPI)
|
||||
- **Migraciones**: Django nativo (`makemigrations`/`migrate`, Alembic si es FastAPI)
|
||||
|
||||
## Stack Tecnológico Habitual (Frontend y Estilos)
|
||||
|
||||
- **Lenguaje**: TypeScript (siempre que haya cliente separada con React/Vue/Angular)
|
||||
- **Estilos**: Tailwind CSS (utility-first) sobre CSS puro
|
||||
|
||||
## Convenciones de Desarrollo
|
||||
|
||||
- **Variables de entorno**: Usar `.env` + `python-dotenv`/`django-environ`, nunca hardcodear credenciales
|
||||
- **Dependencias**: Mantener actualizado `requirements.txt` o `pyproject.toml`
|
||||
- **Estructura**: Separación clara (configuración, modelos, servicios, utilidades)
|
||||
- **Pruebas**: Usar `pytest`/`unittest`, verificar que pasen antes de completar
|
||||
- **Manejo de errores**: Middleware personalizado o vistas de error en Django
|
||||
|
||||
## Flujo de Trabajo Típico
|
||||
|
||||
1. Análisis (leer y entender contexto)
|
||||
2. Planificación (proposición paso a paso si es complejo)
|
||||
3. Implementación (siguiendo PEP 8/ESLint)
|
||||
4. Documentación (actualizar README.md si hay nuevos commandos)
|
||||
5. Control de versiones (commits atómicos, ramas `feature/` o `fix/`)
|
||||
|
||||
## Instrucciones Específicas para este Repositorio
|
||||
|
||||
### Arquitectura General
|
||||
|
||||
- **Estructura**: Sitio web estático con HTML/CSS/JS puro (sin frameworks ni build tools)
|
||||
- **Componentes Modulares**: Header y footer cargados dinámicamente via `fetch()` (js/main.js:25-60)
|
||||
- **Header**: Incluye botón 'HABLEMOS' y toggle de tema (includes/header.html)
|
||||
- **Footer**: Información de contacto e identificación fiscal (includes/footer.html)
|
||||
- **Temas**: Dark/light mode con persistencia usando localStorage (js/main.js:143-183)
|
||||
- Variables CSS en `css/styles.css`:
|
||||
```css
|
||||
--bg-primary
|
||||
--text-body
|
||||
--ide-primary
|
||||
--ide-dark
|
||||
```
|
||||
- Toggle actualiza atributo `data-theme` y cambia íconos de logo (js/main.js:150-183)
|
||||
|
||||
### Implementación Clave
|
||||
|
||||
**Theme Switcher (js/main.js)**:
|
||||
```javascript
|
||||
// Inicialización (ejecutado al cargar DOM)
|
||||
function initTheme() {
|
||||
const savedTheme = localStorage.getItem('ide_theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
updateThemeIcon(savedTheme);
|
||||
toggleLogoTheme(savedTheme);
|
||||
}
|
||||
|
||||
// Toggle (event handler)
|
||||
function toggleTheme() {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem('ide_theme', newTheme);
|
||||
updateThemeIcon(newTheme);
|
||||
toggleLogoTheme(newTheme);
|
||||
}
|
||||
```
|
||||
|
||||
**Navegación Móvil**: sistema de drawer con:
|
||||
- Botón hamburguesa (abre)
|
||||
- Overlay (cierra al hacer clic)
|
||||
- Cierre con ESC
|
||||
- Enlaces que cierran automáticamente
|
||||
- Atributos ARIA para accesibilidad (js/main.js:94-133)
|
||||
|
||||
**Cursos Dinámicos**:
|
||||
- cargados desde `/data/cursos.json`
|
||||
- Fallback con datos mock en `getFallbackCourses()` (js/main.js:608-625)
|
||||
- Modales dinámicos para detalles de cursos
|
||||
|
||||
### Estructura de directorios clave
|
||||
|
||||
```
|
||||
project/
|
||||
├── includes/
|
||||
│ ├── header.html # Header modular
|
||||
│ └── footer.html # Footer modular
|
||||
├── css/
|
||||
│ └── styles.css # Estilos principales (variables `--ide-primary`, `--ide-dark`)
|
||||
├── js/
|
||||
│ └── main.js # JavaScript principal (890 líneas)
|
||||
├── images/ # Imágenes y logos
|
||||
└── data/
|
||||
└── cursos.json # Datos de cursos
|
||||
```
|
||||
|
||||
### Páginas principales
|
||||
|
||||
- `index.html` - Página inicial con hero y Brújula IDE
|
||||
- `soluciones.html` - Soluciones con filtrado dinámico (js/main.js:630-654)
|
||||
- `academy.html` - Cursos y formación
|
||||
- `desafios.html` - Quiz interactivo (JS embedded)
|
||||
- `contacto.html` - Formulario de contacto con AJAX (js/main.js:798-841)
|
||||
|
||||
### Funcionalidades destacadas
|
||||
|
||||
1. **Sistema de modales**: Pop-ups con cierre por clic externo y tecla ESC (js/main.js:188-243)
|
||||
2. **Formularios AJAX**: envío a `/php/send-mail.php` con mensajería de suceso/falla (js/main.js:798-890)
|
||||
3. **Feed Insights**: WordPress REST API + fallback de artículos (js/main.js:659-754)
|
||||
|
||||
### Notes importantes para el desarrollo
|
||||
|
||||
1. **Path corregido**: Usar & y Desarrollo (no Development) en todos los paths
|
||||
2. **Sin frameworks**: No hay React, Vue, ni herramientas de build - todo es Vanilla JS
|
||||
3. **Fallbacks implementados**: Siempre verificar fallbacks para API y datos remotos
|
||||
4. **Persistencia**: El tema se guarda en localStorage (`ide_theme`)
|
||||
5. **Testing visual**: Revisar temas dark/light en navegadores moderno
|
||||
Reference in New Issue
Block a user