{"id":477,"date":"2026-03-02T19:05:09","date_gmt":"2026-03-03T01:05:09","guid":{"rendered":"https:\/\/www.sospuravida.com\/?page_id=477"},"modified":"2026-03-02T21:17:07","modified_gmt":"2026-03-03T03:17:07","slug":"registro-de-estudiantes","status":"publish","type":"page","link":"https:\/\/www.sospuravida.com\/?page_id=477","title":{"rendered":"REGISTRO DE ESTUDIANTES"},"content":{"rendered":"<style>\r\n    \/* Dise\u00f1o M\u00f3vil Tipo App - Blindado contra estilos del Tema *\/\r\n    .app-container {\r\n        max-width: 450px;\r\n        margin: 0 auto;\r\n        background: #ffffff;\r\n        padding: 25px;\r\n        border-radius: 12px;\r\n        box-shadow: 0 5px 20px rgba(0,0,0,0.08);\r\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n        box-sizing: border-box;\r\n    }\r\n    .app-title {\r\n        text-align: center;\r\n        color: #2c3e50;\r\n        font-size: 24px;\r\n        margin-bottom: 25px;\r\n        font-weight: bold;\r\n    }\r\n    .input-group {\r\n        margin-bottom: 20px;\r\n        width: 100%;\r\n        box-sizing: border-box;\r\n    }\r\n    .input-group label {\r\n        display: block;\r\n        font-weight: 600;\r\n        margin-bottom: 8px;\r\n        color: #34495e;\r\n        font-size: 14px;\r\n    }\r\n    \/* Forzamos el dise\u00f1o de los inputs *\/\r\n    #registroEstudianteForm input[type=\"text\"],\r\n    #registroEstudianteForm input[type=\"tel\"] {\r\n        width: 100% !important;\r\n        padding: 12px 15px !important;\r\n        border: 1px solid #ccd1d1 !important;\r\n        border-radius: 8px !important;\r\n        font-size: 16px !important;\r\n        box-sizing: border-box !important;\r\n        background-color: #f9f9f9 !important;\r\n        color: #333 !important;\r\n        height: auto !important;\r\n        line-height: normal !important;\r\n    }\r\n    \/* Centrado perfecto para los botones de c\u00e1mara *\/\r\n    #registroEstudianteForm .camera-btn {\r\n        display: flex !important;\r\n        align-items: center !important;\r\n        justify-content: center !important;\r\n        width: 100% !important;\r\n        background-color: #3498db !important;\r\n        color: #ffffff !important;\r\n        padding: 15px !important;\r\n        border-radius: 8px !important;\r\n        font-weight: bold !important;\r\n        cursor: pointer !important;\r\n        border: none !important;\r\n        font-size: 16px !important;\r\n        margin-top: 5px !important;\r\n        box-sizing: border-box !important;\r\n        line-height: 1.2 !important;\r\n        white-space: normal !important;\r\n        text-align: center !important;\r\n        min-height: 50px !important;\r\n    }\r\n    #registroEstudianteForm .camera-btn:hover {\r\n        background-color: #2980b9 !important;\r\n    }\r\n    \/* Centrado perfecto para el bot\u00f3n de guardar *\/\r\n    #registroEstudianteForm .submit-btn {\r\n        display: flex !important;\r\n        align-items: center !important;\r\n        justify-content: center !important;\r\n        background-color: #27ae60 !important;\r\n        color: #ffffff !important;\r\n        width: 100% !important;\r\n        padding: 15px !important;\r\n        border: none !important;\r\n        border-radius: 8px !important;\r\n        font-size: 18px !important;\r\n        font-weight: bold !important;\r\n        cursor: pointer !important;\r\n        margin-top: 25px !important;\r\n        box-sizing: border-box !important;\r\n        line-height: 1.2 !important;\r\n        white-space: normal !important;\r\n        text-align: center !important;\r\n        min-height: 54px !important;\r\n    }\r\n    #registroEstudianteForm .submit-btn:hover {\r\n        background-color: #219653 !important;\r\n    }\r\n    .preview-img {\r\n        width: 100%;\r\n        max-height: 250px;\r\n        object-fit: cover;\r\n        border-radius: 8px;\r\n        margin-top: 15px;\r\n        display: none;\r\n        border: 2px solid #ddd;\r\n    }\r\n    .hidden-input {\r\n        display: none !important;\r\n    }\r\n<\/style>\r\n\r\n<div class=\"app-container\">\r\n    <h2 class=\"app-title\">Expediente Digital<\/h2>\r\n    <form id=\"registroEstudianteForm\">\r\n        \r\n        <div class=\"input-group\">\r\n            <label>C\u00e9dula o ID<\/label>\r\n            <input type=\"text\" id=\"cedula\" required placeholder=\"Digite su c\u00e9dula\">\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n            <label>Nombre Completo<\/label>\r\n            <input type=\"text\" id=\"nombre\" required placeholder=\"Nombre y apellidos\">\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n            <label>Tel\u00e9fono<\/label>\r\n            <input type=\"tel\" id=\"telefono\" required placeholder=\"Ej: 8888-8888\">\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n            <label>Foto de Perfil (Selfie)<\/label>\r\n            <input type=\"file\" id=\"foto_perfil\" accept=\"image\/*\" capture=\"user\" class=\"hidden-input\">\r\n            <button type=\"button\" class=\"camera-btn\" onclick=\"document.getElementById('foto_perfil').click()\">\ud83d\udcf8 Tomar Selfie<\/button>\r\n            <img id=\"preview_perfil\" class=\"preview-img\">\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n            <label>Foto de la C\u00e9dula<\/label>\r\n            <input type=\"file\" id=\"foto_cedula\" accept=\"image\/*\" capture=\"environment\" class=\"hidden-input\">\r\n            <button type=\"button\" class=\"camera-btn\" onclick=\"document.getElementById('foto_cedula').click()\">\ud83d\udcf7 Tomar foto a la C\u00e9dula<\/button>\r\n            <img id=\"preview_cedula\" class=\"preview-img\">\r\n        <\/div>\r\n\r\n        <button type=\"submit\" class=\"submit-btn\" id=\"btnGuardar\">Guardar Expediente<\/button>\r\n        <div id=\"mensaje_respuesta\" style=\"margin-top:15px; text-align:center; font-weight:bold;\"><\/div>\r\n    <\/form>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ Motor de Compresi\u00f3n de Im\u00e1genes en el Celular (Ahorro de datos)\r\nasync function comprimirImagen(file) {\r\n    return new Promise((resolve) => {\r\n        const reader = new FileReader();\r\n        reader.readAsDataURL(file);\r\n        reader.onload = (event) => {\r\n            const img = new Image();\r\n            img.src = event.target.result;\r\n            img.onload = () => {\r\n                const canvas = document.createElement('canvas');\r\n                const MAX_WIDTH = 800; \/\/ Reducimos la imagen a 800px m\u00e1ximo\r\n                const scaleSize = MAX_WIDTH \/ img.width;\r\n                canvas.width = MAX_WIDTH;\r\n                canvas.height = img.height * scaleSize;\r\n                const ctx = canvas.getContext('2d');\r\n                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\r\n                \/\/ Comprimimos al 70% de calidad en formato JPEG\r\n                const dataUrl = canvas.toDataURL('image\/jpeg', 0.7);\r\n                resolve(dataUrl);\r\n            };\r\n        };\r\n    });\r\n}\r\n\r\n\/\/ Mostrar previsualizaci\u00f3n y comprimir\r\nlet base64Perfil = '';\r\nlet base64Cedula = '';\r\n\r\ndocument.getElementById('foto_perfil').addEventListener('change', async function(e) {\r\n    if(e.target.files[0]) {\r\n        base64Perfil = await comprimirImagen(e.target.files[0]);\r\n        document.getElementById('preview_perfil').src = base64Perfil;\r\n        document.getElementById('preview_perfil').style.display = 'block';\r\n    }\r\n});\r\n\r\ndocument.getElementById('foto_cedula').addEventListener('change', async function(e) {\r\n    if(e.target.files[0]) {\r\n        base64Cedula = await comprimirImagen(e.target.files[0]);\r\n        document.getElementById('preview_cedula').src = base64Cedula;\r\n        document.getElementById('preview_cedula').style.display = 'block';\r\n    }\r\n});\r\n\r\n\/\/ Enviar datos al servidor\r\ndocument.getElementById('registroEstudianteForm').addEventListener('submit', function(e) {\r\n    e.preventDefault();\r\n    document.getElementById('btnGuardar').innerText = 'Guardando...';\r\n\r\n    const data = {\r\n        action: 'guardar_estudiante_sos', \/\/ Esto conectar\u00e1 con nuestro procesador PHP\r\n        cedula: document.getElementById('cedula').value,\r\n        nombre: document.getElementById('nombre').value,\r\n        telefono: document.getElementById('telefono').value,\r\n        foto_perfil: base64Perfil,\r\n        foto_cedula: base64Cedula\r\n    };\r\n\r\n    fetch('https:\/\/www.sospuravida.com\/wp-admin\/admin-ajax.php', {\r\n        method: 'POST',\r\n        headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\r\n        body: new URLSearchParams(data)\r\n    })\r\n    .then(response => response.json())\r\n    .then(res => {\r\n        if(res.success) {\r\n            document.getElementById('mensaje_respuesta').style.color = 'green';\r\n            document.getElementById('mensaje_respuesta').innerText = '\u00a1Expediente guardado con \u00e9xito!';\r\n            document.getElementById('registroEstudianteForm').reset();\r\n            document.querySelectorAll('.preview-img').forEach(img => img.style.display = 'none');\r\n        } else {\r\n            document.getElementById('mensaje_respuesta').style.color = 'red';\r\n            document.getElementById('mensaje_respuesta').innerText = res.data;\r\n        }\r\n        document.getElementById('btnGuardar').innerText = 'Guardar Expediente';\r\n    }).catch(error => {\r\n        document.getElementById('mensaje_respuesta').style.color = 'red';\r\n        document.getElementById('mensaje_respuesta').innerText = 'Error de conexi\u00f3n. Intente nuevamente.';\r\n        document.getElementById('btnGuardar').innerText = 'Guardar Expediente';\r\n    });\r\n});\r\n<\/script>\n\n\n<p style=\"text-align: center;\">Power By: SOSPURAVIDA.COM<\/p>\n<p style=\"text-align: center;\">Dise\u00f1o: Luis Porras V | Tel: 6325-3509<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-475 aligncenter\" src=\"https:\/\/www.sospuravida.com\/wp-content\/uploads\/2026\/02\/SOS-PYMES-FONDO-BLANCO-300x118.png\" alt=\"\" width=\"188\" height=\"74\" srcset=\"https:\/\/www.sospuravida.com\/wp-content\/uploads\/2026\/02\/SOS-PYMES-FONDO-BLANCO-300x118.png 300w, https:\/\/www.sospuravida.com\/wp-content\/uploads\/2026\/02\/SOS-PYMES-FONDO-BLANCO-500x196.png 500w, https:\/\/www.sospuravida.com\/wp-content\/uploads\/2026\/02\/SOS-PYMES-FONDO-BLANCO.png 721w\" sizes=\"auto, (max-width: 188px) 100vw, 188px\" \/>FUNDACI\u00d3N: SOSPURAVIDA<\/p>","protected":false},"excerpt":{"rendered":"<p>Power By: SOSPURAVIDA.COM Dise\u00f1o: Luis Porras V | Tel: 6325-3509 FUNDACI\u00d3N: SOSPURAVIDA<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-477","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sospuravida.com\/index.php?rest_route=\/wp\/v2\/pages\/477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sospuravida.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sospuravida.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sospuravida.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sospuravida.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=477"}],"version-history":[{"count":3,"href":"https:\/\/www.sospuravida.com\/index.php?rest_route=\/wp\/v2\/pages\/477\/revisions"}],"predecessor-version":[{"id":486,"href":"https:\/\/www.sospuravida.com\/index.php?rest_route=\/wp\/v2\/pages\/477\/revisions\/486"}],"wp:attachment":[{"href":"https:\/\/www.sospuravida.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}