diff --git a/README/SOFT_HALLOWEEN_PIXEL_ART.md b/README/SOFT_HALLOWEEN_PIXEL_ART.md new file mode 100644 index 0000000..a04405a --- /dev/null +++ b/README/SOFT_HALLOWEEN_PIXEL_ART.md @@ -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 + + +
...
+ + + + +✦ + +✦ + +``` + +### 5. **Archivo: `layouts/layout.ejs`** + +#### Footer +```html + + + + + + +✦ + + +🎃 Volver arriba 👻 +``` + +### 6. **Archivo: `partials/navbar.ejs`** + +#### Logo y Links +```html + +
+Amayo +✦ + + +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 + + +``` + +### 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 diff --git a/src/server/public/assets/css/pixel-art.css b/src/server/public/assets/css/pixel-art.css index d0d3296..c716399 100644 --- a/src/server/public/assets/css/pixel-art.css +++ b/src/server/public/assets/css/pixel-art.css @@ -6,30 +6,32 @@ /* Fuentes Pixel Art */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap'); -/* Variables de Color Pixel Art - Cozy Witch Theme */ +/* Variables de Color Pixel Art - Soft Halloween Theme */ :root { - /* Tonos cálidos de madera y tierra */ - --pixel-bg-dark: #3d2817; /* Madera oscura */ - --pixel-bg-medium: #5c3d2e; /* Madera media */ - --pixel-bg-light: #7a5243; /* Madera clara */ + /* Backgrounds suaves de Halloween */ + --pixel-bg-dark: #2d1b3d; /* Púrpura oscuro suave */ + --pixel-bg-medium: #3f2a4f; /* Púrpura medio */ + --pixel-bg-light: #544163; /* Lavanda oscuro */ - /* Acentos mágicos y acogedores */ - --pixel-accent-1: #ff6b6b; /* Rojo cálido (pociones) */ - --pixel-accent-2: #c77dff; /* Púrpura místico (magia) */ - --pixel-accent-3: #ffd166; /* Dorado/amarillo (luz de velas) */ - --pixel-accent-4: #06ffa5; /* Verde menta (hierbas) */ - --pixel-accent-5: #ff8fab; /* Rosa suave (flores) */ - --pixel-accent-6: #4ecdc4; /* Turquesa (cristales) */ + /* Acentos de Halloween suaves */ + --pixel-accent-1: #ff9a56; /* Naranja calabaza suave */ + --pixel-accent-2: #9b7bb5; /* Púrpura pastel */ + --pixel-accent-3: #ffc65c; /* Amarillo calabaza */ + --pixel-accent-4: #8dd4a8; /* Verde menta suave */ + --pixel-accent-5: #e89ac7; /* Rosa Halloween */ + --pixel-accent-6: #7ec4cf; /* Turquesa fantasma */ - /* Tonos de texto */ - --pixel-text: #f8e5d7; /* Beige cálido */ - --pixel-text-dim: #c9a68a; /* Café con leche */ - --pixel-border: #2a1810; /* Café muy oscuro */ - --pixel-shadow: rgba(26, 13, 5, 0.8); + /* Tonos de texto suaves */ + --pixel-text: #f5e6d3; /* Crema suave */ + --pixel-text-dim: #d4b8a8; /* Beige rosado */ + --pixel-border: #4a2f5a; /* Púrpura oscuro borde */ + --pixel-shadow: rgba(29, 15, 41, 0.6); - /* Tonos especiales */ - --pixel-warm-glow: #ffb347; /* Naranja cálido */ - --pixel-night-sky: #4a3b5c; /* Púrpura del atardecer */ + /* Tonos especiales Halloween */ + --pixel-warm-glow: #ffb86c; /* Naranja brillante suave */ + --pixel-night-sky: #564375; /* Cielo nocturno Halloween */ + --pixel-pumpkin: #ff9a56; /* Calabaza */ + --pixel-ghost: #e8dff5; /* Fantasma */ } /* Reset y Base */ @@ -43,9 +45,9 @@ body { font-family: 'VT323', monospace; font-size: 20px; line-height: 1.4; - background: linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 100%); + background: linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 60%, #2a1a3a 100%); color: var(--pixel-text); - text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3); + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } /* Headings Pixel Art */ @@ -61,7 +63,8 @@ h1, h2, h3, h4, h5, h6 { h1 { font-size: 32px; line-height: 1.6; - animation: pixelGlow 2s ease-in-out infinite; + animation: softGlow 3s ease-in-out infinite; + color: var(--pixel-pumpkin); } h2 { @@ -69,14 +72,14 @@ h2 { line-height: 1.6; color: var(--pixel-accent-3); text-shadow: - 2px 2px 0px var(--pixel-border), - 0 0 15px var(--pixel-warm-glow); + 2px 2px 0px rgba(0, 0, 0, 0.4), + 0 0 20px rgba(255, 198, 92, 0.4); } h3 { font-size: 18px; line-height: 1.6; - color: var(--pixel-accent-5); + color: var(--pixel-accent-2); } /* Pixel Border Effect */ @@ -97,16 +100,27 @@ h3 { } /* Pixel Box (Contenedores) */ +/* Pixel Box Containers */ .pixel-box { - background: linear-gradient(135deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-light) 100%); - border: 4px solid var(--pixel-border); - border-radius: 0; - box-shadow: - 8px 8px 0 0 rgba(0, 0, 0, 0.5), - inset 0 0 0 2px rgba(255, 179, 71, 0.1), - 0 0 20px rgba(255, 179, 71, 0.2); + background: linear-gradient(135deg, + var(--pixel-bg-2) 0%, + var(--pixel-bg-3) 100%); + border: 3px solid var(--pixel-border); + border-radius: 8px; padding: 24px; + box-shadow: + 4px 4px 12px rgba(0, 0, 0, 0.4), + inset 0 0 30px rgba(155, 123, 181, 0.1); position: relative; + transition: all 0.3s ease; +} + +.pixel-box:hover { + transform: translateY(-3px); + box-shadow: + 6px 6px 16px rgba(0, 0, 0, 0.5), + inset 0 0 35px rgba(155, 123, 181, 0.15), + 0 0 30px rgba(255, 154, 86, 0.2); } .pixel-box::before { @@ -118,13 +132,13 @@ h3 { bottom: -2px; background: linear-gradient( 45deg, - var(--pixel-warm-glow) 0%, + var(--pixel-pumpkin) 0%, var(--pixel-accent-2) 50%, - var(--pixel-accent-6) 100% + var(--pixel-accent-4) 100% ); - opacity: 0.15; + opacity: 0.1; z-index: -1; - animation: cozyPulse 4s ease-in-out infinite; + animation: softPulse 4s ease-in-out infinite; } /* Botones Pixel Art */ @@ -132,132 +146,135 @@ h3 { font-family: 'Press Start 2P', cursive; font-size: 14px; padding: 16px 32px; - border: 4px solid var(--pixel-border); - background: linear-gradient(180deg, var(--pixel-accent-3) 0%, var(--pixel-warm-glow) 100%); - color: var(--pixel-bg-dark); + border: 3px solid var(--pixel-border); + background: linear-gradient(135deg, var(--pixel-pumpkin) 0%, var(--pixel-accent-2) 100%); + color: white; text-transform: uppercase; cursor: pointer; position: relative; - transition: all 0.1s; + transition: all 0.3s ease; + border-radius: 8px; box-shadow: - 6px 6px 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 15px rgba(255, 179, 71, 0.4); + 4px 4px 10px rgba(0, 0, 0, 0.4), + inset 2px 2px 4px rgba(255, 255, 255, 0.15), + inset -2px -2px 4px rgba(0, 0, 0, 0.15); font-weight: bold; overflow: visible; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } /* Ornamentos decorativos del botón */ .pixel-btn::before, .pixel-btn::after { - content: ''; + content: '✦'; position: absolute; - width: 8px; - height: 8px; - background: var(--pixel-accent-5); - border: 2px solid var(--pixel-border); - transform: rotate(45deg); - opacity: 0.7; - transition: all 0.3s; + font-size: 12px; + color: var(--pixel-accent-3); + text-shadow: 0 0 10px var(--pixel-accent-3); + opacity: 0.6; + transition: all 0.3s ease; } .pixel-btn::before { - top: -6px; + top: -8px; left: 10px; } .pixel-btn::after { - top: -6px; + top: -8px; right: 10px; } .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); + transform: scale(1.2); + text-shadow: 0 0 15px var(--pixel-accent-3); } /* SVG icons dentro de botones */ .pixel-btn svg { - filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5)); - animation: sparkle 3s ease-in-out infinite; + filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5)); + animation: softSparkle 3s ease-in-out infinite; } -@keyframes sparkle { +@keyframes softSparkle { 0%, 100% { transform: scale(1) rotate(0deg); - opacity: 0.7; + opacity: 0.8; } 50% { - transform: scale(1.1) rotate(5deg); + transform: scale(1.05) rotate(3deg); opacity: 1; } } .pixel-btn:hover svg { - animation: sparkle 1.5s ease-in-out infinite; + animation: softSparkle 1.8s ease-in-out infinite; } /* Efecto de resplandor en hover para botones principales */ .pixel-btn:hover { - background: linear-gradient(180deg, var(--pixel-warm-glow) 0%, var(--pixel-accent-3) 100%); - transform: translate(2px, 2px); + background: linear-gradient(135deg, var(--pixel-accent-2) 0%, var(--pixel-pumpkin) 100%); + transform: translateY(-3px); 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), - 0 0 40px rgba(255, 179, 71, 0.3); + 6px 6px 16px rgba(0, 0, 0, 0.5), + inset 2px 2px 6px rgba(255, 255, 255, 0.2), + 0 0 30px rgba(255, 154, 86, 0.5); + filter: brightness(1.1); } .pixel-btn:active { - transform: translate(4px, 4px); + transform: translateY(-1px); box-shadow: - 2px 2px 0 0 rgba(0, 0, 0, 0.6), - inset -1px -1px 0 0 rgba(0, 0, 0, 0.3), - inset 1px 1px 0 0 rgba(255, 255, 255, 0.2); + 3px 3px 8px rgba(0, 0, 0, 0.5), + inset 1px 1px 3px rgba(255, 255, 255, 0.1); + filter: brightness(0.95); } .pixel-btn-secondary { - background: linear-gradient(180deg, var(--pixel-accent-2) 0%, var(--pixel-accent-5) 100%); + background: linear-gradient(135deg, var(--pixel-accent-2) 0%, var(--pixel-accent-4) 100%); border-color: var(--pixel-border); color: white; } .pixel-btn-secondary:hover { - background: linear-gradient(180deg, var(--pixel-accent-5) 0%, var(--pixel-accent-2) 100%); + background: linear-gradient(135deg, var(--pixel-accent-4) 0%, var(--pixel-accent-2) 100%); color: white; + transform: translateY(-3px); + box-shadow: + 6px 6px 16px rgba(0, 0, 0, 0.5), + 0 0 30px rgba(155, 123, 181, 0.4); + filter: brightness(1.1); } /* Navbar Pixel Art */ .pixel-navbar { - background: linear-gradient(180deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-dark) 100%); - border-bottom: 4px solid var(--pixel-border); + background: linear-gradient(180deg, var(--pixel-bg-2) 0%, var(--pixel-bg-dark) 100%); + border-bottom: 3px solid var(--pixel-border); box-shadow: - 0 8px 0 0 rgba(0, 0, 0, 0.5), - 0 0 20px rgba(255, 179, 71, 0.2); + 0 6px 12px rgba(0, 0, 0, 0.4), + 0 0 25px rgba(155, 123, 181, 0.15); position: relative; } .pixel-navbar::after { content: ''; position: absolute; - bottom: -8px; + bottom: -6px; left: 0; right: 0; - height: 4px; + height: 3px; background: repeating-linear-gradient( 90deg, - var(--pixel-accent-3) 0px, - var(--pixel-accent-3) 8px, - var(--pixel-warm-glow) 8px, - var(--pixel-warm-glow) 16px, - var(--pixel-accent-1) 16px, - var(--pixel-accent-1) 24px + var(--pixel-pumpkin) 0px, + var(--pixel-pumpkin) 8px, + var(--pixel-accent-2) 8px, + var(--pixel-accent-2) 16px, + var(--pixel-accent-4) 16px, + var(--pixel-accent-4) 24px ); - animation: cozyScroll 3s linear infinite; + animation: softScroll 4s linear infinite; } /* Código Pixel Art */ @@ -280,15 +297,15 @@ pre { /* Links Pixel Art */ a { - color: var(--pixel-accent-3); + color: var(--pixel-pumpkin); text-decoration: none; position: relative; transition: all 0.3s ease; } a:hover { - color: var(--pixel-warm-glow); - text-shadow: 0 0 10px var(--pixel-warm-glow); + color: var(--pixel-accent-3); + text-shadow: 0 0 12px var(--pixel-accent-3); } a::after { @@ -298,7 +315,7 @@ a::after { left: 0; width: 100%; height: 2px; - background: linear-gradient(90deg, var(--pixel-accent-3), var(--pixel-warm-glow)); + background: linear-gradient(90deg, var(--pixel-pumpkin), var(--pixel-accent-2)); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; @@ -307,7 +324,7 @@ a::after { a:hover::after { transform: scaleX(1); transform-origin: left; - box-shadow: 0 0 8px var(--pixel-warm-glow); + box-shadow: 0 0 10px var(--pixel-accent-2); } /* Badges Pixel Art */ @@ -315,18 +332,19 @@ a:hover::after { font-family: 'Press Start 2P', cursive; font-size: 10px; padding: 8px 16px; - background: linear-gradient(135deg, var(--pixel-accent-1) 0%, var(--pixel-accent-5) 100%); + background: linear-gradient(135deg, var(--pixel-pumpkin) 0%, var(--pixel-accent-2) 100%); color: white; border: 2px solid var(--pixel-border); + border-radius: 6px; display: inline-block; text-transform: uppercase; box-shadow: - 4px 4px 0 0 rgba(0, 0, 0, 0.5), - inset -1px -1px 0 0 rgba(0, 0, 0, 0.3), - inset 1px 1px 0 0 rgba(255, 255, 255, 0.3), - 0 0 15px var(--pixel-accent-1); - animation: cozyFloat 3s ease-in-out infinite; + 4px 4px 10px rgba(0, 0, 0, 0.4), + inset 1px 1px 2px rgba(255, 255, 255, 0.2), + 0 0 20px rgba(255, 154, 86, 0.3); + animation: softFloat 3.5s ease-in-out infinite; position: relative; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } .pixel-badge::before { @@ -389,66 +407,59 @@ tr:hover td { } /* Animaciones Pixel Art */ -@keyframes pixelGlow { +@keyframes softGlow { 0%, 100% { text-shadow: - 3px 3px 0px rgba(0, 0, 0, 0.8), - 0 0 20px var(--pixel-warm-glow); + 2px 2px 2px rgba(0, 0, 0, 0.6), + 0 0 25px rgba(255, 154, 86, 0.4); } 50% { text-shadow: - 3px 3px 0px rgba(0, 0, 0, 0.8), - 0 0 40px var(--pixel-accent-3), - 0 0 60px var(--pixel-warm-glow); + 2px 2px 2px rgba(0, 0, 0, 0.6), + 0 0 35px rgba(255, 154, 86, 0.6), + 0 0 50px rgba(155, 123, 181, 0.3); } } -@keyframes cozyPulse { +@keyframes softPulse { 0%, 100% { - opacity: 0.15; + opacity: 0.1; transform: scale(1); } 50% { - opacity: 0.25; - transform: scale(1.02); + opacity: 0.15; + transform: scale(1.01); } } -@keyframes cozyScroll { +@keyframes softScroll { 0% { background-position: 0 0; } 100% { background-position: 24px 0; } } -@keyframes pixelBounce { +@keyframes softBounce { 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-4px); } + 50% { transform: translateY(-6px); } } -@keyframes pixelShake { - 0%, 100% { transform: translateX(0); } - 10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); } - 20%, 40%, 60%, 80% { transform: translateX(2px); } -} - -/* Floating Animation (cozy) */ -@keyframes cozyFloat { +@keyframes softFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { - transform: translateY(-5px) rotate(1deg); + transform: translateY(-8px) rotate(2deg); } 75% { - transform: translateY(5px) rotate(-1deg); + transform: translateY(8px) rotate(-2deg); } } /* Grid Background Pixel */ .pixel-grid-bg { background: - linear-gradient(rgba(255, 179, 71, 0.02) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 179, 71, 0.02) 1px, transparent 1px), - linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 50%, var(--pixel-bg-medium) 100%); + linear-gradient(rgba(155, 123, 181, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(155, 123, 181, 0.03) 1px, transparent 1px), + linear-gradient(180deg, var(--pixel-bg-dark) 0%, var(--pixel-bg-2) 50%, var(--pixel-bg-3) 100%); background-size: 16px 16px, 16px 16px, 100% 100%; position: relative; } @@ -462,8 +473,8 @@ tr:hover td { bottom: 0; background: radial-gradient( circle at 50% 20%, - rgba(255, 179, 71, 0.1) 0%, - transparent 50% + rgba(255, 154, 86, 0.08) 0%, + transparent 60% ); pointer-events: none; z-index: 0; @@ -724,11 +735,187 @@ a[href="#primeros-pasos"] img { } a[href="#primeros-pasos"]:hover img { - filter: drop-shadow(0 6px 20px rgba(255, 179, 71, 0.6)) brightness(1.1); - transform: translateY(-4px); + filter: drop-shadow(0 6px 25px rgba(255, 154, 86, 0.6)) brightness(1.15); + transform: translateY(-6px) scale(1.05); } a[href="#primeros-pasos"]:active img { - transform: translateY(-2px); - filter: drop-shadow(0 4px 15px rgba(255, 179, 71, 0.5)); + transform: translateY(-3px) scale(1.02); + filter: drop-shadow(0 4px 18px rgba(255, 154, 86, 0.5)); +} + +/* ======================================== + DECORACIONES DE HALLOWEEN + ======================================== */ + +/* Calabaza Pixel Art */ +.pixel-pumpkin { + display: inline-block; + width: 32px; + height: 32px; + background: var(--pixel-pumpkin); + border-radius: 50%; + border: 3px solid var(--pixel-border); + position: relative; + box-shadow: + 3px 3px 8px rgba(0, 0, 0, 0.4), + inset -2px -2px 6px rgba(0, 0, 0, 0.3), + inset 2px 2px 6px rgba(255, 255, 255, 0.2); + animation: softBounce 3s ease-in-out infinite; +} + +.pixel-pumpkin::before { + content: ''; + position: absolute; + top: -8px; + left: 50%; + transform: translateX(-50%); + width: 8px; + height: 10px; + background: var(--pixel-accent-5); + border: 2px solid var(--pixel-border); + border-radius: 2px; +} + +.pixel-pumpkin::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 20px; + height: 16px; + background: + linear-gradient(to right, transparent 6px, var(--pixel-border) 6px, var(--pixel-border) 8px, transparent 8px, transparent 12px, var(--pixel-border) 12px, var(--pixel-border) 14px, transparent 14px), + linear-gradient(to bottom, transparent 4px, var(--pixel-border) 4px, var(--pixel-border) 6px, transparent 6px); + box-shadow: + -2px 10px 0 0 var(--pixel-border), + 2px 10px 0 0 var(--pixel-border); +} + +/* Fantasma Pixel Art */ +.pixel-ghost { + display: inline-block; + width: 28px; + height: 36px; + background: var(--pixel-ghost); + border: 2px solid var(--pixel-border); + border-radius: 50% 50% 0 0; + position: relative; + box-shadow: + 2px 2px 8px rgba(0, 0, 0, 0.3), + inset 0 0 15px rgba(255, 255, 255, 0.4); + animation: softFloat 3.5s ease-in-out infinite; +} + +.pixel-ghost::before { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + right: 0; + height: 8px; + background: + radial-gradient(circle at 25% 0, transparent 40%, var(--pixel-ghost) 40%), + radial-gradient(circle at 75% 0, transparent 40%, var(--pixel-ghost) 40%); + border-left: 2px solid var(--pixel-border); + border-right: 2px solid var(--pixel-border); +} + +.pixel-ghost::after { + content: ''; + position: absolute; + top: 12px; + left: 6px; + width: 14px; + height: 6px; + background: + linear-gradient(to right, var(--pixel-border) 4px, transparent 4px, transparent 6px, var(--pixel-border) 6px, var(--pixel-border) 10px, transparent 10px); + box-shadow: 0 8px 0 0 var(--pixel-border); +} + +/* Murciélago Pixel Art */ +.pixel-bat { + display: inline-block; + width: 40px; + height: 20px; + position: relative; + animation: batFly 4s ease-in-out infinite; +} + +.pixel-bat::before { + content: ''; + position: absolute; + top: 6px; + left: 50%; + transform: translateX(-50%); + width: 8px; + height: 10px; + background: var(--pixel-border); + border-radius: 50%; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); +} + +.pixel-bat::after { + content: ''; + position: absolute; + top: 8px; + left: 0; + right: 0; + height: 8px; + background: + linear-gradient(to right, + transparent 0, + var(--pixel-border) 4px, + var(--pixel-border) 8px, + transparent 8px, + transparent 12px, + var(--pixel-border) 12px, + var(--pixel-border) 16px, + transparent 16px, + transparent 24px, + var(--pixel-border) 24px, + var(--pixel-border) 28px, + transparent 28px, + transparent 32px, + var(--pixel-border) 32px, + var(--pixel-border) 36px, + transparent 36px + ); + clip-path: polygon( + 0% 100%, 10% 0%, 20% 100%, 30% 50%, 50% 50%, 70% 50%, 80% 100%, 90% 0%, 100% 100% + ); + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); +} + +@keyframes batFly { + 0%, 100% { + transform: translateX(0) translateY(0); + } + 25% { + transform: translateX(-8px) translateY(-4px); + } + 75% { + transform: translateX(8px) translateY(4px); + } +} + +/* Estrella Halloween */ +.pixel-star-halloween { + display: inline-block; + color: var(--pixel-accent-3); + font-size: 20px; + animation: twinkle 2.5s ease-in-out infinite; + text-shadow: 0 0 12px var(--pixel-accent-3); +} + +@keyframes twinkle { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.4; + transform: scale(0.9); + } } diff --git a/src/server/public/assets/css/pixel-sections.css b/src/server/public/assets/css/pixel-sections.css index 04ac0d8..8b610f1 100644 --- a/src/server/public/assets/css/pixel-sections.css +++ b/src/server/public/assets/css/pixel-sections.css @@ -1,17 +1,17 @@ /* ============================================ - COZY PIXEL ART - SECTIONS OVERRIDES - Diseño witchy/fantasy acogedor + SOFT HALLOWEEN PIXEL ART - SECTIONS OVERRIDES + Diseño suave con temática de Halloween ============================================ */ /* Secciones Principales */ section { - background: linear-gradient(135deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-light) 100%) !important; - border: 4px solid var(--pixel-border) !important; - border-radius: 0 !important; + background: linear-gradient(135deg, var(--pixel-bg-2) 0%, var(--pixel-bg-3) 100%) !important; + border: 3px solid var(--pixel-border) !important; + border-radius: 8px !important; box-shadow: - 8px 8px 0 0 rgba(0, 0, 0, 0.5) !important, - inset 0 0 0 2px rgba(255, 179, 71, 0.15) !important, - 0 0 20px rgba(255, 179, 71, 0.2) !important; + 4px 4px 12px rgba(0, 0, 0, 0.4) !important, + inset 0 0 30px rgba(155, 123, 181, 0.1) !important, + 0 0 25px rgba(255, 154, 86, 0.15) !important; padding: 32px !important; margin-bottom: 32px; position: relative; @@ -25,7 +25,8 @@ section::before { left: 8px; right: 8px; bottom: 8px; - border: 2px solid rgba(255, 179, 71, 0.1); + border: 2px solid rgba(155, 123, 181, 0.08); + border-radius: 4px; pointer-events: none; } @@ -40,8 +41,8 @@ section h2 { background-clip: unset !important; -webkit-text-fill-color: unset !important; text-shadow: - 2px 2px 0px var(--pixel-border), - 0 0 20px var(--pixel-warm-glow) !important; + 2px 2px 0px rgba(0, 0, 0, 0.4), + 0 0 20px rgba(255, 198, 92, 0.4) !important; margin-bottom: 24px !important; } @@ -49,16 +50,16 @@ section h3 { font-family: 'Press Start 2P', cursive !important; font-size: 16px !important; line-height: 1.6 !important; - color: var(--pixel-accent-5) !important; + color: var(--pixel-accent-2) !important; margin-bottom: 16px !important; - text-shadow: 1px 1px 0px var(--pixel-border); + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } section h4 { font-family: 'VT323', monospace !important; font-size: 22px !important; font-weight: bold !important; - color: var(--pixel-accent-4) !important; + color: var(--pixel-pumpkin) !important; margin-bottom: 12px !important; } @@ -69,34 +70,34 @@ section p { } section p strong { - color: var(--pixel-accent-4) !important; + color: var(--pixel-pumpkin) !important; font-weight: bold; } /* Cajas de Información */ section > div[class*="space-y"] { - background: var(--pixel-bg-light) !important; + background: var(--pixel-bg-3) !important; border: 3px solid var(--pixel-border) !important; - border-radius: 0 !important; + border-radius: 6px !important; padding: 20px !important; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3), - 4px 4px 0 0 rgba(0, 0, 0, 0.5) !important; + 4px 4px 10px rgba(0, 0, 0, 0.4) !important; } section > div[class*="border-indigo"] { - border-color: var(--pixel-accent-3) !important; - background: var(--pixel-bg-light) !important; + border-color: var(--pixel-accent-2) !important; + background: var(--pixel-bg-3) !important; } /* Grid de Cards */ section .grid > div { - background: var(--pixel-bg-light) !important; + background: var(--pixel-bg-3) !important; border: 3px solid var(--pixel-border) !important; - border-radius: 0 !important; + border-radius: 6px !important; box-shadow: - 4px 4px 0 0 rgba(0, 0, 0, 0.5), - inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important; + 4px 4px 10px rgba(0, 0, 0, 0.4), + inset 0 0 20px rgba(155, 123, 181, 0.08) !important; padding: 20px !important; } @@ -114,10 +115,10 @@ section ul li { } section ul li::before { - content: '■'; + content: '✦'; position: absolute; left: 0; - color: var(--pixel-accent-4); + color: var(--pixel-pumpkin); font-size: 12px; } @@ -141,27 +142,27 @@ section ol li::before { left: 0; font-family: 'Press Start 2P', cursive; font-size: 12px; - color: var(--pixel-accent-4); + color: var(--pixel-pumpkin); } /* Code Blocks en Secciones */ section code { background: var(--pixel-bg-dark) !important; border: 2px solid var(--pixel-accent-2) !important; - color: var(--pixel-accent-4) !important; + color: var(--pixel-accent-3) !important; padding: 4px 8px !important; font-family: 'VT323', monospace !important; font-size: 18px !important; - border-radius: 0 !important; + border-radius: 4px !important; } section pre { background: var(--pixel-bg-dark) !important; border: 3px solid var(--pixel-border) !important; padding: 20px !important; - border-radius: 0 !important; + border-radius: 6px !important; box-shadow: - inset 4px 4px 0 0 rgba(0, 0, 0, 0.5) !important; + inset 3px 3px 8px rgba(0, 0, 0, 0.5) !important; overflow-x: auto; } @@ -169,7 +170,7 @@ section pre code { background: transparent !important; border: none !important; padding: 0 !important; - color: var(--pixel-accent-4) !important; + color: var(--pixel-accent-3) !important; } /* Tablas en Secciones */ @@ -189,13 +190,15 @@ section th { font-size: 12px !important; text-transform: uppercase !important; text-align: left !important; + border-radius: 4px !important; } section td { - background: var(--pixel-bg-light) !important; + background: var(--pixel-bg-3) !important; border: 3px solid var(--pixel-border) !important; padding: 12px !important; color: var(--pixel-text) !important; + border-radius: 4px !important; } section tr:hover td { @@ -313,28 +316,29 @@ section a[class*="bg-"] { font-family: 'Press Start 2P', cursive !important; font-size: 12px !important; padding: 12px 24px !important; - border: 4px solid var(--pixel-border) !important; - background: var(--pixel-accent-2) !important; + border: 3px solid var(--pixel-border) !important; + background: linear-gradient(135deg, var(--pixel-pumpkin), var(--pixel-accent-2)) !important; color: white !important; text-transform: uppercase !important; cursor: pointer !important; - border-radius: 0 !important; + border-radius: 8px !important; box-shadow: - 6px 6px 0 0 rgba(0, 0, 0, 0.6) !important, - inset -2px -2px 0 0 rgba(0, 0, 0, 0.3) !important, - inset 2px 2px 0 0 rgba(255, 255, 255, 0.2) !important; - transition: all 0.1s !important; + 4px 4px 10px rgba(0, 0, 0, 0.4) !important, + inset 2px 2px 4px rgba(255, 255, 255, 0.15) !important; + transition: all 0.3s ease !important; backdrop-filter: none !important; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important; } section button:hover, section a[class*="bg-"]:hover { - background: var(--pixel-accent-3) !important; - transform: translate(2px, 2px) !important; + background: linear-gradient(135deg, var(--pixel-accent-2), var(--pixel-pumpkin)) !important; + transform: translateY(-3px) !important; box-shadow: - 4px 4px 0 0 rgba(0, 0, 0, 0.6) !important, - inset -2px -2px 0 0 rgba(0, 0, 0, 0.3) !important, - inset 2px 2px 0 0 rgba(255, 255, 255, 0.2) !important; + 6px 6px 16px rgba(0, 0, 0, 0.5) !important, + inset 2px 2px 6px rgba(255, 255, 255, 0.2) !important, + 0 0 30px rgba(255, 154, 86, 0.4) !important; + filter: brightness(1.1) !important; } /* Formularios */ diff --git a/src/server/views/index.ejs b/src/server/views/index.ejs index 432634b..5a96d84 100644 --- a/src/server/views/index.ejs +++ b/src/server/views/index.ejs @@ -7,13 +7,13 @@
- +
- +
<%= appName %> • v<%= version %>
- +
@@ -26,11 +26,13 @@
- -
- - - + +
+ + ✦ + + ✦ +
diff --git a/src/server/views/layouts/layout.ejs b/src/server/views/layouts/layout.ejs index bbe4d5c..c639843 100644 --- a/src/server/views/layouts/layout.ejs +++ b/src/server/views/layouts/layout.ejs @@ -48,25 +48,25 @@
- + VER <%= version %> ✦ DJS <%= djsVersion %> ✦ <%= currentDateHuman %> - +

- + Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord - + ✦

- Volver arriba + Volver arriba
diff --git a/src/server/views/partials/navbar.ejs b/src/server/views/partials/navbar.ejs index d6390a1..5ce81aa 100644 --- a/src/server/views/partials/navbar.ejs +++ b/src/server/views/partials/navbar.ejs @@ -1,15 +1,15 @@