From 4ec760166666e92d2f9be82a57cb7faa547ea635 Mon Sep 17 00:00:00 2001
From: Shni <niamelyrz@gmail.com>
Date: Wed, 15 Oct 2025 02:10:24 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20Mejorar=20el=20dise=C3=B1o=20del=20pane?=
 =?UTF-8?q?l=20de=20control=20y=20la=20p=C3=A1gina=20de=20inicio=20de=20se?=
 =?UTF-8?q?si=C3=B3n=20con=20ajustes=20de=20estilo=20y=20navegaci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/server/views/pages/dashboard.ejs        | 79 +++++++++--------
 src/server/views/pages/login.ejs            |  6 +-
 src/server/views/partials/dashboard_nav.ejs | 95 ++++++++++-----------
 3 files changed, 92 insertions(+), 88 deletions(-)

diff --git a/src/server/views/pages/dashboard.ejs b/src/server/views/pages/dashboard.ejs
index f5ebe16..26e9611 100644
--- a/src/server/views/pages/dashboard.ejs
+++ b/src/server/views/pages/dashboard.ejs
@@ -13,7 +13,7 @@
         </div>
 
         <div class="w-full max-w-lg">
-          <div class="mx-auto backdrop-blur-md bg-white/6 rounded-xl p-6 shadow-lg glass-card">
+          <div class="mx-auto backdrop-blur-md bg-white/6 rounded-xl p-6 shadow-xl glass-card">
             <!-- user header inside card -->
             <div class="flex items-center justify-center mb-4">
               <div class="text-slate-200 text-sm">Logged in as</div>
@@ -56,7 +56,7 @@
             </div>
           </div>
 
-          <div class="text-center text-xs text-slate-400 mt-6">© 2021–2025 Xge  •  Terms  •  Privacy  •  Legal Notice</div>
+          <div class="text-center text-xs text-slate-400 mt-6">© 2021–2025 ShniCorp •  Terms  •  Privacy </div>
         </div>
       </div>
 
