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
This commit is contained in:
367
README/MODERN_PIXEL_ART_DESIGN.md
Normal file
367
README/MODERN_PIXEL_ART_DESIGN.md
Normal file
@@ -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
|
||||
<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
|
||||
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
|
||||
408
src/server/public/assets/css/modern-pixel.css
Normal file
408
src/server/public/assets/css/modern-pixel.css
Normal file
@@ -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);
|
||||
}
|
||||
281
src/server/public/assets/css/modern-sections.css
Normal file
281
src/server/public/assets/css/modern-sections.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 */
|
||||
|
||||
@@ -7,13 +7,13 @@
|
||||
<header class="relative overflow-hidden py-20 sm:py-28">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
|
||||
<div class="max-w-5xl mx-auto text-center space-y-12">
|
||||
<!-- Badge Pixel Art con decoración de Halloween -->
|
||||
<!-- Badge Moderno con decoraciones sutiles -->
|
||||
<div class="inline-block relative">
|
||||
<span class="pixel-pumpkin absolute -left-12 top-0"></span>
|
||||
<span class="pixel-pumpkin absolute" style="left: -40px; top: 50%; transform: translateY(-50%);"></span>
|
||||
<div class="pixel-badge">
|
||||
<%= appName %> • v<%= version %>
|
||||
</div>
|
||||
<span class="pixel-ghost absolute -right-12 top-0" style="animation-delay: 1s;"></span>
|
||||
<span class="pixel-ghost absolute" style="right: -40px; top: 50%; transform: translateY(-50%);"></span>
|
||||
</div>
|
||||
|
||||
<!-- Título Principal -->
|
||||
@@ -21,28 +21,28 @@
|
||||
<h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl leading-tight">
|
||||
Guía Completa
|
||||
</h1>
|
||||
<h2 class="text-4xl sm:text-5xl md:text-6xl">
|
||||
<h2 class="text-4xl sm:text-5xl md:text-6xl" style="font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #a78bfa, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
|
||||
<%= appName %>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Decoración de Halloween con murciélagos y estrellas -->
|
||||
<div class="flex justify-center gap-8 items-center">
|
||||
<span class="pixel-bat"></span>
|
||||
<!-- Decoraciones sutiles -->
|
||||
<div class="flex justify-center gap-6 items-center">
|
||||
<span class="pixel-star-halloween">✦</span>
|
||||
<span class="pixel-pumpkin" style="animation-delay: 0.5s;"></span>
|
||||
<span class="pixel-star-halloween" style="animation-delay: 0.8s;">✦</span>
|
||||
<span class="pixel-pumpkin"></span>
|
||||
<span class="pixel-star-halloween" style="animation-delay: 0.5s;">✦</span>
|
||||
<span class="pixel-ghost" style="animation-delay: 1s;"></span>
|
||||
<span class="pixel-star-halloween" style="animation-delay: 1.5s;">✦</span>
|
||||
</div>
|
||||
|
||||
<!-- Descripción -->
|
||||
<!-- Descripción con diseño moderno -->
|
||||
<div class="pixel-box max-w-3xl mx-auto">
|
||||
<p class="text-xl sm:text-2xl leading-relaxed">
|
||||
<p class="text-xl sm:text-2xl leading-relaxed" style="color: var(--text-secondary);">
|
||||
Sistema completo de
|
||||
<span style="color: var(--pixel-accent-1); font-weight: bold;">economía</span>,
|
||||
<span style="color: var(--pixel-accent-3); font-weight: bold;">minijuegos</span>,
|
||||
<span style="color: var(--pixel-accent-5); font-weight: bold;">misiones</span> y
|
||||
<span style="color: var(--pixel-accent-2); font-weight: bold;">IA</span>
|
||||
<span class="gradient-text font-semibold">economía</span>,
|
||||
<span class="gradient-text font-semibold">minijuegos</span>,
|
||||
<span class="gradient-text font-semibold">misiones</span> y
|
||||
<span class="gradient-text font-semibold">IA</span>
|
||||
para Discord
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -11,9 +11,9 @@
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
<!-- Pixel Art CSS -->
|
||||
<link rel="stylesheet" href="/assets/css/pixel-art.css?v=<%= version || '2.0.0' %>">
|
||||
<link rel="stylesheet" href="/assets/css/pixel-sections.css?v=<%= version || '2.0.0' %>">
|
||||
<!-- Modern Pixel Art CSS -->
|
||||
<link rel="stylesheet" href="/assets/css/modern-pixel.css?v=<%= version || '2.0.0' %>">
|
||||
<link rel="stylesheet" href="/assets/css/modern-sections.css?v=<%= version || '2.0.0' %>">
|
||||
<link rel="stylesheet" href="/assets/css/styles.css?v=<%= version || '2.0.0' %>">
|
||||
<% if (typeof head !== 'undefined' && head) { %>
|
||||
<%= head %>
|
||||
@@ -47,26 +47,26 @@
|
||||
</div>
|
||||
|
||||
<div class="pixel-border p-4 mb-6" style="background: linear-gradient(135deg, var(--pixel-bg-dark) 0%, var(--pixel-bg-medium) 100%);">
|
||||
<div class="pixel-status-bar justify-center">
|
||||
<div class="flex items-center justify-center gap-4 text-sm" style="color: var(--text-secondary);">
|
||||
<span class="pixel-pumpkin" style="width: 16px; height: 16px;"></span>
|
||||
<span>VER <%= version %></span>
|
||||
<span>✦</span>
|
||||
<span>•</span>
|
||||
<span>DJS <%= djsVersion %></span>
|
||||
<span>✦</span>
|
||||
<span>•</span>
|
||||
<span><%= currentDateHuman %></span>
|
||||
<span class="pixel-ghost" style="width: 16px; height: 20px; animation-delay: 1.5s;"></span>
|
||||
<span class="pixel-ghost" style="width: 16px; height: 20px;"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-center text-xs pixel-text-dim mb-6 flex items-center justify-center gap-2">
|
||||
<span class="pixel-bat" style="width: 24px; height: 12px;"></span>
|
||||
<p class="text-center text-sm mb-6 flex items-center justify-center gap-3" style="color: var(--text-muted);">
|
||||
<span class="pixel-star-halloween">✦</span>
|
||||
<span>Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord</span>
|
||||
<span class="pixel-star-halloween">✦</span>
|
||||
</p>
|
||||
|
||||
<div class="text-center">
|
||||
<a class="pixel-btn-secondary pixel-btn inline-block" href="#primeros-pasos">
|
||||
<span aria-hidden="true">🎃</span> Volver arriba <span aria-hidden="true">👻</span>
|
||||
↑ Volver arriba
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
<nav class="fixed inset-x-0 top-0 z-50 pixel-navbar">
|
||||
<div class="mx-auto max-w-[120rem] px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
|
||||
<a href="#" class="flex items-center gap-3">
|
||||
<div class="pixel-pumpkin" style="width: 20px; height: 20px;"></div>
|
||||
<span class="font-['Press_Start_2P'] text-sm" style="color: var(--pixel-pumpkin);"><%= appName %></span>
|
||||
<span class="pixel-star-halloween">✦</span>
|
||||
<div class="mx-auto max-w-[120rem] px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
<a href="#" class="flex items-center gap-3 group">
|
||||
<div class="pixel-pumpkin transition-transform group-hover:scale-110" style="width: 24px; height: 24px;"></div>
|
||||
<span class="font-['Press_Start_2P'] text-sm gradient-text"><%= appName %></span>
|
||||
</a>
|
||||
<div class="hidden md:flex items-center gap-6">
|
||||
<a href="#primeros-pasos" class="pixel-tooltip" data-tooltip="🎃 Empieza aquí">Guía</a>
|
||||
<a href="#minijuegos" class="pixel-tooltip" data-tooltip="🎮 Juega">Minijuegos</a>
|
||||
<a href="#economia" class="pixel-tooltip" data-tooltip="💰 Gana">Economía</a>
|
||||
<a href="#faq" class="pixel-tooltip" data-tooltip="👻 Ayuda">FAQ</a>
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a href="#primeros-pasos" class="text-sm font-medium hover:text-purple-400 transition-colors" style="color: var(--text-secondary);">Guía</a>
|
||||
<a href="#minijuegos" class="text-sm font-medium hover:text-purple-400 transition-colors" style="color: var(--text-secondary);">Minijuegos</a>
|
||||
<a href="#economia" class="text-sm font-medium hover:text-purple-400 transition-colors" style="color: var(--text-secondary);">Economía</a>
|
||||
<a href="#faq" class="text-sm font-medium hover:text-purple-400 transition-colors" style="color: var(--text-secondary);">FAQ</a>
|
||||
</div>
|
||||
<button id="toggle-nav" class="md:hidden" aria-label="Abrir navegación">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
Reference in New Issue
Block a user