feat: Add comprehensive sections for basic examples, enchantments, statistics, FAQs, smelting, AI, inventory, achievements, mini-games, missions, first steps, daily streaks, reminders, game system, shop, and tips in EJS format
This commit is contained in:
@@ -4,66 +4,71 @@
|
||||
<% const title = pageTitle; %>
|
||||
<% layout('layouts/layout', { title, head, scripts, appName, version, djsVersion, currentDateHuman }); %>
|
||||
|
||||
<header class="relative overflow-hidden ">
|
||||
<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">
|
||||
<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">
|
||||
<header class="relative overflow-hidden py-20 sm:py-28 pixel-corner">
|
||||
<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 -->
|
||||
<div class="inline-block">
|
||||
<div class="pixel-badge">
|
||||
<%= appName %> • v<%= version %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<!-- Título Principal -->
|
||||
<div class="space-y-4">
|
||||
<h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl leading-tight">
|
||||
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">
|
||||
</h1>
|
||||
<h2 class="text-4xl sm:text-5xl md:text-6xl">
|
||||
<%= appName %>
|
||||
</span>
|
||||
</h1>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- HP Bar decorativo -->
|
||||
<div class="flex justify-center">
|
||||
<div class="pixel-hp-bar">
|
||||
<div class="pixel-heart"></div>
|
||||
<div class="pixel-heart"></div>
|
||||
<div class="pixel-heart"></div>
|
||||
<div class="pixel-heart"></div>
|
||||
<div class="pixel-heart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- Descripción -->
|
||||
<div class="pixel-box max-w-3xl mx-auto">
|
||||
<p class="text-xl sm:text-2xl leading-relaxed">
|
||||
Sistema completo de
|
||||
<span class="text-pixel-accent-4 font-bold">economía</span>,
|
||||
<span class="text-pixel-accent-3 font-bold">minijuegos</span>,
|
||||
<span class="text-pixel-accent-1 font-bold">misiones</span> y
|
||||
<span class="text-pixel-accent-2 font-bold">IA</span>
|
||||
para Discord
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Botones de Acción -->
|
||||
<div class="flex flex-col sm:flex-row gap-6 justify-center items-center pt-4">
|
||||
<a href="#primeros-pasos" class="pixel-btn">
|
||||
► Comenzar ahora
|
||||
</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 id="toggle-nav" class="pixel-btn pixel-btn-secondary">
|
||||
☰ Ver comandos
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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 <%= djsVersion %>
|
||||
</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">
|
||||
<%= currentDateHuman %>
|
||||
</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>
|
||||
<!-- Stats Footer -->
|
||||
<div class="flex flex-wrap justify-center gap-4 pt-8">
|
||||
<div class="pixel-box py-3 px-6 text-sm">
|
||||
<span class="pixel-text-dim">Discord.js</span> <%= djsVersion %>
|
||||
</div>
|
||||
<div class="pixel-box py-3 px-6 text-sm">
|
||||
<span class="pixel-text-dim">Actualizado:</span> <%= currentDateHuman %>
|
||||
</div>
|
||||
<div class="pixel-box py-3 px-6 text-sm pixel-corner">
|
||||
<span class="text-pixel-accent-4 font-bold">23 Secciones</span> • Creación de Contenido Incluida
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,88 +10,58 @@
|
||||
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!-- Pixel Art CSS -->
|
||||
<link rel="stylesheet" href="/assets/css/pixel-art.css">
|
||||
<link rel="stylesheet" href="/assets/css/pixel-sections.css">
|
||||
<link rel="stylesheet" href="/assets/css/styles.css">
|
||||
<% if (typeof head !== 'undefined' && head) { %>
|
||||
<%= head %>
|
||||
<% } %>
|
||||
</head>
|
||||
<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100 antialiased pt-14">
|
||||
<body class="min-h-screen pixel-grid-bg pt-14">
|
||||
|
||||
<%- await include('../partials/navbar', { appName }) %>
|
||||
|
||||
<!-- 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">
|
||||
<%- body %>
|
||||
</div>
|
||||
|
||||
<footer class="border-t border-white/5 bg-slate-950/80 py-10 text-center">
|
||||
<div class="mx-auto max-w-5xl px-6">
|
||||
<div class="mb-6">
|
||||
<p class="text-2xl font-bold text-white mb-2"><%= appName %></p>
|
||||
<p class="text-sm text-slate-400">Sistema completo de juego, economía y gestión para Discord</p>
|
||||
<footer class="pixel-box mt-16 mx-4 mb-8">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="text-center mb-8">
|
||||
<h3 class="mb-4">Amayo Bot</h3>
|
||||
<p class="text-sm pixel-text-dim">Sistema completo de juego, economía y gestión para Discord</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-6 text-sm">
|
||||
<a href="#primeros-pasos" class="text-indigo-300 transition hover:text-indigo-200">Primeros Pasos</a>
|
||||
<span class="text-slate-600">•</span>
|
||||
<a href="#comandos-basicos" class="text-indigo-300 transition hover:text-indigo-200">Comandos</a>
|
||||
<span class="text-slate-600">•</span>
|
||||
<a href="#minijuegos" class="text-indigo-300 transition hover:text-indigo-200">Minijuegos</a>
|
||||
<span class="text-slate-600">•</span>
|
||||
<a href="#faq" class="text-indigo-300 transition hover:text-indigo-200">FAQ</a>
|
||||
<a href="#primeros-pasos">Primeros Pasos</a>
|
||||
<span>•</span>
|
||||
<a href="#comandos-basicos">Comandos</a>
|
||||
<span>•</span>
|
||||
<a href="#minijuegos">Minijuegos</a>
|
||||
<span>•</span>
|
||||
<a href="#faq">FAQ</a>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-white/5 pt-6">
|
||||
<p class="text-xs text-slate-400 mb-3">
|
||||
Versión <%= version %> • Discord.js <%= djsVersion %> • <%= currentDateHuman %>
|
||||
</p>
|
||||
<p class="text-xs text-slate-500">
|
||||
Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord
|
||||
</p>
|
||||
<div class="pixel-border p-4 mb-6">
|
||||
<div class="pixel-status-bar justify-center">
|
||||
<span>VER <%= version %></span>
|
||||
<span>•</span>
|
||||
<span>DJS <%= djsVersion %></span>
|
||||
<span>•</span>
|
||||
<span><%= currentDateHuman %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<a class="inline-flex items-center gap-2 text-indigo-300 transition hover:text-indigo-200" href="#primeros-pasos">
|
||||
<span aria-hidden="true">↑</span>
|
||||
Volver arriba
|
||||
<p class="text-center text-xs pixel-text-dim mb-6">
|
||||
<span class="pixel-coin"></span>
|
||||
Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord
|
||||
</p>
|
||||
|
||||
<div class="text-center">
|
||||
<a class="pixel-btn-secondary pixel-btn inline-block" href="#primeros-pasos">
|
||||
<span aria-hidden="true">↑</span> Volver arriba
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
<nav class="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-slate-950/70 backdrop-blur">
|
||||
<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="text-white font-bold tracking-wide"><%= appName %></a>
|
||||
<div class="hidden md:flex items-center gap-4 text-sm">
|
||||
<a href="#primeros-pasos" class="text-slate-300 hover:text-white">Guía</a>
|
||||
<a href="#minijuegos" class="text-slate-300 hover:text-white">Minijuegos</a>
|
||||
<a href="#economia" class="text-slate-300 hover:text-white">Economía</a>
|
||||
<a href="#faq" class="text-slate-300 hover:text-white">FAQ</a>
|
||||
<a href="#" class="flex items-center gap-2">
|
||||
<div class="pixel-coin" style="width: 20px; height: 20px;"></div>
|
||||
<span class="font-['Press_Start_2P'] text-sm"><%= 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 dinero">Economía</a>
|
||||
<a href="#faq" class="pixel-tooltip" data-tooltip="Ayuda">FAQ</a>
|
||||
</div>
|
||||
<button id="toggle-nav" class="md:hidden text-slate-300 hover:text-white" aria-label="Abrir navegación">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -1,32 +1,33 @@
|
||||
<nav id="toc" class="hidden lg:block w-full max-w-sm rounded-3xl border border-white/10 bg-slate-900/80 text-left shadow-2xl shadow-indigo-500/20 lg:sticky lg:top-24 lg:max-h-[calc(100vh-6rem)] lg:w-80 lg:overflow-y-auto">
|
||||
<div class="text-xs p-6 font-semibold uppercase tracking-[0.3em] text-slate-400">
|
||||
Índice de Contenidos
|
||||
<nav id="toc" class="hidden lg:block w-full max-w-sm pixel-box lg:sticky lg:top-24 lg:max-h-[calc(100vh-6rem)] lg:w-80 lg:overflow-y-auto">
|
||||
<div class="font-['Press_Start_2P'] text-xs p-6 uppercase tracking-wide text-pixel-accent-4 pixel-corner">
|
||||
≡ Índice
|
||||
</div>
|
||||
<ul class="ps-8 mt-4 space-y-4 text-sm">
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#primeros-pasos">🚀 Primeros Pasos</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#comandos-basicos">⚡ Comandos Básicos</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#ejemplos-basicos">🧭 Ejemplos Básicos</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#sistema-juego">🎮 Sistema de Juego</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#minijuegos">🎯 Minijuegos y Actividades</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#inventario-equipo">🎒 Inventario y Equipo</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#economia">💰 Sistema de Economía</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#tienda">🛒 Tienda y Compras</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#crafteo">🛠️ Crafteo y Creación</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#logros">🏆 Logros</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#misiones">📝 Misiones</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#racha-diaria">🔥 Racha Diaria</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#consumibles">🍖 Consumibles y Pociones</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#cofres">🎁 Cofres y Recompensas</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#encantamientos">✨ Encantamientos</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#fundicion">🔥 Fundición</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#ia">🤖 Inteligencia Artificial</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#recordatorios">⏰ Recordatorios</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#alianzas">🤝 Sistema de Alianzas</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#admin">⚙️ Administración (Admin)</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#configuracion">🔧 Configuración Servidor</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#ejemplos-avanzados">🧪 Ejemplos Avanzados</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#estadisticas">📊 Estadísticas</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#tips">💡 Tips y Trucos</a></li>
|
||||
<li><a class="text-slate-200 transition hover:text-indigo-300" href="#faq">❓ Preguntas Frecuentes</a></li>
|
||||
<ul class="ps-8 mt-4 space-y-3 text-sm pb-6">
|
||||
<li><a href="#primeros-pasos">► Primeros Pasos</a></li>
|
||||
<li><a href="#comandos-basicos">► Comandos Básicos</a></li>
|
||||
<li><a href="#ejemplos-basicos">► Ejemplos Básicos</a></li>
|
||||
<li><a href="#sistema-juego">► Sistema de Juego</a></li>
|
||||
<li><a href="#minijuegos">► Minijuegos</a></li>
|
||||
<li><a href="#inventario-equipo">► Inventario y Equipo</a></li>
|
||||
<li><a href="#economia">► Economía</a></li>
|
||||
<li><a href="#tienda">► Tienda</a></li>
|
||||
<li><a href="#crafteo">► Crafteo</a></li>
|
||||
<li><a href="#logros">► Logros</a></li>
|
||||
<li><a href="#misiones">► Misiones</a></li>
|
||||
<li><a href="#racha-diaria">► Racha Diaria</a></li>
|
||||
<li><a href="#consumibles">► Consumibles</a></li>
|
||||
<li><a href="#cofres">► Cofres</a></li>
|
||||
<li><a href="#encantamientos">► Encantamientos</a></li>
|
||||
<li><a href="#fundicion">► Fundición</a></li>
|
||||
<li><a href="#ia">► IA</a></li>
|
||||
<li><a href="#recordatorios">► Recordatorios</a></li>
|
||||
<li><a href="#alianzas">► Alianzas</a></li>
|
||||
<li><a href="#admin">► Administración</a></li>
|
||||
<li><a href="#configuracion">► Configuración</a></li>
|
||||
<li><a href="#ejemplos-avanzados">► Ejemplos Avanzados</a></li>
|
||||
<li><a href="#estadisticas">► Estadísticas</a></li>
|
||||
<li><a href="#tips">► Tips y Trucos</a></li>
|
||||
<li><a href="#faq">► FAQ</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user