From 0c52aeb1aa7f5654d4a6081f2f667901841ecef2 Mon Sep 17 00:00:00 2001 From: MOHAN Date: Thu, 11 Jun 2026 13:23:29 +0530 Subject: [PATCH] =?UTF-8?q?style:=20redesign=20admin=20login=20page=20?= =?UTF-8?q?=E2=80=94=20split=20layout,=20glassmorphism,=20animated=20blobs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Full-screen split layout: left branding panel + right login card - Animated background gradient blobs with CSS keyframes - Dot-grid overlay for depth - Glassmorphism login card (backdrop-filter blur, subtle borders) - Brand icon with pulsing glow animation - Feature list on left panel - Input fields with icon prefix (user/key) and password show/hide toggle - Shimmer effect on sign-in button on hover - Error shake animation - Secure badge with green dot indicator - Blobs hidden after login so dashboard background is clean Co-Authored-By: Claude Sonnet 4.6 --- routes/adminPanel.js | 322 ++++++++++++++++++++++++++++++++++++------- 1 file changed, 276 insertions(+), 46 deletions(-) diff --git a/routes/adminPanel.js b/routes/adminPanel.js index 3aed792..6fa017e 100644 --- a/routes/adminPanel.js +++ b/routes/adminPanel.js @@ -92,28 +92,199 @@ function adminHtml() { -Data4Autos Admin +Data4Autos — Admin Portal - + + + +
-
✅ Shop added successfully!
-
+
@@ -238,6 +458,14 @@ async function checkAuth() { } checkAuth(); +// ── PASSWORD TOGGLE ────────────────────────────────────────────────────────── +function togglePass() { + const inp = document.getElementById('inp-pass'); + const btn = document.getElementById('eye-btn'); + if (inp.type === 'password') { inp.type = 'text'; btn.textContent = '🙈'; } + else { inp.type = 'password'; btn.textContent = '👁'; } +} + // ── LOGIN ─────────────────────────────────────────────────────────────────── async function doLogin() { const btn = document.getElementById('login-btn'); @@ -245,16 +473,16 @@ async function doLogin() { const user = document.getElementById('inp-user').value.trim(); const pass = document.getElementById('inp-pass').value; btn.disabled = true; - btn.innerHTML = ''; + btn.innerHTML = ' Signing in…'; err.style.display = 'none'; const r = await api('POST', '/login', { username: user, password: pass }); btn.disabled = false; - btn.textContent = 'Sign In'; + btn.textContent = 'Sign In to Admin Portal'; if (r.ok) { showDashboard(); } else { - err.textContent = r.data.error || 'Invalid credentials'; + err.textContent = '⚠️ ' + (r.data.error || 'Invalid credentials'); err.style.display = 'block'; } } @@ -265,6 +493,7 @@ async function doLogout() { await api('POST', '/logout'); document.getElementById('dashboard').style.display = 'none'; document.getElementById('login-screen').style.display = 'flex'; + document.getElementById('login-bg').style.display = 'block'; document.getElementById('inp-user').value = ''; document.getElementById('inp-pass').value = ''; } @@ -272,6 +501,7 @@ async function doLogout() { // ── SHOW DASHBOARD ────────────────────────────────────────────────────────── function showDashboard() { document.getElementById('login-screen').style.display = 'none'; + document.getElementById('login-bg').style.display = 'none'; document.getElementById('dashboard').style.display = 'block'; loadShops(); } @@ -333,7 +563,7 @@ async function doAddShop() { ok.style.display = 'none'; err.style.display = 'none'; - if (!shop) { err.textContent = 'Shop domain is required.'; err.style.display = 'block'; return; } + if (!shop) { err.textContent = '⚠️ Shop domain is required.'; err.style.display = 'block'; return; } const expiresAt = expires ? new Date(expires + 'T23:59:59.000Z').toISOString() : null; const r = await api('POST', '/api/shops', { shop, expiresAt, note });