Laboratoria · vanerodr · Jul 14, 2023 · Jul 14, 2023 · Jul 20, 2023 · Jul 21, 2023
diff --git a/fondo.jpg b/fondo.jpg
diff --git a/fondoPeque.jpg b/fondoPeque.jpg
diff --git 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"
   }
-}
+}
diff --git a/src/app/firebase.js 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)
diff --git a/src/app/signupForm.js 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
diff --git a/src/index.html b/src/index.html
@@ -3,10 +3,58 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <title>¡LabsConnect!</title>
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
+  <title>LabsConnect</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <script type="module" src="main.js"></script>
+   <!-- Barra de navegación -->
+   <nav class="navbar">
+    <div class="navbar-brand">
+      <a href="/">LabsConnect</a>
+    </div>
+    <div class="navbar-links">
+      <a href="#signinModal" data-modal-target="#signinModal">Sign in</a>
+      <a href="#signupModal" data-modal-target="#signupModal">Sign up</a>
+      <a href="#" id="logout" class="logged-in">Log out</a>
+    </div>
+  </nav>
+
+<!-- Modal de Sign in -->
+<div id="signinModal" class="modal">
+    <div class="modal-content">
+      <span class="close">&times;</span>
+      <h2>Signin</h2>
+      <form id="signinForm">
+        <label for="login-email">Email:</label>
+        <input type="email" id="login-email" class="form-control mb-3" placeholder="Email" required>
+
+        <label for="login-password">Password:</label>
+        <input type="password" id="login-password" class="form-control mb-3" placeholder="******" required>
+
+        <button type="submit" class="btn-submit">Login</button>
+      </form>
+    </div>
+  </div>
+
+  <!-- Modal de Sign up -->
+<div id="signupModal" class="modal">
+    <div class="modal-content">
+      <span class="close">&times;</span>
+      <h2>Signup</h2>
+      <form id="signupForm">
+        <label for="signup-email">Email:</label>
+        <input type="email" id="signup-email" class="form-control mb-3" placeholder="Email" required>
+
+        <label for="signup-password">Password:</label>
+        <input type="password" id="signup-password" class="form-control mb-3" placeholder="******" required>
+
+        <button type="submit" class="btn-submit">Register</button>
+      </form>
+    </div>
+  </div>
+  <script type="module" src="./main.js"></script>
 </body>
 </html>
diff --git a/src/index.js 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
@@ -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ñequito.png b/src/muñequito.png
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,181 @@
+<<<<<<< HEAD
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}  
+
+body{
+  background: #000000;
+  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;
+  }
+}  
+=======
+body {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    place-items: center;
+    height: 100vh;
+    margin: 0;
+  }
+
+  header {
+    text-align: center;
+    padding: 10px;
+    grid-column: 1 / 3;
+  }
+
+  nav {
+    padding: 0px;
+  }
+
+  nav img {
+    width: 125%;
+    height: 125%;
+  }
+
+  main {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+    width: 80%;
+  }
+
+  .login {
+    background-color: #dadada;
+    padding: 20px;
+  }
+
+  .login h2 {
+    text-align: center;
+  }
+
+  .login label {
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  .login input {
+    width: 100%;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+
+  .login button {
+    width: 100%;
+    padding: 10px;
+    background-color: #f45aee;
+    color: #fff;
+    border: none;
+  }
+
+>>>>>>> 46b56486c6bc292739ea5709f5287d07ad575da2
diff --git a/src/view-controler/index.js 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 };