Yoime Around \u2013 Verken de Benelux<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/awesomplete\/1.1.5\/awesomplete.css\" \/>\r\n\r\n <style>\r\n body {\r\n margin: 0;\r\n font-family: 'Segoe UI', sans-serif;\r\n display: flex;\r\n height: 100vh;\r\n }\r\n .sidebar {\r\n width: 30%;\r\n padding: 40px;\r\n background: #ffffff;\r\n box-shadow: 2px 0 10px rgba(0,0,0,0.1);\r\n }\r\n .content {\r\n width: 70%;\r\n padding: 40px;\r\n background: #eef2f5;\r\n overflow-y: auto;\r\n }\r\n input {\r\n width: 100%;\r\n padding: 12px;\r\n margin-top: 20px;\r\n font-size: 16px;\r\n border: 1px solid #ccc;\r\n border-radius: 6px;\r\n }\r\n button {\r\n margin-top: 15px;\r\n padding: 12px 20px;\r\n background-color: #3498db;\r\n color: white;\r\n font-size: 16px;\r\n border: none;\r\n border-radius: 6px;\r\n cursor: pointer;\r\n }\r\n .city-title {\r\n font-size: 28px;\r\n color: #34495e;\r\n }\r\n .city-img {\r\n max-width: 100%;\r\n margin-top: 20px;\r\n border-radius: 8px;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n }\r\n .no-result {\r\n color: #999;\r\n font-style: italic;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"sidebar\">\r\n <h1>Zoek een stad<\/h1>\r\n <input id=\"cityInput\" class=\"awesomplete\" placeholder=\"Typ bijv. Gent, Utrech... \">\r\n <button onclick=\"zoekStad()\">Verken<\/button>\r\n<\/div>\r\n\r\n<div class=\"content\" id=\"cityResult\">\r\n <p class=\"no-result\">Typ een stad om informatie op te halen.<\/p>\r\n<\/div>\r\n\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/awesomplete\/1.1.5\/awesomplete.min.js\"><\/script>\r\n\r\n<script>\r\n \/\/ Stadslijst voor autocomplete (uitbreidbaar)\r\n const stedenLijst = [\r\n \"Aalst\", \"Antwerpen\", \"Brugge\", \"Brussel\", \"Charleroi\", \"Dendermonde\", \"Gent\", \"Hasselt\",\r\n \"Kortrijk\", \"Leuven\", \"Lokeren\", \"Luxemburg\", \"Mechelen\", \"Namur\", \"Oostende\", \"Oudenaarde\",\r\n \"Rotterdam\", \"Tilburg\", \"Utrecht\", \"Vlissingen\"\r\n ];\r\n\r\n \/\/ Activeer autocomplete\r\n new Awesomplete(document.getElementById(\"cityInput\"), {\r\n list: stedenLijst,\r\n minChars: 1,\r\n autoFirst: true\r\n });\r\n\r\n async function zoekStad() {\r\n const input = document.getElementById(\"cityInput\").value.trim().toLowerCase();\r\n const result = document.getElementById(\"cityResult\");\r\n\r\n if (!input) {\r\n result.innerHTML = \"<p class='no-result'>Typ een stad.<\/p>\";\r\n return;\r\n }\r\n\r\n try {\r\n const response = await fetch(`https:\/\/jouw-api-url.com\/stad?naam=${encodeURIComponent(input)}`);\r\n if (!response.ok) throw new Error('Stad niet gevonden');\r\n\r\n const data = await response.json();\r\n\r\n result.innerHTML = `\r\n <h2 class=\"city-title\">${data.naam}<\/h2>\r\n <p>${data.beschrijving}<\/p>\r\n <img decoding=\"async\" src=\"${data.afbeelding}\" alt=\"${data.naam}\" class=\"city-img\">\r\n ${data.documentatie ? `<p><a href=\"${data.documentatie}\" target=\"_blank\">Bekijk documentatie (PDF)<\/a><\/p>` : \"\"}\r\n `;\r\n } catch (error) {\r\n result.innerHTML = `<p class='no-result'>Geen informatie gevonden over \"${input}\".<\/p>`;\r\n }\r\n }\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\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>Yoime Around \u2013 Verken de Benelux Zoek een stad Verken Typ een stad om informatie op te halen.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":31,"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n Yoime Around \u2013 Verken de Benelux<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/awesomplete\/1.1.5\/awesomplete.css\" \/>\r\n\r\n <style>\r\n body {\r\n margin: 0;\r\n font-family: 'Segoe UI', sans-serif;\r\n display: flex;\r\n height: 100vh;\r\n }\r\n .sidebar {\r\n width: 30%;\r\n padding: 40px;\r\n background: #ffffff;\r\n box-shadow: 2px 0 10px rgba(0,0,0,0.1);\r\n }\r\n .content {\r\n width: 70%;\r\n padding: 40px;\r\n background: #eef2f5;\r\n overflow-y: auto;\r\n }\r\n input {\r\n width: 100%;\r\n padding: 12px;\r\n margin-top: 20px;\r\n font-size: 16px;\r\n border: 1px solid #ccc;\r\n border-radius: 6px;\r\n }\r\n button {\r\n margin-top: 15px;\r\n padding: 12px 20px;\r\n background-color: #3498db;\r\n color: white;\r\n font-size: 16px;\r\n border: none;\r\n border-radius: 6px;\r\n cursor: pointer;\r\n }\r\n .city-title {\r\n font-size: 28px;\r\n color: #34495e;\r\n }\r\n .city-img {\r\n max-width: 100%;\r\n margin-top: 20px;\r\n border-radius: 8px;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n }\r\n .no-result {\r\n color: #999;\r\n font-style: italic;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"sidebar\">\r\n <h1>Zoek een stad<\/h1>\r\n <input id=\"cityInput\" class=\"awesomplete\" placeholder=\"Typ bijv. Gent, Utrech... \">\r\n <button onclick=\"zoekStad()\">Verken<\/button>\r\n<\/div>\r\n\r\n<div class=\"content\" id=\"cityResult\">\r\n <p class=\"no-result\">Typ een stad om informatie op te halen.<\/p>\r\n<\/div>\r\n\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/awesomplete\/1.1.5\/awesomplete.min.js\"><\/script>\r\n\r\n<script>\r\n \/\/ Stadslijst voor autocomplete (uitbreidbaar)\r\n const stedenLijst = [\r\n \"Aalst\", \"Antwerpen\", \"Brugge\", \"Brussel\", \"Charleroi\", \"Dendermonde\", \"Gent\", \"Hasselt\",\r\n \"Kortrijk\", \"Leuven\", \"Lokeren\", \"Luxemburg\", \"Mechelen\", \"Namur\", \"Oostende\", \"Oudenaarde\",\r\n \"Rotterdam\", \"Tilburg\", \"Utrecht\", \"Vlissingen\"\r\n ];\r\n\r\n \/\/ Activeer autocomplete\r\n new Awesomplete(document.getElementById(\"cityInput\"), {\r\n list: stedenLijst,\r\n minChars: 1,\r\n autoFirst: true\r\n });\r\n\r\n async function zoekStad() {\r\n const input = document.getElementById(\"cityInput\").value.trim().toLowerCase();\r\n const result = document.getElementById(\"cityResult\");\r\n\r\n if (!input) {\r\n result.innerHTML = \"<p class='no-result'>Typ een stad.<\/p>\";\r\n return;\r\n }\r\n\r\n try {\r\n const response = await fetch(`https:\/\/jouw-api-url.com\/stad?naam=${encodeURIComponent(input)}`);\r\n if (!response.ok) throw new Error('Stad niet gevonden');\r\n\r\n const data = await response.json();\r\n\r\n result.innerHTML = `\r\n <h2 class=\"city-title\">${data.naam}<\/h2>\r\n <p>${data.beschrijving}<\/p>\r\n <img decoding=\"async\" src=\"${data.afbeelding}\" alt=\"${data.naam}\" class=\"city-img\">\r\n ${data.documentatie ? `<p><a href=\"${data.documentatie}\" target=\"_blank\">Bekijk documentatie (PDF)<\/a><\/p>` : \"\"}\r\n `;\r\n } catch (error) {\r\n result.innerHTML = `<p class='no-result'>Geen informatie gevonden over \"${input}\".<\/p>`;\r\n }\r\n }\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\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>Yoime Around \u2013 Verken de Benelux Zoek een stad Verken Typ een stad om informatie op te halen.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":31,"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/travelguide.yoime.app\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}