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:
@@ -43,7 +43,9 @@
|
||||
<%= head %>
|
||||
<% } %>
|
||||
</head>
|
||||
<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100 antialiased">
|
||||
<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100 antialiased pt-14">
|
||||
|
||||
<%- await include('../partials/navbar', { appName }) %>
|
||||
|
||||
<!-- Animated Background Blobs -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
|
||||
|
||||
@@ -67,36 +67,40 @@
|
||||
<div class="flex min-h-screen flex-col">
|
||||
|
||||
<div class="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-10 px-6 pb-16 lg:flex-row lg:px-10">
|
||||
<%- include('../partials/toc') %>
|
||||
<%- await include('../partials/toc') %>
|
||||
|
||||
<main class="flex-1">
|
||||
<main class="flex-1 min-w-0">
|
||||
<div class="mx-auto flex w-full max-w-3xl flex-col gap-8">
|
||||
<%- include('../partials/sections/primeros-pasos') %>
|
||||
<%- include('../partials/sections/comandos-basicos') %>
|
||||
<%- include('../partials/sections/sistema-juego') %>
|
||||
<%- include('../partials/sections/minijuegos') %>
|
||||
<%- include('../partials/sections/inventario-equipo') %>
|
||||
<%- include('../partials/sections/economia') %>
|
||||
<%- include('../partials/sections/tienda') %>
|
||||
<%- include('../partials/sections/crafteo') %>
|
||||
<%- include('../partials/sections/logros') %>
|
||||
<%- include('../partials/sections/misiones') %>
|
||||
<%- include('../partials/sections/racha') %>
|
||||
<%- include('../partials/sections/consumibles') %>
|
||||
<%- include('../partials/sections/cofres') %>
|
||||
<%- include('../partials/sections/encantamientos') %>
|
||||
<%- include('../partials/sections/fundicion') %>
|
||||
<%- include('../partials/sections/ia') %>
|
||||
<%- include('../partials/sections/recordatorios') %>
|
||||
<%- include('../partials/sections/alianzas') %>
|
||||
<%- include('../partials/sections/admin') %>
|
||||
<%- include('../partials/sections/creacion-contenido') %>
|
||||
<%- include('../partials/sections/configuracion') %>
|
||||
<%- include('../partials/sections/estadisticas') %>
|
||||
<%- include('../partials/sections/tips') %>
|
||||
<%- include('../partials/sections/faq') %>
|
||||
<%- await include('../partials/sections/primeros-pasos') %>
|
||||
<%- await include('../partials/sections/comandos-basicos') %>
|
||||
<%- await include('../partials/sections/sistema-juego') %>
|
||||
<%- await include('../partials/sections/minijuegos') %>
|
||||
<%- await include('../partials/sections/inventario-equipo') %>
|
||||
<%- await include('../partials/sections/economia') %>
|
||||
<%- await include('../partials/sections/tienda') %>
|
||||
<%- await include('../partials/sections/crafteo') %>
|
||||
<%- await include('../partials/sections/logros') %>
|
||||
<%- await include('../partials/sections/misiones') %>
|
||||
<%- await include('../partials/sections/racha') %>
|
||||
<%- await include('../partials/sections/consumibles') %>
|
||||
<%- await include('../partials/sections/cofres') %>
|
||||
<%- await include('../partials/sections/encantamientos') %>
|
||||
<%- await include('../partials/sections/fundicion') %>
|
||||
<%- await include('../partials/sections/ia') %>
|
||||
<%- await include('../partials/sections/recordatorios') %>
|
||||
<%- await include('../partials/sections/alianzas') %>
|
||||
<%- await include('../partials/sections/admin') %>
|
||||
<%- await include('../partials/sections/creacion-contenido') %>
|
||||
<%- await include('../partials/sections/configuracion') %>
|
||||
<%- await include('../partials/sections/estadisticas') %>
|
||||
<%- await include('../partials/sections/tips') %>
|
||||
<%- await include('../partials/sections/faq') %>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside class="w-full lg:w-80 xl:w-96 lg:sticky lg:top-24 lg:h-fit lg:self-start">
|
||||
<%- await include('../partials/rightSidebar') %>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
16
src/server/views/partials/navbar.ejs
Normal file
16
src/server/views/partials/navbar.ejs
Normal 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>
|
||||
32
src/server/views/partials/rightSidebar.ejs
Normal file
32
src/server/views/partials/rightSidebar.ejs
Normal 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>
|
||||
Reference in New Issue
Block a user