{"id":869,"date":"2026-04-05T12:35:52","date_gmt":"2026-04-05T12:35:52","guid":{"rendered":"https:\/\/tourvill.com\/?page_id=869"},"modified":"2026-04-08T07:20:57","modified_gmt":"2026-04-08T07:20:57","slug":"booking-test-01","status":"publish","type":"page","link":"https:\/\/tourvill.com\/index.php\/booking-test-01\/","title":{"rendered":"Booking test 01"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n Boat Booking Form<\/title>\r\n <style>\r\n .form-card {\r\n font-family: Arial, sans-serif;\r\n background-color: #1b263b;\r\n color: #e0e1dd;\r\n padding: 30px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 15px rgba(0,0,0,0.5);\r\n width: 100%;\r\n max-width: 500px;\r\n margin: 40px auto;\r\n }\r\n .form-card h2 {\r\n text-align: center;\r\n margin-bottom: 20px;\r\n color: #00aaff;\r\n }\r\n .form-card input,\r\n .form-card select,\r\n .form-card button {\r\n width: 100%;\r\n padding: 12px;\r\n margin-bottom: 15px;\r\n border: none;\r\n border-radius: 5px;\r\n font-size: 15px;\r\n }\r\n .form-card input,\r\n .form-card select {\r\n background-color: #e0e1dd;\r\n color: #0d1b2a;\r\n }\r\n .form-card button {\r\n background-color: #00aaff;\r\n color: #fff;\r\n font-weight: bold;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease;\r\n }\r\n .form-card button:hover {\r\n background-color: #0077cc;\r\n }\r\n\r\n \/* Progress Bar *\/\r\n .progress {\r\n display: none;\r\n width: 100%;\r\n height: 12px;\r\n background: #333;\r\n border-radius: 6px;\r\n overflow: hidden;\r\n margin: 10px 0;\r\n }\r\n .progress div {\r\n height: 100%;\r\n width: 0;\r\n background: linear-gradient(90deg, #00aaff, #0077cc);\r\n transition: width 0.2s ease;\r\n }\r\n\r\n \/* Animated Text *\/\r\n .loading-text {\r\n display: none;\r\n font-weight: bold;\r\n color: #00aaff;\r\n font-size: 16px;\r\n text-align: center;\r\n margin-bottom: 10px;\r\n }\r\n .loading-text::after {\r\n content: '...';\r\n animation: dotsText 1s steps(3,end) infinite;\r\n }\r\n @keyframes dotsText {\r\n 0% { content: ''; }\r\n 33% { content: '.'; }\r\n 66% { content: '..'; }\r\n 100% { content: '...'; }\r\n }\r\n\r\n \/* Toast *\/\r\n .toast {\r\n visibility: hidden;\r\n min-width: 300px;\r\n margin-left: -150px;\r\n background-color: #333;\r\n color: #fff;\r\n text-align: center;\r\n border-radius: 5px;\r\n padding: 16px;\r\n position: fixed;\r\n z-index: 1;\r\n left: 50%;\r\n top: 20px;\r\n font-size: 17px;\r\n box-shadow: 0 0 10px rgba(0,0,0,0.5);\r\n }\r\n .toast.show {\r\n visibility: visible;\r\n animation: fadein 0.5s, fadeout 0.5s 4s;\r\n }\r\n @keyframes fadein { from {top: 0; opacity: 0;} to {top: 20px; opacity: 1;} }\r\n @keyframes fadeout { from {top: 20px; opacity: 1;} to {top: 0; opacity: 0;} }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"form-card\">\r\n <h2>Boat Booking Form<\/h2>\r\n <form id=\"bookingForm\" action=\"https:\/\/script.google.com\/macros\/s\/AKfycbwMFlxX62JmQpxSbweXNZtpqibPz8rk13r23R9UClZEKXbU9pR7scj5fsp4XFCzHXa6ZQ\/exec\" method=\"post\">\r\n <label for=\"boatName\">Boat Name<\/label>\r\n <select id=\"boatName\" name=\"boatName\" required>\r\n <option value=\"\">-- Select Boat --<\/option>\r\n <option value=\"Haorer Sultan 2.0\">Haorer Sultan 2.0<\/option>\r\n <option value=\"Haorer Sultan 3.0\">Haorer Sultan 3.0<\/option>\r\n <option value=\"Haorer Sultan 4.0\">Haorer Sultan 4.0<\/option>\r\n <\/select>\r\n\r\n <input type=\"text\" name=\"phone\" placeholder=\"Phone Number\" required>\r\n <input type=\"email\" name=\"email\" placeholder=\"Email\" required>\r\n <input type=\"date\" name=\"checkIn\" required>\r\n <input type=\"date\" name=\"checkOut\" required>\r\n\r\n <select name=\"roomType\" required>\r\n <option value=\"\">Select Room Type<\/option>\r\n <option value=\"Deluxe\">Deluxe<\/option>\r\n <option value=\"Premium\">Premium<\/option>\r\n <option value=\"Luxury\">Luxury<\/option>\r\n <\/select>\r\n\r\n <button type=\"submit\">Submit Booking<\/button>\r\n <div class=\"loading-text\" id=\"loadingText\">Processing booking<\/div>\r\n <div class=\"progress\" id=\"progress\"><div><\/div><\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <div id=\"toast\" class=\"toast\"><\/div>\r\n\r\n <script>\r\n const form = document.getElementById(\"bookingForm\");\r\n const toast = document.getElementById(\"toast\");\r\n const progress = document.getElementById(\"progress\");\r\n const bar = progress.querySelector(\"div\");\r\n const loadingText = document.getElementById(\"loadingText\");\r\n\r\n function showToast(message, color) {\r\n toast.innerText = message;\r\n toast.style.backgroundColor = color;\r\n toast.className = \"toast show\";\r\n setTimeout(() => { toast.className = toast.className.replace(\"show\", \"\"); }, 5000);\r\n }\r\n\r\n form.addEventListener(\"submit\", async function(e) {\r\n e.preventDefault();\r\n progress.style.display = \"block\";\r\n loadingText.style.display = \"block\";\r\n bar.style.width = \"0\";\r\n\r\n \/\/ Animate progress bar gradually\r\n let width = 0;\r\n const interval = setInterval(() => {\r\n if (width < 90) {\r\n width += 5;\r\n bar.style.width = width + \"%\";\r\n }\r\n }, 150);\r\n\r\n try {\r\n const response = await fetch(form.action, {\r\n method: \"POST\",\r\n body: new FormData(form)\r\n });\r\n const text = await response.text();\r\n\r\n clearInterval(interval);\r\n bar.style.width = \"100%\"; \/\/ complete bar\r\n\r\n setTimeout(() => {\r\n progress.style.display = \"none\";\r\n loadingText.style.display = \"none\";\r\n if (text.includes(\"Success\")) {\r\n showToast(\"\u2705 Booking submitted successfully!\", \"#00aaff\");\r\n form.reset();\r\n } else {\r\n showToast(\"\u26a0\ufe0f \" + text, \"#cc0000\");\r\n }\r\n }, 500);\r\n\r\n } catch (err) {\r\n clearInterval(interval);\r\n progress.style.display = \"none\";\r\n loadingText.style.display = \"none\";\r\n showToast(\"\u274c Error: \" + err, \"#cc0000\");\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\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>Boat Booking Form Boat Booking Form Boat Name — Select Boat —Haorer Sultan 2.0Haorer Sultan 3.0Haorer Sultan 4.0 Select Room TypeDeluxePremiumLuxury Submit Booking Processing booking<\/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-869","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tourvill.com\/index.php\/wp-json\/wp\/v2\/pages\/869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tourvill.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tourvill.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tourvill.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tourvill.com\/index.php\/wp-json\/wp\/v2\/comments?post=869"}],"version-history":[{"count":10,"href":"https:\/\/tourvill.com\/index.php\/wp-json\/wp\/v2\/pages\/869\/revisions"}],"predecessor-version":[{"id":882,"href":"https:\/\/tourvill.com\/index.php\/wp-json\/wp\/v2\/pages\/869\/revisions\/882"}],"wp:attachment":[{"href":"https:\/\/tourvill.com\/index.php\/wp-json\/wp\/v2\/media?parent=869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}