{"id":6025,"date":"2025-04-23T00:23:54","date_gmt":"2025-04-23T00:23:54","guid":{"rendered":"https:\/\/pipainn.com\/?page_id=6025"},"modified":"2026-01-03T23:32:14","modified_gmt":"2026-01-03T23:32:14","slug":"teste4","status":"publish","type":"page","link":"https:\/\/pipainn.com\/en\/tabua-de-mare","title":{"rendered":"T\u00e1bua de Mar\u00e9"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6025\" class=\"elementor elementor-6025\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f2eabaf e-flex e-con-boxed e-con e-parent\" data-id=\"f2eabaf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3447ac elementor-widget elementor-widget-html\" data-id=\"d3447ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"tabua-mares-resto\"><\/div>\n<div id=\"tabua-mares-botoes\"><\/div>\n\n<style>\n@media (min-width: 769px) {\n  .hora-mare {\n    font-size: 17px !important;\n    font-weight: bold !important;\n    transform: translateX(-55%) !important;\n  }\n  \/* desktop: +2px s\u00f3 na altura *\/\n  .hora-altura {\n    font-size: 15px !important;\n  }\n}\n@media (max-width: 768px) {\n  .mare-bloco {\n    margin: 0 -15px 20px -15px !important;\n  }\n  .hora-mare-baixa,\n  .hora-mare-alta {\n    top: -50px !important;\n  }\n  .hora-mare {\n    transform: translateX(-55%) !important;\n    font-size: 15px !important;\n    font-weight: bold !important;\n  }\n  .hora-altura {\n    font-size: 13px !important;\n  }\n  .mare-bloco div[style*=\"position: relative\"] {\n    display: flex;\n    align-items: flex-end;\n  }\n}\n\n\/* Bot\u00f5es centralizados *\/\n#tabua-mares-botoes {\n  max-width: 800px;\n  margin: 20px auto 0 auto;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 10px;\n}\n\n.mes-btn {\n  border: 1px solid #2a2b24;\n  background: #fff;\n  padding: 8px 14px;\n  border-radius: 999px;\n  cursor: pointer;\n  font-size: 15px;\n  font-weight: 600;\n  color: #2a2b24;\n}\n.mes-btn[aria-expanded=\"true\"] {\n  background: #f7f2ea;\n  border-color: #a88a61;\n}\n\n\/* T\u00edtulo do m\u00eas *\/\n.mes-titulo {\n  max-width: 800px;\n  margin: 28px auto 12px auto;\n  text-align: center;\n  font-size: 22px;\n  font-weight: 700;\n  color: #2a2b24;\n  letter-spacing: 0.5px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e9e3da;\n  text-transform: none;\n}\n<\/style>\n\n<script>\n(async function () {\n  try {\n    const URL = 'https:\/\/pipainn.com\/wp-content\/uploads\/2026\/01\/tabua-de-mare-pipa2026.json';\n    const res = await fetch(URL, { cache: 'no-store' });\n    const data = await res.json();\n\n    const mesesNomeToNum = {\n      \"JANEIRO\":\"01\",\"FEVEREIRO\":\"02\",\"MAR\u00c7O\":\"03\",\"ABRIL\":\"04\",\"MAIO\":\"05\",\n      \"JUNHO\":\"06\",\"JULHO\":\"07\",\"AGOSTO\":\"08\",\"SETEMBRO\":\"09\",\n      \"OUTUBRO\":\"10\",\"NOVEMBRO\":\"11\",\"DEZEMBRO\":\"12\"\n    };\n\n    const capMes = (nome) => nome.charAt(0) + nome.slice(1).toLowerCase();\n\n    const hoje = new Date();\n    hoje.setHours(0,0,0,0);\n\n    const entradas = Object.entries(data).map(([k, v]) => {\n      const [d, mesNome, a] = k.split('\/');\n      const mesNum = mesesNomeToNum[mesNome];\n      const date = new Date(`${a}-${mesNum}-${d}T12:00:00-03:00`);\n      return {\n        dia: Number(d),\n        mesNome,\n        mesNum,\n        ano: Number(a),\n        date,\n        mares: (v && v.mares) ? v.mares : []\n      };\n    }).sort((a,b) => a.date - b.date);\n\n    \/\/ Agrupar por m\u00eas (ano + mesNum) para manter ordem certa\n    const porMes = {};\n    entradas\n      .filter(e => e.date >= hoje)\n      .forEach(e => {\n        const key = `${e.ano}-${e.mesNum}-${e.mesNome}`;\n        porMes[key] ??= [];\n        porMes[key].push(e);\n      });\n\n    const resto = document.getElementById('tabua-mares-resto');\n    const botoes = document.getElementById('tabua-mares-botoes');\n\n    resto.innerHTML = '';\n    botoes.innerHTML = '';\n\n    function renderDia(e) {\n      const diaSemana = e.date.toLocaleDateString('pt-BR', { weekday:'long' });\n\n      let maresHTML = '';\n      e.mares.forEach((m, i) => {\n        const alt = parseFloat(String(m.altura).replace('m','').replace(',','.'));\n        const tipo = alt <= 1.2 ? 'baixa' : 'alta';\n        const img = tipo === 'alta'\n          ? 'https:\/\/pipainn.com\/wp-content\/uploads\/2025\/04\/MareAlta.png'\n          : 'https:\/\/pipainn.com\/wp-content\/uploads\/2025\/04\/MareBaixa.png';\n\n        const largura = (tipo === 'alta') ? '33.33%' : '16.67%';\n        const margem = i === 0 ? '' : 'margin-left: -1px;';\n        const seta = (tipo === 'alta') ? '\u2191' : '\u2193';\n        const classeHoraExtra = (tipo === 'baixa') ? 'hora-mare-baixa' : 'hora-mare-alta';\n\n        maresHTML += `\n          <div style=\"width:${largura}; position:relative; ${margem}\">\n            <div class=\"hora-mare ${classeHoraExtra}\" style=\"position:absolute; top:-50px; left:50%; transform:translateX(-50%); color:#ba9d75;\">\n              ${seta}${m.hora}\n            <\/div>\n            <div class=\"hora-altura\" style=\"position:absolute; bottom:-25px; left:50%; transform:translateX(-50%); color:#2a2b24;\">\n              ${m.altura}\n            <\/div>\n            <img decoding=\"async\" src=\"${img}\" style=\"width:100%\" alt=\"Mar\u00e9 ${tipo}\">\n          <\/div>\n        `;\n      });\n\n      return `\n        <div class=\"mare-bloco\" style=\"max-width:800px; margin:auto; padding:20px 20px 45px; background:#fff; border-radius:16px; box-shadow:0 4px 16px rgba(0,0,0,.1); margin-bottom:20px;\">\n          <h2 style=\"font-size:20px; color:#2a2b24; margin-bottom:80px; text-align:center;\">\n            ${diaSemana.charAt(0).toUpperCase()+diaSemana.slice(1)}, ${String(e.dia).padStart(2,'0')} de ${e.mesNome.toLowerCase()}\n          <\/h2>\n          <div style=\"display:flex; justify-content:center; align-items:flex-end;\">\n            ${maresHTML}\n          <\/div>\n        <\/div>\n      `;\n    }\n\n    const mesKeys = Object.keys(porMes).sort((ka, kb) => {\n      const [a1,m1] = ka.split('-');\n      const [a2,m2] = kb.split('-');\n      return new Date(Number(a1), Number(m1)-1, 1) - new Date(Number(a2), Number(m2)-1, 1);\n    });\n\n    if (!mesKeys.length) {\n      resto.innerHTML = '<p style=\"text-align:center; color:#2a2b24;\">Nenhuma informa\u00e7\u00e3o dispon\u00edvel.<\/p>';\n      return;\n    }\n\n    \/\/ M\u00eas atual (primeiro key)\n    const keyAtual = mesKeys[0];\n    const mesNomeAtual = keyAtual.split('-')[2];\n\n    resto.insertAdjacentHTML('beforeend', `<div class=\"mes-titulo\">${capMes(mesNomeAtual)}<\/div>`);\n    resto.insertAdjacentHTML('beforeend', porMes[keyAtual].map(renderDia).join(''));\n\n    \/\/ Bot\u00f5es dos pr\u00f3ximos meses\n    mesKeys.slice(1).forEach((key) => {\n      const mesNome = key.split('-')[2];\n\n      const btn = document.createElement('button');\n      btn.className = 'mes-btn';\n      btn.type = 'button';\n      btn.setAttribute('aria-expanded', 'false');\n      btn.textContent = 'Ver ' + capMes(mesNome);\n\n      btn.addEventListener('click', () => {\n        const aberto = btn.getAttribute('aria-expanded') === 'true';\n\n        if (aberto) {\n          btn.setAttribute('aria-expanded', 'false');\n          btn.textContent = 'Ver ' + capMes(mesNome);\n          const existente = resto.querySelector(`[data-mes=\"${key}\"]`);\n          if (existente) existente.remove();\n        } else {\n          btn.setAttribute('aria-expanded', 'true');\n          btn.textContent = 'Ocultar ' + capMes(mesNome);\n\n          const wrap = document.createElement('div');\n          wrap.setAttribute('data-mes', key);\n          wrap.innerHTML =\n            `<div class=\"mes-titulo\">${capMes(mesNome)}<\/div>` +\n            porMes[key].map(renderDia).join('');\n\n          resto.appendChild(wrap);\n\n          setTimeout(() => {\n            const y = wrap.querySelector('.mes-titulo').getBoundingClientRect().top + window.pageYOffset - 10;\n            window.scrollTo({ top: y, behavior: 'smooth' });\n          }, 30);\n        }\n      });\n\n      botoes.appendChild(btn);\n    });\n\n  } catch (e) {\n    const resto = document.getElementById('tabua-mares-resto');\n    if (resto) {\n      resto.innerHTML = '<p style=\"text-align:center; color:#2a2b24;\">Erro ao carregar a t\u00e1bua de mar\u00e9.<\/p>';\n    }\n    console.error(e);\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\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":"","protected":false},"author":1,"featured_media":3905,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"cozystay_single_page_hide_site_header":"","cozystay_single_page_site_header_source":"custom","cozystay_single_page_custom_site_header":"","cozystay_single_page_custom_sticky_site_header":"","cozystay_single_page_hide_page_title":"","cozystay_single_page_header_section_size":"","cozystay_single_page_header_background_color":"","cozystay_single_page_header_background_position_x":"center","cozystay_single_page_header_background_position_y":"center","cozystay_single_page_header_background_size":"cover","cozystay_single_page_header_background_repeat":"off","cozystay_single_page_header_background_scroll":"on","cozystay_single_page_header_text_color":"","cozystay_single_page_header_show_breadcrumb":"","cozystay_single_page_site_footer_hide_main":"","cozystay_single_custom_site_footer_main_source":"","cozystay_single_custom_site_footer_main":"","cozystay_single_page_site_footer_hide_above":"","cozystay_single_custom_site_footer_above_source":"","cozystay_single_custom_site_footer_above":"","cozystay_single_page_site_footer_hide_instagram":"","cozystay_single_page_site_footer_hide_bottom":"","cozystay_single_custom_mobile_menu_source":"","cozystay_single_custom_mobile_menu":"","cozystay_single_custom_mobile_menu_animation":"","cozystay_single_custom_mobile_menu_width":"","cozystay_single_custom_mobile_menu_custom_width":375,"footnotes":""},"class_list":["post-6025","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pipainn.com\/en\/wp-json\/wp\/v2\/pages\/6025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pipainn.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pipainn.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pipainn.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pipainn.com\/en\/wp-json\/wp\/v2\/comments?post=6025"}],"version-history":[{"count":163,"href":"https:\/\/pipainn.com\/en\/wp-json\/wp\/v2\/pages\/6025\/revisions"}],"predecessor-version":[{"id":6572,"href":"https:\/\/pipainn.com\/en\/wp-json\/wp\/v2\/pages\/6025\/revisions\/6572"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pipainn.com\/en\/wp-json\/wp\/v2\/media\/3905"}],"wp:attachment":[{"href":"https:\/\/pipainn.com\/en\/wp-json\/wp\/v2\/media?parent=6025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}