descarga archivos scv

components/administrador/admin.js

@@ -0,0 +1,50 @@
+
+import React, { useState } from 'react';
+import {Form,Button} from "react-bootstrap";
+import CsvDownload from 'react-json-to-csv'
+//let csvToJson = require('convert-csv-to-json');
+let fileInput;
+
+function fileValidation(){
+    fileInput = document.getElementById('file');
+    var filePath = fileInput.value;
+    var allowedExtensions = /(.csv)$/i;
+    if(!allowedExtensions.exec(filePath)){
+        alert('Please upload file having extensions .csv only.');
+        fileInput.value = '';
+        return false;
+    }
+}
+function handleFile(){
+    /*
+    let file1=fileInput;
+    let file2='file2.json'
+    csvToJson.generateJsonFileFromCsv(file1,file2);
+
+    axios.post('url', file2)
+      .then(function (response) {
+        console.log(response);
+      })
+      .catch(function (error) {
+        console.log(error);
+      });*/
+}
+
+
+
+function SubirArchivo(){
+
+    return(
+        <Form>
+            <Form.Group controlId="formFileLg" className="mb-3" size="lg">
+                <Form.Control accept='.csv' type="file" id="file" size="lg" onChange={() => fileValidation()} required/>
+            </Form.Group>
+            <p className="text-center">
+                <Button variant="primary" type="submit" size="lg" onClick={handleFile}>
+                    Submit
+                </Button>
+            </p>
+      </Form>
+    );
+}
+export default SubirArchivo;

components/layouts/footer.js

@@ -0,0 +1,21 @@
+import styles from "../../styles/default.module.css";
+
+function Footer() {
+  return (
+    <footer className={`container-fluid ${styles.azulUnam} ${styles.footer} py-3`}>
+      <p className="my-0">
+        Hecho en México, todos los derechos reservados 2021.
+      </p>
+      <p className="my-0 ">
+        Esta página puede ser reproducida con fines no lucrativos, siempre y
+        cuando no se mutile, se cite la fuente
+      </p>
+      <p className="my-0">
+        completa y su dirección electrónica. De otra forma, requiere permiso
+        previo por escrito de la institución.
+      </p>
+    </footer>
+  );
+}
+
+export default Footer;

components/layouts/header.js

@@ -0,0 +1,16 @@
+import Image from "next/image";
+import LogoUnam from "./../../public/Logo-UNAM.png";
+import LogoFes from "./../../public/logo_fesa.png";
+import styles from "../../styles/default.module.css";
+import { Container, Row, Col,Stack } from "react-bootstrap";
+function Header() {
+    return (
+        <div className={`${styles.azulUnam}`}>
+        <Stack direction="horizontal" gap={3}>
+        <div className=""><Image src={LogoUnam} width="183" height="55"/></div>
+        <div className="ms-auto"><Image  src={LogoFes} width="220" height="52"/></div>
+        </Stack>
+        </div>
+    )
+}
+export default Header;

components/layouts/layout.js

@@ -0,0 +1,14 @@
+import Header from "./header";
+import Nav from "./nav";
+import Footer from "./footer";
+
+
+const Layout = (props) => (
+  <div className="Layout">
+    <Header />
+    <div className="Content">{props.children}</div>
+    <Footer />
+  </div>
+);
+
+export default Layout;

components/layouts/layoutSalir.js

@@ -0,0 +1,19 @@
+import styles from "../../styles/default.module.css";
+import { Container, Row, Col,Stack,Button } from "react-bootstrap";
+function Salir(){
+    return(
+        <div className={`${styles.salir}`}>
+            <Container>
+            <Stack direction="horizontal">
+            <div className={`${styles.salir} ms-auto`} >
+                <a href="./">
+                    <Button className={`${styles.boton}`} size="sm">Salir</Button>
+                </a>
+            </div>
+            </Stack>
+            </Container>
+        </div>
+    );
+}
+
+export default Salir;

