{"id":1961,"date":"2026-05-07T06:04:11","date_gmt":"2026-05-07T06:04:11","guid":{"rendered":"https:\/\/didiplayarea.com\/?page_id=1961"},"modified":"2026-05-07T06:14:36","modified_gmt":"2026-05-07T06:14:36","slug":"zone-sizer","status":"publish","type":"page","link":"https:\/\/didiplayarea.com\/ar\/indoor-playground-equipment\/toddler-indoor-playground\/zone-sizer\/","title":{"rendered":"\u062d\u062c\u0645 \u0627\u0644\u0645\u0646\u0637\u0642\u0629"},"content":{"rendered":"\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-8fea653\" data-block-id=\"8fea653\"><style>.stk-8fea653 {margin-bottom:0px !important;}<\/style><div class=\"stk-row stk-inner-blocks has-text-align-center stk-block-content stk-content-align stk-8fea653-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-3b6932a\" data-v=\"4\" data-block-id=\"3b6932a\"><style>.stk-3b6932a-container{margin-top:var(--stk--preset--spacing--50, 1.5rem) !important;margin-right:var(--stk--preset--spacing--50, 1.5rem) !important;margin-bottom:var(--stk--preset--spacing--50, 1.5rem) !important;margin-left:var(--stk--preset--spacing--50, 1.5rem) !important;}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-3b6932a-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-3b6932a-inner-blocks\"><div class=\"ct-breadcrumbs\" data-source=\"rankmath\" ><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Home<\/span><\/p><\/nav><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-a9eb61f\" data-block-id=\"a9eb61f\"><style>.stk-a9eb61f {margin-bottom:0px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-a9eb61f-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-d2c556e\" data-v=\"4\" data-block-id=\"d2c556e\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-d2c556e-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-d2c556e-inner-blocks\">\n<style>\n  \/* \u5f15\u5165\u9ad8\u8d28\u91cf\u4f01\u4e1a\u7ea7\u5b57\u4f53 *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap');\n\n  \/* 1. \u9876\u7ea7\u4f5c\u7528\u57df\u9694\u79bb & \u57fa\u7840\u91cd\u7f6e *\/\n  #didi-estimator-module {\n    width: 100% !important;\n    box-sizing: border-box !important;\n    font-family: inherit, 'Inter', sans-serif !important;\n    position: relative !important;\n    line-height: 1.6 !important;\n    background-color: #F8FAFC !important; \/* \u6781\u7b80\u6d45\u7070\u80cc\u666f\u886c\u6258\u5361\u7247 *\/\n    padding: 80px 0 !important;\n  }\n\n  #didi-estimator-module * {\n    box-sizing: border-box !important;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n  \/* 2. \u5c45\u4e2d\u5f39\u6027\u5bb9\u5668 *\/\n  #didi-estimator-module .didi-container {\n    max-width: 800px !important; \/* \u8ba1\u7b97\u5668\u91c7\u7528\u7d27\u51d1\u5c3a\u5bf8\u66f4\u663e\u7cbe\u81f4 *\/\n    margin: 0 auto !important;\n    padding: 0 20px !important;\n  }\n\n  \/* 3. \u8ba1\u7b97\u5668\u5361\u7247\u4e3b\u4f53 *\/\n  #didi-estimator-module .didi-calc-card {\n    background: #FFFFFF !important;\n    border-radius: 16px !important;\n    padding: 50px !important;\n    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08), \n                0 0 0 1px rgba(15, 23, 42, 0.03) !important;\n    position: relative !important;\n  }\n\n  \/* \u9876\u90e8\u54c1\u724c\u8272\u6d41\u5149\u7ebf *\/\n  #didi-estimator-module .didi-calc-card::before {\n    content: '' !important;\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100% !important;\n    height: 5px !important;\n    background: linear-gradient(90deg, #00D8FF, #FFD848) !important;\n    border-radius: 16px 16px 0 0 !important;\n  }\n\n  \/* \u5934\u90e8\u6807\u9898\u533a *\/\n  #didi-estimator-module .didi-header {\n    text-align: center !important;\n    margin-bottom: 40px !important;\n  }\n\n  #didi-estimator-module .didi-title {\n    font-size: 28px !important;\n    font-weight: 800 !important;\n    color: #0F172A !important;\n    margin-bottom: 12px !important;\n    letter-spacing: -0.5px !important;\n  }\n\n  #didi-estimator-module .didi-subtitle {\n    font-size: 15px !important;\n    color: #64748B !important;\n    line-height: 1.6 !important;\n  }\n\n  \/* 4. \u8868\u5355\u4ea4\u4e92\u533a *\/\n  #didi-estimator-module .didi-form-group {\n    margin-bottom: 24px !important;\n  }\n\n  #didi-estimator-module .didi-label {\n    display: block !important;\n    font-size: 14px !important;\n    font-weight: 700 !important;\n    color: #1E293B !important;\n    margin-bottom: 8px !important;\n    text-transform: uppercase !important;\n    letter-spacing: 0.5px !important;\n  }\n\n  \/* \u9ad8\u7ea7\u8f93\u5165\u6846\u4e0e\u4e0b\u62c9\u6846 *\/\n  #didi-estimator-module .didi-input {\n    width: 100% !important;\n    padding: 16px 20px !important;\n    background: #F8FAFC !important;\n    border: 1px solid #E2E8F0 !important;\n    border-radius: 8px !important;\n    font-size: 16px !important;\n    font-family: inherit !important;\n    color: #0F172A !important;\n    transition: all 0.3s ease !important;\n    appearance: none !important; \/* \u53bb\u9664\u539f\u751f\u9ed8\u8ba4\u6837\u5f0f *\/\n  }\n\n  #didi-estimator-module select.didi-input {\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C\/path%3E%3C\/svg%3E\") !important;\n    background-repeat: no-repeat !important;\n    background-position: right 16px center !important;\n    background-size: 20px !important;\n    cursor: pointer !important;\n  }\n\n  #didi-estimator-module .didi-input:hover {\n    border-color: #CBD5E1 !important;\n  }\n\n  #didi-estimator-module .didi-input:focus {\n    outline: none !important;\n    background: #FFFFFF !important;\n    border-color: #00D8FF !important;\n    box-shadow: 0 0 0 4px rgba(0, 216, 255, 0.15) !important;\n  }\n\n  \/* \u89e6\u53d1\u6309\u94ae *\/\n  #didi-estimator-module .didi-submit-btn {\n    display: block !important;\n    width: 100% !important;\n    padding: 18px !important;\n    background: #0F172A !important;\n    color: #FFFFFF !important;\n    font-size: 16px !important;\n    font-weight: 700 !important;\n    border: none !important;\n    border-radius: 8px !important;\n    cursor: pointer !important;\n    transition: all 0.3s ease !important;\n    margin-top: 10px !important;\n    text-transform: uppercase !important;\n    letter-spacing: 1px !important;\n  }\n\n  #didi-estimator-module .didi-submit-btn:hover {\n    background: #1E293B !important;\n    transform: translateY(-2px) !important;\n    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15) !important;\n  }\n\n  \/* \u9519\u8bef\u63d0\u793a *\/\n  #didi-estimator-module .didi-error-msg {\n    color: #EF4444 !important;\n    font-size: 14px !important;\n    margin-top: 12px !important;\n    text-align: center !important;\n    display: none !important;\n    font-weight: 500 !important;\n  }\n\n  \/* 5. \u7ed3\u679c\u5c55\u793a\u533a (\u5e73\u6ed1\u52a8\u753b\u663e\u793a) *\/\n  #didi-estimator-module .didi-result-wrapper {\n    margin-top: 30px !important;\n    padding: 30px !important;\n    background: #F0F9FF !important; \/* \u6781\u6de1\u54c1\u724c\u4e3b\u8272\u4f5c\u4e3a\u5e95\u8272 *\/\n    border-radius: 12px !important;\n    border-left: 4px solid #00D8FF !important;\n    display: none !important;\n    opacity: 0 !important;\n    transform: translateY(20px) !important;\n    transition: opacity 0.5s ease, transform 0.5s ease !important;\n  }\n\n  #didi-estimator-module .didi-result-wrapper.show {\n    display: block !important;\n    opacity: 1 !important;\n    transform: translateY(0) !important;\n  }\n\n  #didi-estimator-module .didi-res-title {\n    font-size: 18px !important;\n    font-weight: 800 !important;\n    color: #0F172A !important;\n    margin-bottom: 12px !important;\n  }\n\n  #didi-estimator-module .didi-res-tier-tag {\n    display: inline-block !important;\n    padding: 6px 14px !important;\n    background: #FFD848 !important; \/* \u526f\u8272\u8c03\u70b9\u7f00 *\/\n    color: #0F172A !important;\n    border-radius: 6px !important;\n    font-weight: 800 !important;\n    font-size: 13px !important;\n    text-transform: uppercase !important;\n    letter-spacing: 0.5px !important;\n    margin-bottom: 16px !important;\n  }\n\n  #didi-estimator-module .didi-res-main {\n    font-size: 16px !important;\n    color: #334155 !important;\n    margin-bottom: 12px !important;\n    line-height: 1.6 !important;\n  }\n\n  #didi-estimator-module .didi-res-price {\n    font-size: 32px !important;\n    font-weight: 900 !important;\n    color: #0369A1 !important; \/* \u6df1\u9752\u8272\u5f3a\u5316\u4ef7\u683c\u6743\u5a01\u611f *\/\n    margin-bottom: 16px !important;\n    letter-spacing: -1px !important;\n  }\n\n  #didi-estimator-module .didi-res-note {\n    font-size: 14px !important;\n    color: #0F172A !important;\n    font-weight: 600 !important;\n    font-style: italic !important;\n    margin-bottom: 16px !important;\n  }\n\n  #didi-estimator-module .didi-res-disclaimer {\n    font-size: 13px !important;\n    color: #64748B !important;\n    line-height: 1.5 !important;\n    padding-top: 16px !important;\n    border-top: 1px solid rgba(15, 23, 42, 0.05) !important;\n    margin-bottom: 24px !important;\n  }\n\n  #didi-estimator-module .didi-cta-link {\n    display: inline-flex !important;\n    align-items: center !important;\n    padding: 14px 24px !important;\n    background: #00D8FF !important;\n    color: #0F172A !important;\n    text-decoration: none !important;\n    border-radius: 6px !important;\n    font-weight: 700 !important;\n    font-size: 15px !important;\n    transition: all 0.3s ease !important;\n  }\n\n  #didi-estimator-module .didi-cta-link:hover {\n    background: #00BBE6 !important;\n    transform: translateX(4px) !important;\n  }\n\n  \/* \u54cd\u5e94\u5f0f *\/\n  @media (max-width:690px) {\n    #didi-estimator-module { padding: 50px 0 !important; }\n    #didi-estimator-module .didi-calc-card { padding: 30px 20px !important; }\n    #didi-estimator-module .didi-title { font-size: 24px !important; }\n    #didi-estimator-module .didi-res-price { font-size: 26px !important; }\n  }\n<\/style>\n\n<section id=\"didi-estimator-module\">\n  <div class=\"didi-container\">\n    \n    <div class=\"didi-calc-card\">\n      <div class=\"didi-header\">\n        <div class=\"didi-title\">Toddler Zone Sizer &#038; Tier Estimator<\/div>\n        <div class=\"didi-subtitle\">Enter your space and operator type \u2014 get a tier recommendation and USD range tied to our 600-project pricing history.<\/div>\n      <\/div>\n\n      <div class=\"didi-form-group\">\n        <label class=\"didi-label\" for=\"didi-area\">Toddler-zone footprint (m\u00b2)<\/label>\n        <input class=\"didi-input\" id=\"didi-area\" type=\"number\" min=\"5\" max=\"1000\" placeholder=\"e.g. 80\">\n      <\/div>\n\n      <div class=\"didi-form-group\">\n        <label class=\"didi-label\" for=\"didi-type\">Operator type<\/label>\n        <select class=\"didi-input\" id=\"didi-type\">\n          <option value=\"\">Select operator type\u2026<\/option>\n          <option value=\"daycare\">Daycare \/ kindergarten \/ early-learning<\/option>\n          <option value=\"fec\">Family entertainment center (FEC)<\/option>\n          <option value=\"mall\">Shopping mall<\/option>\n          <option value=\"restaurant\">Restaurant kids zone<\/option>\n          <option value=\"hotel\">Hotel family floor<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"didi-form-group\">\n        <label class=\"didi-label\" for=\"didi-theme\">Theme depth<\/label>\n        <select class=\"didi-input\" id=\"didi-theme\">\n          <option value=\"\">Select theming depth\u2026<\/option>\n          <option value=\"basic\">Basic \u2014 single Soft Play or one Themed pod<\/option>\n          <option value=\"mid\">Mid \u2014 Soft Play + 1 themed + small Sand Pit<\/option>\n          <option value=\"premium\">Premium \u2014 full 4-series with Macaron overlay + custom theming<\/option>\n        <\/select>\n      <\/div>\n\n      <button id=\"didi-calc-btn\" class=\"didi-submit-btn\">Estimate My Toddler Zone<\/button>\n      <div id=\"didi-error\" class=\"didi-error-msg\">Please fill out all fields to generate an estimate.<\/div>\n\n      <div id=\"didi-result-wrapper\" class=\"didi-result-wrapper\">\n        <div id=\"didi-result-content\">\n          <\/div>\n        <a class=\"didi-cta-link\" href=\"#ct-popup-800\">Get a Precise Quote &rarr;<\/a>\n      <\/div>\n      \n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n  document.addEventListener('DOMContentLoaded', function() {\n    \n    const btn = document.getElementById('didi-calc-btn');\n    const areaInput = document.getElementById('didi-area');\n    const typeSelect = document.getElementById('didi-type');\n    const themeSelect = document.getElementById('didi-theme');\n    \n    \/\/ \u6838\u5fc3\u66f4\u6539\uff1a\u73b0\u5728\u5206\u79bb\u4e86 Wrapper (\u6846) \u548c Content (\u6587\u5b57\u5185\u5bb9)\n    const resultWrapper = document.getElementById('didi-result-wrapper');\n    const resultContent = document.getElementById('didi-result-content');\n    const errorMsg = document.getElementById('didi-error');\n\n    function processCalculation() {\n      const areaVal = parseFloat(areaInput.value);\n      const typeVal = typeSelect.value;\n      const themeVal = themeSelect.value;\n\n      if (!areaVal || areaVal < 5 || !typeVal || !themeVal) {\n        errorMsg.style.display = 'block';\n        resultWrapper.classList.remove('show');\n        return;\n      }\n      \n      errorMsg.style.display = 'none';\n\n      const tierMap = {\n        basic: [400, 650], \n        mid: [650, 900], \n        premium: [900, 1400]\n      };\n      const tierLabel = {\n        basic: 'Basic Tier', \n        mid: 'Mid Tier', \n        premium: 'Premium Tier'\n      };\n      const recMap = {\n        daycare: '30-80 m\u00b2 typical \u00b7 Themed Role-Play heavy \u00b7 EN 1176 + CPSIA filing',\n        fec: '100-300 m\u00b2 typical \u00b7 Soft Play + Macaron \u00b7 EN + ASTM dual filing',\n        mall: '80-200 m\u00b2 typical \u00b7 Macaron + Themed \u00b7 CE + local fire rating',\n        restaurant: '15-40 m\u00b2 typical \u00b7 Compact Soft Play \u00b7 EN 1176-10 fully enclosed',\n        hotel: '50-150 m\u00b2 typical \u00b7 Themed + Sand Pit \u00b7 EN + easy-clean surfacing'\n      };\n\n      const range = tierMap[themeVal];\n      const lo = Math.round((areaVal * range[0]) \/ 100) * 100;\n      const hi = Math.round((areaVal * range[1]) \/ 100) * 100;\n\n      \/\/ \u4ec5\u6ce8\u5165\u6587\u5b57\u90e8\u5206\uff0c\u6309\u94ae\u4fdd\u7559\u5728\u9759\u6001\u7ed3\u6784\u4e2d\n      let htmlContent = `\n        <div class=\"didi-res-title\">Estimated Configuration<\/div>\n        <div class=\"didi-res-tier-tag\">${tierLabel[themeVal]}<\/div>\n        <div class=\"didi-res-main\">For <strong>${areaVal} m\u00b2<\/strong> in a ${typeSelect.options[typeSelect.selectedIndex].text} setting, the working USD range is:<\/div>\n        <div class=\"didi-res-price\">$${lo.toLocaleString()} - $${hi.toLocaleString()} <span style=\"font-size:16px;font-weight:600;color:#64748B;\">(FOB Guangzhou)<\/span><\/div>\n        <div class=\"didi-res-note\">\"${recMap[typeVal]}\"<\/div>\n        <div class=\"didi-res-disclaimer\">Tier scopes 3D rendering, export packaging, full compliance dossier, and remote installation guidance. Final quote depends on theming complexity, surface attenuation grade, and on-site supervision.<\/div>\n      `;\n\n      resultContent.innerHTML = htmlContent;\n      \n      setTimeout(() => {\n        resultWrapper.classList.add('show');\n      }, 50);\n    }\n\n    btn.addEventListener('click', function(e) {\n      e.preventDefault();\n      processCalculation();\n    });\n\n    [areaInput, typeSelect, themeSelect].forEach(el => {\n      el.addEventListener('change', function() {\n        if(resultWrapper.classList.contains('show')){\n           processCalculation();\n        }\n      });\n    });\n    \n    areaInput.addEventListener('input', function() {\n      if(resultWrapper.classList.contains('show')){\n         processCalculation();\n      }\n    });\n\n  });\n<\/script>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Toddler Zone Sizer &#038; Tier Estimator Enter your space and operator type \u2014 get a tier recommendation and USD range tied to our 600-project pricing history. Toddler-zone footprint (m\u00b2) Operator type Select operator type\u2026Daycare \/ kindergarten \/ early-learningFamily entertainment center (FEC)Shopping mallRestaurant kids zoneHotel family floor Theme depth Select theming depth\u2026Basic \u2014 single Soft Play [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":1755,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-1961","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/didiplayarea.com\/ar\/wp-json\/wp\/v2\/pages\/1961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/didiplayarea.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/didiplayarea.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/didiplayarea.com\/ar\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/didiplayarea.com\/ar\/wp-json\/wp\/v2\/comments?post=1961"}],"version-history":[{"count":0,"href":"https:\/\/didiplayarea.com\/ar\/wp-json\/wp\/v2\/pages\/1961\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/didiplayarea.com\/ar\/wp-json\/wp\/v2\/pages\/1755"}],"wp:attachment":[{"href":"https:\/\/didiplayarea.com\/ar\/wp-json\/wp\/v2\/media?parent=1961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}