DANYDHSV/siip-whatsapp-notifications-callbell_sync-stripe_payments
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Botón de modo oscuro en el login listo

Browse Source
This commit is contained in:
DANYDHSV 2026-02-20 13:08:01 -06:00
parent be8b0d0c38
commit caaa195fba
2 changed files with 76 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
data/plugin.log
View File

File diff suppressed because one or more lines are too long

81
public.php
View File

@ -1326,12 +1326,56 @@ $installersData = json_decode($config['installersDataWhatsApp'] ?? '{"instalador
transform: translateY(-400px) translateX(100px); transform: translateY(-400px) translateX(100px);
} }
} }
[data-theme="light"] #loginOverlay {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%);
}
[data-theme="light"] .login-card {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .login-title {
color: #0f172a;
}
[data-theme="light"] .login-subtitle,
[data-theme="light"] .login-field label,
[data-theme="light"] .login-footer {
color: #475569;
}
[data-theme="light"] .login-field input {
background: #ffffff;
border: 1px solid #cbd5e1;
color: #0f172a;
}
[data-theme="light"] .login-field input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
background: #fff;
}
[data-theme="light"] .login-field input::placeholder {
color: #94a3b8;
}
[data-theme="light"] .login-particles span {
background: rgba(99, 102, 241, 0.4);
}
</style> </style>
</head> </head>
<body> <body>
<!-- ━━━ Login Overlay ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> <!-- ━━━ Login Overlay ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ -->
<div id="loginOverlay"> <div id="loginOverlay">
<button class="theme-toggle" onclick="toggleTheme()" style="position: absolute; top: 24px; right: 24px; z-index: 10000; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 20px; font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 600; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.2s ease;">
<div class="theme-icon-box" style="display: flex; align-items: center; justify-content: center;"></div>
<span class="theme-text">Modo Claro</span>
</button>
<div class="login-particles" id="loginParticles"></div> <div class="login-particles" id="loginParticles"></div>
<div class="login-card"> <div class="login-card">
<img src="?action=image&file=whatsapp-logo.png" class="login-logo" alt="SIIP"> <img src="?action=image&file=whatsapp-logo.png" class="login-logo" alt="SIIP">
@ -1882,26 +1926,29 @@ $installersData = json_decode($config['installersDataWhatsApp'] ?? '{"instalador
} }
function updateThemeBtn() { function updateThemeBtn() {
const btn = document.getElementById('themeBtn');
const listBox = btn.querySelector('.theme-icon-box');
const text = document.getElementById('themeText');
// Icons
const iconSun = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>`; const iconSun = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>`;
const iconMoon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>`; const iconMoon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>`;
if (store.theme === 'dark') { document.querySelectorAll('.theme-toggle').forEach(btn => {
listBox.innerHTML = iconMoon; const listBox = btn.querySelector('.theme-icon-box');
text.textContent = 'Modo Oscuro'; const text = btn.querySelector('.theme-text');
// Add subtle glow for active mode
btn.style.borderColor = '#6366f1'; if (store.theme === 'dark') {
btn.style.background = 'rgba(30, 41, 59, 0.8)'; // Darker bg if (listBox) listBox.innerHTML = iconMoon;
} else { if (text) text.textContent = 'Modo Oscuro';
listBox.innerHTML = iconSun; if (!btn.classList.contains('login-theme-btn')) {
text.textContent = 'Modo Claro'; btn.style.borderColor = '#6366f1';
btn.style.borderColor = '#f59e0b'; btn.style.background = 'rgba(30, 41, 59, 0.8)';
btn.style.background = '#fff'; }
} } else {
if (listBox) listBox.innerHTML = iconSun;
if (text) text.textContent = 'Modo Claro';
if (!btn.classList.contains('login-theme-btn')) {
btn.style.borderColor = '#f59e0b';
btn.style.background = '#fff';
}
}
});
} }
document.documentElement.setAttribute('data-theme', store.theme); document.documentElement.setAttribute('data-theme', store.theme);
updateThemeBtn(); updateThemeBtn();