components/layouts/nav.js

@@ -0,0 +1,5 @@
+const Nav = () => {
+  return <h1></h1>;
+};
+
+export default Nav

components/login/login.js

@@ -0,0 +1,189 @@
+import {useContext, useState,useEffect} from "react";
+import { Redirect } from "react-router-dom";
+import "bootstrap/dist/css/bootstrap.min.css";
+import {Container,Row,Col,Form,Button,InputGroup,FormControl} from "react-bootstrap"
+import {FormGroup, Label, Input} from "reactstrap";
+import styles from "../../styles/login.module.css";
+import axios from 'axios';
+function App() {
+    const[radio, setRadio] = useState("profesor");
+    const[profesor,setProfesor]=useState('')
+    const[adscripcion,setAdscripcion]=useState('')
+    const[correo,setCorreo]=useState('')
+    const[contraseña,setContrasena]=useState('')
+    
+    const cambioRadio=e=>{
+        setRadio(e.target.value);
+    }
+    const cambioProfesor=e=>{
+        setProfesor(e.target.value);
+        console.log(profesor)
+    }
+    const cambioCorreo=e=>{
+        setCorreo(e.target.value);
+        console.log(correo)
+    }
+    const cambioContrasena=e=>{
+        setContrasena(e.target.value);
+        console.log(contraseña)
+    }
+    const cambioAdscripcion=e=>{
+        setAdscripcion(e.target.value);
+        console.log(adscripcion)
+    }
+    function handleProfesor(){
+        if(typeof window !== 'undefined'){
+            localStorage.setItem('profesor',profesor)
+            localStorage.setItem('adscripcion',adscripcion)
+       }
+       /* axios.post(baseUrl,{params:{profesor,adscripcion}})
+        .then(response=>{
+            return response.data;
+        })
+        .catch(error=>{
+            console.log(error);
+        })*/
+    }
+    function handleOperador(){
+        
+        if(typeof window !== 'undefined'){
+            localStorage.setItem('correo',correo)
+       }
+        /*axios.post(baseUrl,{params:{correo: correo,contrasena: contraseña}})
+        .then(response=>{
+            return response.data;
+        })
+        .catch(error=>{
+            console.log(error);
+        })*/
+    }
+    function handleAdmin(){
+        if(typeof window !== 'undefined'){
+            localStorage.setItem('correo',correo)
+        }
+        /*axios.post(baseUrl,{params:{correo: correo,contrasena: contraseña}})
+        .then(response=>{
+            return response.data;
+        })
+        .catch(error=>{
+            console.log(error);
+        })*/
+    }
+  return (
+    <Container className={`${styles.contenido}`}>
+        <Row className="justify-content-md-center">
+            <Col xs lg="4"><p className="text-center">REGISTRO DE PROFESORES PARA OBTENCIÓN DE MEDALLAS</p></Col>
+        </Row>
+        <Row className="justify-content-md-center">
+            <Col xs lg="4">
+                <FormGroup className="formGroupRadios">
+                    <Container className={`${styles.formGroupRadios}`}>
+                        <FormGroup>
+                        <Input
+                            id="profesor"
+                            type="radio"
+                            value="profesor"
+                            checked={radio == "profesor" ? true : false}
+                            onChange={cambioRadio}
+                        />
+                        <Label for="profesor">
+                            Profesor/a
+                        </Label>
+                        </FormGroup>
+                        <FormGroup>
+                        <Input
+                            id="operador"
+                            type="radio"
+                            value="operador"
+                            checked={radio == "operador" ? true : false}
+                            onChange={cambioRadio}
+                        />
+                        <Label for="operador">
+                            Operador/a
+                        </Label>
+                        </FormGroup>
+                        <FormGroup>
+                        <Input
+                            id="admin"
+                            type="radio"
+                            value="admin"
+                            checked={radio == "admin" ? true : false}
+                            onChange={cambioRadio}
+                        />
+                        <Label for="admin">
+                            Admin
+                        </Label>
+                        </FormGroup>
+                    </Container>
+                </FormGroup>
+            </Col>
+        </Row>
+        <Row className="justify-content-md-center">
+            <Col xs lg="4">
+                {(() => {
+                    switch (radio) {
+                    case "profesor": return <> 
+                        <Form action="./profesores">                                       
+                            <InputGroup className="mb-3">
+                                <FormControl
+                                    required
+                                    onChange={cambioProfesor}
+                                    placeholder="Número de trabajador"
+                                    aria-label="profesor"
+                                    aria-describedby="basic-addon1"
+                                    type="number"
+                                />
+                            </InputGroup>
+                            <Form.Select  onChange={cambioAdscripcion}>
+                                <option >Programa de Matemáticas aplicadas y Computación</option>
+                                <option >Programa de Ingeniería Civil</option>
+                                <option >Programa de Actuaría</option>
+                            </Form.Select>
+                            <p className="text-center">
+                            <Button type="submit" onClick={handleProfesor}  className={`${styles.ingresar}`} size="lg">Ingresar</Button>
+                            </p>
+                        </Form>
+                    </>
+                    ;
+                    case "operador": return <>
+                        <Form action="./operador">
+                            <Form.Group onChange={cambioCorreo} className="mb-3" controlId="formBasicEmail">
+                                <Form.Control required type="email" placeholder="Correo" />
+                                <Form.Text className="text-muted">
+                                </Form.Text>
+                            </Form.Group>
+                            <Form.Group onChange={cambioContrasena} className="mb-3" controlId="formBasicPassword">
+                                <Form.Control required type="password" placeholder="Contraseña" />
+                            </Form.Group> 
+                            <p className="text-center">
+                            <Button type="submit" onClick={handleOperador}  className={`${styles.ingresar}`} size="lg">Ingresar</Button>
+                            </p>
+                        </Form>  
+                    </>
+                    ;
+                    case "admin": return <>
+                        <Form action="./admin">
+                            <Form.Group onChange={cambioCorreo} className="mb-3" controlId="formBasicEmail">
+                                <Form.Control required type="email" placeholder="Correo" />
+                                <Form.Text className="text-muted">
+                                </Form.Text>
+                            </Form.Group>
+                            <Form.Group onChange={cambioContrasena} className="mb-3" controlId="formBasicPassword">
+                                <Form.Control required type="password" placeholder="Contraseña" />
+                            </Form.Group> 
+                            <p className="text-center">
+                            <Button type="submit" onClick={handleAdmin}  className={`${styles.ingresar}`} size="lg">Ingresar</Button>
+                            </p>
+                        </Form> 
+                    </>
+                    ;
+                    }
+                })()}
+            </Col>
+        </Row>
+        <br />
+    </Container>
+  );
+}
+
+export default App;

