redesign admin panel with full light theme (Stripe/Linear aesthetic)
- 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:
parent
0c52aeb1aa
commit
4be12dc9d4
@ -96,286 +96,317 @@ function adminHtml() {
|
||||
<style>
|
||||
@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}
|
||||
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 SCREEN
|
||||
═══════════════════════════════════════════ */
|
||||
#login-screen{
|
||||
display:flex;align-items:stretch;min-height:100vh;
|
||||
background:#020617;
|
||||
}
|
||||
/* ═══════════════════════════ LOGIN ═══════════════════════════ */
|
||||
#login-screen{display:flex;align-items:stretch;min-height:100vh;}
|
||||
|
||||
/* animated background blobs */
|
||||
.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 */
|
||||
/* Left — vibrant blue panel */
|
||||
.login-left{
|
||||
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||||
padding:60px 48px;position:relative;z-index:1;
|
||||
flex:1;display:flex;flex-direction:column;justify-content:center;
|
||||
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}}
|
||||
|
||||
.brand-icon{
|
||||
width:88px;height:88px;
|
||||
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;
|
||||
@media(max-width:860px){.login-left{display:none}}
|
||||
.login-left::before{
|
||||
content:'';position:absolute;width:500px;height:500px;border-radius:50%;
|
||||
background:rgba(255,255,255,0.06);top:-160px;right:-120px;
|
||||
}
|
||||
@keyframes iconPulse{
|
||||
0%,100%{box-shadow:0 0 0 1px rgba(59,130,246,0.3),0 0 40px rgba(59,130,246,0.25);}
|
||||
50%{box-shadow:0 0 0 1px rgba(59,130,246,0.5),0 0 60px rgba(59,130,246,0.4);}
|
||||
.login-left::after{
|
||||
content:'';position:absolute;width:320px;height:320px;border-radius:50%;
|
||||
background:rgba(255,255,255,0.05);bottom:-80px;left:-60px;
|
||||
}
|
||||
|
||||
.brand-name{
|
||||
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;
|
||||
.ll-logo{
|
||||
display:flex;align-items:center;gap:14px;margin-bottom:52px;position:relative;z-index:1;
|
||||
}
|
||||
.brand-tagline{
|
||||
font-size:14px;color:#475569;text-align:center;max-width:300px;line-height:1.7;
|
||||
.ll-icon{
|
||||
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;
|
||||
}
|
||||
|
||||
.feature-list{
|
||||
margin-top:44px;display:flex;flex-direction:column;gap:14px;width:100%;max-width:320px;
|
||||
}
|
||||
.feature-item{
|
||||
.ll-brand{font-size:20px;font-weight:800;color:#fff;letter-spacing:-0.3px;}
|
||||
.ll-brand span{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,0.6);letter-spacing:0;margin-top:1px;}
|
||||
.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;}
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
.feature-dot{
|
||||
width:8px;height:8px;border-radius:50%;background:#3b82f6;flex-shrink:0;
|
||||
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;
|
||||
.ll-feat-check{
|
||||
width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,0.15);
|
||||
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{
|
||||
width:100%;max-width:400px;
|
||||
background:rgba(15,23,42,0.7);
|
||||
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
|
||||
border:1px solid rgba(255,255,255,0.08);
|
||||
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;
|
||||
/* Right — white form panel */
|
||||
.login-right{
|
||||
width:500px;flex-shrink:0;background:#fff;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
padding:48px 40px;
|
||||
}
|
||||
@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;}
|
||||
.card-mini-logo{
|
||||
display:inline-flex;align-items:center;gap:8px;
|
||||
background:linear-gradient(135deg,rgba(30,64,175,0.6),rgba(37,99,235,0.6));
|
||||
border:1px solid rgba(59,130,246,0.3);
|
||||
border-radius:10px;padding:6px 14px;margin-bottom:20px;
|
||||
.lc-top{margin-bottom:36px;}
|
||||
.lc-eyebrow{
|
||||
display:inline-flex;align-items:center;gap:6px;
|
||||
background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;
|
||||
padding:4px 12px;font-size:11px;font-weight:700;color:#1d4ed8;
|
||||
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;}
|
||||
.card-title{font-size:22px;font-weight:800;color:#f8fafc;letter-spacing:-0.5px;margin-bottom:6px;}
|
||||
.card-sub{font-size:13px;color:#475569;}
|
||||
.lc-eyebrow .status-dot{width:6px;height:6px;border-radius:50%;background:#16a34a;}
|
||||
.lc-title{font-size:26px;font-weight:900;color:#0f172a;letter-spacing:-0.8px;margin-bottom:6px;}
|
||||
.lc-sub{font-size:14px;color:#64748b;line-height:1.5;}
|
||||
|
||||
/* form fields */
|
||||
.inp-wrap{position:relative;margin-bottom:18px;}
|
||||
.inp-wrap label{
|
||||
display:block;font-size:11px;font-weight:700;
|
||||
color:#64748b;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;
|
||||
/* fields */
|
||||
.lc-field{margin-bottom:20px;}
|
||||
.lc-field label{
|
||||
display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:7px;
|
||||
}
|
||||
.inp-inner{position:relative;}
|
||||
.inp-icon{
|
||||
position:absolute;left:14px;top:50%;transform:translateY(-50%);
|
||||
font-size:15px;color:#475569;pointer-events:none;line-height:1;
|
||||
.lc-inp-wrap{position:relative;}
|
||||
.lc-inp-icon{
|
||||
position:absolute;left:13px;top:50%;transform:translateY(-50%);
|
||||
width:18px;height:18px;display:flex;align-items:center;justify-content:center;
|
||||
color:#9ca3af;font-size:14px;pointer-events:none;
|
||||
}
|
||||
.inp-wrap input{
|
||||
width:100%;
|
||||
background:rgba(2,6,23,0.6);
|
||||
border:1px solid rgba(255,255,255,0.08);
|
||||
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;
|
||||
.lc-field input{
|
||||
width:100%;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;
|
||||
padding:12px 40px 12px 40px;color:#0f172a;font-size:14px;font-family:inherit;
|
||||
outline:none;transition:border-color 0.15s,box-shadow 0.15s,background 0.15s;
|
||||
}
|
||||
.inp-wrap input::placeholder{color:#334155;}
|
||||
.inp-wrap input:focus{
|
||||
border-color:rgba(59,130,246,0.6);
|
||||
background:rgba(2,6,23,0.8);
|
||||
box-shadow:0 0 0 3px rgba(59,130,246,0.12);
|
||||
.lc-field input::placeholder{color:#b0b8c4;}
|
||||
.lc-field input:focus{
|
||||
border-color:#2563eb;background:#fff;
|
||||
box-shadow:0 0 0 3px rgba(37,99,235,0.1);
|
||||
}
|
||||
.eye-btn{
|
||||
position:absolute;right:13px;top:50%;transform:translateY(-50%);
|
||||
background:none;border:none;color:#475569;cursor:pointer;
|
||||
font-size:15px;padding:2px;line-height:1;transition:color 0.15s;
|
||||
.lc-eye{
|
||||
position:absolute;right:12px;top:50%;transform:translateY(-50%);
|
||||
background:none;border:none;cursor:pointer;color:#9ca3af;font-size:14px;
|
||||
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{
|
||||
width:100%;margin-top:6px;
|
||||
padding:13px;border:none;border-radius:10px;
|
||||
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;
|
||||
width:100%;padding:13px 20px;border:none;border-radius:10px;
|
||||
background:#2563eb;color:#fff;font-size:15px;font-weight:700;font-family:inherit;
|
||||
cursor:pointer;position:relative;overflow:hidden;
|
||||
transition:transform 0.15s,box-shadow 0.2s,background-position 0.4s;
|
||||
box-shadow:0 4px 20px rgba(37,99,235,0.35);
|
||||
transition:background 0.15s,transform 0.1s,box-shadow 0.15s;
|
||||
box-shadow:0 1px 3px rgba(37,99,235,0.3),0 4px 12px rgba(37,99,235,0.2);
|
||||
}
|
||||
.btn-login::after{
|
||||
content:'';position:absolute;inset:0;
|
||||
background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.18) 50%,transparent 60%);
|
||||
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;}
|
||||
.btn-login:hover{background:#1d4ed8;transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,99,235,0.35);}
|
||||
.btn-login:active{transform:none;background:#1e40af;}
|
||||
.btn-login:disabled{background:#93c5fd;cursor:not-allowed;transform:none;box-shadow:none;}
|
||||
|
||||
/* error */
|
||||
.err-msg{
|
||||
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: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);}
|
||||
background:#fef2f2;border:1px solid #fecaca;border-radius:8px;
|
||||
padding:10px 14px;font-size:13px;color:#dc2626;margin-top:14px;display:none;
|
||||
}
|
||||
@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 */
|
||||
.secure-badge{
|
||||
/* footer */
|
||||
.lc-footer{
|
||||
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{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)}}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
DASHBOARD
|
||||
═══════════════════════════════════════════ */
|
||||
/* ═══════════════════════════ DASHBOARD ═══════════════════════════ */
|
||||
#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-sub{font-size:13px;color:rgba(255,255,255,0.65);margin-top:2px}
|
||||
.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}
|
||||
.logout-btn:hover{background:rgba(255,255,255,0.2)}
|
||||
.content{max-width:960px;margin:0 auto;padding:32px 24px}
|
||||
.add-card{background:#1e293b;border:1px solid #334155;border-radius:14px;padding:24px 28px;margin-bottom:28px}
|
||||
.add-card h3{font-size:15px;font-weight:800;color:#f1f5f9;margin-bottom:18px}
|
||||
.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}}
|
||||
.form-row .field{margin-bottom:0}
|
||||
.field{margin-bottom:16px}
|
||||
.field label{display:block;font-size:12px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px}
|
||||
.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}
|
||||
.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}
|
||||
.btn-add:hover{opacity:0.9}
|
||||
.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}
|
||||
.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}
|
||||
.shops-card{background:#1e293b;border:1px solid #334155;border-radius:14px;overflow:hidden}
|
||||
.shops-card-header{padding:18px 24px;border-bottom:1px solid #334155;display:flex;align-items:center;justify-content:space-between}
|
||||
.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}
|
||||
table{width:100%;border-collapse:collapse}
|
||||
th{background:#0f172a;padding:11px 16px;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;text-align:left}
|
||||
td{padding:13px 16px;font-size:13px;border-top:1px solid #334155;vertical-align:middle}
|
||||
tr:hover td{background:rgba(255,255,255,0.02)}
|
||||
.shop-name{font-weight:700;color:#f1f5f9;font-size:14px}
|
||||
.note-text{color:#64748b;font-style:italic}
|
||||
.tag{display:inline-block;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700}
|
||||
.tag-ok{background:rgba(22,163,74,0.15);color:#4ade80;border:1px solid rgba(22,163,74,0.3)}
|
||||
.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)}
|
||||
.date-text{color:#94a3b8;font-size:12px}
|
||||
.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}
|
||||
.btn-del:hover{background:rgba(220,38,38,0.2)}
|
||||
.empty-state{padding:48px;text-align:center;color:#475569}
|
||||
.empty-state .icon{font-size:36px;margin-bottom:12px}
|
||||
|
||||
/* topbar */
|
||||
.topbar{
|
||||
background:#fff;border-bottom:1px solid #e2e8f0;
|
||||
padding:0 32px;height:60px;
|
||||
display:flex;align-items:center;justify-content:space-between;
|
||||
position:sticky;top:0;z-index:100;
|
||||
box-shadow:0 1px 3px rgba(0,0,0,0.06);
|
||||
}
|
||||
.topbar-left{display:flex;align-items:center;gap:12px;}
|
||||
.topbar-logo{
|
||||
width:36px;height:36px;background:linear-gradient(135deg,#2563eb,#4f46e5);
|
||||
border-radius:10px;display:flex;align-items:center;justify-content:center;
|
||||
font-size:18px;
|
||||
}
|
||||
.topbar-title{font-size:16px;font-weight:800;color:#0f172a;letter-spacing:-0.3px;}
|
||||
.topbar-sub{font-size:12px;color:#94a3b8;margin-top:1px;}
|
||||
.topbar-right{display:flex;align-items:center;gap:12px;}
|
||||
.topbar-badge{
|
||||
background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;
|
||||
padding:3px 10px;font-size:11px;font-weight:700;color:#2563eb;
|
||||
}
|
||||
.logout-btn{
|
||||
background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;
|
||||
color:#374151;padding:7px 14px;font-size:13px;font-weight:600;
|
||||
cursor:pointer;font-family:inherit;transition:background 0.12s,border-color 0.12s;
|
||||
}
|
||||
.logout-btn:hover{background:#f1f5f9;border-color:#cbd5e1;}
|
||||
|
||||
/* content */
|
||||
.content{max-width:1000px;margin:0 auto;padding:32px 24px;}
|
||||
|
||||
/* page header inside dashboard */
|
||||
.page-header{margin-bottom:24px;}
|
||||
.page-header h2{font-size:20px;font-weight:800;color:#0f172a;letter-spacing:-0.4px;}
|
||||
.page-header p{font-size:13px;color:#64748b;margin-top:4px;}
|
||||
|
||||
/* 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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- background blobs (login only) -->
|
||||
<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
|
||||
═══════════════════════════════════════ -->
|
||||
<!-- ═══════════════════════════ LOGIN ═══════════════════════════ -->
|
||||
<div id="login-screen">
|
||||
|
||||
<!-- Left branding panel -->
|
||||
<div class="login-left">
|
||||
<div class="brand-icon">🛡️</div>
|
||||
<div class="brand-name">Data4Autos</div>
|
||||
<div class="brand-tagline">Secure admin portal for managing free-access shops on the Turn14 integration platform.</div>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><div class="feature-dot"></div><span>Grant free access to any Shopify store</span></div>
|
||||
<div class="feature-item"><div class="feature-dot"></div><span>Set custom expiry dates per shop</span></div>
|
||||
<div class="feature-item"><div class="feature-dot"></div><span>Changes take effect instantly</span></div>
|
||||
<div class="feature-item"><div class="feature-dot"></div><span>No redeployment required</span></div>
|
||||
<div class="ll-logo">
|
||||
<div class="ll-icon">🛡️</div>
|
||||
<div class="ll-brand">Data4Autos <span>Admin Portal</span></div>
|
||||
</div>
|
||||
<div class="ll-heading">Manage <em>free access</em><br>with confidence</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="ll-features">
|
||||
<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>
|
||||
|
||||
<!-- Right login panel -->
|
||||
<div class="login-right">
|
||||
<div class="login-card">
|
||||
<div class="card-header">
|
||||
<div class="card-mini-logo"><span>D4A Admin</span></div>
|
||||
<div class="card-title">Welcome back</div>
|
||||
<div class="card-sub">Sign in to your admin portal</div>
|
||||
<div class="lc-top">
|
||||
<div class="lc-eyebrow"><div class="status-dot"></div>Secure Portal</div>
|
||||
<div class="lc-title">Welcome back</div>
|
||||
<div class="lc-sub">Sign in to manage shop access permissions.</div>
|
||||
</div>
|
||||
|
||||
<div class="inp-wrap">
|
||||
<label>Username</label>
|
||||
<div class="inp-inner">
|
||||
<span class="inp-icon">👤</span>
|
||||
<input type="text" id="inp-user" placeholder="Enter your username" autocomplete="username"/>
|
||||
<div class="lc-divider"></div>
|
||||
|
||||
<div class="lc-field">
|
||||
<label for="inp-user">Username</label>
|
||||
<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 class="inp-wrap">
|
||||
<label>Password</label>
|
||||
<div class="inp-inner">
|
||||
<span class="inp-icon">🔑</span>
|
||||
<input type="password" id="inp-pass" placeholder="Enter your password" autocomplete="current-password"/>
|
||||
<button class="eye-btn" id="eye-btn" onclick="togglePass()" type="button" tabindex="-1">👁</button>
|
||||
<div class="lc-field">
|
||||
<label for="inp-pass">Password</label>
|
||||
<div class="lc-inp-wrap">
|
||||
<span class="lc-inp-icon">🔒</span>
|
||||
<input type="password" id="inp-pass" placeholder="••••••••••••" autocomplete="current-password"/>
|
||||
<button class="lc-eye" id="eye-btn" onclick="togglePass()" type="button" tabindex="-1">👁</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -385,40 +416,57 @@ function adminHtml() {
|
||||
|
||||
<div class="err-msg" id="login-err"></div>
|
||||
|
||||
<div class="secure-badge">
|
||||
<div class="dot"></div>
|
||||
<span>Secure connection · Session expires in 8 hours</span>
|
||||
<div class="lc-footer">
|
||||
<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>
|
||||
Session secured · Expires in 8 hours
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── DASHBOARD ── -->
|
||||
<!-- ═══════════════════════════ DASHBOARD ═══════════════════════════ -->
|
||||
<div id="dashboard">
|
||||
|
||||
<div class="topbar">
|
||||
<div>
|
||||
<div class="topbar-title">🛡️ Data4Autos — Free Access Manager</div>
|
||||
<div class="topbar-sub">Manage shops with free / bypassed subscription access</div>
|
||||
<div class="topbar-left">
|
||||
<div class="topbar-logo">🛡️</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>
|
||||
<button class="logout-btn" onclick="doLogout()">Sign Out</button>
|
||||
</div>
|
||||
|
||||
<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 -->
|
||||
<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="field">
|
||||
<label>Shop Domain</label>
|
||||
<input type="text" id="inp-shop" placeholder="yourstore.myshopify.com"/>
|
||||
</div>
|
||||
<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"/>
|
||||
</div>
|
||||
<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"/>
|
||||
</div>
|
||||
<button class="btn-add" onclick="doAddShop()">Add Shop</button>
|
||||
@ -430,11 +478,11 @@ function adminHtml() {
|
||||
<!-- Shops table -->
|
||||
<div class="shops-card">
|
||||
<div class="shops-card-header">
|
||||
<h3>🏪 Whitelisted Shops</h3>
|
||||
<span class="count-badge" id="shops-count">0 shops</span>
|
||||
<h3>Active Whitelist</h3>
|
||||
<span class="count-badge" id="shops-count-table">0 shops</span>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@ -493,7 +541,6 @@ 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 = '';
|
||||
}
|
||||
@ -501,7 +548,6 @@ 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();
|
||||
}
|
||||
@ -513,26 +559,28 @@ async function loadShops() {
|
||||
if (!r.ok) { wrap.innerHTML = '<div class="empty-state"><div>Failed to load shops</div></div>'; return; }
|
||||
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
|
||||
const rows = shops.map(s => {
|
||||
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
|
||||
? '<span class="tag tag-perm">Permanent</span>'
|
||||
: '<span class="tag tag-ok">Active</span>';
|
||||
? '<span class="tag tag-perm"><span class="tag-dot"></span>Permanent</span>'
|
||||
: '<span class="tag tag-ok"><span class="tag-dot"></span>Active</span>';
|
||||
|
||||
const expiryDisplay = s.expiresAt
|
||||
? '<span class="date-text">' + 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">' + new Date(s.expiresAt).toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'}) + '</span>'
|
||||
: '<span class="date-cell" style="color:#b0b8c4">Never</span>';
|
||||
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user