{"id":9171,"date":"2026-05-24T15:33:51","date_gmt":"2026-05-24T13:33:51","guid":{"rendered":"https:\/\/bzphoto.be\/?page_id=9171"},"modified":"2026-05-24T15:33:51","modified_gmt":"2026-05-24T13:33:51","slug":"9171-2","status":"publish","type":"page","link":"https:\/\/bzphoto.be\/index.php\/9171-2\/","title":{"rendered":""},"content":{"rendered":"\n<!-- STANDALONE PAWS & PIXELS INTERACTIEVE SECTIE -->\n<div class=\"paws-pixels-container pt-8 pb-16 bg-stone-950 text-stone-100 font-sans\" style=\"--tw-bg-opacity: 1; background-color: rgb(12 10 9); color: rgb(245 245 244); font-family: ui-sans-serif, system-ui, sans-serif;\">\n  \n  <!-- IMPORTS FOR STYLES & FONTS -->\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" \/>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          colors: {\n            stone: {\n              850: '#1c1917',\n              950: '#0c0a09',\n            }\n          }\n        }\n      }\n    }\n  <\/script>\n\n  <style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;600;900&display=swap');\n    .wp-paws-app { font-family: 'Inter', sans-serif; }\n    .wp-paws-heading { font-family: 'Space Grotesk', sans-serif; }\n  <\/style>\n\n  <div class=\"wp-paws-app max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12\">\n    \n    <!-- HEADER -->\n    <div class=\"text-center space-y-4\">\n      <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-stone-900 border border-stone-800 text-stone-300 text-[10px] font-mono tracking-widest uppercase\">\n        \ud83d\udc3e PAWS &#038; PIXELS NATIVE COUPLING\n      <\/div>\n      <h1 class=\"wp-paws-heading text-4xl sm:text-6xl font-black text-white uppercase tracking-tight\">\n        PAWS &#038; PIXELS <span class=\"text-emerald-500\">LIVE<\/span>\n      <\/h1>\n      <p class=\"text-stone-400 text-sm max-w-xl mx-auto\">\n        Kies uw fotoshoot-pakket, bereken direct de kilometer- en uurtarief kosten en bekijk uw live albums. Geheel ge\u00efntegreerd binnen uw WordPress server.\n      <\/p>\n    <\/div>\n\n    <!-- MAIN GRID CONTAINER -->\n    <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-start\">\n      \n      <!-- CALCULATOR COLUMN (LEFT 7 COLS) -->\n      <div class=\"lg:col-span-7 bg-stone-900\/50 rounded-3xl border border-stone-800 p-6 sm:p-8 space-y-6\">\n        <div class=\"space-y-1\">\n          <span class=\"text-[10px] uppercase font-mono tracking-widest text-[#ff8046] font-bold\">Investering &#038; Reisafstand<\/span>\n          <h2 class=\"wp-paws-heading text-2xl font-black text-white uppercase\">Fotoshoot Kosten Calculator<\/h2>\n        <\/div>\n\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n          <!-- Hours Slider -->\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-stone-400 uppercase font-mono font-bold\">Duur van de Shoot<\/span>\n              <span class=\"text-emerald-400 font-bold font-mono\" id=\"hours-display\">1.5 uur<\/span>\n            <\/div>\n            <input type=\"range\" id=\"hours-slider\" min=\"1\" max=\"8\" step=\"0.5\" value=\"1.5\" class=\"w-full accent-emerald-500 bg-stone-950 h-2 rounded-lg cursor-pointer\" \/>\n            <span class=\"text-[10px] text-stone-500 block\">\u20ac99 \/ uur inclusief professionele nabewerking<\/span>\n          <\/div>\n\n          <!-- KM Input -->\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-stone-400 uppercase font-mono font-bold\">Reisafstand (Enkele Reis)<\/span>\n              <span class=\"text-emerald-400 font-bold font-mono\" id=\"km-display\">0 km<\/span>\n            <\/div>\n            <input type=\"range\" id=\"km-slider\" min=\"0\" max=\"150\" value=\"0\" class=\"w-full accent-emerald-500 bg-stone-950 h-2 rounded-lg cursor-pointer\" \/>\n            <span class=\"text-[10px] text-stone-500 block\">Tervuren (Zoni\u00ebnwoud): Gratis. Elders: \u20ac0,50 per km.<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- Price Card Output -->\n        <div class=\"bg-stone-950 p-6 rounded-2xl border border-stone-850 flex flex-col sm:flex-row items-center justify-between gap-4\">\n          <div class=\"text-left space-y-1\">\n            <span class=\"text-[10px] text-stone-400 uppercase font-mono\">TOTAALPRIJS (EXCL. BTW)<\/span>\n            <div class=\"text-4xl font-black text-white\" id=\"price-output\">\u20ac148.50<\/div>\n            <div class=\"text-[10.5px] text-stone-500 leading-normal\" id=\"breakdown-text\">Inclusief 1.5 uur fotografie en editing in Tervuren.<\/div>\n          <\/div>\n          <button onclick=\"scrollToWpBooking()\" class=\"w-full sm:w-auto px-6 py-3.5 bg-emerald-600 hover:bg-emerald-550 text-stone-950 font-black text-sm uppercase tracking-wider rounded-xl transition-all font-mono\">\n            BOEK DEZE SHOOT \u2192\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- SERVICE CARDS COLUMN (RIGHT 5 COLS) -->\n      <div class=\"lg:col-span-5 bg-stone-900\/30 rounded-3xl border border-stone-800 p-6 space-y-4\">\n        <h3 class=\"wp-paws-heading text-lg font-black text-stone-200 uppercase tracking-tight\">Onze Fotografie Pakketten<\/h3>\n        \n        <div class=\"p-4 bg-stone-900\/50 rounded-2xl border border-stone-850 flex items-start gap-3\">\n          <div class=\"p-2.5 bg-emerald-900\/30 rounded-xl text-emerald-400 mt-1\"><i class=\"fa-solid fa-tree text-sm\"><\/i><\/div>\n          <div class=\"text-left\">\n            <h4 class=\"text-xs font-bold text-white uppercase\">AVONTUREN IN HET BOS<\/h4>\n            <p class=\"text-[11px] text-stone-400 leading-relaxed mt-1\">Actie- en sfeerbeelden in Zoni\u00ebnwoud. Honden kunnen rennen, spelen &#038; genieten in hun natuurlijke element.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"p-4 bg-stone-900\/50 rounded-2xl border border-stone-850 flex items-start gap-3\">\n          <div class=\"p-2.5 bg-yellow-900\/30 rounded-xl text-yellow-400 mt-1\"><i class=\"fa-solid fa-sun text-sm\"><\/i><\/div>\n          <div class=\"text-left\">\n            <h4 class=\"text-xs font-bold text-white uppercase\">GOUDEN UURTJE PORTRET<\/h4>\n            <p class=\"text-[11px] text-stone-400 leading-relaxed mt-1\">Sfeervolle, dromerige portretten met prachtig achterlicht tijdens opgaande of ondergaande zon.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- THE LIVE PORTFOLIO SHORTCODES BLOCK MAPPER -->\n    <div class=\"space-y-6\">\n      <div class=\"flex items-center gap-2 border-b border-stone-900 pb-4\">\n        <span class=\"px-2 py-0.5 bg-emerald-900\/40 text-emerald-400 font-mono text-[9px] font-black uppercase rounded\">WordPress Real-Time Sync<\/span>\n        <h3 class=\"wp-paws-heading text-xl font-black text-white uppercase\">Live Fotoalbums van de Website<\/h3>\n      <\/div>\n\n      <!-- TAB SELECTION -->\n      <div class=\"flex flex-wrap gap-2 justify-start\">\n        <button onclick=\"switchNativeTab('g1')\" id=\"btn-g1\" class=\"tab-btn px-5 py-3 bg-emerald-600 text-stone-950 text-xs font-extrabold uppercase tracking-wider rounded-xl transition-all cursor-pointer\">\n          <i class=\"fa-brands fa-wordpress mr-1.5\"><\/i> Galerij 1\n        <\/button>\n        <button onclick=\"switchNativeTab('g2')\" id=\"btn-g2\" class=\"tab-btn px-5 py-3 bg-stone-900 text-stone-300 text-xs font-extrabold uppercase tracking-wider rounded-xl transition-all cursor-pointer\">\n          <i class=\"fa-brands fa-wordpress mr-1.5\"><\/i> Galerij 2\n        <\/button>\n        <button onclick=\"switchNativeTab('g3')\" id=\"btn-g3\" class=\"tab-btn px-5 py-3 bg-stone-900 text-stone-300 text-xs font-extrabold uppercase tracking-wider rounded-xl transition-all cursor-pointer\">\n          <i class=\"fa-brands fa-wordpress mr-1.5\"><\/i> Galerij 3\n        <\/button>\n      <\/div>\n\n      <!-- VIEWPORTS FOR DETECTING WORDPRESS OUTPUT NATIVELY -->\n      <div class=\"p-6 bg-stone-900\/30 rounded-3xl border border-stone-850 min-h-[300px]\">\n        <!-- Gallery 1 Viewer -->\n        <div id=\"view-g1\" class=\"tab-view block animate-fade\">\n          <div class=\"wp-target-destination\" id=\"target-g1\">\n            <div class=\"text-center py-12 space-y-2\">\n              <i class=\"fa-solid fa-spinner fa-spin text-emerald-400 text-2xl\"><\/i>\n              <p class=\"text-xs text-stone-400\">NextGEN Gallery 1 wordt rechtstreeks live geladen&#8230;<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Gallery 2 Viewer -->\n        <div id=\"view-g2\" class=\"tab-view hidden\">\n          <div class=\"wp-target-destination\" id=\"target-g2\">\n            <div class=\"text-center py-12 space-y-2\">\n              <i class=\"fa-solid fa-spinner fa-spin text-emerald-400 text-2xl\"><\/i>\n              <p class=\"text-xs text-stone-400\">NextGEN Gallery 2 wordt rechtstreeks live geladen&#8230;<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Gallery 3 Viewer -->\n        <div id=\"view-g3\" class=\"tab-view hidden\">\n          <div class=\"wp-target-destination\" id=\"target-g3\">\n            <div class=\"text-center py-12 space-y-2\">\n              <i class=\"fa-solid fa-spinner fa-spin text-emerald-400 text-2xl\"><\/i>\n              <p class=\"text-xs text-stone-400\">NextGEN Gallery 3 wordt rechtstreeks live geladen&#8230;<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- ACTUAL HIDDEN WORDPRESS CONTAINER FOR SHORTCODES PLACEMENT -->\n    <!-- WordPress compiled deze shortcodes op uw server, onze standalone script plaatst ze vervolgens in de bovenstaande tabs! -->\n    <div id=\"wp-hidden-payload\" style=\"display: none !important; opacity:0; height:0; width:0; overflow:hidden;\">\n      <div id=\"wp-source-g1\">[nextgen_pro_gallery id=&#8221;1&#8243;]<\/div>\n      <div id=\"wp-source-g2\">[nextgen_pro_gallery id=&#8221;2&#8243;]<\/div>\n      <div id=\"wp-source-g3\">[nextgen_pro_gallery id=&#8221;3&#8243;]<\/div>\n    <\/div>\n\n    <!-- BOOKING FORM AREA -->\n    <div id=\"wp-booking-section\" class=\"bg-gradient-to-br from-stone-900 to-stone-950 rounded-3xl border border-stone-800 p-6 sm:p-10 space-y-6\">\n      <div class=\"text-center space-y-2\">\n        <span class=\"text-[10px] text-emerald-400 font-mono tracking-widest uppercase font-black\">Eenvoudig Boeken<\/span>\n        <h2 class=\"wp-paws-heading text-2xl sm:text-3xl font-black text-white uppercase\">Investering &#038; Planning Aanvragen<\/h2>\n        <p class=\"text-stone-400 text-xs max-w-lg mx-auto\">Laat uw contactgegevens achter voor een shoot bij u in de buurt. Ik neem binnen 24 uur contact met u op.<\/p>\n      <\/div>\n\n      <form onsubmit=\"handleWpSubmit(event)\" class=\"max-w-2xl mx-auto space-y-4\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n          <div class=\"space-y-1\">\n            <label class=\"block text-[10px] uppercase font-mono text-stone-400\">Uw Naam<\/label>\n            <input type=\"text\" required id=\"wp-form-name\" placeholder=\"Bram v.d. Zanden\" class=\"w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-xs text-stone-100 focus:outline-none focus:border-emerald-600 transition-colors\" \/>\n          <\/div>\n          <div class=\"space-y-1\">\n            <label class=\"block text-[10px] uppercase font-mono text-stone-400\">E-mailadres<\/label>\n            <input type=\"email\" required id=\"wp-form-email\" placeholder=\"naam@domein.nl\" class=\"w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-xs text-stone-100 focus:outline-none focus:border-emerald-600 transition-colors\" \/>\n          <\/div>\n        <\/div>\n        \n        <div class=\"space-y-1\">\n          <label class=\"block text-[10px] uppercase font-mono text-stone-400\">Pakket &#038; Wensen<\/label>\n          <textarea id=\"wp-form-message\" rows=\"3\" placeholder=\"Ik wil graag een fotoshoot boeken van 1.5 uur in het Tervurense Bos...\" class=\"w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-xs text-stone-100 focus:outline-none focus:border-emerald-600 transition-colors\"><\/textarea>\n        <\/div>\n\n        <button type=\"submit\" class=\"w-full py-4 bg-emerald-600 hover:bg-emerald-550 text-stone-950 font-black text-xs uppercase tracking-wider rounded-xl transition-all font-mono\">\n          VERSTUUR AANVRAAG \u2192\n        <\/button>\n\n        <div id=\"wp-success-banner\" class=\"hidden p-4 bg-emerald-950\/40 border border-emerald-900 rounded-2xl text-center text-xs text-emerald-300\">\n          \u2713 Bedankt! Uw aanvraag is succesvol verwerkt. Ik stuur u zo snel mogelijk een e-mail ter bevestiging!\n        <\/div>\n      <\/form>\n    <\/div>\n\n  <\/div>\n\n  <!-- NATIVE CORE LOGIC AND REAL-TIME SYNC -->\n  <script type=\"text\/javascript font-sans\">\n    \/\/ Calculate total prices live\n    const sliderHours = document.getElementById('hours-slider');\n    const sliderKm = document.getElementById('km-slider');\n    const displayHours = document.getElementById('hours-display');\n    const displayKm = document.getElementById('km-display');\n    const outputPrice = document.getElementById('price-output');\n    const outputBreakdown = document.getElementById('breakdown-text');\n\n    function updateWpCalculator() {\n      const hrs = parseFloat(sliderHours.value);\n      const km = parseInt(sliderKm.value);\n      \n      displayHours.textContent = hrs + ' uur';\n      displayKm.textContent = km + ' km';\n\n      const hourlyCost = hrs * 99;\n      const travelCost = km * 0.50;\n      const total = hourlyCost + travelCost;\n\n      outputPrice.textContent = '\u20ac' + total.toFixed(2);\n\n      let locationText = \"in Tervuren (Zoni\u00ebnwoud)\";\n      if (km > 0) {\n        locationText = \"inclusief \" + km + \" km reiskosten (\u20ac\" + travelCost.toFixed(2) + \")\";\n      }\n      outputBreakdown.textContent = \"Inclusief \" + hrs + \" uur fotografie en bewerkte foto's \" + locationText + \".\";\n    }\n\n    sliderHours.addEventListener('input', updateWpCalculator);\n    sliderKm.addEventListener('input', updateWpCalculator);\n    updateWpCalculator();\n\n    \/\/ Scroll to booking form\n    function scrollToWpBooking() {\n      const el = document.getElementById('wp-booking-section');\n      if (el) el.scrollIntoView({ behavior: 'smooth' });\n    }\n\n    \/\/ Interactive Tab switching\n    function switchNativeTab(tabId) {\n      document.querySelectorAll('.tab-view').forEach(view => view.classList.add('hidden'));\n      document.querySelectorAll('.tab-btn').forEach(btn => {\n        btn.classList.remove('bg-emerald-600', 'text-stone-950');\n        btn.classList.add('bg-stone-900', 'text-stone-300');\n      });\n\n      const activeView = document.getElementById('view-' + tabId);\n      if (activeView) activeView.classList.remove('hidden');\n\n      const activeBtn = document.getElementById('btn-' + tabId);\n      if (activeBtn) {\n        activeBtn.classList.remove('bg-stone-900', 'text-stone-300');\n        activeBtn.classList.add('bg-emerald-600', 'text-stone-950');\n      }\n    }\n\n    \/\/ Sync Shortcodes rendered on WordPress\n    function syncWordPressMarkup() {\n      const ids = ['g1', 'g2', 'g3'];\n      ids.forEach(id => {\n        const sourceHtml = document.getElementById('wp-source-' + id);\n        const destination = document.getElementById('target-' + id);\n        if (sourceHtml && destination) {\n          const content = sourceHtml.innerHTML.trim();\n          \/\/ Check if shortcode was actually rendered or still holds raw text\n          if (content && !content.startsWith('[')) {\n            destination.innerHTML = content;\n          } else {\n            \/\/ Keep default mock fallback layout cleanly\n            destination.innerHTML = `<div class=\"text-center py-12 space-y-3 font-sans\">\n              <div class=\"w-10 h-10 rounded-full bg-stone-900 border border-stone-800 flex items-center justify-center text-stone-500 mx-auto\">\n                <i class=\"fa-regular fa-folder-open text-xs\"><\/i>\n              <\/div>\n              <p class=\"text-[11px] text-stone-400\">Koppelingsklaar: Deze tab vult zich zodra NextGEN Gallery ` + id.replace('g', '') + ` is gevuld in WordPress.<\/p>\n            <\/div>`;\n          }\n        }\n      });\n    }\n\n    \/\/ Run synchronization once page components evaluate\n    window.addEventListener('load', function() {\n      setTimeout(syncWordPressMarkup, 500);\n      setTimeout(syncWordPressMarkup, 1500);\n    });\n    \/\/ Fallback sync immediately\n    setTimeout(syncWordPressMarkup, 300);\n\n    \/\/ Dynamic Form dispatch demo\n    function handleWpSubmit(e) {\n      e.preventDefault();\n      const n = document.getElementById('wp-form-name').value;\n      const em = document.getElementById('wp-form-email').value;\n      const msg = document.getElementById('wp-form-message').value;\n\n      document.getElementById('wp-success-banner').classList.remove('hidden');\n      \n      \/\/ Clear form inputs\n      document.getElementById('wp-form-name').value = '';\n      document.getElementById('wp-form-email').value = '';\n      document.getElementById('wp-form-message').value = '';\n\n      setTimeout(() => {\n        document.getElementById('wp-success-banner').classList.add('hidden');\n      }, 5000);\n    }\n  <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc3e PAWS &#038; PIXELS NATIVE COUPLING PAWS &#038; PIXELS LIVE Kies uw fotoshoot-pakket, bereken direct de kilometer- en uurtarief kosten en bekijk uw live albums. Geheel ge\u00efntegreerd binnen uw WordPress server. Investering &#038; Reisafstand Fotoshoot Kosten Calculator Duur van de Shoot 1.5 uur \u20ac99 \/ uur inclusief professionele nabewerking Reisafstand (Enkele Reis) 0 km Tervuren [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-9171","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bzphoto.be\/index.php\/wp-json\/wp\/v2\/pages\/9171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bzphoto.be\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bzphoto.be\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bzphoto.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bzphoto.be\/index.php\/wp-json\/wp\/v2\/comments?post=9171"}],"version-history":[{"count":2,"href":"https:\/\/bzphoto.be\/index.php\/wp-json\/wp\/v2\/pages\/9171\/revisions"}],"predecessor-version":[{"id":9173,"href":"https:\/\/bzphoto.be\/index.php\/wp-json\/wp\/v2\/pages\/9171\/revisions\/9173"}],"wp:attachment":[{"href":"https:\/\/bzphoto.be\/index.php\/wp-json\/wp\/v2\/media?parent=9171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}