gentelella/dist/js/product-mockups-d3jLQBKo.js

Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.

var t={bg:"#f5f7fb",bgDark:"#0f1623",surface:"#ffffff",surfaceDark:"#1a2332",surfaceDk2:"#141d2b",border:"#e6e7eb",borderDark:"rgba(255,255,255,0.1)",text:"#1e2633",textDark:"#e6ebf2",muted:"#9ba5b1",mutedDark:"#8a93a3",primary:"#1ABB9C",azure:"#4299e1",yellow:"#f59f00",red:"#d63939",purple:"#ae3ec9",green:"#2fb344",blue:"#066fd1"};function e(e){return`\n    \x3c!-- Sidebar --\x3e\n    <rect width="60" height="300" fill="${t.surfaceDark}"/>\n    <rect x="6" y="9" width="14" height="14" rx="3" fill="${t.primary}"/>\n    <text x="13" y="20" font-size="9" font-weight="700" fill="white" text-anchor="middle" font-family="Inter,sans-serif">G</text>\n    <rect x="24" y="13" width="24" height="6" rx="1" fill="rgba(255,255,255,0.95)"/>\n\n    <rect x="6" y="38" width="20" height="3" rx="1" fill="rgba(255,255,255,0.18)"/>\n    <rect x="6" y="48" width="48" height="7" rx="2" fill="rgba(26,187,156,0.22)"/>\n    <rect x="6" y="60" width="48" height="6" rx="2" fill="rgba(255,255,255,0.05)"/>\n    <rect x="6" y="71" width="48" height="6" rx="2" fill="rgba(255,255,255,0.05)"/>\n    <rect x="6" y="82" width="48" height="6" rx="2" fill="rgba(255,255,255,0.05)"/>\n    <rect x="6" y="93" width="48" height="6" rx="2" fill="rgba(255,255,255,0.05)"/>\n\n    <rect x="6" y="113" width="20" height="3" rx="1" fill="rgba(255,255,255,0.18)"/>\n    <rect x="6" y="123" width="48" height="6" rx="2" fill="rgba(255,255,255,0.05)"/>\n    <rect x="6" y="134" width="48" height="6" rx="2" fill="rgba(255,255,255,0.05)"/>\n    <rect x="6" y="145" width="48" height="6" rx="2" fill="rgba(255,255,255,0.05)"/>\n\n    <rect x="6" y="280" width="48" height="13" rx="3" fill="rgba(255,255,255,0.04)"/>\n    <circle cx="13" cy="286.5" r="4" fill="${t.primary}"/>\n\n    \x3c!-- Topbar --\x3e\n    <rect x="60" width="340" height="22" fill="${"dark"===e?t.surfaceDk2:t.surface}"/>\n    <line x1="60" y1="22" x2="400" y2="22" stroke="${"dark"===e?t.borderDark:t.border}"/>\n    <rect x="70" y="8" width="38" height="4" rx="1" fill="${"dark"===e?t.mutedDark:t.muted}"/>\n    <circle cx="115" cy="10" r="1.2" fill="${"dark"===e?t.mutedDark:t.muted}"/>\n    <rect x="120" y="8" width="40" height="4" rx="1" fill="${"dark"===e?t.textDark:t.text}"/>\n    <rect x="240" y="6" width="60" height="11" rx="3" fill="${"dark"===e?"#0f1623":t.bg}"/>\n    <circle cx="320" cy="11" r="4" fill="none" stroke="${"dark"===e?t.mutedDark:t.muted}" stroke-width="1.2"/>\n    <circle cx="340" cy="11" r="4" fill="none" stroke="${"dark"===e?t.mutedDark:t.muted}" stroke-width="1.2"/>\n    <circle cx="362" cy="11" r="6" fill="${t.primary}"/>\n    <text x="362" y="14" font-size="6" font-weight="700" fill="white" text-anchor="middle" font-family="Inter,sans-serif">A</text>\n\n    \x3c!-- Page header --\x3e\n    <rect x="70" y="32" width="50" height="4" rx="1" fill="${"dark"===e?t.mutedDark:t.muted}"/>\n    <rect x="70" y="40" width="80" height="6" rx="1" fill="${"dark"===e?t.textDark:t.text}"/>\n  `}function r(e,r,i,l){const n="dark"===l?t.mutedDark:t.muted;return`\n    <g transform="translate(${e}, ${r})">\n      <rect width="105" height="56" rx="4" fill="${"dark"===l?t.surfaceDk2:t.surface}" stroke="${"dark"===l?t.borderDark:t.border}"/>\n      <circle cx="20" cy="20" r="11" fill="${i}" fill-opacity="0.14"/>\n      <rect x="14" y="16" width="12" height="8" rx="1.5" fill="${i}"/>\n      <rect x="38" y="14" width="44" height="4" rx="1" fill="${n}"/>\n      <rect x="38" y="24" width="32" height="8" rx="1" fill="${"dark"===l?t.textDark:t.text}"/>\n      <rect x="38" y="38" width="56" height="3" rx="1" fill="${n}"/>\n      \x3c!-- mini sparkline --\x3e\n      <polyline points="14,46 22,42 30,44 38,38 46,40" fill="none" stroke="${i}" stroke-width="1.2"/>\n    </g>\n  `}var i={overview:`<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">\n  <rect width="400" height="300" fill="${t.bg}"/>\n  ${e("light")}\n  ${r(70,56,t.primary,"light")}\n  ${r(180,56,t.azure,"light")}\n  ${r(290,56,t.yellow,"light")}\n\n  \x3c!-- Big chart card --\x3e\n  <g transform="translate(70, 122)">\n    <rect width="215" height="170" rx="4" fill="${t.surface}" stroke="${t.border}"/>\n    <rect x="12" y="12" width="80" height="6" rx="1" fill="${t.text}"/>\n    <rect x="12" y="22" width="50" height="3" rx="1" fill="${t.muted}"/>\n    <rect x="170" y="12" width="34" height="11" rx="3" fill="${t.bg}"/>\n    <rect x="173" y="15" width="10" height="5" rx="1" fill="${t.primary}"/>\n    \x3c!-- Grid lines --\x3e\n    <line x1="20" y1="60"  x2="200" y2="60"  stroke="${t.border}" stroke-dasharray="2,2"/>\n    <line x1="20" y1="90"  x2="200" y2="90"  stroke="${t.border}" stroke-dasharray="2,2"/>\n    <line x1="20" y1="120" x2="200" y2="120" stroke="${t.border}" stroke-dasharray="2,2"/>\n    \x3c!-- Area fill --\x3e\n    <polygon points="20,128 50,108 80,118 110,88 140,98 170,68 200,58 200,150 20,150" fill="${t.primary}" fill-opacity="0.15"/>\n    \x3c!-- Primary line --\x3e\n    <polyline points="20,128 50,108 80,118 110,88 140,98 170,68 200,58" fill="none" stroke="${t.primary}" stroke-width="2" stroke-linejoin="round"/>\n    \x3c!-- Dashed secondary line --\x3e\n    <polyline points="20,138 50,128 80,132 110,118 140,122 170,108 200,103" fill="none" stroke="${t.azure}" stroke-width="1.5" stroke-dasharray="3,2"/>\n    \x3c!-- X axis --\x3e\n    <line x1="20" y1="150" x2="200" y2="150" stroke="${t.border}"/>\n    <text x="22"  y="160" font-size="5.5" fill="${t.muted}">Mon</text>\n    <text x="50"  y="160" font-size="5.5" fill="${t.muted}">Tue</text>\n    <text x="80"  y="160" font-size="5.5" fill="${t.muted}">Wed</text>\n    <text x="110" y="160" font-size="5.5" fill="${t.muted}">Thu</text>\n    <text x="140" y="160" font-size="5.5" fill="${t.muted}">Fri</text>\n    <text x="170" y="160" font-size="5.5" fill="${t.muted}">Sat</text>\n    <text x="195" y="160" font-size="5.5" fill="${t.muted}" text-anchor="end">Sun</text>\n  </g>\n\n  \x3c!-- Activity list --\x3e\n  <g transform="translate(295, 122)">\n    <rect width="100" height="170" rx="4" fill="${t.surface}" stroke="${t.border}"/>\n    <rect x="10" y="12" width="55" height="6" rx="1" fill="${t.text}"/>\n    ${[{y:28,c:t.primary,w:60},{y:50,c:t.azure,w:50},{y:72,c:t.green,w:56},{y:94,c:t.yellow,w:48},{y:116,c:t.purple,w:52},{y:138,c:t.red,w:56}].map(e=>`\n      <g transform="translate(10, ${e.y})">\n        <circle cx="9" cy="9" r="7" fill="${e.c}" fill-opacity="0.85"/>\n        <rect x="22" y="5" width="${e.w}" height="3" rx="1" fill="${t.text}"/>\n        <rect x="22" y="11" width="${Math.round(.6*e.w)}" height="2.5" rx="1" fill="${t.muted}"/>\n      </g>\n    `).join("")}\n  </g>\n</svg>`,analytics:`<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">\n  <rect width="400" height="300" fill="${t.bg}"/>\n  ${e("light")}\n\n  \x3c!-- Two chart cards --\x3e\n  <g transform="translate(70, 56)">\n    <rect width="160" height="115" rx="4" fill="${t.surface}" stroke="${t.border}"/>\n    <rect x="10" y="10" width="80" height="6" rx="1" fill="${t.text}"/>\n    <rect x="10" y="20" width="40" height="14" rx="1" fill="${t.text}"/>\n    <rect x="55" y="24" width="40" height="6" rx="1" fill="${t.green}" fill-opacity="0.8"/>\n    \x3c!-- Bar chart --\x3e\n    ${[20,35,28,50,42,58,70,65].map((e,r)=>`\n      <rect x="${14+18*r}" y="${100-e}" width="11" height="${e}" rx="2" fill="${[t.primary,t.azure,t.yellow,t.green,t.purple,t.red,t.primary,t.azure][r]}"/>\n    `).join("")}\n  </g>\n\n  <g transform="translate(240, 56)">\n    <rect width="155" height="115" rx="4" fill="${t.surface}" stroke="${t.border}"/>\n    <rect x="10" y="10" width="60" height="6" rx="1" fill="${t.text}"/>\n    \x3c!-- Donut --\x3e\n    <circle cx="80" cy="68" r="32" fill="none" stroke="${t.bg}" stroke-width="14"/>\n    <circle cx="80" cy="68" r="32" fill="none" stroke="${t.primary}" stroke-width="14" stroke-dasharray="80 200" transform="rotate(-90 80 68)"/>\n    <circle cx="80" cy="68" r="32" fill="none" stroke="${t.azure}"   stroke-width="14" stroke-dasharray="40 200" stroke-dashoffset="-80" transform="rotate(-90 80 68)"/>\n    <circle cx="80" cy="68" r="32" fill="none" stroke="${t.yellow}"  stroke-width="14" stroke-dasharray="30 200" stroke-dashoffset="-120" transform="rotate(-90 80 68)"/>\n    <circle cx="80" cy="68" r="32" fill="none" stroke="${t.purple}"  stroke-width="14" stroke-dasharray="24 200" stroke-dashoffset="-150" transform="rotate(-90 80 68)"/>\n    <text x="80" y="65" font-size="8" font-weight="700" fill="${t.text}" text-anchor="middle" font-family="Inter,sans-serif">8.4k</text>\n    <text x="80" y="75" font-size="5" fill="${t.muted}" text-anchor="middle" font-family="Inter,sans-serif">devices</text>\n    \x3c!-- Legend --\x3e\n    <g transform="translate(118, 50)" font-family="Inter,sans-serif" font-size="5.5">\n      <rect width="6" height="6" rx="1" fill="${t.primary}"/><text x="9" y="5" fill="${t.text}">iOS</text><text x="35" y="5" fill="${t.muted}" text-anchor="end">30%</text>\n      <g transform="translate(0, 11)"><rect width="6" height="6" rx="1" fill="${t.azure}"/><text x="9" y="5" fill="${t.text}">Android</text><text x="35" y="5" fill="${t.muted}" text-anchor="end">25%</text></g>\n      <g transform="translate(0, 22)"><rect width="6" height="6" rx="1" fill="${t.yellow}"/><text x="9" y="5" fill="${t.text}">Desktop</text><text x="35" y="5" fill="${t.muted}" text-anchor="end">20%</text></g>\n      <g transform="translate(0, 33)"><rect width="6" height="6" rx="1" fill="${t.purple}"/><text x="9" y="5" fill="${t.text}">Tablet</text><text x="35" y="5" fill="${t.muted}" text-anchor="end">15%</text></g>\n    </g>\n  </g>\n\n  \x3c!-- Wide line chart --\x3e\n  <g transform="translate(70, 178)">\n    <rect width="325" height="115" rx="4" fill="${t.surface}" stroke="${t.border}"/>\n    <rect x="10" y="10" width="80" height="6" rx="1" fill="${t.text}"/>\n    <rect x="10" y="20" width="50" height="3" rx="1" fill="${t.muted}"/>\n    <line x1="14" y1="60" x2="315" y2="60" stroke="${t.border}" stroke-dasharray="2,2"/>\n    <line x1="14" y1="80" x2="315" y2="80" stroke="${t.border}" stroke-dasharray="2,2"/>\n    <polygon points="14,95 50,80 86,82 122,68 158,72 194,55 230,60 266,42 302,38 314,40 314,100 14,100" fill="${t.primary}" fill-opacity="0.12"/>\n    <polyline points="14,95 50,80 86,82 122,68 158,72 194,55 230,60 266,42 302,38 314,40" fill="none" stroke="${t.primary}" stroke-width="2" stroke-linejoin="round"/>\n    <polyline points="14,98 50,90 86,89 122,82 158,84 194,75 230,78 266,70 302,68 314,72" fill="none" stroke="${t.azure}" stroke-width="1.5" stroke-dasharray="3,2"/>\n  </g>\n</svg>`,tables:`<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">\n  <rect width="400" height="300" fill="${t.bg}"/>\n  ${e("light")}\n\n  <g transform="translate(70, 56)">\n    <rect width="325" height="237" rx="4" fill="${t.surface}" stroke="${t.border}"/>\n    \x3c!-- Header --\x3e\n    <rect x="14" y="12" width="60" height="6" rx="1" fill="${t.text}"/>\n    <rect x="14" y="22" width="40" height="3" rx="1" fill="${t.muted}"/>\n    \x3c!-- Search --\x3e\n    <rect x="220" y="12" width="90" height="14" rx="3" fill="${t.bg}"/>\n    <rect x="226" y="17" width="60" height="4" rx="1" fill="${t.muted}"/>\n    \x3c!-- Table head --\x3e\n    <rect x="14" y="40" width="297" height="18" rx="2" fill="${t.bg}"/>\n    ${["Order","Customer","Product","Status","Date"].map((e,r)=>`\n      <text x="${22+60*r}" y="51" font-size="6" font-weight="600" fill="${t.muted}" font-family="Inter,sans-serif">${e}</text>\n    `).join("")}\n    \x3c!-- Rows --\x3e\n    ${[{id:"#7841",c:"JD",cb:t.primary,p:"AdminLTE Pro",s:"Paid",sb:t.green,d:"Apr 28"},{id:"#7840",c:"AS",cb:t.azure,p:"Gentelella Theme",s:"Processing",sb:t.blue,d:"Apr 27"},{id:"#7839",c:"RJ",cb:t.purple,p:"Dashboard Pack",s:"Paid",sb:t.green,d:"Apr 27"},{id:"#7838",c:"EW",cb:t.yellow,p:"ArchitectUI",s:"Pending",sb:t.yellow,d:"Apr 26"},{id:"#7837",c:"MK",cb:t.red,p:"Bootstrap Bundle",s:"Cancelled",sb:t.red,d:"Apr 25"},{id:"#7836",c:"LP",cb:t.green,p:"UI Kit Pro",s:"Paid",sb:t.green,d:"Apr 25"},{id:"#7835",c:"DR",cb:t.blue,p:"Vue Admin",s:"Paid",sb:t.green,d:"Apr 24"},{id:"#7834",c:"YT",cb:t.primary,p:"React Dash",s:"Processing",sb:t.blue,d:"Apr 24"}].map((e,r)=>`\n      <g transform="translate(0, ${68+21*r})">\n        <text x="22" y="7" font-size="6" font-weight="600" fill="${t.primary}" font-family="Inter,sans-serif">${e.id}</text>\n        <circle cx="84" cy="5" r="5" fill="${e.cb}"/>\n        <text x="84" y="7" font-size="4.5" font-weight="700" fill="white" text-anchor="middle" font-family="Inter,sans-serif">${e.c}</text>\n        <text x="142" y="7" font-size="6" fill="${t.text}" font-family="Inter,sans-serif">${e.p}</text>\n        <rect x="200" y="0" width="40" height="11" rx="3" fill="${e.sb}" fill-opacity="0.16"/>\n        <text x="220" y="7.5" font-size="5.5" font-weight="600" fill="${e.sb}" text-anchor="middle" font-family="Inter,sans-serif">${e.s}</text>\n        <text x="262" y="7" font-size="5.5" fill="${t.muted}" font-family="Inter,sans-serif">${e.d}</text>\n        <line x1="14" y1="14" x2="311" y2="14" stroke="${t.border}" stroke-opacity="0.5"/>\n      </g>\n    `).join("")}\n  </g>\n</svg>`,dark:`<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">\n  <rect width="400" height="300" fill="${t.bgDark}"/>\n  ${e("dark")}\n  ${r(70,56,t.primary,"dark")}\n  ${r(180,56,t.azure,"dark")}\n  ${r(290,56,t.purple,"dark")}\n\n  <g transform="translate(70, 122)">\n    <rect width="215" height="170" rx="4" fill="${t.surfaceDk2}" stroke="${t.borderDark}"/>\n    <rect x="12" y="12" width="80" height="6" rx="1" fill="${t.textDark}"/>\n    <rect x="12" y="22" width="50" height="3" rx="1" fill="${t.mutedDark}"/>\n    <line x1="20" y1="60"  x2="200" y2="60"  stroke="${t.borderDark}" stroke-dasharray="2,2"/>\n    <line x1="20" y1="90"  x2="200" y2="90"  stroke="${t.borderDark}" stroke-dasharray="2,2"/>\n    <line x1="20" y1="120" x2="200" y2="120" stroke="${t.borderDark}" stroke-dasharray="2,2"/>\n    <polygon points="20,128 50,108 80,118 110,88 140,98 170,68 200,58 200,150 20,150" fill="${t.primary}" fill-opacity="0.22"/>\n    <polyline points="20,128 50,108 80,118 110,88 140,98 170,68 200,58" fill="none" stroke="${t.primary}" stroke-width="2" stroke-linejoin="round"/>\n    <polyline points="20,138 50,128 80,132 110,118 140,122 170,108 200,103" fill="none" stroke="${t.azure}" stroke-width="1.5" stroke-dasharray="3,2"/>\n  </g>\n\n  <g transform="translate(295, 122)">\n    <rect width="100" height="170" rx="4" fill="${t.surfaceDk2}" stroke="${t.borderDark}"/>\n    <rect x="10" y="12" width="55" height="6" rx="1" fill="${t.textDark}"/>\n    ${[{y:28,c:t.primary,w:60},{y:50,c:t.azure,w:50},{y:72,c:t.green,w:56},{y:94,c:t.yellow,w:48},{y:116,c:t.purple,w:52},{y:138,c:t.red,w:56}].map(e=>`\n      <g transform="translate(10, ${e.y})">\n        <circle cx="9" cy="9" r="7" fill="${e.c}" fill-opacity="0.85"/>\n        <rect x="22" y="5" width="${e.w}" height="3" rx="1" fill="${t.textDark}"/>\n        <rect x="22" y="11" width="${Math.round(.6*e.w)}" height="2.5" rx="1" fill="${t.mutedDark}"/>\n      </g>\n    `).join("")}\n  </g>\n</svg>`,mobile:`<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">\n  <defs>\n    <linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1">\n      <stop offset="0%" stop-color="${t.primary}" stop-opacity="0.06"/>\n      <stop offset="100%" stop-color="${t.azure}" stop-opacity="0.06"/>\n    </linearGradient>\n  </defs>\n  <rect width="400" height="300" fill="url(#bgGrad)"/>\n  <rect width="400" height="300" fill="${t.bg}" fill-opacity="0.7"/>\n\n  \x3c!-- Phone frame --\x3e\n  <g transform="translate(140, 16)">\n    <rect width="120" height="268" rx="18" fill="#0f1623" stroke="#1a2332" stroke-width="2"/>\n    <rect x="6" y="6" width="108" height="256" rx="12" fill="${t.bg}"/>\n    \x3c!-- Notch --\x3e\n    <rect x="50" y="6" width="20" height="4" rx="2" fill="#0f1623"/>\n\n    \x3c!-- Mobile topbar --\x3e\n    <rect x="6" y="14" width="108" height="20" fill="${t.surface}"/>\n    <line x1="6" y1="34" x2="114" y2="34" stroke="${t.border}"/>\n    <rect x="12" y="22" width="16" height="3" rx="1" fill="${t.muted}"/>\n    <rect x="32" y="20" width="36" height="6" rx="1" fill="${t.text}"/>\n    <circle cx="100" cy="24" r="5" fill="${t.primary}"/>\n\n    \x3c!-- Stat cards stacked --\x3e\n    <g transform="translate(12, 42)">\n      <rect width="96" height="36" rx="3" fill="${t.surface}" stroke="${t.border}"/>\n      <circle cx="14" cy="18" r="8" fill="${t.primary}" fill-opacity="0.14"/>\n      <rect x="8" y="14" width="12" height="8" rx="1" fill="${t.primary}"/>\n      <rect x="28" y="11" width="36" height="3" rx="1" fill="${t.muted}"/>\n      <rect x="28" y="19" width="24" height="7" rx="1" fill="${t.text}"/>\n      <rect x="28" y="29" width="44" height="2.5" rx="1" fill="${t.muted}"/>\n    </g>\n    <g transform="translate(12, 84)">\n      <rect width="96" height="36" rx="3" fill="${t.surface}" stroke="${t.border}"/>\n      <circle cx="14" cy="18" r="8" fill="${t.azure}" fill-opacity="0.14"/>\n      <rect x="8" y="14" width="12" height="8" rx="1" fill="${t.azure}"/>\n      <rect x="28" y="11" width="36" height="3" rx="1" fill="${t.muted}"/>\n      <rect x="28" y="19" width="28" height="7" rx="1" fill="${t.text}"/>\n      <rect x="28" y="29" width="44" height="2.5" rx="1" fill="${t.muted}"/>\n    </g>\n\n    \x3c!-- Chart card --\x3e\n    <g transform="translate(12, 126)">\n      <rect width="96" height="80" rx="3" fill="${t.surface}" stroke="${t.border}"/>\n      <rect x="6" y="8" width="56" height="4" rx="1" fill="${t.text}"/>\n      <rect x="6" y="16" width="40" height="2.5" rx="1" fill="${t.muted}"/>\n      <polygon points="6,68 18,58 30,62 42,48 54,52 66,38 78,32 90,28 90,72 6,72" fill="${t.primary}" fill-opacity="0.16"/>\n      <polyline points="6,68 18,58 30,62 42,48 54,52 66,38 78,32 90,28" fill="none" stroke="${t.primary}" stroke-width="1.5" stroke-linejoin="round"/>\n    </g>\n\n    \x3c!-- Activity rows --\x3e\n    <g transform="translate(12, 212)">\n      ${[t.azure,t.yellow,t.purple].map((e,r)=>`\n        <g transform="translate(0, ${14*r})">\n          <circle cx="6" cy="6" r="4" fill="${e}"/>\n          <rect x="14" y="3" width="60" height="2.5" rx="1" fill="${t.text}"/>\n          <rect x="14" y="8" width="40" height="2" rx="1" fill="${t.muted}"/>\n        </g>\n      `).join("")}\n    </g>\n\n    \x3c!-- Home indicator --\x3e\n    <rect x="46" y="252" width="28" height="3" rx="1.5" fill="#0f1623" fill-opacity="0.4"/>\n  </g>\n\n  \x3c!-- Decorative scattered dots --\x3e\n  <g fill="${t.primary}" fill-opacity="0.15">\n    <circle cx="40" cy="60" r="3"/>\n    <circle cx="80" cy="240" r="2.5"/>\n    <circle cx="320" cy="80" r="3"/>\n    <circle cx="360" cy="220" r="2"/>\n    <circle cx="50" cy="200" r="2"/>\n  </g>\n</svg>`},l={bars:`<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">\n    <rect width="200" height="150" fill="${t.surface}"/>\n    <rect width="200" height="22" fill="${t.surfaceDark}"/>\n    <rect x="10" y="8" width="6" height="6" rx="1" fill="${t.primary}"/>\n    <rect x="20" y="9" width="40" height="4" rx="1" fill="white" fill-opacity="0.9"/>\n    <circle cx="186" cy="11" r="4" fill="${t.primary}"/>\n    <rect x="10" y="34" width="50" height="14" rx="2" fill="${t.text}"/>\n    ${[24,38,30,56,48,70,60,80].map((e,r)=>`\n      <rect x="${12+22*r}" y="${136-e}" width="16" height="${e}" rx="2" fill="${[t.primary,t.azure,t.yellow,t.green,t.purple,t.red,t.primary,t.azure][r]}"/>\n    `).join("")}\n  </svg>`,donut:`<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">\n    <rect width="200" height="150" fill="${t.surface}"/>\n    <rect width="200" height="22" fill="${t.surfaceDark}"/>\n    <rect x="10" y="8" width="6" height="6" rx="1" fill="${t.primary}"/>\n    <rect x="20" y="9" width="40" height="4" rx="1" fill="white" fill-opacity="0.9"/>\n    <circle cx="186" cy="11" r="4" fill="${t.primary}"/>\n    <circle cx="100" cy="86" r="42" fill="none" stroke="${t.bg}" stroke-width="18"/>\n    <circle cx="100" cy="86" r="42" fill="none" stroke="${t.primary}" stroke-width="18" stroke-dasharray="105 264" transform="rotate(-90 100 86)"/>\n    <circle cx="100" cy="86" r="42" fill="none" stroke="${t.azure}"   stroke-width="18" stroke-dasharray="55 264" stroke-dashoffset="-105" transform="rotate(-90 100 86)"/>\n    <circle cx="100" cy="86" r="42" fill="none" stroke="${t.yellow}"  stroke-width="18" stroke-dasharray="40 264" stroke-dashoffset="-160" transform="rotate(-90 100 86)"/>\n    <text x="100" y="84" font-size="14" font-weight="700" fill="${t.text}" text-anchor="middle" font-family="Inter,sans-serif">8.4k</text>\n    <text x="100" y="96" font-size="6" fill="${t.muted}" text-anchor="middle" font-family="Inter,sans-serif">devices</text>\n  </svg>`,table:`<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">\n    <rect width="200" height="150" fill="${t.surface}"/>\n    <rect width="200" height="22" fill="${t.surfaceDark}"/>\n    <rect x="10" y="8" width="6" height="6" rx="1" fill="${t.primary}"/>\n    <rect x="20" y="9" width="40" height="4" rx="1" fill="white" fill-opacity="0.9"/>\n    <circle cx="186" cy="11" r="4" fill="${t.primary}"/>\n    <rect x="10" y="32" width="180" height="10" rx="2" fill="${t.bg}"/>\n    ${[0,1,2,3,4,5].map(e=>`\n      <g transform="translate(10, ${48+16*e})">\n        <circle cx="6" cy="6" r="5" fill="${[t.primary,t.azure,t.purple,t.yellow,t.red,t.green][e]}"/>\n        <rect x="16" y="3" width="50" height="3" rx="1" fill="${t.text}"/>\n        <rect x="16" y="9" width="36" height="2.5" rx="1" fill="${t.muted}"/>\n        <rect x="120" y="2" width="38" height="9" rx="2" fill="${[t.green,t.blue,t.green,t.yellow,t.red,t.green][e]}" fill-opacity="0.18"/>\n        <rect x="170" y="5" width="14" height="3" rx="1" fill="${t.muted}"/>\n      </g>\n    `).join("")}\n  </svg>`,forms:`<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%">\n    <rect width="200" height="150" fill="${t.surface}"/>\n    <rect width="200" height="22" fill="${t.surfaceDark}"/>\n    <rect x="10" y="8" width="6" height="6" rx="1" fill="${t.primary}"/>\n    <rect x="20" y="9" width="40" height="4" rx="1" fill="white" fill-opacity="0.9"/>\n    <circle cx="186" cy="11" r="4" fill="${t.primary}"/>\n    <rect x="10" y="32" width="60" height="6" rx="1" fill="${t.text}"/>\n    <rect x="10" y="46" width="180" height="14" rx="2" fill="${t.bg}" stroke="${t.border}"/>\n    <rect x="10" y="66" width="40" height="3" rx="1" fill="${t.muted}"/>\n    <rect x="10" y="74" width="180" height="14" rx="2" fill="${t.bg}" stroke="${t.border}"/>\n    <rect x="10" y="94" width="50" height="3" rx="1" fill="${t.muted}"/>\n    <rect x="10" y="102" width="180" height="24" rx="2" fill="${t.bg}" stroke="${t.border}"/>\n    <rect x="10" y="132" width="60" height="12" rx="2" fill="${t.primary}"/>\n    <text x="40" y="141" font-size="6" font-weight="600" fill="white" text-anchor="middle" font-family="Inter,sans-serif">Submit</text>\n  </svg>`};export{i as MOCKUPS,l as RELATED};