# 🎮 Rediseño Pixel Art - Documentación Web ## 📋 Resumen de Cambios Se ha transformado completamente el diseño de la documentación web (`src/server/views/**`) desde un estilo moderno con glassmorphism y gradientes a un **diseño pixel art retro** inspirado en RPGs de 8/16 bits. --- ## 🎨 Cambios Visuales Implementados ### **1. Sistema de Fuentes** - **Primary**: `'Press Start 2P'` (Google Fonts) - Para títulos y UI importante - **Secondary**: `'VT323'` (Google Fonts) - Para texto general y código - Aplicado `image-rendering: pixelated` globalmente ### **2. Paleta de Colores Retro** ```css --pixel-bg-dark: #0f0a1e /* Fondo oscuro principal */ --pixel-bg-medium: #1a1433 /* Contenedores */ --pixel-bg-light: #2d2347 /* Cards y cajas */ --pixel-accent-1: #ff006e /* Rosa/Magenta (misiones) */ --pixel-accent-2: #8338ec /* Púrpura (IA) */ --pixel-accent-3: #3a86ff /* Azul (minijuegos) */ --pixel-accent-4: #06ffa5 /* Verde/Cyan (economía) */ ``` ### **3. Elementos UI Pixel Art** #### **Botones** (`.pixel-btn`) - Bordes de 4px con efecto 3D - Box-shadow con desplazamiento al hover - Fuente Press Start 2P - Transiciones instantáneas (0.1s) #### **Cajas/Contenedores** (`.pixel-box`) - Bordes cuadrados (border-radius: 0) - Box-shadow con offset de 8px - Borde doble con `::before` pseudo-element - Animación de pulso sutil #### **Navbar Pixel** (`.pixel-navbar`) - Borde inferior de 4px - Franja animada con degradado en la parte inferior - Logo con moneda pixelada animada #### **Badges** (`.pixel-badge`) - Fuente pequeña (10px) Press Start 2P - Animación de rebote (`pixelBounce`) - Box-shadow 3D #### **Tablas** - `border-spacing: 4px` para separación visual - Headers con fondo morado y fuente pixel - Hover con glow verde #### **Scrollbar Personalizado** - Track oscuro con bordes - Thumb con color accent-2 - Efecto inset 3D --- ## 📁 Archivos Creados/Modificados ### **Archivos CSS Nuevos** #### 1. `/src/server/public/assets/css/pixel-art.css` **Propósito**: Estilos base pixel art y componentes reutilizables **Contenido principal**: - Variables CSS globales - Reset con pixelated rendering - Componentes: `.pixel-btn`, `.pixel-box`, `.pixel-badge`, `.pixel-navbar` - Animaciones: `pixelGlow`, `pixelPulse`, `pixelScroll`, `pixelBounce`, `pixelShake` - Elementos decorativos: `.pixel-heart`, `.pixel-coin`, `.pixel-hp-bar` - Tooltips pixel art - Scrollbar custom **Líneas clave**: ```css /* Fuentes */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap'); /* Background grid */ .pixel-grid-bg { background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 16px 16px; } ``` #### 2. `/src/server/public/assets/css/pixel-sections.css` **Propósito**: Sobrescribir estilos de secciones individuales **Contenido principal**: - Estilos para `
` con bordes pixel - Títulos H2/H3/H4 con fuentes pixel - Listas con bullets custom (`■`) - Code blocks con borde de acento - Tablas responsive - Forms con estilo retro **Sobrescrituras importantes**: ```css section { background: var(--pixel-bg-medium) !important; border: 4px solid var(--pixel-border) !important; box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.5) !important; } section h2 { font-family: 'Press Start 2P', cursive !important; text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.8), 0 0 20px var(--pixel-accent-4) !important; } ``` --- ### **Archivos EJS Modificados** #### 1. `/src/server/views/layouts/layout.ejs` **Cambios**: - ✅ Eliminado config de Tailwind con animaciones smooth - ✅ Incluido `pixel-art.css` y `pixel-sections.css` - ✅ Cambiado body class: `pixel-grid-bg` en lugar de gradiente - ✅ Eliminado los 3 blobs animados (`animate-float`) - ✅ Footer rediseñado con `.pixel-box` y `.pixel-status-bar` **Antes**: ```html
``` **Después**: ```html ``` #### 2. `/src/server/views/index.ejs` **Cambios**: - ✅ Badge con `.pixel-badge` en lugar de gradientes - ✅ Títulos H1/H2 sin `bg-clip-text` (texto sólido) - ✅ HP bar decorativo con corazones pixel - ✅ Descripción dentro de `.pixel-box` - ✅ Botones con `.pixel-btn` y `.pixel-btn-secondary` - ✅ Stats footer con `.pixel-box` individuales **Antes**: ```html
<%= appName %> • v<%= version %>
``` **Después**: ```html
<%= appName %> • v<%= version %>
``` #### 3. `/src/server/views/partials/navbar.ejs` **Cambios**: - ✅ Clase principal: `.pixel-navbar` - ✅ Logo con `.pixel-coin` animado - ✅ Links con `.pixel-tooltip` (hover muestra info) - ✅ Fuente Press Start 2P para el nombre del bot **Antes**: ```html