components/operador/qr.js

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { QrReader } from 'react-qr-reader';
+import swal from 'sweetalert';
+//var datos;
+function Qr(props){
+    const [data, setData] = useState('No result');
+    const alerta = () =>{
+      swal({
+        title: "Invitado registrado",
+        button: "Aceptar",
+        timer:10000,
+        icon:"success"
+      }).then(() => {
+        window.location.reload(false);
+      });
+    }
+    const alerta2 = () =>{
+      swal({
+        title: "Código no válido",
+        button: "Aceptar",
+        timer:10000,
+        icon:"error"
+      }).then(() => {
+        window.location.reload(false);
+      });
+    }
+    const validacionData=()=>{
+
+    }
+
+  return (
+    <>
+      <QrReader
+        onResult={(result, error) => {
+          if (!!result) {
+            setData(result?.text);
+            data;
+          }
+          if (!!error) {
+            console.info(error);
+          }
+            
+        }}
+        style={{ width: '100%' }}
+      />
+      {(() => {
+            if(data!='No result'){
+              /*
+              return alerta();
+              //cambiar data a objeto
+              var datos=JSON.parse(data);
+              //validar que tenga id profesor
+              
+              if(datos.id!==''){
+                return alerta();
+              }
+              else{
+                return alerta2();
+              }*/
+            }
+        })()}
+    </>
+  );
+};
+export default Qr;

