Actualizar menu.html
This commit is contained in:
30
menu.html
30
menu.html
@@ -11,9 +11,8 @@
|
|||||||
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
|
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
|
||||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
|
|
||||||
/* Ajustes precisos para móviles con Notch/Barra inferior (iPhone) */
|
/* Ajuste limpio para el scroll sin barra abajo */
|
||||||
.safe-bottom-nav { padding-bottom: calc(env(safe-area-inset-bottom) + 12px); }
|
.main-content { padding-bottom: calc(env(safe-area-inset-bottom) + 30px); }
|
||||||
.main-content { padding-bottom: calc(env(safe-area-inset-bottom) + 90px); }
|
|
||||||
|
|
||||||
.app-card { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); }
|
.app-card { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); }
|
||||||
</style>
|
</style>
|
||||||
@@ -22,15 +21,17 @@
|
|||||||
|
|
||||||
<div class="absolute top-0 left-0 w-full h-48 bg-blue-600 rounded-b-[2.5rem] z-0"></div>
|
<div class="absolute top-0 left-0 w-full h-48 bg-blue-600 rounded-b-[2.5rem] z-0"></div>
|
||||||
|
|
||||||
<header class="px-6 pt-safe mt-10 pb-6 z-10 relative text-white shrink-0">
|
<header class="px-6 pt-safe mt-8 pb-6 z-10 relative text-white shrink-0">
|
||||||
<div class="flex justify-between items-center mb-6">
|
<div class="flex justify-between items-start mb-6">
|
||||||
<div>
|
<div>
|
||||||
<p class="text-[10px] font-black text-blue-200 uppercase tracking-widest mb-0.5" id="headerDate">HOY</p>
|
<p class="text-[10px] font-black text-blue-200 uppercase tracking-widest mb-0.5" id="headerDate">HOY</p>
|
||||||
<h1 class="text-3xl font-black tracking-tight leading-none">Hola, <span id="opName"></span></h1>
|
<h1 class="text-3xl font-black tracking-tight leading-none">Hola, <span id="opName"></span></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-12 h-12 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center border border-white/30 shadow-inner">
|
|
||||||
<i data-lucide="user" class="w-6 h-6 text-white"></i>
|
<button onclick="logout()" class="flex flex-col items-center justify-center w-12 h-12 bg-white/20 backdrop-blur-md rounded-full border border-white/30 shadow-inner hover:bg-rose-500 hover:border-rose-400 transition-colors active:scale-95" title="Cerrar sesión">
|
||||||
</div>
|
<i data-lucide="log-out" class="w-5 h-5 text-white"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -74,19 +75,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<nav class="bg-white/90 backdrop-blur-md border-t border-slate-200 z-20 absolute bottom-0 left-0 w-full shadow-[0_-10px_30px_rgba(0,0,0,0.05)] rounded-t-[2rem]">
|
|
||||||
<div class="flex justify-around items-center px-3 pt-3 safe-bottom-nav">
|
|
||||||
<button class="flex flex-col items-center p-2 text-blue-600 transition-transform active:scale-95 w-20">
|
|
||||||
<i data-lucide="layout-grid" class="w-6 h-6 mb-1"></i>
|
|
||||||
<span class="text-[9px] font-black uppercase tracking-widest">Inicio</span>
|
|
||||||
</button>
|
|
||||||
<button onclick="logout()" class="flex flex-col items-center p-2 text-slate-400 hover:text-red-500 transition-transform active:scale-95 w-20">
|
|
||||||
<i data-lucide="log-out" class="w-6 h-6 mb-1"></i>
|
|
||||||
<span class="text-[9px] font-bold uppercase tracking-widest">Salir</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
|
const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
|
||||||
? 'http://localhost:3000'
|
? 'http://localhost:3000'
|
||||||
|
|||||||
Reference in New Issue
Block a user