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

Refactor code structure for improved readability and maintainability

Browse Source
This commit is contained in:
shni
2025-10-09 21:28:37 -05:00
parent dae147154f
commit 09a5ceeeba
8 changed files with 571 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
src/server/public/assets/css/pixel-art.css
View File

@@ -6,19 +6,30 @@
/* Fuentes Pixel Art */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
/* Variables de Color Pixel Art */
/* Variables de Color Pixel Art - Cozy Witch Theme */
:root {
--pixel-bg-dark: #0f0a1e;
--pixel-bg-medium: #1a1433;
--pixel-bg-light: #2d2347;
--pixel-accent-1: #ff006e;
--pixel-accent-2: #8338ec;
--pixel-accent-3: #3a86ff;
--pixel-accent-4: #06ffa5;
--pixel-text: #f0f0f0;
--pixel-text-dim: #a8a8a8;
--pixel-border: #4a4a4a;
--pixel-shadow: rgba(0, 0, 0, 0.8);
/* Tonos cálidos de madera y tierra */
--pixel-bg-dark: #3d2817; /* Madera oscura */
--pixel-bg-medium: #5c3d2e; /* Madera media */
--pixel-bg-light: #7a5243; /* Madera clara */
/* Acentos mágicos y acogedores */
--pixel-accent-1: #ff6b6b; /* Rojo cálido (pociones) */
--pixel-accent-2: #c77dff; /* Púrpura místico (magia) */
--pixel-accent-3: #ffd166; /* Dorado/amarillo (luz de velas) */
--pixel-accent-4: #06ffa5; /* Verde menta (hierbas) */
--pixel-accent-5: #ff8fab; /* Rosa suave (flores) */
--pixel-accent-6: #4ecdc4; /* Turquesa (cristales) */
/* Tonos de texto */
--pixel-text: #f8e5d7; /* Beige cálido */
--pixel-text-dim: #c9a68a; /* Café con leche */
--pixel-border: #2a1810; /* Café muy oscuro */
--pixel-shadow: rgba(26, 13, 5, 0.8);
/* Tonos especiales */
--pixel-warm-glow: #ffb347; /* Naranja cálido */
--pixel-night-sky: #4a3b5c; /* Púrpura del atardecer */
}
/* Reset y Base */
@@ -32,9 +43,9 @@ body {
font-family: 'VT323', monospace;
font-size: 20px;
line-height: 1.4;
background: var(--pixel-bg-dark);
background: linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 100%);
color: var(--pixel-text);
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}
/* Headings Pixel Art */
@@ -56,13 +67,16 @@ h1 {
h2 {
font-size: 24px;
line-height: 1.6;
color: var(--pixel-accent-4);
color: var(--pixel-accent-3);
text-shadow:
2px 2px 0px var(--pixel-border),
0 0 15px var(--pixel-warm-glow);
}
h3 {
font-size: 18px;
line-height: 1.6;
color: var(--pixel-accent-3);
color: var(--pixel-accent-5);
}
/* Pixel Border Effect */
@@ -84,12 +98,13 @@ h3 {
/* Pixel Box (Contenedores) */
.pixel-box {
background: var(--pixel-bg-medium);
background: linear-gradient(135deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-light) 100%);
border: 4px solid var(--pixel-border);
border-radius: 0;
box-shadow:
8px 8px 0 0 rgba(0, 0, 0, 0.5),
inset 0 0 0 2px rgba(255, 255, 255, 0.1);
inset 0 0 0 2px rgba(255, 179, 71, 0.1),
0 0 20px rgba(255, 179, 71, 0.2);
padding: 24px;
position: relative;
}
@@ -103,13 +118,13 @@ h3 {
bottom: -2px;
background: linear-gradient(
45deg,
var(--pixel-accent-2) 0%,
var(--pixel-accent-3) 50%,
var(--pixel-accent-1) 100%
var(--pixel-warm-glow) 0%,
var(--pixel-accent-2) 50%,
var(--pixel-accent-6) 100%
);
opacity: 0.1;
opacity: 0.15;
z-index: -1;
animation: pixelPulse 3s ease-in-out infinite;
animation: cozyPulse 4s ease-in-out infinite;
}
/* Botones Pixel Art */
@@ -118,8 +133,8 @@ h3 {
font-size: 14px;
padding: 16px 32px;
border: 4px solid var(--pixel-border);
background: var(--pixel-accent-2);
color: white;
background: linear-gradient(180deg, var(--pixel-accent-3) 0%, var(--pixel-warm-glow) 100%);
color: var(--pixel-bg-dark);
text-transform: uppercase;
cursor: pointer;
position: relative;
@@ -127,16 +142,19 @@ h3 {
box-shadow:
6px 6px 0 0 rgba(0, 0, 0, 0.6),
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3),
inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
inset 2px 2px 0 0 rgba(255, 255, 255, 0.4),
0 0 15px rgba(255, 179, 71, 0.4);
font-weight: bold;
}
.pixel-btn:hover {
background: var(--pixel-accent-3);
background: linear-gradient(180deg, var(--pixel-warm-glow) 0%, var(--pixel-accent-3) 100%);
transform: translate(2px, 2px);
box-shadow:
4px 4px 0 0 rgba(0, 0, 0, 0.6),
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3),
inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
inset 2px 2px 0 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(255, 179, 71, 0.6);
}
.pixel-btn:active {
@@ -148,20 +166,23 @@ h3 {
}
.pixel-btn-secondary {
background: var(--pixel-bg-light);
border-color: var(--pixel-accent-4);
background: linear-gradient(180deg, var(--pixel-accent-2) 0%, var(--pixel-accent-5) 100%);
border-color: var(--pixel-border);
color: white;
}
.pixel-btn-secondary:hover {
background: var(--pixel-accent-4);
color: var(--pixel-bg-dark);
background: linear-gradient(180deg, var(--pixel-accent-5) 0%, var(--pixel-accent-2) 100%);
color: white;
}
/* Navbar Pixel Art */
.pixel-navbar {
background: var(--pixel-bg-medium);
background: linear-gradient(180deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-dark) 100%);
border-bottom: 4px solid var(--pixel-border);
box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.5);
box-shadow:
0 8px 0 0 rgba(0, 0, 0, 0.5),
0 0 20px rgba(255, 179, 71, 0.2);
position: relative;
}
@@ -174,14 +195,14 @@ h3 {
height: 4px;
background: repeating-linear-gradient(
90deg,
var(--pixel-accent-2) 0px,
var(--pixel-accent-2) 8px,
var(--pixel-accent-3) 0px,
var(--pixel-accent-3) 8px,
var(--pixel-accent-3) 16px,
var(--pixel-warm-glow) 8px,
var(--pixel-warm-glow) 16px,
var(--pixel-accent-1) 16px,
var(--pixel-accent-1) 24px
);
animation: pixelScroll 2s linear infinite;
animation: cozyScroll 3s linear infinite;
}
/* Código Pixel Art */
@@ -204,15 +225,15 @@ pre {
/* Links Pixel Art */
a {
color: var(--pixel-accent-4);
color: var(--pixel-accent-3);
text-decoration: none;
position: relative;
transition: all 0.2s;
transition: all 0.3s ease;
}
a:hover {
color: var(--pixel-accent-3);
text-shadow: 0 0 8px var(--pixel-accent-3);
color: var(--pixel-warm-glow);
text-shadow: 0 0 10px var(--pixel-warm-glow);
}
a::after {
@@ -222,15 +243,16 @@ a::after {
left: 0;
width: 100%;
height: 2px;
background: currentColor;
background: linear-gradient(90deg, var(--pixel-accent-3), var(--pixel-warm-glow));
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s;
transition: transform 0.3s ease;
}
a:hover::after {
transform: scaleX(1);
transform-origin: left;
box-shadow: 0 0 8px var(--pixel-warm-glow);
}
/* Badges Pixel Art */
@@ -238,16 +260,29 @@ a:hover::after {
font-family: 'Press Start 2P', cursive;
font-size: 10px;
padding: 8px 16px;
background: var(--pixel-accent-1);
background: linear-gradient(135deg, var(--pixel-accent-1) 0%, var(--pixel-accent-5) 100%);
color: white;
border: 2px solid rgba(0, 0, 0, 0.5);
border: 2px solid var(--pixel-border);
display: inline-block;
text-transform: uppercase;
box-shadow:
4px 4px 0 0 rgba(0, 0, 0, 0.5),
inset -1px -1px 0 0 rgba(0, 0, 0, 0.3),
inset 1px 1px 0 0 rgba(255, 255, 255, 0.2);
animation: pixelBounce 1s ease-in-out infinite;
inset 1px 1px 0 0 rgba(255, 255, 255, 0.3),
0 0 15px var(--pixel-accent-1);
animation: cozyFloat 3s ease-in-out infinite;
position: relative;
}
.pixel-badge::before {
content: '✦';
position: absolute;
left: -12px;
top: 50%;
transform: translateY(-50%);
color: var(--pixel-accent-3);
text-shadow: 0 0 10px var(--pixel-accent-3);
animation: twinkle 2s ease-in-out infinite;
}
/* Tablas Pixel Art */
@@ -303,22 +338,28 @@ tr:hover td {
0%, 100% {
text-shadow:
3px 3px 0px rgba(0, 0, 0, 0.8),
0 0 20px var(--pixel-accent-4);
0 0 20px var(--pixel-warm-glow);
}
50% {
text-shadow:
3px 3px 0px rgba(0, 0, 0, 0.8),
0 0 40px var(--pixel-accent-3),
0 0 60px var(--pixel-accent-2);
0 0 60px var(--pixel-warm-glow);
}
}
@keyframes pixelPulse {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.3; }
@keyframes cozyPulse {
0%, 100% {
opacity: 0.15;
transform: scale(1);
}
50% {
opacity: 0.25;
transform: scale(1.02);
}
}
@keyframes pixelScroll {
@keyframes cozyScroll {
0% { background-position: 0 0; }
100% { background-position: 24px 0; }
}
@@ -334,15 +375,45 @@ tr:hover td {
20%, 40%, 60%, 80% { transform: translateX(2px); }
}
/* Floating Animation (cozy) */
@keyframes cozyFloat {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-5px) rotate(1deg);
}
75% {
transform: translateY(5px) rotate(-1deg);
}
}
/* Grid Background Pixel */
.pixel-grid-bg {
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 16px 16px;
background:
linear-gradient(rgba(255, 179, 71, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 179, 71, 0.02) 1px, transparent 1px),
linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 50%, var(--pixel-bg-medium) 100%);
background-size: 16px 16px, 16px 16px, 100% 100%;
position: relative;
}
.pixel-grid-bg::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at 50% 20%,
rgba(255, 179, 71, 0.1) 0%,
transparent 50%
);
pointer-events: none;
z-index: 0;
}
/* Decoraciones Pixel */
.pixel-corner {
position: relative;
@@ -411,19 +482,84 @@ tr:hover td {
display: inline-block;
width: 24px;
height: 24px;
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
background: linear-gradient(135deg, var(--pixel-accent-3) 0%, var(--pixel-warm-glow) 50%, var(--pixel-accent-3) 100%);
border-radius: 50%;
border: 3px solid #b8860b;
border: 3px solid var(--pixel-border);
box-shadow:
inset 2px 2px 0 0 rgba(255, 255, 255, 0.5),
inset -2px -2px 0 0 rgba(0, 0, 0, 0.5),
3px 3px 0 0 rgba(0, 0, 0, 0.5);
animation: pixelRotate 3s linear infinite;
3px 3px 0 0 rgba(0, 0, 0, 0.5),
0 0 15px var(--pixel-warm-glow);
animation: cozyFloat 4s ease-in-out infinite;
}
@keyframes pixelRotate {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
/* Candle/Light effect */
.pixel-candle {
display: inline-block;
width: 12px;
height: 20px;
background: linear-gradient(180deg, var(--pixel-accent-3) 0%, var(--pixel-warm-glow) 100%);
border: 2px solid var(--pixel-border);
position: relative;
box-shadow: 0 0 20px var(--pixel-warm-glow);
}
.pixel-candle::before {
content: '✨';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
animation: candleFlicker 2s ease-in-out infinite;
}
@keyframes candleFlicker {
0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
50% { opacity: 0.8; transform: translateX(-50%) scale(1.1); }
}
/* Star decoration */
.pixel-star {
display: inline-block;
width: 16px;
height: 16px;
background: var(--pixel-accent-3);
position: relative;
transform: rotate(45deg);
box-shadow: 0 0 10px var(--pixel-accent-3);
animation: twinkle 3s ease-in-out infinite;
}
.pixel-star::before,
.pixel-star::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
background: var(--pixel-accent-3);
}
.pixel-star::before {
transform: rotate(90deg);
}
@keyframes twinkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Leaf decoration */
.pixel-leaf {
display: inline-block;
width: 20px;
height: 12px;
background: var(--pixel-accent-4);
border-radius: 0 50% 0 50%;
border: 2px solid var(--pixel-border);
transform: rotate(-20deg);
box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.5);
animation: cozyFloat 5s ease-in-out infinite;
}
/* Status Bar Pixel */

