diff --git a/fondo.jpg b/fondo.jpg new file mode 100644 index 0000000..55a7cc9 Binary files /dev/null and b/fondo.jpg differ diff --git a/fondoPeque.jpg b/fondoPeque.jpg new file mode 100644 index 0000000..f5fb2a8 Binary files /dev/null and b/fondoPeque.jpg differ diff --git a/package.json b/package.json index 1d89e14..50b3d0d 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "pretest": "npm run htmlhint && npm run eslint && npm run stylelint", "test": "jest --coverage", "dev": "vite dev src", - "start": "npm run dev", + "start": "npm run dev", "build": "vite build", "preview": "vite preview" }, @@ -42,4 +42,4 @@ "version": "6.3.0", "commit": "a942adeb868f1fe54b86e34cc4fc4ddb0601700d" } -} \ No newline at end of file +} diff --git a/src/app/firebase.js b/src/app/firebase.js new file mode 100644 index 0000000..7f023c7 --- /dev/null +++ b/src/app/firebase.js @@ -0,0 +1,19 @@ +// Import the functions you need from the SDKs you need +import { initializeApp } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js"; +import { getAuth } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-auth.js" +// TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries + +// Your web app's Firebase configuration +const firebaseConfig = { + apiKey: "AIzaSyBlAvA2-uauLNm5HRGSWkIqnt0QOMB2QYo", + authDomain: "labsconnect.firebaseapp.com", + projectId: "labsconnect", + storageBucket: "labsconnect.appspot.com", + messagingSenderId: "178492302381", + appId: "1:178492302381:web:e980e33e9675624edb44a4" +}; + +// Initialize Firebase +export const app = initializeApp(firebaseConfig); +export const auth = getAuth(app) \ No newline at end of file diff --git a/src/app/signupForm.js b/src/app/signupForm.js new file mode 100644 index 0000000..df20913 --- /dev/null +++ b/src/app/signupForm.js @@ -0,0 +1,22 @@ +import { createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-auth.js" +import { auth } from './firebase.js' +const signupForm = document.querySelector('#signupForm'); + +signupForm.addEventListener('submit', async (e) => { + e.preventDefault(); + + const email = signupForm['signup-email'].value; + const password = signupForm['signup-password'].value; + + console.log(email, password); + + try { + const userCredentials = await createUserWithEmailAndPassword(auth, email, password) + console.log(userCredentials) + //para cerrar el modal de registro (aquí le falta) + const signupModal = document.querySelector('#signupModal') + } catch (error) { + console.log(error) + } + +}); diff --git a/src/imagenes/elq.png b/src/imagenes/elq.png new file mode 100644 index 0000000..bb5aff3 Binary files /dev/null and b/src/imagenes/elq.png differ diff --git a/src/index.html b/src/index.html index 788db3c..09c208e 100644 --- a/src/index.html +++ b/src/index.html @@ -3,10 +3,58 @@ + + ¡LabsConnect! - Document + LabsConnect + - + + + + + + + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..0db7936 --- /dev/null +++ b/src/index.js @@ -0,0 +1,9 @@ +import Home from './view/home.js'; +import iniciodeSesion from './view/inicioSesion.js'; + +const components = { + home: Home, + iniciodeSesion: iniciodeSesion +} + +export { components }; diff --git a/src/main.js b/src/main.js index ac27e91..29d4f2a 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,39 @@ -// Este es el punto de entrada de tu aplicacion +import './app/signupForm.js' +// Obtener los modales y los botones para abrirlos +const modals = document.querySelectorAll('.modal'); +const buttons = document.querySelectorAll('[data-modal-target]'); -import { myFunction } from './lib/index.js'; +// Función para mostrar el modal +function showModal(modal) { + modal.style.display = 'block'; +} -myFunction(); +// Función para ocultar el modal +function hideModal(modal) { + modal.style.display = 'none'; +} + +// Eventos para mostrar los modales cuando se haga clic en los botones correspondientes +buttons.forEach((button) => { + button.addEventListener('click', () => { + const targetModal = document.querySelector(button.dataset.modalTarget); + showModal(targetModal); + }); +}); + +// Eventos para ocultar los modales cuando se haga clic en el botón de cerrar o fuera del modal +const closeButtons = document.querySelectorAll('.close'); +modals.forEach((modal) => { + modal.addEventListener('click', (event) => { + if (event.target.classList.contains('modal') || event.target.classList.contains('close')) { + hideModal(modal); + } + }); +});/* Este es el punto de entrada de tu aplicacion +import { changeView } from './view-controler/index.js'; + +const init = () => { + window.addEventListener('hashchange', () => changeView(window.location.hash)); +}; + +window.addEventListener('load', init);*/ diff --git "a/src/mu\303\261equito.png" "b/src/mu\303\261equito.png" new file mode 100644 index 0000000..2094b43 Binary files /dev/null and "b/src/mu\303\261equito.png" differ diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..ef3f468 --- /dev/null +++ b/src/style.css @@ -0,0 +1,120 @@ +html, body { + height: 100%; + margin: 0; + padding: 0; +} + +body{ + background: #797979; + color: rgb(255, 255, 255); + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + font-size: x-large; +} + +.navbar { + font-weight: 700; + background-color: #eeff00; + color: #000000; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 10px; + +} + +.navbar-brand a { + color: #000000; + font-size: 24px; + text-decoration: none; +} + +.navbar-links { + display: flex; +} + +.navbar-links a { + color: #000000; + text-decoration: none; + padding: 0 10px; +} + +.navbar-links a:hover { + color: rgb(250, 52, 197); +} + +/* Estilo para los nuevos modales */ +.modal { + display: none; /* Inicialmente oculto */ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(20, 20, 20, 0.425); /* Fondo oscurecido */ + display: flex; /* Alinea verticalmente el contenido del modal */ + align-items: center; /* Centra verticalmente el contenido del modal */ + justify-content: center; /* Centra horizontalmente el contenido del modal */ +} + +.modal-content { + background-color: #fefefe; + padding: 20px; + border: 10px solid #fb08ff; + position: absolute; + max-width: 100%; + top: 50%; /* Centrado vertical */ + left: 50%; + transform: translate(-50%, -50%); /* Centrado horizontal */ +} + +/* Estilo para el botón de cerrar */ +.close { + color: #fa18d8; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} +/* Estilo para centrar el contenido del formulario */ + +.modal-content form { + width: 80%; /* Ajusta el ancho del formulario según tus preferencias */ + margin: 0 auto; /* Centra horizontalmente el contenido del formulario */ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; /* Asegura que el texto dentro del formulario también esté centrado */ +} + +.modal-content h2 { + display: flex; + flex-direction: column; + align-items: center; + color: #000000; /* Cambia el color del texto del h2 para que sea visible */ + margin-bottom: 20px; /* Agrega un margen inferior para separar el h2 del formulario */ +} + +.btn-submit { + background-color: #d663cb; /* Color de fondo */ + color: #fff; /* Color del texto */ + padding: 1px 5px; /* Espaciado interno (alto, ancho) */ + border: 10px; /* Sin bordes */ + border-radius: 1px; /* Borde redondeado */ + cursor: pointer; + font-size: 16pt; + font-weight: 700; +} + +@media screen and (max-width: 600px) { + .navbar-links { + flex-direction: column; + } +} diff --git a/src/view-controler/index.js b/src/view-controler/index.js new file mode 100644 index 0000000..c027684 --- /dev/null +++ b/src/view-controler/index.js @@ -0,0 +1,16 @@ +import { components } from '../index.js'; + +const changeView = (route) => { + const container = document.getElementById("container"); + switch (route) { + case '#/': + { return container.appendChild(components.home()); } + case '#/iniciodeSesion': + { return container.appendChild(components.iniciodeSesion()); } + default: + break; + } + console.log(route); +}; + +export { changeView }; diff --git a/src/view/home.js b/src/view/home.js new file mode 100644 index 0000000..2d08fab --- /dev/null +++ b/src/view/home.js @@ -0,0 +1,52 @@ +/* eslint-disable semi */ +export default () => { + const viewHome = ` + + + + + + + +`; + const divElem = document.createElement('div'); + divElem.innerHTML = viewHome; + return divElem; +} diff --git a/src/view/inicioSesion.js b/src/view/inicioSesion.js new file mode 100644 index 0000000..bc614ff --- /dev/null +++ b/src/view/inicioSesion.js @@ -0,0 +1,11 @@ +import logo from "../imagenes/elq.png" +export default () => { + const viewiniciodeSesion = ` +

Inicio de sesión

+
+ +
`; + const divElem = document.createElement('div'); + divElem.innerHTML = viewiniciodeSesion; + return divElem; +};