components/profesores_registro/invited.js

@@ -0,0 +1,137 @@
+import styles from "../../styles/profesores.module.css";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import InputNumber from 'react-input-number';
+import { Container, Row, Col,Button,Form,Stack} from "react-bootstrap";
+import React,{useState,useEffect} from 'react';
+
+export default function Invited(){
+    const[select,setSelect]=useState("0");
+    const [invitados,setInvitados]=useState([]);
+    const[id,setId]=useState('');
+    const[adscripcion,setAdscripcion]=useState('');
+    const[profesor,setProfesor]=useState('');
+    const[name,setName]=useState('');
+      
+    //como obtener la informacion del profesor del login?
+
+    function handleInvitado(){
+    /*    invitados.map((invitado,index)=>(
+            axios.post('/userinvitado', {
+                nombres:invitado.nombres,
+                apellidos:invitado.apellidos,
+                edad:invitado.edad
+            }).then(function (response) {
+                    console.log(response);
+            }).catch(function (error) {
+                    console.log(error);
+            })
+        ))
+        */
+    }
+
+    return(
+            <div>
+            <Container>
+                <Row className="justify-content-md-center"><Col>
+                <div className={`${styles.titulo}`}>REGISTRO DE PROFESORES PARA LA OBTENCIÓN DE MEDALLAS</div>
+                </Col></Row>
+                <Container className={`${styles.container}`}>
+                    <Row className="justify-content-md-center">
+                        <Col className={`${styles.texto1}`} xs md lg="auto">
+                            <p className="text-start">Nombre: {name}</p>
+                            <p className="text-start">Número de trabajador: {profesor}</p>
+                            <p className="text-start">Adscripción: {adscripcion}</p>  
+                            
+                                <div className="row justify-content-start"> 
+                                        <Col className={`${styles.texto1}`} xs md lg="auto">
+                                        <p>Cantidad de invitados:</p>    
+                                        </Col>
+                                        <Col>
+                                        <div>
+                                        <Form.Group>
+                                        <Form.Select as="select" onChange={(e)=>{setSelect(e.target.value)}} defaultValue="0">
+                                            <option value="0">0</option>
+                                            <option value="1">1</option>
+                                            <option value="2">2</option>
+                                            <option value="3">3</option>
+                                        </Form.Select>
+                                        </Form.Group>
+                                        </div>
+                                        </Col> 
+                                </div>
+                        </Col>
+                        {(() => {
+                            //en un useeffect
+                            useEffect(function() {
+                                setId(window.localStorage.getItem('idProfesor'))
+                            },[]);
+                            /*
+                            axios.get(baseUrl,{params:{idProfesor}})
+                                .then(response=>{
+                                    name=response.data.nombre;
+                                    profesor=response.data.profesor;
+                                    adscripcion=response.data.adscripcion;
+                                    return response.data;
+                                })
+                                .catch(error=>{
+                                    console.log(error);
+                                })*/
+                        })()}
+                        
+                    </Row>
+                    
+                </Container>
+                {(() => {
+                    console.log(select)
+                    invitados.length=0
+                    for(let i=0;i<select;i+=1){
+                        invitados.push({
+                            nombres:'',
+                            apellidos:'',
+                            edad:18
+                        })
+                    }
+                })()}
+                <Form action="./registro-exitoso">
+                    {invitados.map((invitado,index)=>(
+                        <Container key={index}>
+                            <Container className={`${styles.invitado}`}>
+                                <Stack className="col-md-6 mx-auto">
+                                    <div className={`${styles.texto2}`}><p className="text-center">INVITADO {index+1}</p></div>
+                                    <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
+                                        <Form.Label>Nombre(s): </Form.Label>
+                                        <Form.Control type="text" required
+                                            onChange={(e)=>{
+                                            invitado.nombres=e.target.value
+                                        }}/>
+                                    </Form.Group>
+                                    <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
+                                        <Form.Label>Apellidos: </Form.Label>
+                                        <Form.Control type="text"  required
+                                        onChange={(e)=>{
+                                            invitado.apellidos=e.target.value
+                                        }}
+                                        />
+                                    </Form.Group>
+                                    <Form.Group className={`${styles.edad}`}>
+                                    <Form.Label>Edad :  </Form.Label>
+                                        <Form.Control type="number" min={18} max={100}
+                                            onChange={(e)=>{
+                                            invitado.edad=e.target.value
+                                        }}
+                                        />
+                                    </Form.Group>
+                                </Stack>
+                            </Container>
+                            
+                    {console.log(invitados)}    
+                        </Container>
+                    ))}
+                    <Container><Stack className="col-md-2 mx-auto">
+                        <Button className={`${styles.boton2}`} type="submit" onClick={handleInvitado}> Registrar</Button>
+                    </Stack></Container>
+                </Form>
+            </Container>
+        </div>
+    );
+}