20
src/server/public/assets/css/pixel-sections.css
View File

@@ -1,16 +1,17 @@
/* ============================================
PIXEL ART - SECTIONS OVERRIDES
Sobrescribe estilos de secciones individuales
COZY PIXEL ART - SECTIONS OVERRIDES
Diseño witchy/fantasy acogedor
============================================ */
/* Secciones Principales */
section {
background: var(--pixel-bg-medium) !important;
background: linear-gradient(135deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-light) 100%) !important;
border: 4px solid var(--pixel-border) !important;
border-radius: 0 !important;
box-shadow:
8px 8px 0 0 rgba(0, 0, 0, 0.5) !important,
inset 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
inset 0 0 0 2px rgba(255, 179, 71, 0.15) !important,
0 0 20px rgba(255, 179, 71, 0.2) !important;
padding: 32px !important;
margin-bottom: 32px;
position: relative;
@@ -24,7 +25,7 @@ section::before {
left: 8px;
right: 8px;
bottom: 8px;
border: 2px solid rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 179, 71, 0.1);
pointer-events: none;
}
@@ -33,14 +34,14 @@ section h2 {
font-family: 'Press Start 2P', cursive !important;
font-size: 24px !important;
line-height: 1.6 !important;
color: var(--pixel-text) !important;
color: var(--pixel-accent-3) !important;
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
-webkit-text-fill-color: unset !important;
text-shadow:
3px 3px 0px rgba(0, 0, 0, 0.8),
0 0 20px var(--pixel-accent-4) !important;
2px 2px 0px var(--pixel-border),
0 0 20px var(--pixel-warm-glow) !important;
margin-bottom: 24px !important;
}
@@ -48,8 +49,9 @@ section h3 {
font-family: 'Press Start 2P', cursive !important;
font-size: 16px !important;
line-height: 1.6 !important;
color: var(--pixel-accent-3) !important;
color: var(--pixel-accent-5) !important;
margin-bottom: 16px !important;
text-shadow: 1px 1px 0px var(--pixel-border);
}
section h4 {

8
src/server/public/assets/img/boton_entrar.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 394 KiB

48
src/server/views/index.ejs
View File

@@ -4,14 +4,16 @@
<% const title = pageTitle; %>
<% layout('layouts/layout', { title, head, scripts, appName, version, djsVersion, currentDateHuman }); %>
<header class="relative overflow-hidden py-20 sm:py-28 pixel-corner">
<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 -->
<div class="inline-block">
<!-- Badge Pixel Art con decoración -->
<div class="inline-block relative">
<span class="pixel-star absolute -left-8 top-0"></span>
<div class="pixel-badge">
<%= appName %> • v<%= version %>
</div>
<span class="pixel-star absolute -right-8 top-0" style="animation-delay: 1s;"></span>
</div>
<!-- Título Principal -->
@@ -24,25 +26,21 @@
</h2>
</div>
<!-- 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>
<!-- Decoración con velas -->
<div class="flex justify-center gap-8">
<span class="pixel-candle"></span>
<span class="pixel-candle" style="animation-delay: 0.5s;"></span>
<span class="pixel-candle" style="animation-delay: 1s;"></span>
</div>
<!-- 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>
<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>
para Discord
</p>
</div>
@@ -50,7 +48,7 @@
<!-- 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
▶ Comenzar ahora
</a>
<button id="toggle-nav" class="pixel-btn pixel-btn-secondary">
@@ -58,16 +56,18 @@
</button>
</div>
<!-- Stats Footer -->
<!-- Stats Footer con decoración -->
<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 class="pixel-box py-3 px-6 text-sm flex items-center gap-2">
<span class="pixel-leaf"></span>
<span><span class="pixel-text-dim">Discord.js</span> <%= djsVersion %></span>
</div>
<div class="pixel-box py-3 px-6 text-sm flex items-center gap-2">
<span>✦</span>
<span><span class="pixel-text-dim">Actualizado:</span> <%= currentDateHuman %></span>
</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
<span style="color: var(--pixel-accent-3); font-weight: bold;">23 Secciones</span> • Creación de Contenido
</div>
</div>
</div>

27
src/server/views/layouts/layout.ejs
View File

@@ -34,34 +34,39 @@
<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">
<div class="flex flex-wrap justify-center gap-4 mb-6 text-sm items-center">
<span class="pixel-leaf" style="width: 16px; height: 10px;"></span>
<a href="#primeros-pasos">Primeros Pasos</a>
<span>•</span>
<span>✦</span>
<a href="#comandos-basicos">Comandos</a>
<span>•</span>
<span>✦</span>
<a href="#minijuegos">Minijuegos</a>
<span>•</span>
<span>✦</span>
<a href="#faq">FAQ</a>
<span class="pixel-leaf" style="width: 16px; height: 10px; transform: rotate(20deg);"></span>
</div>
<div class="pixel-border p-4 mb-6">
<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">
<span class="pixel-star" style="width: 12px; height: 12px;"></span>
<span>VER <%= version %></span>
<span>•</span>
<span>✦</span>
<span>DJS <%= djsVersion %></span>
<span>•</span>
<span>✦</span>
<span><%= currentDateHuman %></span>
<span class="pixel-star" style="width: 12px; height: 12px; animation-delay: 1.5s;"></span>
</div>
</div>
<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 class="text-center text-xs pixel-text-dim mb-6 flex items-center justify-center gap-2">
<span class="pixel-coin" style="width: 16px; height: 16px;"></span>
<span>Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord</span>
<span class="pixel-candle" style="width: 8px; height: 12px;"></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 <span aria-hidden="true">✦</span>
</a>
</div>
</div>

13
src/server/views/partials/navbar.ejs
View File

@@ -1,14 +1,15 @@
<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-2">
<a href="#" class="flex items-center gap-3">
<div class="pixel-coin" style="width: 20px; height: 20px;"></div>
<span class="font-['Press_Start_2P'] text-sm"><%= appName %></span>
<span class="font-['Press_Start_2P'] text-sm" style="color: var(--pixel-accent-3);"><%= appName %></span>
<span class="pixel-star" style="width: 12px; height: 12px;"></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>
<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>
<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">

55
src/server/views/partials/toc.ejs
View File

@@ -1,33 +1,34 @@
<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 class="font-['Press_Start_2P'] text-xs p-6 uppercase tracking-wide pixel-corner flex items-center justify-between">
<span style="color: var(--pixel-accent-3);">📖 Índice</span>
<span class="pixel-candle" style="width: 8px; height: 12px;"></span>
</div>
<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>
<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>