يحتوي قالب المنيو على واجهة مستخدم فريدة وجذابة وبعض الميزات البارزة: طريقة جذابة لعرض المنتجات والإشعارات والتخفيضات، بالإضافة لسهولة إدارة الطلبات، والتكامل مع وسائل الدفع المختلفة، وغيرها من الميزات الرائعة.
<!doctype html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>تجربة لوحة سلة</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://cdn.salla.network/fonts/pingarlt.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap">
<style>
/* ============ tokens — extracted from s.salla.sa ============ */
:root{
--teal-900:#0A3C48; /* top bar */
--teal-800:#004A57; /* active text / headings */
--teal-700:#004956;
--mint:#73FCD8; /* active pill */
--mint-100:#D3F8EC; /* light mint buttons */
--mint-50:#EBFDF6;
--bg:#F7F7F7; /* app background */
--card:#FFFFFF;
--line:#EEEEEE;
--line-2:#E5E7EB;
--ink:#545454; /* base text (real: rgb(84,84,84)) */
--ink-2:#737373; /* secondary (real: rgb(115,115,115)) */
--ink-3:#999999;
--dark:#1F2937;
--success:#2BBF86; --success-bg:#EAF9F3;
--info:#4A81D4; --info-bg:#EDF4FE;
--warn:#C98A2B; --warn-bg:#FDF4E5;
--danger:#E05B5B; --danger-bg:#FDEEEE;
--chart-1:#0C93AB; --chart-2:#D95B28;
--seq-1:#004D5A; --seq-2:#348D9C; --seq-3:#5CA9B5; --seq-4:#95C8D0; --seq-5:#C4E0E4;
--r-sm:10.5px; --r-md:14px; /* real radius scale (3.5px base) */
--font:"PingARLT","PingAR LT","IBM Plex Sans Arabic","Tajawal",system-ui,sans-serif;
--ease:cubic-bezier(.16,1,.3,1);
}
html,body{margin:0;padding:0;background:var(--teal-700);}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;}
*{box-sizing:border-box;}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit;}
::selection{background:var(--mint);color:var(--teal-800);}
.hgi{display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.hgi svg{width:1em;height:1em;display:block;}
.num{font-variant-numeric:tabular-nums;}
/* riyal symbol (new SAR mark) */
.sar{display:inline-block;width:.9em;height:.9em;vertical-align:-.08em;}
.sar path{fill:currentColor;}
/* ============ landing shell ============ */
.shell{
direction:rtl;min-height:100vh;
background:
radial-gradient(880px 460px at 88% -8%, rgba(164,255,229,.13), transparent 60%),
radial-gradient(640px 400px at 6% 108%, rgba(44,242,199,.09), transparent 60%),
var(--teal-700);
padding:64px 20px 84px;display:flex;flex-direction:column;align-items:center;
}
.eyebrow{color:var(--mint);font-size:12px;font-weight:500;letter-spacing:.13em;margin:0 0 14px;display:flex;align-items:center;gap:10px;}
.eyebrow::before,.eyebrow::after{content:"";width:26px;height:1px;background:rgba(164,255,229,.4);}
.hero-t{color:#fff;font-size:clamp(28px,4.6vw,48px);line-height:1.2;font-weight:700;margin:0 0 12px;text-align:center;text-wrap:balance;max-width:20ch;}
.hero-t em{font-style:normal;color:var(--mint);}
.hero-s{color:rgba(255,255,255,.75);font-size:clamp(14px,1.9vw,17px);line-height:1.8;margin:0 0 36px;text-align:center;max-width:56ch;font-weight:400;}
.tourbar{display:flex;align-items:center;gap:13px;margin:0 0 16px;min-height:42px;max-width:1220px;width:100%;justify-content:center;flex-wrap:wrap;}
.cap{background:rgba(255,255,255,.07);border:1px solid rgba(164,255,229,.22);color:#fff;border-radius:999px;padding:9px 20px;font-size:13.5px;font-weight:400;backdrop-filter:blur(6px);opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);}
.cap.show{opacity:1;transform:none;}
.dots{display:flex;align-items:center;gap:9px;}
.dot{width:7px;height:7px;border-radius:50%;padding:0;background:rgba(255,255,255,.26);transition:all .25s;}
.dot.on{background:var(--mint);transform:scale(1.4);}
.playb{display:inline-flex;align-items:center;gap:7px;border:1.5px solid rgba(164,255,229,.5);color:var(--mint);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:500;transition:all .15s;}
.playb:hover{background:var(--mint);color:var(--teal-800);}
/* ============ the window ============ */
.win{width:100%;max-width:1220px;background:var(--bg);border-radius:18px;overflow:hidden;
box-shadow:0 32px 80px rgba(0,20,26,.45);border:1px solid rgba(164,255,229,.14);direction:rtl;}
/* ---- top bar: 70px, #0A3C48, pad 14 ---- */
.hd{background:var(--teal-900);height:70px;display:flex;align-items:center;gap:10px;padding:14px 18px;color:#fff;}
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-inline-end:8px;}
.logo svg{height:38px;width:auto;display:block;}
.nav{display:flex;align-items:center;gap:3.5px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none;}
.nb{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:#fff;font-size:14px;font-weight:500;padding:7px 10.5px;border-radius:10.5px;transition:background .18s,color .18s;line-height:21px;}
.nb .hgi{font-size:21px;}
.nb:hover{background:rgba(255,255,255,.08);}
.nb.on{background:var(--mint);color:var(--teal-800);}
.nb.on .ic-wrap{background:#fff;border-radius:50%;width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;margin:-3px 0;}
.nb.on .hgi{font-size:16px;color:var(--teal-800);}
.hd-side{display:flex;align-items:center;gap:14px;flex-shrink:0;color:rgba(255,255,255,.92);}
.hd-ic{position:relative;font-size:20px;display:inline-flex;padding:2px;}
.hd-ic .bdg{position:absolute;top:-4px;inset-inline-start:-4px;background:#F5554A;color:#fff;font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.store-chip{display:flex;align-items:center;gap:7px;}
.store-ava{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3E9C63,#1E6F44);border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;}
.demo-flag{font-size:10.5px;font-weight:500;color:var(--mint);border:1px dashed rgba(164,255,229,.5);border-radius:999px;padding:3px 10px;white-space:nowrap;}
/* ---- sub bar: 63px white ---- */
.sub{background:#fff;border-bottom:1px solid var(--line);height:56px;display:flex;align-items:center;gap:8px;padding:0 18px;}
.sub-tabs{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;height:100%;}
.sub-tabs::-webkit-scrollbar{display:none;}
.st{font-size:13px;color:var(--ink-2);font-weight:500;white-space:nowrap;padding:0 12px;height:100%;display:inline-flex;align-items:center;position:relative;}
.st.on{color:var(--teal-800);font-weight:700;}
.st.on::after{content:"";position:absolute;bottom:0;inset-inline:12px;height:2.5px;border-radius:3px 3px 0 0;background:var(--teal-800);}
.sub-side{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.btn-mintlight{display:inline-flex;align-items:center;gap:6px;background:var(--mint-100);color:var(--teal-800);border-radius:10.5px;padding:8px 14px;font-size:13px;font-weight:600;transition:filter .15s;}
.btn-mintlight:hover{filter:brightness(.96);}
.btn-mintlight .hgi{font-size:15px;}
.mushmir{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(0deg,var(--mint-50),var(--mint-50));border:1px solid #9EEACD;color:var(--teal-800);border-radius:10.5px;padding:7px 13px;font-size:13px;font-weight:600;}
.help-c{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;font-size:14px;background:#fff;}
/* ---- body ---- */
.bd{position:relative;height:640px;overflow:hidden;background:var(--bg);}
.view{position:absolute;inset:0;padding:18px;overflow-y:auto;overflow-x:hidden;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s;}
.view.on{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
/* ---- shared: real card = white, r14, pad14, flat ---- */
.card{background:var(--card);border-radius:14px;padding:14px;}
.card-hd{display:flex;align-items:center;gap:7px;margin-bottom:12px;}
.card-hd h4{margin:0;font-size:14px;font-weight:700;color:var(--dark);flex:1;display:flex;align-items:center;gap:7px;}
.q-ic{width:17px;height:17px;border-radius:50%;background:var(--bg);color:var(--ink-3);font-size:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;}
.rf-ic{color:var(--ink-3);font-size:15px;}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;font-size:11.5px;font-weight:600;padding:4px 10px;white-space:nowrap;}
.pill .d{width:5px;height:5px;border-radius:50%;background:currentColor;}
.p-new{background:var(--info-bg);color:var(--info);}
.p-prog{background:#FEF7EA;color:#B07A18;}
.p-ship{background:#EEF1FE;color:#5B6BC0;}
.p-done{background:var(--success-bg);color:#1D9A6C;}
.p-wait{background:var(--warn-bg);color:var(--warn);}
.p-cancel{background:var(--danger-bg);color:var(--danger);}
.btn-ghost-ic{width:36px;height:36px;border-radius:10.5px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s;}
.btn-ghost-ic:hover{border-color:var(--teal-800);color:var(--teal-800);}
.btn-ghost-ic.on{background:var(--mint-100);border-color:transparent;color:var(--teal-800);}
.search-box{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-2);border-radius:10.5px;padding:0 12px;height:40px;flex:1;min-width:180px;}
.search-box .hgi{color:var(--ink-3);font-size:16px;}
.search-box input{border:0;outline:0;font-family:inherit;font-size:13px;background:none;width:100%;color:var(--ink);}
.search-box input::placeholder{color:var(--ink-3);}
.search-box:focus-within{border-color:var(--teal-800);}
.select-box{display:inline-flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line-2);border-radius:10.5px;padding:0 12px;height:40px;font-size:13px;color:var(--ink);white-space:nowrap;}
.select-box .hgi{font-size:13px;color:var(--ink-3);}
.page-t{font-size:17px;font-weight:700;color:var(--dark);margin:0;}
.page-t small{font-size:12px;color:var(--ink-2);font-weight:500;margin-inline-start:6px;}
/* ============ HOME ============ */
.greet-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:4px 2px 16px;flex-wrap:wrap;}
.greet-row h3{margin:0;font-size:18px;font-weight:700;color:var(--dark);}
.greet-row .sub-line{margin:5px 0 0;font-size:12.5px;color:var(--ink-2);}
.quick-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px;}
.qn{background:#fff;border-radius:14px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--ink);transition:transform .18s var(--ease);}
.qn:hover{transform:translateY(-2px);color:var(--teal-800);}
.qn .hgi{font-size:21px;color:var(--teal-800);}
.sum-card .toggle{display:inline-flex;background:var(--bg);border-radius:10.5px;padding:3px;}
.sum-card .toggle button{font-size:12px;font-weight:600;color:var(--ink-2);padding:5px 14px;border-radius:8px;}
.sum-card .toggle button.on{background:#fff;color:var(--teal-800);box-shadow:0 1px 3px rgba(0,0,0,.06);}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.stat{background:var(--bg);border-radius:10.5px;padding:13px 14px;position:relative;overflow:hidden;}
.stat .l{font-size:12px;color:var(--ink-2);margin:0 0 7px;display:flex;align-items:center;gap:6px;}
.stat .l .hgi{font-size:15px;color:var(--teal-800);opacity:.8;}
.stat .v{font-size:21px;font-weight:700;color:var(--dark);line-height:1.15;display:flex;align-items:baseline;gap:4px;}
.stat .v .cur{font-size:11px;color:var(--ink-2);font-weight:500;}
.stat .dl{font-size:11px;font-weight:600;margin-top:6px;display:inline-flex;align-items:center;gap:3px;}
.dl.up{color:#1D9A6C;} .dl.down{color:var(--danger);}
.home-2col{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-top:14px;}
.lrow{display:flex;align-items:center;gap:11px;padding:9.5px 0;border-bottom:1px solid var(--bg);}
.lrow:last-child{border-bottom:0;}
.ava{width:33px;height:33px;border-radius:10.5px;background:var(--mint-50);color:var(--teal-800);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.lmain{flex:1;min-width:0;}
.lmain b{display:block;font-size:12.5px;font-weight:600;color:var(--dark);}
.lmain span{font-size:11px;color:var(--ink-2);}
.lamt{font-size:12.5px;font-weight:700;color:var(--dark);white-space:nowrap;display:flex;align-items:center;gap:3px;}
.link-t{font-size:12px;color:var(--teal-800);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.cart-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--mint-50);border:1px solid #D5F5E8;border-radius:10.5px;padding:11px 13px;margin-top:11px;}
.cart-strip p{margin:0;font-size:12px;color:var(--teal-800);font-weight:600;line-height:1.6;}
.warn-strip{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10.5px;background:var(--warn-bg);margin-top:9px;}
.warn-strip .hgi{color:var(--warn);font-size:15px;flex-shrink:0;}
.warn-strip p{margin:0;font-size:11.5px;color:#8A5F13;font-weight:600;}
.spark7{width:100%;height:74px;display:block;}
/* ============ ORDERS ============ */
.tb-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px;}
.chip-f{border:1px solid var(--line-2);background:#fff;color:var(--ink-2);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:600;transition:all .15s;}
.chip-f.on{background:var(--teal-800);border-color:var(--teal-800);color:#fff;}
.chip-f:not(.on):hover{border-color:var(--teal-800);color:var(--teal-800);}
.tblc{background:#fff;border-radius:14px;overflow-x:auto;}
table{width:100%;border-collapse:collapse;min-width:760px;}
thead th{text-align:start;font-size:11.5px;font-weight:600;color:var(--ink-2);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;}
tbody td{padding:11px 14px;border-bottom:1px solid var(--bg);font-size:12.5px;white-space:nowrap;vertical-align:middle;color:var(--ink);}
tbody tr:last-child td{border-bottom:0;}
tbody tr{transition:background .15s;}
tbody tr:hover{background:#FAFDFC;}
.oid{font-weight:700;color:var(--teal-800);}
.cust-c{display:flex;align-items:center;gap:9px;color:var(--dark);font-weight:500;}
.cust-c .ava{width:29px;height:29px;border-radius:50%;font-size:10px;}
.thumbs{display:flex;}
.thumb{width:30px;height:30px;border-radius:8px;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--teal-800);}
.thumb + .thumb{margin-inline-start:-9px;}
.thumb.more{background:var(--bg);font-size:9.5px;font-weight:700;color:var(--ink-2);}
.pay-c{font-size:10.5px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:7px;padding:3px 8px;letter-spacing:.02em;}
.amt{font-weight:700;color:var(--dark);display:inline-flex;align-items:center;gap:3px;}
tr.flash{animation:rowFlash 2.6s var(--ease);}
@keyframes rowFlash{0%,65%{background:var(--mint-50);}100%{background:transparent;}}
.toast{position:absolute;bottom:20px;inset-inline-start:20px;z-index:30;display:flex;align-items:center;gap:11px;background:#fff;border-radius:12px;box-shadow:0 14px 44px rgba(0,30,38,.18);padding:12px 16px;border-inline-start:3.5px solid var(--success);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);}
.toast.show{opacity:1;transform:none;}
.toast .tic{width:32px;height:32px;border-radius:50%;background:var(--success-bg);color:#1D9A6C;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.toast b{display:block;font-size:12.5px;color:var(--dark);}
.toast span{font-size:11px;color:var(--ink-2);}
/* ============ PRODUCTS ============ */
.prd-wrap{display:grid;grid-template-columns:1fr 218px;gap:14px;align-items:start;}
.prd-list{background:#fff;border-radius:14px;overflow:hidden;}
.prow{display:flex;align-items:center;gap:11px;padding:10.5px 14px;border-bottom:1px solid var(--bg);transition:background .15s;position:relative;}
.prow:last-child{border-bottom:0;}
.prow:hover{background:#FAFDFC;}
.pimg{width:42px;height:42px;border-radius:10.5px;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--teal-800);flex-shrink:0;}
.pmain{flex:1;min-width:0;}
.pmain b{display:block;font-size:13px;font-weight:600;color:var(--dark);margin-bottom:2px;}
.pmain .meta{font-size:11px;color:var(--ink-2);display:flex;align-items:center;gap:8px;}
.pprice{font-size:13px;font-weight:700;color:var(--teal-800);display:flex;align-items:center;gap:3px;white-space:nowrap;}
.pqty{font-size:11.5px;color:var(--ink-2);white-space:nowrap;width:84px;}
.pqty b{color:var(--dark);}
.pqty .bar{height:3.5px;border-radius:99px;background:var(--bg);margin-top:5px;overflow:hidden;width:70px;}
.pqty .bar i{display:block;height:100%;border-radius:99px;background:var(--success);transition:width .9s var(--ease);}
.pqty .bar i.low{background:#EBAF34;} .pqty .bar i.crit{background:var(--danger);}
.ptag{font-size:10px;font-weight:700;border-radius:6px;padding:2.5px 7px;}
.ptag.low{background:var(--warn-bg);color:var(--warn);}
.ptag.promo{background:var(--mint-100);color:var(--teal-800);}
.prow .acts{display:flex;gap:2px;color:var(--ink-3);font-size:15px;}
.prow .acts .hgi{padding:4px;}
.side-filter{background:#fff;border-radius:14px;padding:7px;}
.sf{display:block;width:100%;text-align:start;font-size:12px;color:var(--ink-2);font-weight:500;padding:9px 11px;border-radius:9px;transition:all .15s;}
.sf:hover{color:var(--teal-800);background:var(--bg);}
.sf.on{background:var(--mint-50);color:var(--teal-800);font-weight:700;}
.pulse{animation:pulse 1.5s ease-in-out 3;}
@keyframes pulse{0%,100%{background:transparent;}50%{background:var(--warn-bg);}}
/* ============ REPORTS ============ */
.rep-wrap{display:grid;grid-template-columns:1fr 218px;gap:14px;align-items:start;}
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);margin:2px 2px 12px;}
.crumb b{color:var(--dark);font-weight:700;font-size:15px;}
.crumb .hgi{font-size:12px;}
.date-pill{background:#fff;border:1px solid var(--line-2);border-radius:10.5px;padding:9px 16px;font-size:12.5px;color:var(--ink);display:inline-flex;align-items:center;gap:24px;margin-bottom:12px;}
.date-pill .hgi{font-size:13px;color:var(--ink-3);}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.w-full{grid-column:1/-1;}
.side-rep{background:#fff;border-radius:14px;padding:7px;position:sticky;top:0;}
.heat{display:grid;grid-template-columns:auto repeat(12,1fr);gap:3px;align-items:center;}
.heat .hl{font-size:10px;color:var(--ink-2);padding-inline-end:6px;white-space:nowrap;}
.heat .hc{aspect-ratio:1;border-radius:3.5px;background:var(--bg);min-width:0;}
.heat-x{display:grid;grid-template-columns:auto repeat(12,1fr);gap:3px;margin-top:5px;}
.heat-x span{font-size:8.5px;color:var(--ink-3);text-align:center;}
.stack-bar{display:flex;height:12px;border-radius:99px;overflow:hidden;gap:2px;margin-bottom:12px;}
.stack-bar i{display:block;height:100%;}
.leg-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--bg);font-size:12px;}
.leg-row:last-child{border-bottom:0;}
.leg-row .sw{width:8px;height:16px;border-radius:3px;flex-shrink:0;}
.leg-row .t{flex:1;color:var(--ink);}
.leg-row .n{color:var(--ink-2);font-weight:600;}
.leg-row .pc{font-weight:700;color:var(--dark);width:52px;text-align:start;}
.hbar{margin-bottom:11px;}
.hbar:last-child{margin-bottom:0;}
.hbar .top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px;}
.hbar .top b{font-weight:600;color:var(--dark);}
.hbar .top span{color:var(--ink-2);font-weight:600;display:inline-flex;gap:3px;align-items:center;}
.hbar .track{height:9px;border-radius:99px;background:var(--bg);overflow:hidden;}
.hbar .fill{display:block;height:100%;border-radius:99px;width:0;transition:width 1s var(--ease);}
.chart-wrap{position:relative;}
.chart-wrap svg{display:block;width:100%;height:auto;}
.gl{stroke:var(--line);stroke-width:1;}
.axl{font-size:10px;fill:var(--ink-3);font-family:var(--font);}
.area-fill{fill:url(#ag);opacity:0;transition:opacity .8s .4s;}
.area-line{fill:none;stroke:var(--chart-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.drawn .area-fill{opacity:1;}
.endp{fill:var(--chart-1);stroke:#fff;stroke-width:2;}
.xh{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3;opacity:0;}
.hd-dot{fill:var(--chart-1);stroke:#fff;stroke-width:2;opacity:0;}
.tip{position:absolute;pointer-events:none;background:var(--dark);color:#fff;border-radius:9px;padding:6px 10px;font-size:11px;line-height:1.55;opacity:0;transform:translate(-50%,-112%);transition:opacity .15s;white-space:nowrap;z-index:5;}
.kpis4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px;}
.kpi{background:#fff;border-radius:14px;padding:14px;}
.kpi .l{font-size:12px;color:var(--ink-2);margin:0 0 8px;}
.kpi .v{font-size:22px;font-weight:700;color:var(--dark);display:flex;align-items:baseline;gap:4px;}
.kpi .v .cur{font-size:11px;color:var(--ink-2);font-weight:500;}
.kpi .dl{font-size:11px;font-weight:600;margin-top:6px;display:inline-flex;align-items:center;gap:3px;}
/* ============ CTA ============ */
.cta-row{display:flex;gap:13px;margin-top:40px;flex-wrap:wrap;justify-content:center;align-items:center;}
.cta-mint{background:var(--mint);color:var(--teal-800);border-radius:999px;padding:15px 34px;font-size:15px;font-weight:700;text-decoration:none;display:inline-block;transition:transform .15s,box-shadow .15s;}
.cta-mint:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(44,242,199,.32);}
.cta-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);border-radius:999px;padding:13px 32px;font-size:15px;font-weight:600;text-decoration:none;display:inline-block;transition:all .15s;}
.cta-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.cta-note{width:100%;text-align:center;color:rgba(255,255,255,.55);font-size:12px;margin-top:12px;}
/* ============ responsive ============ */
@media (max-width:960px){
.quick-nav{grid-template-columns:repeat(3,1fr);}
.stats,.kpis4{grid-template-columns:repeat(2,1fr);}
.home-2col,.wgrid{grid-template-columns:1fr;}
.prd-wrap,.rep-wrap{grid-template-columns:1fr;}
.side-filter,.side-rep{display:flex;overflow-x:auto;padding:6px;position:static;}
.sf,.sr-i{white-space:nowrap;}
.bd{height:660px;}
.demo-flag{display:none;}
}
@media (max-width:560px){
.nb{padding:7px 8px;font-size:13px;}
.nb .hgi{display:none;}
.nb.on .ic-wrap{display:none;}
.view{padding:12px;}
.shell{padding:48px 10px 60px;}
.hd{padding:14px 12px;}
.sub{padding:0 10px;}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}
</style>
</head>
<body>
<section class="shell" id="sallaDemo">
<p class="eyebrow">جرّبها الآن — بدون تسجيل</p>
<h2 class="hero-t">هذي لوحة تحكم <em>متجرك</em> القادم</h2>
<p class="hero-s">تجربة حيّة للوحة تحكم سلة ببيانات متجر تجريبي: تابع مبيعاتك، أدر طلباتك ومنتجاتك، واقرأ تقاريرك — كل شيء من مكان واحد.</p>
<div class="tourbar">
<div class="dots" role="group" aria-label="التحكم بالجولة">
<button class="playb" id="tourBtn"><span style="font-size:10px">▶</span><span id="tourBtnLbl">إعادة الجولة</span></button>
<button class="dot" data-goto="0" aria-label="الرئيسية"></button>
<button class="dot" data-goto="1" aria-label="الطلبات"></button>
<button class="dot" data-goto="2" aria-label="المنتجات"></button>
<button class="dot" data-goto="3" aria-label="التقارير"></button>
</div>
<div class="cap" id="cap" aria-live="polite"></div>
</div>
<div class="win" id="win" aria-label="عرض تجريبي للوحة تحكم سلة">
<!-- ============ top bar ============ -->
<div class="hd">
<div class="logo" aria-label="سلة">
<!-- salla wordmark + basket, official-style mark -->
<svg viewBox="0 0 112 40" fill="none" aria-hidden="true" style="direction:ltr">
<g>
<rect x="77" y="7" width="30" height="27" rx="9" stroke="#A4FFE5" stroke-width="3" fill="none"/>
<path d="M85 11.5c0-4 3.2-7 7-7s7 3 7 7" stroke="#A4FFE5" stroke-width="3" stroke-linecap="round" fill="none"/>
<path d="M86.5 22.5c1.7 2 3.6 3 5.5 3s3.8-1 5.5-3" stroke="#A4FFE5" stroke-width="3" stroke-linecap="round" fill="none"/>
</g>
<text x="70" y="21" text-anchor="end" font-family="PingARLT,'IBM Plex Sans Arabic',sans-serif" font-size="17" font-weight="700" fill="#ffffff">سلة</text>
<text x="70" y="35" text-anchor="end" font-family="PingARLT,'IBM Plex Sans Arabic',sans-serif" font-size="11.5" font-weight="500" fill="#A4FFE5" letter-spacing="1">salla</text>
</svg>
</div>
<nav class="nav" aria-label="أقسام اللوحة">
<button class="nb" data-mega><span class="hgi" data-i="menu"></span>الكل</button>
<button class="nb" data-view="0"><span class="ic-wrap"><span class="hgi" data-i="home"></span></span>الرئيسية</button>
<button class="nb" data-view="1"><span class="ic-wrap"><span class="hgi" data-i="box"></span></span>الطلبات</button>
<button class="nb" data-view="2"><span class="ic-wrap"><span class="hgi" data-i="shirt"></span></span>المنتجات</button>
<button class="nb on" data-view="3"><span class="ic-wrap"><span class="hgi" data-i="pie"></span></span>التقارير</button>
</nav>
<div class="hd-side">
<span class="demo-flag">بيانات تجريبية</span>
<button class="hd-ic" aria-label="التنبيهات"><span class="hgi" data-i="bell"></span><span class="bdg num">3</span></button>
<button class="hd-ic" aria-label="الإعدادات"><span class="hgi" data-i="gear"></span></button>
<button class="hd-ic" aria-label="المزيد"><span class="hgi" data-i="more"></span></button>
<div class="store-chip">
<span class="store-ava">أث</span>
<span class="hgi" style="font-size:13px;opacity:.7" data-i="chevD"></span>
</div>
</div>
</div>
<!-- ============ sub bar ============ -->
<div class="sub">
<div class="sub-tabs" id="subTabs"></div>
<div class="sub-side">
<button class="btn-mintlight" id="subCta"><span class="hgi" data-i="add"></span><span id="subCtaLbl">إنشاء تقرير</span></button>
<button class="mushmir"><span style="font-size:13px">✦</span>مشمر<span class="hgi" style="font-size:11px" data-i="chevD"></span></button>
<button class="help-c">؟</button>
</div>
</div>
<!-- ============ body ============ -->
<div class="bd" id="bd">
<!-- ====== HOME ====== -->
<div class="view" id="v0">
<div class="greet-row">
<div>
<h3>حيّاك الله، متجر أثير للعطور</h3>
<p class="sub-line">بارك الله لك في سعيك ورزقك ✨</p>
</div>
</div>
<div class="quick-nav">
<button class="qn" data-view-link="1"><span class="hgi" data-i="box"></span>الطلبات</button>
<button class="qn" data-view-link="2"><span class="hgi" data-i="shirt"></span>المنتجات</button>
<button class="qn"><span class="hgi" data-i="add"></span>إضافة منتج</button>
<button class="qn"><span class="hgi" data-i="wallet"></span>المدفوعات</button>
<button class="qn"><span class="hgi" data-i="truck"></span>الشحن</button>
<button class="qn" data-view-link="3"><span class="hgi" data-i="pie"></span>التقارير</button>
</div>
<div class="card sum-card">
<div class="card-hd">
<h4>ملخص أغسطس 2026 <span class="q-ic">؟</span></h4>
<div class="toggle">
<button class="on">يومي</button>
<button>شهري</button>
</div>
</div>
<div class="stats">
<div class="stat">
<p class="l"><span class="hgi" data-i="money"></span>مبيعات اليوم</p>
<div class="v num"><span data-count="12480">0</span><span class="cur">ر.س</span></div>
<span class="dl up">▲ +18% عن أمس</span>
</div>
<div class="stat">
<p class="l"><span class="hgi" data-i="box"></span>طلبات اليوم</p>
<div class="v num"><span data-count="47">0</span></div>
<span class="dl up">▲ +9 طلبات جديدة</span>
</div>
<div class="stat">
<p class="l"><span class="hgi" data-i="users"></span>زوار اليوم</p>
<div class="v num"><span data-count="1932">0</span></div>
<span class="dl up">▲ +6%</span>
</div>
<div class="stat">
<p class="l"><span class="hgi" data-i="cart"></span>سلات متروكة</p>
<div class="v num"><span data-count="9">0</span></div>
<span class="dl down">▼ بقيمة 3,120 ر.س</span>
</div>
</div>
</div>
<div class="home-2col">
<div class="card">
<div class="card-hd">
<h4>أحدث الطلبات</h4>
<button class="link-t" data-view-link="1">عرض الكل</button>
</div>
<div id="homeOrders"></div>
</div>
<div style="display:flex;flex-direction:column;gap:14px;">
<div class="card">
<div class="card-hd"><h4>السلات المتروكة</h4></div>
<div class="cart-strip">
<p>9 سلات بقيمة 3,120 ر.س<br>بانتظار الاسترداد</p>
<button class="btn-mintlight" id="recoverBtn" style="padding:7px 13px;font-size:12px;">استرداد</button>
</div>
<div class="warn-strip">
<span class="hgi" data-i="alert"></span>
<p>منتجان على وشك النفاد — راجع المخزون</p>
</div>
</div>
<div class="card">
<div class="card-hd"><h4>مبيعات آخر 7 أيام</h4><span class="pill p-done"><span class="d"></span>نمو مستمر</span></div>
<svg class="spark7" viewBox="0 0 300 74" preserveAspectRatio="none" aria-label="مبيعات آخر سبعة أيام">
<rect x="8" y="38" width="24" height="32" rx="3.5" fill="#95C8D0"/>
<rect x="50" y="45" width="24" height="25" rx="3.5" fill="#95C8D0"/>
<rect x="92" y="31" width="24" height="39" rx="3.5" fill="#5CA9B5"/>
<rect x="134" y="35" width="24" height="35" rx="3.5" fill="#5CA9B5"/>
<rect x="176" y="20" width="24" height="50" rx="3.5" fill="#348D9C"/>
<rect x="218" y="26" width="24" height="44" rx="3.5" fill="#348D9C"/>
<rect x="260" y="8" width="24" height="62" rx="3.5" fill="#004D5A"/>
</svg>
<div style="display:flex;justify-content:space-between;font-size:9.5px;color:var(--ink-3);margin-top:5px;padding:0 4px;">
<span>السبت</span><span>الأحد</span><span>الاثنين</span><span>الثلاثاء</span><span>الأربعاء</span><span>الخميس</span><span>الجمعة</span>
</div>
</div>
</div>
</div>
</div>
<!-- ====== ORDERS ====== -->
<div class="view" id="v1">
<div class="tb-row">
<h3 class="page-t">الطلبات <small class="num">1,284 طلب</small></h3>
<div style="flex:1"></div>
<button class="btn-ghost-ic on" aria-label="عرض جدول"><span class="hgi" data-i="listview"></span></button>
<button class="btn-ghost-ic" aria-label="عرض بطاقات"><span class="hgi" data-i="gridview"></span></button>
<button class="btn-mintlight"><span class="hgi" data-i="add"></span>طلب جديد</button>
</div>
<div class="tb-row">
<div class="search-box">
<span class="hgi" data-i="search"></span>
<input type="text" id="orderSearch" placeholder="ابحث برقم الطلب، اسم العميل، رقم الشحنة" aria-label="بحث في الطلبات">
</div>
<div class="select-box">حالة الطلب<span class="hgi" data-i="chevD"></span></div>
<button class="btn-ghost-ic" aria-label="تصفية"><span class="hgi" data-i="filter"></span></button>
</div>
<div class="chips" id="orderFilters" role="group" aria-label="تصفية حسب الحالة">
<button class="chip-f on" data-f="all">كل الطلبات</button>
<button class="chip-f" data-f="new">جديد</button>
<button class="chip-f" data-f="prog">قيد التنفيذ</button>
<button class="chip-f" data-f="ship">تم الشحن</button>
<button class="chip-f" data-f="done">تم التوصيل</button>
<button class="chip-f" data-f="wait">بانتظار الدفع</button>
</div>
<div class="tblc">
<table aria-label="جدول الطلبات">
<thead><tr>
<th>رقم الطلب</th><th>أنشئ منذ</th><th>المنتجات</th><th>طريقة الدفع</th><th>الإجمالي</th><th>حالة الطلب</th><th>تاريخ الطلب</th><th>اسم العميل</th>
</tr></thead>
<tbody id="ordersTbody"></tbody>
</table>
</div>
</div>
<!-- ====== PRODUCTS ====== -->
<div class="view" id="v2">
<div class="tb-row">
<h3 class="page-t">المنتجات <small class="num">86 منتج</small></h3>
<div style="flex:1"></div>
<button class="btn-mintlight"><span class="hgi" data-i="add"></span>منتج جديد</button>
</div>
<div class="tb-row">
<div class="search-box">
<span class="hgi" data-i="search"></span>
<input type="text" id="prdSearch" placeholder="ابحث في المنتجات" aria-label="بحث في المنتجات">
</div>
<div class="select-box">اختر الفرع<span class="hgi" data-i="chevD"></span></div>
<div class="select-box">ترتيب<span class="hgi" data-i="chevD"></span></div>
</div>
<div class="prd-wrap">
<div class="prd-list" id="prdList"></div>
<div class="side-filter">
<button class="sf on">كل المنتجات</button>
<button class="sf">منتجات مخفضة</button>
<button class="sf">منتجات نفدت</button>
<button class="sf">منتجات غير مسعرة</button>
<button class="sf">منتجات مثبتة</button>
<button class="sf">منتجات مخفية</button>
<button class="sf">منتجات تنتظر شحن</button>
<button class="sf">منتجات قاربت على النفاد</button>
</div>
</div>
</div>
<!-- ====== REPORTS ====== -->
<div class="view" id="v3">
<div class="crumb">التقارير <span class="hgi" data-i="chevL"></span> <b>أداء المتجر</b></div>
<div class="rep-wrap">
<div>
<div class="date-pill"><span class="hgi" data-i="cal"></span><span class="num">15 أغسطس, 2026 - 22 أغسطس, 2026</span><span class="hgi" data-i="chevD"></span></div>
<div class="kpis4">
<div class="kpi"><p class="l">إجمالي المبيعات</p><div class="v num"><span data-count="96400">0</span><span class="cur">ر.س</span></div><span class="dl up">▲ +14%</span></div>
<div class="kpi"><p class="l">عدد الطلبات</p><div class="v num"><span data-count="1284">0</span></div><span class="dl up">▲ +11%</span></div>
<div class="kpi"><p class="l">متوسط قيمة الطلب</p><div class="v num"><span data-count="318">0</span><span class="cur">ر.س</span></div><span class="dl up">▲ +3%</span></div>
<div class="kpi"><p class="l">معدل التحويل</p><div class="v num">2.4<span class="cur">%</span></div><span class="dl down">▼ −0.2 نقطة</span></div>
</div>
<div class="wgrid">
<div class="card w-full">
<div class="card-hd"><h4>المبيعات اليومية — آخر 30 يوم <span class="q-ic">؟</span></h4><span class="hgi rf-ic" data-i="refresh"></span></div>
<div class="chart-wrap" id="salesWrap">
<svg id="salesChart" viewBox="0 0 760 220" role="img" aria-label="مخطط المبيعات اليومية لآخر ثلاثين يوم"></svg>
<div class="tip" id="salesTip"></div>
</div>
</div>
<div class="card">
<div class="card-hd"><h4>أوقات ذروة الطلبات <span class="q-ic">؟</span></h4><span class="hgi rf-ic" data-i="refresh"></span></div>
<div class="heat" id="heat"></div>
<div class="heat-x" id="heatX"></div>
</div>
<div class="card">
<div class="card-hd"><h4>نسب توفّر مخزون المنتجات <span class="q-ic">؟</span></h4><span class="hgi rf-ic" data-i="refresh"></span></div>
<div class="stack-bar" id="stockStack"></div>
<div id="stockLegend"></div>
</div>
<div class="card">
<div class="card-hd"><h4>المبيعات حسب المدينة <span class="q-ic">؟</span></h4><span class="hgi rf-ic" data-i="refresh"></span></div>
<div id="cityBars"></div>
</div>
<div class="card">
<div class="card-hd"><h4>أجهزة الدخول <span class="q-ic">؟</span></h4><span class="hgi rf-ic" data-i="refresh"></span></div>
<div id="devBars"></div>
</div>
</div>
</div>
<div class="side-rep" id="repSide"></div>
</div>
</div>
<!-- toast -->
<div class="toast" id="toast">
<div class="tic">✓</div>
<div><b id="toastTitle"></b><span id="toastSub"></span></div>
</div>
</div>
</div>
<div class="cta-row">
<a class="cta-mint" href="https://s.salla.sa/register">أنشئ متجرك الآن</a>
<a class="cta-ghost" href="https://salla.com">تحدّث مع المبيعات</a>
<p class="cta-note">٣٠ يوم تجربة مجانية · بدون بطاقة ائتمان · البيانات أعلاه تجريبية لمتجر افتراضي</p>
</div>
</section>
<script>
var HGI={"menu":"<path d=\"M4 5L20 5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M4 12L20 12\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M4 19L20 19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"2\"/>","home":"<path d=\"M3 11.9896V14.5C3 17.7998 3 19.4497 4.02513 20.4749C5.05025 21.5 6.70017 21.5 10 21.5H14C17.2998 21.5 18.9497 21.5 19.9749 20.4749C21 19.4497 21 17.7998 21 14.5V11.9896C21 10.3083 21 9.46773 20.6441 8.74005C20.2882 8.01237 19.6247 7.49628 18.2976 6.46411L16.2976 4.90855C14.2331 3.30285 13.2009 2.5 12 2.5C10.7991 2.5 9.76689 3.30285 7.70242 4.90855L5.70241 6.46411C4.37533 7.49628 3.71179 8.01237 3.3559 8.74005C3 9.46773 3 10.3083 3 11.9896Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/>","box":"<path d=\"M2.5 7.5V13.5C2.5 17.2712 2.5 19.1569 3.67157 20.3284C4.84315 21.5 6.72876 21.5 10.5 21.5H13.5C17.2712 21.5 19.1569 21.5 20.3284 20.3284C21.5 19.1569 21.5 17.2712 21.5 13.5V7.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M3.86909 5.31461L2.5 7.5H21.5L20.2478 5.41303C19.3941 3.99021 18.9673 3.2788 18.2795 2.8894C17.5918 2.5 16.7621 2.5 15.1029 2.5H8.95371C7.32998 2.5 6.51812 2.5 5.84013 2.8753C5.16215 3.2506 4.73113 3.93861 3.86909 5.31461Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M12 7.5V2.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"2\"/><path d=\"M6 18H11M6 15H9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"3\"/>","shirt":"<path d=\"M6 9V16.6841C6 18.4952 6 19.4008 6.58579 19.9635C7.89989 21.2257 15.8558 21.4604 17.4142 19.9635C18 19.4008 18 18.4952 18 16.6841V9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M5.74073 12L3.04321 9.38915C2.34774 8.71602 2 8.37946 2 7.96123C2 7.543 2.34774 7.20644 3.04321 6.53331L5.04418 4.59664C5.39088 4.26107 5.56423 4.09329 5.77088 3.96968C5.97753 3.84607 6.21011 3.77103 6.67526 3.62096L8.32112 3.08997C8.56177 3.01233 8.68209 2.97351 8.76391 3.02018C8.84573 3.06686 8.87157 3.2013 8.92324 3.47018C9.19358 4.87684 10.4683 5.94185 12 5.94185C13.5317 5.94185 14.8064 4.87684 15.0768 3.47018C15.1284 3.2013 15.1543 3.06686 15.2361 3.02018C15.3179 2.97351 15.4382 3.01233 15.6789 3.08997L17.3247 3.62096C17.7899 3.77103 18.0225 3.84607 18.2291 3.96968C18.4358 4.09329 18.6091 4.26107 18.9558 4.59664L20.9568 6.53331C21.6523 7.20644 22 7.543 22 7.96123C22 8.37946 21.6523 8.71602 20.9568 9.38915L18.2593 12\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/>","pie":"<path d=\"M20.5 15.8278C17.9985 21.756 9.86407 23.4835 5.20143 18.8641C0.629484 14.3347 2.04493 6.12883 8.05653 3.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M17.6831 12.5C19.5708 12.5 20.5146 12.5 21.1241 11.655C21.1469 11.6234 21.1848 11.5667 21.2052 11.5336C21.7527 10.6471 21.4705 9.966 20.9063 8.60378C20.3946 7.36853 19.6447 6.24615 18.6993 5.30073C17.7538 4.35531 16.6315 3.60536 15.3962 3.0937C14.034 2.52946 13.3529 2.24733 12.4664 2.79477C12.4333 2.81523 12.3766 2.85309 12.345 2.87587C11.5 3.4854 11.5 4.42922 11.5 6.31686V8.42748C11.5 10.3473 11.5 11.3072 12.0964 11.9036C12.6928 12.5 13.6527 12.5 15.5725 12.5H17.6831Z\" stroke=\"currentColor\" stroke-width=\"1.5\" key=\"1\"/>","bell":"<path d=\"M15.5 18C15.5 19.933 13.933 21.5 12 21.5C10.067 21.5 8.5 19.933 8.5 18\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M19.2311 18H4.76887C3.79195 18 3 17.208 3 16.2311C3 15.762 3.18636 15.3121 3.51809 14.9803L4.12132 14.3771C4.68393 13.8145 5 13.0514 5 12.2558V9.5C5 5.63401 8.13401 2.5 12 2.5C15.866 2.5 19 5.634 19 9.5V12.2558C19 13.0514 19.3161 13.8145 19.8787 14.3771L20.4819 14.9803C20.8136 15.3121 21 15.762 21 16.2311C21 17.208 20.208 18 19.2311 18Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/>","gear":"<path d=\"M21.3175 7.14139L20.8239 6.28479C20.4506 5.63696 20.264 5.31305 19.9464 5.18388C19.6288 5.05472 19.2696 5.15664 18.5513 5.36048L17.3311 5.70418C16.8725 5.80994 16.3913 5.74994 15.9726 5.53479L15.6357 5.34042C15.2766 5.11043 15.0004 4.77133 14.8475 4.37274L14.5136 3.37536C14.294 2.71534 14.1842 2.38533 13.9228 2.19657C13.6615 2.00781 13.3143 2.00781 12.6199 2.00781H11.5051C10.8108 2.00781 10.4636 2.00781 10.2022 2.19657C9.94085 2.38533 9.83106 2.71534 9.61149 3.37536L9.27753 4.37274C9.12465 4.77133 8.84845 5.11043 8.48937 5.34042L8.15249 5.53479C7.73374 5.74994 7.25259 5.80994 6.79398 5.70418L5.57375 5.36048C4.85541 5.15664 4.49625 5.05472 4.17867 5.18388C3.86109 5.31305 3.67445 5.63696 3.30115 6.28479L2.80757 7.14139C2.45766 7.74864 2.2827 8.05227 2.31666 8.37549C2.35061 8.69871 2.58483 8.95918 3.05326 9.48012L4.0843 10.6328C4.3363 10.9518 4.51521 11.5078 4.51521 12.0077C4.51521 12.5078 4.33636 13.0636 4.08433 13.3827L3.05326 14.5354C2.58483 15.0564 2.35062 15.3168 2.31666 15.6401C2.2827 15.9633 2.45766 16.2669 2.80757 16.8741L3.30114 17.7307C3.67443 18.3785 3.86109 18.7025 4.17867 18.8316C4.49625 18.9608 4.85542 18.8589 5.57377 18.655L6.79394 18.3113C7.25263 18.2055 7.73387 18.2656 8.15267 18.4808L8.4895 18.6752C8.84851 18.9052 9.12464 19.2442 9.2775 19.6428L9.61149 20.6403C9.83106 21.3003 9.94085 21.6303 10.2022 21.8191C10.4636 22.0078 10.8108 22.0078 11.5051 22.0078H12.6199C13.3143 22.0078 13.6615 22.0078 13.9228 21.8191C14.1842 21.6303 14.294 21.3003 14.5136 20.6403L14.8476 19.6428C15.0004 19.2442 15.2765 18.9052 15.6356 18.6752L15.9724 18.4808C16.3912 18.2656 16.8724 18.2055 17.3311 18.3113L18.5513 18.655C19.2696 18.8589 19.6288 18.9608 19.9464 18.8316C20.264 18.7025 20.4506 18.3785 20.8239 17.7307L21.3175 16.8741C21.6674 16.2669 21.8423 15.9633 21.8084 15.6401C21.7744 15.3168 21.5402 15.0564 21.0718 14.5354L20.0407 13.3827C19.7887 13.0636 19.6098 12.5078 19.6098 12.0077C19.6098 11.5078 19.7888 10.9518 20.0407 10.6328L21.0718 9.48012C21.5402 8.95918 21.7744 8.69871 21.8084 8.37549C21.8423 8.05227 21.6674 7.74864 21.3175 7.14139Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M15.5195 12C15.5195 13.933 13.9525 15.5 12.0195 15.5C10.0865 15.5 8.51953 13.933 8.51953 12C8.51953 10.067 10.0865 8.5 12.0195 8.5C13.9525 8.5 15.5195 10.067 15.5195 12Z\" stroke=\"currentColor\" stroke-width=\"1.5\" key=\"1\"/>","more":"<path d=\"M6.00449 12.5V12M18.0045 12.5V12M12.0045 12.5V12M7.00449 12.5C7.00449 11.9477 6.55677 11.5 6.00449 11.5C5.4522 11.5 5.00449 11.9477 5.00449 12.5C5.00449 13.0523 5.4522 13.5 6.00449 13.5C6.55677 13.5 7.00449 13.0523 7.00449 12.5ZM19.0045 12.5C19.0045 11.9477 18.5568 11.5 18.0045 11.5C17.4522 11.5 17.0045 11.9477 17.0045 12.5C17.0045 13.0523 17.4522 13.5 18.0045 13.5C18.5568 13.5 19.0045 13.0523 19.0045 12.5ZM13.0045 12.5C13.0045 11.9477 12.5568 11.5 12.0045 11.5C11.4522 11.5 11.0045 11.9477 11.0045 12.5C11.0045 13.0523 11.4522 13.5 12.0045 13.5C12.5568 13.5 13.0045 13.0523 13.0045 12.5Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/>","add":"<path d=\"M12.001 5.00003V19.002\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M19.002 12.002L4.99998 12.002\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/>","chevD":"<path d=\"M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/>","chevL":"<path d=\"M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/>","search":"<path d=\"M17 17L21 21\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C15.4183 19 19 15.4183 19 11Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/>","filter":"<path d=\"M3 7H6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M3 17H9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M18 17L21 17\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"2\"/><path d=\"M15 7L21 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"3\"/><path d=\"M6 7C6 6.06812 6 5.60218 6.15224 5.23463C6.35523 4.74458 6.74458 4.35523 7.23463 4.15224C7.60218 4 8.06812 4 9 4C9.93188 4 10.3978 4 10.7654 4.15224C11.2554 4.35523 11.6448 4.74458 11.8478 5.23463C12 5.60218 12 6.06812 12 7C12 7.93188 12 8.39782 11.8478 8.76537C11.6448 9.25542 11.2554 9.64477 10.7654 9.84776C10.3978 10 9.93188 10 9 10C8.06812 10 7.60218 10 7.23463 9.84776C6.74458 9.64477 6.35523 9.25542 6.15224 8.76537C6 8.39782 6 7.93188 6 7Z\" stroke=\"currentColor\" stroke-width=\"1.5\" key=\"4\"/><path d=\"M12 17C12 16.0681 12 15.6022 12.1522 15.2346C12.3552 14.7446 12.7446 14.3552 13.2346 14.1522C13.6022 14 14.0681 14 15 14C15.9319 14 16.3978 14 16.7654 14.1522C17.2554 14.3552 17.6448 14.7446 17.8478 15.2346C18 15.6022 18 16.0681 18 17C18 17.9319 18 18.3978 17.8478 18.7654C17.6448 19.2554 17.2554 19.6448 16.7654 19.8478C16.3978 20 15.9319 20 15 20C14.0681 20 13.6022 20 13.2346 19.8478C12.7446 19.6448 12.3552 19.2554 12.1522 18.7654C12 18.3978 12 17.9319 12 17Z\" stroke=\"currentColor\" stroke-width=\"1.5\" key=\"5\"/>","cal":"<path d=\"M16 2V6M8 2V6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M3 10H21\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"2\"/><path d=\"M12.1258 14H12.0008M12.1258 18H12.0008M7.625 14H7.5M7.625 18H7.5M16.625 14H16.5M12.2508 14C12.2508 14.1381 12.1389 14.25 12.0008 14.25C11.8628 14.25 11.7508 14.1381 11.7508 14C11.7508 13.8619 11.8628 13.75 12.0008 13.75C12.1389 13.75 12.2508 13.8619 12.2508 14ZM12.2508 18C12.2508 18.1381 12.1389 18.25 12.0008 18.25C11.8628 18.25 11.7508 18.1381 11.7508 18C11.7508 17.8619 11.8628 17.75 12.0008 17.75C12.1389 17.75 12.2508 17.8619 12.2508 18ZM7.75 14C7.75 14.1381 7.63807 14.25 7.5 14.25C7.36193 14.25 7.25 14.1381 7.25 14C7.25 13.8619 7.36193 13.75 7.5 13.75C7.63807 13.75 7.75 13.8619 7.75 14ZM7.75 18C7.75 18.1381 7.63807 18.25 7.5 18.25C7.36193 18.25 7.25 18.1381 7.25 18C7.25 17.8619 7.36193 17.75 7.5 17.75C7.63807 17.75 7.75 17.8619 7.75 18ZM16.75 14C16.75 14.1381 16.6381 14.25 16.5 14.25C16.3619 14.25 16.25 14.1381 16.25 14C16.25 13.8619 16.3619 13.75 16.5 13.75C16.6381 13.75 16.75 13.8619 16.75 14Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"3\"/>","refresh":"<path d=\"M20.0092 2V5.13219C20.0092 5.42605 19.6418 5.55908 19.4537 5.33333C17.6226 3.2875 14.9617 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/>","cart":"<path d=\"M10.5 20.25C10.5 20.6642 10.1642 21 9.75 21C9.33579 21 9 20.6642 9 20.25C9 19.8358 9.33579 19.5 9.75 19.5C10.1642 19.5 10.5 19.8358 10.5 20.25Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M19 20.25C19 20.6642 18.6642 21 18.25 21C17.8358 21 17.5 20.6642 17.5 20.25C17.5 19.8358 17.8358 19.5 18.25 19.5C18.6642 19.5 19 19.8358 19 20.25Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M2 3H2.20664C3.53124 3 4.19354 3 4.6255 3.40221C5.05746 3.80441 5.10464 4.46503 5.19902 5.78626L5.45035 9.30496C5.5924 11.2936 5.66342 12.2879 5.96476 13.0961C6.62531 14.8677 8.08229 16.2244 9.89648 16.757C10.7241 17 11.7267 17 13.7317 17C15.8373 17 16.89 17 17.7417 16.7416C19.6593 16.1599 21.1599 14.6593 21.7416 12.7417C22 11.89 22 10.8433 22 8.75C22 8.05222 22 7.70333 21.9139 7.41943C21.72 6.78023 21.2198 6.28002 20.5806 6.08612C20.2967 6 19.9478 6 19.25 6H5.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"2\"/><path d=\"M16 10V13M11 10V13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"3\"/>","wallet":"<path d=\"M14 3H5C3.89543 3 3 3.89543 3 5C3 6.10457 3.89543 7 5 7H18C18 6.07003 18 5.60504 17.8978 5.22354C17.6204 4.18827 16.8117 3.37962 15.7765 3.10222C15.395 3 14.93 3 14 3Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M3 5V15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15V13C21 10.1716 21 8.75736 20.1213 7.87868C19.2426 7 17.8284 7 15 7H7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M21 12H19C18.535 12 18.3025 12 18.1118 12.0511C17.5941 12.1898 17.1898 12.5941 17.0511 13.1118C17 13.3025 17 13.535 17 14C17 14.465 17 14.6975 17.0511 14.8882C17.1898 15.4059 17.5941 15.8102 18.1118 15.9489C18.3025 16 18.535 16 19 16H21\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"2\"/>","truck":"<circle cx=\"17\" cy=\"18\" r=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\" key=\"0\"/><circle cx=\"7\" cy=\"18\" r=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M5 17.9724C3.90328 17.9178 3.2191 17.7546 2.73223 17.2678C2.24536 16.7809 2.08222 16.0967 2.02755 15M9 18H15M19 17.9724C20.0967 17.9178 20.7809 17.7546 21.2678 17.2678C22 16.5355 22 15.357 22 13V11H17.3C16.5555 11 16.1832 11 15.882 10.9021C15.2731 10.7043 14.7957 10.2269 14.5979 9.61803C14.5 9.31677 14.5 8.94451 14.5 8.2C14.5 7.08323 14.5 6.52485 14.3532 6.07295C14.0564 5.15964 13.3404 4.44358 12.4271 4.14683C11.9752 4 11.4168 4 10.3 4H2\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"2\"/><path d=\"M2 8H8\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"3\"/><path d=\"M2 11H6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"4\"/><path d=\"M14.5 6H16.3212C17.7766 6 18.5042 6 19.0964 6.35371C19.6886 6.70742 20.0336 7.34811 20.7236 8.6295L22 11\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"5\"/>","alert":"<circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M12 8V12\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M12.125 15.75H12M12.25 15.75C12.25 15.8881 12.1381 16 12 16C11.8619 16 11.75 15.8881 11.75 15.75C11.75 15.6119 11.8619 15.5 12 15.5C12.1381 15.5 12.25 15.6119 12.25 15.75Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"2\"/>","users":"<path d=\"M18.4995 20.5C18.2663 17.5685 15.8417 15.2477 12.808 15.0521L11.9995 15C11.7107 15.0076 11.4416 15.0178 11.1877 15.0298C8.18075 15.1723 5.7304 17.5974 5.49951 20.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M15.2495 9.25C15.2495 11.0449 13.7944 12.5 11.9995 12.5C10.2046 12.5 8.74952 11.0449 8.74952 9.25C8.74952 7.45507 10.2046 6 11.9995 6C13.7944 6 15.2495 7.45507 15.2495 9.25Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M5.50249 8.5C5.17908 7.99485 4.99158 7.39432 4.99158 6.75C4.99158 4.95507 6.44665 3.5 8.24157 3.5C8.68752 3.5 9.1125 3.58982 9.49939 3.75235\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"2\"/><path d=\"M18.4963 8.5C18.8197 7.99485 19.0072 7.39432 19.0072 6.75C19.0072 4.95507 17.5521 3.5 15.7572 3.5C15.3113 3.5 14.8863 3.58982 14.4994 3.75235\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"3\"/><path d=\"M22.0007 17.9996C21.8208 15.7374 19.9995 13.5 17.9995 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"4\"/><path d=\"M1.99927 17.9996C2.17923 15.7374 4.00049 13.5 6.00049 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"5\"/>","eye":"<path d=\"M2 8C2 8 6.47715 3 12 3C17.5228 3 22 8 22 8\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M21.544 13.045C21.848 13.4713 22 13.6845 22 14C22 14.3155 21.848 14.5287 21.544 14.955C20.1779 16.8706 16.6892 21 12 21C7.31078 21 3.8221 16.8706 2.45604 14.955C2.15201 14.5287 2 14.3155 2 14C2 13.6845 2.15201 13.4713 2.45604 13.045C3.8221 11.1294 7.31078 7 12 7C16.6892 7 20.1779 11.1294 21.544 13.045Z\" stroke=\"currentColor\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M15 14C15 12.3431 13.6569 11 12 11C10.3431 11 9 12.3431 9 14C9 15.6569 10.3431 17 12 17C13.6569 17 15 15.6569 15 14Z\" stroke=\"currentColor\" stroke-width=\"1.5\" key=\"2\"/>","edit":"<path d=\"M15.2141 5.98239L16.6158 4.58063C17.39 3.80646 18.6452 3.80646 19.4194 4.58063C20.1935 5.3548 20.1935 6.60998 19.4194 7.38415L18.0176 8.78591M15.2141 5.98239L6.98023 14.2163C5.93493 15.2616 5.41226 15.7842 5.05637 16.4211C4.70047 17.058 4.3424 18.5619 4 20C5.43809 19.6576 6.94199 19.2995 7.57889 18.9436C8.21579 18.5877 8.73844 18.0651 9.78375 17.0198L18.0176 8.78591M15.2141 5.98239L18.0176 8.78591\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M11 20H17\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" key=\"1\"/>","copy":"<path d=\"M7.5 14.5C7.5 11.2002 7.5 9.55025 8.52513 8.52513C9.55025 7.5 11.2002 7.5 14.5 7.5C17.7998 7.5 19.4497 7.5 20.4749 8.52513C21.5 9.55025 21.5 11.2002 21.5 14.5C21.5 17.7998 21.5 19.4497 20.4749 20.4749C19.4497 21.5 17.7998 21.5 14.5 21.5C11.2002 21.5 9.55025 21.5 8.52513 20.4749C7.5 19.4497 7.5 17.7998 7.5 14.5Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M7.5 16.5C6.10355 16.5 5.40533 16.5 4.84402 16.3036C3.83866 15.9518 3.0482 15.1613 2.69641 14.156C2.5 13.5947 2.5 12.8964 2.5 11.5V9.5C2.5 6.20017 2.5 4.55025 3.52513 3.52513C4.55025 2.5 6.20017 2.5 9.5 2.5H11.5C12.8964 2.5 13.5947 2.5 14.156 2.69641C15.1613 3.0482 15.9518 3.83866 16.3036 4.84402C16.5 5.40533 16.5 6.10355 16.5 7.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/>","listview":"<path d=\"M8 5.5L20 5.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M8 12.5L20 12.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M8 19.5L20 19.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" key=\"2\"/><path d=\"M4.375 5.5H4.25M4.5 5.5C4.5 5.63807 4.38807 5.75 4.25 5.75C4.11193 5.75 4 5.63807 4 5.5C4 5.36193 4.11193 5.25 4.25 5.25C4.38807 5.25 4.5 5.36193 4.5 5.5Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"3\"/><path d=\"M4.375 12.5H4.25M4.5 12.5C4.5 12.6381 4.38807 12.75 4.25 12.75C4.11193 12.75 4 12.6381 4 12.5C4 12.3619 4.11193 12.25 4.25 12.25C4.38807 12.25 4.5 12.3619 4.5 12.5Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"4\"/><path d=\"M4.375 19.5H4.25M4.5 19.5C4.5 19.6381 4.38807 19.75 4.25 19.75C4.11193 19.75 4 19.6381 4 19.5C4 19.3619 4.11193 19.25 4.25 19.25C4.38807 19.25 4.5 19.3619 4.5 19.5Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"5\"/>","gridview":"<path d=\"M3.88884 9.66294C4.39329 10 5.09552 10 6.49998 10C7.90445 10 8.60668 10 9.11113 9.66294C9.32951 9.51702 9.51701 9.32952 9.66292 9.11114C9.99998 8.60669 9.99998 7.90446 9.99998 6.5C9.99998 5.09554 9.99998 4.39331 9.66292 3.88886C9.51701 3.67048 9.32951 3.48298 9.11113 3.33706C8.60668 3 7.90445 3 6.49998 3C5.09552 3 4.39329 3 3.88884 3.33706C3.67046 3.48298 3.48296 3.67048 3.33705 3.88886C2.99998 4.39331 2.99998 5.09554 2.99998 6.5C2.99998 7.90446 2.99998 8.60669 3.33705 9.11114C3.48296 9.32952 3.67046 9.51702 3.88884 9.66294Z\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M14.8888 9.66294C15.3933 10 16.0955 10 17.5 10C18.9044 10 19.6067 10 20.1111 9.66294C20.3295 9.51702 20.517 9.32952 20.6629 9.11114C21 8.60669 21 7.90446 21 6.5C21 5.09554 21 4.39331 20.6629 3.88886C20.517 3.67048 20.3295 3.48298 20.1111 3.33706C19.6067 3 18.9044 3 17.5 3C16.0955 3 15.3933 3 14.8888 3.33706C14.6705 3.48298 14.483 3.67048 14.337 3.88886C14 4.39331 14 5.09554 14 6.5C14 7.90446 14 8.60669 14.337 9.11114C14.483 9.32952 14.6705 9.51702 14.8888 9.66294Z\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M3.88884 20.6629C4.39329 21 5.09552 21 6.49998 21C7.90445 21 8.60668 21 9.11113 20.6629C9.32951 20.517 9.51701 20.3295 9.66292 20.1111C9.99998 19.6067 9.99998 18.9045 9.99998 17.5C9.99998 16.0955 9.99998 15.3933 9.66292 14.8889C9.51701 14.6705 9.32951 14.483 9.11113 14.3371C8.60668 14 7.90445 14 6.49998 14C5.09552 14 4.39329 14 3.88884 14.3371C3.67046 14.483 3.48296 14.6705 3.33705 14.8889C2.99998 15.3933 2.99998 16.0955 2.99998 17.5C2.99998 18.9045 2.99998 19.6067 3.33705 20.1111C3.48296 20.3295 3.67046 20.517 3.88884 20.6629Z\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"2\"/><path d=\"M14.8888 20.6629C15.3933 21 16.0955 21 17.5 21C18.9044 21 19.6067 21 20.1111 20.6629C20.3295 20.517 20.517 20.3295 20.6629 20.1111C21 19.6067 21 18.9045 21 17.5C21 16.0955 21 15.3933 20.6629 14.8889C20.517 14.6705 20.3295 14.483 20.1111 14.3371C19.6067 14 18.9044 14 17.5 14C16.0955 14 15.3933 14 14.8888 14.3371C14.6705 14.483 14.483 14.6705 14.337 14.8889C14 15.3933 14 16.0955 14 17.5C14 18.9045 14 19.6067 14.337 20.1111C14.483 20.3295 14.6705 20.517 14.8888 20.6629Z\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"3\"/>","check":"<path d=\"M5 14L8.5 17.5L19 6.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/>","money":"<path d=\"M2.01733 15C4.2169 15 6.00001 16.7831 6.00001 18.9827\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M18 18.9827V18.8908C18 16.742 19.742 15 21.8908 15\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M6.00001 5.01733C6.00001 7.2169 4.2169 9.00001 2.01733 9.00001\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"2\"/><path d=\"M18 5.01733C18 7.19765 19.769 8.96876 21.9423 8.9996\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"3\"/><path d=\"M16 5H8C5.17157 5 3.75736 5 2.87868 5.87868C2 6.75736 2 8.17157 2 11V13C2 15.8284 2 17.2426 2.87868 18.1213C3.75736 19 5.17157 19 8 19H16C18.8284 19 20.2426 19 21.1213 18.1213C22 17.2426 22 15.8284 22 13V11C22 8.17157 22 6.75736 21.1213 5.87868C20.2426 5 18.8284 5 16 5Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"4\"/><path d=\"M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"5\"/>","analytics":"<path d=\"M7 17L7 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" key=\"0\"/><path d=\"M12 17L12 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" key=\"1\"/><path d=\"M17 17L17 11\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" key=\"2\"/><path d=\"M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"1.5\" key=\"3\"/>"};(function(){
"use strict";
document.documentElement.setAttribute("dir","rtl");
document.documentElement.setAttribute("lang","ar");
var reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
var $ = function(s,r){return (r||document).querySelector(s);};
var $$ = function(s,r){return Array.prototype.slice.call((r||document).querySelectorAll(s));};
var fmt = function(n){return n.toLocaleString("en-US");};
var esc = function(s){return String(s).replace(/&/g,"&").replace(/</g,"<");};
/* ---- inject real HugeIcons SVGs ---- */
function iconSvg(name, sw){
return '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-width="'+(sw||1.5)+'">'+(HGI[name]||"")+'</svg>';
}
function injectIcons(root){
$$(".hgi[data-i]", root).forEach(function(el){
if(el._done) return; el._done = true;
el.innerHTML = iconSvg(el.getAttribute("data-i"));
});
}
injectIcons(document);
/* ================= data ================= */
var SHIP = {smsa:"سمسا", aram:"أرامكس", spl:"سُبل", dhl:"DHL"};
var ORDERS = [
{id:"278532501", ago:"منذ دقيقتين", n:2, pay:"مدى", ship:"سمسا", total:"1,240.00", st:"prog", stLbl:"قيد التنفيذ", date:"2026-08-22", cust:"نورة الشمري", ic:["spray","gift"]},
{id:"278532484", ago:"منذ 3 ساعات", n:1, pay:"Apple Pay", ship:"أرامكس", total:"420.00", st:"ship", stLbl:"تم الشحن", date:"2026-08-22", cust:"فهد العتيبي", ic:["box"]},
{id:"278396226", ago:"منذ يوم", n:2, pay:"تمارا", ship:"سمسا", total:"891.74", st:"done", stLbl:"تم التوصيل", date:"2026-08-21", cust:"ريم القحطاني", ic:["drop","spray"]},
{id:"276409319", ago:"منذ يومين", n:1, pay:"تحويل بنكي", ship:"سُبل", total:"240.00", st:"wait", stLbl:"بانتظار الدفع", date:"2026-08-20", cust:"سلطان الحربي", ic:["box"]},
{id:"276245725", ago:"منذ 3 أيام", n:4, pay:"مدى", ship:"سمسا", total:"1,830.92", st:"done", stLbl:"تم التوصيل", date:"2026-08-19", cust:"لطيفة الدوسري", ic:["gift","drop"]},
{id:"276107218", ago:"منذ 4 أيام", n:1, pay:"STC Pay", ship:"أرامكس", total:"120.00", st:"cancel", stLbl:"ملغي", date:"2026-08-18", cust:"عبدالله الغامدي", ic:["spray"]},
{id:"275994102", ago:"منذ 5 أيام", n:2, pay:"Apple Pay", ship:"DHL", total:"6,116.74", st:"done", stLbl:"تم التوصيل", date:"2026-08-17", cust:"هند المطيري", ic:["gift","box"]},
{id:"275812650", ago:"منذ 6 أيام", n:1, pay:"مدى", ship:"سُبل", total:"483.24", st:"done", stLbl:"تم التوصيل", date:"2026-08-16", cust:"ماجد الزهراني", ic:["drop"]}
];
var NEW_ORDER = {id:"278532517", ago:"الآن", n:2, pay:"Apple Pay", ship:"سمسا", total:"530.00", st:"new", stLbl:"جديد", date:"2026-08-22", cust:"جوهرة العنزي", ic:["spray","drop"]};
var PSVG = {
drop:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3s6 6.5 6 11a6 6 0 01-12 0c0-4.5 6-11 6-11z"/></svg>',
spray:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="9" width="8" height="12" rx="2.5"/><path d="M10 9V6h4v3M12 3v1.5"/><path d="M18 4.5h.01M20 7h.01M19 10h.01"/></svg>',
gift:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M4 13h16M12 10v11"/><path d="M12 10s-1.5-5-4.5-5C5.5 5 5 8 7 9c1.5.8 5 1 5 1zm0 0s1.5-5 4.5-5c2 0 2.5 3 .5 4-1.5.8-5 1-5 1z"/></svg>',
box:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8l-9-5-9 5v8l9 5 9-5z"/><path d="M3.3 8.3L12 13l8.7-4.7"/><path d="M12 13v9"/></svg>'
};
var PTINT = ["#EBFDF6","#F1F8F9","#FDF4E5","#FDEEF2","#EDF4FE","#F4F1FB"];
var PRODUCTS = [
{n:"دهن عود ملكي 12مل", p:"650.00", stock:21, max:60, ic:"drop", t:0},
{n:"عود كمبودي فاخر", p:"420.00", stock:34, max:80, ic:"box", t:1},
{n:"عطر أثير الليل 50مل", p:"240.00", stock:8, max:100, ic:"spray", t:2, low:true},
{n:"مسك الطهارة", p:"85.00", stock:210, max:300, ic:"drop", t:0, promo:true},
{n:"بخور معطر — علبة كبيرة", p:"120.00", stock:64, max:120, ic:"box", t:2},
{n:"مجموعة الهدايا الملكية", p:"890.00", stock:5, max:50, ic:"gift", t:3, low:true},
{n:"معطر أقمشة — لافندر", p:"95.00", stock:142, max:200, ic:"spray", t:4},
{n:"عطر أثير الصباح 50مل", p:"230.00", stock:57, max:100, ic:"spray", t:1, promo:true}
];
var SALES30 = [2140,2380,2210,2650,2480,2900,3180,2760,2540,2980,3260,3040,3420,3180,2860,3340,3520,3300,3680,3460,3200,3740,3980,3620,4120,3880,4260,4020,4380,4640];
var CITIES = [["الرياض",38400],["جدة",27900],["الدمام",14200],["مكة المكرمة",9800],["أبها",6100]];
var SEQ = ["#004D5A","#348D9C","#5CA9B5","#95C8D0","#C4E0E4"];
var STOCK = [
{t:"مخزون ممتاز", n:28, pc:"32.6%", c:"#0C93AB"},
{t:"مخزون جيد", n:41, pc:"47.7%", c:"#58C9A4"},
{t:"مخزون منخفض", n:11, pc:"12.8%", c:"#EBAF34"},
{t:"نفد المخزون", n:6, pc:"7.0%", c:"#143A46"}
];
var DAYS = ["السبت","الأحد","الاثنين","الثلاثاء","الأربعاء","الخميس","الجمعة"];
/* heat: 7 days x 12 two-hour bins, 0..4 intensity — evenings peak */
var HEAT = [
[0,0,0,0,1,1,1,2,2,3,3,2],
[0,0,0,0,1,1,2,2,3,3,2,1],
[0,0,0,1,1,1,2,2,3,4,3,2],
[0,0,0,0,1,2,2,3,3,4,3,2],
[0,0,0,1,1,2,2,3,4,4,3,2],
[1,0,0,1,2,2,3,3,4,4,4,3],
[1,1,0,1,2,2,3,4,4,4,3,2]
];
var HEATC = ["#F1F8F9","#B9F0DF","#6FD9B8","#25A184","#004D5A"];
var SUBS = [
["ملخص المتجر","المهام","التحديثات"],
["إدارة الطلبات","إعدادات الطلبات","حالات الطلب","تحديث حالة مجموعة طلبات","الإسناد التلقائي","تخصيص الفواتير","المزيد •••"],
["إدارة المنتجات","إعدادات المنتجات","التصنيفات والخيارات","محرر المنتجات","إدارة المخزون","نقل المخزون","المزيد •••"],
["أداء المتجر","التحليلات الذكية","التقارير"]
];
var SUB_CTA = [null, null, null, "إنشاء تقرير"];
var REP_SIDE = ["تقرير مخصَّص","الطلبات","ملخص الأداء","المبيعات","العملاء","الزيارات","صفحات الهبوط","أمنيات العملاء","معدل التحويل","السلات المتروكة","المدفوعات","الشحن"];
/* ================= renderers ================= */
var initials = function(name){var p=name.split(" ");return p[0][0]+(p[1]?p[1][0]:"");};
function homeRow(o){
return '<div class="lrow"><span class="ava">'+initials(o.cust)+'</span>'+
'<span class="lmain"><b>'+esc(o.cust)+'</b><span class="num">#'+o.id+' · '+(o.n===1?"منتج واحد":o.n+" منتجات")+'</span></span>'+
'<span class="pill p-'+o.st+'"><span class="d"></span>'+o.stLbl+'</span>'+
'<span class="lamt num">'+o.total+' <small style="font-weight:500;color:var(--ink-2);font-size:10px">ر.س</small></span></div>';
}
$("#homeOrders").innerHTML = ORDERS.slice(0,5).map(homeRow).join("");
function thumbs(o){
var h = o.ic.slice(0,2).map(function(ic,i){
return '<span class="thumb" style="background:'+PTINT[(i+1)%6]+'">'+PSVG[ic]+'</span>';
}).join("");
if(o.n>2) h += '<span class="thumb more num">+'+(o.n-2)+'</span>';
return '<span class="thumbs">'+h+'</span>';
}
function orderRow(o){
return '<tr data-st="'+o.st+'" data-q="'+esc(o.id+" "+o.cust)+'">'+
'<td><span class="oid num">#'+o.id+'</span></td>'+
'<td style="color:var(--ink-2)">'+o.ago+'</td>'+
'<td>'+thumbs(o)+'</td>'+
'<td><span class="pay-c">'+esc(o.pay)+'</span></td>'+
'<td><span class="amt num">'+o.total+' <small style="color:var(--ink-3);font-size:9.5px;font-weight:500">ر.س</small></span></td>'+
'<td><span class="pill p-'+o.st+'"><span class="d"></span>'+o.stLbl+'</span></td>'+
'<td style="color:var(--ink-2)" class="num">'+o.date+'</td>'+
'<td><span class="cust-c"><span class="ava">'+initials(o.cust)+'</span>'+esc(o.cust)+'</span></td></tr>';
}
var tbody = $("#ordersTbody");
tbody.innerHTML = ORDERS.map(orderRow).join("");
var activeF = "all";
function applyOrderFilter(){
var q = $("#orderSearch").value.trim();
$$("tr", tbody).forEach(function(tr){
var ok = (activeF==="all" || tr.getAttribute("data-st")===activeF) && (!q || tr.getAttribute("data-q").indexOf(q)!==-1);
tr.style.display = ok ? "" : "none";
});
}
$("#orderFilters").addEventListener("click", function(e){
var b = e.target.closest(".chip-f"); if(!b) return;
$$(".chip-f", $("#orderFilters")).forEach(function(c){c.classList.remove("on");});
b.classList.add("on"); activeF = b.getAttribute("data-f"); applyOrderFilter();
});
$("#orderSearch").addEventListener("input", applyOrderFilter);
function prow(p){
var ratio = p.stock/p.max, cls = ratio<.12?"crit":(ratio<.3?"low":"");
return '<div class="prow'+(p.low?' is-low':'')+'" data-q="'+esc(p.n)+'">'+
'<span class="pimg" style="background:'+PTINT[p.t]+'">'+PSVG[p.ic]+'</span>'+
'<span class="pmain"><b>'+esc(p.n)+'</b><span class="meta"><span class="num">SKU-'+(1200+PRODUCTS.indexOf(p))+'</span>'+
(p.low?'<span class="ptag low">مخزون منخفض</span>':'')+(p.promo?'<span class="ptag promo">ترويج</span>':'')+'</span></span>'+
'<span class="pqty num">المخزون: <b>'+p.stock+'</b><span class="bar"><i class="'+cls+'" data-w="'+Math.round(ratio*100)+'"></i></span></span>'+
'<span class="pprice num">'+p.p+' <small style="font-size:9.5px;color:var(--ink-2);font-weight:500">ر.س</small></span>'+
'<span class="acts"><button class="hgi" data-i="eye" aria-label="عرض"></button><button class="hgi" data-i="edit" aria-label="تعديل"></button><button class="hgi" data-i="more" aria-label="المزيد"></button></span>'+
'</div>';
}
$("#prdList").innerHTML = PRODUCTS.map(prow).join("");
injectIcons($("#prdList"));
$("#prdSearch").addEventListener("input", function(){
var q = this.value.trim();
$$(".prow", $("#prdList")).forEach(function(c){ c.style.display = (!q || c.getAttribute("data-q").indexOf(q)!==-1)?"":"none"; });
});
/* reports side list */
$("#repSide").innerHTML = REP_SIDE.map(function(t,i){
return '<button class="sf sr-i'+(t==="ملخص الأداء"?" on":"")+'">'+t+(t==="معدل التحويل"?' <span class="ptag promo" style="font-size:9px">تجريبي</span>':'')+'</button>';
}).join("");
/* heatmap */
(function(){
var h = "";
HEAT.forEach(function(row,d){
h += '<span class="hl">'+DAYS[d]+'</span>';
row.forEach(function(v){ h += '<span class="hc" style="background:'+HEATC[v]+'"></span>'; });
});
$("#heat").innerHTML = h;
var x = '<span></span>';
["12ص","2","4","6","8","10","12م","2","4","6","8","10"].forEach(function(t){ x += '<span>'+t+'</span>'; });
$("#heatX").innerHTML = x;
})();
/* stock stack + legend */
(function(){
$("#stockStack").innerHTML = STOCK.map(function(s){
return '<i style="background:'+s.c+';width:'+s.pc+'"></i>';
}).join("");
$("#stockLegend").innerHTML = STOCK.map(function(s){
return '<div class="leg-row"><span class="sw" style="background:'+s.c+'"></span><span class="t">'+s.t+'</span><span class="n num">'+s.n+' منتج</span><span class="pc num">'+s.pc+'</span></div>';
}).join("");
})();
/* city bars */
var cityMax = CITIES[0][1];
$("#cityBars").innerHTML = CITIES.map(function(c,i){
return '<div class="hbar"><div class="top"><b>'+c[0]+'</b><span class="num">'+fmt(c[1])+' ر.س</span></div>'+
'<div class="track"><span class="fill" style="background:'+SEQ[i]+'" data-w="'+Math.round(c[1]/cityMax*100)+'"></span></div></div>';
}).join("");
/* device bars — categorical pair, direct labeled */
$("#devBars").innerHTML =
'<div class="hbar"><div class="top"><b>الجوال</b><span class="num">78%</span></div><div class="track"><span class="fill" style="background:#0C93AB" data-w="78"></span></div></div>'+
'<div class="hbar"><div class="top"><b>الكمبيوتر</b><span class="num">22%</span></div><div class="track"><span class="fill" style="background:#D95B28" data-w="22"></span></div></div>'+
'<p style="font-size:11px;color:var(--ink-2);margin:10px 0 0;">أغلب عملائك يشترون من الجوال — تأكد من تجربة الجوال أولًا.</p>';
/* sales chart (RTL) */
function buildChart(){
var svg = $("#salesChart");
var W=760,H=220,padS=48,padE=14,padT=14,padB=26;
var iw=W-padS-padE, ih=H-padT-padB, max=5000;
var x=function(i){return W-padS-(i/(SALES30.length-1))*iw;};
var y=function(v){return padT+ih-(v/max)*ih;};
var pts=[];
SALES30.forEach(function(v,i){pts.push((i?"L":"M")+x(i).toFixed(1)+" "+y(v).toFixed(1));});
var area=pts.concat(["L"+x(29).toFixed(1)+" "+(padT+ih),"L"+x(0).toFixed(1)+" "+(padT+ih)+" Z"]);
var h='<defs><linearGradient id="ag" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#0C93AB" stop-opacity=".2"/><stop offset="1" stop-color="#0C93AB" stop-opacity="0"/></linearGradient></defs>';
[0,1250,2500,3750,5000].forEach(function(v){
h+='<line class="gl" x1="'+padE+'" x2="'+(W-padS)+'" y1="'+y(v)+'" y2="'+y(v)+'"/>';
h+='<text class="axl num" x="'+(W-padS+7)+'" y="'+(y(v)+3)+'">'+(v>=1000?(v/1000)+"K":v)+'</text>';
});
[[0,"قبل 30 يوم"],[14,"قبل 15 يوم"],[29,"اليوم"]].forEach(function(t){
h+='<text class="axl" text-anchor="middle" x="'+x(t[0])+'" y="'+(H-7)+'">'+t[1]+'</text>';
});
h+='<path class="area-fill" d="'+area.join(" ")+'"/>';
h+='<path class="area-line" id="sline" d="'+pts.join(" ")+'"/>';
h+='<circle class="endp" r="4" cx="'+x(29)+'" cy="'+y(SALES30[29])+'"/>';
h+='<line class="xh" id="xh" y1="'+padT+'" y2="'+(padT+ih)+'" x1="0" x2="0"/>';
h+='<circle class="hd-dot" id="hdot" r="4"/>';
svg.innerHTML=h;
var line=$("#sline");
if(!reduced){var len=line.getTotalLength();line.style.strokeDasharray=len;line.style.strokeDashoffset=len;line.style.transition="stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1)";}
var wrap=$("#salesWrap"),tip=$("#salesTip");
wrap.addEventListener("pointermove",function(e){
var r=svg.getBoundingClientRect();
var px=(e.clientX-r.left)/r.width*W;
var i=Math.round((W-padS-px)/iw*29); if(i<0)i=0; if(i>29)i=29;
var cx=x(i),cy=y(SALES30[i]);
$("#xh").setAttribute("x1",cx);$("#xh").setAttribute("x2",cx);$("#xh").style.opacity=1;
var d=$("#hdot");d.setAttribute("cx",cx);d.setAttribute("cy",cy);d.style.opacity=1;
tip.style.opacity=1;tip.style.left=(cx/W*100)+"%";tip.style.top=(cy/H*100)+"%";
var day=30-i;
tip.innerHTML='<b class="num">'+fmt(SALES30[i])+' ر.س</b><br>'+(day===1?"اليوم":"قبل "+day+" يوم");
});
wrap.addEventListener("pointerleave",function(){$("#xh").style.opacity=0;$("#hdot").style.opacity=0;tip.style.opacity=0;});
return line;
}
var sline=buildChart(), drawn=false;
function drawChart(){
if(drawn)return;drawn=true;
$("#salesWrap").classList.add("drawn");
if(!reduced){requestAnimationFrame(function(){sline.style.strokeDashoffset=0;});}
else{$$(".area-fill").forEach(function(a){a.style.opacity=1;});}
$("#salesWrap").querySelector(".area-fill").style.opacity=1;
}
/* count-up */
function countUp(el){
var t=+el.getAttribute("data-count");
if(el._c)return;el._c=true;
if(reduced){el.textContent=fmt(t);return;}
var t0=performance.now(),dur=1000;
(function tick(now){
var k=Math.min(1,(now-t0)/dur);k=1-Math.pow(1-k,3);
el.textContent=fmt(Math.round(t*k));
if(k<1)requestAnimationFrame(tick);
})(t0);
}
/* ================= view switching ================= */
var cur=3;
var navBtns=$$(".nb[data-view]"), views=[$("#v0"),$("#v1"),$("#v2"),$("#v3")], dots=$$(".dot");
function renderSub(i){
$("#subTabs").innerHTML=SUBS[i].map(function(t,j){return '<span class="st'+(j===0?" on":"")+'">'+t+'</span>';}).join("");
var cta=$("#subCta");
if(SUB_CTA[i]){cta.style.display="";$("#subCtaLbl").textContent=SUB_CTA[i];}
else cta.style.display="none";
}
function activate(i){
cur=i;
navBtns.forEach(function(b){b.classList.toggle("on",+b.getAttribute("data-view")===i);});
views.forEach(function(v,j){v.classList.toggle("on",j===i);});
dots.forEach(function(d){d.classList.toggle("on",+d.getAttribute("data-goto")===i);});
renderSub(i);
views[i].scrollTop=0;
after(i);
}
function after(i){
$$("[data-count]",views[i]).forEach(countUp);
if(i===2){$$(".pqty .bar i",views[2]).forEach(function(b){b.style.width=b.getAttribute("data-w")+"%";});}
if(i===3){drawChart();$$(".fill").forEach(function(b){b.style.width=b.getAttribute("data-w")+"%";});}
}
navBtns.forEach(function(b){b.addEventListener("click",function(){takeOver();activate(+b.getAttribute("data-view"));});});
dots.forEach(function(d){d.addEventListener("click",function(){takeOver();activate(+d.getAttribute("data-goto"));});});
$$("[data-view-link]").forEach(function(b){b.addEventListener("click",function(){takeOver();activate(+b.getAttribute("data-view-link"));});});
$("#recoverBtn").addEventListener("click",function(){
showToast("تم إرسال رسائل الاسترداد","وصلت 9 رسائل واتساب لأصحاب السلات المتروكة");
});
var toastT;
function showToast(t,s){
$("#toastTitle").textContent=t;$("#toastSub").textContent=s;
var el=$("#toast");el.classList.add("show");
clearTimeout(toastT);toastT=setTimeout(function(){el.classList.remove("show");},3800);
}
/* ================= tour ================= */
var cap=$("#cap"),timers=[],touring=false;
function caption(t){
cap.classList.remove("show");
if(!t)return;
setTimeout(function(){cap.textContent=t;cap.classList.add("show");},240);
}
function later(fn,ms){timers.push(setTimeout(fn,ms));}
function stopTour(){touring=false;timers.forEach(clearTimeout);timers=[];}
function takeOver(){
if(!touring)return;
stopTour();
$("#tourBtnLbl").textContent="إعادة الجولة";
caption("اللوحة بين يديك — تنقّل كما تحب");
setTimeout(function(){cap.classList.remove("show");},2800);
}
function startTour(){
stopTour();touring=true;
$("#tourBtnLbl").textContent="إيقاف الجولة";
activate(0);
caption("لوحة تحكم متجرك — مبيعاتك وطلباتك في لمحة");
later(function(){showToast("طلب جديد #278532517","جوهرة العنزي — 530 ر.س عبر Apple Pay");},3600);
later(function(){
activate(1);
caption("الطلبات تصلك لحظيًا وتديرها بضغطة");
if(!$("#rNew")){
var tmp=document.createElement("tbody");
tmp.innerHTML=orderRow(NEW_ORDER);
var tr=tmp.firstChild;tr.id="rNew";tr.classList.add("flash");
tbody.insertBefore(tr,tbody.firstChild);
$("#homeOrders").insertAdjacentHTML("afterbegin",homeRow(NEW_ORDER));
} else {$("#rNew").classList.add("flash");}
},5200);
later(function(){
activate(2);
caption("منتجاتك ومخزونك تحت نظرك — قبل أن ينفد");
later(function(){$$(".is-low",$("#prdList")).forEach(function(c){c.classList.add("pulse");});},700);
},10200);
later(function(){
activate(3);
caption("تقارير حيّة تساعدك تقرر بثقة");
},15200);
later(function(){
touring=false;
$("#tourBtnLbl").textContent="إعادة الجولة";
caption("جرّبها بنفسك — كل شيء قابل للنقر");
later(function(){cap.classList.remove("show");},4200);
},20200);
}
$("#tourBtn").addEventListener("click",function(){
if(touring){takeOver();}
else startTour();
});
$("#win").addEventListener("pointerdown",takeOver,true);
function boot(){
if(reduced){activate(0);caption("اللوحة بين يديك — تنقّل كما تحب");return;}
startTour();
}
if("IntersectionObserver" in window){
var seen=false;
var io=new IntersectionObserver(function(en){
if(!seen&&en[0].isIntersecting){seen=true;io.disconnect();boot();}
},{threshold:.25});
io.observe($("#win"));
} else boot();
})();
</script>
</body>
</html>هل قالب المنيو مخصص لتطبيقات المطاعم فقط؟
بالطبع لا، فقالب المنيو مناسب لأي نشاط تجاري يرغب بعرض منتجاته وخدماته على شكل قائمة عناصرها تُعرض بشكل متتالي.
على سبيل المثال:
كيف يمكنني اختيار قالب المنيو لتطبيقي؟
لاختيار قالب المنيو، اضغط (تغيير) الموجود بجوار القالب المستخدم.
اختر قالب المنيو من مجموعة القوالب المتاحة، واضغط (حفظ).
ما هي الخصائص والأدوات التي يمكنني إعدادها على قالب المنيو؟
من القائمة الجانبية للوحة التحكم بمتجرك، اضغط (صانع التطبيقات).
الآن، من صفحة تصميم التطبيق يمكنك التحكم بخصائص التطبيق من خلال:
أولاً: الصفحة الرئيسية:
اضف الصور المتحركة التي ستظهر في أعلى صفحات التطبيق.
إضافة عدة صور بأبعاد مُفضلة (1024 * 1024 بيكسل)، وإمكانية ربط كل صفحة منها بـ : منتج، تصنيف، عرض خاص، صفحة تعريفية.
على سبيل المثال:
وستظهر في التطبيق بالشكل:
ثانياً: الشريط العلوي والتبويبات:
تتيح علامة التبويب (الشريط العلوي والتبويبات) إمكانية تخصيصهما حسب احتياجات نشاطك وتفضيلات عملاء متجرك.
خصص الشعار ولون خلفية الشريط العلوي بالإضافة لتخصيص لون الأيقونات.
على سبيل المثال:
ثالثاً: شاشات البداية:
تنقسم شاشة البداية إلى نوعين:
شاشة البداية: تظهر للمستخدم في كل مرة يفتح التطبيق فيها، ولتخصيصها حدد لون خلفية الشاشة، وحمّل صورة تختارها للتطبيق بمقاس مُفضل هو (512*512). على سبيل المثال تحميل شعار المتجر ووضع خلفية الشاشة بيضاء.
شاشات البداية: وهي شاشات يتم عرضها لمرة واحدة فقط للمستخدم وذلك في المرة الأولى التي يفتح المستخدم فيها التطبيق بعد تحميل التطبيق الـ installation.
ولتخصيص شاشات البداية، اضغط (شاشة جديدة).
ارفع صور لشاشات البداية تتناسب مع جميع مقاسات الشاشات.
يمكنك إضافة حتى 6 شاشات، مع إمكانية حذف أي شاشة بضغط زر الحذف الظاهر بجانب رقم الشاشة.
على سبيل المثال:
رابعاً: إعدادات عامة:
خصص من الإعدادات العامة:
- شكل مؤشر الانتقال ولون التطبيق.
- عرض صورة المنتج (كامل الصورة - احتواء مناسب) عرض كامل صورة المنتج أو احتواءها في كامل المساحة المحددة ضمن صفحة تفاصيل المنتج.
- حجم صورة تفاصيل المنتج (افتراضية - كبيرة) حجم صورة المنتج في صفحة تفاصيل المنتج.
على سبيل المثال:
ملاحظة هامة جداً:
يجب الضغط على (حفظ الإعدادات) دائماً قبل ضغط (نشر التطبيق) حتى يتمّ تطبيق أي تعديلات جديدة أدخلتها على التصميم.