@@ -116,63 +116,70 @@
     <div id="dashContent">
     <% if (typeof page !== 'undefined' && page === 'overview' && selectedGuild) { %>
       <div class="w-full max-w-7xl mx-auto mt-6 px-4">
-        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
+        <div class="flex gap-8">
           <!-- Left sidebar -->
-          <aside class="lg:col-span-3">
-            <div class="bg-white/4 border border-white/6 rounded-xl p-4 sticky top-20">
-              <h3 class="text-slate-200 font-semibold mb-3">Menú</h3>
-              <ul class="space-y-2 text-slate-200">
-                <li><a href="/dashboard/<%= selectedGuild %>/overview" class="block p-2 rounded hover:bg-white/5">Overview</a></li>
-                <li><a href="/dashboard/<%= selectedGuild %>/members" class="block p-2 rounded hover:bg-white/5">Miembros</a></li>
-                <li><a href="/dashboard/<%= selectedGuild %>/settings" class="block p-2 rounded hover:bg-white/5">Ajustes</a></li>
-                <li><a href="/dashboard/<%= selectedGuild %>/areas" class="block p-2 rounded hover:bg-white/5">Game Areas</a></li>
-                <li><a href="/dashboard/<%= selectedGuild %>/mobs" class="block p-2 rounded hover:bg-white/5">Mobs</a></li>
+          <aside class="w-64 hidden lg:block">
+            <nav class="bg-white/4 border border-white/6 rounded-xl p-4 sticky top-20 h-[80vh] overflow-auto">
+              <div class="mb-4 flex items-center gap-2">
+                <a href="/dashboard/<%= selectedGuild %>/overview" class="px-3 py-1 rounded-full bg-white/5 text-white text-xs">Home</a>
+              </div>
+              <ul class="mt-2 space-y-3 text-slate-200">
+                <li class="text-sm"><a href="/dashboard/<%= selectedGuild %>/overview" class="flex items-center gap-3"><span class="opacity-80">⚙️</span> General Settings</a></li>
+                <li class="text-sm"><a href="#" class="flex items-center gap-3"><span class="opacity-80">💬</span> Commands</a></li>
+                <li class="text-sm"><a href="#" class="flex items-center gap-3"><span class="opacity-80">📝</span> Messages</a></li>
+                <li class="text-sm"><a href="#" class="flex items-center gap-3"><span class="opacity-80">✨</span> Custom Branding</a></li>
+                <li class="mt-4 text-xs text-slate-400">MODULES</li>
+                <li class="text-sm"><a href="#" class="flex items-center gap-3"><span class="opacity-80">🛡️</span> Auto Moderation <span class="ml-2 text-xs text-rose-400">NEW</span></a></li>
+                <li class="text-sm"><a href="#" class="flex items-center gap-3"><span class="opacity-80">🔔</span> Moderation</a></li>
+                <li class="text-sm"><a href="#" class="flex items-center gap-3"><span class="opacity-80">🤝</span> Social Notifications</a></li>
+                <li class="text-sm"><a href="#" class="flex items-center gap-3"><span class="opacity-80">🎉</span> Welcome Messages <span class="ml-2 text-xs text-rose-400">NEW</span></a></li>
               </ul>
-            </div>
+            </nav>
           </aside>
 
-          <!-- Main content -->
-          <main class="lg:col-span-6">
-            <div class="flex items-center justify-between mb-6">
-              <div>
-                <h1 class="text-3xl font-bold text-white">Welcome <span class="text-indigo-400"><%= user?.username || 'Admin' %></span></h1>
-                <p class="text-slate-300">find commonly used dashboard pages below.</p>
-              </div>
+          <!-- Main column -->
+          <main class="flex-1">
+            <div class="mb-6">
+              <h1 class="text-4xl font-bold text-white">Welcome <span class="text-blue-400"><%= user?.username || 'Admin' %></span>,</h1>
+              <p class="text-slate-300 mt-2">find commonly used dashboard pages below.</p>
             </div>
 
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <div class="bg-white/6 rounded-xl p-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div class="bg-white/4 rounded-xl p-6">
                 <h4 class="text-white font-semibold">Custom messages</h4>
                 <p class="text-slate-300 text-sm mt-2">Create fully customized messages called templates and pack them with your very own embeds, buttons and select menus.</p>
-                <div class="mt-3"><a href="#" class="inline-block pixel-btn">Create template</a></div>
+                <div class="mt-4"><a href="#" class="inline-block px-3 py-2 rounded bg-slate-700 text-white">Create template</a></div>
               </div>
-              <div class="bg-white/6 rounded-xl p-4">
+
+              <div class="bg-white/4 rounded-xl p-6">
                 <h4 class="text-white font-semibold">Moderation cases</h4>
                 <p class="text-slate-300 text-sm mt-2">View and edit all moderation cases using the dashboard.</p>
-                <div class="mt-3"><a href="#" class="inline-block pixel-btn">View cases</a></div>
+                <div class="mt-4"><a href="#" class="inline-block px-3 py-2 rounded bg-slate-700 text-white">View cases</a></div>
               </div>
-              <div class="bg-white/6 rounded-xl p-4">
+
+              <div class="bg-white/4 rounded-xl p-6">
                 <h4 class="text-white font-semibold">User reports</h4>
                 <p class="text-slate-300 text-sm mt-2">Allow users to report others and fully customize how to handle them.</p>
-                <div class="mt-3"><a href="#" class="inline-block pixel-btn">Configure reports</a></div>
+                <div class="mt-4"><a href="#" class="inline-block px-3 py-2 rounded bg-slate-700 text-white">Configure reports</a></div>
               </div>
-              <div class="bg-white/6 rounded-xl p-4">
+
+              <div class="bg-white/4 rounded-xl p-6">
                 <h4 class="text-white font-semibold">Role greetings</h4>
                 <p class="text-slate-300 text-sm mt-2">Welcome users to their new role by using role assignment messages.</p>
-                <div class="mt-3"><a href="#" class="inline-block pixel-btn">Show role messages</a></div>
+                <div class="mt-4"><a href="#" class="inline-block px-3 py-2 rounded bg-slate-700 text-white">Show role messages</a></div>
               </div>
             </div>
           </main>
 
-          <!-- Right column (info / notices) -->
-          <aside class="lg:col-span-3">
-            <div class="bg-white/4 border border-white/6 rounded-xl p-4 sticky top-20">
-              <h4 class="text-white font-semibold mb-2">Notices</h4>
-              <div class="text-slate-300 text-sm">You are not in the support server. It is recommended to join for updates and support.</div>
-            </div>
-          </aside>
         </div>
       </div>
+      <!-- blurred hex backgrounds -->
+      <div class="absolute right-8 top-40 opacity-80 pointer-events-none">
+        <img src="/assets/images/snap1.svg" class="w-48 h-48 filter blur-[8px] opacity-80" alt="hex" />
+      </div>
+      <div class="absolute left-8 top-64 opacity-80 pointer-events-none">
+        <img src="/assets/images/snap2.svg" class="w-32 h-32 filter blur-[6px] opacity-80" alt="hex2" />
+      </div>
     <% } %>
 
     <% if (typeof page !== 'undefined' && page === 'settings' && selectedGuild) { %>
diff --git a/src/server/views/pages/login.ejs b/src/server/views/pages/login.ejs
index a7ed70c..cbf1a11 100644
--- a/src/server/views/pages/login.ejs
+++ b/src/server/views/pages/login.ejs
@@ -1,6 +1,6 @@
 <div class="min-h-screen flex items-center justify-center pixel-grid-bg" style="background-image: url('/assets/images/background.svg'); background-size: cover;">
-  <div class="w-full max-w-3xl p-8">
-    <div class="mx-auto max-w-lg text-center">
+  <div class="w-full max-w-3xl p-8 shadow-xl">
+    <div class="mx-auto max-w-lg text-center ">
       <!-- Animated inline logo -->
       <div class="mx-auto mb-4 w-24 logo-anim" aria-hidden="true">
          <img src="/assets/images/logo-amayo.svg" alt="logo" class="mx-auto mb-4 rounded-full" />
@@ -11,7 +11,7 @@
     <div class="mx-auto max-w-md glass-card backdrop-blur-md rounded-xl p-4 entrance-card">
       <p class="text-sm text-slate-300 mb-6">Log in with Discord to access the dashboard.</p>
 
-      <a id="discordLoginBtn" href="/auth/discord" class="inline-flex items-center justify-center gap-3 w-full px-4 py-3 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium transition-colors relative overflow-hidden">
+      <a id="discordLoginBtn" href="/auth/discord" class="inline-flex items-center justify-center gap-3 w-full px-4 py-3 rounded-md via-sky-500 hover:via-sky-700 text-white font-medium transition-colors relative overflow-hidden">
         <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none"><path d="M8.25 15.5c1.1 0 1.99-.9 1.99-2s-.89-2-1.99-2-2 .9-2 2 .9 2 2 2zm7.5 0c1.1 0 1.99-.9 1.99-2s-.89-2-1.99-2-2 .9-2 2 .9 2 2 2z" fill="#fff"/></svg>
         <span id="discordLoginText">Log in with Discord</span>
         <!-- spinner -->
diff --git a/src/server/views/partials/dashboard_nav.ejs b/src/server/views/partials/dashboard_nav.ejs
index 26a481b..3981e31 100644
--- a/src/server/views/partials/dashboard_nav.ejs
+++ b/src/server/views/partials/dashboard_nav.ejs
@@ -1,57 +1,54 @@
-<header class="w-full bg-transparent p-3 md:p-4 fixed top-0 left-0 right-0 z-20">
-  <div class="max-w-6xl mx-auto flex items-center justify-between">
-    <div class="flex items-center gap-3">
-      <a href="/" class="text-white font-bold">← Volver</a>
-      <!-- Drawer toggle for mobile -->
-      <button id="drawerToggle" class="ml-3 lg:hidden text-white/90 px-3 py-2 rounded-md hover:bg-white/5">☰</button>
-      <span class="text-white/80">|</span>
-      <h3 class="text-white font-semibold"><%= appName %></h3>
+<header class="w-full bg-transparent p-2 fixed top-0 left-0 right-0 z-30 border-b border-white/3">
+  <div class="max-w-7xl mx-auto flex items-center justify-between px-3">
+    <div class="flex items-center gap-4">
+      <!-- small logo + name -->
+      <a href="/" class="flex items-center gap-2 mr-2">
+        <div class="w-7 h-7">
+          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
+            <defs><linearGradient id="navg" x1="0" x2="1"><stop offset="0%" stop-color="#06b6d4"/><stop offset="100%" stop-color="#3b82f6"/></linearGradient></defs>
+            <circle cx="50" cy="50" r="42" fill="url(#navg)"/>
+            <g transform="translate(50,50)"><path d="M-12,-4 L0,-18 L12,-4 L0,12 Z" fill="#fff"/></g>
+          </svg>
+        </div>
+        <span class="text-white font-semibold hidden sm:inline"><%= appName %></span>
+      </a>
+      <!-- mini guild selector compact -->
+      <div class="hidden md:block">
+        <button id="miniGuildBtn" class="px-3 py-1 rounded-full bg-white/5 text-white flex items-center gap-2" aria-expanded="false" aria-controls="miniGuildList">
+          <span id="miniGuildName" class="text-sm"><%= selectedGuildName || 'Seleccionar servidor' %></span>
+          <svg class="w-3 h-3 text-white/80" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </button>
+        <div id="miniGuildList" class="origin-top-left absolute left-4 mt-12 w-72 bg-white/6 backdrop-blur rounded-md p-2 hidden transition-transform duration-150" style="max-height:20rem; overflow:auto;">
+          <% if (guilds && guilds.length) { %>
+            <% guilds.forEach(g => { %>
+              <div class="p-2 rounded-md hover:bg-white/5 cursor-pointer text-white guild-item flex items-center gap-2" data-id="<%= g.id %>">
+                <% if (g.icon) { %>
+                  <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-6 h-6 rounded-full" alt="icon">
+                <% } else { %>
+                  <div class="w-6 h-6 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div>
+                <% } %>
+                <div class="flex-1 text-sm truncate"><%= g.name %></div>
+              </div>
+            <% }) %>
+          <% } else { %>
+            <div class="p-2 text-slate-300">No servers</div>
+          <% } %>
+        </div>
+      </div>
     </div>
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-4">
       <% if (user) { %>
         <div class="relative">
-              <%# User menu: avatar + name that toggles a small dropdown for logout %>
-              <button id="userBtn" class="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-white/5 focus:outline-none" aria-expanded="false" aria-haspopup="true">
-                <% if (user.id && user.avatar) { %>
-                  <img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.png" class="w-8 h-8 rounded-full" alt="avatar">
-                <% } else { %>
-                  <img src="<%= user.avatar || '/assets/images/snap1.svg' %>" class="w-8 h-8 rounded-full" alt="avatar">
-                <% } %>
-                <span class="text-white hidden sm:inline"><%= user.username %></span>
-                <svg class="w-3 h-3 text-white/80 ml-1" viewBox="0 0 20 20" fill="none" aria-hidden>
-                  <path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-              </button>
-              <div id="userMenu" class="origin-top-right absolute right-0 mt-2 w-44 bg-white/6 backdrop-blur rounded-md p-2 hidden transition-transform duration-150 ease-out transform scale-95 opacity-0 pointer-events-none">
-                <a href="/auth/logout" class="block px-3 py-2 text-sm text-rose-300 hover:bg-white/5 rounded">Cerrar sesión</a>
-              </div>
-            </div>
-        <div class="relative">
-          <button id="miniGuildBtn" class="ml-3 px-3 py-2 rounded-md bg-white/5 text-white hover:bg-white/6 flex items-center gap-2" aria-expanded="false" aria-controls="miniGuildList">
-            <span id="miniGuildName"><%= selectedGuildName || 'Seleccionar servidor' %></span>
-            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
-          </button>
-          <div id="miniGuildList" class="origin-top-right absolute right-0 mt-2 w-72 bg-white/6 backdrop-blur rounded-md p-2 hidden transition-transform duration-180 ease-out transform scale-95 opacity-0 pointer-events-none" style="-webkit-overflow-scrolling: touch;">
-            <% if (guilds && guilds.length) { %>
-              <% guilds.forEach(g => { %>
-                <div class="p-2 rounded-md hover:bg-white/5 cursor-pointer text-white guild-item flex items-center gap-2 <%= selectedGuildId && selectedGuildId.toString() === g.id.toString() ? 'bg-white/8' : '' %>" data-id="<%= g.id %>" tabindex="0" role="button">
-                  <%# icono del servidor si viene (g.icon) %>
-                  <% if (g.icon) { %>
-                    <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-6 h-6 rounded-full" alt="icon">
-                  <% } else { %>
-                    <div class="w-6 h-6 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div>
-                  <% } %>
-                  <div class="flex-1">
-                    <div class="text-sm font-medium"><%= g.name %></div>
-                    <% if (g.addedAtHuman) { %>
-                      <div class="text-xs text-slate-300"><%= g.addedAtHuman %></div>
-                    <% } %>
-                  </div>
-                </div>
-              <% }) %>
+          <button id="userBtn" class="flex items-center gap-2 px-2 py-1 rounded-full hover:bg-white/5 focus:outline-none" aria-expanded="false">
+            <% if (user.id && user.avatar) { %>
+              <img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.png" class="w-8 h-8 rounded-full" alt="avatar">
             <% } else { %>
-              <div class="p-2 text-slate-300">No servers</div>
+              <img src="/assets/images/snap1.svg" class="w-8 h-8 rounded-full" alt="avatar">
             <% } %>
+            <svg class="w-3 h-3 text-white/80 ml-1" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+          <div id="userMenu" class="origin-top-right absolute right-0 mt-2 w-36 bg-white/6 backdrop-blur rounded-md p-2 hidden">
+            <a href="/auth/logout" class="block px-3 py-2 text-sm text-rose-300 hover:bg-white/5 rounded">Log out</a>
           </div>
         </div>
         <% } else { %>