package.json

@@ -11,11 +11,22 @@
   "dependencies": {
     "axios": "^0.26.1",
     "bootstrap": "^5.1.3",
+    "convert-csv-to-json": "^1.3.3",
     "moment": "^2.29.2",
     "next": "12.1.4",
+    "prop-types": "^15.8.1",
     "react": "18.0.0",
     "react-bootstrap": "^2.2.3",
-    "react-dom": "18.0.0"
+    "react-context": "^0.0.3",
+    "react-dom": "18.0.0",
+    "react-input-number": "^5.0.19",
+    "react-json-to-csv": "^1.0.4",
+    "react-qr-reader": "^3.0.0-beta-1",
+    "react-router-dom": "^6.3.0",
+    "react-use-localstorage": "^3.5.3",
+    "reactjs-localstorage": "^1.0.1",
+    "reactstrap": "^9.0.2",
+    "sweetalert": "^2.1.2"
   },
   "devDependencies": {
     "eslint": "8.12.0",

pages/_app.js

@@ -1,4 +1,5 @@
 import '../styles/globals.css'
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

pages/admin.js

@@ -0,0 +1,67 @@
+import styles from "../styles/admin.module.css";
+import Layout from '../components/layouts/layout';
+import Salir from '../components/layouts/layoutSalir';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Head from 'next/head';
+import { Container, Row, Col,Button} from "react-bootstrap";
+import SubirArchivo from "../components/administrador/admin";
+import React, { useState, useEffect } from 'react';
+import axios from "axios";
+import CsvDownload from 'react-json-to-csv';
+
+export default function Admin(){
+    const [archive, setArchive] = useState('');//este se
+    const [archive2, setArchive2] = useState('Subir base de datos de profesores');
+    const [file, setFile] = useState({});
+
+    const handleFile = async () => {
+
+        try{
+            let response = await axios.get('https://random-data-api.com/api/cannabis/random_cannabis?size=30', {responseType: 'json'});
+            console.log(response.data);
+            setFile(response.data);
+            console.log('holaaa'+response.data.type);
+        } catch ( error ) {
+            console.log( error.data );
+        }
+
+    }
+
+    useEffect( () => { handleFile() } , [] );
+
+    const setArchiveOn = () => {
+        if(archive==""){
+            setArchive(<SubirArchivo></SubirArchivo>);
+            setArchive2("Cerrar");
+        }
+        else{
+            setArchive("");
+            setArchive2("Subir base de datos de profesores");
+        }
+    }
+
+    return(
+        <Layout>
+            <Head>
+            <title>Admin</title>
+            </Head>
+            <Salir/>
+            <Container className={`${styles.subtitulo}`}><Row><p>Admin</p></Row></Container>
+            <Container className={`${styles.contenido}`}>
+                <Row  className="justify-content-md-center">
+                    <Col xs lg="4">
+                        <div className="d-grid gap-2">
+                        <Button  size="lg" className={`${styles.boton}`} onClick={() => setArchiveOn()}>
+                            {archive2}
+                        </Button>
+                        {archive}
+                        <CsvDownload className={`${styles.boton}`} filename="BDinvitados.csv" data={file} >
+                             Descargar la base de datos de invitados 
+                        </CsvDownload>
+                        </div>
+                    </Col>
+                </Row>
+            </Container>    
+        </Layout>
+    )
+}

pages/index.js

@@ -1,69 +1,19 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import Layout from '../components/layouts/layout';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Head from 'next/head';
+import App from '../components/login/login';
+import {useEffect} from 'react'
 
-export default function Home() {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
 
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  )
-}
+export default function Register(){
+    return(
+        <Layout>
+            <Head>
+            <title>Login</title>
+            </Head>
+            <div>
+                <App></App>
+            </div>
+        </Layout>
+    )
+}

