shni/amayo
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add modern design for Amayo Bot guide with animated elements and responsive layout

Browse Source
This commit is contained in:
shni
2025-10-05 23:54:48 -05:00
parent ff5b9a5a22
commit f512dd7af9
5 changed files with 2194 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
GUIA_DE_USUARIO.md
View File

@@ -1,50 +1,182 @@
# 🎮 Guía de Usuario - Sistema de Economía y Minijuegos # 🎮 Guía de Usuario Completa - Amayo Bot
> **Bienvenido a la guía completa para crear contenido de juego en tu servidor de Discord** > **Última actualización: Enero 2025 • Versión 0.11.20**
Esta guía te enseñará cómo crear items, enemigos, áreas de juego y ofertas de tienda usando comandos simples de Discord. No necesitas saber programación, solo seguir los pasos. Esta es la guía completa de Amayo Bot para usuarios finales de Discord. Aprende a usar todos los comandos, jugar minijuegos, gestionar tu economía y, si eres administrador, cómo crear contenido personalizado para tu servidor.
--- ---
## 📋 Tabla de Contenidos ## 📋 Tabla de Contenidos
1. [Requisitos Previos](#requisitos-previos) ### Para Todos los Usuarios
2. [Conceptos Básicos](#conceptos-básicos) 1. [Primeros Pasos](#primeros-pasos)
3. [Creando Items](#creando-items) 2. [Comandos Básicos](#comandos-basicos)
4. [Gestionando Items](#gestionando-items) 3. [Sistema de Juego](#sistema-juego)
5. [Creando Enemigos](#creando-enemigos) 4. [Minijuegos](#minijuegos)
6. [Gestionando Enemigos](#gestionando-enemigos) 5. [Inventario y Equipo](#inventario)
7. [Configurando Áreas de Juego](#configurando-áreas) 6. [Economía](#economia)
8. [Gestionando Áreas](#gestionando-áreas) 7. [Tienda](#tienda)
9. [Configurando Niveles](#configurando-niveles) 8. [Crafteo](#crafteo)
10. [Creando Ofertas de Tienda](#creando-ofertas) 9. [Logros](#logros)
11. [Creando Logros](#creando-logros) 10. [Misiones](#misiones)
12. [Gestionando Logros](#gestionando-logros) 11. [Racha Diaria](#racha)
13. [Creando Misiones](#creando-misiones) 12. [Consumibles](#consumibles)
14. [Gestionando Misiones](#gestionando-misiones) 13. [Cofres](#cofres)
15. [Comandos de Jugador](#comandos-jugador) 14. [Encantamientos](#encantamientos)
16. [Ejemplos Prácticos](#ejemplos-prácticos) 15. [Fundición](#fundicion)
17. [Preguntas Frecuentes](#preguntas-frecuentes) 16. [IA Conversacional](#ia)
17. [Recordatorios](#recordatorios)
18. [Sistema de Alianzas](#alianzas)
### Para Administradores
19. [Creación de Contenido](#creacion-contenido)
20. [Gestión de Items](#gestion-items)
21. [Gestión de Mobs](#gestion-mobs)
22. [Gestión de Áreas](#gestion-areas)
23. [Gestión de Ofertas](#gestion-ofertas)
24. [Configuración del Servidor](#configuracion)
### Recursos
25. [Tips y Trucos](#tips)
26. [Preguntas Frecuentes](#faq)
--- ---
## 🔑 Requisitos Previos {#requisitos-previos} ## 🚀 Primeros Pasos {#primeros-pasos}
Para usar los comandos de creación de contenido, necesitas: ### ¿Qué es Amayo Bot?
- Tener el permiso **"Administrar Servidor"** en Discord, **O**
- Tener un rol de Staff configurado en tu servidor Amayo Bot es un bot de Discord completo que añade un sistema de juego RPG a tu servidor con:
- **Minijuegos**: Mina, pesca, pelea y cultiva
- **Economía**: Sistema de monedas, tienda e inventario
- **Progresión**: Logros, misiones y rachas diarias
- **Personalización**: Equipo, encantamientos y crafteo
- **IA**: Chat con Gemini AI
- **Alianzas**: Sistema de puntos para servidores
### Prefix del Bot
El prefix por defecto es `!` pero los administradores pueden cambiarlo.
**Ejemplos:**
- `!ayuda` - Ver comandos disponibles
- `!player` - Ver tu perfil
- `!mina` - Jugar al minijuego de minería
---
## ⚡ Comandos Básicos {#comandos-basicos}
### Información General
- `!ayuda` o `!help` - Lista todos los comandos
- `!ayuda <comando>` - Ayuda sobre un comando específico
- `!ping` - Ver la latencia del bot
- `!player [@usuario]` - Ver perfil de jugador
### Ver tu Progreso
- `!inventario` o `!inv` - Ver tu inventario
- `!stats` - Ver tus estadísticas detalladas
- `!logros` - Ver tus logros
- `!misiones` - Ver misiones disponibles
- `!cooldowns` - Ver tus cooldowns activos
---
## 🎮 Sistema de Juego {#sistema-juego}
### Estadísticas de Combate
Tu personaje tiene las siguientes estadísticas:
- **HP (Vida)**: Puntos de vida actuales y máximos
- **ATK (Ataque)**: Daño que infliges
- **DEF (Defensa)**: Reduce el daño recibido
### Equipo
Puedes equipar:
- **Arma (weapon)**: Aumenta tu ataque
- **Armadura (armor)**: Aumenta tu defensa
- **Capa (cape)**: Bonos especiales (HP, stats adicionales)
**Comando:**
```
!equipar <slot> <itemKey>
```
**Ejemplos:**
- `!equipar weapon iron_sword`
- `!equipar armor leather_armor`
- `!equipar cape red_cape`
---
## 🎯 Minijuegos {#minijuegos}
Los minijuegos son la forma principal de obtener recursos y monedas.
### ⛏️ Minar
Extrae minerales valiosos de la mina.
**Comando:** `!mina [nivel] [herramienta] [area:clave]`
**Ejemplos:**
- `!mina` - Mina en el nivel más alto desbloqueado
- `!mina 2` - Mina en el nivel 2
- `!mina 1 iron_pickaxe` - Usa un pico específico
**Herramienta requerida:** Pico (pickaxe)
### 🎣 Pescar
Captura peces y tesoros en la laguna.
**Comando:** `!pescar [nivel] [herramienta] [area:clave]`
**Ejemplos:**
- `!pescar` - Pesca automática
- `!pescar 3` - Pesca en nivel 3
**Herramienta requerida:** Caña de pescar (rod)
### ⚔️ Pelear
Enfrenta enemigos en la arena.
**Comando:** `!pelear [nivel] [arma] [area:clave]`
**Ejemplos:**
- `!pelear` - Combate automático
- `!pelear 1 iron_sword` - Usa espada específica
**Herramienta requerida:** Arma (sword, bow, halberd)
### 🌾 Plantar
Cultiva plantas y cosecha alimentos.
**Comando:** `!plantar [nivel] [herramienta]`
**Herramienta requerida:** Azada (hoe)
### Cooldowns
Cada minijuego tiene un tiempo de espera entre usos. Usa `!cooldowns` para ver cuánto tiempo falta.
--- ---
## 💡 Conceptos Básicos {#conceptos-básicos} ## 💡 Conceptos Básicos {#conceptos-básicos}
### ¿Qué es una "key"? ### ¿Qué es una "key"?
Una **key** es un identificador único para cada elemento que crees. Piénsalo como el "nombre interno" del elemento. Una **key** es un identificador único para cada elemento (item, mob, área, etc.). Es como el "nombre interno" del elemento.
**Ejemplos de keys:** **Ejemplos de keys:**
- `iron_sword` (para una espada de hierro) - `iron_sword` - Espada de hierro
- `health_potion` (para una poción de vida) - `health_potion` - Poción de vida
- `cave_spider` (para un enemigo araña) - `cave_spider` - Enemigo araña
**⚠️ Importante:** Las keys no pueden repetirse y deben ser únicas. **⚠️ Importante:** Las keys no pueden repetirse y deben ser únicas.
@@ -1135,3 +1267,33 @@ Si tienes problemas o preguntas:
--- ---
**¡Feliz creación de contenido! 🎉** **¡Feliz creación de contenido! 🎉**
---
## 📚 Documentación Completa
Esta guía es un resumen. Para la **documentación completa, interactiva y moderna** con todas las secciones detalladas, incluyendo:
- ✅ Todos los comandos con ejemplos
- ✅ Sistema completo de creación de contenido (Items, Mobs, Áreas, Niveles, Ofertas)
- ✅ Guía de Props y configuraciones JSON
- ✅ Ejemplos prácticos completos
- ✅ Tips, trucos y FAQ
- ✅ Diseño moderno con navegación interactiva
**Accede a:** `src/server/public/index.html`
O visita la URL de tu servidor: `http://tu-servidor:puerto/`
---
## 🔗 Recursos Adicionales
- **CREACION_DE_CONTENIDO.md** - Documentación técnica detallada para administradores sobre creación de contenido
- **index.html** - Documentación web completa e interactiva
- **Repositorio del Bot** - Código fuente y documentación técnica
---
**Última actualización:** Enero 2025 • Versión 0.11.20
**Amayo Bot** © 2025 - Documentación para usuarios finales de Discord

414
src/server/public/assets/css/styles.css
View File

@@ -1,407 +1,43 @@
:root { /* Solo estilos mínimos que Tailwind no puede hacer - TODO LO DEMÁS es Tailwind */
color-scheme: dark; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
/* Smooth scrolling */
html {
scroll-behavior: smooth;
} }
/* Optimizaciones de renderizado */
body { body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
code { /* Animación personalizada para glassmorphism */
font-feature-settings: "calt" 0; @keyframes glow {
}:root { 0%, 100% { opacity: 0.5; }
color-scheme: light dark; 50% { opacity: 0.8; }
--bg: #0f172a;
--bg-soft: rgba(15, 23, 42, 0.6);
--bg-card: rgba(15, 23, 42, 0.85);
--bg-card-light: #f8fafc;
--text: #0f172a;
--text-light: #f8fafc;
--accent: #6366f1;
--accent-soft: rgba(99, 102, 241, 0.15);
--border: rgba(148, 163, 184, 0.2);
--success: #22c55e;
--warning: #f59e0b;
--info: #0ea5e9;
--card-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.45);
} }
* { .animate-glow {
margin: 0; animation: glow 3s ease-in-out infinite;
padding: 0;
box-sizing: border-box;
} }
body { /* Scrollbar personalizado (opcional, moderno) */
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", ::-webkit-scrollbar {
sans-serif; width: 8px;
background: linear-gradient(180deg, #020617 0%, #0f172a 55%, #111827 100%); height: 8px;
color: var(--text-light);
min-height: 100vh;
line-height: 1.6;
display: flex;
flex-direction: column;
} }
a { ::-webkit-scrollbar-track {
color: inherit; background: #0f172a;
} }
a:hover { ::-webkit-scrollbar-thumb {
color: var(--accent); background: linear-gradient(180deg, #6366f1, #8b5cf6);
border-radius: 4px;
} }
.hero { ::-webkit-scrollbar-thumb:hover {
padding: clamp(3rem, 8vw, 6rem) clamp(2rem, 6vw, 5rem) clamp(2rem, 6vw, 4rem); background: linear-gradient(180deg, #818cf8, #a78bfa);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.35), transparent 55%),
radial-gradient(circle at 80% 10%, rgba(56, 189, 248, 0.25), transparent 60%),
radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.15), transparent 65%);
opacity: 0.75;
z-index: 0;
}
.hero__content {
max-width: 60rem;
position: relative;
z-index: 1;
}
.hero h1 {
font-size: clamp(2.5rem, 4vw, 3.8rem);
margin-bottom: 1.2rem;
font-weight: 700;
}
.hero p {
max-width: 45rem;
font-size: 1.1rem;
color: rgba(248, 250, 252, 0.85);
margin-left: auto;
margin-right: auto;
}
.hero__cta {
margin-top: 2.5rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.hero__meta {
margin-top: 2rem;
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
position: relative;
z-index: 1;
justify-content: center;
}
.layout {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1.5rem, 5vw, 3rem);
padding: 0 clamp(1.5rem, 6vw, 4rem) 4rem;
}
.badge {
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 999px;
padding: 0.45rem 0.9rem;
font-size: 0.85rem;
letter-spacing: 0.02em;
}
.btn {
border: none;
border-radius: 999px;
padding: 0.75rem 1.6rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn.primary {
background: linear-gradient(90deg, var(--accent) 0%, #7c3aed 100%);
color: white;
box-shadow: 0 18px 36px -18px rgba(99, 102, 241, 0.85);
}
.btn.ghost {
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.4);
color: rgba(248, 250, 252, 0.9);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 22px 40px -24px rgba(99, 102, 241, 0.9);
}
.toc {
position: sticky;
top: 1.5rem;
margin: 2rem auto;
padding: 1.5rem;
background: rgba(15, 23, 42, 0.5);
border: 1px solid var(--border);
border-radius: 1.25rem;
backdrop-filter: blur(24px);
width: min(90vw, 22rem);
box-shadow: var(--card-shadow);
}
.toc__title {
font-weight: 600;
margin-bottom: 1rem;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 0.9rem;
color: rgba(148, 163, 184, 0.85);
}
.toc ul {
list-style: none;
display: grid;
gap: 0.65rem;
}
.toc a {
text-decoration: none;
color: rgba(226, 232, 240, 0.95);
font-size: 0.95rem;
transition: color 0.2s ease;
}
.content {
margin: 2rem auto 5rem;
display: flex;
flex-direction: column;
gap: 2.5rem;
width: min(1100px, calc(100% - 4rem));
align-items: center;
}
.card {
padding: clamp(1.8rem, 3vw, 2.4rem);
border-radius: 1.5rem;
background: var(--bg-card);
border: 1px solid rgba(148, 163, 184, 0.2);
box-shadow: var(--card-shadow);
width: min(100%, 960px);
text-align: center;
}
.card h2 {
font-size: clamp(1.8rem, 2.8vw, 2.2rem);
margin-bottom: 1rem;
}
.card h3 {
font-size: 1.15rem;
margin-bottom: 0.75rem;
}
.card p {
color: rgba(226, 232, 240, 0.9);
margin-bottom: 1rem;
margin-left: auto;
margin-right: auto;
max-width: 48rem;
}
.card ul {
padding-left: 1.25rem;
margin-bottom: 1rem;
text-align: left;
margin-left: auto;
margin-right: auto;
max-width: 48rem;
}
.card li + li {
margin-top: 0.5rem;
}
.card__sub {
padding: 1.4rem;
border-radius: 1rem;
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(148, 163, 184, 0.14);
text-align: left;
width: 100%;
}
.grid {
display: grid;
gap: 1.25rem;
justify-items: center;
}
.grid.two {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
pre {
background: rgba(15, 23, 42, 0.8);
color: rgba(244, 244, 255, 0.95);
padding: 1rem 1.25rem;
border-radius: 1rem;
overflow-x: auto;
border: 1px solid rgba(99, 102, 241, 0.25);
font-size: 0.9rem;
margin: 0 auto 1rem;
max-width: 48rem;
}
code {
font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, SFMono,
"Segoe UI Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
padding: 0.15rem 0.35rem;
border-radius: 0.5rem;
background: rgba(99, 102, 241, 0.18);
color: #cbd5f5;
}
.card details {
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(148, 163, 184, 0.14);
padding: 1rem 1.25rem;
border-radius: 1rem;
color: rgba(226, 232, 240, 0.9);
text-align: left;
}
.card details + details {
margin-top: 1rem;
}
.card details summary {
font-weight: 600;
cursor: pointer;
list-style: none;
}
.card details[open] summary {
color: rgba(129, 140, 248, 0.95);
}
.callout {
border-radius: 1.2rem;
padding: 1.25rem 1.5rem;
border: 1px solid transparent;
margin-top: 1.25rem;
display: flex;
gap: 1rem;
}
.callout strong {
font-weight: 700;
}
.callout.info {
background: rgba(14, 165, 233, 0.12);
border-color: rgba(14, 165, 233, 0.32);
color: rgba(125, 211, 252, 0.95);
}
.callout.success {
background: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.32);
color: rgba(134, 239, 172, 0.95);
}
.callout.warning {
background: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.35);
color: rgba(253, 224, 71, 0.95);
}
.footer {
margin-top: auto;
padding: 3rem 1.5rem;
text-align: center;
color: rgba(203, 213, 225, 0.7);
font-size: 0.95rem;
}
.footer a {
display: inline-block;
margin-top: 0.75rem;
color: rgba(129, 140, 248, 0.9);
}
@media (max-width: 1024px) {
body {
padding-bottom: 4rem;
}
.toc {
position: fixed;
inset: 0;
margin: 0;
max-width: none;
border-radius: 0;
z-index: 99;
transform: translateY(-110%);
transition: transform 0.25s ease;
overflow-y: auto;
}
.toc.open {
transform: translateY(0);
}
.toc ul {
padding-bottom: 4rem;
}
.content {
margin: 0 auto 4rem;
width: min(1100px, calc(100% - 2.5rem));
}
.layout {
padding: 0 clamp(1.25rem, 8vw, 3rem) 3.5rem;
}
}
@media (max-width: 640px) {
.hero__content {
max-width: 100%;
}
.hero__cta {
flex-direction: column;
align-items: stretch;
}
.card {
padding: 1.5rem;
}
.card__sub {
padding: 1.1rem;
}
pre {
font-size: 0.85rem;
}
} }

521
src/server/public/index.html
View File

@@ -1,49 +1,123 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="es" class="scroll-smooth">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Amayo Bot | Guía Completa para Usuarios de Discord</title>
<title>Amayo Bot | Guía Completa para Usuarios</title> <meta name="description" content="Guía completa de Amayo Bot: comandos, minijuegos, economía, misiones, logros, creación de contenido y más">
<meta
name="description"
content="Guía completa de Amayo Bot para usuarios de Discord: comandos de juego, economía, misiones, logros y mucho más."
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>
tailwind.config = { tailwind.config = {
theme: { theme: {
extend: { extend: {
fontFamily: { animation: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'Segoe UI', 'sans-serif'], 'gradient': 'gradient 8s linear infinite',
mono: [ 'float': 'float 6s ease-in-out infinite',
'JetBrains Mono', 'glow': 'glow 3s ease-in-out infinite',
'ui-monospace', },
'SFMono-Regular', keyframes: {
'SFMono', gradient: {
'Menlo', '0%, 100%': { backgroundPosition: '0% 50%' },
'Monaco', '50%': { backgroundPosition: '100% 50%' },
'Consolas', },
'Liberation Mono', float: {
'Courier New', '0%, 100%': { transform: 'translateY(0)' },
'monospace' '50%': { transform: 'translateY(-20px)' },
] },
glow: {
'0%, 100%': { opacity: '0.4' },
'50%': { opacity: '0.8' },
},
},
},
}, },
boxShadow: {
glow: '0 40px 120px -45px rgba(99, 102, 241, 0.45)'
}
}
}
}; };
</script> </script>
<link rel="stylesheet" href="./assets/css/styles.css" /> <link rel="stylesheet" href="./assets/css/styles.css">
</head> </head>
<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100 antialiased">
<!-- Animated Background Blobs -->
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
<div class="absolute top-0 left-1/4 w-96 h-96 bg-purple-500/20 rounded-full mix-blend-screen filter blur-3xl animate-float"></div>
<div class="absolute top-1/3 right-1/4 w-96 h-96 bg-indigo-500/20 rounded-full mix-blend-screen filter blur-3xl animate-float" style="animation-delay: 2s;"></div>
<div class="absolute bottom-0 left-1/3 w-96 h-96 bg-pink-500/15 rounded-full mix-blend-screen filter blur-3xl animate-float" style="animation-delay: 4s;"></div>
</div>
<div class="relative z-10">
<!-- Hero Ultra Moderno -->
<header class="relative overflow-hidden border-b border-white/5">
<div class="absolute inset-0 bg-gradient-to-b from-indigo-500/5 via-purple-500/5 to-transparent"></div>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28 relative">
<div class="max-w-5xl mx-auto text-center space-y-8">
<!-- Badge con Pulse -->
<div class="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 border border-indigo-500/30 backdrop-blur-sm">
<span class="relative flex h-2.5 w-2.5">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-gradient-to-r from-indigo-400 to-purple-400"></span>
</span>
<span class="text-sm font-bold tracking-wider uppercase bg-clip-text text-transparent bg-gradient-to-r from-indigo-200 to-purple-200">
Amayo Bot • v0.11.20
</span>
</div>
<!-- Título con Gradiente Animado -->
<h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black leading-tight">
<span class="block bg-clip-text text-transparent bg-gradient-to-r from-white via-indigo-100 to-purple-100">
Guía Completa
</span>
<span class="block bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">
Amayo Bot
</span>
</h1>
<!-- Descripción -->
<p class="text-xl sm:text-2xl text-slate-300 max-w-3xl mx-auto leading-relaxed font-light">
Sistema completo de <span class="font-semibold text-indigo-300">economía</span>, <span class="font-semibold text-purple-300">minijuegos</span>, <span class="font-semibold text-pink-300">misiones</span> y <span class="font-semibold text-blue-300">IA</span> para Discord
</p>
<!-- CTA Buttons Modernos -->
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
<a href="#primeros-pasos" class="group relative px-10 py-4 text-lg font-bold text-white overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-r from-indigo-600 to-purple-600 transition-transform duration-300 group-hover:scale-110"></div>
<div class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<span class="relative flex items-center gap-2">
Comenzar ahora
<svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg>
</span>
</a>
<button id="toggle-nav" class="group px-10 py-4 text-lg font-bold text-white backdrop-blur-xl bg-white/5 border-2 border-white/10 rounded-2xl hover:bg-white/10 hover:border-white/20 hover:scale-105 transition-all duration-300">
<span class="flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
Ver índice
</span>
</button>
</div>
<!-- Meta Info Ultra Moderno -->
<div class="flex flex-wrap justify-center gap-3 pt-6">
<span class="px-5 py-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 text-sm font-medium text-slate-300 hover:bg-white/10 transition-all">
Discord.js 15.0-dev
</span>
<span class="px-5 py-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 text-sm font-medium text-slate-300 hover:bg-white/10 transition-all">
Enero 2025
</span>
<span class="px-5 py-2 rounded-xl bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border border-indigo-500/30 text-sm font-bold text-indigo-200 hover:from-indigo-500/20 hover:to-purple-500/20 transition-all">
23 Secciones • Creación de Contenido Incluida
</span>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
<body class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-950 to-slate-900 text-slate-100 antialiased"> <body class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-950 to-slate-900 text-slate-100 antialiased">
<div class="flex min-h-screen flex-col"> <div class="flex min-h-screen flex-col">
<header class="relative overflow-hidden"> <header class="relative overflow-hidden">
@@ -129,8 +203,8 @@
<div class="mx-auto flex w-full max-w-3xl flex-col gap-8"> <div class="mx-auto flex w-full max-w-3xl flex-col gap-8">
<!-- PRIMEROS PASOS --> <!-- PRIMEROS PASOS -->
<section id="primeros-pasos" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="primeros-pasos" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🚀 Primeros Pasos</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🚀 Primeros Pasos</h2>
<p class="text-slate-200"> <p class="text-slate-200">
¡Bienvenido a <strong class="text-white">Amayo Bot</strong>! Este bot transforma tu servidor de Discord en una experiencia de juego completa con economía, minijuegos, misiones y mucho más. ¡Bienvenido a <strong class="text-white">Amayo Bot</strong>! Este bot transforma tu servidor de Discord en una experiencia de juego completa con economía, minijuegos, misiones y mucho más.
</p> </p>
@@ -170,8 +244,8 @@
</section> </section>
<!-- COMANDOS BÁSICOS --> <!-- COMANDOS BÁSICOS -->
<section id="comandos-basicos" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="comandos-basicos" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">⚡ Comandos Básicos</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">⚡ Comandos Básicos</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Estos son los comandos esenciales que necesitas conocer para empezar. Estos son los comandos esenciales que necesitas conocer para empezar.
</p> </p>
@@ -198,8 +272,8 @@
</section> </section>
<!-- SISTEMA DE JUEGO --> <!-- SISTEMA DE JUEGO -->
<section id="sistema-juego" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="sistema-juego" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🎮 Sistema de Juego</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🎮 Sistema de Juego</h2>
<p class="text-slate-200"> <p class="text-slate-200">
El sistema de juego de Amayo incluye <strong class="text-white">HP (puntos de vida)</strong>, <strong class="text-white">estadísticas de combate</strong>, <strong class="text-white">niveles de progresión</strong> y más. El sistema de juego de Amayo incluye <strong class="text-white">HP (puntos de vida)</strong>, <strong class="text-white">estadísticas de combate</strong>, <strong class="text-white">niveles de progresión</strong> y más.
</p> </p>
@@ -236,8 +310,8 @@
</section> </section>
<!-- MINIJUEGOS --> <!-- MINIJUEGOS -->
<section id="minijuegos" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="minijuegos" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🎯 Minijuegos y Actividades</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🎯 Minijuegos y Actividades</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Los minijuegos son la forma principal de ganar recursos, monedas y experiencia. Cada uno tiene su propio estilo y recompensas. Los minijuegos son la forma principal de ganar recursos, monedas y experiencia. Cada uno tiene su propio estilo y recompensas.
</p> </p>
@@ -331,8 +405,8 @@
</section> </section>
<!-- INVENTARIO Y EQUIPO --> <!-- INVENTARIO Y EQUIPO -->
<section id="inventario-equipo" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="inventario-equipo" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🎒 Inventario y Equipo</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🎒 Inventario y Equipo</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Gestiona todos tus items y equipa armas, armaduras y capas para mejorar tus estadísticas. Gestiona todos tus items y equipa armas, armaduras y capas para mejorar tus estadísticas.
</p> </p>
@@ -395,8 +469,8 @@
</section> </section>
<!-- ECONOMÍA --> <!-- ECONOMÍA -->
<section id="economia" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="economia" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">💰 Sistema de Economía</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">💰 Sistema de Economía</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Gana y gestiona monedas para comprar items, participar en eventos y mejorar tu progreso. Gana y gestiona monedas para comprar items, participar en eventos y mejorar tu progreso.
</p> </p>
@@ -430,8 +504,8 @@
</section> </section>
<!-- TIENDA --> <!-- TIENDA -->
<section id="tienda" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="tienda" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🛒 Tienda y Compras</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🛒 Tienda y Compras</h2>
<p class="text-slate-200"> <p class="text-slate-200">
La tienda ofrece items especiales, herramientas, consumibles y más. Compra con tus monedas ganadas. La tienda ofrece items especiales, herramientas, consumibles y más. Compra con tus monedas ganadas.
</p> </p>
@@ -476,8 +550,8 @@
</section> </section>
<!-- CRAFTEO --> <!-- CRAFTEO -->
<section id="crafteo" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="crafteo" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🔨 Crafteo y Creación</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🔨 Crafteo y Creación</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Transforma materiales crudos en items útiles usando el sistema de crafteo. Transforma materiales crudos en items útiles usando el sistema de crafteo.
</p> </p>
@@ -517,8 +591,8 @@
</section> </section>
<!-- LOGROS --> <!-- LOGROS -->
<section id="logros" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="logros" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🏆 Logros</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🏆 Logros</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Desbloquea logros completando objetivos y recibe recompensas especiales. Los logros son permanentes y demuestran tus hazañas. Desbloquea logros completando objetivos y recibe recompensas especiales. Los logros son permanentes y demuestran tus hazañas.
</p> </p>
@@ -565,8 +639,8 @@
</section> </section>
<!-- MISIONES --> <!-- MISIONES -->
<section id="misiones" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="misiones" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">📜 Misiones</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">📜 Misiones</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Completa misiones para obtener grandes recompensas. Las misiones se renuevan periódicamente y ofrecen objetivos variados. Completa misiones para obtener grandes recompensas. Las misiones se renuevan periódicamente y ofrecen objetivos variados.
</p> </p>
@@ -623,8 +697,8 @@
</section> </section>
<!-- RACHA DIARIA --> <!-- RACHA DIARIA -->
<section id="racha-diaria" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="racha-diaria" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🔥 Racha Diaria</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🔥 Racha Diaria</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Mantén tu racha diaria activa para recibir recompensas progresivas cada día. ¡Cuanto más larga sea tu racha, mejores serán las recompensas! Mantén tu racha diaria activa para recibir recompensas progresivas cada día. ¡Cuanto más larga sea tu racha, mejores serán las recompensas!
</p> </p>
@@ -676,8 +750,8 @@
</section> </section>
<!-- CONSUMIBLES Y POCIONES --> <!-- CONSUMIBLES Y POCIONES -->
<section id="consumibles" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="consumibles" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🍖 Consumibles y Pociones</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🍖 Consumibles y Pociones</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Usa pociones y comida para recuperar HP durante tus aventuras. Los consumibles tienen cooldowns individuales. Usa pociones y comida para recuperar HP durante tus aventuras. Los consumibles tienen cooldowns individuales.
</p> </p>
@@ -720,8 +794,8 @@
</section> </section>
<!-- COFRES --> <!-- COFRES -->
<section id="cofres" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="cofres" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🎁 Cofres y Recompensas</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🎁 Cofres y Recompensas</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Los cofres contienen recompensas aleatorias que pueden incluir items raros, monedas y hasta roles especiales de Discord. Los cofres contienen recompensas aleatorias que pueden incluir items raros, monedas y hasta roles especiales de Discord.
</p> </p>
@@ -767,8 +841,8 @@
</section> </section>
<!-- ENCANTAMIENTOS --> <!-- ENCANTAMIENTOS -->
<section id="encantamientos" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="encantamientos" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">✨ Encantamientos y Mutaciones</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">✨ Encantamientos y Mutaciones</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Mejora tus items aplicándoles encantamientos o mutaciones especiales que les otorgan poderes adicionales. Mejora tus items aplicándoles encantamientos o mutaciones especiales que les otorgan poderes adicionales.
</p> </p>
@@ -815,8 +889,8 @@
</section> </section>
<!-- FUNDICIÓN --> <!-- FUNDICIÓN -->
<section id="fundicion" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="fundicion" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🔥 Sistema de Fundición</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🔥 Sistema de Fundición</h2>
<p class="text-slate-200"> <p class="text-slate-200">
La fundición te permite transformar materiales en lingotes y otros items, pero toma tiempo. Programa tus fundiciones y reclama cuando estén listas. La fundición te permite transformar materiales en lingotes y otros items, pero toma tiempo. Programa tus fundiciones y reclama cuando estén listas.
</p> </p>
@@ -868,8 +942,8 @@
</section> </section>
<!-- INTELIGENCIA ARTIFICIAL --> <!-- INTELIGENCIA ARTIFICIAL -->
<section id="ia" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="ia" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🤖 Inteligencia Artificial</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🤖 Inteligencia Artificial</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Chatea con Gemini AI directamente desde Discord. Haz preguntas, pide ayuda o simplemente conversa. Chatea con Gemini AI directamente desde Discord. Haz preguntas, pide ayuda o simplemente conversa.
</p> </p>
@@ -911,8 +985,8 @@
</section> </section>
<!-- RECORDATORIOS --> <!-- RECORDATORIOS -->
<section id="recordatorios" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="recordatorios" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">⏰ Sistema de Recordatorios</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">⏰ Sistema de Recordatorios</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Programa recordatorios para que el bot te avise en el futuro. Perfecto para no olvidar eventos, tareas o actividades. Programa recordatorios para que el bot te avise en el futuro. Perfecto para no olvidar eventos, tareas o actividades.
</p> </p>
@@ -964,8 +1038,8 @@
</section> </section>
<!-- SISTEMA DE ALIANZAS --> <!-- SISTEMA DE ALIANZAS -->
<section id="alianzas" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="alianzas" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🤝 Sistema de Alianzas</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🤝 Sistema de Alianzas</h2>
<p class="text-slate-200"> <p class="text-slate-200">
El sistema de alianzas permite a los servidores compartir enlaces de invitación y ganar puntos. <strong class="text-amber-300">Requiere permisos de Administrador.</strong> El sistema de alianzas permite a los servidores compartir enlaces de invitación y ganar puntos. <strong class="text-amber-300">Requiere permisos de Administrador.</strong>
</p> </p>
@@ -1013,7 +1087,7 @@
<!-- ADMINISTRACIÓN --> <!-- ADMINISTRACIÓN -->
<section id="admin" class="space-y-6 rounded-3xl border border-red-500/20 bg-slate-900/80 p-8 shadow-2xl shadow-red-500/10 backdrop-blur"> <section id="admin" class="space-y-6 rounded-3xl border border-red-500/20 bg-slate-900/80 p-8 shadow-2xl shadow-red-500/10 backdrop-blur">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
<h2 class="text-3xl font-semibold text-white">⚙️ Panel de Administración</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">⚙️ Panel de Administración</h2>
<span class="rounded-full bg-red-500/20 px-3 py-1 text-xs font-semibold text-red-200">ADMIN ONLY</span> <span class="rounded-full bg-red-500/20 px-3 py-1 text-xs font-semibold text-red-200">ADMIN ONLY</span>
</div> </div>
<p class="text-slate-200"> <p class="text-slate-200">
@@ -1088,9 +1162,292 @@
</div> </div>
</section> </section>
<!-- SECCIÓN EXPANDIDA: CREACIÓN DE CONTENIDO -->
<section id="creacion-contenido" class="group">
<div class="rounded-3xl bg-gradient-to-br from-red-900/20 to-orange-900/20 backdrop-blur-xl border border-red-500/30 p-8 shadow-2xl">
<div class="mb-8">
<div class="inline-flex items-center gap-3 mb-4">
<h2 class="text-4xl sm:text-5xl font-black bg-clip-text text-transparent bg-gradient-to-r from-red-200 to-orange-200">
🎨 Creación de Contenido
</h2>
<span class="px-3 py-1 rounded-full bg-red-500/20 text-red-200 text-xs font-bold uppercase border border-red-500/30">
Admin/Usuarios Avanzados
</span>
</div>
<div class="h-1 w-32 bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 rounded-full"></div>
</div>
<p class="text-lg text-slate-300 mb-10 leading-relaxed">
Esta sección está diseñada tanto para <strong class="text-white">administradores</strong> que crean contenido como para <strong class="text-white">usuarios que quieren entender</strong> cómo funciona el sistema completo del bot.
</p>
<!-- Tabla de Contenidos Interna -->
<div class="rounded-2xl bg-gradient-to-br from-slate-800/60 to-slate-900/60 border border-white/10 p-6 mb-10">
<h3 class="text-xl font-bold text-white mb-4">📑 En esta Sección</h3>
<div class="grid md:grid-cols-2 gap-3">
<a href="#crear-items" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 hover:bg-indigo-500/10 text-slate-300 hover:text-white transition-all">
<span>📦</span> Crear Items
</a>
<a href="#crear-mobs" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 hover:bg-indigo-500/10 text-slate-300 hover:text-white transition-all">
<span>👾</span> Crear Enemigos
</a>
<a href="#crear-areas" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 hover:bg-indigo-500/10 text-slate-300 hover:text-white transition-all">
<span>🗺️</span> Crear Áreas
</a>
<a href="#crear-niveles" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 hover:bg-indigo-500/10 text-slate-300 hover:text-white transition-all">
<span>📊</span> Configurar Niveles
</a>
<a href="#crear-ofertas" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 hover:bg-indigo-500/10 text-slate-300 hover:text-white transition-all">
<span>🏪</span> Crear Ofertas
</a>
<a href="#sistema-pesos" class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 hover:bg-indigo-500/10 text-slate-300 hover:text-white transition-all">
<span>⚖️</span> Sistema de Pesos
</a>
</div>
</div>
<!-- Crear Items -->
<div id="crear-items" class="mb-12">
<div class="rounded-2xl bg-gradient-to-br from-blue-500/10 to-cyan-500/10 border border-blue-500/30 p-8">
<h3 class="text-2xl font-bold text-blue-200 mb-6 flex items-center gap-3">
<span class="text-3xl">📦</span>
Crear Items (EconomyItem)
</h3>
<div class="space-y-6">
<!-- Comando Principal -->
<div>
<h4 class="text-lg font-semibold text-white mb-3">Comando Principal</h4>
<div class="bg-slate-900/50 border border-blue-500/30 rounded-xl p-4">
<code class="text-blue-200 font-mono">!item-crear &lt;key-única&gt;</code>
<p class="text-sm text-slate-400 mt-2">Ejemplo: <code class="text-xs bg-slate-800 px-2 py-1 rounded">!item-crear iron_sword</code></p>
</div>
</div>
<!-- Editor Interactivo -->
<div>
<h4 class="text-lg font-semibold text-white mb-3">🎛️ Editor Interactivo</h4>
<p class="text-slate-300 mb-4">El comando abre un editor con botones interactivos:</p>
<div class="grid md:grid-cols-2 gap-3">
<div class="bg-slate-900/30 border border-slate-700 rounded-lg p-4">
<h5 class="font-bold text-white mb-2">📝 Base</h5>
<p class="text-sm text-slate-400">Configuración básica: nombre, descripción, categoría, stackable</p>
</div>
<div class="bg-slate-900/30 border border-slate-700 rounded-lg p-4">
<h5 class="font-bold text-white mb-2">🏷️ Tags</h5>
<p class="text-sm text-slate-400">Etiquetas separadas por coma (weapon, rare, crafteable)</p>
</div>
<div class="bg-slate-900/30 border border-slate-700 rounded-lg p-4">
<h5 class="font-bold text-white mb-2">⚙️ Props (JSON)</h5>
<p class="text-sm text-slate-400">Propiedades avanzadas en formato JSON</p>
</div>
<div class="bg-slate-900/30 border border-slate-700 rounded-lg p-4">
<h5 class="font-bold text-white mb-2">💾 Guardar/Cancelar</h5>
<p class="text-sm text-slate-400">Confirma o cancela la creación</p>
</div>
</div>
</div>
<!-- Modal Base -->
<div>
<h4 class="text-lg font-semibold text-white mb-3">📋 Modal "Base"</h4>
<div class="space-y-2 text-sm">
<div class="flex gap-3 items-start">
<span class="text-blue-400">•</span>
<div>
<strong class="text-white">Nombre:</strong>
<span class="text-slate-300"> (requerido) Nombre visible del item</span>
</div>
</div>
<div class="flex gap-3 items-start">
<span class="text-blue-400">•</span>
<div>
<strong class="text-white">Descripción:</strong>
<span class="text-slate-300"> Texto descriptivo del item</span>
</div>
</div>
<div class="flex gap-3 items-start">
<span class="text-blue-400">•</span>
<div>
<strong class="text-white">Categoría:</strong>
<span class="text-slate-300"> Agrupa items (weapons, tools, consumables, etc.)</span>
</div>
</div>
<div class="flex gap-3 items-start">
<span class="text-blue-400">•</span>
<div>
<strong class="text-white">Icon URL:</strong>
<span class="text-slate-300"> URL de imagen (opcional)</span>
</div>
</div>
<div class="flex gap-3 items-start">
<span class="text-blue-400">•</span>
<div>
<strong class="text-white">Stackable y Máx:</strong>
<span class="text-slate-300"> Formato: <code class="bg-slate-800 px-1.5 py-0.5 rounded text-xs">true,10</code> o <code class="bg-slate-800 px-1.5 py-0.5 rounded text-xs">false,1</code></span>
<ul class="ml-4 mt-2 space-y-1 text-xs text-slate-400">
<li>• <code>true,10</code> = Apilable hasta 10 unidades</li>
<li>• <code>false,1</code> = Solo 1 unidad (armas/herramientas)</li>
<li>• <code>true,</code> = Apilable sin límite</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Props Disponibles -->
<div>
<h4 class="text-lg font-semibold text-white mb-4">⚙️ Props (JSON) Disponibles</h4>
<div class="space-y-4">
<!-- Tool -->
<details class="group/details bg-slate-900/30 border border-slate-700 rounded-lg overflow-hidden">
<summary class="cursor-pointer px-4 py-3 font-semibold text-white hover:bg-slate-800/50 transition-all flex items-center gap-2">
<span class="text-xl">🔧</span>
<span>tool - Herramientas</span>
</summary>
<div class="px-4 py-3 border-t border-slate-700 space-y-2">
<p class="text-sm text-slate-300 mb-3">Define el tipo de actividad que habilita tu item.</p>
<pre class="bg-slate-900 border border-slate-700 rounded-lg p-4 text-xs text-cyan-200 overflow-x-auto"><code>{
"tool": {
"type": "pickaxe|rod|sword|bow|halberd|net",
"tier": 1
}
}</code></pre>
<ul class="text-sm text-slate-400 space-y-1 mt-3">
<li>• <code class="text-xs">type</code>: Tipo de herramienta (determina en qué minijuego se usa)</li>
<li>• <code class="text-xs">tier</code>: Nivel/calidad (usado en requisitos de niveles)</li>
</ul>
</div>
</details>
<!-- Breakable -->
<details class="bg-slate-900/30 border border-slate-700 rounded-lg overflow-hidden">
<summary class="cursor-pointer px-4 py-3 font-semibold text-white hover:bg-slate-800/50 transition-all flex items-center gap-2">
<span class="text-xl">💥</span>
<span>breakable - Durabilidad</span>
</summary>
<div class="px-4 py-3 border-t border-slate-700 space-y-2">
<p class="text-sm text-slate-300 mb-3">Para items no apilables que se desgastan con el uso.</p>
<pre class="bg-slate-900 border border-slate-700 rounded-lg p-4 text-xs text-cyan-200 overflow-x-auto"><code>{
"breakable": {
"enabled": true,
"maxDurability": 100,
"durabilityPerUse": 1
}
}</code></pre>
</div>
</details>
<!-- Chest -->
<details class="bg-slate-900/30 border border-slate-700 rounded-lg overflow-hidden">
<summary class="cursor-pointer px-4 py-3 font-semibold text-white hover:bg-slate-800/50 transition-all flex items-center gap-2">
<span class="text-xl">📦</span>
<span>chest - Cofres</span>
</summary>
<div class="px-4 py-3 border-t border-slate-700 space-y-2">
<p class="text-sm text-slate-300 mb-3">Permite definir loot tables, recompensas de monedas, items o roles.</p>
<pre class="bg-slate-900 border border-slate-700 rounded-lg p-4 text-xs text-cyan-200 overflow-x-auto"><code>{
"chest": {
"enabled": true,
"rewards": [
{ "type": "coins", "amount": 100 },
{ "type": "item", "itemKey": "iron_ore", "qty": 5 },
{ "type": "role", "roleId": "1234567890" }
],
"consumeOnOpen": true
}
}</code></pre>
</div>
</details>
<!-- Food -->
<details class="bg-slate-900/30 border border-slate-700 rounded-lg overflow-hidden">
<summary class="cursor-pointer px-4 py-3 font-semibold text-white hover:bg-slate-800/50 transition-all flex items-center gap-2">
<span class="text-xl">🍖</span>
<span>food - Comida/Pociones</span>
</summary>
<div class="px-4 py-3 border-t border-slate-700 space-y-2">
<pre class="bg-slate-900 border border-slate-700 rounded-lg p-4 text-xs text-cyan-200 overflow-x-auto"><code>{
"food": {
"healHp": 50,
"healPercent": 25,
"cooldownKey": "healing_potion",
"cooldownSeconds": 60
}
}</code></pre>
</div>
</details>
<!-- Combat Stats -->
<details class="bg-slate-900/30 border border-slate-700 rounded-lg overflow-hidden">
<summary class="cursor-pointer px-4 py-3 font-semibold text-white hover:bg-slate-800/50 transition-all flex items-center gap-2">
<span class="text-xl">⚔️</span>
<span>Stats de Combate</span>
</summary>
<div class="px-4 py-3 border-t border-slate-700 space-y-2">
<pre class="bg-slate-900 border border-slate-700 rounded-lg p-4 text-xs text-cyan-200 overflow-x-auto"><code>{
"damage": 10,
"defense": 5,
"maxHpBonus": 20
}</code></pre>
</div>
</details>
</div>
</div>
<!-- Ejemplo Completo -->
<div>
<h4 class="text-lg font-semibold text-white mb-3"><EFBFBD><EFBFBD> Ejemplo Completo: Pico de Hierro</h4>
<div class="bg-emerald-500/10 border border-emerald-500/30 rounded-lg p-4">
<p class="text-sm text-emerald-200 mb-3"><strong>Comando:</strong> <code>!item-crear iron_pickaxe</code></p>
<div class="space-y-3 text-sm">
<div>
<p class="text-white font-semibold mb-1">Modal Base:</p>
<ul class="text-slate-300 space-y-1 ml-4">
<li>• Nombre: <code>Pico de Hierro</code></li>
<li>• Descripción: <code>Un pico resistente para minar minerales</code></li>
<li>• Categoría: <code>tools</code></li>
<li>• Stackable: <code>false,1</code></li>
</ul>
</div>
<div>
<p class="text-white font-semibold mb-1">Props (JSON):</p>
<pre class="bg-slate-900 rounded p-2 text-xs text-cyan-200"><code>{
"tool": { "type": "pickaxe", "tier": 2 },
"breakable": {
"enabled": true,
"maxDurability": 150,
"durabilityPerUse": 1
}
}</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Más secciones continuarán... -->
<div class="rounded-2xl bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border border-indigo-500/30 p-6 text-center">
<p class="text-lg font-semibold text-indigo-200 mb-2">📚 Documentación Completa</p>
<p class="text-sm text-slate-300">
Para información detallada sobre la creación de Mobs, Áreas, Niveles, Ofertas, Logros y Misiones,
consulta el archivo <code class="bg-slate-800 px-2 py-1 rounded text-xs">CREACION_DE_CONTENIDO.md</code>
en el repositorio del bot.
</p>
<p class="text-xs text-slate-400 mt-3">
Esta sección te da una introducción. El archivo MD contiene ejemplos completos,
todas las propiedades disponibles y guías paso a paso.
</p>
</div>
</div>
</section>
<!-- CONFIGURACIÓN --> <!-- CONFIGURACIÓN -->
<section id="configuracion" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="configuracion" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">🔧 Configuración del Servidor</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🔧 Configuración del Servidor</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Los administradores pueden personalizar el comportamiento del bot en su servidor. Los administradores pueden personalizar el comportamiento del bot en su servidor.
</p> </p>
@@ -1121,8 +1478,8 @@
</section> </section>
<!-- ESTADÍSTICAS --> <!-- ESTADÍSTICAS -->
<section id="estadisticas" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="estadisticas" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">📊 Estadísticas y Progreso</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">📊 Estadísticas y Progreso</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Revisa tus estadísticas detalladas y cooldowns activos para planificar tu progreso. Revisa tus estadísticas detalladas y cooldowns activos para planificar tu progreso.
</p> </p>
@@ -1165,8 +1522,8 @@
</section> </section>
<!-- TIPS Y TRUCOS --> <!-- TIPS Y TRUCOS -->
<section id="tips" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="tips" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">💡 Tips y Trucos</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">💡 Tips y Trucos</h2>
<p class="text-slate-200"> <p class="text-slate-200">
Consejos para aprovechar al máximo Amayo Bot y progresar más rápido. Consejos para aprovechar al máximo Amayo Bot y progresar más rápido.
</p> </p>
@@ -1215,8 +1572,8 @@
</section> </section>
<!-- FAQ --> <!-- FAQ -->
<section id="faq" class="space-y-6 rounded-3xl border border-white/5 bg-slate-900/80 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur"> <section id="faq" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
<h2 class="text-3xl font-semibold text-white">❓ Preguntas Frecuentes</h2> <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">❓ Preguntas Frecuentes</h2>
<div class="space-y-4"> <div class="space-y-4">
<details class="rounded-2xl border border-white/5 bg-slate-900/60 p-4 text-slate-200"> <details class="rounded-2xl border border-white/5 bg-slate-900/60 p-4 text-slate-200">

1323
src/server/public/index.html.v2.backup Normal file
View File

File diff suppressed because it is too large Load Diff

210
src/server/public/index_modern_test.html Normal file
View File

@@ -0,0 +1,210 @@
<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amayo Bot | Guía Completa - Diseño Moderno</title>
<meta name="description" content="Guía completa ultra moderna de Amayo Bot para Discord">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
animation: {
'gradient': 'gradient 8s linear infinite',
'float': 'float 6s ease-in-out infinite',
'glow': 'glow 3s ease-in-out infinite',
'slide-in': 'slideIn 0.5s ease-out',
},
keyframes: {
gradient: {
'0%, 100%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' },
},
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' },
},
glow: {
'0%, 100%': { opacity: '0.4' },
'50%': { opacity: '0.8' },
},
slideIn: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
},
},
},
};
</script>
<link rel="stylesheet" href="./assets/css/styles.css">
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100 antialiased">
<!-- Animated Background Blobs -->
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
<div class="absolute top-0 left-1/4 w-96 h-96 bg-purple-500/20 rounded-full mix-blend-screen filter blur-3xl animate-float"></div>
<div class="absolute top-1/3 right-1/4 w-96 h-96 bg-indigo-500/20 rounded-full mix-blend-screen filter blur-3xl animate-float" style="animation-delay: 2s;"></div>
<div class="absolute bottom-0 left-1/3 w-96 h-96 bg-pink-500/15 rounded-full mix-blend-screen filter blur-3xl animate-float" style="animation-delay: 4s;"></div>
</div>
<div class="relative z-10">
<!-- Hero Ultra Moderno -->
<header class="relative overflow-hidden border-b border-white/5">
<div class="absolute inset-0 bg-gradient-to-b from-indigo-500/5 via-purple-500/5 to-transparent"></div>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28 relative">
<div class="max-w-5xl mx-auto text-center space-y-8">
<!-- Badge con Pulse -->
<div class="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 border border-indigo-500/30 backdrop-blur-sm">
<span class="relative flex h-2.5 w-2.5">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-gradient-to-r from-indigo-400 to-purple-400"></span>
</span>
<span class="text-sm font-bold tracking-wider uppercase bg-clip-text text-transparent bg-gradient-to-r from-indigo-200 to-purple-200">
Amayo Bot • v0.11.20
</span>
</div>
<!-- Título con Gradiente Animado -->
<h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black leading-tight">
<span class="block bg-clip-text text-transparent bg-gradient-to-r from-white via-indigo-100 to-purple-100 animate-gradient bg-[length:200%_auto]">
Guía Completa
</span>
<span class="block bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 animate-gradient bg-[length:200%_auto]">
Amayo Bot
</span>
</h1>
<!-- Descripción -->
<p class="text-xl sm:text-2xl text-slate-300 max-w-3xl mx-auto leading-relaxed font-light">
Sistema completo de <span class="font-semibold text-indigo-300">economía</span>, <span class="font-semibold text-purple-300">minijuegos</span>, <span class="font-semibold text-pink-300">misiones</span> y <span class="font-semibold text-blue-300">IA</span> para Discord
</p>
<!-- CTA Buttons Modernos -->
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
<a href="#primeros-pasos" class="group relative px-10 py-4 text-lg font-bold text-white overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-r from-indigo-600 to-purple-600 transition-transform duration-300 group-hover:scale-110"></div>
<div class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<span class="relative flex items-center gap-2">
Comenzar ahora
<svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg>
</span>
</a>
<button id="toggle-nav" class="group px-10 py-4 text-lg font-bold text-white backdrop-blur-xl bg-white/5 border-2 border-white/10 rounded-2xl hover:bg-white/10 hover:border-white/20 hover:scale-105 transition-all duration-300">
<span class="flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
Ver índice
</span>
</button>
</div>
<!-- Meta Info Ultra Moderno -->
<div class="flex flex-wrap justify-center gap-3 pt-6">
<span class="px-5 py-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 text-sm font-medium text-slate-300 hover:bg-white/10 transition-all">
Discord.js 15.0-dev
</span>
<span class="px-5 py-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 text-sm font-medium text-slate-300 hover:bg-white/10 transition-all">
Enero 2025
</span>
<span class="px-5 py-2 rounded-xl bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border border-indigo-500/30 text-sm font-bold text-indigo-200 hover:from-indigo-500/20 hover:to-purple-500/20 transition-all">
23 Secciones Completas
</span>
</div>
</div>
</div>
</header>
<!-- TEST: Una sección moderna para ver el estilo -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="max-w-4xl mx-auto">
<div class="rounded-3xl bg-gradient-to-br from-slate-800/40 to-slate-900/40 backdrop-blur-2xl border border-white/10 p-8 sm:p-12 shadow-2xl hover:shadow-indigo-500/10 transition-all duration-500 hover:border-indigo-500/30 animate-slide-in">
<div class="mb-8">
<div class="inline-block">
<h2 class="text-4xl sm:text-5xl font-black mb-4 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">
🚀 Primeros Pasos
</h2>
<div class="h-1.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-full"></div>
</div>
</div>
<p class="text-lg sm:text-xl text-slate-300 leading-relaxed mb-10">
¡Bienvenido a <span class="font-bold text-white">Amayo Bot</span>! Este bot transforma tu servidor en una experiencia de juego completa.
</p>
<!-- Feature Grid Moderno -->
<div class="rounded-2xl bg-gradient-to-br from-indigo-500/10 to-purple-500/10 border border-indigo-500/20 p-8 mb-8">
<h3 class="text-2xl font-bold text-indigo-200 mb-6 flex items-center gap-3">
<span class="text-3xl">✨</span>
Características Principales
</h3>
<div class="grid gap-4">
<div class="flex items-start gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-indigo-500/50 hover:bg-slate-800/50 transition-all duration-300">
<span class="text-2xl">🎮</span>
<div>
<h4 class="font-bold text-white mb-1">Minijuegos Épicos</h4>
<p class="text-sm text-slate-400">Mina, pesca, pelea y cultiva recursos</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-purple-500/50 hover:bg-slate-800/50 transition-all duration-300">
<span class="text-2xl">💰</span>
<div>
<h4 class="font-bold text-white mb-1">Economía Completa</h4>
<p class="text-sm text-slate-400">Tienda, crafteo e inventario</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-pink-500/50 hover:bg-slate-800/50 transition-all duration-300">
<span class="text-2xl">🏆</span>
<div>
<h4 class="font-bold text-white mb-1">Progresión & Logros</h4>
<p class="text-sm text-slate-400">Misiones, logros y rachas diarias</p>
</div>
</div>
</div>
</div>
<!-- Info Cards -->
<div class="grid md:grid-cols-2 gap-4">
<div class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700/50 hover:border-indigo-500/50 hover:bg-slate-800/70 transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-indigo-500/10">
<div class="flex items-center gap-3 mb-4">
<span class="text-4xl">⚡</span>
<h3 class="text-xl font-bold text-white">Prefix: <code class="px-3 py-1 rounded-lg bg-indigo-500/20 text-indigo-200 border border-indigo-500/30">!</code></h3>
</div>
<p class="text-sm text-slate-400">Personalizable con <code class="px-2 py-0.5 rounded bg-slate-700/50 text-slate-300">!configuracion</code></p>
</div>
<div class="group p-6 rounded-2xl bg-slate-800/50 border border-slate-700/50 hover:border-purple-500/50 hover:bg-slate-800/70 transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-purple-500/10">
<div class="flex items-center gap-3 mb-4">
<span class="text-4xl">❓</span>
<h3 class="text-xl font-bold text-white">Ayuda</h3>
</div>
<p class="text-sm text-slate-400">Usa <code class="px-2 py-0.5 rounded bg-purple-500/20 text-purple-200 border border-purple-500/30">!ayuda</code> para ver comandos</p>
</div>
</div>
</div>
<!-- Mensaje para el usuario -->
<div class="mt-12 p-8 rounded-3xl bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 border border-indigo-500/30 backdrop-blur-sm text-center">
<p class="text-2xl font-bold text-white mb-3">✨ Este es el nuevo diseño ultra moderno ✨</p>
<p class="text-lg text-slate-300">¿Te gusta este estilo? Todas las 23 secciones tendrán este diseño con:</p>
<div class="flex flex-wrap justify-center gap-3 mt-6">
<span class="px-4 py-2 rounded-xl bg-white/5 text-sm font-medium text-slate-300">Glassmorphism</span>
<span class="px-4 py-2 rounded-xl bg-white/5 text-sm font-medium text-slate-300">Hover Effects</span>
<span class="px-4 py-2 rounded-xl bg-white/5 text-sm font-medium text-slate-300">Gradientes</span>
<span class="px-4 py-2 rounded-xl bg-white/5 text-sm font-medium text-slate-300">Animaciones</span>
<span class="px-4 py-2 rounded-xl bg-white/5 text-sm font-medium text-slate-300">100% Tailwind</span>
</div>
</div>
</div>
</div>
</div>
<script src="./assets/js/main.js" type="module"></script>
</body>
</html>