{"id":8,"date":"2026-08-09T06:29:10","date_gmt":"2026-08-09T06:29:10","guid":{"rendered":"https:\/\/sample.createqrcode.site\/?page_id=8"},"modified":"2026-08-09T07:20:29","modified_gmt":"2026-08-09T07:20:29","slug":"home","status":"publish","type":"page","link":"https:\/\/sample.createqrcode.site\/?page_id=8","title":{"rendered":"Home"},"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\r\n\r\nSri Lanka Private Transfers<\/title>\r\n\r\n<style>\r\n\r\n\/* =========================\r\n RESET\r\n========================= *\/\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\nbody{\r\n font-family:Arial, Helvetica, sans-serif;\r\n background:#f5f7fb;\r\n color:#102033;\r\n}\r\n\r\n\r\n\/* =========================\r\n HERO\r\n========================= *\/\r\n\r\n.transfer-hero{\r\n position:relative;\r\n width:100%;\r\n min-height:720px;\r\n\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n\r\n overflow:hidden;\r\n background:#071526;\r\n}\r\n\r\n\r\n\/* =========================\r\n VIDEO\r\n========================= *\/\r\n\r\n.hero-video{\r\n position:absolute;\r\n top:0;\r\n left:0;\r\n\r\n width:100%;\r\n height:100%;\r\n\r\n object-fit:cover;\r\n\r\n z-index:0;\r\n}\r\n\r\n\r\n\/* =========================\r\n OVERLAY\r\n========================= *\/\r\n\r\n.hero-overlay{\r\n position:absolute;\r\n inset:0;\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n rgba(4,18,34,.88) 0%,\r\n rgba(4,18,34,.68) 45%,\r\n rgba(4,18,34,.35) 100%\r\n );\r\n\r\n z-index:1;\r\n}\r\n\r\n\r\n\/* =========================\r\n HERO CONTENT\r\n========================= *\/\r\n\r\n.hero-container{\r\n\r\n position:relative;\r\n z-index:3;\r\n\r\n width:100%;\r\n max-width:1280px;\r\n\r\n padding:70px 35px;\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n TITLE\r\n========================= *\/\r\n\r\n.hero-text{\r\n\r\n max-width:760px;\r\n margin-bottom:45px;\r\n\r\n}\r\n\r\n.hero-small-title{\r\n\r\n display:inline-flex;\r\n\r\n padding:9px 15px;\r\n\r\n border:1px solid rgba(255,255,255,.35);\r\n\r\n border-radius:50px;\r\n\r\n background:rgba(255,255,255,.08);\r\n\r\n backdrop-filter:blur(10px);\r\n\r\n color:#fff;\r\n\r\n font-size:12px;\r\n\r\n font-weight:700;\r\n\r\n letter-spacing:2px;\r\n\r\n margin-bottom:20px;\r\n\r\n}\r\n\r\n\r\n.hero-title{\r\n\r\n color:#fff;\r\n\r\n font-size:64px;\r\n\r\n line-height:1.05;\r\n\r\n font-weight:800;\r\n\r\n letter-spacing:-2px;\r\n\r\n margin-bottom:20px;\r\n\r\n}\r\n\r\n\r\n.hero-title span{\r\n\r\n color:#7fc8ff;\r\n\r\n}\r\n\r\n\r\n.hero-description{\r\n\r\n color:rgba(255,255,255,.86);\r\n\r\n font-size:18px;\r\n\r\n line-height:1.7;\r\n\r\n max-width:600px;\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n BOOKING SEARCH\r\n========================= *\/\r\n\r\n.booking-box{\r\n\r\n width:100%;\r\n\r\n background:rgba(255,255,255,.97);\r\n\r\n padding:18px;\r\n\r\n border-radius:18px;\r\n\r\n box-shadow:\r\n 0 25px 60px rgba(0,0,0,.25);\r\n\r\n}\r\n\r\n\r\n.search-row{\r\n\r\n display:grid;\r\n\r\n grid-template-columns:\r\n minmax(250px,1fr)\r\n minmax(250px,1fr)\r\n 190px;\r\n\r\n gap:12px;\r\n\r\n align-items:end;\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n INPUT\r\n========================= *\/\r\n\r\n.form-group{\r\n\r\n position:relative;\r\n\r\n}\r\n\r\n.form-group label{\r\n\r\n display:block;\r\n\r\n font-size:12px;\r\n\r\n font-weight:700;\r\n\r\n text-transform:uppercase;\r\n\r\n letter-spacing:.7px;\r\n\r\n color:#617083;\r\n\r\n margin-bottom:8px;\r\n\r\n}\r\n\r\n\r\n.input-box{\r\n\r\n position:relative;\r\n\r\n}\r\n\r\n\r\n.input-icon{\r\n\r\n position:absolute;\r\n\r\n left:16px;\r\n\r\n top:50%;\r\n\r\n transform:translateY(-50%);\r\n\r\n font-size:19px;\r\n\r\n pointer-events:none;\r\n\r\n}\r\n\r\n\r\n.form-control{\r\n\r\n width:100%;\r\n\r\n height:58px;\r\n\r\n border:1px solid #dce4ee;\r\n\r\n border-radius:12px;\r\n\r\n padding:\r\n\r\n 0 15px\r\n 0 48px;\r\n\r\n outline:none;\r\n\r\n font-size:15px;\r\n\r\n color:#17283c;\r\n\r\n background:#fff;\r\n\r\n transition:.25s;\r\n\r\n}\r\n\r\n\r\n.form-control:focus{\r\n\r\n border-color:#0755ad;\r\n\r\n box-shadow:\r\n 0 0 0 4px rgba(7,85,173,.08);\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n SEARCH BUTTON\r\n========================= *\/\r\n\r\n.search-btn{\r\n\r\n border:none;\r\n\r\n height:58px;\r\n\r\n border-radius:12px;\r\n\r\n background:#0755ad;\r\n\r\n color:#fff;\r\n\r\n font-size:14px;\r\n\r\n font-weight:800;\r\n\r\n text-transform:uppercase;\r\n\r\n cursor:pointer;\r\n\r\n transition:.25s;\r\n\r\n padding:0 25px;\r\n\r\n}\r\n\r\n\r\n.search-btn:hover{\r\n\r\n background:#063f80;\r\n\r\n transform:translateY(-1px);\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n SEARCH SUGGESTIONS\r\n========================= *\/\r\n\r\n.location-results{\r\n\r\n position:absolute;\r\n\r\n left:0;\r\n right:0;\r\n top:100%;\r\n\r\n margin-top:5px;\r\n\r\n background:#fff;\r\n\r\n border:1px solid #ddd;\r\n\r\n border-radius:10px;\r\n\r\n overflow:hidden;\r\n\r\n box-shadow:\r\n 0 14px 35px rgba(0,0,0,.15);\r\n\r\n z-index:100;\r\n\r\n display:none;\r\n\r\n}\r\n\r\n\r\n.location-item{\r\n\r\n padding:13px 15px;\r\n\r\n border-bottom:1px solid #eee;\r\n\r\n cursor:pointer;\r\n\r\n font-size:14px;\r\n\r\n}\r\n\r\n\r\n.location-item:last-child{\r\n\r\n border-bottom:none;\r\n\r\n}\r\n\r\n\r\n.location-item:hover{\r\n\r\n background:#f4f7fb;\r\n\r\n}\r\n\r\n\r\n.location-item strong{\r\n\r\n display:block;\r\n\r\n color:#15283d;\r\n\r\n margin-bottom:3px;\r\n\r\n}\r\n\r\n\r\n.location-item span{\r\n\r\n color:#7d8996;\r\n\r\n font-size:12px;\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n ADVANCED BOOKING\r\n========================= *\/\r\n\r\n.advanced-booking{\r\n\r\n max-height:0;\r\n\r\n overflow:hidden;\r\n\r\n opacity:0;\r\n\r\n transition:\r\n max-height .6s ease,\r\n opacity .35s ease,\r\n margin .35s ease;\r\n\r\n}\r\n\r\n\r\n.advanced-booking.show{\r\n\r\n max-height:900px;\r\n\r\n opacity:1;\r\n\r\n margin-top:18px;\r\n\r\n}\r\n\r\n\r\n.booking-divider{\r\n\r\n height:1px;\r\n\r\n background:#e7ebf0;\r\n\r\n margin-bottom:20px;\r\n\r\n}\r\n\r\n\r\n.booking-grid{\r\n\r\n display:grid;\r\n\r\n grid-template-columns:\r\n repeat(4,1fr);\r\n\r\n gap:15px;\r\n\r\n}\r\n\r\n\r\n.booking-field label{\r\n\r\n display:block;\r\n\r\n font-size:12px;\r\n\r\n color:#667586;\r\n\r\n font-weight:700;\r\n\r\n margin-bottom:8px;\r\n\r\n}\r\n\r\n\r\n.booking-field input,\r\n.booking-field select{\r\n\r\n width:100%;\r\n\r\n height:52px;\r\n\r\n border:1px solid #dce4ee;\r\n\r\n border-radius:10px;\r\n\r\n padding:0 14px;\r\n\r\n outline:none;\r\n\r\n font-size:14px;\r\n\r\n background:white;\r\n\r\n}\r\n\r\n\r\n.booking-field input:focus,\r\n.booking-field select:focus{\r\n\r\n border-color:#0755ad;\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n RETURN FIELDS\r\n========================= *\/\r\n\r\n.return-fields{\r\n\r\n display:none;\r\n\r\n}\r\n\r\n\r\n.return-fields.show{\r\n\r\n display:block;\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n VEHICLE BUTTON\r\n========================= *\/\r\n\r\n.vehicle-btn-row{\r\n\r\n margin-top:20px;\r\n\r\n display:flex;\r\n\r\n justify-content:flex-end;\r\n\r\n}\r\n\r\n\r\n.vehicle-btn{\r\n\r\n min-width:220px;\r\n\r\n height:54px;\r\n\r\n border:none;\r\n\r\n border-radius:11px;\r\n\r\n background:#0755ad;\r\n\r\n color:#fff;\r\n\r\n font-size:13px;\r\n\r\n font-weight:800;\r\n\r\n cursor:pointer;\r\n\r\n}\r\n\r\n\r\n.vehicle-btn:hover{\r\n\r\n background:#063f80;\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n TRUST ITEMS\r\n========================= *\/\r\n\r\n.hero-features{\r\n\r\n margin-top:25px;\r\n\r\n display:flex;\r\n\r\n gap:28px;\r\n\r\n flex-wrap:wrap;\r\n\r\n}\r\n\r\n\r\n.hero-feature{\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n gap:8px;\r\n\r\n color:white;\r\n\r\n font-size:13px;\r\n\r\n font-weight:600;\r\n\r\n}\r\n\r\n\r\n.feature-icon{\r\n\r\n width:28px;\r\n\r\n height:28px;\r\n\r\n border-radius:50%;\r\n\r\n background:rgba(255,255,255,.15);\r\n\r\n display:flex;\r\n\r\n align-items:center;\r\n\r\n justify-content:center;\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n TABLET\r\n========================= *\/\r\n\r\n@media(max-width:950px){\r\n\r\n .transfer-hero{\r\n\r\n min-height:760px;\r\n\r\n }\r\n\r\n .hero-title{\r\n\r\n font-size:50px;\r\n\r\n }\r\n\r\n\r\n .search-row{\r\n\r\n grid-template-columns:1fr 1fr;\r\n\r\n }\r\n\r\n\r\n .search-btn{\r\n\r\n grid-column:1 \/ -1;\r\n\r\n width:100%;\r\n\r\n }\r\n\r\n\r\n .booking-grid{\r\n\r\n grid-template-columns:\r\n repeat(2,1fr);\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n MOBILE\r\n========================= *\/\r\n\r\n@media(max-width:600px){\r\n\r\n .transfer-hero{\r\n\r\n min-height:100vh;\r\n\r\n align-items:flex-start;\r\n\r\n }\r\n\r\n\r\n .hero-container{\r\n\r\n padding:\r\n 80px 16px\r\n 45px;\r\n\r\n }\r\n\r\n\r\n .hero-small-title{\r\n\r\n font-size:10px;\r\n\r\n }\r\n\r\n\r\n .hero-title{\r\n\r\n font-size:40px;\r\n\r\n letter-spacing:-1px;\r\n\r\n }\r\n\r\n\r\n .hero-description{\r\n\r\n font-size:15px;\r\n\r\n }\r\n\r\n\r\n .hero-text{\r\n\r\n margin-bottom:30px;\r\n\r\n }\r\n\r\n\r\n .booking-box{\r\n\r\n padding:13px;\r\n\r\n border-radius:14px;\r\n\r\n }\r\n\r\n\r\n .search-row{\r\n\r\n grid-template-columns:1fr;\r\n\r\n gap:13px;\r\n\r\n }\r\n\r\n\r\n .search-btn{\r\n\r\n grid-column:auto;\r\n\r\n }\r\n\r\n\r\n .form-control,\r\n .search-btn{\r\n\r\n height:56px;\r\n\r\n }\r\n\r\n\r\n .booking-grid{\r\n\r\n grid-template-columns:1fr;\r\n\r\n }\r\n\r\n\r\n .vehicle-btn-row{\r\n\r\n display:block;\r\n\r\n }\r\n\r\n\r\n .vehicle-btn{\r\n\r\n width:100%;\r\n\r\n }\r\n\r\n\r\n .hero-features{\r\n\r\n gap:12px;\r\n\r\n flex-direction:column;\r\n\r\n }\r\n\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<section class=\"transfer-hero\">\r\n\r\n\r\n<!-- =========================\r\n VIDEO\r\n========================= -->\r\n\r\n<video\r\n class=\"hero-video\"\r\n autoplay\r\n muted\r\n loop\r\n playsinline\r\n>\r\n\r\n <!-- CHANGE YOUR VIDEO -->\r\n <source\r\n src=\"YOUR-VIDEO.mp4\"\r\n type=\"video\/mp4\"\r\n >\r\n\r\n<\/video>\r\n\r\n\r\n<div class=\"hero-overlay\"><\/div>\r\n\r\n\r\n\r\n<div class=\"hero-container\">\r\n\r\n\r\n <!-- =========================\r\n TEXT\r\n ========================== -->\r\n\r\n <div class=\"hero-text\">\r\n\r\n <div class=\"hero-small-title\">\r\n SRI LANKA PRIVATE TRANSFERS\r\n <\/div>\r\n\r\n\r\n <h1 class=\"hero-title\">\r\n\r\n Travel Sri Lanka\r\n <br>\r\n\r\n <span>In Comfort.<\/span>\r\n\r\n <\/h1>\r\n\r\n\r\n <p class=\"hero-description\">\r\n\r\n Book reliable private airport transfers,\r\n city transfers and long-distance journeys\r\n anywhere in Sri Lanka.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n\r\n <!-- =========================\r\n SEARCH BOX\r\n ========================== -->\r\n\r\n <div class=\"booking-box\">\r\n\r\n\r\n <div class=\"search-row\">\r\n\r\n\r\n <!-- PICKUP -->\r\n\r\n <div class=\"form-group\">\r\n\r\n <label>\r\n Pickup Location *\r\n <\/label>\r\n\r\n <div class=\"input-box\">\r\n\r\n <div class=\"input-icon\">\r\n \ud83d\udccd\r\n <\/div>\r\n\r\n <input\r\n type=\"text\"\r\n id=\"pickup\"\r\n class=\"form-control\"\r\n placeholder=\"Enter pickup location\"\r\n autocomplete=\"off\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"location-results\"\r\n id=\"pickupResults\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n\r\n <!-- DESTINATION -->\r\n\r\n <div class=\"form-group\">\r\n\r\n <label>\r\n Destination *\r\n <\/label>\r\n\r\n <div class=\"input-box\">\r\n\r\n <div class=\"input-icon\">\r\n \ud83c\udfc1\r\n <\/div>\r\n\r\n <input\r\n type=\"text\"\r\n id=\"destination\"\r\n class=\"form-control\"\r\n placeholder=\"Where are you going?\"\r\n autocomplete=\"off\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"location-results\"\r\n id=\"destinationResults\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n\r\n <!-- SEARCH -->\r\n\r\n <button\r\n type=\"button\"\r\n class=\"search-btn\"\r\n onclick=\"showBookingDetails()\"\r\n >\r\n\r\n Search Transfers \u2192\r\n\r\n <\/button>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n\r\n <!-- =========================\r\n ADVANCED FORM\r\n ========================== -->\r\n\r\n <div\r\n class=\"advanced-booking\"\r\n id=\"advancedBooking\"\r\n >\r\n\r\n\r\n <div class=\"booking-divider\"><\/div>\r\n\r\n\r\n <div class=\"booking-grid\">\r\n\r\n\r\n <!-- DIRECTION -->\r\n\r\n <div class=\"booking-field\">\r\n\r\n <label>\r\n Direction *\r\n <\/label>\r\n\r\n <select\r\n id=\"direction\"\r\n onchange=\"toggleReturnFields()\"\r\n >\r\n\r\n <option value=\"oneway\">\r\n One Way\r\n <\/option>\r\n\r\n <option value=\"return\">\r\n Return\r\n <\/option>\r\n\r\n <\/select>\r\n\r\n <\/div>\r\n\r\n\r\n\r\n <!-- PASSENGERS -->\r\n\r\n <div class=\"booking-field\">\r\n\r\n <label>\r\n Passengers *\r\n <\/label>\r\n\r\n <select>\r\n\r\n <option>1 Passenger<\/option>\r\n <option>2 Passengers<\/option>\r\n <option>3 Passengers<\/option>\r\n <option>4 Passengers<\/option>\r\n <option>5 Passengers<\/option>\r\n <option>6 Passengers<\/option>\r\n <option>7 Passengers<\/option>\r\n <option>8 Passengers<\/option>\r\n\r\n <\/select>\r\n\r\n <\/div>\r\n\r\n\r\n\r\n <!-- SUITCASES -->\r\n\r\n <div class=\"booking-field\">\r\n\r\n <label>\r\n Suitcases\r\n <\/label>\r\n\r\n <select>\r\n\r\n <option>0 Suitcases<\/option>\r\n <option>1 Suitcase<\/option>\r\n <option>2 Suitcases<\/option>\r\n <option>3 Suitcases<\/option>\r\n <option>4 Suitcases<\/option>\r\n <option>5 Suitcases<\/option>\r\n <option>6 Suitcases<\/option>\r\n\r\n <\/select>\r\n\r\n <\/div>\r\n\r\n\r\n\r\n <!-- DATE -->\r\n\r\n <div class=\"booking-field\">\r\n\r\n <label>\r\n Departure Date *\r\n <\/label>\r\n\r\n <input\r\n type=\"date\"\r\n id=\"departureDate\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n\r\n <!-- TIME -->\r\n\r\n <div class=\"booking-field\">\r\n\r\n <label>\r\n Departure Time *\r\n <\/label>\r\n\r\n <input\r\n type=\"time\"\r\n id=\"departureTime\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n\r\n <!-- RETURN DATE -->\r\n\r\n <div\r\n class=\"booking-field return-fields\"\r\n id=\"returnDateField\"\r\n >\r\n\r\n <label>\r\n Return Departure Date *\r\n <\/label>\r\n\r\n <input\r\n type=\"date\"\r\n id=\"returnDate\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n\r\n <!-- RETURN TIME -->\r\n\r\n <div\r\n class=\"booking-field return-fields\"\r\n id=\"returnTimeField\"\r\n >\r\n\r\n <label>\r\n Return Departure Time *\r\n <\/label>\r\n\r\n <input\r\n type=\"time\"\r\n id=\"returnTime\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n\r\n <div class=\"vehicle-btn-row\">\r\n\r\n <button\r\n class=\"vehicle-btn\"\r\n type=\"button\"\r\n onclick=\"selectVehicle()\"\r\n >\r\n\r\n VIEW AVAILABLE VEHICLES \u2192\r\n\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n\r\n <!-- FEATURES -->\r\n\r\n <div class=\"hero-features\">\r\n\r\n\r\n <div class=\"hero-feature\">\r\n\r\n <div class=\"feature-icon\">\r\n \u2713\r\n <\/div>\r\n\r\n Private Transfers\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"hero-feature\">\r\n\r\n <div class=\"feature-icon\">\r\n \u2713\r\n <\/div>\r\n\r\n Fixed Price\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"hero-feature\">\r\n\r\n <div class=\"feature-icon\">\r\n \u2713\r\n <\/div>\r\n\r\n 24\/7 Support\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"hero-feature\">\r\n\r\n <div class=\"feature-icon\">\r\n \u2713\r\n <\/div>\r\n\r\n Professional Drivers\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* ========================================\r\n SAMPLE SRI LANKA LOCATION DATABASE\r\n======================================== *\/\r\n\r\nconst locations = [\r\n\r\n \"Bandaranaike International Airport, Katunayake\",\r\n \"Colombo, Sri Lanka\",\r\n \"Colombo Fort, Sri Lanka\",\r\n \"Kandy, Sri Lanka\",\r\n \"Ella, Sri Lanka\",\r\n \"Nuwara Eliya, Sri Lanka\",\r\n \"Galle, Sri Lanka\",\r\n \"Mirissa, Sri Lanka\",\r\n \"Weligama, Sri Lanka\",\r\n \"Bentota, Sri Lanka\",\r\n \"Sigiriya, Sri Lanka\",\r\n \"Dambulla, Sri Lanka\",\r\n \"Anuradhapura, Sri Lanka\",\r\n \"Polonnaruwa, Sri Lanka\",\r\n \"Trincomalee, Sri Lanka\",\r\n \"Arugam Bay, Sri Lanka\",\r\n \"Negombo, Sri Lanka\",\r\n \"Jaffna, Sri Lanka\",\r\n \"Yala, Sri Lanka\",\r\n \"Udawalawe, Sri Lanka\",\r\n \"Hikkaduwa, Sri Lanka\",\r\n \"Matara, Sri Lanka\",\r\n \"Hambantota, Sri Lanka\"\r\n\r\n];\r\n\r\n\r\n\r\n\/* ========================================\r\n AUTOCOMPLETE\r\n======================================== *\/\r\n\r\nfunction setupLocationSearch(\r\n inputId,\r\n resultsId\r\n){\r\n\r\n const input =\r\n document.getElementById(inputId);\r\n\r\n const results =\r\n document.getElementById(resultsId);\r\n\r\n\r\n\r\n input.addEventListener(\r\n \"input\",\r\n function(){\r\n\r\n const value =\r\n this.value\r\n .toLowerCase()\r\n .trim();\r\n\r\n\r\n results.innerHTML = \"\";\r\n\r\n\r\n if(\r\n value.length < 1\r\n ){\r\n\r\n results.style.display =\r\n \"none\";\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n const matches =\r\n locations.filter(\r\n location =>\r\n location\r\n .toLowerCase()\r\n .includes(value)\r\n )\r\n .slice(0,6);\r\n\r\n\r\n\r\n if(\r\n matches.length === 0\r\n ){\r\n\r\n results.style.display =\r\n \"none\";\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n matches.forEach(\r\n location => {\r\n\r\n const item =\r\n document.createElement(\r\n \"div\"\r\n );\r\n\r\n\r\n item.className =\r\n \"location-item\";\r\n\r\n\r\n const parts =\r\n location.split(\",\");\r\n\r\n\r\n item.innerHTML = `\r\n\r\n <strong>\r\n \ud83d\udccd ${parts[0]}\r\n <\/strong>\r\n\r\n <span>\r\n ${location}\r\n <\/span>\r\n\r\n `;\r\n\r\n\r\n item.onclick =\r\n function(){\r\n\r\n input.value =\r\n location;\r\n\r\n results.style.display =\r\n \"none\";\r\n\r\n };\r\n\r\n\r\n results.appendChild(\r\n item\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n results.style.display =\r\n \"block\";\r\n\r\n }\r\n );\r\n\r\n\r\n}\r\n\r\n\r\nsetupLocationSearch(\r\n \"pickup\",\r\n \"pickupResults\"\r\n);\r\n\r\n\r\nsetupLocationSearch(\r\n \"destination\",\r\n \"destinationResults\"\r\n);\r\n\r\n\r\n\r\n\/* ========================================\r\n SEARCH\r\n======================================== *\/\r\n\r\nfunction showBookingDetails(){\r\n\r\n const pickup =\r\n document\r\n .getElementById(\"pickup\")\r\n .value\r\n .trim();\r\n\r\n\r\n const destination =\r\n document\r\n .getElementById(\"destination\")\r\n .value\r\n .trim();\r\n\r\n\r\n\r\n if(\r\n pickup === \"\" ||\r\n destination === \"\"\r\n ){\r\n\r\n alert(\r\n \"Please enter Pickup Location and Destination.\"\r\n );\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n const booking =\r\n document.getElementById(\r\n \"advancedBooking\"\r\n );\r\n\r\n\r\n booking.classList.add(\r\n \"show\"\r\n );\r\n\r\n\r\n setTimeout(\r\n () => {\r\n\r\n booking.scrollIntoView({\r\n behavior:\"smooth\",\r\n block:\"nearest\"\r\n });\r\n\r\n },\r\n 300\r\n );\r\n\r\n}\r\n\r\n\r\n\r\n\/* ========================================\r\n RETURN\r\n======================================== *\/\r\n\r\nfunction toggleReturnFields(){\r\n\r\n const direction =\r\n document\r\n .getElementById(\"direction\")\r\n .value;\r\n\r\n\r\n const returnDate =\r\n document.getElementById(\r\n \"returnDateField\"\r\n );\r\n\r\n\r\n const returnTime =\r\n document.getElementById(\r\n \"returnTimeField\"\r\n );\r\n\r\n\r\n if(\r\n direction === \"return\"\r\n ){\r\n\r\n returnDate.classList.add(\r\n \"show\"\r\n );\r\n\r\n returnTime.classList.add(\r\n \"show\"\r\n );\r\n\r\n }else{\r\n\r\n returnDate.classList.remove(\r\n \"show\"\r\n );\r\n\r\n returnTime.classList.remove(\r\n \"show\"\r\n );\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ========================================\r\n SELECT VEHICLE\r\n======================================== *\/\r\n\r\nfunction selectVehicle(){\r\n\r\n alert(\r\n \"Connect this button to your vehicle selection page\/plugin.\"\r\n );\r\n\r\n}\r\n\r\n\r\n\r\n\/* ========================================\r\n DATE MINIMUM = TODAY\r\n======================================== *\/\r\n\r\nconst today =\r\n new Date()\r\n .toISOString()\r\n .split(\"T\")[0];\r\n\r\n\r\ndocument\r\n.getElementById(\r\n \"departureDate\"\r\n)\r\n.setAttribute(\r\n \"min\",\r\n today\r\n);\r\n\r\n\r\ndocument\r\n.getElementById(\r\n \"returnDate\"\r\n)\r\n.setAttribute(\r\n \"min\",\r\n today\r\n);\r\n\r\n\r\n\r\n\/* ========================================\r\n CLOSE AUTOCOMPLETE\r\n======================================== *\/\r\n\r\ndocument.addEventListener(\r\n \"click\",\r\n function(event){\r\n\r\n if(\r\n !event.target.closest(\r\n \".form-group\"\r\n )\r\n ){\r\n\r\n document\r\n .querySelectorAll(\r\n \".location-results\"\r\n )\r\n .forEach(\r\n item => {\r\n\r\n item.style.display =\r\n \"none\";\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n }\r\n);\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ef35668 e-con-full e-flex e-con e-parent\" data-id=\"ef35668\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-945f12b elementor-widget elementor-widget-shortcode\" data-id=\"945f12b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"> <div class=\"stb-app stb-home-mode\" style=\"--stb-accent:#0b4aa2;--stb-confirm:#0b4aa2\">\n <div class=\"stb-shell\">\n <div class=\"stb-header\">\n <div>\n <span class=\"stb-kicker\">PRIVATE TRANSFER<\/span>\n <h2>Transfer Booking<\/h2>\n <p>Fast route pricing, vehicle selection, and booking in one simple flow.<\/p>\n <\/div>\n <div class=\"stb-secure\">\u2713 Instant price estimate<\/div>\n <\/div>\n\n <div class=\"stb-steps\" aria-label=\"Booking steps\">\n <div class=\"stb-step is-active\" data-step-indicator=\"1\"><span>1<\/span><div><b>Journey<\/b><small>Route & time<\/small><\/div><\/div>\n <div class=\"stb-step\" data-step-indicator=\"2\"><span>2<\/span><div><b>Vehicle<\/b><small>Choose your ride<\/small><\/div><\/div>\n <div class=\"stb-step\" data-step-indicator=\"3\"><span>3<\/span><div><b>Details<\/b><small>Confirm booking<\/small><\/div><\/div>\n <\/div>\n\n <div class=\"stb-alert\" id=\"stb-alert\" hidden><\/div>\n\n <section class=\"stb-panel is-active\" data-step=\"1\">\n <div class=\"stb-home-search\" aria-label=\"Transfer route search\">\n <div class=\"stb-home-search-field stb-location-field\">\n <label for=\"stb-pickup\">Pickup location *<\/label>\n <div class=\"stb-home-input-wrap\"><span class=\"stb-home-pin\" aria-hidden=\"true\">\u25cf<\/span><input id=\"stb-pickup\" type=\"text\" placeholder=\"Search pickup location\" autocomplete=\"off\" autocapitalize=\"words\" spellcheck=\"false\" role=\"combobox\" aria-autocomplete=\"list\" aria-expanded=\"false\" aria-controls=\"stb-pickup-results\"><\/div>\n <div id=\"stb-pickup-results\" class=\"stb-location-results\" role=\"listbox\" hidden><\/div>\n <\/div>\n <div class=\"stb-home-search-field stb-location-field\">\n <label for=\"stb-destination\">Destination *<\/label>\n <div class=\"stb-home-input-wrap\"><span class=\"stb-home-pin\" aria-hidden=\"true\">\u25c6<\/span><input id=\"stb-destination\" type=\"text\" placeholder=\"Search destination\" autocomplete=\"off\" autocapitalize=\"words\" spellcheck=\"false\" role=\"combobox\" aria-autocomplete=\"list\" aria-expanded=\"false\" aria-controls=\"stb-destination-results\"><\/div>\n <div id=\"stb-destination-results\" class=\"stb-location-results\" role=\"listbox\" hidden><\/div>\n <\/div>\n <button class=\"stb-btn stb-primary stb-home-search-btn\" id=\"stb-home-search-btn\" type=\"button\"><span>Search transfers<\/span><b aria-hidden=\"true\">\u2192<\/b><\/button>\n <\/div>\n\n <div class=\"stb-journey-details\" id=\"stb-journey-details\" hidden>\n <div class=\"stb-journey-grid\">\n <div class=\"stb-card stb-form-card\">\n <div class=\"stb-card-title\"><span class=\"stb-icon\">\u2197<\/span><div><h3>Journey details<\/h3><p>Complete the trip details, then choose a vehicle.<\/p><\/div><\/div>\n <div class=\"stb-route-preview\"><span>Route<\/span><strong id=\"stb-route-preview-text\">Choose pickup and destination above<\/strong><\/div>\n <div class=\"stb-two\">\n <div class=\"stb-field\"><label for=\"stb-direction\">Direction *<\/label><select id=\"stb-direction\"><option value=\"oneway\">One Way<\/option><option value=\"round\">Return<\/option><\/select><\/div>\n <div class=\"stb-field\"><label for=\"stb-passengers\">Passengers *<\/label><input id=\"stb-passengers\" type=\"number\" min=\"1\" max=\"50\" value=\"1\"><\/div>\n <\/div>\n <div class=\"stb-two\">\n <div class=\"stb-field\"><label for=\"stb-luggage\">Suitcases<\/label><input id=\"stb-luggage\" type=\"number\" min=\"0\" max=\"50\" value=\"0\"><\/div>\n <div class=\"stb-field\"><label for=\"stb-date\">Departure date *<\/label><input id=\"stb-date\" type=\"date\"><\/div>\n <\/div>\n <div class=\"stb-field\"><label for=\"stb-time\">Departure time *<\/label><input id=\"stb-time\" type=\"time\"><\/div>\n <div class=\"stb-return-fields\" id=\"stb-return-fields\" hidden>\n <div class=\"stb-two\">\n <div class=\"stb-field\"><label for=\"stb-return-date\">Return Departure Date *<\/label><input id=\"stb-return-date\" type=\"date\"><\/div>\n <div class=\"stb-field\"><label for=\"stb-return-time\">Return Departure Time *<\/label><input id=\"stb-return-time\" type=\"time\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"stb-card stb-map-card\">\n <div class=\"stb-card-title\"><span class=\"stb-icon\">\u2316<\/span><div><h3>Google Maps route<\/h3><p>Normal Google Maps view \u2014 no API key required.<\/p><\/div><\/div>\n <div id=\"stb-map\" class=\"stb-map\">\n <iframe id=\"stb-google-map-frame\" title=\"Google Maps route\" src=\"https:\/\/www.google.com\/maps?q=Sri%20Lanka&output=embed\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\" allowfullscreen><\/iframe>\n <\/div>\n <div class=\"stb-map-tools\">\n <button class=\"stb-btn stb-secondary stb-route-button\" id=\"stb-calculate-route\" type=\"button\">Recalculate route<\/button>\n <a class=\"stb-map-link\" id=\"stb-open-google-maps\" href=\"https:\/\/www.google.com\/maps\" target=\"_blank\" rel=\"noopener\">Open in Google Maps \u2197<\/a>\n <\/div>\n <div class=\"stb-route-stats\">\n <div><small>DISTANCE<\/small><strong id=\"stb-distance-text\">\u2014<\/strong><\/div>\n <div><small>JOURNEY TIME<\/small><strong id=\"stb-duration-text\">\u2014<\/strong><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"stb-actions\"><span><\/span><button class=\"stb-btn stb-primary\" id=\"stb-to-vehicles\" type=\"button\">See available vehicles <span>\u2192<\/span><\/button><\/div>\n <\/div>\n <\/section>\n\n <section class=\"stb-panel\" data-step=\"2\">\n <div class=\"stb-section-head\"><div><span class=\"stb-kicker\">AVAILABLE RIDES<\/span><h3>Choose your vehicle<\/h3><p>Only vehicles matching your passenger and luggage requirements are shown.<\/p><\/div><div class=\"stb-mini-summary\"><span id=\"stb-route-mini\">\u2014<\/span><b id=\"stb-distance-mini\">\u2014<\/b><\/div><\/div>\n <div id=\"stb-vehicle-list\" class=\"stb-vehicle-list\"><\/div>\n <div class=\"stb-actions\"><button class=\"stb-btn stb-secondary\" data-back=\"1\" type=\"button\">\u2190 Back<\/button><span><\/span><\/div>\n <\/section>\n\n <section class=\"stb-panel\" data-step=\"3\">\n <div class=\"stb-confirm-grid\">\n <div class=\"stb-card stb-form-card\">\n <div class=\"stb-card-title\"><span class=\"stb-icon\">\u2713<\/span><div><h3>Passenger details<\/h3><p>Enter contact information to confirm the booking.<\/p><\/div><\/div>\n <div class=\"stb-two\">\n <div class=\"stb-field\"><label for=\"stb-name\">Full name *<\/label><input id=\"stb-name\" type=\"text\" autocomplete=\"name\"><\/div>\n <div class=\"stb-field\"><label for=\"stb-phone\">Phone \/ WhatsApp *<\/label><input id=\"stb-phone\" type=\"tel\" autocomplete=\"tel\"><\/div>\n <\/div>\n <div class=\"stb-field\"><label for=\"stb-email\">Email<\/label><input id=\"stb-email\" type=\"email\" autocomplete=\"email\"><\/div>\n <div class=\"stb-field\"><label for=\"stb-payment\">Payment method<\/label><select id=\"stb-payment\"><option value=\"Pay on arrival\">Pay on arrival<\/option><option value=\"Bank transfer\">Bank transfer<\/option><\/select><\/div>\n <div class=\"stb-field\"><label for=\"stb-notes\">Notes \/ special requests<\/label><textarea id=\"stb-notes\" rows=\"4\" placeholder=\"Flight number, hotel name, child seat request, etc.\"><\/textarea><\/div>\n <\/div>\n\n <div class=\"stb-card stb-summary-card\">\n <span class=\"stb-kicker\">BOOKING SUMMARY<\/span>\n <h3 id=\"stb-summary-vehicle\">Selected vehicle<\/h3>\n <div class=\"stb-summary-image\"><img id=\"stb-summary-image\" alt=\"\"><\/div>\n <dl>\n <div><dt>Route<\/dt><dd id=\"stb-summary-route\">\u2014<\/dd><\/div>\n <div><dt>Departure<\/dt><dd id=\"stb-summary-departure\">\u2014<\/dd><\/div>\n <div id=\"stb-summary-return-row\" hidden><dt>Return Departure<\/dt><dd id=\"stb-summary-return\">\u2014<\/dd><\/div>\n <div><dt>Distance<\/dt><dd id=\"stb-summary-distance\">\u2014<\/dd><\/div>\n <div><dt>Passengers \/ bags<\/dt><dd id=\"stb-summary-capacity\">\u2014<\/dd><\/div>\n <\/dl>\n <div class=\"stb-total\"><span>Total estimate<\/span><strong id=\"stb-summary-total\">\u2014<\/strong><\/div>\n <button class=\"stb-btn stb-primary stb-full stb-confirm-button\" id=\"stb-submit\" type=\"button\">Confirm booking <span>\u2192<\/span><\/button>\n <button class=\"stb-link-btn\" data-back=\"2\" type=\"button\">\u2190 Change vehicle<\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n <\/div>\n <\/div>\n\t\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>Sri Lanka Private Transfers SRI LANKA PRIVATE TRANSFERS Travel Sri Lanka In Comfort. Book reliable private airport transfers, city transfers […]<\/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":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sample.createqrcode.site\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sample.createqrcode.site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sample.createqrcode.site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sample.createqrcode.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sample.createqrcode.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":7,"href":"https:\/\/sample.createqrcode.site\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/sample.createqrcode.site\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/sample.createqrcode.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}