1<!DOCTYPE html> 2 3<html lang="en-US"> 4 <head> 5 <title> 6 7 Contact Us - Kiztopia Indonesia 8 9 </title> 10 11 12 13 14 <meta name="description" content="" /> 15 16 <meta name="robots" content="index, follow" /> 17 <link rel="canonical" href="https://kiztopia.com.hk/contact-us" /> 18 19 <link rel="alternate" hreflang="en-US" href="https://kiztopia.com.hk/contact-us" /> 20 21 22 <link rel="alternate" 23 hreflang="x-default" 24 href="https://kiztopia.com.hk/contact-us" /> 25 26 <meta http-equiv="content-language" content="en-US" /> 27 28 <meta property="og:title" content="Contact Us - Kiztopia Indonesia" /> 29 <meta property="og:description" content="" /> 30 <meta property="og:url" content="https://kiztopia.com.hk/contact-us" /> 31 <meta property="og:type" content="website" /> 32 <meta property="og:locale" content="en-US" /> 33 <meta property="og:image" content="https://6ui4n9oite.koniglecdn.com/images/ogimage.webp" /> 34 <meta property="og:site_name" content="Kiztopia Hong Kong" /> 35 36 37 <meta name="twitter:card" content="summary_large_image" /> 38 <meta name="twitter:title" content="Contact Us - Kiztopia Indonesia" /> 39 <meta name="twitter:description" content="" /> 40 <meta name="twitter:image" content="https://6ui4n9oite.koniglecdn.com/images/ogimage.webp" /> 41 42 43 44<link rel="preconnect" href="https://fonts.googleapis.com"> 45<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 46 47 48 49<style> 50 51@font-face { 52 font-family: VAGRoundedBT-Regular; 53 src: url('https://6ui4n9oite.koniglecdn.com/files/vagroundedbt-regular.otf') format('opentype'); 54 font-weight: normal; 55 font-style: normal; 56 font-display: swap; 57} 58 59</style> 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 <link rel="stylesheet" type="text/css" href="https://vue61rwjjy.koniglecdn.com/css/root-styles-ddfde37f.css"> 76 77 78 79 80 81 <link rel="stylesheet" type="text/css" href="https://vue61rwjjy.koniglecdn.com/css/ds-stylesheet-d1be8194.css"> 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
97<script type="application/ld+json"> 98 { 99 "@context": "http://schema.org", 100 "@type": "WebPage", 101 102 "name": "Contact Us - Kiztopia Indonesia", 103 104 "description": "", 105 106 "publisher": { 107 "@type": "Organization", 108 "name": "Kiztopia Hong Kong", 109 110 "logo": { 111 "@type": "ImageObject", 112 "url": "https://vue61rwjjy.koniglecdn.com/images/hk_country-logos-website-1196x330px-02-1.webp" 113 }, 114 115 "url": "https://kiztopia.com.hk" 116 } 117 } 118</script>
118 119 120 121 122 123 124 125 126 127
128<script id="layout-context" type="application/json">{"style": {}, "version": "2", "header": null, "footer": null, "main": {"style": {}, "blocks": {"block_1": {"classes": "", "style": {}, "type": "component", "component_id": "7440396843668783104", "name": "Contact Us - Kiztopia Indonesia(A)", "disabled": false, "attrs_": {}, "config_": {}, "class_": "", "component": {"type_": "component", "attrs_": {}, "config_": {}, "style_": {}, "class_": "", "disabled_": false, "name_": "Contact Us - Kiztopia Indonesia(A)", "template_": "merged-b972619b", "version_": "2.0.0", "component_type_": "fluid", "dynamic_component_type_": null, "is_custom_": true, "editor_support_": false, "widget_config_": null}}}, "order": ["block_1"], "attrs_": {}, "config_": {}, "class_": ""}, "right_sidebar": null, "left_sidebar": null, "css_assets": [], "js_assets": [], "template_id": "7440396843266129920"}</script>
vendor: 1 bytes, line 128
128
129<script id="site-settings" type="application/json">{"brand": {"font": {"files": {"normal": {"src": [{"url": "https://6ui4n9oite.koniglecdn.com/files/vagroundedbt-regular.otf", "format": "opentype"}], "style": "normal"}}, "family": "VAGRoundedBT-Regular", "provider": "custom"}, "spacing": "0.25rem", "logo_url": "https://vue61rwjjy.koniglecdn.com/images/hk_country-logos-website-1196x330px-02-1.webp", "font_size": null, "body_color": "#374151", "info_color": "#3B82F6", "link_color": "#FF7A00", "logo_width": 2492, "radius_box": "16px", "text_color": "#000000", "font_family": "VAGRoundedBT-Regular", "light_color": "#F3F4F6", "logo_height": 688, "accent_color": "#FACC15", "border_color": "#E5E7EB", "danger_color": "#EF4444", "radius_input": "8px", "subtle_color": "#6B7280", "base_color_50": "#FFFFFF", "font_provider": "custom", "heading_color": "#111827", "neutral_color": "#374151", "primary_color": "#FF7A00", "radius_button": "9999px", "success_color": "#10B981", "warning_color": "#F59E0B", "base_color_100": "#F9FAFB", "base_color_200": "#F3F4F6", "base_color_300": "#E5E7EB", "secondary_color": "#FFC82E", "background_color": "#ffffff", "primary_color_50": "#FFF3E5", "primary_color_100": "#FFE6CC", "primary_color_200": "#FFCD99", "primary_color_300": "#FFB366", "primary_color_400": "#FF9A33", "primary_color_500": "#FF7A00", "primary_color_600": "#CC6200", "primary_color_700": "#994A00", "primary_color_800": "#663100", "primary_color_900": "#331800", "primary_color_950": "#1A0C00", "base_content_color": "#111827", "info_content_color": "#FFFFFF", "secondary_color_50": "#FFF9E6", "secondary_color_100": "#FFF3CC", "secondary_color_200": "#FFE799", "secondary_color_300": "#FFDB66", "secondary_color_400": "#FFCF33", "secondary_color_500": "#FFC82E", "secondary_color_600": "#CCA025", "secondary_color_700": "#99781C", "secondary_color_800": "#665012", "secondary_color_900": "#332809", "secondary_color_950": "#1A1405", "accent_content_color": "#000000", "danger_content_color": "#FFFFFF", "neutral_content_color": "#FFFFFF", "primary_content_color": "#FFFFFF", "success_content_color": "#FFFFFF", "warning_content_color": "#FFFFFF", "secondary_content_color": "#18181B", "primary_content_color_50": "#FAFAFA", "primary_content_color_100": "#F4F4F5", "primary_content_color_200": "#E4E4E7", "primary_content_color_300": "#D4D4D8", "primary_content_color_400": "#A1A1AA", "primary_content_color_500": "#71717A", "primary_content_color_600": "#52525B", "primary_content_color_700": "#3F3F46", "primary_content_color_800": "#27272A", "primary_content_color_900": "#18181B", "primary_content_color_950": "#09090B", "secondary_content_color_50": "#FAFAFA", "secondary_content_color_100": "#F4F4F5", "secondary_content_color_200": "#E4E4E7", "secondary_content_color_300": "#D4D4D8", "secondary_content_color_400": "#A1A1AA", "secondary_content_color_500": "#71717A", "secondary_content_color_600": "#52525B", "secondary_content_color_700": "#3F3F46", "secondary_content_color_800": "#27272A", "secondary_content_color_900": "#18181B", "secondary_content_color_950": "#09090B"}, "product_listing": {}, "tracking": {}, "watchtower": {"token": "d9c3532cf1304ef6963775a20a0fa1d9"}, "commerce": {}}</script>
vendor: 1 bytes, line 129
129
130<script id="root-layout-context" type="application/json">{"style": {}, "version": "2", "header": {"style": {}, "blocks": {"block_a61093": {"classes": "", "style": {}, "type": "component", "component_id": "7367019263217942528", "name": "Kiztopia Top Nav - HK", "disabled": false, "attrs_": {}, "config_": {}, "class_": "", "component": {"type_": "component", "attrs_": {}, "config_": {}, "style_": {}, "class_": "", "disabled_": false, "name_": "Kiztopia Top Nav - HK", "template_": "navbar-07a0c224", "version_": "1.0.0", "component_type_": "fluid", "dynamic_component_type_": null, "is_custom_": true, "editor_support_": false, "widget_config_": null}}}, "order": ["block_a61093"], "attrs_": {}, "config_": {}, "class_": ""}, "footer": {"style": {}, "blocks": {"block_619aba": {"classes": "", "style": {}, "type": "component", "component_id": "7367019263167610880", "name": "Kiztopia Id Footer", "disabled": false, "attrs_": {}, "config_": {}, "class_": "", "component": {"type_": "component", "attrs_": {"role": "contentinfo", "aria-label": "Company Footer"}, "config_": {}, "style_": {}, "class_": "", "disabled_": false, "name_": "Kiztopia Id Footer", "template_": "footer-1df62189", "version_": "1.0.0", "component_type_": "fluid", "dynamic_component_type_": null, "is_custom_": true, "editor_support_": false, "widget_config_": null}}}, "order": ["block_619aba"], "attrs_": {}, "config_": {}, "class_": ""}, "main": null, "right_sidebar": null, "left_sidebar": null, "css_assets": [{"type": "css", "attrs": {}, "code": "__root", "name": "Root stylesheet", "version": null, "asset_id": "9e1ac93a-9836-4cad-9104-d79f483ae80f", "asset_src": null}, {"type": "css", "attrs": {}, "code": "__custom", "name": "Design System Stylesheet", "version": null, "asset_id": "a2c83a53-6ad7-4161-8c8c-756a0f91a9c3", "asset_src": null}], "js_assets": [{"type": "js", "attrs": {}, "code": "__custom", "name": "Theme JS", "version": null, "asset_id": "c7c4a943-3dd9-4f2f-9ca7-fcb0ba39d9fa", "asset_src": null}], "template_id": "7367019263129862144"}</script>
vendor: 1 bytes, line 130
130
131<script> 132 window.konigle = { 133 apiServer: "https://tim.konigle.com", 134 csrfToken: "P6OxcHyvAwJpCYtKmLI4WvXJcjaK2kGOl45YK84vWWeweak3btKBhLvvm6rL8oZL", 135 userAuthenticated: false, 136 isPreview: false, 137 pageVersion: "A", 138 profitjs: { 139 pageType: "page", 140 resourceId: "7367019240073773056", 141 accessToken: "", 142 server: "https://tim.konigle.com" 143 }, 144 watchtower: { 145 token: "d9c3532cf1304ef6963775a20a0fa1d9", 146 pageType: "2", 147 pageId: "7367019240073773056", 148 pageVersion: "A", 149 server: "https://tim.konigle.com", 150 disable: false 151 } 152 }; 153 154 155 (function() { 156 const siteSettings = document.querySelector('script[id="site-settings"][type="application/json"]'); 157 if (siteSettings) { 158 try { 159 const data = JSON.parse(siteSettings.textContent || "{}"); 160 window.konigle.settings = data; 161 siteSettings.remove(); 162 } catch (e) { 163 console.error("Failed to parse site settings:", e); 164 } 165 } 166 })(); 167 168 169 170 171 window.addEventListener('auth:login-widget:authenticated', function () { 172 window.konigle.userAuthenticated = true; 173 }); 174 175 class ComponentContextManager { 176 constructor() { 177 this.components = new Map(); 178 } 179 180 init(){ 181 this.parseLayoutContext(); 182 } 183 184 handleLayout(layout){ 185 const segments = ['main', 'header', 'footer']; 186 segments.forEach((segment) => { 187 if (layout[segment] && layout[segment].blocks) { 188 for(const [blockKey, block] of Object.entries(layout[segment].blocks)){ 189 if(block.component && block.component_id){ 190 this.components.set(block.component_id, block.component); 191 } 192 } 193 } 194 }); 195 196 } 197 198 parseLayoutContext(){ 199 ['layout-context', 'root-layout-context'].forEach((id) => { 200 const layoutJson = document.querySelector(`script[id='${id}'][type='application/json']`); 201 if (layoutJson) { 202 try { 203 const data = JSON.parse(layoutJson.textContent || "{}"); 204 this.handleLayout(data); 205 // remve the dom element after parsing 206 layoutJson.remove(); 207 } catch (e) { 208 console.error(`Failed to parse JSON for ${id}:`, e); 209 } 210 } 211 }); 212 } 213 214 getComponent(componentId) { 215 return this.components.get(componentId) || {}; 216 } 217 218 getComponentConfig(componentId){ 219 const component = this.getComponent(componentId); 220 return component.config_ || {}; 221 } 222 } 223 if (!window.konigle.componentContextManager) { 224 window.konigle.componentContextManager = new ComponentContextManager(); 225 window.konigle.componentContextManager.init(); 226 } 227 window.konigle.getComponentConfig = function(componentId) { 228 if (!window.konigle.componentContextManager) { 229 console.error("ComponentContextManager is not initialized."); 230 return {}; 231 } 232 return window.konigle.componentContextManager.getComponentConfig(componentId); 233 }; 234 window.konigle.getComponentContext = function(componentId) { 235 if (!window.konigle.componentContextManager) { 236 console.error("ComponentContextManager is not initialized."); 237 return {} 238 } 239 return window.konigle.componentContextManager.getComponent(componentId); 240 }; 241 242</script>
242 243 244 245 246
246<script src="/static/sitekit/js/vendor/jquery-3.7.1.min.js"></script>
246 247 248 249 250 251 252 253 254 <style> 255 .bg-header { 256 background-color: None; 257 } 258 .border-header { 259 border-color: ; 260 } 261 .text-header { 262 display: inline-block; 263 color: ; 264 border-color: transparent; 265 border-radius: 0.375rem; 266 transition: transform 0.3s ease-out; 267 } 268 .text-header:hover { 269 transform: scale(1.1); 270 color: ; 271 border-color: ; 272 } 273 </style> 274 275 276 277 <style> 278 [x-cloak] { 279 display: none !important; 280 } 281 </style> 282 283 284 285 286 287 288 289 290 291 <!-- Built with Hostbento â https://hostbento.com --> 292 <meta name="generator" content="Hostbento"> 293 </head> 294 295 296 297 298 <body class="flex min-h-screen flex-col justify-between" 299 > 300 301 302 303 304 305 306<div data-node-type="segment" 307 data-template-id="7367019263129862144" 308 data-node-key="header" 309 310 style=""> 311 312 313 314 315 <!-- component could be deleted but still the ID maybe present in the template. --> 316 317 <div class="w-full" style="" data-node-type="block" data-node-key="block_a61093" data-component-id="7367019263217942528" > 318 319 320 321 322 <nav class="_n4vbrX-navbar-component bg-secondary sticky top-0 z-50 shadow-md" data-node-key="component" 323 data-node-name="Auto Open Nav Bar" data-node-type="component" id="navbar-container"> 324 <div class="container mx-auto px-4"> 325 <div class="flex h-16 items-center justify-between md:h-20"> 326 <!-- Logo --> 327 <div class="flex-shrink-0"> 328 <a aria-label="Company Logo" href="/"> 329 <img alt="HK_Country-Logos-Website-1196x330px-02-1" class="h-10 w-auto" height="688" src="https://vue61rwjjy.koniglecdn.com/images/hk_country-logos-website-1196x330px-02-1.webp" width="2492" /> 330 </a> 331 </div> 332 <!-- Mobile Menu Button --> 333 <div class="lg:hidden"> 334 <button aria-controls="_n4vbrX-mobile-menu" aria-expanded="false" class="_n4vbrX-mobile-menu-button text-body hover:text-primary hover:bg-base-200 focus:ring-primary inline-flex items-center justify-center rounded-md p-2 focus:ring-2 focus:outline-none focus:ring-inset" type="button"> 335 <span class="sr-only">Open main menu</span> 336 <!-- Hamburger Icon --> 337 <svg aria-hidden="true" class="_n4vbrX-hamburger-icon block h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 338 <path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"></path> 339 </svg> 340 <!-- Close Icon (hidden by default) --> 341 <svg aria-hidden="true" class="_n4vbrX-close-icon hidden h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 342 <path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"></path> 343 </svg> 344 </button> 345 </div> 346 <!-- Desktop Navigation --> 347 <div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-center"> 348 <ul class="flex items-center space-x-1 xl:space-x-2"> 349 <li><a class="text-body hover:bg-base-200 hover:text-primary rounded-md px-3 py-2 text-sm transition-colors" 350 href="/">Home</a></li> 351 <!-- Dropdown 1 (Link 2: Experiences) --> 352 <li class="group _n4vbrX-desktop-dropdown-item relative"> 353 <a aria-expanded="false" aria-haspopup="true" 354 class="_n4vbrX-desktop-dropdown-toggle text-body hover:bg-base-200 hover:text-primary focus:bg-base-200 focus:text-primary flex items-center rounded-md px-3 py-2 text-sm transition-colors focus:outline-none" 355 href="/experiences">
356 <span>Experiences</span> 357 <svg aria-hidden="true" 358 class="text-body group-hover:text-primary ml-1 h-5 w-5 transition-colors" 359 fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 360 <path clip-rule="evenodd" 361 d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 01.02-1.06z" 362 fill-rule="evenodd"></path> 363 </svg> 364 </a> 365 <div 366 class="rounded-box bg-base-50 invisible absolute left-1/2 z-20 mt-2 w-48 origin-top -translate-x-1/2 py-1 opacity-0 shadow-lg ring-1 ring-black/5 transition-all duration-200 ease-in-out group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100 focus:outline-none"> 367 <a class="text-body hover:bg-base-200 hover:text-primary block px-4 py-2 text-sm" 368 href="/play">Play</a> 369 <a class="text-body hover:bg-base-200 hover:text-primary block px-4 py-2 text-sm" 370 href="/intelligencematrix">Learn</a> 371 <a class="text-body hover:bg-base-200 hover:text-primary block px-4 py-2 text-sm" 372 href="/birthday-party">Birthday Party</a> 373 <a class="text-body hover:bg-base-200 hover:text-primary block px-4 py-2 text-sm" 374 href="/school-visit">School Visit</a> 375 <a class="text-body hover:bg-base-200 hover:text-primary block px-4 py-2 text-sm" 376 href="/group-events">Group Events</a> 377 </div> 378 </li> 379 <!-- Dropdown 2 (Link 3: Services) --> 380 <li class="group _n4vbrX-desktop-dropdown-item relative"> 381 <button aria-expanded="false" aria-haspopup="true" class="_n4vbrX-desktop-dropdown-toggle text-body hover:bg-base-200 hover:text-primary focus:bg-base-200 focus:text-primary flex items-center rounded-md px-3 py-2 text-sm transition-colors focus:outline-none" type="button"> 382 <span>Brands</span> 383 <svg aria-hidden="true" class="text-body group-hover:text-primary ml-1 h-5 w-5 transition-colors" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 384 <path clip-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 01.02-1.06z" fill-rule="evenodd"></path> 385 </svg> 386 </button> 387 <div 388 class="rounded-box bg-base-50 invisible absolute left-1/2 z-20 mt-2 w-48 origin-top -translate-x-1/2 py-1 opacity-0 shadow-lg ring-1 ring-black/5 transition-all duration-200 ease-in-out group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100 focus:outline-none"> 389 <a class="text-body hover:bg-base-200 hover:text-primary block px-4 py-2 text-sm" 390 href="/brands/kiztopia">Kiztopia</a> 391 <a class="text-body hover:bg-base-200 hover:text-primary block px-4 py-2 text-sm" 392 href="/brands/bouncetopia">Bouncetopia</a> 393 <a class="text-body hover:bg-base-200 hover:text-primary block px-4 py-2 text-sm" 394 href="/brands/jumptopia">Jumptopia</a> 395 </div> 396 </li> 397 <li><a class="text-body hover:bg-base-200 hover:text-primary rounded-md px-3 py-2 text-sm transition-colors" 398 href="/booking-and-ticketing">Ticketing</a></li> 399 <!-- Dropdown 3 (Link 6: About Us) --> 400 <li class="group _n4vbrX-desktop-dropdown-item relative"> 401 <button aria-expanded="false" aria-haspopup="true" class="_n4vbrX-desktop-dropdown-toggle text-body hover:bg-base-200 hover:text-primary focus:bg-base-200 focus:text-primary flex items-center rounded-md px-3 py-2 text-sm transition-colors focus:outline-none" type="button">
402 <span>Events</span> 403 <svg aria-hidden="true" class="text-body group-hover:text-primary ml-1 h-5 w-5 transition-colors" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 404 <path clip-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 01.02-1.06z" fill-rule="evenodd"></path> 405 </svg> 406 </button> 407 <div 408 class="rounded-box bg-base-50 invisible absolute left-1/2 z-20 mt-2 w-48 origin-top -translate-x-1/2 py-1 opacity-0 shadow-lg ring-1 ring-black/5 transition-all duration-200 ease-in-out group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100 focus:outline-none"> 409 <a class="text-body hover:bg-base-200 hover:text-primary block px-4 py-2 text-sm" 410 href="/upcoming-events">Jumptopia</a> 411 <a class="text-body hover:bg-base-200 hover:text-primary block px-4 py-2 text-sm" 412 href="/brands/splashtopia">Splashtopia</a> 413 <a class="text-body hover:bg-base-200 hover:text-primary block px-4 py-2 text-sm" 414 href="/kiztopia-blocks-adventure">Kiztopia Blocks Adventure</a> 415 <a class="text-body hover:bg-base-200 hover:text-primary block px-4 py-2 text-sm" 416 href="/chill__bounce_summer_party">Kiztopia x NTP Chill & Bounce Summer Party</a> 417 </div> 418 </li> 419 <li><a class="text-body hover:bg-base-200 hover:text-primary rounded-md px-3 py-2 text-sm transition-colors" 420 href="/gallery">Gallery</a></li> 421 <li><a class="text-body hover:bg-base-200 hover:text-primary rounded-md px-3 py-2 text-sm transition-colors" 422 href="/contact-us">Contact Us</a></li> 423 </ul> 424 </div> 425 <!-- Right side elements --> 426 <div class="hidden items-center space-x-2 lg:flex xl:space-x-2"> 427 <a class="bg-primary text-primary-content rounded-btn hover:bg-primary-700 px-4 py-2 text-sm font-medium transition-colors" 428 href="/booking-and-ticketing" target="_blank">Buy Tickets</a> 429 <a class="text-body hover:text-primary text-sm transition-colors lang-en" href="/">EN</a> 430 <span class="text-subtle">|</span> 431 <a class="text-body hover:text-primary text-sm transition-colors lang-zh" href="/zh">䏿</a> 432 <!-- Country Selector Dropdown --> 433 <div class="group _n4vbrX-desktop-dropdown-item relative"> 434 <button aria-expanded="false" aria-haspopup="true" class="_n4vbrX-desktop-dropdown-toggle text-body hover:bg-base-200 hover:text-primary focus:bg-base-200 focus:text-primary flex items-center rounded-md p-2 text-sm transition-colors focus:outline-none" type="button"> 435 <img alt="Hong Kong Flag" class="mr-3 h-[15px] w-5 object-cover" height="40" src="https://vue61rwjjy.koniglecdn.com/files/hk-flag" width="54" /> 436 Hong Kong 437 <svg aria-hidden="true" class="text-body group-hover:text-primary ml-1 h-5 w-5 transition-colors" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 438 <path clip-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 01.02-1.06z" fill-rule="evenodd"></path> 439 </svg> 440 </button> 441 <div 442 class="rounded-box bg-base-50 invisible absolute right-0 z-20 mt-2 w-56 origin-top-right py-1 opacity-0 shadow-lg ring-1 ring-black/5 transition-all duration-200 ease-in-out group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100 focus:outline-none"> 443 <a class="text-body hover:bg-base-200 hover:text-primary flex items-center px-4 py-2 text-sm" 444 href="https://kiztopia.com/" target="_blank"> 445 <img alt="Singapore Flag" class="mr-3 h-[15p
445x] w-5 object-cover" height="40" src="https://vue61rwjjy.koniglecdn.com/files/sg-flag" width="54" /> 446 <span>Singapore</span> 447 </a> 448 <a class="text-body hover:bg-base-200 hover:text-primary flex items-center px-4 py-2 text-sm" 449 href="https://kiztopia.co.id/" target="_blank"> 450 <img alt="Indonesia Flag" class="mr-3 h-[15px] w-5 object-cover" height="40" src="https://vue61rwjjy.koniglecdn.com/files/id-flag" width="54" /> 451 <span>Indonesia</span> 452 </a> 453 <a class="text-body hover:bg-base-200 hover:text-primary flex items-center px-4 py-2 text-sm" 454 href="https://kiztopia.co.th/" target="_blank"> 455 <img alt="Thailand Flag" class="mr-3 h-[15px] w-5 object-cover" height="40" src="https://vue61rwjjy.koniglecdn.com/files/th-flag" width="54" /> 456 <span>Thailand</span> 457 </a> 458 <a class="text-body hover:bg-base-200 hover:text-primary flex items-center px-4 py-2 text-sm" 459 href="https://kiztopia.com.my/" target="_blank"> 460 <img alt="Current Country Flag: Malaysia" class="mr-2 h-auto w-5" height="40" src="https://vue61rwjjy.koniglecdn.com/files/my-flag" width="54" /> 461 <span>Malaysia</span> 462 </a> 463 <a class="text-body hover:bg-base-200 hover:text-primary flex items-center px-4 py-2 text-sm" 464 href="https://kiztopia.com.tw/" target="_blank"> 465 <img alt="Taiwan Flag" class="mr-3 h-[15px] w-5 object-cover" height="40" src="https://vue61rwjjy.koniglecdn.com/files/tw-flag" width="54" /> 466 <span>Taiwan</span> 467 </a> 468 </div> 469 </div> 470 </div> 471 </div> 472 </div> 473 <!-- Mobile Menu Panel --> 474 <div class="_n4vbrX-mobile-nav-panel bg-base-100 border-border absolute inset-x-0 top-16 hidden border-t p-4 shadow-lg md:top-20 lg:hidden" 475 id="_n4vbrX-mobile-menu"> 476 <div class="space-y-1 pb-3"> 477 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-base" 478 href="/">Home</a> 479 <!-- Mobile Dropdown 1: Features --> 480 <div> 481 <button aria-controls="_n4vbrX-mobile-features-sub" aria-expanded="false" class="_n4vbrX-mobile-dropdown-toggle text-body hover:bg-base-200 hover:text-primary flex w-full items-center justify-between rounded-md px-3 py-2 text-base" type="button"> 482 <span>Experiences</span> 483 <svg aria-hidden="true" class="_n4vbrX-chevron-icon h-5 w-5 transform transition-transform duration-200" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 484 <path clip-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 01.02-1.06z" fill-rule="evenodd"></path> 485 </svg> 486 </button> 487 <div class="_n4vbrX-mobile-dropdown-menu mt-1 hidden space-y-1 pl-4" id="_n4vbrX-mobile-features-sub"> 488 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-sm" 489 href="/play">Play</a> 490 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-sm" 491 href="/intelligencematrix">Learn</a> 492 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-sm" 493 href="/birthday-party">Birthday Party</a> 494 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-sm" 495 href="/school-visit">School Visit</a> 496 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-sm" 497 href="/group-events">Group Events</a> 498 </div> 499 </div> 500 <!-- Mobile Dropdown 2: Services --> 501 <div> 502 <button aria-controls="_n4vbrX-mobile-services-sub" aria-expanded="false" class="_n4vbrX-mobile-dropdown-toggle text-body hover:bg-base-200 hover:text-primary flex w-full items-center justify-between rounded-md px-3 py-2 text-base" type="button">
503 <span>Brands</span> 504 <svg aria-hidden="true" class="_n4vbrX-chevron-icon h-5 w-5 transform transition-transform duration-200" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 505 <path clip-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 01.02-1.06z" fill-rule="evenodd"></path> 506 </svg> 507 </button> 508 <div class="_n4vbrX-mobile-dropdown-menu mt-1 hidden space-y-1 pl-4" id="_n4vbrX-mobile-services-sub"> 509 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-sm" 510 href="/brands/kiztopia-club">Kiztopia Club</a> 511 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-sm" 512 href="/brands/bouncetopia">Bouncetopia</a> 513 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-sm" 514 href="/brands/jumptopia">Jumptopia</a> 515 </div> 516 </div> 517 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-base" 518 href="/booking-and-ticketing">Ticketing</a> 519 <!-- Mobile Dropdown 3: About Us --> 520 <div> 521 <button aria-controls="_n4vbrX-mobile-about-sub" aria-expanded="false" class="_n4vbrX-mobile-dropdown-toggle text-body hover:bg-base-200 hover:text-primary flex w-full items-center justify-between rounded-md px-3 py-2 text-base" type="button"> 522 <span>Events</span> 523 <svg aria-hidden="true" class="_n4vbrX-chevron-icon h-5 w-5 transform transition-transform duration-200" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 524 <path clip-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 01.02-1.06z" fill-rule="evenodd"></path> 525 </svg> 526 </button> 527 <div class="_n4vbrX-mobile-dropdown-menu mt-1 hidden space-y-1 pl-4" id="_n4vbrX-mobile-about-sub"> 528 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-sm" 529 href="/upcoming-events">Jumptopia</a> 530 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-sm" 531 href="/brands/splashtopia">Splashtopia</a> 532 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-sm" 533 href="/kiztopia-blocks-adventure">Kiztopia Blocks Adventure</a> 534 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-sm" 535 href="/chill__bounce_summer_party">Kiztopia x NTP Chill & Bounce Summer Party</a> 536 </div> 537 </div> 538 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-base" 539 href="/gallery">Gallery</a> 540 <a class="text-body hover:bg-base-200 hover:text-primary block rounded-md px-3 py-2 text-base" 541 href="/contact-us">Contact Us</a> 542 </div> 543 <div class="border-border border-t pt-4 pb-3"> 544 <div class="space-y-2"> 545 <a class="bg-primary text-primary-content rounded-btn hover:bg-primary-700 block w-full px-4 py-2 text-center text-base font-medium transition-colors" 546 href="/booking-and-ticketing" target="_blank">Buy Tickets</a> 547 <div class="flex justify-center space-x-4 pt-2"> 548 <a class="text-body hover:text-primary text-base transition-colors lang-en" href="/">EN</a> 549 <span class="text-subtle">|</span> 550 <a class="text-body hover:text-primary text-base transition-colors lang-zh" href="/zh">䏿</a> 551 </div> 552 <!-- Mobile Country Selector --> 553 <div class="mt-2"> 554 <button aria-controls="_n4vbrX-mobile-country-sub" aria-expanded="false" class="_n4vbrX-mobile-dropdown-toggle text-body hover:bg-base-200 hover:text-primary flex w-full items-center justify-between rounded-md px-3 py-2 text-base" type="button">
555 <span class="flex items-center"> 556 <img alt="Current Country Flag: Hong Kong" class="mr-2 h-auto w-5" height="40" src="https://vue61rwjjy.koniglecdn.com/files/hk-flag" width="54" /> 557 Hong Kong 558 </span> 559 <svg aria-hidden="true" class="_n4vbrX-chevron-icon h-5 w-5 transform transition-transform duration-200" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 560 <path clip-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 01.02-1.06z" fill-rule="evenodd"></path> 561 </svg> 562 </button> 563 <div class="_n4vbrX-mobile-dropdown-menu mt-1 hidden space-y-1 pl-4" 564 id="_n4vbrX-mobile-country-sub"> 565 <a class="text-body hover:bg-base-200 hover:text-primary flex items-center rounded-md px-3 py-2 text-sm" 566 href="https://kiztopia.com/" target="_blank"> 567 <img alt="Singapore Flag" class="mr-3 h-[15px] w-5 object-cover" height="40" src="https://vue61rwjjy.koniglecdn.com/files/sg-flag" width="54" /> 568 <span>Singapore</span> 569 </a> 570 <a class="text-body hover:bg-base-200 hover:text-primary flex items-center rounded-md px-3 py-2 text-sm" 571 href="https://kiztopia.com.my" target="_blank"> 572 <img alt="Malaysia Flag" class="mr-3 h-[15px] w-5 object-cover" height="40" src="https://vue61rwjjy.koniglecdn.com/files/my-flag" width="54" /> 573 <span>Malaysia</span> 574 </a> 575 <a class="text-body hover:bg-base-200 hover:text-primary flex items-center rounded-md px-3 py-2 text-sm" 576 href="https://kiztopia.co.th" target="_blank"> 577 <img alt="Thailand Flag" class="mr-3 h-[15px] w-5 object-cover" height="40" src="https://vue61rwjjy.koniglecdn.com/files/th-flag" width="54" /> 578 <span>Thailand</span> 579 </a> 580 <a class="text-body hover:bg-base-200 hover:text-primary flex items-center rounded-md px-3 py-2 text-sm" 581 href="https://kiztopia.co.id" target="_blank"> 582 <img alt="Indonesia Flag" class="mr-3 h-[15px] w-5 object-cover" height="40" src="https://vue61rwjjy.koniglecdn.com/files/id-flag" width="54" /> 583 <span>Indonesia</span> 584 </a> 585 <a class="text-body hover:bg-base-200 hover:text-primary flex items-center rounded-md px-3 py-2 text-sm" 586 href="https://kiztopia.com.tw/" target="_blank"> 587 <img alt="Taiwan Flag" class="mr-3 h-[15px] w-5 object-cover" height="40" src="https://vue61rwjjy.koniglecdn.com/files/tw-flag" width="54" /> 588 <span>Taiwan</span> 589 </a> 590 </div> 591 </div> 592 </div> 593 </div> 594 </div> 595</nav>
596<script> 597 $(document).ready(function() { 598 // Dynamic Language Switcher URLs 599 var currentPath = window.location.pathname; 600 var enUrl = currentPath; 601 var zhUrl = currentPath; 602 603 if (currentPath.startsWith('/zh')) { 604 enUrl = currentPath.replace('/zh', '') || '/'; 605 zhUrl = currentPath; 606 } else { 607 enUrl = currentPath; 608 zhUrl = '/zh' + (currentPath === '/' ? '' : currentPath); 609 } 610 611 // Explicit override for the 4th-anniversary-en route mapping to /zh/4th-anniversary 612 if (currentPath === '/4th-anniversary-en') { 613 zhUrl = '/zh/4th-anniversary'; 614 } 615 616 $('.lang-en').attr('href', enUrl); 617 $('.lang-zh').attr('href', zhUrl); 618 619 const $component = $('._n4vbrX-navbar-component'); 620 621 // Mobile menu toggle 622 $component.find('._n4vbrX-mobile-menu-button').on('click', function() { 623 const $button = $(this); 624 const $mobileMenuPanel = $component.find('._n4vbrX-mobile-nav-panel'); // Target by class 625 const isExpanded = $button.attr('aria-expanded') === 'true'; 626 627 $button.attr('aria-expanded', !isExpanded); 628 $mobileMenuPanel.toggleClass('hidden'); 629 $component.find('._n4vbrX-hamburger-icon').toggleClass('hidden'); 630 $component.find('._n4vbrX-close-icon').toggleClass('hidden'); 631 }); 632 633 // Mobile dropdown toggle 634 $component.find('._n4vbrX-mobile-dropdown-toggle').on('click', function() { 635 const $button = $(this); 636 const controlledMenuId = $button.attr('aria-controls'); 637 const $dropdownMenu = $component.find('#' + controlledMenuId); 638 639 const $chevronIcon = $button.find('._n4vbrX-chevron-icon'); 640 const isExpanded = $button.attr('aria-expanded') === 'true'; 641 642 $button.attr('aria-expanded', !isExpanded); 643 $dropdownMenu.toggleClass('hidden'); 644 $chevronIcon.toggleClass('rotate-180'); 645 }); 646 647 // Desktop dropdown ARIA attribute handling 648 $component.find('._n4vbrX-desktop-dropdown-item').each(function() { 649 const $item = $(this); // This is the li.group 650 const $toggle = $item.find('._n4vbrX-desktop-dropdown-toggle'); // This is the button 651 652 $item.on('mouseenter', function() { 653 $toggle.attr('aria-expanded', 'true'); 654 }); 655 656 $item.on('mouseleave', function() { 657 // Only set to false if the dropdown itself or its toggle does not have focus 658 if (!$item.is(':focus-within')) { 659 $toggle.attr('aria-expanded', 'false'); 660 } 661 }); 662 663 // When the toggle button itself gains focus 664 $toggle.on('focus', function() { 665 $toggle.attr('aria-expanded', 'true'); 666 }); 667 668 // When focus moves out of the entire dropdown item (li.group) 669 $item.on('focusout', function(e) { 670 // Check if the new focused element (e.relatedTarget) is outside the current $item 671 if (!$item[0].contains(e.relatedTarget)) { 672 $toggle.attr('aria-expanded', 'false'); 673 } 674 }); 675 }); 676 }); 677</script>
677 678 679 680 681 </div> 682 683 684<div x-data="searchModal" @search-open.window="handleOpen($event.detail)"> 685 686 <div x-show="isOpen" 687 x-cloak 688 x-on:keydown.window.escape="handleClose()" 689 class="fixed inset-0 z-50" 690 aria-labelledby="search-modal" 691 role="dialog" 692 aria-modal="true"> 693 <!-- Background backdrop, show/hide based on modal state. --> 694 <div x-show="isOpen" 695 x-transition.opacity.duration.500ms 696 class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div> 697 <div x-show="isOpen" 698 x-transition:enter="transition ease-in-out duration-500" 699 x-transition:enter-start="translate-y-full" 700 x-transition:enter-end="translate-y-0" 701 x-transition:leave="transition ease-in-out duration-500" 702 x-transition:leave-start="translate-y-0" 703 x-transition:leave-end="translate-y-full" 704 class="fixed inset-0 z-10 w-screen"> 705 <div class="flex flex-col h-full justify-end items-center"> 706 <!-- Modal panel, show/hide based on modal state. --> 707 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 grow bg-white w-full max-h-full shadow-xl"> 708 <div class="col-span-1 lg:col-span-2 px-4 sm:p-8"> 709 <div class="h-24 sm:h-32 mb-8 flex flex-col justify-end items-start"> 710 <h2 class="text-4xl sm:text-6xl font-bold text-gray-900">Search</h2> 711 </div> 712 <!-- Search bar and button. --> 713 714<form class="flex flex-row justify-between items-center w-full" 715 x-on:submit="query($event, searchValue)"> 716 <label for="" class="sr-only">Search</label> 717 <div class="relative flex-grow rounded-lg transition focus-within:drop-shadow-md"> 718 <!-- Search icon adornment. --> 719 <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" 720 aria-hidden="true"> 721 <svg xmlns="http://www.w3.org/2000/svg"
722 viewBox="0 0 20 20" 723 fill="currentColor" 724 class="w-5 h-5 text-gray-400"> 725 <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" /> 726 </svg> 727 </div> 728 <input id="search" 729 type="text" 730 name="search" 731 class="block transition w-full rounded-t-lg py-1.5 px-10 text-gray-900 bg-gray-100 placeholder:text-gray-400 sm:text-sm sm:leading-6 border-t-0 border-x-0 border-b-2 border-b-gray-200 focus:border-b-primary focus:ring-0" 732 placeholder="Search anything" 733 x-model="searchValue" 734 x-on:input.debounce.500ms="query($event, searchValue)"> 735 <!-- Invisible button to capture Enter key. --> 736 <button type="submit" hidden aria-hidden="true"></button> 737 <!-- Clear input button. --> 738 <button type="button" 739 x-on:click="handleClear()" 740 x-show="searchValue" 741 class="absolute inset-y-0 right-0 flex items-center pr-3 transition hover:opacity-50" 742 aria-label="clear-search"> 743 <svg xmlns="http://www.w3.org/2000/svg"
744 viewBox="0 0 20 20" 745 fill="currentColor" 746 class="w-5 h-5 text-gray-400" 747 aria-hidden="true"> 748 <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" /> 749 </svg> 750 </button> 751 </div> 752 <!-- Search arrow icon button. --> 753 <button type="submit" 754 class="btn-icon ml-2 text-gray-500" 755 x-bind:disabled="isLoading" 756 aria-label="query-search"> 757 <!-- Loading indicator. --> 758 <svg xmlns="http://www.w3.org/2000/svg" 759 fill="none" 760 viewBox="0 0 24 24" 761 stroke-width="1.5" 762 stroke="currentColor" 763 class="w-6 h-6 animate-pulse" 764 x-show="isLoading" 765 aria-hidden="true"> 766 <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" /> 767 </svg> 768 <!-- Arrow when not loading. --> 769 <svg xmlns="http://www.w3.org/2000/svg" 770 fill="none"
771 viewBox="0 0 24 24" 772 stroke-width="1.5" 773 stroke="currentColor" 774 class="w-6 h-6" 775 x-show="!isLoading" 776 aria-hidden="true"> 777 <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /> 778 </svg> 779 </button> 780</form> 781 782 <!-- "Nothing found" indicator. --> 783 <div class="relative my-2 prose prose-a:text-primary" 784 x-show="resultGroups?.length === 0 && searchValue && hasSearched" 785 x-transition.opacity> 786 787 <p class="text-sm">Can't find what you're looking for!</p> 788 789 </div> 790 </div> 791 <div class="col-span-1 lg:col-span-3 overflow-auto grow px-4 sm:p-8 bg-gray-50 rounded-t-2xl sm:rounded-tr-none sm:rounded-bl-2xl" 792 x-show="resultGroups?.length" 793 x-transition.opacity> 794 <!-- Displaces list to same level as search bar. --> 795 <div class="h-16 sm:h-32 mb-8 flex flex-col justify-end items-start"> 796 <!-- Results count. --> 797 <h3 class="text-2xl sm:text-3xl font-semibold text-gray-900" 798 x-text="`${searchCount} result${searchCount > 1 ? 's' : ''}`"></h3> 799 </div> 800 <!-- Search results list. --> 801 802<ul role="list"> 803 <template x-for="group in resultGroups"> 804 <li class="mb-4"> 805 <!-- Result group title. --> 806 <div class="pb-2"> 807 <h3 class="text-base font-semibold leading-6 text-gray-900" 808 x-text="group.title"></h3> 809 </div> 810 <!-- Results list. --> 811 <ul role="list"> 812 <template x-for="result in group.results"> 813 <a x-bind:href="result?.url"> 814 <li class="relative flex justify-between gap-x-6 px-4 py-5 rounded-lg transition hover:bg-white hover:shadow-md sm:px-6 lg:px-8"> 815 <div class="flex min-w-0 gap-x-4"> 816 <div class="min-w-0 flex-auto"> 817 <p class="text-sm font-semibold leading-6 text-gray-900" 818 x-text="result?.title"></p> 819 <p class="mt-1 flex text-xs leading-5 text-gray-500" 820 x-text="result?.subtitle"></p> 821 </div> 822 </div> 823 <!-- Right caret. --> 824 <div class="flex shrink-0 items-center gap-x-4" aria-hidden="true"> 825 <svg class="h-5 w-5 flex-none text-gray-400"
826 viewBox="0 0 20 20" 827 fill="currentColor"> 828 <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> 829 </svg> 830 </div> 831 </li> 832 </a> 833 </template> 834 </ul> 835 </li> 836 </template> 837</ul> 838 839 </div> 840 </div> 841 </div> 842 </div> 843 <!-- Top right button group. --> 844 <div class="absolute top-4 right-4 z-10" 845 x-on:click="handleClose()" 846 x-show="isOpen" 847 x-transition.duration.300ms.delay.500ms> 848 <!-- Close button. --> 849 <button class="flex flex-row items-center group bg-white text-gray-700 rounded-full p-2 transition drop-shadow-md hover:drop-shadow-lg" 850 type="button"> 851 <!-- Expanding text on hover. --> 852 <span class="text-sm text-left font-normal transition-all w-0 group-hover:w-12 ps-0 group-hover:ps-1 opacity-0 group-hover:opacity-100 -translate-x-12 group-hover:translate-x-0">Close</span> 853 <svg xmlns="http://www.w3.org/2000/svg" 854 fill="none"
855 viewBox="0 0 24 24" 856 stroke-width="1.5" 857 stroke="currentColor" 858 class="w-6 h-6" 859 aria-hidden="true"> 860 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> 861 </svg> 862 </button> 863 </div> 864 </div> 865</div> 866 867 868 869 870 871 872</div> 873 874 875 876 877 <main class="flex-grow flex flex-col relative " 878 data-node-type="segment" 879 data-template-id="7440396843266129920" 880 data-node-key="main" 881 style=""> 882 883 884 885 <div class="relative flex flex-col w-full"> 886 887 888 889 890 <div data-select-key="block_1" data-node-type="block" data-node-key="block_1" data-select-type="block" data-component-id="7440396843668783104"> 891 892 893 894 895 <div> 896<style> 897 /* Unique prefix for custom classes to avoid conflicts */ 898 /* This class is used to apply the specific background image for the hero section, 899 which includes the light cream color, hanging lamps, and cartoon illustration. */ 900 ._b7e9d2-hero-bg { 901 /* Base background color in case the image doesn't load */ 902 background-color: #FDF9F0; 903 /* Background image with cover sizing for larger screens */ 904 background-image: url("https://vue61rwjjy.koniglecdn.com/images/contact-kiztopia-indonesia.webp"); 905 background-position: center; 906 background-repeat: no-repeat; 907 /* Default is cover for larger screens */ 908 background-size: cover; 909 } 910 911 /* Media query for mobile devices to ensure the image fits without cropping */ 912 @media (max-width: 767px) { 913 ._b7e9d2-hero-bg { 914 /* Contain ensures the entire image is visible without cropping */ 915 background-size: contain; 916 } 917 } 918</style> 919<section data-node-key="component" data-node-name="Contact Us Header Kiztopia" data-node-type="component"> 920<!-- Top Row: Hero Image and Header Text --> 921<div class="relative w-full overflow-hidden _b7e9d2-hero-bg py-8 sm:py-12 md:py-16 flex items-center justify-center md:justify-start min-h-[160px] sm:min-h-[200px] lg:min-h-[240px]"> 922<!-- The h1 tag for the main heading "CONTACT US" --> 923<h1 class="text-primary hidden text-4xl sm:text-5xl md:text-6xl font-extrabold uppercase px-4 sm:px-8 text-center md:text-left"> 924 CONTACT US 925 </h1> 926</div> 927<!-- Bottom Row: Inquiries Header --> 928<div class="w-full bg-primary py-4 sm:py-6 md:py-8 text-center"> 929<!-- The h2 tag for the sub-heading "Inquiries" --> 930<h2 class="text-primary-content text-2xl sm:text-3xl md:text-4xl font-semibold px-4 sm:px-8"> 931 Inquiries 932 </h2> 933</div> 934</section> 935<section class="_contacttabs-a2b3c4 bg-base-100" data-node-key="component" data-node-name="Tabbed Contact Form" 936 data-node-type="component"> 937 <div class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8"> 938 <div class="max-w-4xl mx-auto"> 939 <div class="mt-6"> 940 <div class="mb-8"> 941 <nav aria-label="Tabs" class="flex flex-wrap justify-center gap-x-2 gap-y-2 sm:gap-x-4 p-1" 942 role="tablist"> 943 <button aria-controls="panel-general-inquiries" aria-selected="true" class="whitespace-nowrap rounded-btn py-2.5 px-4 sm:px-6 text-sm lg:text-lg font-medium transition-colors duration-200 bg-primary text-primary-content shadow-sm" id="tab-general-inquiries" role="tab" tabindex="0" type="button">General Inquiries</button> 944 <button aria-controls="panel-book-party" aria-selected="false" class="whitespace-nowrap rounded-btn py-2.5 px-4 sm:px-6 text-sm lg:text-lg font-medium transition-colors duration-200 bg-base-200 text-body hover:bg-base-300" id="tab-book-party" role="tab" tabindex="-1" type="button">Book Party</button> 945 <button aria-controls="panel-book-school-visit" aria-selected="false" class="whitespace-nowrap rounded-btn py-2.5 px-4 sm:px-6 text-sm lg:text-lg font-medium transition-colors duration-200 bg-base-200 text-body hover:bg-base-300" id="tab-book-school-visit" role="tab" tabindex="-1" type="button">Book School Visit</button> 946 <button aria-controls="panel-book-group-events" aria-selected="false" class="whitespace-nowrap rounded-btn py-2.5 px-4 sm:px-6 text-sm lg:text-lg font-medium transition-colors duration-200 bg-base-200 text-body hover:bg-base-300" id="tab-book-group-events" role="tab" tabindex="-1" type="button">Book Group Events</button> 947 </nav> 948 </div> 949 <div class="text-left"> 950 <p class="mt-4 text-base leading-8 text-body"> 951 "<span class="text-primary">*</span>" indicates required fields. 952 </p> 953 </div> 954 <div> 955 <!-- General Panel --> 956 <div aria-labelledby="tab-general-inquiries" class="_contact-panel-a2b3c4" 957 id="panel-general-inquiries" role="tabpanel"> 958 <form action="https://forms.konigle.com/api/forms/g4btyqkzqf1n/submit/" 959 class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8" method="POST"> 960 <input type="hidden" name="token" value="p1YvsRQRetp1A1-f7ZngHlpD6w02NXYQ7Wb6hAr3aJE"> 961 <div> 962 <div class="mt-2"> 963 <input autocomplete="given-name" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="first-name-general-inquiries" name="first-name" placeholder="First Name" type="text"> 964 </input> 965 </div> 966 </div> 967 <div> 968 <div class="mt-2"> 969 <input autocomplete="family-name" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="last-name-general-inquiries" name="last-name" placeholder="Last Name" type="text"/> 970 </div> 971 </div> 972 <div> 973 <div class="mt-2"> 974 <input autocomplete="tel" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="mobile-number-general-inquiries" name="mobile-number" placeholder="Mobile Number" type="tel"/> 975 </div> 976 </div> 977 <div> 978 <div class="mt-2"> 979 <input autocomplete="email" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="email-general-inquiries" name="email" placeholder="Email Address" type="email"/> 980 </div> 981 </div> 982 <div class="sm:col-span-2"> 983 <div class="mt-2"> 984 <select class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="inquiry-type-general-inquiries" name="inquiry-type"> 985<option>Inquiry Type</option> 986<option>General Inquiry</option> 987<option>Venue and TV Advertising Rental</option> 988<option>Corporate Event</option> 989<option>Collaboration Inquiries</option> 990<option>IP Licensing & Franchising</option> 991<option>Help Us Improve</option> 992</select> 993 </div> 994 </div> 995 <div class="sm:col-span-2"> 996 <div class="mt-2"> 997 <textarea class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="message-general-inquiries" name="message" placeholder="Your Message" rows="4"></textarea> 998 </div> 999 </div> 1000 <div class="sm:col-span-2 flex items-start space-x-3"> 1001 <div class="flex h-6 items-center">
1002 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="newsletter-general-inquiries" name="newsletter" type="checkbox"/> 1003 </div> 1004 <div class="text-sm leading-6"> 1005 <p class="text-subtle"> 1006 I would like to receive latest news, exclusive offers and 1007 promotions from Kiztopia. 1008 </p> 1009 </div> 1010 </div> 1011 <div class="sm:col-span-2 flex justify-center md:justify-start"> 1012 <div 1013 class="hidden flex items-center justify-center h-24 md:h-16 w-full md:w-72 rounded-box border border-dashed border-border bg-base-200"> 1014 <p class="text-subtle text-sm">CAPTCHA Placeholder</p> 1015 </div> 1016 </div> 1017 <div class="sm:col-span-2 flex flex-col items-center md:items-start"> 1018 <button class="w-full md:w-64 rounded-btn bg-primary px-4 py-3 text-sm font-semibold text-primary-content shadow-sm hover:bg-primary-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" type="submit">Submit</button> 1019 </div> 1020 </form> 1021 </div> 1022 <!-- Party Panel --> 1023 <div aria-labelledby="tab-book-party" class="_contact-panel-a2b3c4 hidden" id="panel-book-party" 1024 role="tabpanel"> 1025 <form action="https://forms.konigle.com/api/forms/852tbmm9q7f4/submit/" 1026 class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8" method="POST"> 1027 <input type="hidden" name="token" value="p1YvsRQRetp1A1-f7ZngHlpD6w02NXYQ7Wb6hAr3aJE"> 1028 <div class="sm:col-span-2"> 1029 <div class="mt-2"> 1030 <select class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="branch-book-party" name="branch-book-party"> 1031<option>Select Branch</option> 1032<option>New Town Plaza</option> 1033<option>AIRSIDE</option> 1034<option>Park Central</option> 1035<option>Hopewell Mall</option> 1036<option>Olympian City</option> 1037</select> 1038 </div> 1039 </div> 1040 <div class="sm:col-span-2 text-center mb-4 mt-4"> 1041 <h3 class="text-2xl font-bold tracking-tight text-heading sm:text-3xl"> 1042 Parent / Guardian 1043 Information 1044 </h3> 1045 </div> 1046 <div> 1047 <div class="mt-2"> 1048 <input autocomplete="given-name" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="first-name-book-party" name="first-name" placeholder="First Name" type="text"> 1049 </input> 1050 </div> 1051 </div> 1052 <div> 1053 <div class="mt-2"> 1054 <input autocomplete="family-name" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="last-name-book-party" name="last-name" placeholder="Last Name" type="text"/> 1055 </div> 1056 </div> 1057 <div> 1058 <div class="mt-2"> 1059 <input autocomplete="tel" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="mobile-number-book-party" name="mobile-number" placeholder="Mobile Number" type="tel"/> 1060 </div> 1061 </div> 1062 <div> 1063 <div class="mt-2"> 1064 <input autocomplete="email" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="email-book-party" name="email" placeholder="Email Address" type="email"/> 1065 </div> 1066 </div> 1067 <div class="sm:col-span-2 text-center mb-4 mt-4"> 1068 <h3 class="text-2xl font-bold tracking-tight text-heading sm:text-3xl">Party Information 1069 </h3> 1070 </div> 1071 <div> 1072 <div class="mt-2"> 1073 <input autocomplete="given-name" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="first-name-child" name="first-name-child" placeholder="First Name of Birthday Celebrant" type="text"/> 1074 </div> 1075 </div> 1076 <div> 1077 <div class="mt-2"> 1078 <input autocomplete="family-name" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="last-name-child" name="last-name-child" placeholder="Last Name of Birthday Celebrant" type="text"/> 1079 </div> 1080 </div> 1081 <div class="sm:col-span-2 space-y-8"> 1082 <div class="grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-8"> 1083 <div> 1084 <label class="text-body block text-sm leading-6 font-medium"> </label> 1085 <div class="mt-2"> 1086 <select class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="gender-book-party" name="gender-book-party"> 1087<option>Gender</option> 1088<option>Boy</option> 1089<option>Girl</option> 1090</select> 1091 </div> 1092 </div> 1093 <div> 1094 <label class="text-body block text-sm leading-6 font-medium"> </label> 1095 <div class="mt-2"> 1096 <input class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="age-book-party" min="1" name="age-book-party" placeholder="Age" type="number"/> 1097 </div> 1098 </div> 1099 <div> 1100 <label class="text-subtle block text-sm leading-6 font-medium" for="birthdate-book-party">Birthdate of Birthday Celebrant</label> 1101 <div class="mt-2"> 1102 <input class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="birthdate-book-party" name="birthdate-book-party" placeholder="Birthday" type="date"/> 1103 </div> 1104 </div> 1105 </div> 1106 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start"> 1107 <div class="space-y-6"> 1108 <img alt="Party Package" class="w-full h-auto object-cover rounded-box" height="295" src="https://vue61rwjjy.koniglecdn.com/files/party-package_gcNda1d" width="480"/> 1109 </div> 1110 <div> 1111 <fieldset> 1112 <legend class="text-sm font-medium leading-6 text-body"> 1113 Please Select One
1114 <span class="text-primary">*</span> 1115 </legend> 1116 <div class="mt-4 space-y-4"> 1117 <div class="flex items-center"> 1118 <input class="h-4 w-4 border-border text-primary focus:ring-primary" id="package-classic-book-party" name="package-tier-book-party" type="radio" value="classic"/> 1119 <label class="ml-3 block text-sm font-medium leading-6 text-body" for="package-classic-book-party">Classic</label> 1120 </div> 1121 <div class="flex items-center"> 1122 <input class="h-4 w-4 border-border text-primary focus:ring-primary" id="package-premier-book-party" name="package-tier-book-party" type="radio" value="premier"/> 1123 <label class="ml-3 block text-sm font-medium leading-6 text-body" for="package-premier-book-party">Premier</label> 1124 </div> 1125 <div class="flex items-center"> 1126 <input class="h-4 w-4 border-border text-primary focus:ring-primary" id="package-exclusive-book-party" name="package-tier-book-party" type="radio" value="exclusive"/> 1127 <label class="ml-3 block text-sm font-medium leading-6 text-body" for="package-exclusive-book-party">Exclusive</label> 1128 </div> 1129 </div> 1130 </fieldset> 1131 <p class="mt-6 text-sm text-subtle"> 1132 To view all the details of our packages you 1133 can also <a class="font-medium text-primary hover:underline" 1134 href="https://40e3f6ya7o.koniglecdn.com/files/birthday-flyer.pdf" 1135 target="_blank">download</a> our brochure. 1136 </p> 1137 </div> 1138 </div> 1139 <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-6"> 1140 <div> 1141 <label class="text-subtle block text-sm leading-6 font-medium" for="preferred-date-book-party">Preferred Party Date</label> 1142 <div class="mt-2"> 1143 <input class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="preferred-date-book-party" name="preferred-date-book-party" placeholder="Preferred Party Date" type="date"/> 1144 </div> 1145 </div> 1146 <div> 1147 <label class="text-body block text-sm leading-6 font-medium"> </label> 1148 <div class="mt-2"> 1149 <select class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="preferred-timeslot-book-party" name="preferred-timeslot-book-party"> 1150<option>Preferred Timeslot</option> 1151</select> 1152 </div> 1153 </div> 1154 </div> 1155 <div> 1156 <label class="block text-sm font-medium leading-6 text-body mb-4">Party Theme</label> 1157 <fieldset> 1158 <legend class="sr-only">Party Theme Options</legend> 1159 <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> 1160 <div class="relative"> 1161 <input class="peer sr-only" id="theme-1-book-party" name="book-party-package" type="radio" value="classic-theme"/> 1162 <label class="block cursor-pointer rounded-box overflow-hidden transition-transform duration-300 hover:scale-105" for="theme-1-book-party"> 1163<img alt="Classic Birthday Party Theme" class="w-full h-auto" height="159" src="https://vue61rwjjy.koniglecdn.com/files/classic-birthday-party-theme" width="317"/> 1164</label> 1165 <div 1166 class="absolute inset-0 bg-black/70 flex flex-col items-center justify-center text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-300 pointer-events-none"> 1167 <svg class="w-8 h-8 mb-2" fill="currentColor" viewbox="0 0 24 24" 1168 xmlns="http://www.w3.org/2000/svg"> 1169 <path 1170 d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"> 1171 </path> 1172 </svg>
1173 <span>Classic</span> 1174 </div> 1175 </div> 1176 <div class="relative"> 1177 <input class="peer sr-only" id="theme-2-book-party" name="book-party-package" type="radio" value="princess-theme"/> 1178 <label class="block cursor-pointer rounded-box overflow-hidden transition-transform duration-300 hover:scale-105" for="theme-2-book-party"> 1179<img alt="Princess Birthday Party Theme" class="w-full h-auto" height="159" src="https://vue61rwjjy.koniglecdn.com/files/princess-birthday-party-theme" width="317"/> 1180</label> 1181 <div 1182 class="absolute inset-0 bg-black/70 flex flex-col items-center justify-center text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-300 pointer-events-none"> 1183 <svg class="w-8 h-8 mb-2" fill="currentColor" viewbox="0 0 24 24" 1184 xmlns="http://www.w3.org/2000/svg"> 1185 <path 1186 d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"> 1187 </path> 1188 </svg> 1189 <span>Princess</span> 1190 </div> 1191 </div> 1192 <div class="relative"> 1193 <input class="peer sr-only" id="theme-3-book-party" name="book-party-package" type="radio" value="space-theme"/> 1194 <label class="block cursor-pointer rounded-box overflow-hidden transition-transform duration-300 hover:scale-105" for="theme-3-book-party"> 1195<img alt="Space Birthday Party Theme" class="w-full h-auto" height="159" src="https://vue61rwjjy.koniglecdn.com/files/space-birthday-party-theme" width="317"/> 1196</label> 1197 <div 1198 class="absolute inset-0 bg-black/70 flex flex-col items-center justify-center text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-300 pointer-events-none"> 1199 <svg class="w-8 h-8 mb-2" fill="currentColor" viewbox="0 0 24 24" 1200 xmlns="http://www.w3.org/2000/svg"> 1201 <path 1202 d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"> 1203 </path> 1204 </svg> 1205 <span>Space</span> 1206 </div> 1207 </div> 1208 </div> 1209 </fieldset> 1210 </div> 1211 <div class="pt-8 border-t border-border"> 1212 <div class="text-center"> 1213 <h4 class="text-2xl font-semibold leading-7 text-heading" 1214 style="color: #FC9600">Additional Services 1215 <span class="text-base font-normal">* additional charges apply</span> 1216 </h4> 1217 </div> 1218 <p class="text-base text-body mt-6">Additional Entertainment</p> 1219 <fieldset class="mt-2"> 1220 <legend class="sr-only">Choose your add-ons</legend> 1221 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-4"> 1222 <div class="relative flex items-start"> 1223 <div class="flex h-6 items-center"> 1224 <input class="h-4 w-4 roun
1224ded-sm border-border text-primary focus:ring-primary" id="addon-magic-book-party" name="addons-book-party[]" type="checkbox"/> 1225 </div> 1226 <div class="ml-3 text-sm leading-6"> 1227 <label class="font-medium text-body" for="addon-magic-book-party">Magic Show</label> 1228 </div> 1229 </div> 1230 <div class="relative flex items-start"> 1231 <div class="flex h-6 items-center"> 1232 <input class=\"h-4 w-4 rounded-sm border-border text-primary focus:ring-primary\" id=\"addon-painting-book-party\" name=\"addons-book-party[]\" type=\"checkbox\"/> 1233 </div> 1234 <div class=\"ml-3 text-sm leading-6\">\n <label class=\"font-medium text-body\" for=\"addon-painting-book-party\">Hand/Face Painting</label> 1235 </div> 1236 </div> 1237 <div class="relative flex items-start"> 1238 <div class="flex h-6 items-center"> 1239 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="addon-balloon-book-party" name="addons-book-party[]" type="checkbox"/> 1240 </div> 1241 <div class="ml-3 text-sm leading-6"> 1242 <label class="font-medium text-body" for="addon-balloon-book-party">Balloon Sculpting</label> 1243 </div> 1244 </div> 1245 <div class="relative flex items-start"> 1246 <div class="flex h-6 items-center"> 1247 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="addon-sand-book-party" name="addons-book-party[]" type="checkbox"/> 1248 </div> 1249 <div class="ml-3 text-sm leading-6"> 1250 <label class="font-medium text-body" for="addon-sand-book-party">Sand Art</label> 1251 </div> 1252 </div> 1253 <div class="relative flex items-start"> 1254 <div class="flex h-6 items-center"> 1255 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="addon-photographer-book-party" name="addons-book-party[]" type="checkbox"/> 1256 </div> 1257 <div class="ml-3 text-sm leading-6"> 1258 <label class="font-medium text-body" for="addon-photographer-book-party">Photographer</label> 1259 </div> 1260 </div> 1261 </div> 1262 </fieldset> 1263 </div> 1264 </div> 1265 <div class="sm:col-span-2"> 1266 <label class="block text-sm font-medium leading-6 text-body" for="message-book-party-main">Tell us more about your party</label> 1267 <div class="mt-2"> 1268 <textarea class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="message-book-party-main" name="message" placeholder="Additional Information" rows="4"></textarea> 1269 </div> 1270 </div> 1271 <div class="sm:col-span-2 flex items-start space-x-3"> 1272 <div class="flex h-6 items-center">
1273 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="terms-book-party-main" name="terms" type="checkbox"/> 1274 </div> 1275 <div class="text-sm leading-6"> 1276 <p class="text-subtle"> 1277 I have read and agree to the 1278 <span class="text-primary"><a href="/conditions-and-sales" target="_blank">Conditions of Sale</a></span> 1279 </p> 1280 </div> 1281 </div> 1282 <div class="sm:col-span-2 flex flex-col items-center md:items-start"> 1283 <button class="w-full md:w-64 rounded-btn bg-primary px-4 py-3 text-sm font-semibold text-primary-content shadow-sm hover:bg-primary-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" type="submit">Submit</button> 1284 <div class="w-full text-center"> 1285 <p class="mt-3 text-center text-xs text-subtle"> 1286 This is not a confirm booking. Our 1287 events team will be in touch 1288 with you to confirm on the availability and confirmation of the booking. 1289 </p> 1290 </div> 1291 </div> 1292 </form> 1293 </div> 1294 <!-- School Visit Panel --> 1295 <div aria-labelledby="tab-book-school-visit" class="_contact-panel-a2b3c4 hidden" 1296 id="panel-book-school-visit" role="tabpanel"> 1297 <form action="https://forms.konigle.com/api/forms/v1fvic7v0vth/submit/" 1298 class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8" method="POST"> 1299 <input type="hidden" name="token" value="p1YvsRQRetp1A1-f7ZngHlpD6w02NXYQ7Wb6hAr3aJE"> 1300 <div class="sm:col-span-2"> 1301 <div class="mt-2"> 1302 <select class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="branch-book-school-visit" name="branch-book-school-visit"> 1303<option>Select Branch</option> 1304<option>New Town Plaza</option> 1305<option>AIRSIDE</option> 1306<option>Park Central</option> 1307<option>Hopewell Mall</option> 1308<option>Olympian City</option> 1309</select> 1310 </div> 1311 </div> 1312 <div class="sm:col-span-2 text-center mb-4 mt-4"> 1313 <h3 class="text-2xl font-bold tracking-tight text-heading sm:text-3xl"> 1314 Parent / Guardian 1315 Information 1316 </h3> 1317 </div> 1318 <div> 1319 <div class="mt-2"> 1320 <input autocomplete="given-name" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="first-name-book-school-visit" name="first-name" placeholder="First Name" type="text"> 1321 </input> 1322 </div> 1323 </div> 1324 <div> 1325 <div class="mt-2"> 1326 <input autocomplete="family-name" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="last-name-book-school-visit" name="last-name" placeholder="Last Name" type="text"/> 1327 </div> 1328 </div> 1329 <div> 1330 <div class="mt-2"> 1331 <input autocomplete="tel" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="mobile-number-book-school-visit" name="mobile-number" placeholder="Mobile Number" type="tel"/> 1332 </div> 1333 </div> 1334 <div> 1335 <div class="mt-2"> 1336 <input autocomplete="email" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="email-book-school-visit" name="email" placeholder="Email Address" type="email"/> 1337 </div> 1338 </div> 1339 <div class="sm:col-span-2 text-center mb-4 mt-4"> 1340 <h3 class="text-2xl font-bold tracking-tight text-heading sm:text-3xl"> 1341 School Visit 1342 Information 1343 </h3> 1344 </div> 1345 <div class="sm:col-span-2"> 1346 <div class="mt-2"> 1347 <input autocomplete="given-name" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="school-name-book-school-visit" name="school-name" placeholder="School Name" type="text"/> 1348 </div> 1349 </div> 1350 <div class="sm:col-span-2"> 1351 <div class="mt-2"> 1352 <input autocomplete="address-level1" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="school-address-book-school-visit" name="school-address" placeholder="School Address" type="text"/> 1353 </div> 1354 </div> 1355 <div> 1356 <div class="mt-2"> 1357 <input class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="preferred-date-book-school-visit" name="preferred-date-book-school-visit" placeholder="Preferred Date" type="date"/> 1358 </div> 1359 </div> 1360 <div> 1361 <div class="mt-2"> 1362 <select class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="preferred-timeslot-book-school-visit" name="preferred-timeslot-book-school-visit"> 1363<option>Preferred Timeslot</option> 1364<option>10:00am - 12:00pm</option> 1365<option>1:00pm - 3:00pm</option> 1366<option>4:00pm - 6:00pm</option> 1367</select> 1368 </div> 1369 </div> 1370 <div class="sm:col-span-2 pt-6"> 1371 <p class="mt-1 text-sm text-subtle text-left">Age Range of Students</p> 1372 <fieldset class="mt-6"> 1373 <legend class="sr-only">Choose age range of students</legend> 1374 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-4"> 1375 <div class="relative flex items-start"> 1376 <div class="flex h-6 items-center"> 1377 <input class="h-4 w-4 roun
1377ded-sm border-border text-primary focus:ring-primary" id="age-18m-book-school-visit" name="age-book-school-visit[]" type="checkbox"/> 1378 </div> 1379 <div class="ml-3 text-sm leading-6"> 1380 <label class="font-medium text-body" for="age-18m-book-school-visit">18m to 36m</label> 1381 </div> 1382 </div> 1383 <div class="relative flex items-start"> 1384 <div class="flex h-6 items-center"> 1385 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="age-3yo-book-school-visit" name="age-book-school-visit[]" type="checkbox"/> 1386 </div> 1387 <div class="ml-3 text-sm leading-6"> 1388 <label class="font-medium text-body" for="age-3yo-book-school-visit">3yo to 4yo</label> 1389 </div> 1390 </div> 1391 <div class="relative flex items-start"> 1392 <div class="flex h-6 items-center"> 1393 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="age-5yo-book-school-visit" name="age-book-school-visit[]" type="checkbox"/> 1394 </div> 1395 <div class="ml-3 text-sm leading-6"> 1396 <label class="font-medium text-body" for="age-5yo-book-school-visit">5yo to 7yo</label> 1397 </div> 1398 </div> 1399 <div class="relative flex items-start"> 1400 <div class="flex h-6 items-center"> 1401 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="age-8yo-book-school-visit" name="age-book-school-visit[]" type="checkbox"/> 1402 </div> 1403 <div class="ml-3 text-sm leading-6"> 1404 <label class="font-medium text-body" for="age-8yo-book-school-visit">8yo and above</label> 1405 </div> 1406 </div> 1407 </div> 1408 </fieldset> 1409 </div> 1410 <div class="sm:col-span-2 mt-6 pt-4 space-y-8"> 1411 <div class="pt-0"> 1412 <h3 class="text-center text-4xl font-semibold leading-7 text-heading mb-6">Attendees 1413 </h3> 1414 <div class="grid grid-cols-1 sm:grid-cols-3 gap-6"> 1415 <div> 1416 <label class="block text-sm font-medium leading-6 text-body text-center" for="num-students-book-school-visit">No. of Students</label> 1417 <div class="mt-2 flex"> 1418 <button class="_num-input-btn-minus-d9e0f1 w-12 rounded-l-btn border border-r-0 border-border flex items-center justify-center text-subtle hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-primary z-10" type="button"> 1419<span class="sr-only">Decrease</span> 1420<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1421<path d="M5 11V13H19V11H5Z"></path> 1422</svg> 1423</button> 1424 <input class="_num-input-d9e0f1 block w-full border-y border-border py-2.5 text-center text-body bg-white placeholder:text-subtle focus:ring-0 focus:z-20 sm:text-sm sm:leading-6" id="num-students-book-school-visit" min="30" name="num_students" type="number" value="30"/> 1425 <button class="_num-input-btn-plus-d9e0f1 w-12 rounded-r-btn border border-l-0 border-border flex items-center justify-center text-subtle hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-primary z-10" type="button"> 1426<span class="sr-only">Increase</span> 1427<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1428<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path> 1429</svg> 1430</button> 1431 </div> 1432 <p class="mt-2 text-xs text-subtle text-center">Minimum: 30</p> 1433 </div> 1434 <div> 1435 <label class="block text-sm font-medium leading-6 text-body text-center" for="num-teachers-book-school-visit">No. of Teachers</label> 1436 <div class="mt-2 flex"> 1437 <button class="_num-input-btn-minus-d9e0f1 w-12 rounded-l-btn border border-r-0 border-border flex items-center justify-center text-subtle hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-primary z-10" type="button"> 1438<span class="sr-only">Decrease</span> 1439<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1440<path d="M5 11V13H19V11H5Z"></path> 1441</svg> 1442</button> 1443 <input class="_num-input-d9e0f1 block w-full border-y border-border py-2.5 text-center text-body bg-white placeholder:text-subtle focus:ring-0 focus:z-20 sm:text-sm sm:leading-6" id="num-teachers-book-school-visit" min="1" name="num_teachers" type="number" value="1"/> 1444 <button class="_num-input-btn-plus-d9e0f1 w-12 rounded-r-btn border border-l-0 border-border flex items-center justify-center text-subtle hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-primary z-10" type="button"> 1445<span class="sr-only">Increase</span> 1446<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1447<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path> 1448</svg> 1449</button> 1450 </div> 1451 <p class="mt-2 text-xs text-subtle text-center">Minimum: 1</p> 1452 </div> 1453 <div> 1454 <label class="block text-sm font-medium leading-6 text-body text-center" for="num-parents-book-school-visit">No. of Parents</label> 1455 <div class="mt-2 flex"> 1456 <button class="_num-input-btn-minus-d9e0f1 w-12 rounded-l-btn border border-r-0 border-border flex items-center justify-center text-subtle hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-primary z-10" type="button"> 1457<span class="sr-only">Decrease</span> 1458<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1459<path d="M5 11V13H19V11H5Z"></path> 1460</svg> 1461</button> 1462 <input class="_num-input-d9e0f1 block w-full border-y border-border py-2.5 text-center text-body bg-white placeholder:text-subtle focus:ring-0 focus:z-20 sm:text-sm sm:leading-6" id="num-parents-book-school-visit" min="1" name="num_parents" type="number" value="1"/> 1463 <button class="_num-input-btn-plus-d9e0f1 w-12 rounded-r-btn border border-l-0 border-border flex items-center justify-center text-subtle hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-primary z-10" type="button"> 1464<span class="sr-only">Increase</span> 1465<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1466<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path> 1467</svg> 1468</button> 1469 </div> 1470 <p class="mt-2 text-xs text-subtle text-center">Minimum: 1</p> 1471 </div> 1472 </div> 1473 </div> 1474 <div class="mt-12"> 1475 <h4 class="text-xl font-semibold leading-7 text-heading text-left mb-4"> 1476 School Visit 1477 Package 1478 </h4> 1479 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start"> 1480 <div> 1481 <img alt="School Visit Package" class="w-full h-auto object-cover rounded-box" height="295" src="https://vue61rwjjy.koniglecdn.com/files/school-visit-package" width="480"/> 1482 </div> 1483 <div> 1484 <fieldset> 1485 <legend class="text-sm font-medium leading-6 text-body"> 1486 Please select 1487 one: <span class="text-red-500">*</span> 1488 </legend> 1489 <div class="mt-4 space-y-4"> 1490 <div class="flex items-center"> 1491 <input class="h-4 w-4 border-border text-primary focus:ring-primary" id="package-explore-book-school-visit" name="package-book-school-visit" type="radio"/> 1492 <label class="ml-3 block text-sm font-medium leading-6 text-body" for="package-explore-book-school-visit">Explore</label> 1493 </div> 1494 </div> 1495 </fieldset> 1496 <p class="mt-6 text-sm text-subtle"> 1497 To view all the details of our packages 1498 you can also <a class="font-medium text-primary hover:underline" 1499 href="#" target="_blank">download</a> our brochure 1500 </p> 1501 </div> 1502 </div> 1503 </div> 1504 <div class="pt-8 border-t border-border"> 1505 <div class="text-center"> 1506 <h4 class="text-2xl font-semibold leading-7 text-heading" 1507 style="color: #FC9600"> 1508 Optional Add-ons * additional 1509 charges apply 1510 </h4> 1511 </div> 1512 <p class="text-base text-body mt-6">Additional Entertainment</p> 1513 <fieldset class="mt-2"> 1514 <legend class="sr-only">Choose areas of interest</legend> 1515 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-4"> 1516 <div class="relative flex items-start"> 1517 <div class="flex h-6 items-center"> 1518 <input class="h-4 w-4 roun
1518ded-sm border-border text-primary focus:ring-primary" id="addon-meal-book-school-visit-interest" name="addons-book-school-visit[]" type="checkbox"/> 1519 </div> 1520 <div class="ml-3 text-sm leading-6"> 1521 <label class="font-medium text-body" for="addon-meal-book-school-visit-interest"> 1522 Kids Meal 1523 </label> 1524 </div> 1525 </div> 1526 <div class="relative flex items-start"> 1527 <div class="flex h-6 items-center"> 1528 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="addon-magic-book-school-visit-interest" name="addons-book-school-visit[]" type="checkbox"/> 1529 </div> 1530 <div class="ml-3 text-sm leading-6"> 1531 <label class="font-medium text-body" for="addon-magic-book-school-visit-interest"> 1532 Magic Show 1533 </label> 1534 </div> 1535 </div> 1536 <div class="relative flex items-start"> 1537 <div class="flex h-6 items-center"> 1538 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="addon-balloon-book-school-visit-interest" name="addons-book-school-visit[]" type="checkbox"/> 1539 </div> 1540 <div class="ml-3 text-sm leading-6"> 1541 <label class="font-medium text-body" for="addon-balloon-book-school-visit-interest"> 1542 Balloon Sculpting 1543 </label> 1544 </div> 1545 </div> 1546 <div class="relative flex items-start"> 1547 <div class="flex h-6 items-center"> 1548 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="addon-painting-book-school-visit-interest" name="addons-book-school-visit[]" type="checkbox"/> 1549 </div> 1550 <div class="ml-3 text-sm leading-6"> 1551 <label class="font-medium text-body" for="addon-painting-book-school-visit-interest"> 1552 Hand/Face Painting 1553 </label> 1554 </div> 1555 </div> 1556 </div> 1557 </fieldset> 1558 </div> 1559 </div> 1560 <div class="sm:col-span-2"> 1561 <label class="block text-sm font-medium leading-6 text-body" for="message-book-school-visit-main"> 1562 Tell us more about your school visit 1563 </label> 1564 <div class="mt-2"> 1565 <textarea class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="message-book-school-visit-main" name="message" placeholder="Additional Information" rows="4"></textarea> 1566 </div> 1567 </div> 1568 <div class="sm:col-span-2 flex items-start space-x-3"> 1569 <div class="flex h-6 items-center">
1570 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="terms-book-school-visit-main" name="terms" type="checkbox"/> 1571 </div> 1572 <div class="text-sm leading-6"> 1573 <p class="text-subtle"> 1574 I have read and agree to the 1575 <span class="text-primary"><a href="/conditions-and-sales" target="_blank">Conditions of Sale</a></span> 1576 </p> 1577 </div> 1578 </div> 1579 <div class="sm:col-span-2 flex justify-center md:justify-start"> 1580 <div 1581 class="hidden flex items-center justify-center h-24 md:h-16 w-full md:w-72 rounded-box border border-dashed border-border bg-base-200"> 1582 <p class="text-subtle text-sm">CAPTCHA Placeholder</p> 1583 </div> 1584 </div> 1585 <div class="sm:col-span-2 flex flex-col items-center md:items-start"> 1586 <button class="w-full md:w-64 rounded-btn bg-primary px-4 py-3 text-sm font-semibold text-primary-content shadow-sm hover:bg-primary-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" type="submit">Submit</button> 1587 <div class="w-full text-center"> 1588 <p class="mt-3 text-center text-xs text-subtle"> 1589 This is not a confirm booking. Our 1590 events team will be in touch 1591 with you to confirm on the availability and confirmation of the booking. 1592 </p> 1593 </div> 1594 </div> 1595 </form> 1596 </div> 1597 <!-- Group Events Panel --> 1598 <div aria-labelledby="tab-book-group-events" class="_contact-panel-a2b3c4 hidden" 1599 id="panel-book-group-events" role="tabpanel"> 1600 <form action="https://forms.konigle.com/api/forms/62d63o6f3un7/submit/" 1601 class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8" method="POST"> 1602 <input type="hidden" name="token" value="p1YvsRQRetp1A1-f7ZngHlpD6w02NXYQ7Wb6hAr3aJE"> 1603 <div class="sm:col-span-2"> 1604 <div class="mt-2"> 1605 <select class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="branch-book-group-events" name="branch-book-group-events"> 1606<option>Select Branch</option> 1607<option>New Town Plaza</option> 1608<option>AIRSIDE</option> 1609<option>Park Central</option> 1610<option>Hopewell Mall</option> 1611<option>Olympian City</option> 1612</select> 1613 </div> 1614 </div> 1615 <div class="sm:col-span-2 text-center mb-4 mt-4"> 1616 <h3 class="text-2xl font-bold tracking-tight text-heading sm:text-3xl"> 1617 Contact Person 1618 Information 1619 </h3> 1620 </div> 1621 <div> 1622 <div class="mt-2"> 1623 <input autocomplete="given-name" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="first-name-group-events" name="first-name" placeholder="First Name" type="text"> 1624 </input> 1625 </div> 1626 </div> 1627 <div> 1628 <div class="mt-2"> 1629 <input autocomplete="family-name" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="last-name-group-events" name="last-name" placeholder="Last Name" type="text"/> 1630 </div> 1631 </div> 1632 <div> 1633 <div class="mt-2"> 1634 <input autocomplete="tel" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="mobile-number-group-events" name="mobile-number" placeholder="Mobile Number" type="tel"/> 1635 </div> 1636 </div> 1637 <div> 1638 <div class="mt-2"> 1639 <input autocomplete="email" class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="email-group-events" name="email" placeholder="Email Address" type="email"/> 1640 </div> 1641 </div> 1642 <div class="sm:col-span-2 text-center mb-4 mt-4"> 1643 <h3 class="text-2xl font-bold tracking-tight text-heading sm:text-3xl"> 1644 Group Events 1645 Inquiry 1646 </h3> 1647 </div> 1648 <div class="sm:col-span-2 mt-2"> 1649 <h4 class="text-xl font-semibold leading-7 text-heading text-left mb-4"> 1650 Group Event 1651 Package 1652 </h4> 1653 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start"> 1654 <div> 1655 <img alt="Group Event Package" class="w-full h-auto object-cover rounded-box" height="295" src="https://vue61rwjjy.koniglecdn.com/files/group-events-package" width="480"/> 1656 </div> 1657 <div> 1658 <fieldset> 1659 <legend class="text-sm font-medium leading-6 text-body"> 1660 Please select one:
1661 <span class="text-red-500">*</span> 1662 </legend> 1663 <div class="mt-4 space-y-4"> 1664 <div class="flex items-center"> 1665 <input class="h-4 w-4 border-border text-primary focus:ring-primary" id="package-non-exclusive-book-school-visit" name="package-book-group-events" type="radio"/> 1666 <label class="ml-3 block text-sm font-medium leading-6 text-body" for="package-non-exclusive-book-school-visit"> 1667 Non-Exclusive 1668 </label> 1669 </div> 1670 <div class="flex items-center"> 1671 <input class="h-4 w-4 border-border text-primary focus:ring-primary" id="package-exclusive-book-school-visit" name="package-book-group-events" type="radio"/> 1672 <label class="ml-3 block text-sm font-medium leading-6 text-body" for="package-exclusive-book-school-visit">Exclusive</label> 1673 </div> 1674 </div> 1675 </fieldset> 1676 <p class="mt-6 text-sm text-subtle"> 1677 To view all the details of our packages you 1678 can also <a class="font-medium text-primary hover:underline" href="#" 1679 target="_blank">download</a> our brochure 1680 </p> 1681 </div> 1682 </div> 1683 </div> 1684 <div class="sm:col-span-2"> 1685 <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-6"> 1686 <div> 1687 <div class="mt-2"> 1688 <input class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="preferred-date-book-group-events" name="preferred-date-book-group-events" type="date"/> 1689 </div> 1690 </div> 1691 <div> 1692 <div class="mt-2"> 1693 <select class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="preferred-timeslot-book-group-events" name="preferred-timeslot-book-group-events"> 1694<option>Preferred Timeslot</option> 1695<option>10:00am - 12:00pm</option> 1696<option>1:00pm - 3:00pm</option> 1697<option>4:00pm - 6:00pm</option> 1698<option>7:00pm - 9:00pm</option> 1699</select> 1700 </div> 1701 </div> 1702 </div> 1703 </div> 1704 <div class="sm:col-span-2 mt-6 pt-4 space-y-8"> 1705 <div class="pt-0"> 1706 <h3 class="text-center text-4xl font-semibold leading-7 text-heading mb-6">Attendees 1707 </h3> 1708 <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> 1709 <div> 1710 <label class="block text-sm font-medium leading-6 text-body text-center" for="num-children-book-group-events">No. of Children</label> 1711 <div class="mt-2 flex"> 1712 <button class="_num-input-btn-minus-d9e0f1 w-12 rounded-l-btn border border-r-0 border-border flex items-center justify-center text-subtle hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-primary z-10" type="button"> 1713<span class="sr-only">Decrease</span> 1714<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1715<path d="M5 11V13H19V11H5Z"></path> 1716</svg> 1717</button> 1718 <input class="_num-input-d9e0f1 block w-full border-y border-border py-2.5 text-center text-body bg-white placeholder:text-subtle focus:ring-0 focus:z-20 sm:text-sm sm:leading-6" id="num-children-book-group-events" min="30" name="num_children" type="number" value="30"/> 1719 <button class="_num-input-btn-plus-d9e0f1 w-12 rounded-r-btn border border-l-0 border-border flex items-center justify-center text-subtle hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-primary z-10" type="button"> 1720<span class="sr-only">Increase</span> 1721<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1722<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path> 1723</svg> 1724</button> 1725 </div> 1726 <p class="mt-2 text-xs text-subtle text-center">Minimum: 30</p> 1727 </div> 1728 <div> 1729 <label class="block text-sm font-medium leading-6 text-body text-center" for="num-adults-book-group-events">No. of Adults</label> 1730 <div class="mt-2 flex"> 1731 <button class="_num-input-btn-minus-d9e0f1 w-12 rounded-l-btn border border-r-0 border-border flex items-center justify-center text-subtle hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-primary z-10" type="button"> 1732<span class="sr-only">Decrease</span> 1733<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1734<path d="M5 11V13H19V11H5Z"></path> 1735</svg> 1736</button> 1737 <input class="_num-input-d9e0f1 block w-full border-y border-border py-2.5 text-center text-body bg-white placeholder:text-subtle focus:ring-0 focus:z-20 sm:text-sm sm:leading-6" id="num-adults-book-group-events" min="1" name="num_adults" type="number" value="1"/> 1738 <button class="_num-input-btn-plus-d9e0f1 w-12 rounded-r-btn border border-l-0 border-border flex items-center justify-center text-subtle hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-primary z-10" type="button"> 1739<span class="sr-only">Increase</span> 1740<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1741<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path> 1742</svg> 1743</button> 1744 </div> 1745 <p class="mt-2 text-xs text-subtle text-center">Minimum: 1</p> 1746 </div> 1747 </div> 1748 </div> 1749 </div> 1750 <div class="sm:col-span-2 pt-8"> 1751 <div class="text-center"> 1752 <h4 class="text-2xl font-semibold leading-7 text-heading" style="color: #FC9600"> 1753 Optional Add-ons * additional charges 1754 apply 1755 </h4> 1756 </div> 1757 <fieldset class="mt-6"> 1758 <legend class="sr-only">Choose add-on entertainment</legend> 1759 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-4"> 1760 <div class="relative flex items-start"> 1761 <div class="flex h-6 items-center"> 1762 <input class="h-4 w-4 roun
1762ded-sm border-border text-primary focus:ring-primary" id="addon-meal-book-group-event" name="addons-book-group-events[]" type="checkbox"/> 1763 </div> 1764 <div class="ml-3 text-sm leading-6"> 1765 <label class="font-medium text-body" for="addon-meal-book-group-event">Kids Meal</label> 1766 </div> 1767 </div> 1768 <div class="relative flex items-start"> 1769 <div class="flex h-6 items-center"> 1770 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="addon-magic-book-group-event" name="addons-book-group-events[]" type="checkbox"/> 1771 </div> 1772 <div class="ml-3 text-sm leading-6"> 1773 <label class="font-medium text-body" for="addon-magic-book-group-event">Magic Show</label> 1774 </div> 1775 </div> 1776 <div class="relative flex items-start"> 1777 <div class="flex h-6 items-center"> 1778 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="addon-balloon-book-group-event" name="addons-book-group-events[]" type="checkbox"/> 1779 </div> 1780 <div class="ml-3 text-sm leading-6"> 1781 <label class="font-medium text-body" for="addon-balloon-book-group-event">Balloon Sculpting</label> 1782 </div> 1783 </div> 1784 <div class="relative flex items-start"> 1785 <div class="flex h-6 items-center"> 1786 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="addon-painting-book-group-event" name="addons-book-group-events[]" type="checkbox"/> 1787 </div> 1788 <div class="ml-3 text-sm leading-6"> 1789 <label class="font-medium text-body" for="addon-painting-book-group-event">Face/Hand Painting</label> 1790 </div> 1791 </div> 1792 </div> 1793 </fieldset> 1794 </div> 1795 <div class="sm:col-span-2"> 1796 <label class="block text-sm font-medium leading-6 text-body" for="message-book-group-events-main">Tell us more about your group visit</label> 1797 <div class="mt-2"> 1798 <textarea class="block w-full rounded-input border-0 py-2.5 px-3.5 text-body bg-white shadow-sm ring-1 ring-inset ring-border placeholder:text-subtle focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="message-book-group-events-main" name="message" placeholder="Additional Information" rows="4"></textarea> 1799 </div> 1800 </div> 1801 <div class="sm:col-span-2 flex items-start space-x-3"> 1802 <div class="flex h-6 items-center"> 1803 <input class="h-4 w-4 rounded-sm border-border text-primary focus:ring-primary" id="terms-book-group-events-main" name="terms" type="checkbox"/> 1804 </div> 1805 <div class="text-sm leading-6"> 1806 <p class="text-subtle"> 1807 I have read and agree to the
1808 <span class="text-primary"><a href="/conditions-and-sales" target="_blank">Conditions of Sale</a></span> 1809 </p> 1810 </div> 1811 </div> 1812 <div class="sm:col-span-2 flex justify-center md:justify-start"> 1813 <div 1814 class="hidden flex items-center justify-center h-24 md:h-16 w-full md:w-72 rounded-box border border-dashed border-border bg-base-200"> 1815 <p class="text-subtle text-sm">CAPTCHA Placeholder</p> 1816 </div> 1817 </div> 1818 <div class="sm:col-span-2 flex flex-col items-center md:items-start"> 1819 <button class="w-full md:w-64 rounded-btn bg-primary px-4 py-3 text-sm font-semibold text-primary-content shadow-sm hover:bg-primary-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" type="submit">Submit</button> 1820 <div class="w-full text-center"> 1821 <p class="mt-3 text-center text-xs text-subtle"> 1822 This is not a confirm booking. Our 1823 events team will be in touch 1824 with you to confirm on the availability and confirmation of the booking. 1825 </p> 1826 </div> 1827 </div> 1828 </form> 1829 </div> 1830 </div> 1831 </div> 1832 </div> 1833 </div> 1834</section>
1835<script> 1836 $(document).ready(function() { 1837 // Tab switching functionality 1838 $('._contacttabs-a2b3c4').each(function() { 1839 const $component = $(this); 1840 const $tabs = $component.find('[role="tab"]'); 1841 const $panels = $component.find('._contact-panel-a2b3c4'); 1842 1843 const activeClasses = 'bg-primary text-primary-content shadow-sm'; 1844 const inactiveClasses = 'bg-base-200 text-body hover:bg-base-300'; 1845 1846 const activateTab = ($tab) => { 1847 const targetPanelId = $tab.attr('aria-controls'); 1848 1849 $tabs.attr({ 'aria-selected': 'false', 'tabindex': '-1' }); 1850 $tabs.removeClass(activeClasses).addClass(inactiveClasses); 1851 $panels.addClass('hidden'); 1852 1853 $tab.attr({ 'aria-selected': 'true', 'tabindex': '0' }); 1854 $tab.removeClass(inactiveClasses).addClass(activeClasses); 1855 $('#' + targetPanelId).removeClass('hidden'); 1856 }; 1857 1858 $tabs.on('click', function(e) { 1859 e.preventDefault(); 1860 activateTab($(this)); 1861 if(history.pushState) { 1862 history.pushState(null, null, '#' + $(this).attr('id')); 1863 } else { 1864 window.location.hash = '#' + $(this).attr('id'); 1865 } 1866 }); 1867 1868 $tabs.on('keydown', function(e) { 1869 const $this = $(this); 1870 let index = $tabs.index($this); 1871 let flag = false; 1872 1873 if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { 1874 index = (index + 1) % $tabs.length; 1875 flag = true; 1876 } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { 1877 index = (index - 1 + $tabs.length) % $tabs.length; 1878 flag = true; 1879 } else if (e.key === 'Enter' || e.key === ' ') { 1880 e.preventDefault(); 1881 activateTab($this); 1882 if(history.pushState) { 1883 history.pushState(null, null, '#' + $this.attr('id')); 1884 } else { 1885 window.location.hash = '#' + $this.attr('id'); 1886 } 1887 } else if (e.key === 'Home') { 1888 index = 0; 1889 flag = true; 1890 } else if (e.key === 'End') { 1891 index = $tabs.length - 1; 1892 flag = true; 1893 } 1894 1895 if (flag) { 1896 e.preventDefault(); 1897 $tabs.eq(index).focus(); 1898 } 1899 }); 1900 1901 // Handle hash on load 1902 if (window.location.hash) { 1903 let $targetTab = $(window.location.hash); 1904 if ($targetTab.length && $targetTab.attr('role') === 'tab') { 1905 activateTab($targetTab); 1906 setTimeout(function() { 1907 $('html, body').animate({ scrollTop: $component.offset().top - 80 }, 400); 1908 }, 100); 1909 } else { 1910 activateTab($tabs.first()); 1911 } 1912 } else if ($tabs.length > 0) { 1913 activateTab($tabs.first()); 1914 } 1915 1916 // Number input functionality (kept for completeness, but not used in the form itself) 1917 $component.on('click', '._num-input-btn-plus-d9e0f1', function() { 1918 const $input = $(this).siblings('._num-input-d9e0f1'); 1919 let val = parseInt($input.val(), 10) || 0; 1920 $input.val(val + 1).trigger('change'); 1921 }); 1922 1923 $component.on('click', '._num-input-btn-minus-d9e0f1', function() { 1924 const $input = $(this).siblings('._num-input-d9e0f1'); 1925 let val = parseInt($input.val(), 10) || 0; 1926 const min = parseInt($input.attr('min'), 10); 1927 1928 if (!isNaN(min) && val <= min) { 1929 return; 1930 } 1931 $input.val(val - 1).trigger('change'); 1932 }); 1933 }); 1934 1935 // --- Dynamic Timeslot Availability based on Party Package --- 1936 1937 // 1. Define available timeslots for each package 1938 const timeslotsByPackage = { 1939 'classic': [ 1940 '10:00am - 12:00pm', 1941 '12:00pm - 2:00pm', 1942 '2:00pm - 4:00pm', 1943 '4:00pm - 6:00pm', 1944 '6:00pm - 8:00pm' 1945 ], 1946 'premier': [ 1947 '10:00am - 12:00pm', 1948 '12:00pm - 2:00pm', 1949 '2:00pm - 4:00pm', 1950 '4:00pm - 6:00pm', 1951 '6:00pm - 8:00pm' 1952 ], 1953 'exclusive': [ 1954 '10:00am - 1:00pm', 1955 '1:00pm - 4:00pm', 1956 '4:00pm - 7:00pm' 1957 ] 1958 }; 1959 1960 const $timeslotSelect = $('#preferred-timeslot-book-party'); 1961 const $packageRadios = $('input[name="package-tier-book-party"]'); // Select all radio buttons for package tier 1962 1963 // Function to update timeslot options 1964 function updateTimeslotOptions(selectedPackage) { 1965 // Clear existing options, but keep the default "Preferred Timeslot" 1966 $timeslotSelect.html('<option value="">Preferred Timeslot</option>'); 1967 1968 const availableTimeslots = timeslotsByPackage[selectedPackage]; 1969 1970 if (availableTimeslots) {
1971 availableTimeslots.forEach(timeslot => { 1972 $timeslotSelect.append(`<option value="${timeslot}">${timeslot}</option>`); 1973 }); 1974 } 1975 } 1976 1977 // 2. Add change event listener to package radio buttons 1978 $packageRadios.on('change', function() { 1979 const selectedPackage = $(this).val(); // Get the value of the selected radio button (e.g., 'classic', 'premier', 'exclusive') 1980 updateTimeslotOptions(selectedPackage); 1981 }); 1982 1983 // 3. Optional: Trigger on page load if a package is pre-selected (e.g., by server) 1984 // Check if any package is already checked on load and update timeslots accordingly 1985 const initialSelectedPackage = $packageRadios.filter(':checked').val(); 1986 if (initialSelectedPackage) { 1987 updateTimeslotOptions(initialSelectedPackage); 1988 } 1989 // --- End Dynamic Timeslot Availability --- 1990 1991 1992 // Form submission testing (Existing code) 1993 $('form').on('submit', function(e) { 1994 e.preventDefault(); // Prevent actual submission 1995 1996 const $form = $(this); 1997 const $submitButton = $form.find('button[type="submit"]'); 1998 const originalButtonText = $submitButton.text(); 1999 const formAction = $form.attr('action'); 2000 const formData = new FormData($form[0]); 2001 2002 // Show loading state 2003 $submitButton.text('Submitting...').prop('disabled', true); 2004 2005 // Determine form type from action URL 2006 let formType = 'unknown'; 2007 if (formAction.includes('general-inquiries') || formAction.includes('skltit7miwnw')) { 2008 formType = 'general-inquiries'; 2009 } else if (formAction.includes('book-party')) { 2010 formType = 'book-party'; 2011 } else if (formAction.includes('book-school-visit')) { 2012 formType = 'book-school-visit'; 2013 } else if (formAction.includes('book-group-events')) { 2014 formType = 'book-group-events'; 2015 } 2016 2017 // Log the submission data for debugging 2018 console.log('=== FORM SUBMISSION ==='); 2019 console.log('Form Type:', formType); 2020 console.log('Endpoint:', formAction); 2021 console.log('Form Data:', Object.fromEntries(formData)); 2022 console.log('Submitted at:', new Date().toISOString()); 2023 2024 // Make API call 2025 fetch(formAction, { 2026 method: 'POST', 2027 body: formData, 2028 headers: { 2029 'Accept': 'application/json', 2030 } 2031 }) 2032 .then(response => { 2033 console.log('Response status:', response.status); 2034 console.log('Response headers:', response.headers); 2035 2036 if (!response.ok) { 2037 throw new Error(`HTTP error! status: ${response.status}`); 2038 } 2039 2040 return response.json(); 2041 }) 2042 .then(data => { 2043 console.log('API Response:', data); 2044 console.log('=== END FORM SUBMISSION ==='); 2045 2046 // Redirect to /success on successful submission 2047 window.location.href = '/success'; 2048 }) 2049 .catch(error => { 2050 console.error('Submission failed:', error); 2051 console.log('=== END FORM SUBMISSION (FAILED) ==='); 2052 2053 // Show error toast 2054 showErrorToast('Form submission failed. Please try again or contact support.'); 2055 }) 2056 .finally(() => { 2057 // Reset button state 2058 $submitButton.text(originalButtonText).prop('disabled', false); 2059 }); 2060 }); 2061}); 2062 2063// Success toast notification function 2064function showSuccessToast(message) { 2065 // Remove existing toast if any 2066 $('.toast-notification').remove(); 2067 2068 // Create toast element 2069 const toast = $(` 2070 <div class="toast-notification fixed top-4 right-4 z-50 bg-green-500 text-white px-6 py-4 rounded-lg shadow-lg transform transition-all duration-300 translate-x-full"> 2071 <div class="flex items-center"> 2072 <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20"> 2073 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path> 2074 </svg>
2075 <span>${message}</span> 2076 <button class="ml-4 text-white hover:text-gray-200" onclick="$(this).parent().parent().remove()"> 2077 <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> 2078 <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> 2079 </svg> 2080 </button> 2081 </div> 2082 </div> 2083 `); 2084 2085 // Add to body 2086 $('body').append(toast); 2087 2088 // Animate in 2089 setTimeout(() => { 2090 toast.removeClass('translate-x-full'); 2091 }, 100); 2092 2093 // Auto remove after 5 seconds 2094 setTimeout(() => { 2095 toast.addClass('translate-x-full'); 2096 setTimeout(() => { 2097 toast.remove(); 2098 }, 300); 2099 }, 5000); 2100} 2101 2102// Error toast notification function 2103function showErrorToast(message) { 2104 // Remove existing toast if any 2105 $('.toast-notification').remove(); 2106 2107 // Create toast element 2108 const toast = $(` 2109 <div class="toast-notification fixed top-4 right-4 z-50 bg-red-500 text-white px-6 py-4 rounded-lg shadow-lg transform transition-all duration-300 translate-x-full"> 2110 <div class="flex items-center"> 2111 <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20"> 2112 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path> 2113 </svg> 2114 <span>${message}</span> 2115 <button class="ml-4 text-white hover:text-gray-200" onclick="$(this).parent().parent().remove()"> 2116 <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> 2117 <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> 2118 </svg> 2119 </button> 2120 </div> 2121 </div> 2122 `); 2123 2124 // Add to body 2125 $('body').append(toast); 2126 2127 // Animate in 2128 setTimeout(() => { 2129 toast.removeClass('translate-x-full'); 2130 }, 100); 2131 2132 // Auto remove after 8 seconds (longer for errors) 2133 setTimeout(() => { 2134 toast.addClass('translate-x-full'); 2135 setTimeout(() => { 2136 toast.remove(); 2137 }, 300); 2138 }, 8000); 2139} 2140</script>
2140 2141<section class="_a7c4b9-hero-root location-tabs-section" data-node-key="component" data-node-name="Large Location Map" 2142 data-node-type="component" style="background-color:#F8DFDA;"> 2143 <div class="bg-primary py-8 md:py-10"> 2144 <div class="container mx-auto px-4 text-center"> 2145 <h2 class="text-3xl md:text-4xl font-bold heading text-primary-content" id="_6b3s9f-main-heading">Our 2146 Location</h2> 2147 </div> 2148 </div> 2149 <div class="_a7c4b9-bottom-left-image-container"> 2150 <img alt="Kiztopia Symbol White" class="_a7c4b9-bottom-left-image" height="2084" src="https://pkqvhk6cki.koniglecdn.com/files/kiztopia-symbol-white" width="2084"/> 2151 </div> 2152 <div class="container mx-auto px-4 py-12 md:py-16 lg:py-12 relative z-10"> 2153 <!-- Multi-tab navigation --> 2154 <nav aria-label="Branch Locations" class="mb-8" role="tablist"> 2155 <div class="location-tabs-wrapper flex flex-wrap justify-center gap-3 mb-4"> 2156 <button aria-controls="panel-new-town-plaza" aria-selected="true" class="location-tab-btn active" data-location="new-town-plaza" id="tab-new-town-plaza" role="tab" tabindex="0"> 2157 New Town Plaza 2158 </button> 2159 <button aria-controls="panel-airside" aria-selected="false" class="location-tab-btn" data-location="airside" id="tab-airside" role="tab" tabindex="-1"> 2160 AIRSIDE 2161 </button> 2162 <button aria-controls="panel-park-central" aria-selected="false" class="location-tab-btn" data-location="park-central" id="tab-park-central" role="tab" tabindex="-1"> 2163 Park Central 2164 </button> 2165 <button aria-controls="panel-hopewell-mall" aria-selected="false" class="location-tab-btn" data-location="hopewell-mall" id="tab-hopewell-mall" role="tab" tabindex="-1"> 2166 Hopewell Mall 2167 </button> 2168 <button aria-controls="panel-olympian-city" aria-selected="false" class="location-tab-btn" data-location="olympian-city" id="tab-olympian-city" role="tab" tabindex="-1"> 2169 Olympian City 2170 </button> 2171 </div> 2172 </nav> 2173 2174 <!-- New Town Plaza Panel --> 2175 <div aria-labelledby="tab-new-town-plaza" class="location-panel active" id="panel-new-town-plaza" role="tabpanel"> 2176 <div class="relative lg:h-[460px]"> 2177 <div class="lg:absolute lg:inset-0 rounded-box overflow-hidden shadow-md"> 2178 <iframe allowfullscreen="" class="w-full h-[300px] md:h-[400px] lg:h-full border-0" loading="lazy" 2179 referrerpolicy="no-referrer-when-downgrade" 2180 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1844.6361848464876!2d114.18725565805805!3d22.38108729632042!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x340407a9ccca49b9%3A0x8f0b2756c3e2da07!2sKiztopia%20Hong%20Kong%20-%20New%20Town%20Plaza!5e0!3m2!1sen!2sph!4v1678527823712!5m2!1sen!2sph" 2181 style="border:0;"></iframe> 2182 </div> 2183 <div aria-labelledby="location-heading-new-town-plaza" 2184 class="mt-8 lg:mt-0 lg:absolute lg:top-1/2 lg:-translate-y-1/2 lg:right-4 xl:right-8 w-full max-w-md mx-auto lg:w-[370px] lg:max-w-none lg:mx-0 h-auto lg:h-auto backdrop-blur-sm p-6 rounded-box shadow-xl flex flex-col" 2185 style="background-color:#FFC107;"> 2186 <div> 2187 <h3 class="text-2xl lg:text-2xl heading font-semibold mb-6 text-left text-primary-content" 2188 id="location-heading-new-town-plaza">FIND US IN New Town Plaza 2189 </h3> 2190 <ul aria-label="Contact Information" class="space-y-4 mb-6"> 2191 <li class="flex items-start"> 2192 <svg aria-hidden="true" class="w-5 h-5 text-primary mr-3 shrink-0 mt-[3px]" 2193 fill="currentColor" height="24" viewbox="0 0 24 24" width="24" 2194 xmlns="http://www.w3.org/2000/svg"> 2195 <path 2196 d="M20.891 2.006l.106 -.006l.13 .008l.09 .016l.123 .035l.107 .046l.1 .057l.09 .067l.082 .075l.052 .059l.082 .116l.052 .096c.047 .1 .077 .206 .09 .316l.005 .106c0 .075 -.008 .149 -.024 .22l-.035 .123l-6.532 18.077a1.55 1.55 0 0 1 -1.409 .903a1.547 1.547 0 0 1 -1.329 -.747l-.065 -.127l-3.352 -6.702l-6.67 -3.336a1.55 1.55 0 0 1 -.898 -1.259l-.006 -.149c0 -.56 .301 -1.072 .841 -1.37l.14 -.07l18.017 -6.506l.106 -.03l.108 -.018z"> 2197 </path> 2198 </svg>
2199 <span class="body text-primary-content">Unit Nos. LB08-09<br>New Town Plaza Phase I<br>Shatin, New Territories</span> 2200 </li> 2201 <li class="flex items-start"> 2202 <svg aria-hidden="true" class="w-5 h-5 text-primary mr-3 shrink-0 mt-[3px]" 2203 fill="currentColor" height="24" viewbox="0 0 24 24" width="24" 2204 xmlns="http://www.w3.org/2000/svg"> 2205 <path 2206 d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-5 2.66a1 1 0 0 0 -.993 .883l-.007 .117v5l.009 .131a1 1 0 0 0 .197 .477l.087 .1l3 3l.094 .082a1 1 0 0 0 1.226 0l.094 -.083l.083 -.094a1 1 0 0 0 0 -1.226l-.083 -.094l-2.707 -2.708v-4.585l-.007 -.117a1 1 0 0 0 -.993 -.883z"> 2207 </path> 2208 </svg> 2209 <span class="body text-primary-content">Mon-Fri (excepts for PH) 11am-8pm<br>Sat-Sun & PH 10am-8pm<br><br>*Operating hours subject to changes</span> 2210 </li> 2211 </ul> 2212 </div> 2213 <div class="mt-auto text-center"> 2214 <a class="inline-block bg-primary hover:bg-primary-600 text-primary-content font-semibold py-3 px-10 rounded-btn transition-colors duration-300 ease-in-out text-base" 2215 href="/booking-and-ticketing" rel="noopener noreferrer" target="_blank"> 2216 Buy Ticket 2217 </a> 2218 </div> 2219 </div> 2220 </div> 2221 <div class="py-6 md:py-8 lg:pt-16 lg:pb-0"> 2222 <div class="flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 justify-center items-center"> 2223 <div class="w-full md:w-1/3 text-center"> 2224 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">Drive</h3> 2225 <p class="text-body lg:text-lg text-subtle"> 2226 Type in "New Town Plaza Car Park" / "Kiztopia Hong Kong" in your Google map 2227 </p> 2228 </div> 2229 <div class="w-full md:w-1/3 text-center"> 2230 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">MRT</h3> 2231 <p class="text-body lg:text-lg text-subtle"> 2232 East Rail Line Sha Tin Station Exit A3 2233 </p> 2234 </div> 2235 <div class="w-full md:w-1/3 text-center"> 2236 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">Bus</h3> 2237 <p class="text-body lg:text-lg text-subtle"> 2238 83K, 83S, 263, 282, 283, 284, 285, 289R, 299X, 798A, 798B, 49P, N42, N73, N170 2239 </p> 2240 </div> 2241 </div> 2242 </div> 2243 </div> 2244 2245 <!-- AIRSIDE Panel --> 2246 <div aria-labelledby="tab-airside" class="location-panel" id="panel-airside" role="tabpanel"> 2247 <div class="relative lg:h-[460px]"> 2248 <div class="lg:absolute lg:inset-0 rounded-box overflow-hidden shadow-md"> 2249 <iframe allowfullscreen="" class="w-full h-[300px] md:h-[400px] lg:h-full border-0" loading="lazy" 2250 referrerpolicy="no-referrer-when-downgrade" 2251 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3690.590493358036!2d114.19556707613205!3d22.331321979664292!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3404078852d3522b%3A0x2ccead80bb030eaa!2sBouncetopia%20by%20Kiztopia!5e0!3m2!1sen!2sid!4v1703654854127!5m2!1sen!2sid" 2252 style="border:0;"></iframe> 2253 </div> 2254 <div class="mt-8 lg:mt-0 lg:absolute lg:top-1/2 lg:-translate-y-1/2 lg:right-4 xl:right-8 w-full max-w-md mx-auto lg:w-[370px] lg:max-w-none lg:mx-0 h-auto lg:h-auto backdrop-blur-sm p-6 rounded-box shadow-xl flex flex-col" 2255 style="background-color:#FFC107;"> 2256 <div> 2257 <h3 class="text-2xl lg:text-2xl heading font-semibold mb-6 text-left text-primary-content">FIND US IN AIRSIDE</h3> 2258 <ul aria-label="Contact Information" class="space-y-4 mb-6"> 2259 <li class="flex items-start"> 2260 <svg aria-hidden="true" class="w-5 h-5 text-primary mr-3 shrink-0 mt-[3px]" fill="currentColor" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 2261 <path d="M20.891 2.006l.106 -.006l.13 .008l.09 .016l.123 .035l.107 .046l.1 .057l.09 .067l.082 .075l.052 .059l.082 .116l.052 .096c.047 .1 .077 .206 .09 .316l.005 .106c0 .075 -.008 .149 -.024 .22l-.035 .123l-6.532 18.077a1.55 1.55 0 0 1 -1.409 .903a1.547 1.547 0 0 1 -1.329 -.747l-.065 -.127l-3.352 -6.702l-6.67 -3.336a1.55 1.55 0 0 1 -.898 -1.259l-.006 -.149c0 -.56 .301 -1.072 .841 -1.37l.14 -.07l18.017 -6.506l.106 -.03l.108 -.018z"></path> 2262 </svg>
2263 <span class="body text-primary-content">BOUNCETOPIA by KIZTOPIA<br>Shop Nos. L401 & 422<br>4/F, AIRSIDE<br>Kai Tak, Kowloon</span> 2264 </li> 2265 <li class="flex items-start"> 2266 <svg aria-hidden="true" class="w-5 h-5 text-primary mr-3 shrink-0 mt-[3px]" fill="currentColor" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 2267 <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-5 2.66a1 1 0 0 0 -.993 .883l-.007 .117v5l.009 .131a1 1 0 0 0 .197 .477l.087 .1l3 3l.094 .082a1 1 0 0 0 1.226 0l.094 -.083l.083 -.094a1 1 0 0 0 0 -1.226l-.083 -.094l-2.707 -2.708v-4.585l-.007 -.117a1 1 0 0 0 -.993 -.883z"></path> 2268 </svg> 2269 <span class="body text-primary-content">Mon - Fri (excepts for PH) 11am-8pm<br>Sat - Sun & PH: 10am - 8pm<br><br>*Operating hours subject to changes</span> 2270 </li> 2271 </ul> 2272 </div> 2273 <div class="mt-auto text-center"> 2274 <a class="inline-block bg-primary hover:bg-primary-600 text-primary-content font-semibold py-3 px-10 rounded-btn transition-colors duration-300 ease-in-out text-base" 2275 href="/booking-and-ticketing" rel="noopener noreferrer" target="_blank">Buy Ticket</a> 2276 </div> 2277 </div> 2278 </div> 2279 <div class="py-6 md:py-8 lg:pt-16 lg:pb-0"> 2280 <div class="flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 justify-center items-center"> 2281 <div class="w-full md:w-1/3 text-center"> 2282 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">Drive</h3> 2283 <p class="text-body lg:text-lg text-subtle"> 2284 Type in "AIRSIDE Car Park" / "Bouncetopia by Kiztopia Hong Kong" in your Google map 2285 </p> 2286 </div> 2287 <div class="w-full md:w-1/3 text-center"> 2288 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">MRT</h3> 2289 <p class="text-body lg:text-lg text-subtle">Kai Tak Station Exit C</p> 2290 </div> 2291 <div class="w-full md:w-1/3 text-center"> 2292 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">Bus</h3> 2293 <p class="text-body lg:text-lg text-subtle">-</p> 2294 </div> 2295 </div> 2296 </div> 2297 </div> 2298 2299 <!-- Park Central Panel --> 2300 <div aria-labelledby="tab-park-central" class="location-panel" id="panel-park-central" role="tabpanel"> 2301 <div class="relative lg:h-[460px]"> 2302 <div class="lg:absolute lg:inset-0 rounded-box overflow-hidden shadow-md"> 2303 <iframe allowfullscreen="" class="w-full h-[300px] md:h-[400px] lg:h-full border-0" loading="lazy" 2304 referrerpolicy="no-referrer-when-downgrade" 2305 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3691.228373743863!2d114.25706710000001!3d22.307201199999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x340401000da79c3b%3A0x54c99c2060af9623!2sKiztopia%20(Park%20Central)!5e0!3m2!1sen!2smm!4v1735527805139!5m2!1sen!2smm" 2306 style="border:0;"></iframe> 2307 </div> 2308 <div class="mt-8 lg:mt-0 lg:absolute lg:top-1/2 lg:-translate-y-1/2 lg:right-4 xl:right-8 w-full max-w-md mx-auto lg:w-[370px] lg:max-w-none lg:mx-0 h-auto lg:h-auto backdrop-blur-sm p-6 rounded-box shadow-xl flex flex-col" 2309 style="background-color:#FFC107;"> 2310 <div> 2311 <h3 class="text-2xl lg:text-2xl heading font-semibold mb-6 text-left text-primary-content">FIND US IN Park Central</h3> 2312 <ul aria-label="Contact Information" class="space-y-4 mb-6"> 2313 <li class="flex items-start"> 2314 <svg aria-hidden="true" class="w-5 h-5 text-primary mr-3 shrink-0 mt-[3px]" fill="currentColor" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 2315 <path d="M20.891 2.006l.106 -.006l.13 .008l.09 .016l.123 .035l.107 .046l.1 .057l.09 .067l.082 .075l.052 .059l.082 .116l.052 .096c.047 .1 .077 .206 .09 .316l.005 .106c0 .075 -.008 .149 -.024 .22l-.035 .123l-6.532 18.077a1.55 1.55 0 0 1 -1.409 .903a1.547 1.547 0 0 1 -1.329 -.747l-.065 -.127l-3.352 -6.702l-6.67 -3.336a1.55 1.55 0 0 1 -.898 -1.259l-.006 -.149c0 -.56 .301 -1.072 .841 -1.37l.14 -.07l18.017 -6.506l.106 -.03l.108 -.018z"></path> 2316 </svg>
2317 <span class="body text-primary-content">KIZTOPIA<br>G35, Park Central<br>Tseung Kwan O</span> 2318 </li> 2319 <li class="flex items-start"> 2320 <svg aria-hidden="true" class="w-5 h-5 text-primary mr-3 shrink-0 mt-[3px]" fill="currentColor" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 2321 <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-5 2.66a1 1 0 0 0 -.993 .883l-.007 .117v5l.009 .131a1 1 0 0 0 .197 .477l.087 .1l3 3l.094 .082a1 1 0 0 0 1.226 0l.094 -.083l.083 -.094a1 1 0 0 0 0 -1.226l-.083 -.094l-2.707 -2.708v-4.585l-.007 -.117a1 1 0 0 0 -.993 -.883z"></path> 2322 </svg> 2323 <span class="body text-primary-content">Mon - Fri (excepts for PH) 11am-8pm<br>Sat - Sun & PH: 10am - 8pm<br><br>*Operating hours subject to changes</span> 2324 </li> 2325 </ul> 2326 </div> 2327 <div class="mt-auto text-center"> 2328 <a class="inline-block bg-primary hover:bg-primary-600 text-primary-content font-semibold py-3 px-10 rounded-btn transition-colors duration-300 ease-in-out text-base" 2329 href="/booking-and-ticketing" rel="noopener noreferrer" target="_blank">Buy Ticket</a> 2330 </div> 2331 </div> 2332 </div> 2333 <div class="py-6 md:py-8 lg:pt-16 lg:pb-0"> 2334 <div class="flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 justify-center items-center"> 2335 <div class="w-full md:w-1/3 text-center"> 2336 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">Drive</h3> 2337 <p class="text-body lg:text-lg text-subtle">Type in "Park Central Car Park" / "Kiztopia Park Central" in your Google map</p> 2338 </div> 2339 <div class="w-full md:w-1/3 text-center"> 2340 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">MRT</h3> 2341 <p class="text-body lg:text-lg text-subtle">Cheung Kwan O Station Exit B2</p> 2342 </div> 2343 <div class="w-full md:w-1/3 text-center"> 2344 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">Bus</h3> 2345 <p class="text-body lg:text-lg text-subtle">792M, 793, 796S, 796X, 798, 290, 296A, 296D, 296M, 296C, 694, E22A, E22C, N29, N691, N796, A29P</p> 2346 </div> 2347 </div> 2348 </div> 2349 </div> 2350 2351 <!-- Hopewell Mall Panel --> 2352 <div aria-labelledby="tab-hopewell-mall" class="location-panel" id="panel-hopewell-mall" role="tabpanel"> 2353 <div class="relative lg:h-[460px]"> 2354 <div class="lg:absolute lg:inset-0 rounded-box overflow-hidden shadow-md"> 2355 <iframe allowfullscreen="" class="w-full h-[300px] md:h-[400px] lg:h-full border-0" loading="lazy" 2356 referrerpolicy="no-referrer-when-downgrade" 2357 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3692.088368092721!2d114.16921797532493!3d22.274642179705037!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x340401001c9bf445%3A0x3ecdd283add6ab2c!2sKiztopia(hopewell)!5e0!3m2!1szh-TW!2shk!4v1754877270737!5m2!1szh-TW!2shk" 2358 style="border:0;"></iframe> 2359 </div> 2360 <div class="mt-8 lg:mt-0 lg:absolute lg:top-1/2 lg:-translate-y-1/2 lg:right-4 xl:right-8 w-full max-w-md mx-auto lg:w-[370px] lg:max-w-none lg:mx-0 h-auto lg:h-auto backdrop-blur-sm p-6 rounded-box shadow-xl flex flex-col" 2361 style="background-color:#FFC107;"> 2362 <div> 2363 <h3 class="text-2xl lg:text-2xl heading font-semibold mb-6 text-left text-primary-content">FIND US IN Hopewell Mall</h3> 2364 <ul aria-label="Contact Information" class="space-y-4 mb-6"> 2365 <li class="flex items-start"> 2366 <svg aria-hidden="true" class="w-5 h-5 text-primary mr-3 shrink-0 mt-[3px]" fill="currentColor" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 2367 <path d="M20.891 2.006l.106 -.006l.13 .008l.09 .016l.123 .035l.107 .046l.1 .057l.09 .067l.082 .075l.052 .059l.082 .116l.052 .096c.047 .1 .077 .206 .09 .316l.005 .106c0 .075 -.008 .149 -.024 .22l-.035 .123l-6.532 18.077a1.55 1.55 0 0 1 -1.409 .903a1.547 1.547 0 0 1 -1.329 -.747l-.065 -.127l-3.352 -6.702l-6.67 -3.336a1.55 1.55 0 0 1 -.898 -1.259l-.006 -.149c0 -.56 .301 -1.072 .841 -1.37l.14 -.07l18.017 -6.506l.106 -.03l.108 -.018z"></path> 2368 </svg>
2369 <span class="body text-primary-content">KIZTOPIA<br>Shops 613-615 & 6B<br>Hopewell Mall, Wan Chai</span> 2370 </li> 2371 <li class="flex items-start"> 2372 <svg aria-hidden="true" class="w-5 h-5 text-primary mr-3 shrink-0 mt-[3px]" fill="currentColor" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 2373 <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-5 2.66a1 1 0 0 0 -.993 .883l-.007 .117v5l.009 .131a1 1 0 0 0 .197 .477l.087 .1l3 3l.094 .082a1 1 0 0 0 1.226 0l.094 -.083l.083 -.094a1 1 0 0 0 0 -1.226l-.083 -.094l-2.707 -2.708v-4.585l-.007 -.117a1 1 0 0 0 -.993 -.883z"></path> 2374 </svg> 2375 <span class="body text-primary-content">Mon - Fri (excepts for PH) 11am-8pm<br>Sat - Sun & PH: 10am - 8:00pm<br><br>*Operating hours subject to changes</span> 2376 </li> 2377 </ul> 2378 </div> 2379 <div class="mt-auto text-center"> 2380 <a class="inline-block bg-primary hover:bg-primary-600 text-primary-content font-semibold py-3 px-10 rounded-btn transition-colors duration-300 ease-in-out text-base" 2381 href="/booking-and-ticketing" rel="noopener noreferrer" target="_blank">Buy Ticket</a> 2382 </div> 2383 </div> 2384 </div> 2385 <div class="py-6 md:py-8 lg:pt-16 lg:pb-0"> 2386 <div class="flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 justify-center items-center"> 2387 <div class="w-full md:w-1/3 text-center"> 2388 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">Drive</h3> 2389 <p class="text-body lg:text-lg text-subtle">Type in "Hopewell Mall Car Park" / "Kiztopia Hopewell Mall" in your Google map</p> 2390 </div> 2391 <div class="w-full md:w-1/3 text-center"> 2392 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">MRT</h3> 2393 <p class="text-body lg:text-lg text-subtle">Wanchai Station Exit D</p> 2394 </div> 2395 <div class="w-full md:w-1/3 text-center"> 2396 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">Bus</h3> 2397 <p class="text-body lg:text-lg text-subtle">-</p> 2398 </div> 2399 </div> 2400 </div> 2401 </div> 2402 2403 <!-- Olympian City Panel --> 2404 <div aria-labelledby="tab-olympian-city" class="location-panel" id="panel-olympian-city" role="tabpanel"> 2405 <div class="relative lg:h-[460px]"> 2406 <div class="lg:absolute lg:inset-0 rounded-box overflow-hidden shadow-md"> 2407 <iframe allowfullscreen="" class="w-full h-[300px] md:h-[400px] lg:h-full border-0" loading="lazy" 2408 referrerpolicy="no-referrer-when-downgrade" 2409 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3690.9566524843303!2d114.16218157532616!3d22.317479079674253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x340400b082196967%3A0x22cfbb9ead154599!2z5aWn5rW35Z-O5LiJ5pyf!5e0!3m2!1szh-TW!2ssg!4v1754971758305!5m2!1szh-TW!2ssg" 2410 style="border:0;"></iframe> 2411 </div> 2412 <div class="mt-8 lg:mt-0 lg:absolute lg:top-1/2 lg:-translate-y-1/2 lg:right-4 xl:right-8 w-full max-w-md mx-auto lg:w-[370px] lg:max-w-none lg:mx-0 h-auto lg:h-auto backdrop-blur-sm p-6 rounded-box shadow-xl flex flex-col" 2413 style="background-color:#FFC107;"> 2414 <div> 2415 <h3 class="text-2xl lg:text-2xl heading font-semibold mb-6 text-left text-primary-content">FIND US IN Olympian City</h3> 2416 <ul aria-label="Contact Information" class="space-y-4 mb-6"> 2417 <li class="flex items-start"> 2418 <svg aria-hidden="true" class="w-5 h-5 text-primary mr-3 shrink-0 mt-[3px]" fill="currentColor" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 2419 <path d="M20.891 2.006l.106 -.006l.13 .008l.09 .016l.123 .035l.107 .046l.1 .057l.09 .067l.082 .075l.052 .059l.082 .116l.052 .096c.047 .1 .077 .206 .09 .316l.005 .106c0 .075 -.008 .149 -.024 .22l-.035 .123l-6.532 18.077a1.55 1.55 0 0 1 -1.409 .903a1.547 1.547 0 0 1 -1.329 -.747l-.065 -.127l-3.352 -6.702l-6.67 -3.336a1.55 1.55 0 0 1 -.898 -1.259l-.006 -.149c0 -.56 .301 -1.072 .841 -1.37l.14 -.07l18.017 -6.506l.106 -.03l.108 -.018z"></path> 2420 </svg>
2421 <span class="body text-primary-content">Bouncetopia by Kiztopia<br>G/F, Unit 02, 05-08, 13 and 15<br>Olympian City Phase III<br>1 Hoi Wang Road, Tai Kok Tsui, Kowloon</span> 2422 </li> 2423 <li class="flex items-start"> 2424 <svg aria-hidden="true" class="w-5 h-5 text-primary mr-3 shrink-0 mt-[3px]" fill="currentColor" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 2425 <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-5 2.66a1 1 0 0 0 -.993 .883l-.007 .117v5l.009 .131a1 1 0 0 0 .197 .477l.087 .1l3 3l.094 .082a1 1 0 0 0 1.226 0l.094 -.083l.083 -.094a1 1 0 0 0 0 -1.226l-.083 -.094l-2.707 -2.708v-4.585l-.007 -.117a1 1 0 0 0 -.993 -.883z"></path> 2426 </svg> 2427 <span class="body text-primary-content">Mon - Fri (excepts for PH) 11am-8pm<br>Sat - Sun & PH: 10am - 8pm<br><br>*Operating hours subject to changes</span> 2428 </li> 2429 </ul> 2430 </div> 2431 <div class="mt-auto text-center"> 2432 <a class="inline-block bg-primary hover:bg-primary-600 text-primary-content font-semibold py-3 px-10 rounded-btn transition-colors duration-300 ease-in-out text-base" 2433 href="/booking-and-ticketing" rel="noopener noreferrer" target="_blank">Buy Ticket</a> 2434 </div> 2435 </div> 2436 </div> 2437 <div class="py-6 md:py-8 lg:pt-16 lg:pb-0"> 2438 <div class="flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 justify-center items-center"> 2439 <div class="w-full md:w-1/3 text-center"> 2440 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">Drive</h3> 2441 <p class="text-body lg:text-lg text-subtle">Type in "Olympian City Car Park" / "Bouncetopia in Olympian City" in your Google map</p> 2442 </div> 2443 <div class="w-full md:w-1/3 text-center"> 2444 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">MRT</h3> 2445 <p class="text-body lg:text-lg text-subtle">Olympic Station Exit D</p> 2446 </div> 2447 <div class="w-full md:w-1/3 text-center"> 2448 <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-primary mb-2">Bus</h3> 2449 <p class="text-body lg:text-lg text-subtle">-</p> 2450 </div> 2451 </div> 2452 </div> 2453 </div> 2454 </div> 2455</section> 2456 2457<style> 2458 ._a7c4b9-hero-root { 2459 position: relative; 2460 overflow: hidden; 2461 min-height: 300px; 2462 transition: background-color 0.4s ease; 2463 } 2464 2465 ._a7c4b9-bottom-left-image-container { 2466 position: absolute; 2467 bottom: -110px; 2468 left: -110px; 2469 z-index: 1; 2470 width: 400px; 2471 height: 400px; 2472 pointer-events: none; 2473 } 2474 2475 ._a7c4b9-bottom-left-image { 2476 width: 100%; 2477 height: 100%; 2478 object-fit: contain; 2479 display: block; 2480 opacity: 0.4; 2481 transition: opacity 0.3s ease; 2482 } 2483 2484 @media (min-width: 640px) { 2485 ._a7c4b9-bottom-left-image-container { 2486 bottom: -130px; 2487 left: -130px; 2488 width: 500px; 2489 height: 500px; 2490 } 2491 } 2492 2493 @media (min-width: 1024px) { 2494 ._a7c4b9-bottom-left-image-container { 2495 bottom: -110px; 2496 left: -110px; 2497 width: 400px; 2498 height: 400px; 2499 } 2500 } 2501 2502 @media (min-width: 1536px) { 2503 ._a7c4b9-bottom-left-image-container { 2504 bottom: -150px; 2505 left: -150px; 2506 width: 550px; 2507 height: 550px; 2508 } 2509 } 2510 2511 /* Tab Navigation Styles */ 2512 .location-tabs-wrapper { 2513 max-width: 1200px; 2514 margin: 0 auto; 2515 } 2516 2517 .location-tab-btn { 2518 padding: 0.75rem 1.5rem; 2519 font-size: 0.95rem; 2520 font-weight: 600; 2521 border-radius: var(--radius-btn, 0.5rem); 2522 background-color: #e5e7eb; 2523 color: #374151; 2524 border: none; 2525 cursor: pointer; 2526 transition: all 0.3s ease; 2527 white-space: nowrap; 2528 } 2529 2530 .location-tab-btn:hover { 2531 transform: translateY(-2px); 2532 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 2533 } 2534 2535 .location-tab-btn:focus { 2536 outline: 2px solid currentColor; 2537 outline-offset: 2px; 2538 } 2539 2540 /* Active tab styles for each location */ 2541 .location-tab-btn[data-location="new-town-plaza"].active { 2542 background-color: #DA3832; 2543 color: white; 2544 } 2545 2546 .location-tab-btn[data-location="airside"].active { 2547 background-color: #293F94; 2548 color: white; 2549 } 2550 2551 .location-tab-btn[data-location="park-central"].active { 2552 background-color: #DB4A93; 2553 color: white; 2554 } 2555 2556 .location-tab-btn[data-location="hopewell-mall"].active { 2557 background-color: #5F308C; 2558 color: white; 2559 } 2560 2561 .location-tab-btn[data-location="olympian-city"].active { 2562 background-color: #a7dbf7; 2563 color: #374151; 2564 } 2565 2566 /* Panel visibility */ 2567 .location-panel { 2568 display: none; 2569 } 2570 2571 .location-panel.active { 2572 display: block; 2573 } 2574
2575 /* Background colors for each location */ 2576 .location-tabs-section[data-active-location="new-town-plaza"] { 2577 background-color: #F8DFDA !important; 2578 } 2579 2580 .location-tabs-section[data-active-location="airside"] { 2581 background-color: #DBE5F4 !important; 2582 } 2583 2584 .location-tabs-section[data-active-location="park-central"] { 2585 background-color: #F9E8F1 !important; 2586 } 2587 2588 .location-tabs-section[data-active-location="hopewell-mall"] { 2589 background-color: #E4DDEC !important; 2590 } 2591 2592 .location-tabs-section[data-active-location="olympian-city"] { 2593 background-color: #ffffff !important; 2594 } 2595 2596 /* Mobile responsive tabs */ 2597 @media (max-width: 768px) { 2598 .location-tab-btn { 2599 padding: 0.6rem 1rem; 2600 font-size: 0.85rem; 2601 } 2602 } 2603</style> 2604
2605<script> 2606$(document).ready(function() { 2607 const section = $('.location-tabs-section'); 2608 const tabs = $('.location-tab-btn'); 2609 const panels = $('.location-panel'); 2610 2611 // Set initial active location 2612 section.attr('data-active-location', 'new-town-plaza'); 2613 2614 // Tab click handler 2615 tabs.on('click', function() { 2616 const targetLocation = $(this).data('location'); 2617 const targetPanel = $('#panel-' + targetLocation); 2618 2619 // Update tabs 2620 tabs.removeClass('active').attr('aria-selected', 'false').attr('tabindex', '-1'); 2621 $(this).addClass('active').attr('aria-selected', 'true').attr('tabindex', '0'); 2622 2623 // Update panels 2624 panels.removeClass('active'); 2625 targetPanel.addClass('active'); 2626 2627 // Update section background 2628 section.attr('data-active-location', targetLocation); 2629 2630 // Scroll to map section on mobile 2631 if (window.innerWidth < 1024) { 2632 $('html, body').animate({ 2633 scrollTop: targetPanel.offset().top - 100 2634 }, 400); 2635 } 2636 }); 2637 2638 // Keyboard navigation 2639 tabs.on('keydown', function(e) { 2640 let index = tabs.index(this); 2641 2642 if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { 2643 e.preventDefault(); 2644 index = (index + 1) % tabs.length; 2645 tabs.eq(index).focus().click(); 2646 } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { 2647 e.preventDefault(); 2648 index = (index - 1 + tabs.length) % tabs.length; 2649 tabs.eq(index).focus().click(); 2650 } else if (e.key === 'Home') { 2651 e.preventDefault(); 2652 tabs.first().focus().click(); 2653 } else if (e.key === 'End') { 2654 e.preventDefault(); 2655 tabs.last().focus().click(); 2656 } 2657 }); 2658}); 2659</script>
2659 2660</div> 2661 2662 2663 2664 </div> 2665 2666 2667 2668 2669 </div> 2670 2671 2672 2673 2674 </main> 2675 <h3 class="z-50 bg-green-500 px-4 py-2 text-md rounded-md text-white drop-shadow-md fixed top-4 right-4 hidden -translate-y-32 transition ease-in-out duration-500 max-w-md" 2676 id="message-success"></h3> 2677 <h3 class="z-50 bg-red-600 px-4 py-2 text-md rounded-md text-white drop-shadow-md fixed top-4 right-4 hidden -translate-y-32 transition ease-in-out duration-500 max-w-md" 2678 id="message-error"></h3> 2679 <div id="profitjs"></div> 2680 <div> 2681 2682 2683 2684<div id="page-footer" 2685 2686 2687 data-node-type="segment" 2688 data-template-id="7367019263129862144" 2689 data-node-key="footer"> 2690 2691 2692 2693 2694 <!-- component could be deleted but still the ID maybe present in the template. --> 2695 2696 2697 2698 <div data-select-key="block_619aba" data-node-type="block" data-node-key="block_619aba" data-component-id="7367019263167610880" data-select-type="block" > 2699 2700 2701 2702 2703 <footer class="bg-secondary text-secondary-content _fcomp_nqkdpw" data-node-key="component" data-node-name="Footer With Subscription" data-node-type="component"> 2704 <div class="container mx-auto px-6 py-12 lg:py-16"> 2705 <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12"> 2706 2707 <!-- Middle Section: Link Groups --> 2708 <nav aria-label="Footer Links" class="lg:col-span-8"> 2709 <div class="grid grid-cols-2 md:grid-cols-3 gap-8 md:gap-4"> 2710 <div class="flex flex-col items-start md:items-center"> 2711 <ul class="space-y-2"> 2712 <li> 2713 <a class="text-body hover:text-primary hover:underline text-sm" href="/#about-kiztopia">About</a> 2714 </li> 2715 <li> 2716 <a class="text-body hover:text-primary hover:underline text-sm" href="/faq">FAQs</a> 2717 </li> 2718 <li> 2719 <a class="text-body hover:text-primary hover:underline text-sm" href="/house-rules">House Rules</a> 2720 </li> 2721 </ul> 2722 </div> 2723 <div class="flex flex-col items-start md:items-center"> 2724 <ul class="space-y-2"> 2725 <li> 2726 <a class="text-body hover:text-primary hover:underline text-sm" href="/conditions-and-sales">T&C</a> 2727 </li> 2728 <li> 2729 <a class="text-body hover:text-primary hover:underline text-sm" href="/waiver">Waiver</a> 2730 </li> 2731 <li> 2732 <a class="text-body hover:text-primary hover:underline text-sm" href="/privacy">Privacy</a> 2733 </li> 2734 </ul> 2735 </div> 2736 <div class="flex flex-col items-start md:items-center"> 2737 <ul class="space-y-2"> 2738 <li> 2739 <a class="text-body hover:text-primary hover:underline text-sm" href="/contact-us">Contact Us</a> 2740 </li> 2741 <li> 2742 <a class="text-body hover:text-primary hover:underline text-sm" href="/career">Careers</a> 2743 </li> 2744 <li> 2745 <a class="text-body hover:text-primary hover:underline text-sm" href="/press-release">Press Release</a> 2746 </li> 2747 </ul> 2748 </div> 2749 </div> 2750 </nav> 2751 2752 <!-- Right Section: Newsletter and Socials --> 2753 <div class="lg:col-span-4"> 2754 <p class="text-body text-sm mb-4">Subscribe to our newsletter.</p> 2755 <form action="https://forms.konigle.com/api/forms/9tftaq55hw83/submit/" class="flex flex-col sm:flex-row gap-2 mb-6" id="newsletter-form-nqkdpw" method="post"> 2756 <input type="hidden" name="token" value="p1YvsRQRetp1A1-f7ZngHlpD6w02NXYQ7Wb6hAr3aJE"> 2757 <label class="sr-only" for="email">Email address</label> 2758 <input aria-describedby="email-newsletter-description-nqkdpw" class="w-full px-4 py-2.5 border border-border rounded-input bg-base-100 text-body focus:ring-2 focus:ring-primary focus:border-primary placeholder-subtle text-sm" id="email" name="email" placeholder="Enter your email" required="" type="email"> 2759 <button class="px-5 py-2.5 bg-primary text-primary-content roun
2759ded-btn hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-base-200 whitespace-nowrap text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200" id="subscribe-btn-nqkdpw" type="submit"> 2760 <span class="btn-text">Subscribe</span> 2761 <span class="btn-loading hidden"> 2762 <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline" fill="none" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 2763 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> 2764 <path class="opacity-75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" fill="currentColor"></path> 2765 </svg> 2766 Subscribing... 2767 </span> 2768 </button> 2769 </form> 2770 <p class="sr-only" id="email-newsletter-description-nqkdpw">Subscribe to our newsletter.</p> 2771 <!-- Toast Container --> 2772 <div class="fixed top-4 right-4 z-50 space-y-2" id="toast-container-nqkdpw"></div> 2773 <div class="flex space-x-4"> 2774 <a aria-label="Facebook" class="text-subtle hover:text-primary" href="https://www.facebook.com/kiztopiahk" rel="noopener noreferrer" target="_blank"> 2775 <svg aria-hidden="true" class="w-6 h-6" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 2776 <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path> 2777 </svg> 2778 </a> 2779 <a aria-label="YouTube" class="text-subtle hover:text-primary" href="https://www.youtube.com/channel/UCBSjAUUNd8WOA-qUe7_P-Kw" rel="noopener noreferrer" target="_blank"> 2780 <svg aria-hidden="true" class="w-6 h-6" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 2781 <path d="M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 -4v-8z"></path> 2782 <path d="M10 9l5 3l-5 3z"></path> 2783 </svg> 2784 </a> 2785 <a aria-label="Instagram" class="text-subtle hover:text-primary" href="https://www.instagram.com/kiztopiahk" rel="noopener noreferrer" target="_blank"> 2786 <svg aria-hidden="true" class="w-6 h-6" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 2787 <path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z"></path> 2788 <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path> 2789 <path d="M16.5 7.5v.01"></path> 2790 </svg> 2791 </a> 2792 <a aria-label="TikTok" class="text-subtle hover:text-primary" href="https://mp.weixin.qq.com/s/tsMal_sxmkyhOiAy7fD9BQ" rel="noopener noreferrer" target="_blank"> 2793 <svg aria-hidden="true" class="w-6 h-6" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 2794 <path d="M21 7.917v4.034a9.948 9.948 0 0 1 -5 -1.951v4.5a6.5 6.5 0 1 1 -8 -6.326v4.326a2.5 2.5 0 1 0 4 2v-11.5h4.083a6.005 6.005 0 0 0 4.917 4.917z"></path> 2795 </svg> 2796 </a> 2797 </div> 2798 </div> 2799 </div> 2800 2801 <!-- Our Other Brands --> 2802 <div class="mt-12 pt-8 border-t border-black/10 text-center"> 2803 <h3 class="font-bold text-lg mb-6 uppercase tracking-wider text-black"> 2804 Our Other Brands 2805 </h3> 2806 <div class="flex justify-center items-center gap-8 flex-wrap"> 2807 <a href="https://xventurepark.com/" target="_blank" class="block hover:opacity-80 transition-opacity"> 2808 <img src="https://pkqvhk6cki.koniglecdn.com/images/xventure-logo_tm-02.webp" alt="Xventure" class="h-20 md:h-24 w-auto object-contain"> 2809 </a> 2810 </div> 2811 </div> 2812 2813 <!-- Bottom Full-Width Copyright --> 2814 <div class="mt-8 pt-8 border-t border-black/10"> 2815 <div class="footer-copyright text-black text-sm text-center"> 2816 Kiztopiaâ¢ï¸, Jumptopiaâ¢ï¸ Â©ï¸ <span class="_fyear_nqkdpw">2026</span> Kids Element Edutainment Pte Ltd. All rights reserved. 2817 </div> 2818 </div> 2819 </div> 2820 2821 <!-- WhatsApp Floating Button --> 2822 <a href="https://wa.me/85269364663" target="_blank" rel="noopener noreferrer" class="fixed bottom-6 right-6 z-50 flex items-center justify-center w-14 h-14 bg-[#25D366] rounded-full shadow-lg hover:bg-[#128C7E] transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#25D366] animate-pulse-scale" aria-label="Chat on WhatsApp"> 2823 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="text-white" viewBox="0 0 16 16"> 2824 <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058
28241.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/> 2825 </svg> 2826 </a> 2827 2828
2828<script> 2829 $(document).ready(function() { 2830 // Update year 2831 $('._fcomp_nqkdpw').each(function() { 2832 var $component = $(this); 2833 $component.find('._fyear_nqkdpw').text(new Date().getFullYear()); 2834 }); 2835 2836 // Newsletter subscription form handling 2837 const form = document.getElementById('newsletter-form-nqkdpw'); 2838 const emailInput = document.getElementById('email'); 2839 const submitBtn = document.getElementById('subscribe-btn-nqkdpw'); 2840 const btnText = submitBtn.querySelector('.btn-text'); 2841 const btnLoading = submitBtn.querySelector('.btn-loading'); 2842 const toastContainer = document.getElementById('toast-container-nqkdpw'); 2843 2844 // Toast notification function 2845 function showToast(message, type = 'success') { 2846 const toast = document.createElement('div'); 2847 const bgColor = type === 'success' ? 'bg-green-500' : 'bg-red-500'; 2848 const icon = type === 'success' ? 2849 '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>' : 2850 '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>'; 2851 2852 toast.className = `${bgColor} text-white px-6 py-4 rounded-lg shadow-lg flex items-center space-x-3 transform translate-x-full transition-transform duration-300 ease-in-out`; 2853 toast.innerHTML = ` 2854 ${icon} 2855 <span class="font-medium">${message}</span> 2856 <button class="ml-auto text-white hover:text-gray-200" onclick="this.parentElement.remove()"> 2857 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2858 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> 2859 </svg> 2860 </button> 2861 `; 2862 2863 toastContainer.appendChild(toast); 2864 2865 // Animate in 2866 setTimeout(() => { 2867 toast.classList.remove('translate-x-full'); 2868 }, 100); 2869 2870 // Auto remove after 5 seconds 2871 setTimeout(() => { 2872 toast.classList.add('translate-x-full'); 2873 setTimeout(() => { 2874 if (toast.parentElement) { 2875 toast.remove(); 2876 } 2877 }, 300); 2878 }, 5000); 2879 } 2880 2881 // Form submission handler 2882 if (form) { 2883 form.addEventListener('submit', async function(e) { 2884 e.preventDefault(); 2885 2886 const email = emailInput.value.trim(); 2887 2888 // Basic email validation 2889 if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { 2890 showToast('Please enter a valid email address.', 'error'); 2891 emailInput.focus(); 2892 return; 2893 } 2894 2895 // Show loading state 2896 submitBtn.disabled = true; 2897 btnText.classList.add('hidden'); 2898 btnLoading.classList.remove('hidden'); 2899 2900 try { 2901 // Create form data 2902 const formData = new FormData(form); 2903 2904 // Submit to the external endpoint 2905 const response = await fetch(form.action, { 2906 method: 'POST', 2907 body: formData, 2908 headers: { 2909 'Accept': 'application/json', 2910 } 2911 }); 2912 2913 if (response.ok) { 2914 // Success
2915 showToast('Thank you! You have been successfully subscribed to our newsletter.', 'success'); 2916 form.reset(); 2917 } else { 2918 // Handle different error responses 2919 const responseText = await response.text(); 2920 console.error('Subscription failed:', response.status, responseText); 2921 2922 if (response.status === 409) { 2923 showToast('This email is already subscribed to our newsletter.', 'error'); 2924 } else if (response.status === 400) { 2925 showToast('Please check your email address and try again.', 'error'); 2926 } else { 2927 showToast('Something went wrong. Please try again later.', 'error'); 2928 } 2929 } 2930 } catch (error) { 2931 console.error('Subscription error:', error); 2932 showToast('Network error. Please check your connection and try again.', 'error'); 2933 } finally { 2934 // Reset loading state 2935 submitBtn.disabled = false; 2936 btnText.classList.remove('hidden'); 2937 btnLoading.classList.add('hidden'); 2938 } 2939 }); 2940 } 2941 2942 // Real-time email validation 2943 if (emailInput) { 2944 emailInput.addEventListener('blur', function() { 2945 const email = this.value.trim(); 2946 if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { 2947 this.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500'); 2948 } else { 2949 this.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500'); 2950 } 2951 }); 2952 2953 emailInput.addEventListener('input', function() { 2954 const email = this.value.trim(); 2955 if (email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { 2956 this.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500'); 2957 } 2958 }); 2959 } 2960 }); 2961 </script>
2961 2962</footer> 2963 2964 2965 2966 </div> 2967 2968 2969 2970 2971 2972 2973</div> 2974 2975 2976 2977 </div> 2978 2979 <div x-data="loginWidget" 2980 @auth:login-widget:open.window="open($event.detail?.formTitle || 'Login')"> 2981 <div class="relative z-50" 2982 x-show="show" 2983 aria-labelledby="login-widget-title" 2984 role="dialog" 2985 aria-modal="true" 2986 x-cloak> 2987 <div x-show="show" 2988 class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" 2989 x-transition.opacity.duration.300ms></div> 2990 <div class="fixed inset-0 z-50 w-screen overflow-y-auto"> 2991 <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> 2992 <div x-show="show" 2993 x-transition:enter="ease-out duration-300" 2994 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 2995 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 2996 x-transition:leave="ease-in duration-200" 2997 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 2998 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 2999 class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 w-full sm:max-w-lg sm:p-6"> 3000 <div> 3001 <div class="mt-3 text-center sm:mt-5"> 3002 <template x-if="currentTab === 'Login'"> 3003 <div> 3004 <h3 class="text-lg sm:text-xl font-semibold leading-6 text-gray-900" 3005 id="login-widget-title" 3006 x-text="formTitle"></h3> 3007 <p class="mt-2 text-sm text-gray-500">Don't have an account? We will create one for you.</p> 3008 <div class="mt-6"> 3009 <input :type="form.identityType" 3010 class="border px-3 py-2 w-full rounded-input border-border focus:border-primary focus:ring-primary sm:text-sm" 3011 x-model="form.identity" 3012 autocomplete="email" 3013 placeholder="Enter email to login"> 3014 </div> 3015 </div> 3016 </template> 3017 <template x-if="currentTab === 'Password'"> 3018 <div> 3019 <h3 class="text-lg sm:text-xl font-semibold leading-6 text-gray-900" 3020 id="login-widget-title">Enter OTP</h3> 3021 <p class="text-sm text-gray-500 mt-2"> 3022 Enter the OTP send to 3023 <strong x-text="form.identity"></strong> 3024 </p> 3025 <div class="mt-6"> 3026 <input type="password" 3027 class="border px-3 py-2 w-full rounded-input border-border focus:border-primary focus:ring-primary sm:text-sm" 3028 x-model="form.password" 3029 placeholder="Enter OTP"> 3030 <p class="text-sm text-gray-500 mt-1 text-left"> 3031 <button class="text-primary" 3032 @click.prevent="resendOTP" 3033 :disabled="!enableResendOTP">Resend OTP</button> 3034 in <span x-text="form.countDown"></span> 3035 seconds. Check your spam folder if you can't find email from us. 3036 </p> 3037 </div> 3038 </div> 3039 </template> 3040 </div> 3041 </div> 3042 <template x-if="form.error"> 3043 <p x-text="form.error" class="text-red-500 text-sm mt-3"></p> 3044 </template> 3045 <div class="mt-5 sm:mt-6 flex flex-col gap-3 sm:flex-row"> 3046 <button type="button" 3047 @click="show = false" 3048 class="btn btn-sm border border-gray-300 flex-1">Cancel</button> 3049 <button type="button" 3050 class="btn btn-sm btn-primary flex-1" 3051 :disabled="!enableSubmit" 3052 x-text="submitText" 3053 @click="submit"></button> 3054 </div> 3055 </div> 3056 </div> 3057 </div> 3058 </div> 3059</div> 3060 3061 3062 3063<div x-data="guestLoginWidget" 3064 @auth:guest-login-widget:open.window="open($event.detail?.formTitle, $event.detail?.formSubtitle)"> 3065 <div class="relative z-50" 3066 x-show="show" 3067 aria-labelledby="guest-login-widget-title" 3068 role="dialog" 3069 aria-modal="true" 3070 x-cloak> 3071 <div x-show="show" 3072 class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" 3073 x-transition.opacity.duration.300ms></div> 3074 <div class="fixed inset-0 z-50 w-screen overflow-y-auto"> 3075 <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> 3076 <div x-show="show" 3077 x-transition:enter="ease-out duration-300" 3078 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 3079 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 3080 x-transition:leave="ease-in duration-200" 3081 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 3082 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 3083 class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 w-full sm:max-w-lg sm:p-6"> 3084 <div> 3085 <div class="mt-3 text-center sm:mt-5"> 3086 <div> 3087 <h3 class="text-lg sm:text-xl font-semibold leading-6 text-gray-900" 3088 id="guest-login-widget-title" 3089 x-text="formTitle"></h3> 3090 <p class="mt-2 text-sm text-gray-500" x-text="formSubtitle"></p> 3091 <div class="mt-6 space-y-4"> 3092 <div> 3093 <input type="text" 3094 class="border px-3 py-2 w-full rounded-input border-border focus:border-primary focus:ring-primary sm:text-sm" 3095 x-model="form.name" 3096 autocomplete="name" 3097 placeholder="Enter your name"> 3098 </div> 3099 <div> 3100 <input type="email" 3101 class="border px-3 py-2 w-full rounded-input border-border focus:border-primary focus:ring-primary sm:text-sm" 3102 x-model="form.email" 3103 autocomplete="email" 3104 placeholder="Enter your email address"> 3105 <p class="text-xs text-gray-400 mt-1 text-left">Valid email is required for further communications</p> 3106 </div> 3107 </div> 3108 </div> 3109 </div> 3110 </div> 3111 <template x-if="form.error"> 3112 <p x-text="form.error" class="text-red-500 text-sm mt-3"></p> 3113 </template> 3114 <div class="mt-5 sm:mt-6 flex flex-col gap-3 sm:flex-row"> 3115 <button type="button" 3116 @click="show = false" 3117 class="btn btn-sm border border-gray-300 flex-1">Cancel</button> 3118 <button type="button" 3119 class="btn btn-sm btn-primary flex-1" 3120 :disabled="!enableSubmit" 3121 x-text="submitText" 3122 @click="submit"></button> 3123 </div> 3124 </div> 3125 </div> 3126 </div> 3127 </div> 3128</div> 3129 3130 3131 3132 3133<style> 3134 #hb-badge, 3135 #hb-badge *, 3136 #hb-badge *::before, 3137 #hb-badge *::after { 3138 all: unset; 3139 box-sizing: border-box; 3140 } 3141 3142 #hb-badge { 3143 position: fixed !important; 3144 bottom: 10px !important; 3145 left: 10px !important; 3146 z-index: 2147483647 !important; 3147 display: block !important; 3148 } 3149 3150 #hb-badge a { 3151 display: inline-flex !important;
3152 align-items: center !important; 3153 gap: 8px !important; 3154 padding: 8px 14px 8px 10px !important; 3155 background: #0a0a0a !important; 3156 border-radius: 8px !important; 3157 text-decoration: none !important; 3158 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; 3159 font-size: 13px !important; 3160 font-weight: 500 !important; 3161 color: #ffffff !important; 3162 box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important; 3163 cursor: pointer !important; 3164 transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; 3165 line-height: 1 !important; 3166 letter-spacing: 0.01em !important; 3167 } 3168 3169 #hb-badge a:hover { 3170 background: #222222 !important; 3171 transform: translateY(-1px) !important; 3172 box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important; 3173 } 3174 3175 #hb-badge .hb-dot { 3176 display: inline-block !important; 3177 width: 5px !important; 3178 height: 5px !important; 3179 border-radius: 999px !important; 3180 background: rgba(255,255,255,0.3) !important; 3181 flex-shrink: 0 !important; 3182 } 3183 3184 #hb-badge .hb-muted { 3185 color: rgba(255,255,255,0.45) !important; 3186 font-weight: 400 !important; 3187 font-size: 13px !important; 3188 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; 3189 } 3190 3191 #hb-badge .hb-brand { 3192 color: #ffffff !important; 3193 font-weight: 600 !important; 3194 font-size: 13px !important; 3195 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; 3196 } 3197</style> 3198 3199<div id="hb-badge"> 3200 3201 <a href="https://hostbento.com?referrer=kiztopia.com.hk" target="_blank"> 3202 <span class="hb-muted">Built with</span> 3203 <span class="hb-dot"></span> 3204 <span class="hb-brand">Hostbento</span> 3205 </a> 3206 3207</div> 3208 3209 3210 3211 3212 3213
3213<script src="/static/sitekit/js/sitekit.js" defer></script>
3213 3214
3214<script src="/static/sitekit/js/widgets.js" defer></script>
3214 3215
3215<script src="/static/sitekit/js/vendor/alpinejs-3.x.x.js" defer></script>
3215 3216
3217<script> 3218 function initProfitJS(){ 3219 if (window.hasOwnProperty('profitjs')) { 3220 window.profitjs({ 3221 widgets:[] 3222 }).mount('#profitjs'); 3223 } 3224 } 3225 3226</script>
vendor: 1 bytes, line 3226
3226
3227<script src="/static/sitekit/js/profitjs.umd.cjs" 3228 defer 3229 onload="initProfitJS()"></script>
3229 3230 3231 3232 3233 3234 3235 3236 3237 3238
3238<script src="https://vue61rwjjy.koniglecdn.com/js/theme-js.js" defer></script>
3238 3239 3240 3241 3242 3243 3244 3245 3246 3247 3248
3248<script src="/static/sitekit/js/content-page.js" defer></script>
3248 3249 3250 3251 3252 3253<style> 3254 :root { 3255 --color-primary: #FF7A00; 3256 --color-primary-50: #FFF3E5; 3257 --color-primary-100: #FFE6CC; 3258 --color-primary-200: #FFCD99; 3259 --color-primary-300: #FFB366; 3260 --color-primary-400: #FF9A33; 3261 --color-primary-500: #FF7A00; 3262 --color-primary-600: #CC6200; 3263 --color-primary-700: #994A00; 3264 --color-primary-800: #663100; 3265 --color-primary-900: #331800; 3266 --color-primary-950: #1A0C00; 3267 3268 --color-primary-content: #FFFFFF; 3269 --color-primary-content-50: #FAFAFA; 3270 --color-primary-content-100: #F4F4F5; 3271 --color-primary-content-200: #E4E4E7; 3272 --color-primary-content-300: #D4D4D8; 3273 --color-primary-content-400: #A1A1AA; 3274 --color-primary-content-500: #71717A; 3275 --color-primary-content-600: #52525B; 3276 --color-primary-content-700: #3F3F46; 3277 --color-primary-content-800: #27272A; 3278 --color-primary-content-900: #18181B; 3279 --color-primary-content-950: #09090B; 3280 3281 --color-secondary: #FFC82E; 3282 --color-secondary-50: #FFF9E6; 3283 --color-secondary-100: #FFF3CC; 3284 --color-secondary-200: #FFE799; 3285 --color-secondary-300: #FFDB66; 3286 --color-secondary-400: #FFCF33; 3287 --color-secondary-500: #FFC82E; 3288 --color-secondary-600: #CCA025; 3289 --color-secondary-700: #99781C; 3290 --color-secondary-800: #665012; 3291 --color-secondary-900: #332809; 3292 --color-secondary-950: #1A1405; 3293 3294 --color-secondary-content: #18181B; 3295 --color-secondary-content-50: #FAFAFA; 3296 --color-secondary-content-100: #F4F4F5; 3297 --color-secondary-content-200: #E4E4E7; 3298 --color-secondary-content-300: #D4D4D8; 3299 --color-secondary-content-400: #A1A1AA; 3300 --color-secondary-content-500: #71717A; 3301 --color-secondary-content-600: #52525B; 3302 --color-secondary-content-700: #3F3F46; 3303 --color-secondary-content-800: #27272A; 3304 --color-secondary-content-900: #18181B; 3305 --color-secondary-content-950: #09090B; 3306 3307 --color-base: #FFFFFF; 3308 --color-base-50: #FFFFFF; 3309 --color-base-100: #F9FAFB; 3310 --color-base-200: #F3F4F6; 3311 --color-base-300: #E5E7EB; 3312 3313 --color-base-content: #111827; 3314 3315 --color-heading: #111827; 3316 --color-body: #374151; 3317 --color-subtle: #6B7280; 3318 --color-light: #F3F4F6; 3319 --color-link: #FF7A00; 3320 --color-border: #E5E7EB; 3321 3322 --color-accent: #FACC15; 3323 --color-accent-content: #000000; 3324 --color-neutral: #374151; 3325 --color-neutral-content: #FFFFFF; 3326 --color-info: #3B82F6; 3327 --color-info-content: #FFFFFF; 3328 --color-success: #10B981; 3329 --color-success-content: #FFFFFF; 3330 --color-warning: #F59E0B; 3331 --color-warning-content: #FFFFFF; 3332 --color-danger: #EF4444; 3333 --color-danger-content: #FFFFFF; 3334 3335 3336 --radius-btn: 9999px; 3337 --radius-box: 16px; 3338 --radius-input: 8px; 3339 3340 3341 --spacing: 0.25rem; 3342 3343 } 3344 html { 3345 font-family: "VAGRoundedBT-Regular", sans-serif; 3346 3347 background-color: #FFFFFF; 3348 color: #111827; 3349 scroll-behavior: smooth; 3350 max-width: 100%; 3351 overflow-x: hidden; 3352 } 3353 .iti { 3354 width: 100%; 3355 display: block; 3356 } 3357 [x-cloak] { 3358 display: none !important; 3359 } 3360 3361 3362 .bg-header { 3363 background-color: None; 3364 } 3365 .border-header { 3366 border-color: ; 3367 } 3368 .text-header { 3369 display: inline-block; 3370 3371 border-color: transparent; 3372 border-radius: 0.375rem; 3373 transition: transform 0.3s ease-out; 3374 } 3375 .text-header:hover { 3376 transform: scale(1.1); 3377 3378 } 3379 3380 3381 3382 footer#page-footer a { 3383 color: ; 3384 } 3385 footer#page-footer { 3386 background-color: rgb(249 250 251); 3387 } 3388 3389</style> 3390 3391 3392 3393 3394 3395 3396 3397
3397<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"6ee8e7eff9b746898a13fb45915b1521","r":1,"spa":2}' crossorigin="anonymous"></script>
3397 3398</body> 3399 3400 3401 3402</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.