{"id":2301,"date":"2024-09-03T08:35:09","date_gmt":"2024-09-03T08:35:09","guid":{"rendered":"http:\/\/motors.loc\/motors-starter\/?page_id=2301"},"modified":"2025-12-17T16:05:20","modified_gmt":"2025-12-17T16:05:20","slug":"aanbod","status":"publish","type":"page","link":"https:\/\/snmautoworld.nl\/?page_id=2301","title":{"rendered":"Aanbod"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2301\" class=\"elementor elementor-2301\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-987c480 e-flex e-con-boxed e-con e-parent\" data-id=\"987c480\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-850fd18 elementor-widget elementor-widget-heading\" data-id=\"850fd18\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Aanbod<\/h1>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f4150de e-flex e-con-boxed e-con e-parent\" data-id=\"f4150de\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-62966ad elementor-widget elementor-widget-html\" data-id=\"62966ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* Container styling (krijgt kleuren dynamisch vanuit JS) *\/\r\n  #svm-wrap{\r\n    --svm-bg: #fff;\r\n    --svm-card: #fff;\r\n    --svm-border: rgba(0,0,0,.10);\r\n    --svm-text: rgba(0,0,0,.88);\r\n    --svm-muted: rgba(0,0,0,.55);\r\n    --svm-accent: #111827;\r\n    --svm-radius: 18px;\r\n    --svm-shadow: 0 14px 40px rgba(0,0,0,.10);\r\n    font-family: inherit;\r\n    color: var(--svm-text);\r\n  }\r\n\r\n  #svm-canvas{\r\n    position: relative;\r\n    border: 1px solid var(--svm-border);\r\n    border-radius: var(--svm-radius);\r\n    box-shadow: var(--svm-shadow);\r\n    overflow: hidden;\r\n    background: var(--svm-card);\r\n    min-height: 380px;\r\n  }\r\n\r\n  \/* Topbar (maakt het minder \u201csimpel\u201d) *\/\r\n  .svm-topbar{\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n    gap:12px;\r\n    padding:14px 16px;\r\n    border-bottom:1px solid var(--svm-border);\r\n    background: linear-gradient(180deg, rgba(0,0,0,.03), transparent);\r\n  }\r\n  .svm-topbar .title{\r\n    font-weight:700;\r\n    letter-spacing:.2px;\r\n  }\r\n  .svm-topbar .hint{\r\n    color: var(--svm-muted);\r\n    font-size: 13px;\r\n  }\r\n  .svm-pill{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:8px;\r\n    padding:8px 10px;\r\n    border-radius:999px;\r\n    border:1px solid var(--svm-border);\r\n    color: var(--svm-muted);\r\n    font-size: 13px;\r\n    user-select:none;\r\n  }\r\n  .svm-dot{\r\n    width:8px;height:8px;border-radius:50%;\r\n    background: var(--svm-accent);\r\n    box-shadow: 0 0 0 4px rgba(0,0,0,.06);\r\n  }\r\n\r\n  \/* Skeleton loading *\/\r\n  .svm-skeleton{ padding: 14px 16px 18px; }\r\n  .svm-skeleton .row{\r\n    display:grid;\r\n    grid-template-columns: 120px 1fr;\r\n    gap: 14px;\r\n    padding: 14px 0;\r\n    border-bottom: 1px solid var(--svm-border);\r\n  }\r\n  .svm-skeleton .thumb{\r\n    height: 78px; border-radius: 14px;\r\n    background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.10), rgba(0,0,0,.05));\r\n    background-size: 200% 100%;\r\n    animation: shimmer 1.2s infinite linear;\r\n  }\r\n  .svm-skeleton .line{\r\n    height: 12px; border-radius: 999px;\r\n    background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.10), rgba(0,0,0,.05));\r\n    background-size: 200% 100%;\r\n    animation: shimmer 1.2s infinite linear;\r\n    margin-top: 10px;\r\n  }\r\n  .svm-skeleton .line.w60{ width: 60%; }\r\n  .svm-skeleton .line.w85{ width: 85%; }\r\n\r\n  @keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }\r\n\r\n  .svm-error{\r\n    padding: 16px;\r\n    border-top: 1px solid var(--svm-border);\r\n    background: rgba(0,0,0,.03);\r\n  }\r\n  .svm-error strong{ color: var(--svm-accent); }\r\n  .svm-note{ color: var(--svm-muted); font-size: 14px; margin-top: 6px; }\r\n<\/style>\r\n\r\n<div id=\"svm-wrap\">\r\n  <div id=\"svm-canvas\" aria-busy=\"true\">\r\n    <div class=\"svm-topbar\">\r\n      <div>\r\n        <div class=\"title\">Actuele voorraad<\/div>\r\n        <div class=\"hint\">Direct laden vanuit UCC<\/div>\r\n      <\/div>\r\n      <div class=\"svm-pill\" title=\"Live module\">\r\n        <span class=\"svm-dot\"><\/span>\r\n        <span>Live<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"svm-skeleton\" id=\"svm-loading\">\r\n      <div class=\"row\">\r\n        <div class=\"thumb\"><\/div>\r\n        <div><div class=\"line w85\"><\/div><div class=\"line w60\"><\/div><\/div>\r\n      <\/div>\r\n      <div class=\"row\">\r\n        <div class=\"thumb\"><\/div>\r\n        <div><div class=\"line w85\"><\/div><div class=\"line w60\"><\/div><\/div>\r\n      <\/div>\r\n      <div class=\"row\" style=\"border-bottom:none;\">\r\n        <div class=\"thumb\"><\/div>\r\n        <div><div class=\"line w85\"><\/div><div class=\"line w60\"><\/div><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  const CANVAS_ID = \"svm-canvas\";\r\n  const WRAP_ID   = \"svm-wrap\";\r\n\r\n  const SCRIPT_SRC = \"https:\/\/www.ucc-voorraad.nl\/js\/svm.js\";\r\n  const ACCOUNT_ID = \"a15a\";\r\n  const BASE_URL   = \"https:\/\/www.ucc-voorraad.nl\/\";\r\n\r\n  let vm = null;\r\n\r\n  const canvas = document.getElementById(CANVAS_ID);\r\n  const wrap = document.getElementById(WRAP_ID);\r\n  if (!canvas || !wrap) return;\r\n\r\n  \/\/ --- 1) Huisstijl automatisch \u201cafkijken\u201d van je site (Elementor\/Astra\/WP presets) ---\r\n  function pickCssVar(names){\r\n    const cs = getComputedStyle(document.documentElement);\r\n    for (const n of names){\r\n      const v = cs.getPropertyValue(n).trim();\r\n      if (v) return v;\r\n    }\r\n    return \"\";\r\n  }\r\n\r\n  function applyThemeFromSite(){\r\n    const body = document.body ? getComputedStyle(document.body) : null;\r\n\r\n    const accent =\r\n      pickCssVar([\"--e-global-color-primary\",\"--ast-global-color-0\",\"--wp--preset--color--primary\"]) ||\r\n      pickCssVar([\"--e-global-color-secondary\",\"--ast-global-color-1\",\"--wp--preset--color--secondary\"]);\r\n\r\n    const text =\r\n      pickCssVar([\"--e-global-color-text\",\"--ast-global-color-3\",\"--wp--preset--color--foreground\"]) ||\r\n      (body ? body.color : \"\");\r\n\r\n    const bg =\r\n      pickCssVar([\"--e-global-color-background\",\"--ast-global-color-5\",\"--wp--preset--color--background\"]) ||\r\n      (body ? body.backgroundColor : \"\");\r\n\r\n    if (accent) wrap.style.setProperty(\"--svm-accent\", accent);\r\n    if (text)   wrap.style.setProperty(\"--svm-text\", text);\r\n\r\n    \/\/ card\/bg een tik \u201ccleaner\u201d maken dan body-bg (als body donker is)\r\n    if (bg) {\r\n      wrap.style.setProperty(\"--svm-bg\", bg);\r\n      wrap.style.setProperty(\"--svm-card\", \"#ffffff\");\r\n      \/\/ als je site echt donker is, switch dan automatisch:\r\n      if (isDark(bg)) {\r\n        wrap.style.setProperty(\"--svm-card\", \"rgba(255,255,255,.06)\");\r\n        wrap.style.setProperty(\"--svm-border\", \"rgba(255,255,255,.12)\");\r\n        wrap.style.setProperty(\"--svm-text\", \"rgba(255,255,255,.90)\");\r\n        wrap.style.setProperty(\"--svm-muted\",\"rgba(255,255,255,.60)\");\r\n        wrap.style.setProperty(\"--svm-shadow\",\"0 16px 46px rgba(0,0,0,.35)\");\r\n      }\r\n    }\r\n  }\r\n\r\n  function isDark(color){\r\n    \/\/ werkt voor rgb\/rgba; als het iets anders is: niet blokkeren\r\n    const m = color.match(\/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)\/i);\r\n    if (!m) return false;\r\n    const r = +m[1], g = +m[2], b = +m[3];\r\n    const lum = (0.2126*r + 0.7152*g + 0.0722*b) \/ 255;\r\n    return lum < 0.45;\r\n  }\r\n\r\n  \/\/ --- 2) Minder statisch: config per breedte + reageert op container-resize ---\r\n  function getConfig() {\r\n    const w = canvas.clientWidth || window.innerWidth;\r\n    const isMobile = w < 768;\r\n\r\n    return {\r\n      carousel: isMobile,\r\n      quick_search: !isMobile,\r\n      carouselOptions: isMobile ? { direction: \"horizontal\", amount: 1 } : { direction: false, amount: false }\r\n    };\r\n  }\r\n\r\n  function setWidthHint() {\r\n    if (!window.svm) return;\r\n    svm.saveUrlGetData({ key: \"svm_canvas_width\", value: Math.round(canvas.clientWidth || 0) });\r\n  }\r\n\r\n  function showError(msg) {\r\n    canvas.setAttribute(\"aria-busy\", \"false\");\r\n    const loading = document.getElementById(\"svm-loading\");\r\n    if (loading) loading.remove();\r\n\r\n    const box = document.createElement(\"div\");\r\n    box.className = \"svm-error\";\r\n    box.innerHTML = `<strong>Voorraad kon niet laden.<\/strong><div class=\"svm-note\">${msg || \"Controleer bereikbaarheid van de module.\"}<\/div>`;\r\n    canvas.appendChild(box);\r\n  }\r\n\r\n  function init() {\r\n    try {\r\n      applyThemeFromSite();\r\n      if (!window.svm) return showError(\"SVM library ontbreekt na laden van het script.\");\r\n\r\n      setWidthHint();\r\n\r\n      vm = svm.create(ACCOUNT_ID, BASE_URL, false, getConfig(), \"default\");\r\n      vm.init();\r\n\r\n      setTimeout(() => {\r\n        const loading = document.getElementById(\"svm-loading\");\r\n        if (loading) loading.remove();\r\n        canvas.setAttribute(\"aria-busy\", \"false\");\r\n      }, 150);\r\n\r\n      if (\"ResizeObserver\" in window) {\r\n        const ro = new ResizeObserver(() => {\r\n          setWidthHint();\r\n          if (vm && typeof vm.refresh === \"function\") vm.refresh();\r\n          else if (vm && typeof vm.update === \"function\") vm.update(getConfig());\r\n        });\r\n        ro.observe(canvas);\r\n      } else {\r\n        window.addEventListener(\"resize\", () => {\r\n          setWidthHint();\r\n          if (vm && typeof vm.refresh === \"function\") vm.refresh();\r\n        }, { passive: true });\r\n      }\r\n\r\n    } catch (e) {\r\n      showError(e && e.message ? e.message : \"Onbekende fout.\");\r\n    }\r\n  }\r\n\r\n  function loadScript(src, onload, onerror) {\r\n    if ([...document.scripts].some(s => s.src && s.src.includes(\"ucc-voorraad.nl\/js\/svm.js\"))) return onload();\r\n\r\n    const s = document.createElement(\"script\");\r\n    s.src = src + \"?t=\" + Date.now();\r\n    s.async = true;\r\n    s.onload = onload;\r\n    s.onerror = () => onerror && onerror();\r\n    document.head.appendChild(s);\r\n  }\r\n\r\n  loadScript(SCRIPT_SRC, init, () => showError(\"Script kon niet laden (CSP\/netwerk?).\"));\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Aanbod Actuele voorraad Direct laden vanuit UCC Live<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2301","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/snmautoworld.nl\/index.php?rest_route=\/wp\/v2\/pages\/2301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/snmautoworld.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/snmautoworld.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/snmautoworld.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/snmautoworld.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2301"}],"version-history":[{"count":58,"href":"https:\/\/snmautoworld.nl\/index.php?rest_route=\/wp\/v2\/pages\/2301\/revisions"}],"predecessor-version":[{"id":50983,"href":"https:\/\/snmautoworld.nl\/index.php?rest_route=\/wp\/v2\/pages\/2301\/revisions\/50983"}],"wp:attachment":[{"href":"https:\/\/snmautoworld.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}