{"id":7295,"date":"2026-04-09T18:09:00","date_gmt":"2026-04-09T21:09:00","guid":{"rendered":"https:\/\/saudecajati.com.br\/?page_id=7295"},"modified":"2026-04-17T16:58:27","modified_gmt":"2026-04-17T19:58:27","slug":"registro-de-ponto","status":"publish","type":"page","link":"https:\/\/saudecajati.com.br\/index.php\/registro-de-ponto\/","title":{"rendered":"Registro de Ponto"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7295\" class=\"elementor elementor-7295\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5a85fc e-flex e-con-boxed e-con e-parent\" data-id=\"c5a85fc\" 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-fe9b81a elementor-align-center elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-invisible elementor-widget elementor-widget-icon-list\" data-id=\"fe9b81a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;slideInDown&quot;}\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Registro de Ponto<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\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<div class=\"elementor-element elementor-element-7bffa37 e-flex e-con-boxed e-con e-parent\" data-id=\"7bffa37\" 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-f3d0bc4 elementor-widget elementor-widget-html\" data-id=\"f3d0bc4\" 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=\"ponto-app-container\" class=\"ponto-wrapper\">\r\n    \r\n    <div class=\"ponto-header\">\r\n        <div class=\"ponto-status-card\">\r\n            <div id=\"ponto-relogio\" class=\"ponto-clock\">00:00:00<\/div>\r\n        <\/div>\r\n        <div class=\"ponto-date-container\">\r\n            <label for=\"data-seletor\">Data da Exporta\u00e7\u00e3o:<\/label>\r\n            <input type=\"date\" id=\"data-seletor\" class=\"ponto-date-input\">\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ponto-colagem-area\">\r\n        <label for=\"input-colagem\">Importa\u00e7\u00e3o R\u00e1pida (Cole aqui):<\/label>\r\n        <input type=\"text\" id=\"input-colagem\" placeholder=\"Ex: 08:3311:5513:05\" oninput=\"processarColagem(this)\">\r\n    <\/div>\r\n\r\n    <div class=\"ponto-grid\">\r\n        <div class=\"ponto-box\" id=\"box-entrada\">\r\n            <span class=\"ponto-box-title\">Entrada<\/span>\r\n            <div class=\"ponto-box-controls\">\r\n                <input type=\"time\" id=\"time-entrada\" class=\"ponto-time-input\" onchange=\"entradaManual('entrada')\">\r\n                <button onclick=\"registrarAgora('entrada')\" class=\"ponto-btn-toque\">\u23f1\ufe0f Toque<\/button>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"ponto-box\" id=\"box-saida-almoco\">\r\n            <span class=\"ponto-box-title\">Sa\u00edda Almo\u00e7o<\/span>\r\n            <div class=\"ponto-box-controls\">\r\n                <input type=\"time\" id=\"time-saida-almoco\" class=\"ponto-time-input\" onchange=\"entradaManual('saida-almoco')\">\r\n                <button onclick=\"registrarAgora('saida-almoco')\" class=\"ponto-btn-toque\">\u23f1\ufe0f Toque<\/button>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"ponto-box\" id=\"box-retorno-almoco\">\r\n            <span class=\"ponto-box-title\">Retorno Almo\u00e7o<\/span>\r\n            <div class=\"ponto-box-controls\">\r\n                <input type=\"time\" id=\"time-retorno-almoco\" class=\"ponto-time-input\" onchange=\"entradaManual('retorno-almoco')\">\r\n                <button onclick=\"registrarAgora('retorno-almoco')\" class=\"ponto-btn-toque\">\u23f1\ufe0f Toque<\/button>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"ponto-box\" id=\"box-saida-trabalho\">\r\n            <span class=\"ponto-box-title\">Sa\u00edda<\/span>\r\n            <div class=\"ponto-box-controls\">\r\n                <input type=\"time\" id=\"time-saida-trabalho\" class=\"ponto-time-input\" onchange=\"entradaManual('saida-trabalho')\">\r\n                <button onclick=\"registrarAgora('saida-trabalho')\" class=\"ponto-btn-toque\">\u23f1\ufe0f Toque<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"previsao-container\" class=\"ponto-previsao\" style=\"display: none;\">\r\n        <div id=\"texto-previsao\" class=\"previsao-hora\"><\/div>\r\n        <div id=\"texto-falta\" class=\"previsao-falta\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ponto-actions\">\r\n        <button onclick=\"exportarRelatorio()\" class=\"ponto-btn-export\">\r\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 5px;\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line><\/svg>\r\n            Exportar Relat\u00f3rio\r\n        <\/button>\r\n    <\/div>\r\n\r\n    <div id=\"ponto-log\" class=\"ponto-msg\">Esta calculadora n\u00e3o salva dados. Atualizar a p\u00e1gina limpar\u00e1 os hor\u00e1rios.<\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .ponto-wrapper {\r\n        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;\r\n        max-width: 800px !important;\r\n        margin: 20px auto !important;\r\n        padding: 25px !important;\r\n        background: #ffffff !important;\r\n        border: 1px solid #e0e0e0 !important;\r\n        border-radius: 16px !important;\r\n        box-sizing: border-box !important;\r\n        color: #4a4a4a !important;\r\n        box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;\r\n    }\r\n\r\n    .ponto-header {\r\n        display: flex !important;\r\n        justify-content: space-between !important;\r\n        align-items: center !important;\r\n        margin-bottom: 20px !important;\r\n        gap: 15px !important;\r\n    }\r\n\r\n    .ponto-status-card {\r\n        background: #f8fdfd !important;\r\n        border: 2px solid #00A09A !important;\r\n        border-radius: 12px !important;\r\n        padding: 10px 20px !important;\r\n        text-align: center !important;\r\n        flex-grow: 1 !important;\r\n    }\r\n\r\n    .ponto-clock {\r\n        font-size: 32px !important;\r\n        font-weight: 800 !important;\r\n        color: #00A09A !important;\r\n        letter-spacing: 2px !important;\r\n    }\r\n\r\n    .ponto-colagem-area {\r\n        margin-bottom: 20px !important;\r\n        background: #f9f9f9 !important;\r\n        padding: 12px !important;\r\n        border-radius: 8px !important;\r\n        border: 1px dashed #00A09A !important;\r\n    }\r\n\r\n    .ponto-colagem-area label {\r\n        display: block !important;\r\n        font-size: 12px !important;\r\n        font-weight: 700 !important;\r\n        color: #00A09A !important;\r\n        margin-bottom: 5px !important;\r\n    }\r\n\r\n    .ponto-colagem-area input {\r\n        width: 100% !important;\r\n        padding: 8px !important;\r\n        border: 1px solid #ddd !important;\r\n        border-radius: 4px !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n\r\n    .ponto-grid {\r\n        display: grid !important;\r\n        grid-template-columns: repeat(4, 1fr) !important;\r\n        gap: 15px !important;\r\n        margin-bottom: 20px !important;\r\n    }\r\n\r\n    .ponto-box {\r\n        background: #fafafa !important;\r\n        border: 2px solid #eeeeee !important;\r\n        border-radius: 10px !important;\r\n        padding: 12px !important;\r\n        display: flex !important;\r\n        flex-direction: column !important;\r\n        align-items: center !important;\r\n        gap: 10px !important;\r\n        transition: all 0.2s ease !important;\r\n    }\r\n\r\n    .ponto-box.active {\r\n        border-color: #00A09A !important;\r\n        background: #f0fafa !important;\r\n    }\r\n\r\n    .ponto-time-input {\r\n        width: 100% !important;\r\n        padding: 8px !important;\r\n        border: 1px solid #ddd !important;\r\n        border-radius: 6px !important;\r\n        font-size: 16px !important;\r\n        font-weight: 600 !important;\r\n        text-align: center !important;\r\n    }\r\n\r\n    \/* ESTILO CORRIGIDO PARA O BOT\u00c3O DO WORDPRESS *\/\r\n    .ponto-btn-toque {\r\n        width: 100% !important;\r\n        background: #00A09A !important;\r\n        color: white !important;\r\n        border: none !important;\r\n        padding: 6px 4px !important;\r\n        border-radius: 6px !important;\r\n        cursor: pointer !important;\r\n        font-weight: 600 !important;\r\n        font-size: 13px !important;\r\n        line-height: 1.2 !important;\r\n        margin: 0 !important;\r\n        box-sizing: border-box !important;\r\n        min-height: unset !important;\r\n        display: block !important;\r\n        white-space: nowrap !important;\r\n    }\r\n\r\n    .ponto-previsao {\r\n        background: #f0fafa !important;\r\n        border-left: 4px solid #00A09A !important;\r\n        padding: 15px !important;\r\n        border-radius: 6px !important;\r\n        margin-bottom: 20px !important;\r\n        text-align: center !important;\r\n    }\r\n\r\n    .previsao-hora strong { color: #00A09A; font-size: 18px; }\r\n\r\n    .ponto-btn-export {\r\n        width: 100% !important;\r\n        background: #ffffff !important;\r\n        color: #00A09A !important;\r\n        border: 2px solid #00A09A !important;\r\n        padding: 12px !important;\r\n        border-radius: 8px !important;\r\n        font-weight: 700 !important;\r\n        cursor: pointer !important;\r\n        display: flex !important;\r\n        justify-content: center !important;\r\n        align-items: center !important;\r\n    }\r\n\r\n    .ponto-btn-export:hover { background: #00A09A !important; color: white !important; }\r\n\r\n    @media (max-width: 650px) {\r\n        .ponto-grid { grid-template-columns: 1fr 1fr !important; }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\n    function getHojeFormatado() {\r\n        const tzoffset = (new Date()).getTimezoneOffset() * 60000;\r\n        return (new Date(Date.now() - tzoffset)).toISOString().slice(0, 10);\r\n    }\r\n\r\n    function inicializarApp() {\r\n        document.getElementById('data-seletor').value = getHojeFormatado();\r\n        setInterval(atualizarRelogio, 1000);\r\n        atualizarRelogio();\r\n    }\r\n\r\n    function atualizarRelogio() {\r\n        const agora = new Date();\r\n        const h = String(agora.getHours()).padStart(2, '0');\r\n        const m = String(agora.getMinutes()).padStart(2, '0');\r\n        const s = String(agora.getSeconds()).padStart(2, '0');\r\n        document.getElementById('ponto-relogio').textContent = `${h}:${m}:${s}`;\r\n        calcularPrevisao();\r\n    }\r\n\r\n    function processarColagem(el) {\r\n        const valor = el.value;\r\n        \/\/ Regex que identifica o formato 00:00 ou 0000\r\n        const horarios = valor.match(\/\\d{2}:?\\d{2}\/g);\r\n\r\n        if (horarios && horarios.length >= 1) {\r\n            const ids = ['entrada', 'saida-almoco', 'retorno-almoco', 'saida-trabalho'];\r\n            \r\n            horarios.forEach((hora, index) => {\r\n                if (index < ids.length) {\r\n                    let hf = hora.includes(':') ? hora : hora.slice(0, 2) + ':' + hora.slice(2);\r\n                    document.getElementById(`time-${ids[index]}`).value = hf;\r\n                    verificarAtivo(ids[index]);\r\n                }\r\n            });\r\n\r\n            el.value = ''; \/\/ Limpa o campo de colagem\r\n            calcularPrevisao();\r\n            \r\n            \/\/ Foca no campo de sa\u00edda final se colou 3 hor\u00e1rios\r\n            if (horarios.length === 3) {\r\n                document.getElementById('time-saida-trabalho').focus();\r\n            }\r\n        }\r\n    }\r\n\r\n    function registrarAgora(tipo) {\r\n        const agora = new Date();\r\n        const horaFormatada = String(agora.getHours()).padStart(2, '0') + \":\" + String(agora.getMinutes()).padStart(2, '0');\r\n        document.getElementById(`time-${tipo}`).value = horaFormatada;\r\n        verificarAtivo(tipo);\r\n        calcularPrevisao();\r\n    }\r\n\r\n    function entradaManual(tipo) {\r\n        verificarAtivo(tipo);\r\n        calcularPrevisao();\r\n    }\r\n\r\n    function verificarAtivo(tipo) {\r\n        const input = document.getElementById(`time-${tipo}`);\r\n        const box = document.getElementById(`box-${tipo}`);\r\n        input.value ? box.classList.add('active') : box.classList.remove('active');\r\n    }\r\n\r\n    function converterParaMinutos(horaString) {\r\n        const [h, m] = horaString.split(':').map(Number);\r\n        return (h * 60) + m;\r\n    }\r\n\r\n    function formatarMinutosParaHora(totalMinutos) {\r\n        let minFechados = totalMinutos % 1440;\r\n        const h = Math.floor(minFechados \/ 60);\r\n        const m = minFechados % 60;\r\n        return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;\r\n    }\r\n\r\n    function calcularPrevisao() {\r\n        const v1 = document.getElementById('time-entrada').value;\r\n        const v2 = document.getElementById('time-saida-almoco').value;\r\n        const v3 = document.getElementById('time-retorno-almoco').value;\r\n        const v4 = document.getElementById('time-saida-trabalho').value;\r\n\r\n        const container = document.getElementById('previsao-container');\r\n        const tPrev = document.getElementById('texto-previsao');\r\n        const tFalta = document.getElementById('texto-falta');\r\n\r\n        if (v1 && v2 && v3) {\r\n            const m1 = converterParaMinutos(v1);\r\n            const m2 = converterParaMinutos(v2);\r\n            const m3 = converterParaMinutos(v3);\r\n\r\n            const trabManha = m2 - m1;\r\n            const saidaIdealMin = m3 + (480 - trabManha);\r\n            const horaSaidaIdeal = formatarMinutosParaHora(saidaIdealMin);\r\n\r\n            if (v4) {\r\n                tPrev.innerHTML = `Expediente conclu\u00eddo.`;\r\n                tFalta.textContent = `A sa\u00edda ideal era \u00e0s ${horaSaidaIdeal}`;\r\n            } else {\r\n                const agora = new Date();\r\n                const mAgora = (agora.getHours() * 60) + agora.getMinutes();\r\n                const resta = saidaIdealMin - mAgora;\r\n\r\n                tPrev.innerHTML = `Para fechar 8h, saia \u00e0s: <strong>${horaSaidaIdeal}<\/strong>`;\r\n                if (resta > 0) {\r\n                    tFalta.textContent = `Faltam ${Math.floor(resta\/60)}h ${resta%60}m`;\r\n                    tFalta.style.color = '#00A09A';\r\n                } else {\r\n                    tFalta.textContent = `Jornada conclu\u00edda!`;\r\n                    tFalta.style.color = '#e67e22';\r\n                }\r\n            }\r\n            container.style.display = 'block';\r\n        } else {\r\n            container.style.display = 'none';\r\n        }\r\n    }\r\n\r\n    function exportarRelatorio() {\r\n        const data = document.getElementById('data-seletor').value.split('-').reverse().join('\/');\r\n        const v = id => document.getElementById(`time-${id}`).value || '--:--';\r\n        \r\n        let c = `RELAT\u00d3RIO DE PONTO\\nData: ${data}\\n--------------------------\\n`;\r\n        c += `Entrada: ${v('entrada')}\\nSa\u00edda Almo\u00e7o: ${v('saida-almoco')}\\nRetorno Almo\u00e7o: ${v('retorno-almoco')}\\nSa\u00edda: ${v('saida-trabalho')}`;\r\n\r\n        const blob = new Blob([c], { type: 'text\/plain' });\r\n        const a = document.createElement('a');\r\n        a.href = URL.createObjectURL(blob);\r\n        a.download = `ponto_${data.replace(\/\\\/\/g, '-')}.txt`;\r\n        a.click();\r\n    }\r\n\r\n    document.addEventListener(\"DOMContentLoaded\", inicializarApp);\r\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":"<p>Registro de Ponto 00:00:00 Data da Exporta\u00e7\u00e3o: Importa\u00e7\u00e3o R\u00e1pida (Cole aqui): Entrada \u23f1\ufe0f Toque Sa\u00edda Almo\u00e7o \u23f1\ufe0f Toque Retorno Almo\u00e7o \u23f1\ufe0f Toque Sa\u00edda \u23f1\ufe0f Toque Exportar Relat\u00f3rio Esta calculadora n\u00e3o salva dados. Atualizar a p\u00e1gina limpar\u00e1 os hor\u00e1rios.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-7295","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/saudecajati.com.br\/index.php\/wp-json\/wp\/v2\/pages\/7295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saudecajati.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saudecajati.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saudecajati.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/saudecajati.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=7295"}],"version-history":[{"count":44,"href":"https:\/\/saudecajati.com.br\/index.php\/wp-json\/wp\/v2\/pages\/7295\/revisions"}],"predecessor-version":[{"id":7722,"href":"https:\/\/saudecajati.com.br\/index.php\/wp-json\/wp\/v2\/pages\/7295\/revisions\/7722"}],"wp:attachment":[{"href":"https:\/\/saudecajati.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=7295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}