{"id":31,"date":"2026-10-03T06:43:44","date_gmt":"2026-10-03T09:43:44","guid":{"rendered":"https:\/\/wpcode.site\/?page_id=31"},"modified":"2026-10-03T06:44:26","modified_gmt":"2026-10-03T09:44:26","slug":"cadastro-de-usuarios","status":"publish","type":"page","link":"https:\/\/wpcode.site\/?page_id=31","title":{"rendered":"Registro de Usu\u00e1rios"},"content":{"rendered":"    <style>\n        #wp_registro_container { max-width: 550px; margin: 40px auto; padding: 14px; background: #fff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); font-family: sans-serif; }\n        .wp-reg-header { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #f0f0f0; padding-bottom: 15px; }\n        .wp-reg-header h3 { margin: 0; color: #0073aa; font-size: 24px; }\n        .wp-reg-section-title { font-size: 16px; font-weight: 700; margin: 25px 0 15px; color: #555; display: flex; align-items: center; }\n        .wp-reg-section-title::after { content: \"\"; flex: 1; height: 1px; background: #eee; margin-left: 15px; }\n        .wp-reg-field { margin-bottom: 18px; }\n        .wp-reg-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }\n        .wp-reg-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; }\n        .camera-card { background: #1a1a1a; border-radius: 12px; padding: 20px; text-align: center; color: #fff; }\n        .video-preview-wrapper { background: #000; border-radius: 10px; overflow: hidden; margin-bottom: 15px; }\n        #webcam_preview { width: 100%; height: auto; }\n        .doc-grid { display: flex; gap: 15px; margin-bottom: 20px; }\n        .doc-item { flex: 1; text-align:center; }\n        .doc-btn { background: #f8f9fa; border: 1px solid #dee2e6; padding: 10px; width: 100%; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 12px; }\n        .doc-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n        .doc-preview { width: 100%; height: 120px; background: #f1f3f5; margin-top: 10px; border-radius: 8px; object-fit: cover; border: 2px dashed #ccc; }\n        .btn-main { background: #0073aa; color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: 600; }\n        .btn-submit { width: 100%; background: #28a745; color: white; border: none; padding: 16px; border-radius: 10px; font-size: 18px; font-weight: 700; cursor: pointer; margin-top: 25px; transition: 0.3s; }\n        #progress_container { height: 8px; background: #333; border-radius: 4px; margin-top: 10px; display: none; overflow: hidden; }\n        #progress_bar { height: 100%; background: #00ff00; width: 0%; transition: width 0.1s linear; }\n        #doc_camera_modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 99999; flex-direction: column; align-items: center; justify-content: center; }\n        #doc_camera_stream { width: 100%; height: 100%; object-fit: cover; }\n        .camera-overlay { position: absolute; border: 2px solid rgba(255,255,255,0.5); width: 85%; height: 50%; border-radius: 20px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.6); pointer-events: none; }\n        .shutter-btn { position: absolute; bottom: 40px; width: 70px; height: 70px; background: white; border-radius: 50%; border: 5px solid #ccc; cursor: pointer; }\n        .close-camera { position: absolute; top: 20px; right: 20px; color: white; font-size: 35px; background: none; border: none; cursor: pointer; }\n        .no-camera-msg { color: #dc3545; font-size: 12px; font-weight: bold; margin-top: 5px; display: none; }\n    <\/style>\n\n    <div id=\"loading_modal\" style=\"display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 999999; flex-direction: column; align-items: center; justify-content: center; color: white; text-align: center; font-family: sans-serif;\">\n        <div style=\"background: #222; padding: 40px 30px; border-radius: 12px; width: 85%; max-width: 450px; box-shadow: 0 0 30px rgba(0,0,0,0.7);\">\n            <h3 style=\"color: #ffc107; margin-top: 0; font-size: 24px;\">N\u00e3o feche essa p\u00e1gina!<\/h3>\n            <p style=\"font-size: 16px; margin-bottom: 25px; color: #ddd;\">Seu cadastro est\u00e1 sendo completado...<\/p>\n            <div style=\"width: 100%; background: #444; height: 25px; border-radius: 12px; overflow: hidden; margin-bottom: 15px;\">\n                <div id=\"loading_progress\" style=\"height: 100%; background: #28a745; width: 0%; transition: width 0.3s linear;\"><\/div>\n            <\/div>\n            <div id=\"loading_text_pct\" style=\"font-size: 28px; font-weight: bold; color: #fff;\">0%<\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"wp_registro_container\">\n        <div class=\"wp-reg-header\">\n            <h3 style=\"font-size: 18px; font-weight: 800 !important; color: red;\">CRIA\u00c7\u00c3O DE CONTA<\/h3>\n            <p style=\"font-size: 13px; color: #354f52;\">AVISO IMPORTANTE: Todas as informa\u00e7\u00f5es solicitadas no cadastro s\u00e3o mantidas em total sigilo absoluto, e jamais ser\u00e3o exibidas publicamente no site em hip\u00f3tese alguma.<\/p>\n        <\/div>\n        <form id=\"wp_registro_form\" method=\"post\" onsubmit=\"return validateFormSubmit();\">\n            <input type=\"hidden\" name=\"wp_registro_submit_flag\" value=\"1\">\n\n            <div class=\"wp-reg-section-title\">INICIE SEU CADASTRO<\/div>\n            <div class=\"wp-reg-field\">\n                <label style=\"color: red;\">1\u00ba Insira seu Nome<\/label>\n                <input type=\"text\" name=\"reg_fullname\" class=\"wp-reg-input\" required>\n            <\/div>\n            <br>\n            <div class=\"wp-reg-field\">\n                <label style=\"color: red;\">2\u00ba Digite seu CPF de Login<\/label>\n                <input type=\"text\" name=\"reg_cpf\" id=\"reg_cpf\" class=\"wp-reg-input\" maxlength=\"14\" required>\n            <\/div>          \n            <br>\n            <div class=\"wp-reg-field\">\n                <label style=\"color: red;\">3\u00ba Insira seu E-mail<\/label>\n                <input type=\"email\" name=\"reg_email\" class=\"wp-reg-input\" required>\n            <\/div>            \n            <br>\n            <div class=\"wp-reg-field\">\n                <label style=\"color: red;\">4\u00ba N\u00famero de Whatsapp<\/label>\n                <input type=\"text\" name=\"reg_phone\" id=\"reg_phone\" class=\"wp-reg-input\" maxlength=\"15\" required>\n            <\/div>\n            <br>\n            <div class=\"wp-reg-field\">\n                <label style=\"color: red;\">5\u00ba Crie sua Senha<\/label>\n                <input type=\"text\" name=\"reg_password\" id=\"reg_password\" class=\"wp-reg-input\" minlength=\"4\" required>\n            <\/div>\n            <br>\n            <div class=\"wp-reg-field\">\n                <label style=\"color: red;\">6\u00ba Confirme a Senha<\/label>\n                <input type=\"text\" name=\"reg_password_confirm\" id=\"reg_password_confirm\" class=\"wp-reg-input\" minlength=\"4\" required>\n                <small id=\"pass_msg\"><\/small>\n            <\/div>\n            <br>\n                        <div class=\"wp-reg-section-title\" style=\"font-size: 15px; color: #1b263b; font-weight: 700; text-align: center;\">\n                7\u00ba Envie a foto do seu Documento RG ou CNH para comprovar que \u00e9 maior de idade\n            <\/div>\n            <div id=\"camera_check_msg\" class=\"no-camera-msg\">\u26a0\ufe0f Aten\u00e7\u00e3o: Este dispositivo n\u00e3o possui uma C\u00e2mera detectada. para criar sua conta e publicar seu an\u00fancio utilize seu aparelho celular para concluir o cadastro<\/div>\n            \n            <div class=\"doc-grid\">\n                <div class=\"doc-item\">\n                    <button type=\"button\" class=\"doc-btn doc-cam-trigger\" onclick=\"openDocCamera('front')\">\ud83d\udcf8 Frente do Doc<\/button>\n                    <img id=\"preview_doc_front\" class=\"doc-preview\">\n                    <input type=\"hidden\" name=\"doc_front_base64\" id=\"doc_front_base64\" required>\n                <\/div>\n                <div class=\"doc-item\">\n                    <button type=\"button\" class=\"doc-btn doc-cam-trigger\" onclick=\"openDocCamera('back')\">\ud83d\udcf8 Verso do Doc<\/button>\n                    <img id=\"preview_doc_back\" class=\"doc-preview\">\n                    <input type=\"hidden\" name=\"doc_back_base64\" id=\"doc_back_base64\" required>\n                <\/div>\n            <\/div>\n            \n                       <div class=\"wp-reg-section-title\" style=\"font-size: 17px; color: red; font-weight: 700;\">\n                8\u00ba V\u00cdDEO DE VERIFICA\u00c7\u00c3O \u25b6\n            <\/div>\n            <p style=\"font-size: 13px; color: #2f3e46;\">Grave um v\u00eddeo mostrando seu rosto e corpo, durante a grava\u00e7\u00e3o fale seu nome a sua idade, e a data atual da grava\u00e7\u00e3o. O v\u00eddeo voc\u00ea pode ser gravado com roupa normal.<\/p>\n            <p style=\"font-size: 13px; color: red;\">Fique tranquila: Este v\u00eddeo de verifica\u00e7\u00e3o n\u00e3o ser\u00e1 exibido publicamente no site, ele s\u00f3 \u00e9 solicitado para comprova\u00e7\u00e3o de autenticidade do perfil e comprovar que o usu\u00e1rio \u00e9 maior de idade.<\/p>\n            <div class=\"camera-card\">\n                <div class=\"video-preview-wrapper\"><video id=\"webcam_preview\" autoplay muted playsinline><\/video><\/div>\n                <div style=\"display: flex; gap: 10px; justify-content: center;\">\n                    <button type=\"button\" id=\"btn_start_cam\" class=\"btn-main\">Ativar C\u00e2mera<\/button>\n                    <button type=\"button\" id=\"btn_record_video\" class=\"btn-main\" style=\"background:#dc3545\" disabled>Gravar<\/button>\n                <\/div>\n                <div id=\"status_container\"><p id=\"video_status\" style=\"font-size: 13px; margin: 10px 0 0; color: #aaa;\">Captura obrigat\u00f3ria<\/p>\n                    <div id=\"progress_container\"><div id=\"progress_bar\"><\/div><\/div>\n                <\/div>\n                <input type=\"hidden\" name=\"reg_video_base64\" id=\"reg_video_base64\" required>\n            <\/div>\n             \n\n            <button type=\"submit\" id=\"submit_main\" class=\"btn-submit\">Finalizar meu Cadastro<\/button>\n        <\/form>\n    <\/div>\n\n    <div id=\"doc_camera_modal\">\n        <button class=\"close-camera\" onclick=\"closeDocCamera()\">&times;<\/button>\n        <video id=\"doc_camera_stream\" autoplay playsinline><\/video>\n        <div class=\"camera-overlay\"><\/div>\n        <button type=\"button\" class=\"shutter-btn\" onclick=\"takeSnapshot()\"><\/button>\n    <\/div>\n    <canvas id=\"doc_canvas\" style=\"display:none;\"><\/canvas>\n\n    <script>\n        const isVideoEnabled = \"yes\";\n        const isDocsEnabled  = \"yes\";\n        let hasCamera = false;\n        window.isSubmitting = false;\n\n        async function checkCameraHardware() {\n            try {\n                const devices = await navigator.mediaDevices.enumerateDevices();\n                hasCamera = devices.some(device => device.kind === 'videoinput');\n                if (!hasCamera) {\n                    document.querySelectorAll('.doc-cam-trigger').forEach(btn => btn.disabled = true);\n                    const camMsg = document.getElementById('camera_check_msg');\n                    if(camMsg) camMsg.style.display = 'block';\n                    document.getElementById('submit_main').style.background = '#ccc';\n                    document.getElementById('submit_main').innerText = 'C\u00e2mera Necess\u00e1ria';\n                }\n            } catch(e){}\n        }\n        checkCameraHardware();\n\n        function showLoadingModal() {\n            document.getElementById('loading_modal').style.display = 'flex';\n            let pBar = document.getElementById('loading_progress');\n            let pctText = document.getElementById('loading_text_pct');\n            let w = 0;\n            let intv = setInterval(() => {\n                w += Math.floor(Math.random() * 6) + 1;\n                if (w > 99) w = 99;\n                pBar.style.width = w + '%';\n                pctText.innerText = w + '%';\n                if (w === 99) clearInterval(intv);\n            }, 400);\n        }\n\n        function validateForm(showAlerts = true) {\n            if (isDocsEnabled === 'yes' && !hasCamera) {\n                if(showAlerts) alert(\"Este aparelho n\u00e3o possui c\u00e2mera. A captura de documentos e v\u00eddeo \u00e9 obrigat\u00f3ria para o cadastro.\");\n                return false;\n            }\n\n            const reqInputs = document.querySelectorAll('#wp_registro_form input[required]');\n            for(let i=0; i<reqInputs.length; i++) {\n                if(!reqInputs[i].value.trim()) return false;\n            }\n\n            const pass = document.getElementById('reg_password').value;\n            const conf = document.getElementById('reg_password_confirm').value;\n            if (pass !== conf || pass.length < 4) {\n                if(showAlerts && pass !== conf && conf.length > 0) alert(\"As senhas n\u00e3o coincidem.\"); \n                return false;\n            }\n            if (isDocsEnabled === 'yes') {\n                if (!document.getElementById('doc_front_base64').value || !document.getElementById('doc_back_base64').value) {\n                    if(showAlerts) alert(\"Documentos s\u00e3o obrigat\u00f3rios.\"); \n                    return false;\n                }\n            }\n            if (isVideoEnabled === 'yes' && !document.getElementById('reg_video_base64').value) {\n                if(showAlerts) alert(\"V\u00eddeo de verifica\u00e7\u00e3o \u00e9 obrigat\u00f3rio.\"); \n                return false;\n            }\n            return true;\n        }\n\n        function validateFormSubmit() {\n            if (!validateForm(true)) return false;\n            if (window.isSubmitting) return false;\n            window.isSubmitting = true;\n            showLoadingModal();\n            return true;\n        }\n\n        function checkAutoSubmit() {\n            if (validateForm(false)) { \n                if (window.isSubmitting) return;\n                window.isSubmitting = true;\n                showLoadingModal();\n                document.getElementById('wp_registro_form').submit(); \n            }\n        }\n\n        document.querySelectorAll('.wp-reg-input').forEach(input => {\n            input.addEventListener('input', () => {\n                if(input.id === 'reg_password_confirm' && input.value.length >= 4) checkAutoSubmit();\n            });\n            input.addEventListener('change', checkAutoSubmit);\n        });\n\n        document.getElementById('reg_cpf').addEventListener('input', e => {\n            let x = e.target.value.replace(\/\\D\/g, '').match(\/(\\d{0,3})(\\d{0,3})(\\d{0,3})(\\d{0,2})\/);\n            e.target.value = !x[2] ? x[1] : x[1] + '.' + x[2] + (x[3] ? '.' + x[3] : '') + (x[4] ? '-' + x[4] : '');\n        });\n        document.getElementById('reg_phone').addEventListener('input', e => {\n            let x = e.target.value.replace(\/\\D\/g, '').match(\/(\\d{0,2})(\\d{0,5})(\\d{0,4})\/);\n            e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');\n        });\n\n        if (isVideoEnabled === 'yes') {\n            let mainStream; let recorder; let chunks = [];\n            const videoPreview = document.getElementById('webcam_preview');\n            const recordBtn = document.getElementById('btn_record_video');\n            const statusText = document.getElementById('video_status');\n\n            document.getElementById('btn_start_cam').onclick = async () => {\n                try {\n                    mainStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: \"user\" }, audio: true });\n                    videoPreview.srcObject = mainStream; recordBtn.disabled = false;\n                    statusText.innerText = \"C\u00e2mera Pronta \u2705\";\n                } catch (err) { alert(\"Acesso \u00e0 c\u00e2mera negado ou n\u00e3o dispon\u00edvel.\"); }\n            };\n\n            recordBtn.onclick = () => {\n                chunks = []; recorder = new MediaRecorder(mainStream);\n                recorder.ondataavailable = e => chunks.push(e.data);\n                recorder.onstop = () => {\n                    const reader = new FileReader();\n                    reader.readAsDataURL(new Blob(chunks, { type: 'video\/webm' }));\n                    reader.onloadend = () => {\n                        document.getElementById('reg_video_base64').value = reader.result;\n                        statusText.innerText = \"V\u00eddeo Gravado! \u2705\";\n                        setTimeout(() => checkAutoSubmit(), 600);\n                    };\n                };\n                recorder.start(); recordBtn.disabled = true;\n                document.getElementById('progress_container').style.display = 'block';\n                let start = Date.now();\n                let timer = setInterval(() => {\n                    let p = ((Date.now() - start) \/ 5000) * 100;\n                    document.getElementById('progress_bar').style.width = (p >= 100 ? 100 : p) + '%';\n                    if(p >= 100) clearInterval(timer);\n                }, 100);\n                setTimeout(() => { recorder.stop(); recordBtn.disabled = false; }, 5000);\n            };\n        }\n\n        let docStream; let currentSide;\n        function openDocCamera(side) {\n            if (!hasCamera) return;\n            currentSide = side; document.getElementById('doc_camera_modal').style.display = 'flex';\n            navigator.mediaDevices.getUserMedia({ video: { facingMode: \"environment\", width: { ideal: 1920 } } })\n                .then(s => { docStream = s; document.getElementById('doc_camera_stream').srcObject = s; })\n                .catch(() => alert(\"N\u00e3o foi poss\u00edvel acessar a c\u00e2mera traseira.\"));\n        }\n        function closeDocCamera() { if (docStream) docStream.getTracks().forEach(t => t.stop()); document.getElementById('doc_camera_modal').style.display = 'none'; }\n        function takeSnapshot() {\n            const v = document.getElementById('doc_camera_stream'); const c = document.getElementById('doc_canvas');\n            c.width = v.videoWidth; c.height = v.videoHeight; c.getContext('2d').drawImage(v, 0, 0);\n            const data = c.toDataURL('image\/jpeg', 0.85);\n            document.getElementById('preview_doc_' + currentSide).src = data;\n            document.getElementById('doc_' + currentSide + '_base64').value = data;\n            closeDocCamera();\n            setTimeout(() => checkAutoSubmit(), 600);\n        }\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-31","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpcode.site\/index.php?rest_route=\/wp\/v2\/pages\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcode.site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpcode.site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpcode.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcode.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=31"}],"version-history":[{"count":2,"href":"https:\/\/wpcode.site\/index.php?rest_route=\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/wpcode.site\/index.php?rest_route=\/wp\/v2\/pages\/31\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/wpcode.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}