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
This commit is contained in:
Shni
@@ -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 { %>
|
||||
|
||||
Reference in New Issue
Block a user