{"id":1471,"date":"2026-04-14T02:57:44","date_gmt":"2026-04-14T02:57:44","guid":{"rendered":"https:\/\/envautomation.com\/?page_id=1471"},"modified":"2026-05-18T08:35:38","modified_gmt":"2026-05-18T08:35:38","slug":"wbgt-temperature-record","status":"publish","type":"page","link":"https:\/\/envautomation.com\/?page_id=1471","title":{"rendered":"WBGT -Temperature  Record"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1471\" class=\"elementor elementor-1471\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50d848b e-flex e-con-boxed e-con e-parent\" data-id=\"50d848b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-220ccce elementor-widget elementor-widget-html\" data-id=\"220ccce\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u2705 PREMIUM WBGT-HEAT STRESS RECORD PAGE\r\n\u2705 New server API: cctv.envautomation.com\r\n\u2705 Premium UI \/ Animation \/ Responsive\r\n\u2705 PDF download fixed\r\n\u2705 Table title text color white\r\n\u2705 Mobile From Date \/ To Date box layout fixed\r\n-->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap\"\/>\r\n\r\n<style>\r\n  :root{\r\n    --blue:#1573e6;\r\n    --blue-d:#0e5ec0;\r\n    --cyan:#38bdf8;\r\n    --navy:#0b2a5a;\r\n    --card:#ffffff;\r\n    --bg:#eef5ff;\r\n    --line:#dbe7f3;\r\n    --text:#102033;\r\n    --muted:#64748b;\r\n    --green:#16a34a;\r\n    --yellow:#f59e0b;\r\n    --red:#dc2626;\r\n    --shadow:0 18px 45px rgba(15,45,85,.13);\r\n    --soft:0 8px 24px rgba(15,45,85,.08);\r\n  }\r\n\r\n  body{\r\n    font-family:Poppins,Arial,Helvetica,sans-serif;\r\n    margin:0;\r\n    background:#fff;\r\n    color:var(--text);\r\n  }\r\n\r\n  .premium-wbgt-page{\r\n    position:relative;\r\n    overflow:hidden;\r\n    min-height:100vh;\r\n    padding:26px 14px 42px;\r\n    background:\r\n      radial-gradient(circle at 18% 10%, rgba(56,189,248,.22), transparent 32%),\r\n      radial-gradient(circle at 82% 12%, rgba(21,115,230,.17), transparent 34%),\r\n      linear-gradient(180deg,#f7fbff 0%,#eef5ff 44%,#ffffff 100%);\r\n  }\r\n\r\n  .premium-wbgt-page *{\r\n    box-sizing:border-box;\r\n  }\r\n\r\n  .premium-wbgt-page::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background-image:\r\n      linear-gradient(rgba(21,115,230,.045) 1px, transparent 1px),\r\n      linear-gradient(90deg, rgba(21,115,230,.045) 1px, transparent 1px);\r\n    background-size:34px 34px;\r\n    mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 70%);\r\n    pointer-events:none;\r\n  }\r\n\r\n  .premium-shell{\r\n    position:relative;\r\n    max-width:1180px;\r\n    width:100%;\r\n    margin:0 auto;\r\n  }\r\n\r\n  .hero-card{\r\n    position:relative;\r\n    overflow:hidden;\r\n    border:1px solid rgba(255,255,255,.75);\r\n    border-radius:28px;\r\n    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(241,247,255,.82));\r\n    box-shadow:var(--shadow);\r\n    padding:22px;\r\n    margin-bottom:18px;\r\n    backdrop-filter:blur(16px);\r\n    animation:fadeUp .55s ease both;\r\n  }\r\n\r\n  .hero-card::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    width:260px;\r\n    height:260px;\r\n    right:-95px;\r\n    top:-105px;\r\n    border-radius:50%;\r\n    background:radial-gradient(circle,rgba(21,115,230,.18),transparent 68%);\r\n    animation:pulseGlow 4s ease-in-out infinite;\r\n  }\r\n\r\n  @keyframes fadeUp{\r\n    from{opacity:0;transform:translateY(18px)}\r\n    to{opacity:1;transform:translateY(0)}\r\n  }\r\n\r\n  @keyframes pulseGlow{\r\n    0%,100%{transform:scale(1);opacity:.75}\r\n    50%{transform:scale(1.12);opacity:1}\r\n  }\r\n\r\n  .hero-inner{\r\n    position:relative;\r\n    z-index:2;\r\n    display:grid;\r\n    grid-template-columns:1fr auto;\r\n    gap:18px;\r\n    align-items:center;\r\n  }\r\n\r\n  .brand-row{\r\n    display:flex;\r\n    gap:14px;\r\n    align-items:center;\r\n    min-width:0;\r\n  }\r\n\r\n  .brand-icon{\r\n    width:58px;\r\n    height:58px;\r\n    border-radius:18px;\r\n    display:grid;\r\n    place-items:center;\r\n    color:#fff;\r\n    font-weight:900;\r\n    font-size:20px;\r\n    background:linear-gradient(135deg,var(--blue),var(--cyan));\r\n    box-shadow:0 16px 32px rgba(21,115,230,.28);\r\n    animation:floatIcon 3.8s ease-in-out infinite;\r\n    flex:0 0 auto;\r\n  }\r\n\r\n  @keyframes floatIcon{\r\n    0%,100%{transform:translateY(0)}\r\n    50%{transform:translateY(-5px)}\r\n  }\r\n\r\n  .hero-title{\r\n    margin:0;\r\n    font-size:30px;\r\n    line-height:1.08;\r\n    letter-spacing:.2px;\r\n    font-weight:900;\r\n    color:var(--navy);\r\n  }\r\n\r\n  .hero-sub{\r\n    margin:7px 0 0;\r\n    color:var(--muted);\r\n    font-weight:700;\r\n    font-size:13px;\r\n  }\r\n\r\n  .live-pill{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:9px;\r\n    padding:10px 14px;\r\n    border-radius:999px;\r\n    background:rgba(255,255,255,.9);\r\n    border:1px solid var(--line);\r\n    box-shadow:var(--soft);\r\n    font-size:12px;\r\n    font-weight:900;\r\n    color:#30506c;\r\n    white-space:nowrap;\r\n  }\r\n\r\n  .live-dot{\r\n    width:9px;\r\n    height:9px;\r\n    border-radius:50%;\r\n    background:#22c55e;\r\n    box-shadow:0 0 0 7px rgba(34,197,94,.13);\r\n    animation:blinkDot 1.5s ease-in-out infinite;\r\n  }\r\n\r\n  @keyframes blinkDot{\r\n    0%,100%{opacity:1}\r\n    50%{opacity:.45}\r\n  }\r\n\r\n  .filter-card{\r\n    position:relative;\r\n    z-index:2;\r\n    display:grid;\r\n    grid-template-columns:1fr 1fr auto auto;\r\n    gap:12px;\r\n    align-items:end;\r\n    border-radius:22px;\r\n    background:rgba(255,255,255,.88);\r\n    border:1px solid rgba(218,231,244,.9);\r\n    box-shadow:var(--soft);\r\n    padding:16px;\r\n    margin-top:18px;\r\n    width:100%;\r\n    max-width:100%;\r\n  }\r\n\r\n  .field{\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:7px;\r\n    min-width:0;\r\n    width:100%;\r\n    max-width:100%;\r\n  }\r\n\r\n  .label{\r\n    font-size:12px;\r\n    color:#244058;\r\n    font-weight:900;\r\n  }\r\n\r\n  .input{\r\n    height:44px;\r\n    padding:0 13px;\r\n    border:1px solid #cfdceb;\r\n    border-radius:12px;\r\n    background:#fff;\r\n    font-size:13px;\r\n    font-family:Poppins,Arial,sans-serif;\r\n    color:var(--text);\r\n    outline:none;\r\n    transition:.18s ease;\r\n    width:100%;\r\n    max-width:100%;\r\n    min-width:0;\r\n    display:block;\r\n  }\r\n\r\n  input[type=\"date\"].input{\r\n    width:100%;\r\n    max-width:100%;\r\n    min-width:0;\r\n    appearance:auto;\r\n    -webkit-appearance:none;\r\n    line-height:44px;\r\n  }\r\n\r\n  .input:focus{\r\n    border-color:#73b7ff;\r\n    box-shadow:0 0 0 4px rgba(21,115,230,.10);\r\n  }\r\n\r\n  .btn{\r\n    height:44px;\r\n    padding:0 18px;\r\n    border:0;\r\n    border-radius:12px;\r\n    font-size:13px;\r\n    font-weight:900;\r\n    font-family:Poppins,Arial,sans-serif;\r\n    cursor:pointer;\r\n    white-space:nowrap;\r\n    transition:.18s ease;\r\n    width:auto;\r\n  }\r\n\r\n  .btn:hover{\r\n    transform:translateY(-1px);\r\n  }\r\n\r\n  .btn:disabled{\r\n    opacity:.7;\r\n    cursor:not-allowed;\r\n    transform:none;\r\n  }\r\n\r\n  .btn-search{\r\n    color:#fff;\r\n    background:linear-gradient(135deg,var(--blue),var(--cyan));\r\n    box-shadow:0 12px 26px rgba(21,115,230,.22);\r\n  }\r\n\r\n  .btn-download{\r\n    color:var(--blue);\r\n    background:#fff;\r\n    border:2px solid var(--blue);\r\n  }\r\n\r\n  .status-grid{\r\n    display:grid;\r\n    grid-template-columns:repeat(3,1fr);\r\n    gap:12px;\r\n    margin:18px 0;\r\n  }\r\n\r\n  .status-box{\r\n    position:relative;\r\n    overflow:hidden;\r\n    border-radius:18px;\r\n    padding:15px 16px;\r\n    color:#fff;\r\n    box-shadow:var(--soft);\r\n    animation:fadeUp .6s ease both;\r\n  }\r\n\r\n  .status-box::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    width:120px;\r\n    height:120px;\r\n    right:-44px;\r\n    top:-52px;\r\n    border-radius:50%;\r\n    background:rgba(255,255,255,.18);\r\n  }\r\n\r\n  .status-box h3{\r\n    position:relative;\r\n    z-index:2;\r\n    margin:0;\r\n    font-size:14px;\r\n    line-height:1.2;\r\n    font-weight:900;\r\n  }\r\n\r\n  .status-box p{\r\n    position:relative;\r\n    z-index:2;\r\n    margin:5px 0 0;\r\n    font-size:12px;\r\n    font-weight:800;\r\n    opacity:.95;\r\n  }\r\n\r\n  .low{background:linear-gradient(135deg,#16a34a,#64c955)}\r\n  .mid{background:linear-gradient(135deg,#f59e0b,#facc15);color:#2c2200}\r\n  .high{background:linear-gradient(135deg,#dc2626,#fb5b4c)}\r\n\r\n  .chart-card{\r\n    display:none;\r\n    border-radius:26px;\r\n    background:rgba(255,255,255,.93);\r\n    border:1px solid rgba(218,231,244,.95);\r\n    box-shadow:var(--shadow);\r\n    padding:18px;\r\n    margin-bottom:18px;\r\n    animation:fadeUp .7s ease both;\r\n  }\r\n\r\n  .chart-head{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:flex-start;\r\n    gap:12px;\r\n    flex-wrap:wrap;\r\n    margin-bottom:8px;\r\n  }\r\n\r\n  .chart-title{\r\n    margin:0;\r\n    font-size:20px;\r\n    color:var(--navy);\r\n    font-weight:900;\r\n  }\r\n\r\n  .chart-sub{\r\n    margin:4px 0 0;\r\n    font-size:12px;\r\n    color:var(--muted);\r\n    font-weight:700;\r\n  }\r\n\r\n  .chart-badge{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:8px;\r\n    padding:9px 12px;\r\n    border-radius:999px;\r\n    background:#f2f7ff;\r\n    color:#1b4f8d;\r\n    border:1px solid #d8e8ff;\r\n    font-size:12px;\r\n    font-weight:900;\r\n  }\r\n\r\n  .chart-box{\r\n    height:290px;\r\n    position:relative;\r\n  }\r\n\r\n  #wbgtChart{\r\n    width:100% !important;\r\n    height:100% !important;\r\n    display:block;\r\n  }\r\n\r\n  .legend-note{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    gap:10px;\r\n    margin-top:12px;\r\n    font-size:12px;\r\n    font-weight:800;\r\n    color:#425466;\r\n  }\r\n\r\n  .legend-chip{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:7px;\r\n    padding:8px 11px;\r\n    border-radius:999px;\r\n    border:1px solid #dbe5ef;\r\n    background:#fff;\r\n    box-shadow:0 4px 12px rgba(15,45,85,.06);\r\n  }\r\n\r\n  .legend-dot{\r\n    width:10px;\r\n    height:10px;\r\n    border-radius:50%;\r\n  }\r\n\r\n  .lg-g{background:#16a34a}\r\n  .lg-y{background:#f59e0b}\r\n  .lg-r{background:#dc2626}\r\n\r\n  #reportWrap{\r\n    display:none;\r\n    animation:fadeUp .8s ease both;\r\n  }\r\n\r\n  .meta-line{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    gap:10px;\r\n    align-items:center;\r\n    margin:10px 0 14px;\r\n  }\r\n\r\n  .kv{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:6px;\r\n    padding:9px 11px;\r\n    border-radius:999px;\r\n    background:#fff;\r\n    border:1px solid var(--line);\r\n    box-shadow:0 5px 14px rgba(15,45,85,.05);\r\n    color:var(--muted);\r\n    font-size:12px;\r\n    font-weight:800;\r\n  }\r\n\r\n  .kv b{\r\n    color:#102033;\r\n    font-weight:900;\r\n  }\r\n\r\n  .table-card{\r\n    background:#fff;\r\n    border:1px solid var(--line);\r\n    border-radius:22px;\r\n    box-shadow:var(--shadow);\r\n    overflow:hidden;\r\n  }\r\n\r\n  .table-titlebar{\r\n    padding:14px 16px;\r\n    background:linear-gradient(135deg,#0b2a5a,#154d9c);\r\n    color:#fff;\r\n    display:flex;\r\n    justify-content:space-between;\r\n    gap:10px;\r\n    align-items:center;\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n  .table-titlebar h3{\r\n    margin:0;\r\n    font-size:15px;\r\n    font-weight:900;\r\n    color:#ffffff !important;\r\n  }\r\n\r\n  .table-titlebar span{\r\n    font-size:12px;\r\n    font-weight:700;\r\n    opacity:.95;\r\n    color:#ffffff !important;\r\n  }\r\n\r\n  .table-scroller{\r\n    overflow:auto;\r\n    max-height:72vh;\r\n  }\r\n\r\n  table{\r\n    border-collapse:separate;\r\n    border-spacing:0;\r\n    width:max-content;\r\n    min-width:100%;\r\n  }\r\n\r\n  thead th{\r\n    position:sticky;\r\n    top:0;\r\n    background:#f8fafc;\r\n    border-bottom:1px solid #e8eef6;\r\n    padding:11px 8px;\r\n    font-size:12px;\r\n    text-align:center;\r\n    z-index:2;\r\n    color:#1c2f45;\r\n    font-weight:900;\r\n  }\r\n\r\n  tbody td, tbody th{\r\n    border-bottom:1px solid #edf2f7;\r\n    border-right:1px solid #edf2f7;\r\n    padding:8px 7px;\r\n    font-size:11px;\r\n    text-align:center;\r\n    color:#223951;\r\n    font-weight:700;\r\n  }\r\n\r\n  tbody tr:hover td,\r\n  tbody tr:hover th{\r\n    background:#f4f9ff;\r\n  }\r\n\r\n  tbody th.date{\r\n    position:sticky;\r\n    left:0;\r\n    background:#f8fafc;\r\n    border-right:1px solid var(--line);\r\n    z-index:1;\r\n  }\r\n\r\n  tbody th.time{\r\n    position:sticky;\r\n    left:90px;\r\n    background:#f8fafc;\r\n    border-right:1px solid var(--line);\r\n    z-index:1;\r\n  }\r\n\r\n  .col-date{width:90px;min-width:90px}\r\n  .col-time{width:76px;min-width:76px}\r\n  .col-min{width:54px;min-width:54px}\r\n  .col-max{width:135px;min-width:135px;font-weight:900}\r\n\r\n  .g{background:#e9f7ee !important;color:#0f7a35 !important}\r\n  .y{background:#fff3cf !important;color:#8a5a00 !important}\r\n  .r{background:#ffe1e1 !important;color:#a31616 !important}\r\n\r\n  .footer-note{\r\n    text-align:center;\r\n    margin-top:18px;\r\n    color:#718096;\r\n    font-size:12px;\r\n    font-weight:800;\r\n  }\r\n\r\n  @media (max-width:980px){\r\n    .hero-inner{\r\n      grid-template-columns:1fr;\r\n    }\r\n\r\n    .filter-card{\r\n      grid-template-columns:minmax(0,1fr) minmax(0,1fr);\r\n      width:100%;\r\n      max-width:100%;\r\n    }\r\n\r\n    .filter-card button{\r\n      width:100%;\r\n    }\r\n\r\n    .status-grid{\r\n      grid-template-columns:1fr;\r\n    }\r\n\r\n    .chart-box{\r\n      height:230px;\r\n    }\r\n  }\r\n\r\n  @media (max-width:640px){\r\n    .premium-wbgt-page{\r\n      padding:16px 10px 34px;\r\n      width:100%;\r\n      max-width:100%;\r\n      overflow-x:hidden;\r\n    }\r\n\r\n    .premium-shell{\r\n      width:100%;\r\n      max-width:100%;\r\n    }\r\n\r\n    .hero-card{\r\n      padding:16px;\r\n      border-radius:22px;\r\n      width:100%;\r\n      max-width:100%;\r\n      overflow:hidden;\r\n    }\r\n\r\n    .hero-inner{\r\n      grid-template-columns:1fr;\r\n      width:100%;\r\n    }\r\n\r\n    .brand-row{\r\n      width:100%;\r\n      align-items:flex-start;\r\n    }\r\n\r\n    .hero-title{\r\n      font-size:22px;\r\n      word-break:normal;\r\n    }\r\n\r\n    .hero-sub{\r\n      font-size:12px;\r\n    }\r\n\r\n    .brand-icon{\r\n      width:48px;\r\n      height:48px;\r\n      border-radius:15px;\r\n      font-size:17px;\r\n    }\r\n\r\n    .live-pill{\r\n      width:100%;\r\n      justify-content:center;\r\n      font-size:11px;\r\n    }\r\n\r\n    .filter-card{\r\n      grid-template-columns:1fr;\r\n      gap:12px;\r\n      padding:14px;\r\n      width:100%;\r\n      max-width:100%;\r\n      overflow:hidden;\r\n      border-radius:18px;\r\n    }\r\n\r\n    .field{\r\n      width:100%;\r\n      max-width:100%;\r\n      min-width:0;\r\n      overflow:hidden;\r\n    }\r\n\r\n    .label{\r\n      font-size:11px;\r\n    }\r\n\r\n    .input,\r\n    input[type=\"date\"].input{\r\n      width:100%;\r\n      max-width:100%;\r\n      min-width:0;\r\n      height:44px;\r\n      padding:0 10px;\r\n      font-size:13px;\r\n      border-radius:11px;\r\n      display:block;\r\n      background:#fff;\r\n      -webkit-appearance:none;\r\n      appearance:none;\r\n    }\r\n\r\n    .btn{\r\n      width:100%;\r\n      max-width:100%;\r\n      height:44px;\r\n      padding:0 12px;\r\n      font-size:13px;\r\n    }\r\n\r\n    .chart-card{\r\n      padding:13px;\r\n      border-radius:20px;\r\n    }\r\n\r\n    .table-card{\r\n      border-radius:18px;\r\n    }\r\n\r\n    .table-titlebar{\r\n      padding:12px 13px;\r\n    }\r\n\r\n    .table-titlebar h3{\r\n      font-size:13px;\r\n    }\r\n\r\n    .table-titlebar span{\r\n      font-size:11px;\r\n    }\r\n\r\n    .kv{\r\n      border-radius:14px;\r\n      width:100%;\r\n      justify-content:space-between;\r\n    }\r\n  }\r\n\r\n  @media (max-width:380px){\r\n    .premium-wbgt-page{\r\n      padding:12px 8px 30px;\r\n    }\r\n\r\n    .hero-card{\r\n      padding:13px;\r\n    }\r\n\r\n    .filter-card{\r\n      padding:12px;\r\n    }\r\n\r\n    .input,\r\n    input[type=\"date\"].input{\r\n      font-size:12px;\r\n      padding:0 8px;\r\n    }\r\n\r\n    .btn{\r\n      font-size:12px;\r\n    }\r\n\r\n    .hero-title{\r\n      font-size:20px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"premium-wbgt-page\">\r\n  <div class=\"premium-shell\">\r\n\r\n    <div class=\"hero-card\">\r\n      <div class=\"hero-inner\">\r\n        <div class=\"brand-row\">\r\n          <div class=\"brand-icon\">EA<\/div>\r\n          <div>\r\n            <h2 class=\"hero-title\">KIMLY CONSTRUCTION PTE LTD <\/h2>\r\n            <p class=\"hero-sub\"> PROJECT : KBGC3 <\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"live-pill\">\r\n          <span class=\"live-dot\"><\/span>\r\n          Live Temperature\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <form id=\"filterForm\" class=\"filter-card\" autocomplete=\"off\">\r\n        <div class=\"field\">\r\n          <label class=\"label\" for=\"fromDate\">From Date<\/label>\r\n          <input id=\"fromDate\" class=\"input\" type=\"date\" required\/>\r\n        <\/div>\r\n\r\n        <div class=\"field\">\r\n          <label class=\"label\" for=\"toDate\">To Date<\/label>\r\n          <input id=\"toDate\" class=\"input\" type=\"date\" required\/>\r\n        <\/div>\r\n\r\n        <button type=\"submit\" class=\"btn btn-search\">Search<\/button>\r\n        <button type=\"button\" id=\"btnDownload\" class=\"btn btn-download\">Download PDF<\/button>\r\n      <\/form>\r\n    <\/div>\r\n\r\n    <div class=\"status-grid\">\r\n      <div class=\"status-box low\">\r\n        <h3>LOW HEAT STRESS<\/h3>\r\n        <p>WBGT below 31\u00b0C<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"status-box mid\">\r\n        <h3>MODERATE HEAT STRESS<\/h3>\r\n        <p>31\u00b0C to below 33\u00b0C<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"status-box high\">\r\n        <h3>HIGH HEAT STRESS<\/h3>\r\n        <p>WBGT 33\u00b0C and above<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"chartSection\" class=\"chart-card\">\r\n      <div class=\"chart-head\">\r\n        <div>\r\n          <h3 class=\"chart-title\">WBGT Heat Stress Reading<\/h3>\r\n          <p class=\"chart-sub\">Daily maximum WBGT trend with threshold lines<\/p>\r\n        <\/div>\r\n        <div class=\"chart-badge\">\u25cf 5-Minute Data Table<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"chart-box\">\r\n        <canvas id=\"wbgtChart\"><\/canvas>\r\n      <\/div>\r\n\r\n      <div class=\"legend-note\">\r\n        <span class=\"legend-chip\"><span class=\"legend-dot lg-g\"><\/span>Below 31 = Low Heat Stress<\/span>\r\n        <span class=\"legend-chip\"><span class=\"legend-dot lg-y\"><\/span>31 to &lt;33 = Moderate Heat Stress<\/span>\r\n        <span class=\"legend-chip\"><span class=\"legend-dot lg-r\"><\/span>33 and above = High Heat Stress<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"reportWrap\">\r\n      <div class=\"meta-line\">\r\n        <span class=\"kv\">Project: <b id=\"metaProj\">\u2014<\/b><\/span>\r\n        <span class=\"kv\">Label: <b id=\"metaLabel\">WBGT-Heat Stress<\/b><\/span>\r\n        <span class=\"kv\">Metric: <b id=\"metaMetric\">\u2014<\/b><\/span>\r\n        <span class=\"kv\">Range: <b id=\"metaRange\">\u2014<\/b><\/span>\r\n        <span class=\"kv\">Records: <b id=\"metaCount\">0<\/b><\/span>\r\n        <span class=\"kv\">Days: <b id=\"metaDays\">0<\/b><\/span>\r\n        <span class=\"kv\">Last updated: <b id=\"metaUpdated\">\u2014<\/b><\/span>\r\n      <\/div>\r\n\r\n      <div class=\"table-card\" id=\"pdfBlock\">\r\n        <div class=\"table-titlebar\">\r\n          <h3>WBGT 5-Minute Reading Table<\/h3>\r\n          <span>Auto colour based on heat stress level<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"table-scroller\">\r\n          <table id=\"wbgtTable\" aria-label=\"WBGT 5-min Table\"><\/table>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"footer-note\">\r\n      Copyright \u00a9 2026 | ENV AUTOMATION PTE LTD\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/html2canvas@1.4.1\/dist\/html2canvas.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jspdf@2.5.1\/dist\/jspdf.umd.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.1\/dist\/chart.umd.min.js\"><\/script>\r\n\r\n<script>\r\nvar PROJECT_NAME = \"KIMLY KBGC3\";\r\nvar FIXED_LABEL = \"WBGT-Heat Stress\";\r\nvar SENSOR_ID = 1;\r\nvar API_BASE = \"https:\/\/cctv.envautomation.com\/dtu_ingest\/wbgt_kbgc3\";\r\n\r\nfunction buildDailyUrl(dateStr){\r\n  return API_BASE + \"\/wbgt1_daily.php?sensor_id=\" + encodeURIComponent(SENSOR_ID) + \"&date=\" + encodeURIComponent(dateStr) + \"&_=\" + Date.now();\r\n}\r\n\r\nfunction pad(n){ return String(n).padStart(2,\"0\"); }\r\nfunction ymdLocal(d){ return d.getFullYear()+\"-\"+pad(d.getMonth()+1)+\"-\"+pad(d.getDate()); }\r\nfunction todayLocal(){ var d=new Date(); return new Date(d.getFullYear(), d.getMonth(), d.getDate()); }\r\nfunction addDays(d, n){ var x=new Date(d.getTime()); x.setDate(x.getDate()+n); return x; }\r\nfunction hourLabel24(h){ return pad(h)+\":00\"; }\r\nfunction labelFromYmd(ymd){ var p=ymd.split(\"-\"); return p[2]+\"\/\"+p[1]+\"\/\"+p[0]; }\r\n\r\nfunction emptyDay(){\r\n  var map = {};\r\n  for(var h=0; h<24; h++){\r\n    for(var m=0; m<=55; m+=5){\r\n      map[pad(h)+\":\"+pad(m)] = null;\r\n    }\r\n  }\r\n  return map;\r\n}\r\n\r\nfunction metricMeta(){\r\n  return {\r\n    name:\"WBGT\",\r\n    unit:\"\u00b0C\",\r\n    decimals:1,\r\n    yMin:26,\r\n    yMax:40,\r\n    line30:30,\r\n    line31:31,\r\n    line33:33,\r\n    title:\"WBGT-HEAT STRESS RECORD\"\r\n  };\r\n}\r\n\r\nfunction bandClassByWBGT(v){\r\n  if(v==null || isNaN(v)) return \"\";\r\n  v = Number(v);\r\n  if(v < 31) return \"g\";\r\n  if(v < 33) return \"y\";\r\n  return \"r\";\r\n}\r\n\r\nfunction normalizeDailyWBGT(json){\r\n  var grid = emptyDay();\r\n  var seen = {};\r\n\r\n  if(json && json.readings && Object.prototype.toString.call(json.readings) === \"[object Array]\"){\r\n    for(var i=0;i<json.readings.length;i++){\r\n      var r = json.readings[i];\r\n      var timeStr = (r.time || \"\");\r\n      var parts = timeStr.split(\":\");\r\n      if(parts.length < 2) continue;\r\n\r\n      var H = parseInt(parts[0],10);\r\n      var Mraw = parseInt(parts[1],10);\r\n      if(isNaN(H) || isNaN(Mraw)) continue;\r\n\r\n      var bucket = Math.floor(Mraw \/ 5) * 5;\r\n      if(bucket < 0) bucket = 0;\r\n      if(bucket > 55) bucket = 55;\r\n\r\n      var key = pad(H)+\":\"+pad(bucket);\r\n      var wbgt = (typeof r.wbgt !== \"undefined\" && r.wbgt !== null && !isNaN(Number(r.wbgt))) ? Number(r.wbgt) : null;\r\n\r\n      if(wbgt!=null){\r\n        grid[key] = wbgt;\r\n        seen[key] = true;\r\n      }\r\n    }\r\n  }\r\n\r\n  return {grid:grid, count:Object.keys(seen).length};\r\n}\r\n\r\nfunction dailyMaxFromGrid(grid){\r\n  var maxVal = null;\r\n\r\n  for(var h=0; h<24; h++){\r\n    var hh = pad(h);\r\n\r\n    for(var m5=0; m5<=55; m5+=5){\r\n      var key = hh+\":\"+pad(m5);\r\n      var v = grid[key];\r\n\r\n      if(v!=null && !isNaN(v)){\r\n        if(maxVal===null) maxVal = Number(v);\r\n        else if(v > maxVal) maxVal = Number(v);\r\n      }\r\n    }\r\n  }\r\n\r\n  return (maxVal===null) ? null : Number(maxVal);\r\n}\r\n\r\nfunction renderWBGTTable(container, daysData){\r\n  var meta = metricMeta();\r\n  var times = [];\r\n\r\n  for(var m=0; m<=55; m+=5){\r\n    times.push(pad(m));\r\n  }\r\n\r\n  var html = \"<thead><tr><th class='col-date'>Date<\/th><th class='col-time'>Time<\/th>\";\r\n\r\n  for(var t=0; t<times.length; t++){\r\n    html += \"<th class='col-min'>\"+times[t]+\"<\/th>\";\r\n  }\r\n\r\n  html += \"<th class='col-max'>WBGT (Max) \"+meta.unit+\"<\/th><\/tr><\/thead><tbody>\";\r\n\r\n  for(var d=0; d<daysData.length; d++){\r\n    var day = daysData[d];\r\n    var parts = day.date.split(\"-\");\r\n    var dateLabel = parts[2]+\"-\"+parts[1]+\"-\"+parts[0];\r\n    var grid = day.grid;\r\n\r\n    for(var h=0; h<24; h++){\r\n      var hh = pad(h);\r\n      var maxVal = null;\r\n\r\n      html += \"<tr><th class='date col-date'>\"+dateLabel+\"<\/th><th class='time col-time'>\"+hourLabel24(h)+\"<\/th>\";\r\n\r\n      for(var m5=0; m5<=55; m5+=5){\r\n        var key = hh+\":\"+pad(m5);\r\n        var val = grid[key];\r\n\r\n        if(val!=null){\r\n          if(maxVal===null) maxVal = Number(val);\r\n          else if(val > maxVal) maxVal = Number(val);\r\n        }\r\n\r\n        var cls = bandClassByWBGT(val);\r\n        html += \"<td class='col-min \"+cls+\"'>\"+(val==null ? \"\u2014\" : Number(val).toFixed(meta.decimals))+\"<\/td>\";\r\n      }\r\n\r\n      var maxCls = bandClassByWBGT(maxVal);\r\n      html += \"<td class='col-max \"+maxCls+\"'>\"+(maxVal==null ? \"\u2014\" : Number(maxVal).toFixed(meta.decimals))+\"<\/td><\/tr>\";\r\n    }\r\n  }\r\n\r\n  html += \"<\/tbody>\";\r\n  container.innerHTML = html;\r\n}\r\n\r\nvar chartInstance = null;\r\n\r\nfunction renderChart(labels, dailyMaxes){\r\n  var chartSection = document.getElementById(\"chartSection\");\r\n  var chartCanvas  = document.getElementById(\"wbgtChart\");\r\n  var meta = metricMeta();\r\n\r\n  chartSection.style.display = \"block\";\r\n\r\n  if(!labels || labels.length === 0){\r\n    labels = [\"No Data\"];\r\n    dailyMaxes = [null];\r\n  }\r\n\r\n  var ctx = chartCanvas.getContext(\"2d\");\r\n\r\n  var config = {\r\n    type: 'line',\r\n    data: {\r\n      labels: labels,\r\n      datasets: [\r\n        {\r\n          label:'WBGT-Heat Stress (' + meta.unit + ')',\r\n          data:dailyMaxes,\r\n          borderColor:'#0f172a',\r\n          backgroundColor:'#0f172a',\r\n          pointRadius:5,\r\n          pointHoverRadius:7,\r\n          borderWidth:3,\r\n          tension:.35,\r\n          spanGaps:true\r\n        },\r\n        {\r\n          label:'30\u00b0C Green Line',\r\n          data:labels.map(function(){ return meta.line30; }),\r\n          borderColor:'#16a34a',\r\n          borderDash:[6,6],\r\n          borderWidth:2,\r\n          pointRadius:0\r\n        },\r\n        {\r\n          label:'31\u00b0C Yellow Line',\r\n          data:labels.map(function(){ return meta.line31; }),\r\n          borderColor:'#f59e0b',\r\n          borderDash:[6,6],\r\n          borderWidth:2,\r\n          pointRadius:0\r\n        },\r\n        {\r\n          label:'33\u00b0C Red Line',\r\n          data:labels.map(function(){ return meta.line33; }),\r\n          borderColor:'#dc2626',\r\n          borderDash:[6,6],\r\n          borderWidth:2,\r\n          pointRadius:0\r\n        }\r\n      ]\r\n    },\r\n    options: {\r\n      responsive:true,\r\n      maintainAspectRatio:false,\r\n      animation:{\r\n        duration:900,\r\n        easing:'easeOutQuart'\r\n      },\r\n      plugins:{\r\n        legend:{\r\n          display:true,\r\n          position:'top',\r\n          labels:{\r\n            usePointStyle:true,\r\n            pointStyle:'line',\r\n            color:'#334155',\r\n            font:{family:'Poppins',size:12,weight:'700'}\r\n          }\r\n        },\r\n        tooltip:{\r\n          backgroundColor:'rgba(15,23,42,.95)',\r\n          titleColor:'#fff',\r\n          bodyColor:'#e2e8f0',\r\n          padding:12,\r\n          cornerRadius:10\r\n        }\r\n      },\r\n      scales:{\r\n        y:{\r\n          min:meta.yMin,\r\n          max:meta.yMax,\r\n          title:{\r\n            display:true,\r\n            text:'WBGT (' + meta.unit + ')',\r\n            color:'#475569',\r\n            font:{family:'Poppins',weight:'800'}\r\n          },\r\n          ticks:{\r\n            stepSize:1,\r\n            color:'#64748b'\r\n          },\r\n          grid:{\r\n            color:'rgba(148,163,184,.18)'\r\n          }\r\n        },\r\n        x:{\r\n          title:{\r\n            display:true,\r\n            text:'Date',\r\n            color:'#475569',\r\n            font:{family:'Poppins',weight:'800'}\r\n          },\r\n          ticks:{\r\n            autoSkip:false,\r\n            maxRotation:45,\r\n            minRotation:35,\r\n            color:'#64748b',\r\n            font:{size:10}\r\n          },\r\n          grid:{\r\n            color:'rgba(148,163,184,.12)'\r\n          }\r\n        }\r\n      }\r\n    }\r\n  };\r\n\r\n  if(chartInstance){\r\n    chartInstance.data = config.data;\r\n    chartInstance.options = config.options;\r\n    chartInstance.update();\r\n  }else{\r\n    chartInstance = new Chart(ctx, config);\r\n  }\r\n}\r\n\r\nfunction drawLegendPills(pdf, x, y){\r\n  var pillH = 8, gap = 4;\r\n\r\n  function pill(fillRgb, textColorRgb, left, right){\r\n    pdf.setFillColor.apply(pdf, fillRgb);\r\n    pdf.setTextColor.apply(pdf, textColorRgb);\r\n    pdf.roundedRect(x, y, 22, pillH, 4, 4, 'F');\r\n    pdf.setFont('helvetica','bold');\r\n    pdf.setFontSize(8.8);\r\n    pdf.text(left, x+3.5, y+5.5);\r\n\r\n    pdf.setTextColor(17,24,39);\r\n    pdf.setFont('helvetica','normal');\r\n    pdf.setFontSize(10);\r\n    pdf.text(right, x+26, y+5.8);\r\n    y += pillH + gap;\r\n  }\r\n\r\n  pill([22,163,74], [255,255,255], \"<31\", \"Low heat stress\");\r\n  pill([245,158,11], [17,24,39], \"31-32.9\", \"Moderate heat stress\");\r\n  pill([220,38,38], [255,255,255], \">=33\", \"High heat stress\");\r\n\r\n  return y;\r\n}\r\n\r\nvar frm, fromDateI, toDateI, btnDownload;\r\nvar reportWrap;\r\nvar metaProj, metaLabel, metaMetric, metaRange, metaCount, metaDays, metaUpdated;\r\nvar tableEl, pdfBlock;\r\nvar autoTimer = null;\r\n\r\nfunction runSearch(){\r\n  var from = fromDateI.value;\r\n  var to   = toDateI.value;\r\n\r\n  if(!from || !to) return;\r\n\r\n  if(from > to){\r\n    alert(\"From Date cannot be after To Date.\");\r\n    return;\r\n  }\r\n\r\n  var meta = metricMeta();\r\n\r\n  reportWrap.style.display = \"block\";\r\n\r\n  metaRange.textContent  = from+\" \u2192 \"+to;\r\n  metaLabel.textContent  = FIXED_LABEL;\r\n  metaMetric.textContent = meta.name + \" (\" + meta.unit + \")\";\r\n\r\n  var d   = new Date(from+\"T00:00:00\");\r\n  var end = new Date(to+\"T00:00:00\");\r\n\r\n  var daysData  = [];\r\n  var totalRecs = 0;\r\n  var labels    = [];\r\n  var dailyMaxes= [];\r\n  var latestApiTime = \"\u2014\";\r\n\r\n  function loopOneDay(){\r\n    if(d > end){\r\n      metaCount.textContent   = String(totalRecs);\r\n      metaDays.textContent    = String(daysData.length);\r\n      metaUpdated.textContent = latestApiTime !== \"\u2014\" ? latestApiTime : new Date().toLocaleString(\"en-SG\",{hour12:false});\r\n\r\n      renderWBGTTable(tableEl, daysData);\r\n      renderChart(labels, dailyMaxes);\r\n      return;\r\n    }\r\n\r\n    var ymdStr = ymdLocal(d);\r\n    var url = buildDailyUrl(ymdStr);\r\n\r\n    fetch(url, {cache:\"no-store\"})\r\n      .then(function(res){\r\n        if(!res.ok) throw new Error(\"HTTP \"+res.status);\r\n        return res.json();\r\n      })\r\n      .then(function(json){\r\n        var result = normalizeDailyWBGT(json);\r\n\r\n        daysData.push({\r\n          date:ymdStr,\r\n          grid:result.grid\r\n        });\r\n\r\n        totalRecs += result.count;\r\n        labels.push(labelFromYmd(ymdStr));\r\n\r\n        var mx = dailyMaxFromGrid(result.grid);\r\n        dailyMaxes.push(mx==null ? null : mx);\r\n\r\n        if(json && Array.isArray(json.readings) && json.readings.length){\r\n          var lastRow = json.readings[json.readings.length - 1];\r\n          latestApiTime = ymdStr + \" \" + (lastRow.time || \"00:00:00\");\r\n        }\r\n\r\n        d = addDays(d, 1);\r\n        loopOneDay();\r\n      })\r\n      .catch(function(err){\r\n        console.warn(\"Daily fetch failed:\", url, err);\r\n\r\n        daysData.push({\r\n          date:ymdStr,\r\n          grid:emptyDay()\r\n        });\r\n\r\n        labels.push(labelFromYmd(ymdStr));\r\n        dailyMaxes.push(null);\r\n\r\n        d = addDays(d, 1);\r\n        loopOneDay();\r\n      });\r\n  }\r\n\r\n  loopOneDay();\r\n}\r\n\r\nfunction initWBGTRecordPage(){\r\n  frm          = document.getElementById(\"filterForm\");\r\n  fromDateI    = document.getElementById(\"fromDate\");\r\n  toDateI      = document.getElementById(\"toDate\");\r\n  btnDownload  = document.getElementById(\"btnDownload\");\r\n  reportWrap   = document.getElementById(\"reportWrap\");\r\n\r\n  metaProj     = document.getElementById(\"metaProj\");\r\n  metaLabel    = document.getElementById(\"metaLabel\");\r\n  metaMetric   = document.getElementById(\"metaMetric\");\r\n  metaRange    = document.getElementById(\"metaRange\");\r\n  metaCount    = document.getElementById(\"metaCount\");\r\n  metaDays     = document.getElementById(\"metaDays\");\r\n  metaUpdated  = document.getElementById(\"metaUpdated\");\r\n\r\n  tableEl      = document.getElementById(\"wbgtTable\");\r\n  pdfBlock     = document.getElementById(\"pdfBlock\");\r\n\r\n  if(!frm || !fromDateI || !toDateI || !tableEl){\r\n    console.error(\"WBGT page required elements not found.\");\r\n    return;\r\n  }\r\n\r\n  metaProj.textContent = PROJECT_NAME;\r\n  metaLabel.textContent = FIXED_LABEL;\r\n\r\n  var t = ymdLocal(todayLocal());\r\n  fromDateI.value = t;\r\n  toDateI.value   = t;\r\n\r\n  frm.addEventListener(\"submit\", function(e){\r\n    e.preventDefault();\r\n    runSearch();\r\n\r\n    if(autoTimer) clearInterval(autoTimer);\r\n    autoTimer = setInterval(runSearch, 5*60*1000);\r\n  });\r\n\r\n  runSearch();\r\n\r\n  if(autoTimer) clearInterval(autoTimer);\r\n  autoTimer = setInterval(runSearch, 5*60*1000);\r\n\r\n  btnDownload.addEventListener(\"click\", async function(){\r\n    if(fromDateI.value > toDateI.value){\r\n      alert(\"From Date cannot be after To Date.\");\r\n      return;\r\n    }\r\n\r\n    var jsPDF = window.jspdf && window.jspdf.jsPDF;\r\n\r\n    if(!jsPDF){\r\n      alert(\"PDF library not loaded. Please refresh the page.\");\r\n      return;\r\n    }\r\n\r\n    btnDownload.disabled = true;\r\n    var oldTxt = btnDownload.textContent;\r\n    btnDownload.textContent = \"Preparing...\";\r\n\r\n    try{\r\n      var from = fromDateI.value;\r\n      var to   = toDateI.value;\r\n      var meta = metricMeta();\r\n\r\n      var pdf = new jsPDF(\"p\", \"mm\", \"a4\");\r\n      var pageW = pdf.internal.pageSize.getWidth();\r\n      var pageH = pdf.internal.pageSize.getHeight();\r\n      var margin = 10;\r\n      var y = 12;\r\n\r\n      pdf.setFont(\"helvetica\", \"bold\");\r\n      pdf.setFontSize(16);\r\n      pdf.setTextColor(11, 42, 90);\r\n      pdf.text(\"ENV AUTOMATION PTE LTD\", margin, y);\r\n\r\n      y += 6;\r\n      pdf.setFont(\"helvetica\", \"normal\");\r\n      pdf.setFontSize(9);\r\n      pdf.setTextColor(70, 82, 100);\r\n      pdf.text(\"60 Paya Lebar Road, #07-54 Paya Lebar Square, Singapore 409051\", margin, y);\r\n\r\n      y += 5;\r\n      pdf.text(\"Email: envautomation.com.sg@gmail.com | Website: www.autosiltstopper.com\", margin, y);\r\n\r\n      y += 8;\r\n      pdf.setDrawColor(220, 230, 240);\r\n      pdf.line(margin, y, pageW - margin, y);\r\n\r\n      y += 9;\r\n      pdf.setFont(\"helvetica\", \"bold\");\r\n      pdf.setFontSize(15);\r\n      pdf.setTextColor(15, 32, 51);\r\n      pdf.text(\"WBGT-HEAT STRESS RECORD\", margin, y);\r\n\r\n      y += 8;\r\n\r\n      var details = [\r\n        [\"Company Name\", \"KIMLY CONSTRUCTION PTE LTD\"],\r\n        [\"Project Name\", PROJECT_NAME],\r\n        [\"Label\", FIXED_LABEL],\r\n        [\"Metric\", meta.name + \" (\" + meta.unit + \")\"],\r\n        [\"From Date\", from],\r\n        [\"To Date\", to],\r\n        [\"Records\", metaCount.textContent || \"0\"],\r\n        [\"Days\", metaDays.textContent || \"0\"],\r\n        [\"Last Updated\", metaUpdated.textContent || \"-\"]\r\n      ];\r\n\r\n      for(var i = 0; i < details.length; i++){\r\n        if(y > pageH - 20){\r\n          pdf.addPage();\r\n          y = margin;\r\n        }\r\n\r\n        pdf.setFillColor(248, 250, 252);\r\n        pdf.rect(margin, y - 4, 48, 8, \"F\");\r\n\r\n        pdf.setFont(\"helvetica\", \"bold\");\r\n        pdf.setTextColor(30, 41, 59);\r\n        pdf.text(details[i][0] + \":\", margin + 2, y + 1.5);\r\n\r\n        pdf.setFont(\"helvetica\", \"normal\");\r\n        pdf.setTextColor(17, 24, 39);\r\n        pdf.text(String(details[i][1]), margin + 55, y + 1.5);\r\n\r\n        y += 8;\r\n      }\r\n\r\n      y += 5;\r\n      y = drawLegendPills(pdf, margin, y) + 4;\r\n\r\n      document.getElementById(\"chartSection\").style.display = \"block\";\r\n\r\n      if(chartInstance){\r\n        chartInstance.update();\r\n      }\r\n\r\n      await new Promise(function(resolve){\r\n        setTimeout(resolve, 300);\r\n      });\r\n\r\n      var chartCanvas = document.getElementById(\"wbgtChart\");\r\n\r\n      if(chartCanvas){\r\n        var chartImg = chartCanvas.toDataURL(\"image\/png\", 1.0);\r\n        var chartW = pageW - margin * 2;\r\n        var chartH = 70;\r\n\r\n        if(y + chartH > pageH - margin){\r\n          pdf.addPage();\r\n          y = margin;\r\n        }\r\n\r\n        pdf.addImage(chartImg, \"PNG\", margin, y, chartW, chartH);\r\n        y += chartH + 8;\r\n      }\r\n\r\n      var scroller = pdfBlock.querySelector(\".table-scroller\");\r\n\r\n      var oldOverflow = scroller.style.overflow;\r\n      var oldMaxH = scroller.style.maxHeight;\r\n\r\n      scroller.style.overflow = \"visible\";\r\n      scroller.style.maxHeight = \"none\";\r\n\r\n      await new Promise(function(resolve){\r\n        setTimeout(resolve, 250);\r\n      });\r\n\r\n      var tableCanvas = await html2canvas(pdfBlock, {\r\n        scale: 1.5,\r\n        backgroundColor: \"#ffffff\",\r\n        useCORS: true,\r\n        allowTaint: true,\r\n        scrollX: 0,\r\n        scrollY: 0,\r\n        windowWidth: pdfBlock.scrollWidth,\r\n        windowHeight: pdfBlock.scrollHeight\r\n      });\r\n\r\n      scroller.style.overflow = oldOverflow;\r\n      scroller.style.maxHeight = oldMaxH;\r\n\r\n      var imgW = pageW - margin * 2;\r\n      var imgH = tableCanvas.height * imgW \/ tableCanvas.width;\r\n\r\n      var availableH = pageH - y - margin;\r\n\r\n      if(imgH <= availableH){\r\n        var tableImg = tableCanvas.toDataURL(\"image\/png\", 1.0);\r\n        pdf.addImage(tableImg, \"PNG\", margin, y, imgW, imgH);\r\n      }else{\r\n        var pageCanvas = document.createElement(\"canvas\");\r\n        var pageCtx = pageCanvas.getContext(\"2d\");\r\n\r\n        var pxPerMm = tableCanvas.width \/ imgW;\r\n        var sourceY = 0;\r\n\r\n        while(sourceY < tableCanvas.height){\r\n          if(y > pageH - margin - 20){\r\n            pdf.addPage();\r\n            y = margin;\r\n          }\r\n\r\n          var pageSliceHeightMm = pageH - y - margin;\r\n          var sliceHeightPx = Math.floor(pageSliceHeightMm * pxPerMm);\r\n\r\n          if(sourceY + sliceHeightPx > tableCanvas.height){\r\n            sliceHeightPx = tableCanvas.height - sourceY;\r\n          }\r\n\r\n          pageCanvas.width = tableCanvas.width;\r\n          pageCanvas.height = sliceHeightPx;\r\n\r\n          pageCtx.fillStyle = \"#ffffff\";\r\n          pageCtx.fillRect(0, 0, pageCanvas.width, pageCanvas.height);\r\n\r\n          pageCtx.drawImage(\r\n            tableCanvas,\r\n            0,\r\n            sourceY,\r\n            tableCanvas.width,\r\n            sliceHeightPx,\r\n            0,\r\n            0,\r\n            tableCanvas.width,\r\n            sliceHeightPx\r\n          );\r\n\r\n          var sliceImg = pageCanvas.toDataURL(\"image\/png\", 1.0);\r\n          var sliceH = sliceHeightPx \/ pxPerMm;\r\n\r\n          pdf.addImage(sliceImg, \"PNG\", margin, y, imgW, sliceH);\r\n\r\n          sourceY += sliceHeightPx;\r\n\r\n          if(sourceY < tableCanvas.height){\r\n            pdf.addPage();\r\n            y = margin;\r\n          }\r\n        }\r\n      }\r\n\r\n      var filename = PROJECT_NAME.replace(\/\\s+\/g, \"_\") + \"_WBGT_HeatStress_\" + from + \"_to_\" + to + \".pdf\";\r\n      pdf.save(filename);\r\n\r\n    }catch(err){\r\n      console.error(\"PDF download error:\", err);\r\n      alert(\"PDF failed: \" + (err.message || err));\r\n    }finally{\r\n      btnDownload.disabled = false;\r\n      btnDownload.textContent = oldTxt;\r\n    }\r\n  });\r\n}\r\n\r\nif(document.readyState === \"loading\"){\r\n  document.addEventListener(\"DOMContentLoaded\", initWBGTRecordPage);\r\n}else{\r\n  initWBGTRecordPage();\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>EA KIMLY CONSTRUCTION PTE LTD PROJECT : KBGC3 Live Temperature From Date To Date Search Download PDF LOW HEAT STRESS [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1471","page","type-page","status-publish","hentry"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/envautomation.com\/index.php?rest_route=\/wp\/v2\/pages\/1471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/envautomation.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/envautomation.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/envautomation.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/envautomation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1471"}],"version-history":[{"count":5,"href":"https:\/\/envautomation.com\/index.php?rest_route=\/wp\/v2\/pages\/1471\/revisions"}],"predecessor-version":[{"id":1824,"href":"https:\/\/envautomation.com\/index.php?rest_route=\/wp\/v2\/pages\/1471\/revisions\/1824"}],"wp:attachment":[{"href":"https:\/\/envautomation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}