pages/operador.js

@@ -0,0 +1,51 @@
+import styles from "../styles/admin.module.css";
+import Layout from '../components/layouts/layout';
+import Qr from '../components/operador/qr';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Head from 'next/head';
+import Salir from '../components/layouts/layoutSalir';
+import { Container, Row, Col,Form,Button,P } from "react-bootstrap";
+import React, { useState } from 'react';
+
+export default function Register(){
+    const [data, setData] = useState('');//este se
+    const [data2, setData2]= useState('Escanear');
+
+    const setDataOn = () => {
+        if(data==""){
+            setData(<Qr></Qr>);
+            setData2("Terminar")
+        }
+        else{
+            setData("");
+            setData2("Escanear");
+        }
+    }
+    return(
+        <Layout>
+            <Head>
+            <title>Operador</title>
+            </Head>
+            <Salir/>
+            <Container className={`${styles.subtitulo}`}>
+                <Row>
+                    <Col><p>Operador</p></Col>
+                </Row>
+            </Container>
+            <Container className={`${styles.operador}`}>
+                <Row className="justify-content-md-center">
+                    <Col  lg="4" sm="10" xs="12">
+                            <h2>{data}</h2>
+                    </Col> 
+                    <Row className="justify-content-md-center">
+                    <Col md="auto">
+                        <Button className={`${styles.salir}`} size="lg" active onClick={() => setDataOn()}>
+                            {data2}
+                        </Button>
+                    </Col>
+                    </Row>
+                </Row>                
+            </Container>   
+        </Layout>
+    )
+}

pages/profesores.js

@@ -0,0 +1,21 @@
+import styles from "../styles/profesores.module.css";
+import Layout from '../components/layouts/layout';
+import Salir from '../components/layouts/layoutSalir';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Head from 'next/head';
+import Invited from '../components/profesores_registro/invited';
+
+export default function Register(){
+    return(
+        <Layout>
+            <Salir/>
+            <Head>
+            <title>Registro Profesores</title>
+            </Head>
+            <div>
+                <Invited></Invited>
+            </div>
+        </Layout>
+    )
+}
+

pages/registro-exitoso.js

@@ -0,0 +1,21 @@
+import styles from "../styles/exito.module.css";
+import Layout from '../components/layouts/layout';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Head from 'next/head';
+import Salir from '../components/layouts/layoutSalir';
+import { Container, Row, Col,Form,Button,P } from "react-bootstrap";
+export default function Register(){
+    return(
+        <Layout>
+            <Salir/>
+            <Head>
+            <title>Registro Exitoso</title>
+            </Head>
+            <Container className={`${styles.container}`}>
+                <Row><p className="text-center">¡REGISTRO EXITOSO!</p></Row>
+                <Row><p className="text-center">Se han enviado los datos e instrucciones a su correo PCPUMA</p></Row>
+            </Container>
+            
+        </Layout>
+    )
+}

