{"id":144,"date":"2024-12-24T21:07:56","date_gmt":"2024-12-24T21:07:56","guid":{"rendered":"https:\/\/vidriogyncana.es\/?page_id=144"},"modified":"2024-12-26T16:28:57","modified_gmt":"2024-12-26T16:28:57","slug":"registro-el-ejido","status":"publish","type":"page","link":"https:\/\/vidriogyncana.es\/?page_id=144","title":{"rendered":"Registro &#8211; El Ejido"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Formulario de Registro<\/title>\n    <!-- Firebase SDK - Versi\u00f3n no modular -->\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.17.2\/firebase-app-compat.js\"><\/script>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.17.2\/firebase-database-compat.js\"><\/script>\n    <style>\n        \/* Estilo para centrar todo en la p\u00e1gina *\/\n        body {\n            font-family: Arial, sans-serif;\n            text-align: center; \/* Centra todo el texto *\/\n            display: flex;\n            justify-content: center; \/* Centra horizontalmente *\/\n            align-items: center; \/* Centra verticalmente *\/\n            height: auto;\n            margin: 20px;\n            background-color: #f4f4f4;\n        }\n\n        .container {\n            text-align: center;\n            width: 100%;\n            max-width: 600px; \/* Tama\u00f1o m\u00e1ximo para el formulario *\/\n            padding: 20px;\n            background-color: white;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n            border-radius: 8px;\n        }\n\n        h1, h2 {\n            text-align: center; \/* Centra los encabezados *\/\n        }\n\n        \/* Centra los campos de formulario *\/\n        label, input, select, button {\n            display: block;\n            width: 100%;\n            margin: 10px 0;\n            text-align: center;\n        }\n\n        input[type=\"text\"], input[type=\"tel\"], input[type=\"number\"], select {\n            padding: 10px;\n            font-size: 16px;\n            width: 90%; \/* Limitar el tama\u00f1o de los campos *\/\n            margin-left: auto;\n            margin-right: auto;\n            border: 1px solid #ccc;\n            border-radius: 4px;\n        }\n\n        button {\n            padding: 10px 20px;\n            font-size: 16px;\n            cursor: pointer;\n            border: none;\n            background-color: #4CAF50;\n            color: white;\n            border-radius: 4px;\n        }\n\n        button:hover {\n            background-color: #45a049;\n        }\n\n        .advertencia {\n            color: red;\n            font-size: 12px;\n            display: none;\n        }\n\n        #mensaje-exito {\n            display: none;\n        }\n\n        #realizar-otro-registro {\n            margin-top: 20px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <h1>Formulario de Registro<\/h1>\n        <h2>\u201cvidrioGYNCANA, DESMONTANDO MITOS\u201d &#8211;\u00a0El\u00a0Ejido<\/h2>\n        <form id=\"formulario\">\n            <label for=\"tipo\">Tipo de Registro:<\/label>\n            <select id=\"tipo\" name=\"tipo\" required>\n                <option value=\"individual\">Individual<\/option>\n                <option value=\"grupal\">Grupal<\/option>\n            <\/select>\n            \n            <!-- Formulario Individual -->\n            <div id=\"form-individual\">\n                <h2>Registro Individual<\/h2>\n                <label for=\"nombre\">Nombre:<\/label>\n                <input type=\"text\" id=\"nombre\" name=\"nombre\" required>\n                <div id=\"advertencia-nombre\" class=\"advertencia\">Por favor, rellena este campo.<\/div>\n\n                <label for=\"apellido\">Apellido:<\/label>\n                <input type=\"text\" id=\"apellido\" name=\"apellido\" required>\n                <div id=\"advertencia-apellido\" class=\"advertencia\">Por favor, rellena este campo.<\/div>\n\n                <label for=\"contacto\">Contacto:<\/label>\n                <input type=\"tel\" id=\"contacto\" name=\"contacto\" required>\n                <div id=\"advertencia-contacto\" class=\"advertencia\">Por favor, rellena este campo.<\/div>\n            <\/div>\n            \n            <!-- Formulario Grupal -->\n            <div id=\"form-grupal\" style=\"display: none;\">\n                <h2>Registro Grupal<\/h2>\n                <label for=\"nombre-representante\">Nombre del Representante:<\/label>\n                <input type=\"text\" id=\"nombre-representante\" name=\"nombre-representante\">\n                <div id=\"advertencia-nombre-representante\" class=\"advertencia\">Por favor, rellena este campo.<\/div>\n\n                <label for=\"apellido-representante\">Apellido del Representante:<\/label>\n                <input type=\"text\" id=\"apellido-representante\" name=\"apellido-representante\">\n                <div id=\"advertencia-apellido-representante\" class=\"advertencia\">Por favor, rellena este campo.<\/div>\n\n                <label for=\"contacto-representante\">Contacto del Representante:<\/label>\n                <input type=\"tel\" id=\"contacto-representante\" name=\"contacto-representante\">\n                <div id=\"advertencia-contacto-representante\" class=\"advertencia\">Por favor, rellena este campo.<\/div>\n\n                <label for=\"nombre-equipo\">Nombre del Equipo:<\/label>\n                <input type=\"text\" id=\"nombre-equipo\" name=\"nombre-equipo\">\n                <div id=\"advertencia-nombre-equipo\" class=\"advertencia\">Por favor, rellena este campo.<\/div>\n\n                <label for=\"integrantes\">N\u00famero de Integrantes:<\/label>\n                <input type=\"number\" id=\"integrantes\" name=\"integrantes\">\n                <div id=\"advertencia-integrantes\" class=\"advertencia\">Por favor, rellena este campo.<\/div>\n            <\/div>\n\n            <button type=\"submit\">Registrar<\/button>\n        <\/form>\n\n        <!-- Mensaje de \u00e9xito -->\n        <div id=\"mensaje-exito\" style=\"display: none;\">\n            <p><br>\u00a1\u00a1 ENHORABUENA, YA TE HAS INSCRITO !!<br\/>\n\n<br>Recuerda, te esperamos el viernes 27 de diciembre en la zona de la puerta principal del PABELL\u00d3N de DEPORTES DE EL EJIDO.<br\/>\n\n<br>La vidrioGYNCANA se desarrollar\u00e1 de 11:30h a 13:30h, puedes venir antes para acreditarte. Estaremos abiertos desde las 11h.<br\/>\n\n<br>\u00a1\u00a1 Tr\u00e1ete zapatos c\u00f3modos y muchas ganas de divertirte !!<br\/>\n\n<br>Ahhh!! Y NO OLVIDES TRAER ENVASES DE VIDRIO ? PARA RECICLAR \u267b, ESA SER\u00c1\u00a0TU\u00a0ENTRADA\u00a0?<br\/>\n <br>Descarga la aplicaci\u00f3n e ingresa con el siguiente c\u00f3digo:<br\/><\/p>\n            <h2 id=\"codigo-generado\"><\/h2>\n            <div style=\"display: flex; justify-content: center; gap: 10px; margin-top: 20px;\">\n        <button id=\"realizar-otro-registro\">Realizar otro registro<\/button>\n        <a href=\"https:\/\/drive.google.com\/uc?export=download&#038;id=19d_AFLht_u79m8Sm_ejYqw4D1BVtjVPc\">\n            <button style=\"background-color: #007BFF; color: white;\">Descarga la aplicaci\u00f3n<\/button>\n        <\/a>\n    <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ Firebase Configuraci\u00f3n\n        const firebaseConfig = {\n            apiKey: \"AIzaSyAV4uC1fD15CqxeirubBBbEI1Czb_8Mu5A\",\n  authDomain: \"marevents-f694d.firebaseapp.com\",\n  databaseURL: \"https:\/\/marevents-f694d-default-rtdb.europe-west1.firebasedatabase.app\",\n  projectId: \"marevents-f694d\",\n  storageBucket: \"marevents-f694d.firebasestorage.app\",\n  messagingSenderId: \"400897280694\",\n  appId: \"1:400897280694:web:714c213f822d38bb363417\",\n  measurementId: \"G-GES43MF138\"\n        };\n\n        \/\/ Inicializar Firebase\n        const app = firebase.initializeApp(firebaseConfig);\n        const db = firebase.database(app);\n\n        const formulario = document.getElementById('formulario');\n        const tipo = document.getElementById('tipo');\n        const formIndividual = document.getElementById('form-individual');\n        const formGrupal = document.getElementById('form-grupal');\n        const mensajeExito = document.getElementById('mensaje-exito');\n        const codigoGenerado = document.getElementById('codigo-generado');\n        const realizarOtroRegistroBtn = document.getElementById('realizar-otro-registro');\n\n        \/\/ Definir el municipio directamente en el c\u00f3digo\n        const municipio = \"ElEjido\";  \/\/ Reemplaza con el municipio deseado\n\n        \/\/ Mostrar\/Ocultar formularios seg\u00fan el tipo\n        tipo.addEventListener('change', () => {\n            if (tipo.value === 'individual') {\n                formIndividual.style.display = 'block';\n                formGrupal.style.display = 'none';\n                deshabilitarCampos(formGrupal, false);\n                deshabilitarCampos(formIndividual, true);\n            } else {\n                formIndividual.style.display = 'none';\n                formGrupal.style.display = 'block';\n                deshabilitarCampos(formIndividual, false);\n                deshabilitarCampos(formGrupal, true);\n            }\n        });\n\n        \/\/ Deshabilitar campos de formularios no visibles\n        function deshabilitarCampos(formulario, deshabilitar) {\n            const campos = formulario.querySelectorAll('input');\n            campos.forEach(campo => {\n                campo.disabled = !deshabilitar;\n            });\n        }\n\n        \/\/ Generar c\u00f3digo \u00fanico (primeras dos letras de nombre, apellido y tres n\u00fameros aleatorios)\n        function generarCodigo(nombre, apellido) {\n            const nombreCorto = nombre.slice(0, 2).toUpperCase();\n            const apellidoCorto = apellido.slice(0, 2).toUpperCase();\n            const digitosAleatorios = Math.floor(100 + Math.random() * 900); \/\/ Generar 3 d\u00edgitos aleatorios\n            return `${nombreCorto}${apellidoCorto}${digitosAleatorios}`;\n        }\n\n        \/\/ Manejo del formulario\n        formulario.addEventListener('submit', (e) => {\n            e.preventDefault();\n            let datos = {};\n            const nombre = document.getElementById('nombre').value;\n            const apellido = document.getElementById('apellido').value;\n            const contacto = document.getElementById('contacto').value;\n            const municipio = \"ElEjido\";\n            const codigo = generarCodigo(nombre, apellido);\n            let registro = {};\n\n            if (tipo.value === 'individual') {\n                registro.nombre = nombre;\n                registro.apellido = apellido;\n                registro.contacto = contacto;\n                registro.municipio = municipio;\n                datos = {\n                    ...registro,\n                    codigo: codigo.toString()\n                };\n            } else {\n                const nombreRepresentante = document.getElementById('nombre-representante').value;\n                const apellidoRepresentante = document.getElementById('apellido-representante').value;\n                const contactoRepresentante = document.getElementById('contacto-representante').value;\n                const nombreEquipo = document.getElementById('nombre-equipo').value;\n                const integrantes = document.getElementById('integrantes').value;\n                const municipio = \"ElEjido\";\n\n                \/\/ Generar c\u00f3digo para el grupo (usando representante)\n                const codigoGrupo = generarCodigo(nombreRepresentante, apellidoRepresentante);\n                registro = {\n                    nombreRepresentante,\n                    apellidoRepresentante,\n                    contactoRepresentante,\n                    nombreEquipo,\n                    integrantes,\n                    municipio\n                };\n                datos = {\n                    ...registro,\n                    codigo: codigoGrupo.toString()\n                };\n            }\n\n            \/\/ Usar el c\u00f3digo como nombre de la colecci\u00f3n en la base de datos\n            const ref = db.ref(`inscripciones\/${datos.codigo}`);\n            ref.set(datos).then(() => {\n                \/\/ Mostrar el mensaje de \u00e9xito y ocultar los formularios\n                formulario.style.display = 'none';\n                mensajeExito.style.display = 'block';\n                codigoGenerado.innerText = `C\u00f3digo: ${datos.codigo}`;\n            }).catch(error => {\n                console.error('Error al guardar en Firebase:', error);\n            });\n        });\n\n        \/\/ Funci\u00f3n para realizar otro registro\n        realizarOtroRegistroBtn.addEventListener('click', () => {\n            mensajeExito.style.display = 'none';\n            formulario.style.display = 'block'; \/\/ Mostrar formulario nuevamente\n            const url = \"https:\/\/vidriogyncana.es\/?page_id=144\"; \n            window.location.href = url; \n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Formulario de Registro Formulario de Registro \u201cvidrioGYNCANA, DESMONTANDO MITOS\u201d &#8211;\u00a0El\u00a0Ejido Tipo de Registro: IndividualGrupal Registro Individual Nombre: Por favor, rellena este campo. Apellido: Por favor, rellena este campo. Contacto: Por favor, rellena este campo. Registro Grupal Nombre del Representante: Por favor, rellena este campo. Apellido del Representante: Por favor, rellena este campo. Contacto del Representante: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-144","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vidriogyncana.es\/index.php?rest_route=\/wp\/v2\/pages\/144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vidriogyncana.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vidriogyncana.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vidriogyncana.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vidriogyncana.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=144"}],"version-history":[{"count":65,"href":"https:\/\/vidriogyncana.es\/index.php?rest_route=\/wp\/v2\/pages\/144\/revisions"}],"predecessor-version":[{"id":262,"href":"https:\/\/vidriogyncana.es\/index.php?rest_route=\/wp\/v2\/pages\/144\/revisions\/262"}],"wp:attachment":[{"href":"https:\/\/vidriogyncana.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}