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

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

Browse Source
This commit is contained in:
shni
2025-10-07 12:24:26 -05:00
parent b49e0e12e3
commit 2d8ec9e9b8
4 changed files with 81 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,7 +43,9 @@
<%= head %> <%= 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"> <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 --> <!-- Animated Background Blobs -->
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0"> <div class="fixed inset-0 overflow-hidden pointer-events-none z-0">

56
src/server/views/pages/index.ejs
View File

@@ -67,36 +67,40 @@
<div class="flex min-h-screen flex-col"> <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"> <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"> <div class="mx-auto flex w-full max-w-3xl flex-col gap-8">
<%- include('../partials/sections/primeros-pasos') %> <%- await include('../partials/sections/primeros-pasos') %>
<%- include('../partials/sections/comandos-basicos') %> <%- await include('../partials/sections/comandos-basicos') %>
<%- include('../partials/sections/sistema-juego') %> <%- await include('../partials/sections/sistema-juego') %>
<%- include('../partials/sections/minijuegos') %> <%- await include('../partials/sections/minijuegos') %>
<%- include('../partials/sections/inventario-equipo') %> <%- await include('../partials/sections/inventario-equipo') %>
<%- include('../partials/sections/economia') %> <%- await include('../partials/sections/economia') %>
<%- include('../partials/sections/tienda') %> <%- await include('../partials/sections/tienda') %>
<%- include('../partials/sections/crafteo') %> <%- await include('../partials/sections/crafteo') %>
<%- include('../partials/sections/logros') %> <%- await include('../partials/sections/logros') %>
<%- include('../partials/sections/misiones') %> <%- await include('../partials/sections/misiones') %>
<%- include('../partials/sections/racha') %> <%- await include('../partials/sections/racha') %>
<%- include('../partials/sections/consumibles') %> <%- await include('../partials/sections/consumibles') %>
<%- include('../partials/sections/cofres') %> <%- await include('../partials/sections/cofres') %>
<%- include('../partials/sections/encantamientos') %> <%- await include('../partials/sections/encantamientos') %>
<%- include('../partials/sections/fundicion') %> <%- await include('../partials/sections/fundicion') %>
<%- include('../partials/sections/ia') %> <%- await include('../partials/sections/ia') %>
<%- include('../partials/sections/recordatorios') %> <%- await include('../partials/sections/recordatorios') %>
<%- include('../partials/sections/alianzas') %> <%- await include('../partials/sections/alianzas') %>
<%- include('../partials/sections/admin') %> <%- await include('../partials/sections/admin') %>
<%- include('../partials/sections/creacion-contenido') %> <%- await include('../partials/sections/creacion-contenido') %>
<%- include('../partials/sections/configuracion') %> <%- await include('../partials/sections/configuracion') %>
<%- include('../partials/sections/estadisticas') %> <%- await include('../partials/sections/estadisticas') %>
<%- include('../partials/sections/tips') %> <%- await include('../partials/sections/tips') %>
<%- include('../partials/sections/faq') %> <%- await include('../partials/sections/faq') %>
</div> </div>
</main> </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> </div>
</div> </div>

16
src/server/views/partials/navbar.ejs Normal file
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>

32
src/server/views/partials/rightSidebar.ejs Normal file
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>