public/medal-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M223.7 130.8L149.1 7.77C147.1 2.949 141.9 0 136.3 0H16.03c-12.95 0-20.53 14.58-13.1 25.18l111.3 158.9C143.9 156.4 181.7 137.3 223.7 130.8zM256 160c-97.25 0-176 78.75-176 176S158.8 512 256 512s176-78.75 176-176S353.3 160 256 160zM348.5 317.3l-37.88 37l8.875 52.25c1.625 9.25-8.25 16.5-16.63 12l-46.88-24.62L209.1 418.5c-8.375 4.5-18.25-2.75-16.63-12l8.875-52.25l-37.88-37C156.6 310.6 160.5 299 169.9 297.6l52.38-7.625L245.7 242.5c2-4.25 6.125-6.375 10.25-6.375S264.2 238.3 266.2 242.5l23.5 47.5l52.38 7.625C351.6 299 355.4 310.6 348.5 317.3zM495.1 0H375.7c-5.621 0-10.83 2.949-13.72 7.77l-73.76 122.1c42 6.5 79.88 25.62 109.5 53.38l111.3-158.9C516.5 14.58 508.9 0 495.1 0z"/></svg>

styles/admin.module.css

@@ -0,0 +1,50 @@
+.contenido{
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    min-height: 350px;
+    margin-top: 130px;
+}
+.operador{
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    min-height: 350px;
+    margin-top: 3%;
+    margin-bottom:3%
+
+}
+.subtitulo{
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    color:#1B3D70;
+    font-weight: bold;
+    font-size: x-large;
+}
+.boton{
+    background-color: #BC9516;
+    color:white;
+    border: #BC9516;
+    border-radius: 30px;
+    font-size: x-large;
+}
+.boton:hover{
+    background-color:rgb(188,149,22,70%);;
+    color:white;
+}
+.ingresar{
+    margin-top: 15px;
+    color:white;
+    background-color: #1B3D70;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    font-size: x-large;
+    font-weight: bold;
+    border:0;
+}
+.salir{
+    color:white;
+    background-color: #1B3D70;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    font-size: x-large;
+    font-weight: bold;
+    border:0;
+    margin-bottom: 15px;
+}
+.salir:hover,.ingresar:hover{
+    background-color:rgb(27,61,112,50%);
+}

styles/default.module.css

@@ -0,0 +1,44 @@
+.divMaster {
+    height: 7rem;
+    margin: 0 auto;
+  }
+.azulUnam {
+  background-color: #1e3c70;
+  padding-top: 2%;
+  padding-bottom:2%;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+.contenedor{
+  height: 3rem;
+}
+.footer {
+  text-align: center;
+  color: white;
+}
+.logo_unam{
+  background-color:#1e3c70;
+}  
+.logo_acatlan {
+  background-color: #1e3c70;
+}
+.imagen{
+  background-color: #1e3c70;
+}
+
+.salir{
+  background-color: #2c56a0;
+  margin-top: 0px;
+}
+
+.boton{
+  color:white;
+  background-color: #2c56a0;
+  font-family: 'Calibri','Ginebra','Verdana', serif;
+  font-size: x-large;
+  font-weight: bold;
+  border:0px;
+}
+.boton:hover{
+  background-color:rgb(27,61,112,50%);
+}

styles/exito.module.css

@@ -0,0 +1,24 @@
+.container{
+    min-height: 500px;
+    margin-bottom: 30px; 
+    color:#644F0C;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    font-size:xx-large;
+    font-weight: bold;
+    padding: 8%;
+}
+
+
+.salir{
+    color:white;
+    background-color: #1B3D70;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    font-size: x-large;
+    font-weight: bold;
+    border:0;
+    margin-bottom: 15px;
+    margin-top: 30px;
+}
+.salir:hover{
+    background-color:rgb(27,61,112,50%);
+}

styles/general.module.css

@@ -0,0 +1,4 @@
+#saludo {
+    background-color: black;
+    color:aqua;
+}

