 {"id":10878,"date":"2026-05-06T04:33:13","date_gmt":"2026-05-06T04:33:13","guid":{"rendered":"https:\/\/steentijdvondsten.nl\/post\/?page_id=10878"},"modified":"2026-05-07T23:52:10","modified_gmt":"2026-05-07T23:52:10","slug":"10878-2","status":"publish","type":"page","link":"https:\/\/steentijdvondsten.nl\/post\/index.php\/10878-2\/","title":{"rendered":"ArcheoMarkt"},"content":{"rendered":"\n<!-- Marktkraam afbeelding gecentreerd -->\n<img decoding=\"async\"\n  src=\"https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/05\/marktkraam-2326831925.png\"\n  alt=\"Marktkraam\"\n  id=\"marktkraam\"\n  style=\"width: 80px; height: auto; display: block; margin: 0 auto;\"\n>\n\n\n\n<div class=\"template-frame\">\n  <div class=\"afbeelding-kader\">\n    <div class=\"tekst-kader\">\n      <h1>Advertentie plaatsen<\/h1>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* Template container *\/\n.template-frame {\n  width: 100%;\n  max-width: 1200px; \/* pas aan naar de breedte van je template *\/\n  margin: 0 auto;\n}\n\n\/* Afbeelding container: altijd volledige afbeelding zichtbaar *\/\n.afbeelding-kader {\n  width: 100%;\n  aspect-ratio: 1200\/200; \/* vervang door verhouding van jouw afbeelding *\/\n  background-image: url('https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/04\/cropped-sierlijn.png');\n  background-size: contain; \/* afbeelding volledig zichtbaar *\/\n  background-repeat: no-repeat;\n  background-position: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Tekstkader strak om de tekst *\/\n.tekst-kader {\n  display: inline-block;\n  background-color: white;\n  padding: 2mm 5mm; \/* 2mm boven\/onder, 5mm links\/rechts *\/\n  text-align: center;\n  box-sizing: border-box;\n}\n\n.tekst-kader h1 {\n  margin: 0;\n  font-size: 2em;\n  word-wrap: break-word;\n  line-height: 1.2;\n}\n<\/style>\n\n\n\n<p><strong>Gratis advertentie plaatsen!<\/strong><br>Ruil, geef weg of verkoop je steentijd- en archeologie-artikelen: artefacten, boeken en meer.<br>Ge\u00efnteresseerden kunnen direct contact met je opnemen, en hun berichten ontvang je eenvoudig in je e-mailinbox. <\/p>\n\n\n\n<p>Na het plaatsen van je advertentie ontvang je een e-mail waarmee je de advertentie later kunt verwijderen. Bewaar deze e-mail goed!<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"nl\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Hoe werkt het?<\/title>\n<style>\n  \/* Algemeen lettertype en achtergrond *\/\n  body {\n    font-family: Arial, sans-serif;\n    background-color: #ffffff;\n    margin: 0;\n    padding: 20px;\n  }\n\n  \/* Knop styling *\/\n  .open-popup-btn {\n    display: inline-block;\n    padding: 15px 30px;\n    font-size: 16px;\n    font-weight: bold;\n    color: #ffffff;\n    background-color: #856028;\n    border: none;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: background-color 0.3s;\n    text-decoration: none;\n  }\n\n  .open-popup-btn:hover {\n    background-color: #caa875;\n  }\n\n  \/* Popup achtergrond *\/\n  .popup-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0,0,0,0.5);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    z-index: 1000;\n  }\n\n  \/* Popup inhoud *\/\n  .popup-content {\n    background-color: #fff;\n    padding: 30px;\n    max-width: 800px;\n    width: 90%;\n    border-radius: 10px;\n    box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n    position: relative;\n    max-height: 80vh;\n    overflow-y: auto;\n  }\n\n  \/* Sluitknop *\/\n  .close-popup {\n    position: absolute;\n    top: 15px;\n    right: 15px;\n    font-size: 24px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: #333;\n  }\n\n  .close-popup:hover {\n    color: #007BFF;\n  }\n\n  \/* Handleiding stappen *\/\n  .steps-container h2 {\n    text-align: center;\n    color: #333;\n    margin-bottom: 20px;\n  }\n\n  .step {\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: 25px;\n  }\n\n  .step-icon {\n    font-size: 24px;\n    color: #007BFF;\n    margin-right: 15px;\n    flex-shrink: 0;\n  }\n\n  .step-content h3 {\n    margin: 0 0 5px 0;\n    font-size: 18px;\n    color: #222;\n  }\n\n  .step-content p {\n    margin: 0;\n    color: #555;\n    line-height: 1.5;\n  }\n\n  @media (max-width: 600px) {\n    .step {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n    .step-icon {\n      margin-bottom: 5px;\n    }\n  }\n<\/style>\n<\/head>\n<body>\n\n<!-- Knop om popup te openen -->\n<button class=\"open-popup-btn\" id=\"openPopupBtn\">Bekijk Handleiding<\/button>\n\n<!-- Popup -->\n<div class=\"popup-overlay\" id=\"popupOverlay\">\n  <div class=\"popup-content\">\n    <button class=\"close-popup\" id=\"closePopupBtn\">&times;<\/button>\n    \n    <div class=\"steps-container\">\n\n      <div class=\"step\">\n        <div class=\"step-icon\">\u2709\ufe0f<\/div>\n        <div class=\"step-content\">\n          <h3>Advertentie plaatsen<\/h3>\n          <p>\n            Vul de titel, prijs of &#8220;Ruilen&#8221; of &#8220;Gratis&#8221; in, samen met je e-mailadres. \n            Selecteer een afbeelding voor je advertentie en voeg een duidelijke beschrijving toe. \n            Vervolgens kun je je advertentie verzenden. \n            Je ontvangt een bevestigingsmail en een aparte e-mail met een link om je advertentie later te verwijderen.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"step\">\n        <div class=\"step-icon\">\ud83d\udce8<\/div>\n        <div class=\"step-content\">\n          <h3>Op een advertentie reageren<\/h3>\n          <p>\n            Klik op Contact om het reactieformulier te openen. \n            Vul je naam, e-mailadres en telefoonnummer in, voeg eventueel je vraag toe en klik op Verzenden. \n            De adverteerder ontvangt je bericht in zijn e-mail en kan direct op jouw terug reageren.\n          <\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  const openBtn = document.getElementById('openPopupBtn');\n  const closeBtn = document.getElementById('closePopupBtn');\n  const overlay = document.getElementById('popupOverlay');\n\n  openBtn.addEventListener('click', () => {\n    overlay.style.display = 'flex';\n  });\n\n  closeBtn.addEventListener('click', () => {\n    overlay.style.display = 'none';\n  });\n\n  \/\/ Sluit popup als gebruiker buiten klikt\n  overlay.addEventListener('click', (e) => {\n    if(e.target === overlay) {\n      overlay.style.display = 'none';\n    }\n  });\n<\/script>\n\n<\/body>\n<\/html>\n\n\n    <div id=\"gbm-app\"><\/div>\n    <script>\n    (function() {\n        window.addEventListener('load', function() {\n            const { useState, useEffect } = React;\n            const brandColor = \"#a38353\";\n            const ajaxUrl = \"https:\/\/steentijdvondsten.nl\/post\/wp-admin\/admin-ajax.php\";\n\n            function App() {\n                const [ads, setAds] = useState([]);\n                const [loading, setLoading] = useState(true);\n                const [showCreate, setShowCreate] = useState(false);\n                const [contactAd, setContactAd] = useState(null);\n                const [contactForm, setContactForm] = useState({ name: \"\", email: \"\", phone: \"\", message: \"\" });\n                const [newAd, setNewAd] = useState({ title: '', price: '', email: '', desc: '', img: null });\n\n                useEffect(() => { fetchAds(); }, []);\n\n                const fetchAds = () => {\n                    jQuery.post(ajaxUrl, { action: 'gbm_get_ads' }, (res) => {\n                        if(res.success) setAds(res.data);\n                        setLoading(false);\n                    });\n                };\n\n                const handleSave = (e) => {\n                    e.preventDefault();\n                    setLoading(true);\n                    jQuery.post(ajaxUrl, { action: 'gbm_save_ad', ...newAd }, () => {\n                        setShowCreate(false);\n                        setNewAd({ title: '', price: '', email: '', desc: '', img: null });\n                        fetchAds();\n                    });\n                };\n\n                const handleContact = (e) => {\n                    e.preventDefault();\n                    jQuery.post(ajaxUrl, { \n                        action: 'gbm_contact', \n                        target_email: contactAd.email, \n                        ad_title: contactAd.title,\n                        ...contactForm \n                    }, () => {\n                        alert(\"Bericht verstuurd!\");\n                        setContactAd(null);\n                        setContactForm({ name: \"\", email: \"\", phone: \"\", message: \"\" });\n                    });\n                };\n\n                const handleImg = (e) => {\n                    const reader = new FileReader();\n                    reader.onload = () => setNewAd({...newAd, img: reader.result});\n                    reader.readAsDataURL(e.target.files[0]);\n                };\n\n                if(loading && ads.length === 0) return React.createElement('div', {className: 'gbm-loading'}, 'Laden...');\n\n                return React.createElement('div', { className: 'gbm-container' }, [\n                    \n                    React.createElement('div', { className: 'gbm-header' }, [\n                        React.createElement('h1', null, \"Steentijdvondsten Marktplaats\"),\n                        React.createElement('button', { \n                            onClick: () => setShowCreate(true),\n                            className: 'gbm-btn-primary' \n                        }, '+ Plaats Advertentie')\n                    ]),\n\n                    React.createElement('div', { className: 'gbm-grid' }, \n                        ads.map(ad => React.createElement('div', { key: ad.id, className: 'gbm-card' }, [\n                            React.createElement('div', { className: 'gbm-card-img-wrap' }, \n                                React.createElement('img', { src: ad.img || 'https:\/\/via.placeholder.com\/400x250', className: 'gbm-img' })\n                            ),\n                            React.createElement('div', { className: 'gbm-card-body' }, [\n                                React.createElement('h2', null, ad.title),\n                                React.createElement('div', { className: 'gbm-desc' }, ad.descr),\n                                React.createElement('div', { className: 'gbm-card-footer' }, [\n                                    React.createElement('span', { className: 'gbm-price' }, '\u20ac ' + ad.price),\n                                    React.createElement('button', { \n                                        onClick: () => setContactAd(ad),\n                                        className: 'gbm-btn-contact' \n                                    }, 'Contact')\n                                ])\n                            ])\n                        ]))\n                    ),\n\n                    showCreate && React.createElement('div', { className: 'gbm-modal' }, \n                        React.createElement('div', { className: 'gbm-modal-content' }, [\n                            React.createElement('button', { onClick: () => setShowCreate(false), className: 'gbm-close' }, '\u00d7'),\n                            React.createElement('h2', null, 'Nieuwe Advertentie'),\n                            React.createElement('form', { onSubmit: handleSave }, [\n                                React.createElement('input', { placeholder: 'Titel', required: true, value: newAd.title, onChange: e => setNewAd({...newAd, title: e.target.value}) }),\n                                React.createElement('input', { placeholder: 'Prijs', required: true, value: newAd.price, onChange: e => setNewAd({...newAd, price: e.target.value}) }),\n                                React.createElement('input', { type: 'email', placeholder: 'Uw E-mail', required: true, value: newAd.email, onChange: e => setNewAd({...newAd, email: e.target.value}) }),\n                                React.createElement('input', { type: 'file', onChange: handleImg, style: {border: 'none', padding: '10px 0'} }),\n                                React.createElement('textarea', { placeholder: 'Beschrijving', required: true, value: newAd.desc, onChange: e => setNewAd({...newAd, desc: e.target.value}) }),\n                                React.createElement('button', { type: 'submit', className: 'gbm-btn-submit' }, 'Plaatsen')\n                            ])\n                        ])\n                    ),\n\n                    contactAd && React.createElement('div', { className: 'gbm-modal' }, \n                        React.createElement('div', { className: 'gbm-modal-content' }, [\n                            React.createElement('button', { onClick: () => setContactAd(null), className: 'gbm-close' }, '\u00d7'),\n                            React.createElement('h2', null, 'Reageer op ' + contactAd.title),\n                            React.createElement('form', { onSubmit: handleContact }, [\n                                React.createElement('input', { placeholder: 'Naam', required: true, value: contactForm.name, onChange: e => setContactForm({...contactForm, name: e.target.value}) }),\n                                React.createElement('input', { type: 'email', placeholder: 'Uw E-mail', required: true, value: contactForm.email, onChange: e => setContactForm({...contactForm, email: e.target.value}) }),\n                                React.createElement('input', { placeholder: 'Telefoon', required: true, value: contactForm.phone, onChange: e => setContactForm({...contactForm, phone: e.target.value}) }),\n                                React.createElement('textarea', { placeholder: 'Bericht', required: true, value: contactForm.message, onChange: e => setContactForm({...contactForm, message: e.target.value}) }),\n                                React.createElement('button', { type: 'submit', className: 'gbm-btn-submit' }, 'Verzenden')\n                            ])\n                        ])\n                    )\n                ]);\n            }\n            const root = ReactDOM.createRoot(document.getElementById('gbm-app'));\n            root.render(React.createElement(App));\n        });\n    })();\n    <\/script>\n    <style>\n        \/* TOTALE ISOLATIE *\/\n        #gbm-app {\n            all: initial;\n            display: block;\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n            background: #fcfbf7;\n            padding: 20px;\n            margin: 20px 0;\n            border-radius: 15px;\n            box-sizing: border-box;\n            clear: both;\n        }\n\n        #gbm-app * { box-sizing: border-box; }\n\n        .gbm-container { max-width: 1200px; margin: 0 auto; }\n        \n        .gbm-header { \n            display: flex; \n            justify-content: space-between; \n            align-items: center; \n            margin-bottom: 30px; \n            border-bottom: 2px solid #eee;\n            padding-bottom: 20px;\n        }\n        \n        .gbm-header h1 { color: #a38353; font-size: 24px; margin: 0; font-weight: 700; font-style: italic; }\n\n        .gbm-grid { \n            display: grid; \n            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); \n            gap: 25px; \n        }\n\n        .gbm-card { \n            background: white; \n            border-radius: 12px; \n            overflow: hidden; \n            box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n            border: 1px solid #eee;\n            display: flex;\n            flex-direction: column;\n        }\n\n        .gbm-card-img-wrap { width: 100%; aspect-ratio: 16\/10; overflow: hidden; background: #f0f0f0; flex-shrink: 0; }\n        \n        .gbm-img { \n            width: 100% !important; \n            height: 100% !important; \n            object-fit: cover !important; \n            display: block !important;\n            margin: 0 !important;\n        }\n\n        .gbm-card-body { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }\n        .gbm-card-body h2 { font-size: 18px; margin: 0 0 10px 0; color: #333; font-weight: 600; flex-shrink: 0; }\n        \n        \/* FIX VOOR LANGE TEKST: SCROLLBAAR MAKEN *\/\n        .gbm-desc { \n            font-size: 14px; \n            color: #666; \n            height: 80px; \/* Vaste hoogte voor uniformiteit *\/\n            overflow-y: auto; \/* Scrollen als tekst te lang is *\/\n            margin-bottom: 15px;\n            padding-right: 5px;\n            line-height: 1.4;\n            white-space: pre-wrap;\n            word-wrap: break-word;\n        }\n\n        \/* Subtiele scrollbar styling *\/\n        .gbm-desc::-webkit-scrollbar { width: 4px; }\n        .gbm-desc::-webkit-scrollbar-track { background: #f1f1f1; }\n        .gbm-desc::-webkit-scrollbar-thumb { background: #a38353; border-radius: 10px; }\n\n        .gbm-card-footer { \n            display: flex; \n            justify-content: space-between; \n            align-items: center; \n            padding-top: 15px; \n            border-top: 1px solid #f0f0f0;\n            margin-top: auto;\n        }\n\n        .gbm-price { font-weight: 700; font-size: 18px; color: #a38353; }\n\n        .gbm-btn-primary, .gbm-btn-contact, .gbm-btn-submit {\n            background-color: #a38353 !important;\n            color: white !important;\n            border: none !important;\n            padding: 10px 20px !important;\n            border-radius: 6px !important;\n            cursor: pointer !important;\n            font-weight: 600 !important;\n            font-size: 14px !important;\n            transition: opacity 0.2s;\n            display: inline-block;\n            text-decoration: none;\n        }\n        \n        .gbm-btn-primary:hover, .gbm-btn-contact:hover, .gbm-btn-submit:hover { opacity: 0.9; }\n\n        .gbm-modal {\n            position: fixed;\n            top: 0; left: 0; right: 0; bottom: 0;\n            background: rgba(0,0,0,0.6);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            z-index: 999999;\n            padding: 20px;\n        }\n\n        .gbm-modal-content {\n            background: white;\n            padding: 30px;\n            border-radius: 15px;\n            width: 100%;\n            max-width: 450px;\n            position: relative;\n        }\n\n        .gbm-close {\n            position: absolute;\n            top: 10px; right: 10px;\n            background: none; border: none; font-size: 30px; cursor: pointer; color: #999;\n        }\n\n        .gbm-modal-content input, .gbm-modal-content textarea {\n            width: 100%;\n            padding: 12px;\n            margin-bottom: 15px;\n            border: 1px solid #ddd;\n            border-radius: 6px;\n            font-size: 14px;\n        }\n\n        .gbm-btn-submit { width: 100%; padding: 15px !important; font-size: 16px !important; }\n\n        .gbm-loading { padding: 50px; text-align: center; color: #a38353; font-weight: bold; }\n    <\/style>\n    \n\n\n\n<div class=\"template-frame\">\n  <div class=\"afbeelding-kader\">\n    <div class=\"tekst-kader\">\n      <h1>&#8211;<\/h1>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* Template container *\/\n.template-frame {\n  width: 100%;\n  max-width: 1200px; \/* pas aan naar de breedte van je template *\/\n  margin: 0 auto;\n}\n\n\/* Afbeelding container: altijd volledige afbeelding zichtbaar *\/\n.afbeelding-kader {\n  width: 100%;\n  aspect-ratio: 1200\/200; \/* vervang door verhouding van jouw afbeelding *\/\n  background-image: url('https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/04\/cropped-sierlijn.png');\n  background-size: contain; \/* afbeelding volledig zichtbaar *\/\n  background-repeat: no-repeat;\n  background-position: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Tekstkader strak om de tekst *\/\n.tekst-kader {\n  display: inline-block;\n  background-color: white;\n  padding: 2mm 5mm; \/* 2mm boven\/onder, 5mm links\/rechts *\/\n  text-align: center;\n  box-sizing: border-box;\n}\n\n.tekst-kader h1 {\n  margin: 0;\n  font-size: 2em;\n  word-wrap: break-word;\n  line-height: 1.2;\n}\n<\/style>\n\n\n\n<div style=\"height:1149px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Advertentie plaatsen Gratis advertentie plaatsen!Ruil, geef weg of verkoop je steentijd- en archeologie-artikelen: artefacten, boeken en meer.Ge\u00efnteresseerden kunnen direct contact met je opnemen, en hun berichten ontvang je eenvoudig in je e-mailinbox. Na het plaatsen van je advertentie ontvang je een e-mail waarmee je de advertentie later kunt verwijderen. Bewaar deze e-mail goed! Hoe werkt het? Bekijk Handleiding &times; \u2709\ufe0f Advertentie plaatsen Vul de titel, prijs of &#8220;Ruilen&#8221; of &#8220;Gratis&#8221; in, samen met je e-mailadres. Selecteer een afbeelding voor je advertentie en voeg een duidelijke beschrijving toe. Vervolgens kun je je advertentie verzenden. Je ontvangt een bevestigingsmail en een aparte e-mail met een link om je advertentie later te verwijderen. \ud83d\udce8 Op een advertentie reageren Klik op Contact om het reactieformulier te openen. Vul je naam, e-mailadres en telefoonnummer in, voeg eventueel je vraag toe en klik op Verzenden. De adverteerder ontvangt je bericht in zijn e-mail en kan direct op jouw terug reageren. &#8211;<\/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-10878","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/10878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/comments?post=10878"}],"version-history":[{"count":2,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/10878\/revisions"}],"predecessor-version":[{"id":11019,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/10878\/revisions\/11019"}],"wp:attachment":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/media?parent=10878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}