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

feat: Rediseñar el panel de control con un nuevo diseño de barra lateral y panel central

Browse Source
This commit is contained in:
Shni
2025-10-15 00:31:19 -05:00
parent e21780b99c
commit 0c520a53fb
1 changed files with 36 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/server/views/pages/dashboard.ejs
View File

@@ -1,48 +1,42 @@
<div class="max-w-3xl mx-auto p-6"> <div class="max-w-7xl mx-auto p-6">
<div class="relative flex justify-center"> <div class="flex flex-col lg:flex-row gap-6">
<% if (!selectedGuild) { %> <!-- Left sidebar (menu 1) -->
<!-- Card principal (centered) --> <aside class="hidden lg:block w-60">
<div class="w-full"> <nav class="bg-white/6 backdrop-blur rounded-xl p-4 glass-card h-[70vh]">
<div class="mx-auto backdrop-blur-md bg-white/10 border border-white/10 rounded-xl p-6 shadow-lg glass-card"> <ul class="flex flex-col gap-4">
<h1 class="text-3xl font-bold mb-2"><%= appName %></h1> <li class="text-slate-300">Item L1</li>
<p class="text-sm text-slate-200/80 mb-4">Panel de administración</p> <li class="text-slate-300">Item L2</li>
<div class="mt-4"> <li class="text-slate-300">Item L3</li>
<p class="text-sm text-slate-200/80">Selecciona un servidor desde la página principal para administrar sus ajustes.</p> <li class="text-slate-300">Item L4</li>
<a href="/dashboard/select-guild" class="inline-block mt-3 pixel-btn">Seleccionar servidor</a>
</div>
</div>
</div>
<% } %>
<% if (typeof selectedGuild !== 'undefined' && selectedGuild) { %>
<!-- Floating sidebar for guild actions -->
<aside class="absolute right-6 top-12 hidden lg:block transform translate-y-1">
<nav class="bg-white/6 backdrop-blur rounded-xl p-4 glass-card w-48">
<ul class="flex flex-col gap-3">
<li><a href="/dashboard/<%= selectedGuild %>/overview" class="block p-2 rounded-md hover:bg-white/5">Overview</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/members" class="block p-2 rounded-md hover:bg-white/5">Miembros</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/settings" class="block p-2 rounded-md hover:bg-white/5">Ajustes</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/areas" class="block p-2 rounded-md hover:bg-white/5">Game Areas</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/mobs" class="block p-2 rounded-md hover:bg-white/5">Mobs</a></li>
</ul> </ul>
</nav> </nav>
</aside> </aside>
<!-- Mobile drawer/backdrop -->
<div id="drawerBackdrop" class="fixed inset-0 bg-black/40 z-40 hidden"></div>
<div id="mobileDrawer" class="fixed left-0 top-0 bottom-0 w-64 bg-white/6 backdrop-blur z-50 transform -translate-x-full transition-transform duration-300">
<div class="p-4">
<h4 class="text-white font-semibold mb-3">Servidor: <%= selectedGuild %></h4>
<ul class="flex flex-col gap-3">
<li><a href="/dashboard/<%= selectedGuild %>/overview" class="block p-2 rounded-md hover:bg-white/5">Overview</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/members" class="block p-2 rounded-md hover:bg-white/5">Miembros</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/settings" class="block p-2 rounded-md hover:bg-white/5">Ajustes</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/areas" class="block p-2 rounded-md hover:bg-white/5">Game Areas</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/mobs" class="block p-2 rounded-md hover:bg-white/5">Mobs</a></li>
</ul>
</div>
</div>
<% } %>
<!-- Center panel (overview) -->
<main class="flex-1">
<div class="backdrop-blur-md bg-white/8 border border-white/8 rounded-xl p-8 shadow-lg min-h-[70vh]">
<h2 class="text-xl text-slate-200 mb-6">Overview</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white/5 rounded p-4">Panel A</div>
<div class="bg-white/5 rounded p-4">Panel B</div>
<div class="bg-white/5 rounded p-4">Panel C</div>
<div class="bg-white/5 rounded p-4">Panel D</div>
</div>
</div>
</main>
<!-- Right sidebar (menu 2) -->
<aside class="hidden lg:block w-56">
<nav class="bg-white/6 backdrop-blur rounded-xl p-4 glass-card h-[70vh]">
<ul class="flex flex-col gap-3">
<li><a href="#" class="block p-2 rounded-md hover:bg-white/5">Overview</a></li>
<li><a href="#" class="block p-2 rounded-md hover:bg-white/5">Miembros</a></li>
<li><a href="#" class="block p-2 rounded-md hover:bg-white/5">Ajustes</a></li>
<li><a href="#" class="block p-2 rounded-md hover:bg-white/5">Game Areas</a></li>
<li><a href="#" class="block p-2 rounded-md hover:bg-white/5">Mobs</a></li>
</ul>
</nav>
</aside>
</div> </div>
</div> </div>