{"id":10,"date":"2025-10-19T10:03:00","date_gmt":"2025-10-19T10:03:00","guid":{"rendered":"https:\/\/stemvriendelijk.nl\/?page_id=10"},"modified":"2025-10-19T13:03:28","modified_gmt":"2025-10-19T13:03:28","slug":"home","status":"publish","type":"page","link":"https:\/\/stemvriendelijk.nl\/","title":{"rendered":"HOME"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"10\" class=\"elementor elementor-10\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3cbc4bd e-flex e-con-boxed e-con e-parent\" data-id=\"3cbc4bd\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-365318e elementor-widget elementor-widget-image\" data-id=\"365318e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1\" height=\"1\" src=\"https:\/\/stemvriendelijk.nl\/wp-content\/uploads\/2025\/10\/STEM-VRIENDELIJK.svg\" class=\"attachment-full size-full wp-image-30\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-028988d elementor-widget elementor-widget-text-editor\" data-id=\"028988d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<em>Je hoeft niet onvriendelijk te stemmen. Je kunt ook met je hart stemmen. Laten we daarom dit keer een beetje vriendelijker stemmen, daar wordt ons land ook leuker van.<\/em>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c404fd3 elementor-widget elementor-widget-text-editor\" data-id=\"c404fd3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Wat is vriendelijk? Niet handelen uit eigenbelang, maar vanuit de wens om bij te dragen aan een positieve, zorgzame omgeving voor iedereen. Vriendelijk is hartelijk, meelevend, attent, hoffelijk en welwillend.<\/p>\t\t\t\t\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-0c77981 e-flex e-con-boxed e-con e-parent\" data-id=\"0c77981\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f139c64 e-con-full e-flex e-con e-child\" data-id=\"f139c64\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4716c7b elementor-widget elementor-widget-html\" data-id=\"4716c7b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== STEM VRIENDELIJK \u2013 GENERATOR (mobile center tuned per ratio) ===== -->\r\n<style>\r\n  \/* Font *\/\r\n  @font-face{\r\n    font-family:\"HoralRegular\";\r\n    src:url(\"https:\/\/stemvriendelijk.nl\/wp-content\/uploads\/2025\/10\/Horal-Regular.ttf\") format(\"truetype\");\r\n    font-weight:400; font-style:normal; font-display:swap;\r\n  }\r\n\r\n  :root{\r\n    --bg:#B0DFED;     \/* achtergrond *\/\r\n    --ink:#1b2c32;    \/* tekstkleur + knoptekst *\/\r\n    --hi:#c2d630;     \/* marker + primary knopbg *\/\r\n    --cardMaxW:540px;\r\n  }\r\n\r\n  .sv-wrap{\r\n    width:min(100%,var(--cardMaxW));\r\n    margin:24px auto 40px;\r\n    font-family:\"HoralRegular\",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n    color:var(--ink);\r\n  }\r\n\r\n  \/* Controls *\/\r\n  .sv-controls{\r\n    display:grid; grid-template-columns:1fr 1fr auto auto auto;\r\n    gap:10px; align-items:end; margin-bottom:10px;\r\n  }\r\n  .sv-controls label{ font-size:13px; opacity:.7; margin-bottom:4px; display:block; }\r\n  .sv-controls input{\r\n    width:100%; padding:10px 12px; border:1px solid rgba(0,0,0,.08);\r\n    border-radius:12px; font-size:16px;\r\n  }\r\n  .sv-btn{\r\n    padding:10px 14px; border-radius:999px; border:1.5px solid var(--ink);\r\n    background:#fff; cursor:pointer; color:var(--ink);\r\n  }\r\n  .sv-btn.primary{ background:var(--hi); }\r\n\r\n  \/* Kaart *\/\r\n  .sv-card{\r\n    position:relative; width:100%; aspect-ratio:1080\/1920; \/* 9:16 default *\/\r\n    background:var(--bg);\r\n    border-radius:0; \/* geen afgeronde hoeken *\/\r\n    overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.06);\r\n  }\r\n  .mode-square .sv-card{ aspect-ratio:1\/1; }\r\n\r\n  \/* Overlay zichtbaar in UI *\/\r\n  .sv-card::after{\r\n    content:\"\"; position:absolute; inset:0;\r\n    background-image:url('https:\/\/stemvriendelijk.nl\/wp-content\/uploads\/2025\/10\/overlay-scaled.jpg');\r\n    background-repeat:no-repeat; background-size:cover; background-position:center;\r\n    mix-blend-mode:screen; opacity:.45; pointer-events:none;\r\n  }\r\n  \/* Tijdens capture overlay verbergen (tekenen we later in canvas bij) *\/\r\n  .nocap .sv-card::after { display:none !important; }\r\n\r\n  \/* Safe layer (zonder preview-lijn) *\/\r\n  .sv-safe{ position:absolute; inset:0; display:grid; place-items:center; padding:6.5% 7.5%; }\r\n\r\n  \/* Tekstblok \u2013 uniform scaling (hele blok schaalt) *\/\r\n  .sv-art{\r\n    width:100%; max-width:820px; margin:0 auto;\r\n    transform-origin:top left;\r\n    --fs:72px; font-size:var(--fs);\r\n    line-height:.95; letter-spacing:.4px;\r\n  }\r\n\r\n  .sv-row{ width:100%; margin:.12em 0; }\r\n  .inner{ display:inline-block; white-space:nowrap; }\r\n\r\n  .t-left{text-align:left;}\r\n  .t-right{text-align:right;}\r\n  .t-center{text-align:center;}\r\n\r\n  \/* Desktop\/algemeen offsets (match mock) *\/\r\n  .r1{ padding-left:8%; padding-right:8%; }   \/* LIEVE HENK *\/\r\n  .r2{ padding-right:18%; }                   \/* STEM JE *\/\r\n  .r3{ padding-left:8%; }                     \/* WEL EEN *\/\r\n  .r4{ \/* center *\/ }                         \/* BEETJE *\/\r\n  .r5{ padding-left:8%; }                     \/* VRIENDELIJK? *\/\r\n  .r6{ padding-left:8%; margin-top:.25em; }   \/* LIEFS, *\/\r\n  .r7{ padding-right:20%; }                   \/* INGRID *\/\r\n\r\n  \/* Marker *\/\r\n  .sv-mark{\r\n    display:inline-block; position:relative; color:var(--ink);\r\n    background:linear-gradient(var(--hi) 0 0) no-repeat;\r\n    background-size:100% 0.7em;\r\n    background-position:0 50%;\r\n    padding:.02em .08em; box-decoration-break:clone;\r\n  }\r\n\r\n  .sv-madeby{\r\n    position:absolute; bottom:20px; left:0; right:0; text-align:center;\r\n    font-size:22px; letter-spacing:1px; opacity:.45; text-transform:uppercase;\r\n  }\r\n  .mode-square .sv-madeby{ text-align:left; left:8%; right:auto; font-size:16px; }\r\n\r\n  \/* ===== Mobiel: UI stack + centrering afgesteld ===== *\/\r\n  @media (max-width:768px){\r\n    :root{ --cardMaxW: 96vw; }\r\n\r\n    \/* Controls onder elkaar + full width knoppen *\/\r\n    .sv-controls{\r\n      grid-template-columns:1fr;\r\n      grid-template-areas:\r\n        \"to\" \"from\" \"ratio\" \"share\" \"dl\";\r\n    }\r\n    .sv-controls > :nth-child(1){ grid-area: to; }\r\n    .sv-controls > :nth-child(2){ grid-area: from; }\r\n    .sv-controls > :nth-child(3){ grid-area: ratio; }\r\n    .sv-controls > :nth-child(4){ grid-area: share; }\r\n    .sv-controls > :nth-child(5){ grid-area: dl; }\r\n    .sv-controls .sv-btn{ width:100%; }\r\n\r\n    \/* \u2014 Mobiel 9:16: stond iets te ver naar rechts \u2192 push iets naar links \u2014 *\/\r\n .sv-safe{ padding:6.5% 15% 6.5% 4.5%; } \/* top right bottom left *\/\r\n    .r1{ padding-left:7%;  padding-right:10%; }\r\n    .r2{ padding-right:16%; } \/* iets extra rechts \u2192 hele compositie iets naar links *\/\r\n    .r3{ padding-left:7%;  }\r\n    .r5{ padding-left:7%;  }\r\n    .r6{ padding-left:7%;  }\r\n    .r7{ padding-right:18%; }\r\n\r\n    \/* \u2014 Mobiel 1:1: stond iets te ver naar links \u2192 push iets naar rechts \u2014 *\/\r\n    .mode-square .sv-safe{ padding:7% 7% 7% 9%; } \/* meer links-padding, minder rechts *\/\r\n    .mode-square .r1{ padding-left:9%;  padding-right:8%; }\r\n    .mode-square .r2{ padding-right:12%; }\r\n    .mode-square .r3{ padding-left:9%;  }\r\n    .mode-square .r5{ padding-left:9%;  }\r\n    .mode-square .r6{ padding-left:9%;  }\r\n    .mode-square .r7{ padding-right:14%; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"sv-wrap\" id=\"svApp\">\r\n  <!-- Controls -->\r\n  <div class=\"sv-controls\">\r\n    <div>\r\n      <label for=\"toName\">Voor wie is je boodschap?<\/label>\r\n      <input id=\"toName\" type=\"text\" value=\"Henk\" maxlength=\"18\">\r\n    <\/div>\r\n    <div>\r\n      <label for=\"fromName\">Van wie komt-ie?<\/label>\r\n      <input id=\"fromName\" type=\"text\" value=\"Ingrid\" maxlength=\"18\">\r\n    <\/div>\r\n    <button class=\"sv-btn\" id=\"ratioBtn\" type=\"button\" aria-pressed=\"false\">9:16<\/button>\r\n    <button class=\"sv-btn\" id=\"shareBtn\" type=\"button\">Deel<\/button>\r\n    <button class=\"sv-btn primary\" id=\"dlBtn\" type=\"button\">Download<\/button>\r\n  <\/div>\r\n\r\n  <!-- Kaart -->\r\n  <div class=\"sv-card\" id=\"svCard\">\r\n    <div class=\"sv-safe\">\r\n      <div class=\"sv-art\" id=\"svArt\">\r\n        <div class=\"sv-row r1 t-left\"><span class=\"inner\">LIEVE <span class=\"sv-mark\" id=\"nameTop\">HENK<\/span>,<\/span><\/div>\r\n        <div class=\"sv-row r2 t-right\"><span class=\"inner\">STEM JE<\/span><\/div>\r\n        <div class=\"sv-row r3 t-left\"><span class=\"inner\"><span class=\"sv-mark\">WEL<\/span> EEN<\/span><\/div>\r\n        <div class=\"sv-row r4 t-center\"><span class=\"inner\">BEETJE<\/span><\/div>\r\n        <div class=\"sv-row r5 t-left\"><span class=\"inner\">VRIENDELIJK?<\/span><\/div>\r\n        <div class=\"sv-row r6 t-left\"><span class=\"inner\">LIEFS,<\/span><\/div>\r\n        <div class=\"sv-row r7 t-right\"><span class=\"inner sv-mark\" id=\"nameBottom\">INGRID<\/span><\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"sv-madeby\">#STEMVRIENDELIJK<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- html2canvas -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/html2canvas@1.4.1\/dist\/html2canvas.min.js\" defer><\/script>\r\n\r\n<script>\r\n(function(){\r\n  const el=(s,r=document)=>r.querySelector(s);\r\n  const els=(s,r=document)=>Array.from(r.querySelectorAll(s));\r\n\r\n  const $wrap=el('#svApp'), $card=el('#svCard'), $art=el('#svArt');\r\n  const $to=el('#toName'), $from=el('#fromName');\r\n  const $top=el('#nameTop'), $bot=el('#nameBottom');\r\n  const $ratio=el('#ratioBtn'), $share=el('#shareBtn'), $dl=el('#dlBtn');\r\n\r\n  let squareMode=false;\r\n\r\n  \/* UA detectie *\/\r\n  const ua = navigator.userAgent || '';\r\n  const isIOS = \/iPad|iPhone|iPod\/.test(ua) || (navigator.platform==='MacIntel' && navigator.maxTouchPoints>1);\r\n  const isAndroid = \/Android\/.test(ua);\r\n  const isIOSChrome = \/CriOS\/.test(ua);\r\n\r\n  \/* Uniform scaling *\/\r\n  function uniformFit(){\r\n    const startPx=72;\r\n    $art.style.setProperty('--fs', startPx+'px');\r\n    const safe=el('.sv-safe');\r\n    const availW=safe.clientWidth*0.86;\r\n    const availH=safe.clientHeight*0.86;\r\n    const widths=els('.sv-row .inner',$art).map(n=>n.getBoundingClientRect().width);\r\n    const maxLineW=Math.max(...widths);\r\n    const blockH=$art.getBoundingClientRect().height;\r\n    const fx=availW\/maxLineW, fy=availH\/blockH, f=Math.min(1,fx,fy);\r\n    $art.style.setProperty('--fs',(startPx*f)+'px');\r\n  }\r\n\r\n  function setText(target,value,fallback){\r\n    const val=(value||'').trim();\r\n    target.textContent=(val||fallback).toUpperCase();\r\n  }\r\n\r\n  function update(){\r\n    setText($top,$to.value,'HENK');\r\n    setText($bot,$from.value,'INGRID');\r\n    requestAnimationFrame(uniformFit);\r\n  }\r\n\r\n  function toggleRatio(){\r\n    squareMode=!squareMode;\r\n    $wrap.classList.toggle('mode-square', squareMode);\r\n    $ratio.textContent = squareMode ? '1:1' : '9:16';\r\n    $ratio.setAttribute('aria-pressed', String(squareMode));\r\n    update();\r\n  }\r\n\r\n  \/* Overlay tekenen in export (voorkomt donkere downloads) *\/\r\n  const OVERLAY_URL='https:\/\/stemvriendelijk.nl\/wp-content\/uploads\/2025\/10\/overlay-scaled.jpg';\r\n\r\n  function loadImage(url){\r\n    return new Promise((res,rej)=>{\r\n      const img=new Image();\r\n      img.crossOrigin='anonymous';\r\n      img.onload=()=>res(img);\r\n      img.onerror=rej;\r\n      img.src=url;\r\n    });\r\n  }\r\n  function drawOverlayCover(ctx, canvas, img){\r\n    const cw=canvas.width, ch=canvas.height;\r\n    const ir=img.width\/img.height, cr=cw\/ch;\r\n    let w,h,x,y;\r\n    if(cr>ir){ w=cw; h=cw\/ir; x=0; y=(ch-h)\/2; }\r\n    else     { h=ch; w=ch*ir; x=(cw-w)\/2; y=0; }\r\n    ctx.save();\r\n    ctx.globalCompositeOperation='screen';\r\n    ctx.drawImage(img,x,y,w,h);\r\n    ctx.restore();\r\n  }\r\n\r\n  async function renderCanvas(){\r\n    if(document.fonts && document.fonts.ready){ try{ await document.fonts.ready; }catch(e){} }\r\n    const scale = isIOS ? 1.75 : (isAndroid ? 2.25 : 3);\r\n    $wrap.classList.add('nocap');\r\n    await new Promise(r=>setTimeout(r,16));\r\n    const canvas = await html2canvas($card,{ backgroundColor:null, scale, useCORS:true });\r\n    $wrap.classList.remove('nocap');\r\n    try{\r\n      const ctx=canvas.getContext('2d');\r\n      const img=await loadImage(OVERLAY_URL);\r\n      drawOverlayCover(ctx, canvas, img);\r\n    }catch(e){}\r\n    return canvas;\r\n  }\r\n\r\n  async function downloadCard(){\r\n    const canvas=await renderCanvas();\r\n    const to=($to.value||'Henk').trim();\r\n    const from=($from.value||'Ingrid').trim();\r\n    canvas.toBlob(blob=>{\r\n      const url=URL.createObjectURL(blob);\r\n      const a=document.createElement('a');\r\n      a.href=url;\r\n      a.download=`StemVriendelijk_${squareMode?'1x1':'9x16'}_${to}_van_${from}.png`;\r\n      if(isIOS){\r\n        window.open(url,'_blank');\r\n        setTimeout(()=>URL.revokeObjectURL(url),3000);\r\n      } else {\r\n        document.body.appendChild(a); a.click(); a.remove();\r\n        URL.revokeObjectURL(url);\r\n      }\r\n    },'image\/png');\r\n  }\r\n\r\n  async function shareCard(){\r\n    const canvas=await renderCanvas();\r\n    const to=($to.value||'Henk').trim();\r\n    const from=($from.value||'Ingrid').trim();\r\n    const title='Stem Vriendelijk';\r\n    const text=`Lieve ${to}, stem je dit keer wel een beetje vriendelijk? Liefs, ${from} #StemVriendelijk`;\r\n    const blob = await new Promise(res=>canvas.toBlob(res,'image\/png'));\r\n    const file = new File([blob], `stemvriendelijk_${to}_van_${from}.png`, { type:'image\/png' });\r\n    try{\r\n      if ((navigator.canShare && navigator.canShare({ files:[file] })) || (isIOSChrome && navigator.share)){\r\n        await navigator.share({ files:[file], title, text });\r\n        return;\r\n      }\r\n    }catch(e){}\r\n    const url = URL.createObjectURL(blob);\r\n    window.location.href = url; \/\/ fallback: toon afbeelding -> iOS\/Android share\/opslaan\r\n  }\r\n\r\n  $to.addEventListener('input', update);\r\n  $from.addEventListener('input', update);\r\n  $ratio.addEventListener('click', toggleRatio);\r\n  $dl.addEventListener('click', downloadCard);\r\n  $share.addEventListener('click', shareCard);\r\n\r\n  window.addEventListener('load', update);\r\n  window.addEventListener('resize', uniformFit);\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b5340e9 e-con-full e-flex e-con e-child\" data-id=\"b5340e9\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c2ef72 elementor-widget elementor-widget-heading\" data-id=\"9c2ef72\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Ken jij iemand die wel een beetje vriendelijker kan stemmen?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c22080 elementor-widget elementor-widget-text-editor\" data-id=\"5c22080\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Maak hier dan jouw eigen aanmoediging.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\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-ef94b10 e-flex e-con-boxed e-con e-parent\" data-id=\"ef94b10\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3ca1f5 elementor-widget elementor-widget-text-editor\" data-id=\"d3ca1f5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"text-decoration: underline;\"><a href=\"mailto:info@stemvriendelijk.nl\">info@stemvriendelijk.nl<\/a><\/span><\/p>\t\t\t\t\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>Je hoeft niet onvriendelijk te stemmen. Je kunt ook met je hart stemmen. Laten we daarom dit keer een beetje vriendelijker stemmen, daar wordt ons land ook leuker van. Wat is vriendelijk? Niet handelen uit eigenbelang, maar vanuit de wens om bij te dragen aan een positieve, zorgzame omgeving voor iedereen. Vriendelijk is hartelijk, meelevend, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":83,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"elementor_canvas","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-10","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/stemvriendelijk.nl\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stemvriendelijk.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stemvriendelijk.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stemvriendelijk.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stemvriendelijk.nl\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":107,"href":"https:\/\/stemvriendelijk.nl\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/stemvriendelijk.nl\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/140"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stemvriendelijk.nl\/index.php\/wp-json\/wp\/v2\/media\/83"}],"wp:attachment":[{"href":"https:\/\/stemvriendelijk.nl\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}