feat: agregar navbar y sidebar a la estructura EJS, mejorando la navegación y la presentación de información

This commit is contained in:
2025-10-07 12:24:26 -05:00
parent b49e0e12e3
commit 2d8ec9e9b8
4 changed files with 81 additions and 27 deletions

View File

@@ -0,0 +1,16 @@
<nav class="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-slate-950/70 backdrop-blur">
<div class="mx-auto max-w-6xl 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>
</div>
<button id="toggle-nav" class="md:hidden text-slate-300 hover:text-white" 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>

View File

@@ -0,0 +1,32 @@
<div class="space-y-6">
<!-- Ko-fi card -->
<div class="rounded-2xl border border-white/10 bg-slate-900/70 shadow-2xl shadow-indigo-500/10 overflow-hidden">
<div class="p-4 border-b border-white/10">
<h3 class="text-sm font-semibold text-slate-200">Apoya el proyecto</h3>
</div>
<div class="p-2 bg-slate-900">
<iframe id="kofiframe" src="https://ko-fi.com/shnimlz/?hidefeed=true&widget=true&embed=true&preview=true"
style="border:none;width:100%;padding:4px;background:#0b1020;"
height="712" title="shnimlz"></iframe>
</div>
</div>
<!-- Info cards -->
<div class="rounded-2xl border border-indigo-500/20 bg-indigo-500/10 p-4">
<h4 class="text-sm font-semibold text-indigo-200 mb-2">Novedades</h4>
<ul class="space-y-1 text-xs text-slate-300">
<li>• Nueva guía con layout EJS</li>
<li>• Mejoras de rendimiento del bot</li>
<li>• Sistema de economía ampliado</li>
</ul>
</div>
<div class="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-4">
<h4 class="text-sm font-semibold text-emerald-200 mb-2">Recursos útiles</h4>
<ul class="space-y-1 text-xs text-slate-300">
<li><a class="hover:text-white" href="#primeros-pasos">• Primeros pasos</a></li>
<li><a class="hover:text-white" href="#economia">• Economía</a></li>
<li><a class="hover:text-white" href="#faq">• FAQ</a></li>
</ul>
</div>
</div>