shni/amayo

Template

Files

shni 84ada00118 feat: Add new sections for Primeros Pasos, Racha Diaria, Recordatorios, Sistema de Juego, Tienda, Tips y un índice de contenidos; update styles for modern pixel art design

2025-10-09 22:12:13 -05:00

8.7 KiB

Raw Blame History

✨ 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)

--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

--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

--text-primary: #f9fafb      /* Texto principal (blanco casi puro) */
--text-secondary: #d1d5db    /* Texto secundario (gris claro) */
--text-muted: #9ca3af        /* Texto atenuado */

📁 Archivos Creados

CSS Principal

modern-pixel.css (400+ líneas)
- Variables CSS modernas
- Componentes base (cards, botones, badges)
- Efectos glassmorphism
- Decoraciones pixel art sutiles
- Animaciones suaves
modern-sections.css (300+ líneas)
- Estilos para secciones de contenido
- Tablas, listas, code blocks
- Responsive design
- Overrides con !important

HTML Actualizado

layouts/layout.ejs
- Carga de modern-pixel.css y modern-sections.css
- Footer moderno sin status-bar retro
index.ejs
- Hero section con decoraciones sutiles
- Badge moderno con glassmorphism
- Títulos con gradientes
partials/navbar.ejs
- Navbar con glassmorphism
- Links modernos sin tooltips
- Logo con calabaza sutil

🎯 Componentes Principales

Cards (Glassmorphism)

.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

.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

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

.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

@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

@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

<link rel="stylesheet" href="/assets/css/modern-pixel.css?v=2.0.0">
<link rel="stylesheet" href="/assets/css/modern-sections.css?v=2.0.0">
<link rel="stylesheet" href="/assets/css/styles.css?v=2.0.0">

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

Títulos: Press Start 2P con gradientes (atención)
Contenido: Inter legible (claridad)
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

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

Fondo con gradiente moderno
Glassmorphism en todos los cards
Tipografía Inter para legibilidad
Press Start 2P solo en títulos
Decoraciones pixel art sutiles

Componentes

Cards con blur y transparencia
Botones con gradientes suaves
Navbar glassmorphism
Footer moderno sin status-bar
Badge con diseño moderno

Efectos

Hover states suaves
Animaciones fluidas
Transiciones cubic-bezier
Gradientes animados en títulos
Shadows con blur

Responsive

Mobile-friendly
Breakpoints optimizados
Tipografía escalable (clamp)
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

8.7 KiB Raw Blame History

✨ Diseño Moderno con Toques Pixel Art - Amayo Bot

📋 Resumen

🎨 Características del Diseño

Modernidad

Pixel Art (Sutil)

🎨 Paleta de Colores

Fondos (Glassmorphism)

Acentos Modernos

Texto

📁 Archivos Creados

CSS Principal

HTML Actualizado

🎯 Componentes Principales

Cards (Glassmorphism)

Botones Modernos

Títulos con Gradiente

Navbar Glassmorphism

🎮 Decoraciones Pixel Art (Sutiles)

Calabaza

Fantasma

Estrellas

📐 Diseño Responsive

Breakpoints

Ajustes Móvil

✨ Efectos y Animaciones

Gradientes Animados

Hover States

Transiciones

🔧 Implementación

Orden de Carga CSS

Fuentes Utilizadas

Compatibilidad

🆚 Antes vs Después

Antes (Pixel Art Retro Extremo)

Después (Moderno con Toques Pixel)

🎨 Filosofía de Diseño

Jerarquía Visual

Balance

Principios

🚀 Cómo Ver los Cambios

1. Reiniciar Servidor

2. Limpiar Caché

3. Verificar Archivos

✅ Checklist de Características

Diseño General

Componentes

Efectos

Responsive

📝 Notas Finales

8.7 KiB

Raw Blame History