Refactor code structure for improved readability and maintainability
This commit is contained in:
228
README/BOTONES_ILUSTRATIVOS.md
Normal file
228
README/BOTONES_ILUSTRATIVOS.md
Normal file
@@ -0,0 +1,228 @@
|
||||
# 🎨 Botones Ilustrativos - Actualización Final
|
||||
|
||||
## ✨ Integración de SVG Decorativos
|
||||
|
||||
Se han mejorado los botones del hero section con ornamentos SVG ilustrativos para complementar el tema cozy/witchy.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Cambios Implementados
|
||||
|
||||
### **1. Botón Principal "Comenzar ahora"**
|
||||
|
||||
#### **Estructura**
|
||||
```html
|
||||
<a href="#primeros-pasos" class="pixel-btn group">
|
||||
<span class="flex items-center gap-3">
|
||||
<!-- Estrella decorativa izquierda -->
|
||||
<svg>...</svg>
|
||||
<span>Comenzar ahora</span>
|
||||
<!-- Estrella decorativa derecha -->
|
||||
<svg>...</svg>
|
||||
</span>
|
||||
</a>
|
||||
```
|
||||
|
||||
#### **SVG Decorativos**
|
||||
- **Estrellas**: Forma de estrella de 8 puntas
|
||||
- **Color**: Hereda del color del texto del botón
|
||||
- **Animación**: `sparkle` (escala + rotación + opacidad)
|
||||
- **Hover**: Animación más rápida (3s → 1.5s)
|
||||
|
||||
### **2. Botón Secundario "Ver comandos"**
|
||||
|
||||
#### **Estructura**
|
||||
```html
|
||||
<button class="pixel-btn pixel-btn-secondary flex items-center gap-2">
|
||||
<svg>...</svg> <!-- Icono de menú hamburguesa -->
|
||||
<span>Ver comandos</span>
|
||||
</button>
|
||||
```
|
||||
|
||||
#### **SVG Menu**
|
||||
- **Forma**: 3 rectángulos con border-radius
|
||||
- **Estilo**: Limpio y minimalista
|
||||
- **Integrado**: Reemplaza el emoji ☰
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Estilos CSS Añadidos
|
||||
|
||||
### **Ornamentos decorativos (`::before` y `::after`)**
|
||||
```css
|
||||
.pixel-btn::before,
|
||||
.pixel-btn::after {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--pixel-accent-5); /* Rosa suave */
|
||||
border: 2px solid var(--pixel-border);
|
||||
transform: rotate(45deg);
|
||||
opacity: 0.7;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
/* Hover effect */
|
||||
.pixel-btn:hover::before,
|
||||
.pixel-btn:hover::after {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) scale(1.2);
|
||||
box-shadow: 0 0 10px var(--pixel-accent-5);
|
||||
}
|
||||
```
|
||||
|
||||
### **Animación de SVG**
|
||||
```css
|
||||
@keyframes sparkle {
|
||||
0%, 100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.pixel-btn svg {
|
||||
filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
|
||||
animation: sparkle 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pixel-btn:hover svg {
|
||||
animation: sparkle 1.5s ease-in-out infinite;
|
||||
}
|
||||
```
|
||||
|
||||
### **Glow mejorado en hover**
|
||||
```css
|
||||
.pixel-btn:hover {
|
||||
box-shadow:
|
||||
4px 4px 0 0 rgba(0, 0, 0, 0.6),
|
||||
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3),
|
||||
inset 2px 2px 0 0 rgba(255, 255, 255, 0.4),
|
||||
0 0 25px rgba(255, 179, 71, 0.7), /* Glow interior */
|
||||
0 0 40px rgba(255, 179, 71, 0.3); /* Glow exterior */
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎭 Elementos Visuales
|
||||
|
||||
### **Componentes del Botón Principal**
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ ◆ [ornamento] │ ← Pseudo-element ::before
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ ★ Comenzar ahora ★ │ ← SVG + texto + SVG
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ ◆ [ornamento] │ ← Pseudo-element ::after
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### **Estados de Interacción**
|
||||
|
||||
| Estado | SVG | Ornamentos | Glow |
|
||||
|--------|-----|------------|------|
|
||||
| **Normal** | Opacidad 70%, rotación suave | Opacidad 70%, escala 1 | 15px |
|
||||
| **Hover** | Opacidad 100%, rotación rápida | Opacidad 100%, escala 1.2 | 25px + 40px |
|
||||
| **Active** | Continúa animado | Con glow rosa | Intensificado |
|
||||
|
||||
---
|
||||
|
||||
## 📊 Comparativa Antes/Después
|
||||
|
||||
### **Antes**
|
||||
```html
|
||||
<a class="pixel-btn">
|
||||
▶ Comenzar ahora
|
||||
</a>
|
||||
```
|
||||
- Símbolo unicode simple (▶)
|
||||
- Sin decoración adicional
|
||||
- Glow básico
|
||||
|
||||
### **Después**
|
||||
```html
|
||||
<a class="pixel-btn group">
|
||||
<span class="flex items-center gap-3">
|
||||
<svg>★</svg>
|
||||
<span>Comenzar ahora</span>
|
||||
<svg>★</svg>
|
||||
</span>
|
||||
</a>
|
||||
```
|
||||
- SVG animados con sparkle effect
|
||||
- 2 ornamentos decorativos (::before, ::after)
|
||||
- Glow mejorado de 2 capas
|
||||
- Transiciones fluidas en todos los elementos
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Paleta de Ornamentos
|
||||
|
||||
| Elemento | Color | Variable CSS |
|
||||
|----------|-------|--------------|
|
||||
| **SVG estrellas** | Hereda del texto | - |
|
||||
| **Ornamentos superiores** | Rosa suave | `--pixel-accent-5` (#ff8fab) |
|
||||
| **Glow hover** | Naranja cálido | `--pixel-warm-glow` (#ffb347) |
|
||||
| **Borde** | Café oscuro | `--pixel-border` (#2a1810) |
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Archivos Modificados
|
||||
|
||||
### 1. `/src/server/views/index.ejs`
|
||||
**Cambios**:
|
||||
- ✅ Botón principal con estructura flex + 2 SVG decorativos
|
||||
- ✅ Botón secundario con SVG de menú hamburguesa
|
||||
- ✅ Clase `group` para efectos en hover
|
||||
|
||||
### 2. `/src/server/public/assets/css/pixel-art.css`
|
||||
**Cambios**:
|
||||
- ✅ Pseudo-elements `::before` y `::after` como ornamentos
|
||||
- ✅ Animación `@keyframes sparkle` para SVG
|
||||
- ✅ Estilos para `svg` dentro de `.pixel-btn`
|
||||
- ✅ Glow mejorado con 2 capas en hover
|
||||
- ✅ `overflow: visible` para permitir ornamentos fuera del botón
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Objetivos Logrados
|
||||
|
||||
✅ **Integración de SVG decorativos** en lugar de unicode
|
||||
✅ **Ornamentos ilustrativos** con pseudo-elements
|
||||
✅ **Animaciones suaves** tipo "sparkle" en los iconos
|
||||
✅ **Glow atmosférico** de múltiples capas
|
||||
✅ **Coherencia visual** con el tema cozy/witchy
|
||||
✅ **Interactividad mejorada** en hover con múltiples efectos
|
||||
|
||||
---
|
||||
|
||||
## 💡 Posibles Extensiones Futuras
|
||||
|
||||
1. **Más variedad de SVG**: Diferentes ornamentos por sección
|
||||
2. **Partículas flotantes**: Pequeñas estrellas que aparecen al hacer click
|
||||
3. **Sound effects**: Sonido de "magia" al hacer click
|
||||
4. **Cursor custom**: Varita mágica como cursor en los botones
|
||||
5. **Ripple effect**: Ondas al hacer click (efecto tipo agua/magia)
|
||||
|
||||
---
|
||||
|
||||
## 📝 Notas de Implementación
|
||||
|
||||
- **SVG inline**: Permite control total del color y animaciones
|
||||
- **currentColor**: Los SVG heredan el color del texto del botón
|
||||
- **filter drop-shadow**: Sombra más natural que box-shadow en SVG
|
||||
- **Group class**: Permite efectos coordin ados entre padre e hijos en Tailwind
|
||||
|
||||
---
|
||||
|
||||
**Fecha**: Octubre 9, 2025
|
||||
**Versión**: 2.1.0 (Botones Ilustrativos)
|
||||
**Status**: ✅ Completado y listo para testing
|
||||
Reference in New Issue
Block a user