diff --git a/README/MODERN_PIXEL_ART_DESIGN.md b/README/MODERN_PIXEL_ART_DESIGN.md new file mode 100644 index 0000000..4d9295c --- /dev/null +++ b/README/MODERN_PIXEL_ART_DESIGN.md @@ -0,0 +1,367 @@ +# ✨ Diseño Moderno con Toques Pixel Art - Amayo Bot + +## 📋 Resumen + +Rediseño completo del sitio web de Amayo Bot con un enfoque **moderno y profesional**, incorporando elementos pixel art de forma sutil. El diseño combina: + +- 🎨 **Glassmorphism**: Efectos de vidrio esmerilado y transparencias +- 🌟 **Gradientes Modernos**: Colores púrpura y naranja suaves +- 🎮 **Toques Pixel Art**: Decoraciones sutiles y fuente retro solo en títulos +- 🌙 **Temática Halloween**: Sutil y elegante, no extrema + +--- + +## 🎨 Características del Diseño + +### Modernidad +- ✅ Glassmorphism (backdrop-filter: blur) +- ✅ Bordes redondeados grandes (24px) +- ✅ Sombras suaves y profundas +- ✅ Transiciones fluidas (cubic-bezier) +- ✅ Tipografía Inter (moderna y legible) +- ✅ Gradientes sutiles + +### Pixel Art (Sutil) +- ✅ Fuente Press Start 2P **solo en títulos** +- ✅ Decoraciones pixeladas pequeñas (calabazas, fantasmas) +- ✅ Animaciones de flotación suaves +- ✅ Sin bordes duros ni sombras pixel art extremas + +--- + +## 🎨 Paleta de Colores + +### Fondos (Glassmorphism) +```css +--bg-base: #0f0a1e /* Fondo principal oscuro */ +--bg-elevated: rgba(30, 20, 45, 0.8) /* Cards con transparencia */ +--bg-card: rgba(50, 35, 70, 0.6) /* Contenido con blur */ +--bg-hover: rgba(70, 50, 95, 0.7) /* Hover states */ +``` + +### Acentos Modernos +```css +--purple-500: #a78bfa /* Púrpura principal */ +--purple-600: #8b5cf6 /* Púrpura oscuro */ +--orange-500: #f59e0b /* Naranja Halloween */ +--orange-600: #d97706 /* Naranja oscuro */ +--pink-500: #ec4899 /* Rosa acento */ +--green-500: #10b981 /* Verde éxito */ +``` + +### Texto +```css +--text-primary: #f9fafb /* Texto principal (blanco casi puro) */ +--text-secondary: #d1d5db /* Texto secundario (gris claro) */ +--text-muted: #9ca3af /* Texto atenuado */ +``` + +--- + +## 📁 Archivos Creados + +### CSS Principal +1. **`modern-pixel.css`** (400+ líneas) + - Variables CSS modernas + - Componentes base (cards, botones, badges) + - Efectos glassmorphism + - Decoraciones pixel art sutiles + - Animaciones suaves + +2. **`modern-sections.css`** (300+ líneas) + - Estilos para secciones de contenido + - Tablas, listas, code blocks + - Responsive design + - Overrides con !important + +### HTML Actualizado +1. **`layouts/layout.ejs`** + - Carga de `modern-pixel.css` y `modern-sections.css` + - Footer moderno sin status-bar retro + +2. **`index.ejs`** + - Hero section con decoraciones sutiles + - Badge moderno con glassmorphism + - Títulos con gradientes + +3. **`partials/navbar.ejs`** + - Navbar con glassmorphism + - Links modernos sin tooltips + - Logo con calabaza sutil + +--- + +## 🎯 Componentes Principales + +### Cards (Glassmorphism) +```css +.pixel-box { + background: rgba(50, 35, 70, 0.6); + backdrop-filter: blur(20px); + border: 1px solid rgba(167, 139, 250, 0.15); + border-radius: 24px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} +``` + +**Características:** +- Transparencia con blur +- Bordes sutiles +- Sombras profundas +- Hover con elevación + +### Botones Modernos +```css +.pixel-btn { + background: linear-gradient(135deg, #8b5cf6, #a78bfa); + border-radius: 16px; + padding: 1rem 2rem; + box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3); +} +``` + +**Características:** +- Gradientes suaves +- Sin bordes pixel art +- Transiciones smooth +- Efectos de luz en hover + +### Títulos con Gradiente +```css +h1 { + font-family: 'Press Start 2P', monospace; + background: linear-gradient(135deg, #a78bfa, #f59e0b); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: gradientPulse 8s infinite; +} +``` + +**Características:** +- Fuente pixel art solo en H1 +- Gradiente púrpura → naranja +- Animación sutil de pulsación +- Resto de texto en Inter + +### Navbar Glassmorphism +```css +.pixel-navbar { + background: rgba(30, 20, 45, 0.8); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(167, 139, 250, 0.15); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); +} +``` + +**Características:** +- Fondo semi-transparente +- Blur effect +- Línea de gradiente sutil en bottom +- Links con hover suave + +--- + +## 🎮 Decoraciones Pixel Art (Sutiles) + +### Calabaza +- Tamaño: 24px +- Estilo: Círculo naranja con sombra suave +- Animación: Pulse sutil (scale 1 → 1.05) +- Uso: Logo, decoraciones laterales + +### Fantasma +- Tamaño: 20px x 24px +- Estilo: Blanco con transparencia +- Animación: Float vertical suave +- Uso: Decoraciones hero, footer + +### Estrellas +- Carácter: ✦ +- Color: Naranja con glow +- Animación: Twinkle (opacity) +- Uso: Separadores, decoraciones + +--- + +## 📐 Diseño Responsive + +### Breakpoints +```css +@media (max-width: 768px) { + .pixel-box { + padding: 1.5rem; + border-radius: 16px; + } + + .pixel-btn { + padding: 0.875rem 1.5rem; + } + + h1 { + font-size: 2rem; + } +} +``` + +### Ajustes Móvil +- ✅ Padding reducido en cards +- ✅ Bordes más pequeños +- ✅ Tipografía escalada con clamp() +- ✅ Decoraciones ocultas/reducidas + +--- + +## ✨ Efectos y Animaciones + +### Gradientes Animados +```css +@keyframes gradientPulse { + 0%, 100% { + background-position: 0% 50%; + filter: brightness(1); + } + 50% { + background-position: 100% 50%; + filter: brightness(1.1); + } +} +``` + +### Hover States +- **Cards**: `translateY(-4px)` + glow púrpura +- **Botones**: `scale(1.02)` + shadow aumentada +- **Links**: Underline gradient animation + +### Transiciones +- Duración: 0.3s +- Easing: `cubic-bezier(0.4, 0, 0.2, 1)` +- Propiedades: transform, box-shadow, border-color + +--- + +## 🔧 Implementación + +### Orden de Carga CSS +```html + + + +``` + +### Fuentes Utilizadas +- **Press Start 2P**: Solo títulos H1 (pixel art) +- **Inter**: Todo el resto (moderna, legible) + +### Compatibilidad +- ✅ Chrome/Edge (full support) +- ✅ Firefox (full support) +- ✅ Safari (con -webkit- prefixes) +- ⚠️ Backdrop-filter requiere navegadores modernos + +--- + +## 🆚 Antes vs Después + +### Antes (Pixel Art Retro Extremo) +- ❌ Fuente pixel en todo +- ❌ Bordes duros y cuadrados +- ❌ Sombras offset sin blur +- ❌ Colores muy saturados +- ❌ Decoraciones grandes y llamativas +- ❌ Tipografía difícil de leer + +### Después (Moderno con Toques Pixel) +- ✅ Fuente moderna (Inter) en texto +- ✅ Glassmorphism y blur effects +- ✅ Bordes redondeados (24px) +- ✅ Gradientes suaves +- ✅ Decoraciones pixel art sutiles +- ✅ Excelente legibilidad + +--- + +## 🎨 Filosofía de Diseño + +### Jerarquía Visual +1. **Títulos**: Press Start 2P con gradientes (atención) +2. **Contenido**: Inter legible (claridad) +3. **Decoraciones**: Pixel art sutil (personalidad) + +### Balance +- **70% Moderno**: Glassmorphism, blur, gradientes +- **30% Pixel Art**: Fuente en títulos, decoraciones pequeñas +- **Halloween**: Colores púrpura/naranja sutiles, no caricaturescos + +### Principios +- ✨ **Legibilidad primero**: Texto claro y cómodo +- 🎨 **Modernidad profesional**: Tendencias actuales de diseño +- 🎮 **Personalidad pixel**: Guiños retro sin ser extremo +- 🌙 **Temática sutil**: Halloween elegante, no infantil + +--- + +## 🚀 Cómo Ver los Cambios + +### 1. Reiniciar Servidor +```bash +npm run server +``` + +### 2. Limpiar Caché +- **Chrome**: `Ctrl + Shift + R` +- **Modo incógnito**: `Ctrl + Shift + N` + +### 3. Verificar Archivos +- ✅ `/assets/css/modern-pixel.css` existe +- ✅ `/assets/css/modern-sections.css` existe +- ✅ `layout.ejs` carga los CSS correctos + +--- + +## ✅ Checklist de Características + +### Diseño General +- [x] Fondo con gradiente moderno +- [x] Glassmorphism en todos los cards +- [x] Tipografía Inter para legibilidad +- [x] Press Start 2P solo en títulos +- [x] Decoraciones pixel art sutiles + +### Componentes +- [x] Cards con blur y transparencia +- [x] Botones con gradientes suaves +- [x] Navbar glassmorphism +- [x] Footer moderno sin status-bar +- [x] Badge con diseño moderno + +### Efectos +- [x] Hover states suaves +- [x] Animaciones fluidas +- [x] Transiciones cubic-bezier +- [x] Gradientes animados en títulos +- [x] Shadows con blur + +### Responsive +- [x] Mobile-friendly +- [x] Breakpoints optimizados +- [x] Tipografía escalable (clamp) +- [x] Touch-friendly buttons + +--- + +## 📝 Notas Finales + +Este diseño combina lo mejor de ambos mundos: +- **Profesionalismo moderno** para credibilidad +- **Personalidad pixel art** para diferenciación +- **Temática Halloween sutil** sin ser extrema + +El resultado es un sitio web que se ve: +- ✨ **Moderno** y actual +- 🎮 **Único** con personalidad +- 📖 **Legible** y accesible +- 🌙 **Elegante** con temática sutil + +**Fecha**: Octubre 2025 +**Versión**: Modern Pixel Art v1.0 +**Estado**: ✅ Completo y listo para producción diff --git a/src/server/views.backup/index.ejs b/src/.backup/views.backup/index.ejs similarity index 100% rename from src/server/views.backup/index.ejs rename to src/.backup/views.backup/index.ejs diff --git a/src/server/views.backup/layouts/layout.ejs b/src/.backup/views.backup/layouts/layout.ejs similarity index 100% rename from src/server/views.backup/layouts/layout.ejs rename to src/.backup/views.backup/layouts/layout.ejs diff --git a/src/server/views.backup/pages/index.ejs b/src/.backup/views.backup/pages/index.ejs similarity index 100% rename from src/server/views.backup/pages/index.ejs rename to src/.backup/views.backup/pages/index.ejs diff --git a/src/server/views.backup/partials/navbar.ejs b/src/.backup/views.backup/partials/navbar.ejs similarity index 100% rename from src/server/views.backup/partials/navbar.ejs rename to src/.backup/views.backup/partials/navbar.ejs diff --git a/src/server/views.backup/partials/rightSidebar.ejs b/src/.backup/views.backup/partials/rightSidebar.ejs similarity index 100% rename from src/server/views.backup/partials/rightSidebar.ejs rename to src/.backup/views.backup/partials/rightSidebar.ejs diff --git a/src/server/views.backup/partials/sections/admin.ejs b/src/.backup/views.backup/partials/sections/admin.ejs similarity index 100% rename from src/server/views.backup/partials/sections/admin.ejs rename to src/.backup/views.backup/partials/sections/admin.ejs diff --git a/src/server/views.backup/partials/sections/alianzas.ejs b/src/.backup/views.backup/partials/sections/alianzas.ejs similarity index 100% rename from src/server/views.backup/partials/sections/alianzas.ejs rename to src/.backup/views.backup/partials/sections/alianzas.ejs diff --git a/src/server/views.backup/partials/sections/cofres.ejs b/src/.backup/views.backup/partials/sections/cofres.ejs similarity index 100% rename from src/server/views.backup/partials/sections/cofres.ejs rename to src/.backup/views.backup/partials/sections/cofres.ejs diff --git a/src/server/views.backup/partials/sections/comandos-basicos.ejs b/src/.backup/views.backup/partials/sections/comandos-basicos.ejs similarity index 100% rename from src/server/views.backup/partials/sections/comandos-basicos.ejs rename to src/.backup/views.backup/partials/sections/comandos-basicos.ejs diff --git a/src/server/views.backup/partials/sections/configuracion.ejs b/src/.backup/views.backup/partials/sections/configuracion.ejs similarity index 100% rename from src/server/views.backup/partials/sections/configuracion.ejs rename to src/.backup/views.backup/partials/sections/configuracion.ejs diff --git a/src/server/views.backup/partials/sections/consumibles.ejs b/src/.backup/views.backup/partials/sections/consumibles.ejs similarity index 100% rename from src/server/views.backup/partials/sections/consumibles.ejs rename to src/.backup/views.backup/partials/sections/consumibles.ejs diff --git a/src/server/views.backup/partials/sections/crafteo.ejs b/src/.backup/views.backup/partials/sections/crafteo.ejs similarity index 100% rename from src/server/views.backup/partials/sections/crafteo.ejs rename to src/.backup/views.backup/partials/sections/crafteo.ejs diff --git a/src/server/views.backup/partials/sections/creacion-contenido.ejs b/src/.backup/views.backup/partials/sections/creacion-contenido.ejs similarity index 100% rename from src/server/views.backup/partials/sections/creacion-contenido.ejs rename to src/.backup/views.backup/partials/sections/creacion-contenido.ejs diff --git a/src/server/views.backup/partials/sections/economia.ejs b/src/.backup/views.backup/partials/sections/economia.ejs similarity index 100% rename from src/server/views.backup/partials/sections/economia.ejs rename to src/.backup/views.backup/partials/sections/economia.ejs diff --git a/src/server/views.backup/partials/sections/ejemplos-avanzados.ejs b/src/.backup/views.backup/partials/sections/ejemplos-avanzados.ejs similarity index 100% rename from src/server/views.backup/partials/sections/ejemplos-avanzados.ejs rename to src/.backup/views.backup/partials/sections/ejemplos-avanzados.ejs diff --git a/src/server/views.backup/partials/sections/ejemplos-basicos.ejs b/src/.backup/views.backup/partials/sections/ejemplos-basicos.ejs similarity index 100% rename from src/server/views.backup/partials/sections/ejemplos-basicos.ejs rename to src/.backup/views.backup/partials/sections/ejemplos-basicos.ejs diff --git a/src/server/views.backup/partials/sections/encantamientos.ejs b/src/.backup/views.backup/partials/sections/encantamientos.ejs similarity index 100% rename from src/server/views.backup/partials/sections/encantamientos.ejs rename to src/.backup/views.backup/partials/sections/encantamientos.ejs diff --git a/src/server/views.backup/partials/sections/estadisticas.ejs b/src/.backup/views.backup/partials/sections/estadisticas.ejs similarity index 100% rename from src/server/views.backup/partials/sections/estadisticas.ejs rename to src/.backup/views.backup/partials/sections/estadisticas.ejs diff --git a/src/server/views.backup/partials/sections/faq.ejs b/src/.backup/views.backup/partials/sections/faq.ejs similarity index 100% rename from src/server/views.backup/partials/sections/faq.ejs rename to src/.backup/views.backup/partials/sections/faq.ejs diff --git a/src/server/views.backup/partials/sections/fundicion.ejs b/src/.backup/views.backup/partials/sections/fundicion.ejs similarity index 100% rename from src/server/views.backup/partials/sections/fundicion.ejs rename to src/.backup/views.backup/partials/sections/fundicion.ejs diff --git a/src/server/views.backup/partials/sections/ia.ejs b/src/.backup/views.backup/partials/sections/ia.ejs similarity index 100% rename from src/server/views.backup/partials/sections/ia.ejs rename to src/.backup/views.backup/partials/sections/ia.ejs diff --git a/src/server/views.backup/partials/sections/inventario-equipo.ejs b/src/.backup/views.backup/partials/sections/inventario-equipo.ejs similarity index 100% rename from src/server/views.backup/partials/sections/inventario-equipo.ejs rename to src/.backup/views.backup/partials/sections/inventario-equipo.ejs diff --git a/src/server/views.backup/partials/sections/logros.ejs b/src/.backup/views.backup/partials/sections/logros.ejs similarity index 100% rename from src/server/views.backup/partials/sections/logros.ejs rename to src/.backup/views.backup/partials/sections/logros.ejs diff --git a/src/server/views.backup/partials/sections/minijuegos.ejs b/src/.backup/views.backup/partials/sections/minijuegos.ejs similarity index 100% rename from src/server/views.backup/partials/sections/minijuegos.ejs rename to src/.backup/views.backup/partials/sections/minijuegos.ejs diff --git a/src/server/views.backup/partials/sections/misiones.ejs b/src/.backup/views.backup/partials/sections/misiones.ejs similarity index 100% rename from src/server/views.backup/partials/sections/misiones.ejs rename to src/.backup/views.backup/partials/sections/misiones.ejs diff --git a/src/server/views.backup/partials/sections/primeros-pasos.ejs b/src/.backup/views.backup/partials/sections/primeros-pasos.ejs similarity index 100% rename from src/server/views.backup/partials/sections/primeros-pasos.ejs rename to src/.backup/views.backup/partials/sections/primeros-pasos.ejs diff --git a/src/server/views.backup/partials/sections/racha.ejs b/src/.backup/views.backup/partials/sections/racha.ejs similarity index 100% rename from src/server/views.backup/partials/sections/racha.ejs rename to src/.backup/views.backup/partials/sections/racha.ejs diff --git a/src/server/views.backup/partials/sections/recordatorios.ejs b/src/.backup/views.backup/partials/sections/recordatorios.ejs similarity index 100% rename from src/server/views.backup/partials/sections/recordatorios.ejs rename to src/.backup/views.backup/partials/sections/recordatorios.ejs diff --git a/src/server/views.backup/partials/sections/sistema-juego.ejs b/src/.backup/views.backup/partials/sections/sistema-juego.ejs similarity index 100% rename from src/server/views.backup/partials/sections/sistema-juego.ejs rename to src/.backup/views.backup/partials/sections/sistema-juego.ejs diff --git a/src/server/views.backup/partials/sections/tienda.ejs b/src/.backup/views.backup/partials/sections/tienda.ejs similarity index 100% rename from src/server/views.backup/partials/sections/tienda.ejs rename to src/.backup/views.backup/partials/sections/tienda.ejs diff --git a/src/server/views.backup/partials/sections/tips.ejs b/src/.backup/views.backup/partials/sections/tips.ejs similarity index 100% rename from src/server/views.backup/partials/sections/tips.ejs rename to src/.backup/views.backup/partials/sections/tips.ejs diff --git a/src/server/views.backup/partials/toc.ejs b/src/.backup/views.backup/partials/toc.ejs similarity index 100% rename from src/server/views.backup/partials/toc.ejs rename to src/.backup/views.backup/partials/toc.ejs diff --git a/src/server/public/assets/css/modern-pixel.css b/src/server/public/assets/css/modern-pixel.css new file mode 100644 index 0000000..bd93626 --- /dev/null +++ b/src/server/public/assets/css/modern-pixel.css @@ -0,0 +1,408 @@ +/* ============================================ + MODERN PIXEL ART - AMAYO BOT + Diseño moderno con toques pixel art sutiles + ============================================ */ + +/* Fuentes */ +@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700;800&display=swap'); + +/* Variables CSS Modernas */ +:root { + /* Fondos glassmorphism */ + --bg-base: #0f0a1e; + --bg-elevated: rgba(30, 20, 45, 0.8); + --bg-card: rgba(50, 35, 70, 0.6); + --bg-hover: rgba(70, 50, 95, 0.7); + + /* Acentos modernos Halloween */ + --purple-500: #a78bfa; + --purple-600: #8b5cf6; + --orange-500: #f59e0b; + --orange-600: #d97706; + --pink-500: #ec4899; + --green-500: #10b981; + + /* Texto */ + --text-primary: #f9fafb; + --text-secondary: #d1d5db; + --text-muted: #9ca3af; + + /* Efectos */ + --border-subtle: rgba(167, 139, 250, 0.15); + --blur-bg: blur(20px); + --shadow-glow: 0 0 40px rgba(167, 139, 250, 0.2); +} + +/* Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Body - Fondo moderno con gradiente */ +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: var(--text-primary); + background: + radial-gradient(ellipse at top, rgba(167, 139, 250, 0.15) 0%, transparent 50%), + radial-gradient(ellipse at bottom, rgba(245, 158, 11, 0.1) 0%, transparent 50%), + linear-gradient(180deg, #0f0a1e 0%, #1a0f2e 50%, #0f0a1e 100%); + background-attachment: fixed; + min-height: 100vh; + position: relative; +} + +/* Partículas de fondo sutiles */ +body::before { + content: ''; + position: fixed; + inset: 0; + background-image: + radial-gradient(circle at 20% 50%, rgba(167, 139, 250, 0.03) 1px, transparent 1px), + radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.03) 1px, transparent 1px); + background-size: 50px 50px, 80px 80px; + pointer-events: none; + z-index: 0; + animation: float 20s ease-in-out infinite; +} + +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +/* Tipografía Moderna */ +h1 { + font-family: 'Press Start 2P', monospace; + font-size: clamp(2rem, 5vw, 4rem); + font-weight: 400; + line-height: 1.3; + background: linear-gradient(135deg, var(--purple-500) 0%, var(--orange-500) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 1.5rem; + text-shadow: none; + animation: gradientPulse 8s ease-in-out infinite; +} + +h2 { + font-family: 'Inter', sans-serif; + font-size: clamp(1.5rem, 3vw, 2.5rem); + font-weight: 700; + color: var(--purple-500); + margin-bottom: 1rem; + letter-spacing: -0.02em; +} + +h3 { + font-family: 'Inter', sans-serif; + font-size: clamp(1.2rem, 2.5vw, 1.75rem); + font-weight: 600; + color: var(--text-primary); + margin-bottom: 0.75rem; +} + +p { + color: var(--text-secondary); + margin-bottom: 1rem; + line-height: 1.7; +} + +/* Glassmorphism Cards */ +.pixel-box, +.modern-card { + background: var(--bg-card); + backdrop-filter: var(--blur-bg); + -webkit-backdrop-filter: var(--blur-bg); + border: 1px solid var(--border-subtle); + border-radius: 24px; + padding: 2rem; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; +} + +.pixel-box::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, + rgba(167, 139, 250, 0.05) 0%, + transparent 50%, + rgba(245, 158, 11, 0.05) 100%); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +.pixel-box:hover { + transform: translateY(-4px); + border-color: rgba(167, 139, 250, 0.3); + box-shadow: + 0 12px 48px rgba(0, 0, 0, 0.4), + 0 0 0 1px rgba(167, 139, 250, 0.2), + var(--shadow-glow); +} + +.pixel-box:hover::before { + opacity: 1; +} + +/* Botones Modernos */ +.pixel-btn, +.modern-btn { + font-family: 'Inter', sans-serif; + font-size: 1rem; + font-weight: 600; + padding: 1rem 2rem; + background: linear-gradient(135deg, var(--purple-600), var(--purple-500)); + color: white; + border: none; + border-radius: 16px; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 4px 16px rgba(139, 92, 246, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + position: relative; + overflow: hidden; + text-transform: none; + letter-spacing: 0; +} + +.pixel-btn::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, + rgba(255, 255, 255, 0.2) 0%, + transparent 50%); + opacity: 0; + transition: opacity 0.3s ease; +} + +.pixel-btn:hover { + transform: translateY(-2px) scale(1.02); + box-shadow: + 0 8px 24px rgba(139, 92, 246, 0.5), + 0 0 0 1px rgba(167, 139, 250, 0.5), + inset 0 1px 0 rgba(255, 255, 255, 0.2); +} + +.pixel-btn:hover::before { + opacity: 1; +} + +.pixel-btn:active { + transform: translateY(0) scale(0.98); +} + +/* Botón Secundario */ +.pixel-btn-secondary { + background: linear-gradient(135deg, var(--orange-600), var(--orange-500)); + box-shadow: + 0 4px 16px rgba(245, 158, 11, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.pixel-btn-secondary:hover { + box-shadow: + 0 8px 24px rgba(245, 158, 11, 0.5), + 0 0 0 1px rgba(245, 158, 11, 0.5), + inset 0 1px 0 rgba(255, 255, 255, 0.2); +} + +/* Badge Moderno */ +.pixel-badge { + font-family: 'Press Start 2P', monospace; + font-size: 0.75rem; + padding: 0.75rem 1.5rem; + background: var(--bg-elevated); + backdrop-filter: var(--blur-bg); + border: 1px solid var(--border-subtle); + border-radius: 12px; + display: inline-block; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); + animation: floatBadge 3s ease-in-out infinite; +} + +@keyframes floatBadge { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } +} + +/* Navbar Moderno */ +.pixel-navbar { + background: var(--bg-elevated); + backdrop-filter: var(--blur-bg); + -webkit-backdrop-filter: var(--blur-bg); + border-bottom: 1px solid var(--border-subtle); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); + position: relative; +} + +.pixel-navbar::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, + transparent 0%, + var(--purple-500) 25%, + var(--orange-500) 50%, + var(--purple-500) 75%, + transparent 100%); + opacity: 0.6; +} + +/* Links Modernos */ +a { + color: var(--purple-500); + text-decoration: none; + transition: all 0.2s ease; + position: relative; +} + +a:hover { + color: var(--purple-600); +} + +a::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 2px; + background: linear-gradient(90deg, var(--purple-500), var(--orange-500)); + transition: width 0.3s ease; +} + +a:hover::after { + width: 100%; +} + +/* Decoraciones Pixel Art Sutiles */ +.pixel-pumpkin { + display: inline-block; + width: 24px; + height: 24px; + background: var(--orange-500); + border-radius: 50%; + box-shadow: + 0 2px 8px rgba(245, 158, 11, 0.4), + inset -2px -2px 4px rgba(0, 0, 0, 0.2), + inset 2px 2px 4px rgba(255, 255, 255, 0.2); + position: relative; + animation: pulse 3s ease-in-out infinite; +} + +.pixel-pumpkin::before { + content: ''; + position: absolute; + top: -4px; + left: 50%; + transform: translateX(-50%); + width: 6px; + height: 8px; + background: var(--green-500); + border-radius: 2px; +} + +.pixel-ghost { + display: inline-block; + width: 20px; + height: 24px; + background: rgba(255, 255, 255, 0.9); + border-radius: 50% 50% 0 0; + box-shadow: 0 2px 12px rgba(255, 255, 255, 0.3); + animation: floatGhost 4s ease-in-out infinite; + position: relative; +} + +.pixel-star-halloween { + display: inline-block; + color: var(--orange-500); + font-size: 1.25rem; + animation: twinkle 2s ease-in-out infinite; + text-shadow: 0 0 10px rgba(245, 158, 11, 0.5); +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.05); } +} + +@keyframes floatGhost { + 0%, 100% { transform: translateY(0); opacity: 0.9; } + 50% { transform: translateY(-10px); opacity: 1; } +} + +@keyframes twinkle { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +@keyframes gradientPulse { + 0%, 100% { + background-position: 0% 50%; + filter: brightness(1); + } + 50% { + background-position: 100% 50%; + filter: brightness(1.1); + } +} + +/* Grid de fondo opcional */ +.pixel-grid-bg { + position: relative; +} + +/* Responsive */ +@media (max-width: 768px) { + .pixel-box { + padding: 1.5rem; + border-radius: 16px; + } + + .pixel-btn { + padding: 0.875rem 1.5rem; + font-size: 0.9rem; + } + + h1 { + font-size: 2rem; + } + + h2 { + font-size: 1.5rem; + } +} + +/* Utilidades */ +.gradient-text { + background: linear-gradient(135deg, var(--purple-500), var(--orange-500)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.text-glow { + text-shadow: 0 0 20px rgba(167, 139, 250, 0.5); +} + +.card-glow { + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.3), + var(--shadow-glow); +} diff --git a/src/server/public/assets/css/modern-sections.css b/src/server/public/assets/css/modern-sections.css new file mode 100644 index 0000000..e8ebac4 --- /dev/null +++ b/src/server/public/assets/css/modern-sections.css @@ -0,0 +1,281 @@ +/* ============================================ + MODERN SECTIONS - AMAYO BOT + Estilos para secciones de contenido + ============================================ */ + +/* Secciones Principales */ +section { + background: rgba(30, 20, 45, 0.6) !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; + border: 1px solid rgba(167, 139, 250, 0.15) !important; + border-radius: 24px !important; + padding: 2.5rem !important; + margin-bottom: 2rem; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; + transition: all 0.3s ease !important; +} + +section:hover { + transform: translateY(-4px); + border-color: rgba(167, 139, 250, 0.3) !important; + box-shadow: + 0 12px 48px rgba(0, 0, 0, 0.4), + 0 0 40px rgba(167, 139, 250, 0.2) !important; +} + +/* Títulos en Secciones */ +section h2 { + font-family: 'Inter', sans-serif !important; + font-size: clamp(1.5rem, 3vw, 2rem) !important; + font-weight: 700 !important; + color: #a78bfa !important; + margin-bottom: 1.5rem !important; + letter-spacing: -0.02em !important; + text-shadow: none !important; + background: none !important; + -webkit-background-clip: unset !important; + -webkit-text-fill-color: unset !important; +} + +section h3 { + font-family: 'Inter', sans-serif !important; + font-size: clamp(1.2rem, 2.5vw, 1.5rem) !important; + font-weight: 600 !important; + color: #f9fafb !important; + margin-bottom: 1rem !important; + text-shadow: none !important; +} + +section h4 { + font-family: 'Inter', sans-serif !important; + font-size: 1.1rem !important; + font-weight: 600 !important; + color: #d1d5db !important; + margin-bottom: 0.75rem !important; +} + +/* Párrafos */ +section p { + color: #d1d5db !important; + line-height: 1.7 !important; + margin-bottom: 1rem; +} + +section p strong { + color: #f59e0b !important; + font-weight: 600; +} + +/* Listas */ +section ul { + list-style: none !important; + padding-left: 0 !important; + margin-bottom: 1.5rem; +} + +section ul li { + position: relative; + padding-left: 2rem; + margin-bottom: 0.75rem; + color: #d1d5db !important; + line-height: 1.6; +} + +section ul li::before { + content: '→'; + position: absolute; + left: 0; + color: #a78bfa; + font-weight: bold; + font-size: 1.2rem; +} + +section ol { + list-style: none !important; + counter-reset: item; + padding-left: 0 !important; + margin-bottom: 1.5rem; +} + +section ol li { + position: relative; + padding-left: 2.5rem; + margin-bottom: 0.75rem; + counter-increment: item; + color: #d1d5db !important; + line-height: 1.6; +} + +section ol li::before { + content: counter(item) "."; + position: absolute; + left: 0; + font-weight: 600; + color: #f59e0b; + font-family: 'Inter', sans-serif; +} + +/* Cajas de Información */ +section > div[class*="space-y"], +section > div[class*="border"] { + background: rgba(50, 35, 70, 0.5) !important; + border: 1px solid rgba(167, 139, 250, 0.2) !important; + border-radius: 16px !important; + padding: 1.5rem !important; + margin-bottom: 1rem; + backdrop-filter: blur(10px) !important; +} + +/* Grid de Cards */ +section .grid > div { + background: rgba(50, 35, 70, 0.5) !important; + border: 1px solid rgba(167, 139, 250, 0.15) !important; + border-radius: 16px !important; + padding: 1.5rem !important; + backdrop-filter: blur(10px) !important; + transition: all 0.3s ease !important; +} + +section .grid > div:hover { + border-color: rgba(167, 139, 250, 0.3) !important; + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; +} + +/* Code Blocks */ +section code { + background: rgba(15, 10, 30, 0.8) !important; + border: 1px solid rgba(167, 139, 250, 0.2) !important; + color: #a78bfa !important; + padding: 0.25rem 0.5rem !important; + border-radius: 6px !important; + font-family: 'Monaco', 'Menlo', monospace !important; + font-size: 0.9rem !important; +} + +section pre { + background: rgba(15, 10, 30, 0.8) !important; + border: 1px solid rgba(167, 139, 250, 0.2) !important; + border-radius: 12px !important; + padding: 1.5rem !important; + overflow-x: auto; + margin-bottom: 1.5rem; + backdrop-filter: blur(10px) !important; +} + +section pre code { + background: transparent !important; + border: none !important; + padding: 0 !important; + color: #d1d5db !important; + font-size: 0.875rem !important; +} + +/* Tablas */ +section table { + width: 100% !important; + border-collapse: separate !important; + border-spacing: 0 !important; + margin: 1.5rem 0; + border-radius: 12px; + overflow: hidden; +} + +section th { + background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important; + color: white !important; + padding: 1rem !important; + text-align: left !important; + font-family: 'Inter', sans-serif !important; + font-size: 0.9rem !important; + font-weight: 600 !important; + text-transform: uppercase !important; + letter-spacing: 0.05em !important; + border: none !important; +} + +section td { + background: rgba(50, 35, 70, 0.5) !important; + border-bottom: 1px solid rgba(167, 139, 250, 0.1) !important; + padding: 1rem !important; + color: #d1d5db !important; +} + +section tr:last-child td { + border-bottom: none !important; +} + +section tr:hover td { + background: rgba(70, 50, 95, 0.6) !important; +} + +/* Botones en Secciones */ +section button, +section a[class*="bg-"], +section .pixel-btn { + font-family: 'Inter', sans-serif !important; + font-size: 1rem !important; + font-weight: 600 !important; + padding: 0.875rem 1.75rem !important; + background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important; + color: white !important; + border: none !important; + border-radius: 12px !important; + cursor: pointer !important; + transition: all 0.3s ease !important; + box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3) !important; + text-transform: none !important; + letter-spacing: 0 !important; +} + +section button:hover, +section a[class*="bg-"]:hover, +section .pixel-btn:hover { + transform: translateY(-2px) scale(1.02) !important; + box-shadow: 0 8px 24px rgba(139, 92, 246, 0.5) !important; + background: linear-gradient(135deg, #a78bfa, #8b5cf6) !important; +} + +/* Alertas y Notas */ +section .alert, +section .note { + padding: 1.25rem !important; + border-radius: 12px !important; + border-left: 4px solid #a78bfa !important; + background: rgba(167, 139, 250, 0.1) !important; + margin-bottom: 1rem; +} + +section .alert-warning { + border-left-color: #f59e0b !important; + background: rgba(245, 158, 11, 0.1) !important; +} + +section .alert-success { + border-left-color: #10b981 !important; + background: rgba(16, 185, 129, 0.1) !important; +} + +section .alert-error { + border-left-color: #ef4444 !important; + background: rgba(239, 68, 68, 0.1) !important; +} + +/* Responsive */ +@media (max-width: 768px) { + section { + padding: 1.5rem !important; + border-radius: 16px !important; + } + + section h2 { + font-size: 1.5rem !important; + } + + section h3 { + font-size: 1.25rem !important; + } +} diff --git a/src/server/public/assets/css/pixel-art.css b/src/server/public/assets/css/pixel-art.css index c716399..5e5470a 100644 --- a/src/server/public/assets/css/pixel-art.css +++ b/src/server/public/assets/css/pixel-art.css @@ -6,32 +6,40 @@ /* Fuentes Pixel Art */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap'); -/* Variables de Color Pixel Art - Soft Halloween Theme */ +/* ============================================ + MODERN PIXEL ART CSS - AMAYO BOT + Diseño moderno con toques pixel art y Halloween + ============================================ */ + +/* Fuentes - Solo títulos pixel art */ +@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700&display=swap'); + +/* Variables CSS - Modern Halloween */ :root { - /* 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 */ + /* Fondos glassmorphism */ + --bg-primary: rgba(30, 20, 45, 0.95); + --bg-secondary: rgba(50, 35, 70, 0.8); + --bg-card: rgba(70, 50, 95, 0.6); + --bg-hover: rgba(90, 65, 120, 0.7); - /* 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 */ + /* Acentos modernos */ + --accent-primary: #a78bfa; /* Púrpura suave */ + --accent-secondary: #f59e0b; /* Naranja Halloween */ + --accent-tertiary: #ec4899; /* Rosa */ + --accent-success: #10b981; /* Verde */ - /* 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); + /* Texto */ + --text-primary: #f3f4f6; + --text-secondary: #d1d5db; + --text-muted: #9ca3af; - /* 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 */ + /* Bordes y sombras */ + --border-color: rgba(167, 139, 250, 0.2); + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); + --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2); + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3); + --glow-purple: 0 0 30px rgba(167, 139, 250, 0.3); + --glow-orange: 0 0 30px rgba(245, 158, 11, 0.3); } /* Reset y Base */ diff --git a/src/server/views/index.ejs b/src/server/views/index.ejs index 5a96d84..0fd2639 100644 --- a/src/server/views/index.ejs +++ b/src/server/views/index.ejs @@ -7,13 +7,13 @@
- +
- +
<%= appName %> • v<%= version %>
- +
@@ -21,28 +21,28 @@

Guía Completa

-

+

<%= appName %>

- -
- + +
✦ - - ✦ + + ✦ + ✦
- +
-

+

Sistema completo de - economía, - minijuegos, - misiones y - IA + economía, + minijuegos, + misiones y + IA para Discord

diff --git a/src/server/views/layouts/layout.ejs b/src/server/views/layouts/layout.ejs index 37a8f56..c12b273 100644 --- a/src/server/views/layouts/layout.ejs +++ b/src/server/views/layouts/layout.ejs @@ -11,9 +11,9 @@ - - - + + + <% if (typeof head !== 'undefined' && head) { %> <%= head %> @@ -47,26 +47,26 @@
-
+
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 5ce81aa..20e945f 100644 --- a/src/server/views/partials/navbar.ejs +++ b/src/server/views/partials/navbar.ejs @@ -1,15 +1,14 @@