marsalva/App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar menu.html

Browse Source
This commit is contained in:
marsalva
2026-02-22 22:03:52 +00:00
parent 5458e1b4ff
commit b0099777ea
1 changed files with 38 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
menu.html
View File

@@ -7,7 +7,14 @@
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script> <script src="https://unpkg.com/lucide@latest"></script>
<style> <style>
body { background-color: #f4f7f9; -webkit-tap-highlight-color: transparent; } /* VARIABLES CORPORATIVAS DINÁMICAS */
:root {
--primary: #2563eb;
--secondary: #f59e0b;
--app-bg: #f4f7f9;
}
body { background-color: var(--app-bg); -webkit-tap-highlight-color: transparent; }
.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); } }
@@ -15,16 +22,20 @@
.main-content { padding-bottom: calc(env(safe-area-inset-bottom) + 30px); } .main-content { padding-bottom: calc(env(safe-area-inset-bottom) + 30px); }
.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); }
/* Clases CSS dinámicas para aplicar las variables */
.bg-primary-dynamic { background-color: var(--primary) !important; }
.text-primary-dynamic { color: var(--primary) !important; }
</style> </style>
</head> </head>
<body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden relative"> <body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden relative">
<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-primary-dynamic rounded-b-[2.5rem] z-0 transition-colors duration-500"></div>
<header class="px-6 pt-safe mt-8 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-start 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-white/70 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>
@@ -80,7 +91,27 @@
? 'http://localhost:3000' ? 'http://localhost:3000'
: 'https://integrarepara-api.integrarepara.es'; : 'https://integrarepara-api.integrarepara.es';
document.addEventListener("DOMContentLoaded", () => { // --- SISTEMA DE TEMA DINÁMICO ---
async function applyTheme() {
try {
let theme = JSON.parse(localStorage.getItem('app_theme'));
const res = await fetch(`${API_URL}/config/company`, {
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
});
const data = await res.json();
if(data.ok && data.config && data.config.portal_settings && data.config.portal_settings.app_settings) {
theme = data.config.portal_settings.app_settings;
localStorage.setItem('app_theme', JSON.stringify(theme));
}
if(theme) {
document.documentElement.style.setProperty('--primary', theme.primary);
document.documentElement.style.setProperty('--secondary', theme.secondary);
document.documentElement.style.setProperty('--app-bg', theme.bg);
}
} catch (e) { console.warn("Usando tema por defecto"); }
}
document.addEventListener("DOMContentLoaded", async () => {
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
const role = localStorage.getItem("role"); const role = localStorage.getItem("role");
@@ -89,6 +120,9 @@
return; return;
} }
// Aplicamos los colores corporativos de la empresa
await applyTheme();
lucide.createIcons(); lucide.createIcons();
const rawName = localStorage.getItem("userName") || "Operario"; const rawName = localStorage.getItem("userName") || "Operario";