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

feat: Mejorar el diseño del panel de control y la página de inicio de sesión con ajustes de estilo y navegación

Browse Source
This commit is contained in:
Shni
2025-10-15 02:10:24 -05:00
parent 40b14c0e3e
commit 4ec7601666
3 changed files with 92 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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,62 +116,69 @@
<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>
</ul>
<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>
</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>
<!-- 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>
<% } %>

6
src/server/views/pages/login.ejs
View File

@@ -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 -->

75
src/server/views/partials/dashboard_nav.ejs
View File

@@ -1,52 +1,33 @@
<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>
</div>
<div class="flex items-center gap-3">
<% 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"/>
<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>
</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>
<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-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;">
<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 <%= selectedGuildId && selectedGuildId.toString() === g.id.toString() ? 'bg-white/8' : '' %>" data-id="<%= g.id %>" tabindex="0" role="button">
<%# icono del servidor si viene (g.icon) %>
<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">
<div class="text-sm font-medium"><%= g.name %></div>
<% if (g.addedAtHuman) { %>
<div class="text-xs text-slate-300"><%= g.addedAtHuman %></div>
<% } %>
</div>
<div class="flex-1 text-sm truncate"><%= g.name %></div>
</div>
<% }) %>
<% } else { %>
@@ -54,6 +35,22 @@
<% } %>
</div>
</div>
</div>
<div class="flex items-center gap-4">
<% if (user) { %>
<div class="relative">
<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 { %>
<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 { %>
<a href="/auth/discord" class="text-sm text-white/70 px-3 py-2 rounded-md hover:bg-white/5">Entrar</a>
<% } %>