feat: Rediseño de interfaz con temática de Halloween
- Actualización de estilos CSS en pixel-sections.css para reflejar una paleta de colores suave de Halloween, incluyendo cambios en gradientes, bordes y sombras. - Modificación de elementos en index.ejs para incluir decoraciones de Halloween como calabazas y fantasmas. - Ajustes en layout.ejs y navbar.ejs para incorporar iconos y tooltips relacionados con Halloween. - Creación de un nuevo archivo README para documentar los cambios y la nueva paleta de colores.
This commit is contained in:
379
README/SOFT_HALLOWEEN_PIXEL_ART.md
Normal file
379
README/SOFT_HALLOWEEN_PIXEL_ART.md
Normal file
@@ -0,0 +1,379 @@
|
||||
# 🎃 Rediseño Pixel Art Suave con Temática de Halloween
|
||||
|
||||
## 📋 Resumen del Cambio
|
||||
|
||||
Transformación del diseño web de Amayo Bot de un estilo "cozy witch" con tonos cálidos a un **pixel art suave con temática de Halloween**, utilizando una paleta de colores púrpura pastel y naranja calabaza.
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Paleta de Colores Halloween
|
||||
|
||||
### Colores Base
|
||||
```css
|
||||
--pixel-bg-dark: #2d1b3d /* Púrpura oscuro (fondo principal) */
|
||||
--pixel-bg-2: #3f2a4f /* Púrpura medio (contenedores) */
|
||||
--pixel-bg-3: #544163 /* Púrpura claro (elementos elevados) */
|
||||
--pixel-border: #6b4f7a /* Púrpura grisáceo (bordes) */
|
||||
```
|
||||
|
||||
### Colores de Acento
|
||||
```css
|
||||
--pixel-pumpkin: #ff9a56 /* Naranja calabaza (CTA principal) */
|
||||
--pixel-accent-2: #9b7bb5 /* Lavanda pastel (secundario) */
|
||||
--pixel-accent-3: #ffc65c /* Amarillo suave (resaltados) */
|
||||
--pixel-accent-4: #e89ac7 /* Rosa pastel (detalles) */
|
||||
--pixel-accent-5: #8dd4a8 /* Menta suave (alternativo) */
|
||||
--pixel-ghost: #e8dff5 /* Blanco fantasma (decoraciones) */
|
||||
```
|
||||
|
||||
### Texto
|
||||
```css
|
||||
--pixel-text: #e8dff5 /* Texto principal (muy legible) */
|
||||
--pixel-text-dim: #b8a8c7 /* Texto secundario */
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Cambios Técnicos Realizados
|
||||
|
||||
### 1. **Archivo: `pixel-art.css`** (752 líneas)
|
||||
|
||||
#### Variables CSS
|
||||
- ✅ Reemplazadas todas las variables de colores cálidos por la paleta Halloween
|
||||
- ✅ Cambiados colores de fondo de marrón a púrpura
|
||||
- ✅ Acentos cambiados de dorado a naranja calabaza
|
||||
|
||||
#### Tipografía
|
||||
```css
|
||||
h1: color: var(--pixel-pumpkin) con animación softGlow
|
||||
h2: color: var(--pixel-accent-3) con sombra suave
|
||||
h3: color: var(--pixel-accent-2)
|
||||
```
|
||||
|
||||
#### Componentes Actualizados
|
||||
- **`.pixel-box`**:
|
||||
- Border radius: `8px` (suavizado)
|
||||
- Box-shadow: Blur difuminado en lugar de sombras duras
|
||||
- Gradiente púrpura de fondo
|
||||
- Glow interno púrpura/naranja en hover
|
||||
|
||||
- **`.pixel-btn`**:
|
||||
- Gradiente: naranja → púrpura
|
||||
- Border radius: `8px`
|
||||
- Sombras suaves con blur
|
||||
- Hover: reverse gradient + glow naranja
|
||||
- Active: translateY reducido para suavidad
|
||||
|
||||
- **`.pixel-badge`**:
|
||||
- Gradiente naranja/lavanda
|
||||
- Border radius: `6px`
|
||||
- Glow naranja suave
|
||||
- Animación `softFloat` (más lenta y suave)
|
||||
|
||||
- **`.pixel-navbar`**:
|
||||
- Barra inferior con gradiente Halloween (naranja → lavanda → rosa)
|
||||
- Animación `softScroll` (más lenta: 4s)
|
||||
- Box-shadow con blur
|
||||
|
||||
#### Animaciones Nuevas
|
||||
```css
|
||||
@keyframes softGlow /* Brillo suave para títulos */
|
||||
@keyframes softPulse /* Pulso delicado para fondos */
|
||||
@keyframes softScroll /* Scroll suave para navbar */
|
||||
@keyframes softBounce /* Rebote suave para calabazas */
|
||||
@keyframes softFloat /* Flotación suave para fantasmas */
|
||||
@keyframes softSparkle /* Centelleo suave para SVG */
|
||||
@keyframes batFly /* Vuelo de murciélagos */
|
||||
@keyframes twinkle /* Parpadeo de estrellas */
|
||||
```
|
||||
|
||||
### 2. **Nuevas Decoraciones de Halloween**
|
||||
|
||||
#### Calabaza (`.pixel-pumpkin`)
|
||||
- Círculo naranja con border radius 50%
|
||||
- Tallo verde en la parte superior
|
||||
- "Rostro" creado con pseudo-elementos
|
||||
- Box-shadow con inset para profundidad
|
||||
- Animación `softBounce`
|
||||
|
||||
#### Fantasma (`.pixel-ghost`)
|
||||
- Forma redondeada en la parte superior
|
||||
- Base ondulada con radial-gradients
|
||||
- Color blanco fantasma con glow interno
|
||||
- "Ojos y boca" con líneas negras
|
||||
- Animación `softFloat`
|
||||
|
||||
#### Murciélago (`.pixel-bat`)
|
||||
- Forma de alas con clip-path polygon
|
||||
- Cuerpo central oscuro
|
||||
- Movimiento de vuelo con `batFly`
|
||||
- Drop-shadow suave
|
||||
|
||||
#### Estrella Halloween (`.pixel-star-halloween`)
|
||||
- Símbolo ✦ con color amarillo suave
|
||||
- Text-shadow con glow
|
||||
- Animación `twinkle` (parpadeo)
|
||||
|
||||
### 3. **Archivo: `pixel-sections.css`** (381 líneas)
|
||||
|
||||
#### Secciones
|
||||
- Background: gradiente púrpura (`bg-2` → `bg-3`)
|
||||
- Border radius: `8px`
|
||||
- Box-shadow: blur suave en lugar de sombra dura
|
||||
- Glow naranja/púrpura en hover
|
||||
|
||||
#### Elementos de Sección
|
||||
- **h2**: color amarillo suave con sombra difuminada
|
||||
- **h3**: color lavanda pastel
|
||||
- **h4**: color naranja calabaza
|
||||
- **strong**: naranja calabaza
|
||||
- **Listas**: bullets ✦ en color naranja
|
||||
|
||||
#### Botones en Secciones
|
||||
- Gradiente naranja → lavanda
|
||||
- Border radius: `8px`
|
||||
- Hover: reverse gradient + glow naranja + translateY
|
||||
- Transición suave de 0.3s
|
||||
|
||||
#### Cajas y Cards
|
||||
- Border radius: `6px`
|
||||
- Sombras con blur
|
||||
- Glow interno púrpura
|
||||
|
||||
### 4. **Archivo: `index.ejs`**
|
||||
|
||||
#### Hero Section
|
||||
```html
|
||||
<!-- Badge con calabaza y fantasma -->
|
||||
<span class="pixel-pumpkin"></span>
|
||||
<div class="pixel-badge">...</div>
|
||||
<span class="pixel-ghost"></span>
|
||||
|
||||
<!-- Decoraciones -->
|
||||
<span class="pixel-bat"></span>
|
||||
<span class="pixel-star-halloween">✦</span>
|
||||
<span class="pixel-pumpkin"></span>
|
||||
<span class="pixel-star-halloween">✦</span>
|
||||
<span class="pixel-ghost"></span>
|
||||
```
|
||||
|
||||
### 5. **Archivo: `layouts/layout.ejs`**
|
||||
|
||||
#### Footer
|
||||
```html
|
||||
<!-- Status bar con calabaza y fantasma -->
|
||||
<span class="pixel-pumpkin"></span>
|
||||
<span class="pixel-ghost"></span>
|
||||
|
||||
<!-- Copyright con murciélago y estrella -->
|
||||
<span class="pixel-bat"></span>
|
||||
<span class="pixel-star-halloween">✦</span>
|
||||
|
||||
<!-- Botón con emojis Halloween -->
|
||||
<span>🎃</span> Volver arriba <span>👻</span>
|
||||
```
|
||||
|
||||
### 6. **Archivo: `partials/navbar.ejs`**
|
||||
|
||||
#### Logo y Links
|
||||
```html
|
||||
<!-- Logo con calabaza -->
|
||||
<div class="pixel-pumpkin"></div>
|
||||
<span style="color: var(--pixel-pumpkin);">Amayo</span>
|
||||
<span class="pixel-star-halloween">✦</span>
|
||||
|
||||
<!-- Tooltips con emojis -->
|
||||
data-tooltip="🎃 Empieza aquí"
|
||||
data-tooltip="👻 Ayuda"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Características del Diseño Suave
|
||||
|
||||
### Contraste Reducido
|
||||
- Sombras con blur en lugar de offset duro
|
||||
- Colores pastel en lugar de saturados
|
||||
- Gradientes graduales de 3 paradas
|
||||
|
||||
### Bordes Redondeados
|
||||
- `border-radius: 8px` en componentes principales
|
||||
- `border-radius: 6px` en elementos pequeños
|
||||
- `border-radius: 4px` en detalles
|
||||
|
||||
### Animaciones Suaves
|
||||
- Duraciones aumentadas: 3-4s (antes 2-3s)
|
||||
- Ease-in-out para transiciones naturales
|
||||
- Movimientos sutiles (6-8px translateY)
|
||||
|
||||
### Grosor de Bordes
|
||||
- Reducido de `4px` a `3px` en la mayoría de casos
|
||||
- Reducido de `6px` a `4px` en sombras
|
||||
|
||||
### Blur y Glow
|
||||
- Box-shadows con blur: `4px 4px 12px` (antes `8px 8px 0`)
|
||||
- Text-shadows con blur: `1px 1px 2px` (antes `2px 2px 0`)
|
||||
- Glows con opacity reducida: `0.1-0.15` (antes `0.15-0.25`)
|
||||
|
||||
---
|
||||
|
||||
## 🌟 Elementos Visuales Clave
|
||||
|
||||
### Degradados Halloween
|
||||
```css
|
||||
/* Botón principal */
|
||||
background: linear-gradient(135deg, #ff9a56 0%, #9b7bb5 100%);
|
||||
|
||||
/* Botón hover */
|
||||
background: linear-gradient(135deg, #9b7bb5 0%, #ff9a56 100%);
|
||||
|
||||
/* Secciones */
|
||||
background: linear-gradient(135deg, #3f2a4f 0%, #544163 100%);
|
||||
|
||||
/* Navbar stripe */
|
||||
background: repeating-linear-gradient(90deg,
|
||||
#ff9a56 0px, #ff9a56 8px,
|
||||
#9b7bb5 8px, #9b7bb5 16px,
|
||||
#e89ac7 16px, #e89ac7 24px
|
||||
);
|
||||
```
|
||||
|
||||
### Efectos de Hover
|
||||
- Buttons: `translateY(-3px)` + brightness(1.1) + glow naranja
|
||||
- Boxes: `translateY(-3px)` + glow mixto púrpura/naranja
|
||||
- Links: gradient underline + text-shadow glow
|
||||
|
||||
---
|
||||
|
||||
## 📱 Responsive
|
||||
|
||||
### Breakpoints Mantenidos
|
||||
```css
|
||||
@media (max-width: 768px) {
|
||||
h1: 20px
|
||||
h2: 16px
|
||||
h3: 14px
|
||||
.pixel-btn: 12px padding, 12px 24px
|
||||
body: 18px
|
||||
}
|
||||
```
|
||||
|
||||
### Decoraciones Adaptativas
|
||||
- Calabazas/fantasmas/murciélagos mantienen tamaño proporcional
|
||||
- Animaciones suaves funcionan bien en móviles
|
||||
|
||||
---
|
||||
|
||||
## ✅ Checklist de Cambios Completos
|
||||
|
||||
### CSS Principal (`pixel-art.css`)
|
||||
- [x] Variables CSS (paleta Halloween)
|
||||
- [x] Tipografía (colores + sombras suaves)
|
||||
- [x] `.pixel-box` (bordes redondeados + sombras suaves)
|
||||
- [x] `.pixel-btn` (gradiente Halloween + hover suave)
|
||||
- [x] `.pixel-badge` (colores Halloween + float suave)
|
||||
- [x] `.pixel-navbar` (stripe Halloween + scroll suave)
|
||||
- [x] Links (color naranja + glow)
|
||||
- [x] Body gradient (púrpura 3-stop)
|
||||
- [x] Grid background (grid púrpura + glow naranja)
|
||||
- [x] Animaciones (todas suavizadas)
|
||||
- [x] Decoración Halloween (calabaza, fantasma, murciélago, estrella)
|
||||
|
||||
### CSS Secciones (`pixel-sections.css`)
|
||||
- [x] Secciones (gradiente púrpura + sombras suaves)
|
||||
- [x] H2/H3/H4 (colores Halloween)
|
||||
- [x] Listas (bullets ✦ naranja)
|
||||
- [x] Botones (gradiente Halloween + hover)
|
||||
- [x] Cards (border-radius + sombras)
|
||||
- [x] Tablas (colores actualizados)
|
||||
- [x] Code blocks (border-radius + colores)
|
||||
|
||||
### HTML Templates
|
||||
- [x] `index.ejs` (decoraciones Halloween en hero)
|
||||
- [x] `layout.ejs` (decoraciones Halloween en footer)
|
||||
- [x] `navbar.ejs` (logo Halloween + tooltips)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Próximos Pasos
|
||||
|
||||
1. **Reiniciar servidor web** para ver cambios:
|
||||
```bash
|
||||
npm run server
|
||||
```
|
||||
|
||||
2. **Validación visual**:
|
||||
- Verificar paleta de colores
|
||||
- Confirmar suavidad de sombras
|
||||
- Revisar animaciones en diferentes dispositivos
|
||||
- Validar legibilidad del texto
|
||||
|
||||
3. **Feedback del usuario**:
|
||||
- Confirmar que el diseño es "más suave"
|
||||
- Validar que la temática Halloween es apropiada
|
||||
- Ajustar según preferencias
|
||||
|
||||
---
|
||||
|
||||
## 📝 Notas Técnicas
|
||||
|
||||
### Fuentes Usadas
|
||||
- **Press Start 2P**: Títulos y botones (pixel art)
|
||||
- **VT323**: Cuerpo de texto y código (monospace retro)
|
||||
|
||||
### Archivos CSS Creados
|
||||
1. `pixel-art.css` (752 líneas) - Componentes y estilos base
|
||||
2. `pixel-sections.css` (381 líneas) - Overrides para secciones
|
||||
|
||||
### Orden de Carga CSS
|
||||
```html
|
||||
<link rel="stylesheet" href="/assets/css/pixel-art.css">
|
||||
<link rel="stylesheet" href="/assets/css/pixel-sections.css">
|
||||
```
|
||||
|
||||
### Backup Original
|
||||
- Ubicación: `/src/server/views.backup/`
|
||||
- Contiene: Diseño original de glassmorphism
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Comparación Visual
|
||||
|
||||
### Antes (Cozy Witch)
|
||||
- Colores: Marrón, dorado, terracota
|
||||
- Sombras: Duras y offset (8px 8px 0)
|
||||
- Bordes: Cuadrados (border-radius: 0)
|
||||
- Decoraciones: Velas, hojas, monedas
|
||||
- Animaciones: Rápidas (2-3s)
|
||||
|
||||
### Después (Soft Halloween)
|
||||
- Colores: Púrpura, naranja, lavanda
|
||||
- Sombras: Suaves con blur (4px 4px 12px)
|
||||
- Bordes: Redondeados (border-radius: 8px)
|
||||
- Decoraciones: Calabazas, fantasmas, murciélagos
|
||||
- Animaciones: Lentas (3-4s)
|
||||
|
||||
---
|
||||
|
||||
## 🔮 Decisiones de Diseño
|
||||
|
||||
### ¿Por qué púrpura en lugar de negro?
|
||||
- Más suave y menos intimidante
|
||||
- Mejor contraste con naranja
|
||||
- Mantiene el mood de Halloween sin ser sombrío
|
||||
|
||||
### ¿Por qué border-radius en pixel art?
|
||||
- "Soft pixel art" permite suavizar esquinas
|
||||
- Mantiene estética pixelada en decoraciones
|
||||
- Mejora usabilidad (más touch-friendly)
|
||||
|
||||
### ¿Por qué sombras con blur?
|
||||
- Crea profundidad sin dureza
|
||||
- Más moderno y accesible
|
||||
- Reduce fatiga visual
|
||||
|
||||
---
|
||||
|
||||
**Fecha de actualización**: 2025
|
||||
**Versión del diseño**: Soft Halloween Pixel Art v1.0
|
||||
**Estado**: ✅ Completo - Pendiente de validación del usuario
|
||||
Reference in New Issue
Block a user