admin/Data4Autos-Shopify-Backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign admin panel with full light theme (Stripe/Linear aesthetic)

Browse Source 
- Login: vibrant blue gradient left panel + pure white right form panel
- Dashboard: white topbar with blue accent, white cards, light gray page bg
- Status tags: light-coloured pill badges (green/red/blue) with dot indicators
- Remove all dark glassmorphism and near-black surfaces
- Sync count badge across topbar and table header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MOHAN 2026-06-11 13:34:55 +05:30
parent 0c52aeb1aa
commit 4be12dc9d4
1 changed files with 294 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

540
routes/adminPanel.js
View File

@ -96,286 +96,317 @@ function adminHtml() {
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
*{box-sizing:border-box;margin:0;padding:0} *{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:#020617;min-height:100vh;color:#f1f5f9;overflow-x:hidden} body{font-family:'Inter',system-ui,sans-serif;background:#f1f5f9;min-height:100vh;color:#0f172a;overflow-x:hidden}
/* ═══════════════════════════════════════════ /* ═══════════════════════════ LOGIN ═══════════════════════════ */
LOGIN SCREEN #login-screen{display:flex;align-items:stretch;min-height:100vh;}
═══════════════════════════════════════════ */
#login-screen{
display:flex;align-items:stretch;min-height:100vh;
background:#020617;
}
/* animated background blobs */ /* Left — vibrant blue panel */
.login-bg{
position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.blob{
position:absolute;border-radius:50%;filter:blur(80px);opacity:0.18;
animation:blobFloat 12s ease-in-out infinite;
}
.blob1{width:600px;height:600px;background:radial-gradient(circle,#3b82f6,#1e3a8a);top:-200px;left:-150px;animation-delay:0s;}
.blob2{width:500px;height:500px;background:radial-gradient(circle,#8b5cf6,#1e1b4b);bottom:-180px;right:-100px;animation-delay:-4s;}
.blob3{width:350px;height:350px;background:radial-gradient(circle,#06b6d4,#0e7490);top:40%;left:55%;animation-delay:-7s;}
@keyframes blobFloat{
0%,100%{transform:translateY(0) scale(1);}
33%{transform:translateY(-30px) scale(1.05);}
66%{transform:translateY(20px) scale(0.97);}
}
/* grid dot overlay */
.login-bg::after{
content:'';position:absolute;inset:0;
background-image:radial-gradient(rgba(255,255,255,0.04) 1px,transparent 1px);
background-size:32px 32px;
}
/* left branding panel */
.login-left{ .login-left{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; flex:1;display:flex;flex-direction:column;justify-content:center;
padding:60px 48px;position:relative;z-index:1; padding:64px 56px;
background:linear-gradient(145deg,#1e40af 0%,#2563eb 45%,#4f46e5 100%);
position:relative;overflow:hidden;
} }
@media(max-width:800px){.login-left{display:none}} @media(max-width:860px){.login-left{display:none}}
.login-left::before{
.brand-icon{ content:'';position:absolute;width:500px;height:500px;border-radius:50%;
width:88px;height:88px; background:rgba(255,255,255,0.06);top:-160px;right:-120px;
background:linear-gradient(135deg,#1e40af,#3b82f6,#06b6d4);
border-radius:24px;display:flex;align-items:center;justify-content:center;
font-size:40px;margin-bottom:28px;
box-shadow:0 0 0 1px rgba(59,130,246,0.3),0 0 40px rgba(59,130,246,0.25);
animation:iconPulse 3s ease-in-out infinite;
} }
@keyframes iconPulse{ .login-left::after{
0%,100%{box-shadow:0 0 0 1px rgba(59,130,246,0.3),0 0 40px rgba(59,130,246,0.25);} content:'';position:absolute;width:320px;height:320px;border-radius:50%;
50%{box-shadow:0 0 0 1px rgba(59,130,246,0.5),0 0 60px rgba(59,130,246,0.4);} background:rgba(255,255,255,0.05);bottom:-80px;left:-60px;
} }
.ll-logo{
.brand-name{ display:flex;align-items:center;gap:14px;margin-bottom:52px;position:relative;z-index:1;
font-size:32px;font-weight:900;letter-spacing:-1px;
background:linear-gradient(135deg,#f8fafc,#93c5fd);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;margin-bottom:10px;text-align:center;
} }
.brand-tagline{ .ll-icon{
font-size:14px;color:#475569;text-align:center;max-width:300px;line-height:1.7; width:52px;height:52px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);
border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;
} }
.ll-brand{font-size:20px;font-weight:800;color:#fff;letter-spacing:-0.3px;}
.feature-list{ .ll-brand span{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,0.6);letter-spacing:0;margin-top:1px;}
margin-top:44px;display:flex;flex-direction:column;gap:14px;width:100%;max-width:320px; .ll-heading{font-size:34px;font-weight:900;color:#fff;line-height:1.2;letter-spacing:-1px;margin-bottom:16px;position:relative;z-index:1;}
} .ll-heading em{font-style:normal;color:#bfdbfe;}
.feature-item{ .ll-desc{font-size:15px;color:rgba(255,255,255,0.72);line-height:1.7;max-width:340px;margin-bottom:48px;position:relative;z-index:1;}
.ll-features{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1;}
.ll-feat{
display:flex;align-items:center;gap:12px; display:flex;align-items:center;gap:12px;
background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);
border-radius:10px;padding:12px 16px; border-radius:10px;padding:12px 16px;
} }
.feature-dot{ .ll-feat-check{
width:8px;height:8px;border-radius:50%;background:#3b82f6;flex-shrink:0; width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,0.15);
box-shadow:0 0 8px #3b82f6;
}
.feature-item span{font-size:13px;color:#94a3b8;font-weight:500;}
/* right login panel */
.login-right{
width:480px;flex-shrink:0;
display:flex;align-items:center;justify-content:center; display:flex;align-items:center;justify-content:center;
padding:40px 32px;position:relative;z-index:1; font-size:12px;color:#fff;flex-shrink:0;font-weight:700;
} }
@media(max-width:800px){.login-right{width:100%;}} .ll-feat span{font-size:13px;color:rgba(255,255,255,0.85);font-weight:500;}
.login-card{ /* Right — white form panel */
width:100%;max-width:400px; .login-right{
background:rgba(15,23,42,0.7); width:500px;flex-shrink:0;background:#fff;
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); display:flex;align-items:center;justify-content:center;
border:1px solid rgba(255,255,255,0.08); padding:48px 40px;
border-radius:24px;
padding:44px 40px;
box-shadow:0 32px 80px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.06);
animation:cardIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
} }
@keyframes cardIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}} @media(max-width:860px){.login-right{width:100%;}}
.login-card{width:100%;max-width:380px;}
@keyframes cardIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.login-card{animation:cardIn 0.4s ease both;}
.card-header{text-align:center;margin-bottom:36px;} .lc-top{margin-bottom:36px;}
.card-mini-logo{ .lc-eyebrow{
display:inline-flex;align-items:center;gap:8px; display:inline-flex;align-items:center;gap:6px;
background:linear-gradient(135deg,rgba(30,64,175,0.6),rgba(37,99,235,0.6)); background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;
border:1px solid rgba(59,130,246,0.3); padding:4px 12px;font-size:11px;font-weight:700;color:#1d4ed8;
border-radius:10px;padding:6px 14px;margin-bottom:20px; letter-spacing:0.06em;text-transform:uppercase;margin-bottom:18px;
} }
.card-mini-logo span{font-size:12px;font-weight:800;color:#93c5fd;letter-spacing:0.08em;text-transform:uppercase;} .lc-eyebrow .status-dot{width:6px;height:6px;border-radius:50%;background:#16a34a;}
.card-title{font-size:22px;font-weight:800;color:#f8fafc;letter-spacing:-0.5px;margin-bottom:6px;} .lc-title{font-size:26px;font-weight:900;color:#0f172a;letter-spacing:-0.8px;margin-bottom:6px;}
.card-sub{font-size:13px;color:#475569;} .lc-sub{font-size:14px;color:#64748b;line-height:1.5;}
/* form fields */ /* fields */
.inp-wrap{position:relative;margin-bottom:18px;} .lc-field{margin-bottom:20px;}
.inp-wrap label{ .lc-field label{
display:block;font-size:11px;font-weight:700; display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:7px;
color:#64748b;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;
} }
.inp-inner{position:relative;} .lc-inp-wrap{position:relative;}
.inp-icon{ .lc-inp-icon{
position:absolute;left:14px;top:50%;transform:translateY(-50%); position:absolute;left:13px;top:50%;transform:translateY(-50%);
font-size:15px;color:#475569;pointer-events:none;line-height:1; width:18px;height:18px;display:flex;align-items:center;justify-content:center;
color:#9ca3af;font-size:14px;pointer-events:none;
} }
.inp-wrap input{ .lc-field input{
width:100%; width:100%;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;
background:rgba(2,6,23,0.6); padding:12px 40px 12px 40px;color:#0f172a;font-size:14px;font-family:inherit;
border:1px solid rgba(255,255,255,0.08); outline:none;transition:border-color 0.15s,box-shadow 0.15s,background 0.15s;
border-radius:10px;
padding:12px 44px 12px 42px;
color:#f1f5f9;font-size:14px;font-family:inherit;
outline:none;transition:border-color 0.2s,box-shadow 0.2s,background 0.2s;
} }
.inp-wrap input::placeholder{color:#334155;} .lc-field input::placeholder{color:#b0b8c4;}
.inp-wrap input:focus{ .lc-field input:focus{
border-color:rgba(59,130,246,0.6); border-color:#2563eb;background:#fff;
background:rgba(2,6,23,0.8); box-shadow:0 0 0 3px rgba(37,99,235,0.1);
box-shadow:0 0 0 3px rgba(59,130,246,0.12);
} }
.eye-btn{ .lc-eye{
position:absolute;right:13px;top:50%;transform:translateY(-50%); position:absolute;right:12px;top:50%;transform:translateY(-50%);
background:none;border:none;color:#475569;cursor:pointer; background:none;border:none;cursor:pointer;color:#9ca3af;font-size:14px;
font-size:15px;padding:2px;line-height:1;transition:color 0.15s; padding:4px;transition:color 0.15s;line-height:1;
} }
.eye-btn:hover{color:#94a3b8;} .lc-eye:hover{color:#374151;}
/* submit button */ /* divider */
.lc-divider{height:1px;background:#f1f5f9;margin:4px 0 20px;}
/* sign in button */
.btn-login{ .btn-login{
width:100%;margin-top:6px; width:100%;padding:13px 20px;border:none;border-radius:10px;
padding:13px;border:none;border-radius:10px; background:#2563eb;color:#fff;font-size:15px;font-weight:700;font-family:inherit;
background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 50%,#3b82f6 100%);
background-size:200% 200%;
color:#fff;font-size:15px;font-weight:700;font-family:inherit;
cursor:pointer;position:relative;overflow:hidden; cursor:pointer;position:relative;overflow:hidden;
transition:transform 0.15s,box-shadow 0.2s,background-position 0.4s; transition:background 0.15s,transform 0.1s,box-shadow 0.15s;
box-shadow:0 4px 20px rgba(37,99,235,0.35); box-shadow:0 1px 3px rgba(37,99,235,0.3),0 4px 12px rgba(37,99,235,0.2);
} }
.btn-login::after{ .btn-login:hover{background:#1d4ed8;transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,99,235,0.35);}
content:'';position:absolute;inset:0; .btn-login:active{transform:none;background:#1e40af;}
background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.18) 50%,transparent 60%); .btn-login:disabled{background:#93c5fd;cursor:not-allowed;transform:none;box-shadow:none;}
transform:translateX(-100%);transition:transform 0.5s;
}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(37,99,235,0.5);background-position:100% 0;}
.btn-login:hover::after{transform:translateX(100%);}
.btn-login:active{transform:translateY(0);}
.btn-login:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-login:disabled::after{display:none;}
/* error */ /* error */
.err-msg{ .err-msg{
background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.3); background:#fef2f2;border:1px solid #fecaca;border-radius:8px;
border-radius:8px;padding:10px 14px; padding:10px 14px;font-size:13px;color:#dc2626;margin-top:14px;display:none;
font-size:13px;color:#f87171;margin-top:14px;display:none;
animation:shake 0.35s ease;
}
@keyframes shake{
0%,100%{transform:none;}10%,50%,90%{transform:translateX(-4px);}30%,70%{transform:translateX(4px);}
} }
@keyframes shake{0%,100%{transform:none;}20%,60%{transform:translateX(-5px);}40%,80%{transform:translateX(5px);}}
.err-msg.shake{animation:shake 0.3s ease;}
/* secure badge */ /* footer */
.secure-badge{ .lc-footer{
display:flex;align-items:center;justify-content:center;gap:6px; display:flex;align-items:center;justify-content:center;gap:6px;
margin-top:24px;font-size:11px;color:#334155; margin-top:24px;font-size:11px;color:#94a3b8;
} }
.secure-badge .dot{width:6px;height:6px;border-radius:50%;background:#16a34a;box-shadow:0 0 6px #16a34a;} .lc-footer svg{opacity:0.5;}
/* spinner */ /* spinner */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.25);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;} .spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;animation:spin 0.65s linear infinite;vertical-align:middle;margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg)}} @keyframes spin{to{transform:rotate(360deg)}}
/* ═══════════════════════════════════════════ /* ═══════════════════════════ DASHBOARD ═══════════════════════════ */
DASHBOARD
═══════════════════════════════════════════ */
#dashboard{display:none} #dashboard{display:none}
.topbar{background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 100%);padding:16px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.topbar-title{font-size:18px;font-weight:900;color:#fff} /* topbar */
.topbar-sub{font-size:13px;color:rgba(255,255,255,0.65);margin-top:2px} .topbar{
.logout-btn{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);border-radius:8px;color:#fff;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer} background:#fff;border-bottom:1px solid #e2e8f0;
.logout-btn:hover{background:rgba(255,255,255,0.2)} padding:0 32px;height:60px;
.content{max-width:960px;margin:0 auto;padding:32px 24px} display:flex;align-items:center;justify-content:space-between;
.add-card{background:#1e293b;border:1px solid #334155;border-radius:14px;padding:24px 28px;margin-bottom:28px} position:sticky;top:0;z-index:100;
.add-card h3{font-size:15px;font-weight:800;color:#f1f5f9;margin-bottom:18px} box-shadow:0 1px 3px rgba(0,0,0,0.06);
.form-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end;flex-wrap:wrap} }
@media(max-width:700px){.form-row{grid-template-columns:1fr}} .topbar-left{display:flex;align-items:center;gap:12px;}
.form-row .field{margin-bottom:0} .topbar-logo{
.field{margin-bottom:16px} width:36px;height:36px;background:linear-gradient(135deg,#2563eb,#4f46e5);
.field label{display:block;font-size:12px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px} border-radius:10px;display:flex;align-items:center;justify-content:center;
.field input{width:100%;background:#0f172a;border:1px solid #334155;border-radius:8px;padding:11px 14px;color:#f1f5f9;font-size:14px;font-family:inherit;outline:none;transition:border-color 0.15s} font-size:18px;
.field input:focus{border-color:#2563eb} }
.btn-add{background:linear-gradient(135deg,#15803d,#16a34a);border:none;border-radius:8px;color:#fff;padding:11px 20px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit} .topbar-title{font-size:16px;font-weight:800;color:#0f172a;letter-spacing:-0.3px;}
.btn-add:hover{opacity:0.9} .topbar-sub{font-size:12px;color:#94a3b8;margin-top:1px;}
.success-msg{background:rgba(22,163,74,0.1);border:1px solid rgba(22,163,74,0.3);border-radius:8px;padding:10px 14px;font-size:13px;color:#4ade80;margin-top:12px;display:none} .topbar-right{display:flex;align-items:center;gap:12px;}
.err-msg-dash{background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.3);border-radius:8px;padding:10px 14px;font-size:13px;color:#f87171;margin-top:12px;display:none} .topbar-badge{
.shops-card{background:#1e293b;border:1px solid #334155;border-radius:14px;overflow:hidden} background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;
.shops-card-header{padding:18px 24px;border-bottom:1px solid #334155;display:flex;align-items:center;justify-content:space-between} padding:3px 10px;font-size:11px;font-weight:700;color:#2563eb;
.shops-card-header h3{font-size:15px;font-weight:800;color:#f1f5f9} }
.count-badge{background:#1e3a5f;border:1px solid #2563eb;border-radius:20px;padding:3px 12px;font-size:12px;font-weight:700;color:#60a5fa} .logout-btn{
table{width:100%;border-collapse:collapse} background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;
th{background:#0f172a;padding:11px 16px;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;text-align:left} color:#374151;padding:7px 14px;font-size:13px;font-weight:600;
td{padding:13px 16px;font-size:13px;border-top:1px solid #334155;vertical-align:middle} cursor:pointer;font-family:inherit;transition:background 0.12s,border-color 0.12s;
tr:hover td{background:rgba(255,255,255,0.02)} }
.shop-name{font-weight:700;color:#f1f5f9;font-size:14px} .logout-btn:hover{background:#f1f5f9;border-color:#cbd5e1;}
.note-text{color:#64748b;font-style:italic}
.tag{display:inline-block;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700} /* content */
.tag-ok{background:rgba(22,163,74,0.15);color:#4ade80;border:1px solid rgba(22,163,74,0.3)} .content{max-width:1000px;margin:0 auto;padding:32px 24px;}
.tag-exp{background:rgba(220,38,38,0.12);color:#f87171;border:1px solid rgba(220,38,38,0.25)}
.tag-perm{background:rgba(59,130,246,0.12);color:#60a5fa;border:1px solid rgba(59,130,246,0.25)} /* page header inside dashboard */
.date-text{color:#94a3b8;font-size:12px} .page-header{margin-bottom:24px;}
.btn-del{background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.25);border-radius:6px;color:#f87171;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit} .page-header h2{font-size:20px;font-weight:800;color:#0f172a;letter-spacing:-0.4px;}
.btn-del:hover{background:rgba(220,38,38,0.2)} .page-header p{font-size:13px;color:#64748b;margin-top:4px;}
.empty-state{padding:48px;text-align:center;color:#475569}
.empty-state .icon{font-size:36px;margin-bottom:12px} /* add card */
.add-card{
background:#fff;border:1px solid #e2e8f0;border-radius:14px;
padding:24px 28px;margin-bottom:24px;
box-shadow:0 1px 3px rgba(0,0,0,0.05);
}
.add-card-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.add-card-icon{
width:36px;height:36px;background:#eff6ff;border-radius:9px;
display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;
}
.add-card h3{font-size:15px;font-weight:700;color:#0f172a;}
.add-card .sub{font-size:12px;color:#94a3b8;margin-top:1px;}
.form-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end;}
@media(max-width:720px){.form-row{grid-template-columns:1fr}}
.field{margin-bottom:0;}
.field label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:6px;}
.field input{
width:100%;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:9px;
padding:10px 13px;color:#0f172a;font-size:13px;font-family:inherit;
outline:none;transition:border-color 0.15s,box-shadow 0.15s,background 0.15s;
}
.field input:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,0.1);}
.field input::placeholder{color:#b0b8c4;}
.btn-add{
background:#2563eb;border:none;border-radius:9px;color:#fff;
padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;
white-space:nowrap;font-family:inherit;
box-shadow:0 1px 3px rgba(37,99,235,0.25);transition:background 0.12s,transform 0.1s;
}
.btn-add:hover{background:#1d4ed8;transform:translateY(-1px);}
.btn-add:active{transform:none;}
.success-msg{
background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;
padding:10px 14px;font-size:13px;color:#15803d;font-weight:600;
margin-top:14px;display:none;
}
.err-msg-dash{
background:#fef2f2;border:1px solid #fecaca;border-radius:8px;
padding:10px 14px;font-size:13px;color:#dc2626;
margin-top:14px;display:none;
}
/* shops card */
.shops-card{
background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;
box-shadow:0 1px 3px rgba(0,0,0,0.05);
}
.shops-card-header{
padding:16px 24px;border-bottom:1px solid #f1f5f9;
display:flex;align-items:center;justify-content:space-between;
background:#fafafa;
}
.shops-card-header h3{font-size:14px;font-weight:700;color:#0f172a;}
.count-badge{
background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;
padding:3px 10px;font-size:11px;font-weight:700;color:#2563eb;
}
table{width:100%;border-collapse:collapse;}
th{
background:#fafafa;padding:10px 20px;
font-size:11px;font-weight:700;color:#6b7280;
text-transform:uppercase;letter-spacing:0.06em;text-align:left;
border-bottom:1px solid #f1f5f9;
}
td{padding:14px 20px;font-size:13px;border-top:1px solid #f8fafc;vertical-align:middle;color:#374151;}
tr:hover td{background:#fafcff;}
.shop-name{font-weight:700;color:#0f172a;font-size:14px;}
.shop-domain{font-size:11px;color:#94a3b8;margin-top:2px;font-family:monospace;}
.note-text{color:#94a3b8;font-size:12px;font-style:italic;}
.tag{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;}
.tag-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.tag-ok{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;}
.tag-ok .tag-dot{background:#16a34a;}
.tag-exp{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;}
.tag-exp .tag-dot{background:#dc2626;}
.tag-perm{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;}
.tag-perm .tag-dot{background:#2563eb;}
.date-cell{font-size:12px;color:#6b7280;}
.btn-del{
background:#fef2f2;border:1px solid #fecaca;border-radius:6px;
color:#dc2626;padding:5px 12px;font-size:12px;font-weight:600;
cursor:pointer;font-family:inherit;transition:background 0.12s;
}
.btn-del:hover{background:#fee2e2;}
.empty-state{padding:56px 24px;text-align:center;}
.empty-state .icon{font-size:38px;margin-bottom:12px;}
.empty-state p{font-size:14px;color:#94a3b8;font-weight:500;}
.empty-state small{font-size:12px;color:#b0b8c4;display:block;margin-top:4px;}
.loading-row{padding:32px;text-align:center;}
.spinner-dark{display:inline-block;width:20px;height:20px;border:2px solid #e2e8f0;border-top-color:#2563eb;border-radius:50%;animation:spin 0.7s linear infinite;}
</style> </style>
</head> </head>
<body> <body>
<!-- background blobs (login only) --> <!-- ═══════════════════════════ LOGIN ═══════════════════════════ -->
<div class="login-bg" id="login-bg">
<div class="blob blob1"></div>
<div class="blob blob2"></div>
<div class="blob blob3"></div>
</div>
<!-- ══════════════════════════════════════
LOGIN SCREEN
═══════════════════════════════════════ -->
<div id="login-screen"> <div id="login-screen">
<!-- Left branding panel --> <!-- Left branding panel -->
<div class="login-left"> <div class="login-left">
<div class="brand-icon">🛡️</div> <div class="ll-logo">
<div class="brand-name">Data4Autos</div> <div class="ll-icon">🛡️</div>
<div class="brand-tagline">Secure admin portal for managing free-access shops on the Turn14 integration platform.</div> <div class="ll-brand">Data4Autos <span>Admin Portal</span></div>
<div class="feature-list"> </div>
<div class="feature-item"><div class="feature-dot"></div><span>Grant free access to any Shopify store</span></div> <div class="ll-heading">Manage <em>free access</em><br>with confidence</div>
<div class="feature-item"><div class="feature-dot"></div><span>Set custom expiry dates per shop</span></div> <div class="ll-desc">Grant, revoke, and schedule free-access windows for any Shopify store — no code changes, no redeployment needed.</div>
<div class="feature-item"><div class="feature-dot"></div><span>Changes take effect instantly</span></div> <div class="ll-features">
<div class="feature-item"><div class="feature-dot"></div><span>No redeployment required</span></div> <div class="ll-feat"><div class="ll-feat-check">✓</div><span>Grant free access to any Shopify store</span></div>
<div class="ll-feat"><div class="ll-feat-check">✓</div><span>Set custom expiry dates per shop</span></div>
<div class="ll-feat"><div class="ll-feat-check">✓</div><span>Changes take effect instantly</span></div>
<div class="ll-feat"><div class="ll-feat-check">✓</div><span>Persisted to disk — survives restarts</span></div>
</div> </div>
</div> </div>
<!-- Right login panel --> <!-- Right login panel -->
<div class="login-right"> <div class="login-right">
<div class="login-card"> <div class="login-card">
<div class="card-header"> <div class="lc-top">
<div class="card-mini-logo"><span>D4A Admin</span></div> <div class="lc-eyebrow"><div class="status-dot"></div>Secure Portal</div>
<div class="card-title">Welcome back</div> <div class="lc-title">Welcome back</div>
<div class="card-sub">Sign in to your admin portal</div> <div class="lc-sub">Sign in to manage shop access permissions.</div>
</div> </div>
<div class="inp-wrap"> <div class="lc-divider"></div>
<label>Username</label>
<div class="inp-inner"> <div class="lc-field">
<span class="inp-icon">👤</span> <label for="inp-user">Username</label>
<input type="text" id="inp-user" placeholder="Enter your username" autocomplete="username"/> <div class="lc-inp-wrap">
<span class="lc-inp-icon">👤</span>
<input type="text" id="inp-user" placeholder="d4a-admin" autocomplete="username"/>
</div> </div>
</div> </div>
<div class="inp-wrap"> <div class="lc-field">
<label>Password</label> <label for="inp-pass">Password</label>
<div class="inp-inner"> <div class="lc-inp-wrap">
<span class="inp-icon">🔑</span> <span class="lc-inp-icon">🔒</span>
<input type="password" id="inp-pass" placeholder="Enter your password" autocomplete="current-password"/> <input type="password" id="inp-pass" placeholder="••••••••••••" autocomplete="current-password"/>
<button class="eye-btn" id="eye-btn" onclick="togglePass()" type="button" tabindex="-1">👁</button> <button class="lc-eye" id="eye-btn" onclick="togglePass()" type="button" tabindex="-1">👁</button>
</div> </div>
</div> </div>
@ -385,40 +416,57 @@ function adminHtml() {
<div class="err-msg" id="login-err"></div> <div class="err-msg" id="login-err"></div>
<div class="secure-badge"> <div class="lc-footer">
<div class="dot"></div> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
<span>Secure connection · Session expires in 8 hours</span> Session secured · Expires in 8 hours
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- ── DASHBOARD ── --> <!-- ═══════════════════════════ DASHBOARD ═══════════════════════════ -->
<div id="dashboard"> <div id="dashboard">
<div class="topbar"> <div class="topbar">
<div> <div class="topbar-left">
<div class="topbar-title">🛡️ Data4Autos — Free Access Manager</div> <div class="topbar-logo">🛡️</div>
<div class="topbar-sub">Manage shops with free / bypassed subscription access</div> <div>
<div class="topbar-title">Data4Autos Admin</div>
<div class="topbar-sub">Free Access Manager</div>
</div>
</div>
<div class="topbar-right">
<span class="topbar-badge" id="shops-count">0 shops</span>
<button class="logout-btn" onclick="doLogout()">Sign Out</button>
</div> </div>
<button class="logout-btn" onclick="doLogout()">Sign Out</button>
</div> </div>
<div class="content"> <div class="content">
<div class="page-header">
<h2>Whitelisted Shops</h2>
<p>Shops listed here bypass subscription checks and get full app access.</p>
</div>
<!-- Add shop form --> <!-- Add shop form -->
<div class="add-card"> <div class="add-card">
<h3>➕ Grant Free Access to a Shop</h3> <div class="add-card-header">
<div class="add-card-icon">➕</div>
<div>
<h3>Grant Free Access</h3>
<div class="sub">Add a shop domain and optional expiry date.</div>
</div>
</div>
<div class="form-row"> <div class="form-row">
<div class="field"> <div class="field">
<label>Shop Domain</label> <label>Shop Domain</label>
<input type="text" id="inp-shop" placeholder="yourstore.myshopify.com"/> <input type="text" id="inp-shop" placeholder="yourstore.myshopify.com"/>
</div> </div>
<div class="field"> <div class="field">
<label>Expiry Date <span style="color:#475569;font-weight:400">(leave blank = permanent)</span></label> <label>Expiry Date <span style="color:#b0b8c4;font-weight:400">(blank = permanent)</span></label>
<input type="date" id="inp-expires"/> <input type="date" id="inp-expires"/>
</div> </div>
<div class="field"> <div class="field">
<label>Note <span style="color:#475569;font-weight:400">(optional)</span></label> <label>Note <span style="color:#b0b8c4;font-weight:400">(optional)</span></label>
<input type="text" id="inp-note" placeholder="e.g. Partner shop"/> <input type="text" id="inp-note" placeholder="e.g. Partner shop"/>
</div> </div>
<button class="btn-add" onclick="doAddShop()">Add Shop</button> <button class="btn-add" onclick="doAddShop()">Add Shop</button>
@ -430,11 +478,11 @@ function adminHtml() {
<!-- Shops table --> <!-- Shops table -->
<div class="shops-card"> <div class="shops-card">
<div class="shops-card-header"> <div class="shops-card-header">
<h3>🏪 Whitelisted Shops</h3> <h3>Active Whitelist</h3>
<span class="count-badge" id="shops-count">0 shops</span> <span class="count-badge" id="shops-count-table">0 shops</span>
</div> </div>
<div id="shops-table-wrap"> <div id="shops-table-wrap">
<div class="empty-state"><div class="spinner"></div></div> <div class="loading-row"><div class="spinner-dark"></div></div>
</div> </div>
</div> </div>
@ -493,7 +541,6 @@ async function doLogout() {
await api('POST', '/logout'); await api('POST', '/logout');
document.getElementById('dashboard').style.display = 'none'; document.getElementById('dashboard').style.display = 'none';
document.getElementById('login-screen').style.display = 'flex'; document.getElementById('login-screen').style.display = 'flex';
document.getElementById('login-bg').style.display = 'block';
document.getElementById('inp-user').value = ''; document.getElementById('inp-user').value = '';
document.getElementById('inp-pass').value = ''; document.getElementById('inp-pass').value = '';
} }
@ -501,7 +548,6 @@ async function doLogout() {
// ── SHOW DASHBOARD ────────────────────────────────────────────────────────── // ── SHOW DASHBOARD ──────────────────────────────────────────────────────────
function showDashboard() { function showDashboard() {
document.getElementById('login-screen').style.display = 'none'; document.getElementById('login-screen').style.display = 'none';
document.getElementById('login-bg').style.display = 'none';
document.getElementById('dashboard').style.display = 'block'; document.getElementById('dashboard').style.display = 'block';
loadShops(); loadShops();
} }
@ -513,26 +559,28 @@ async function loadShops() {
if (!r.ok) { wrap.innerHTML = '<div class="empty-state"><div>Failed to load shops</div></div>'; return; } if (!r.ok) { wrap.innerHTML = '<div class="empty-state"><div>Failed to load shops</div></div>'; return; }
const shops = r.data.shops || []; const shops = r.data.shops || [];
document.getElementById('shops-count').textContent = shops.length + ' shop' + (shops.length !== 1 ? 's' : ''); const countLabel = shops.length + ' shop' + (shops.length !== 1 ? 's' : '');
document.getElementById('shops-count').textContent = countLabel;
document.getElementById('shops-count-table').textContent = countLabel;
if (shops.length === 0) { if (shops.length === 0) {
wrap.innerHTML = '<div class="empty-state"><div class="icon">🏪</div><div>No shops added yet.<br>Use the form above to grant free access.</div></div>'; wrap.innerHTML = '<div class="empty-state"><div class="icon">🏪</div><p>No shops added yet.</p><small>Use the form above to grant free access to a shop.</small></div>';
return; return;
} }
const rows = shops.map(s => { const rows = shops.map(s => {
const statusTag = s.expired const statusTag = s.expired
? '<span class="tag tag-exp">Expired</span>' ? '<span class="tag tag-exp"><span class="tag-dot"></span>Expired</span>'
: s.permanent : s.permanent
? '<span class="tag tag-perm">Permanent</span>' ? '<span class="tag tag-perm"><span class="tag-dot"></span>Permanent</span>'
: '<span class="tag tag-ok">Active</span>'; : '<span class="tag tag-ok"><span class="tag-dot"></span>Active</span>';
const expiryDisplay = s.expiresAt const expiryDisplay = s.expiresAt
? '<span class="date-text">' + new Date(s.expiresAt).toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'}) + '</span>' ? '<span class="date-cell">' + new Date(s.expiresAt).toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'}) + '</span>'
: '<span style="color:#475569;font-size:12px">Never</span>'; : '<span class="date-cell" style="color:#b0b8c4">Never</span>';
const grantedDisplay = s.grantedAt const grantedDisplay = s.grantedAt
? '<span class="date-text">' + new Date(s.grantedAt).toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'}) + '</span>' ? '<span class="date-cell">' + new Date(s.grantedAt).toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'}) + '</span>'
: '—'; : '—';
return \`<tr> return \`<tr>