styles/globals.css

@@ -4,7 +4,8 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
+
+  }
 
 a {
   color: inherit;
@@ -14,3 +15,32 @@ a {
 * {
   box-sizing: border-box;
 }
+
+#contenido{
+  margin:3%;
+  text-align: center;
+  min-height: 430px;
+  max-width: 500px;
+  margin-left: 7%;
+  margin-right: 7%;
+  padding-top: 30px;
+  font-family: 'Calibri','Ginebra','Verdana', serif;
+  border-width: 0px;
+  font-size: large;
+}
+
+
+#subtitulo{
+  color:#1B3D70;
+  font-family: 'Calibri','Ginebra','Verdana', serif;
+  font-size:X-large;
+  text-align: center;
+  font-weight: bold;
+}
+
+#radio,#botones{
+  margin-top: 50px;
+  font-size:larger;
+  font-weight: bold;
+  color: #644F0C;
+}

styles/invitado.module.css

@@ -0,0 +1,13 @@
+.invitado{
+    background-color: rgb(144,114,16,19%);
+    border-radius:30px;
+    margin-top: 30px;
+    margin-bottom:15px;
+    padding-top: 20px;
+    color:#644F0C;
+    font-weight: bold;
+    font-size: x-large;
+    border-width: 1px;
+    border-color: black;
+    border-style: solid;
+}

styles/login.module.css

@@ -0,0 +1,34 @@
+.Log {
+    text-align: center;
+    padding: 40px 30px;
+}  
+.formGroupRadios{
+    display: flex;
+    align-items: center;
+    justify-content:space-between;
+    color:#000000;
+    font-size: large;
+    font-weight: normal;
+}
+.contenido{
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    min-height: 500px;
+    margin-top: 30px;
+    color:#1B3D70;
+    font-size: x-large;
+    font-weight: bold;
+}
+
+.ingresar{
+    margin-top: 15px;
+    color:white;
+    background-color: #1B3D70;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    font-size: x-large;
+    font-weight: bold;
+    border:0;
+}
+
+.ingresar:hover{
+    background-color:rgb(27,61,112,70%);
+}

styles/profesores.module.css

@@ -0,0 +1,69 @@
+.container{
+    background-color:rgb(144,114,16,32%);
+    border-radius:30px;
+    min-height: 400px;
+    margin-bottom: 30px; 
+    color:#644F0C;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    font-size:xx-large;
+    font-weight: bold;
+    padding: 5%;
+    border-width: 1px;
+    border-color: black;
+    border-style: solid;
+}
+.titulo{
+  color:#644F0C;
+  font-family: 'Calibri','Ginebra','Verdana', serif;
+  text-align: center;
+  font-size:xx-large;
+  font-weight: bolder;
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+.texto1{
+    font-weight: normal;
+}
+.texto2{
+    color:#644F0C;
+    font-weight: bold;
+}
+.boton1{
+    color:white;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    font-size: large;
+    font-weight: bold;
+    background-color: rgb(100,79,12,76%);
+    border:0;
+    margin-bottom: 15px;
+}
+.boton1:hover{
+    background-color: rgb(100,79,12,50%);
+}
+.boton2{
+    color:white;
+    background-color: #1B3D70;
+    font-family: 'Calibri','Ginebra','Verdana', serif;
+    font-size: x-large;
+    border:0;
+    margin-bottom: 15px;
+}
+.boton2:hover{
+    background-color:rgb(27,61,112,50%);
+}
+.invitado{
+    background-color: rgb(144,114,16,19%);
+    border-radius:30px;
+    margin-top: 30px;
+    margin-bottom:15px;
+    padding-top: 20px;
+    color:#644F0C;
+    font-size: large;
+    border-width: 1px;
+    border-color: black;
+    border-style: solid;
+}
+
+.edad{
+    margin-bottom: 15px;
+}