Carpeta views

2026-08-04 19:24:53 -03:00
parent 6aaff2ffe4
commit d95e4012a4
54 changed files with 10640 additions and 0 deletions
@@ -0,0 +1,149 @@
+<div class="container-fluid vh-100 d-flex align-items-center justify-content-center">
+    <div class="row mx-0 login-box">
+
+        <!-- COLUMNA IZQUIERDA -->
+
+        <div class="col-lg-6 col-md-6 d-flex flex-column justify-content-center text-white p-5"
+            style="background: linear-gradient(135deg, #0f172a, #1e3a5f, #3b82b8); border-radius: 16px 0 0 16px;">
+
+            <div class="text-center mb-4">
+                <img src="imgs/logo.png" alt="ByteCenter" style="width: 120px;">
+            </div>
+
+            <h1 class="fw-bold text-center text-white">
+                <a href="?opt=login" class="text-decoration-none fw-semibold text-white">
+                    ByteCenter
+                </a>
+            </h1>
+
+            <p class="mt-3 fs-5 text-center">Bienvenido de nuevo!
+                <br>Inicie sesión para continuar.
+            </p>
+
+        </div>
+
+        <!-- COLUMNA DERECHA (FORMULARIO) -->
+
+        <div class="col-lg-6 col-md-6 d-flex align-items-center p-5 bg-white" style="border-radius: 0 16px 16px 0;">
+            
+            <div class="w-100">
+
+                <h4 class="text-center mb-5">Iniciar Sesión</h4>
+
+                <!-- FORMULARIO -->
+
+                <form method="POST" id="form-login" action="?opt=login" novalidate>
+
+                    <div class="form-floating mb-4">
+                        <input type="text" name="usuario" 
+                            class="form-control input-lg" 
+                            id="floatingUserInput" 
+                            placeholder="Nombre de Usuario">
+                        <label for="floatingUserInput">Usuario</label> 
+                    </div>
+
+                    <div class="position-relative mb-3">
+
+                        <div class="form-floating">
+                            <input 
+                                type="password" 
+                                name="password"
+                                class="form-control input-lg pe-5"
+                                id="floatingPasswordInput"
+                                placeholder="Contraseña"
+                            >
+
+                            <label for="floatingPasswordInput">
+                                Contraseña
+                            </label>
+                        </div>
+
+                        <!-- BOTÓN OJO -->
+
+                        <button 
+                            type="button"
+                            class="btn-toggle-password"
+                            data-target="floatingPasswordInput"
+                        >
+                            <i class="fas fa-eye"></i>
+                        </button>
+
+                    </div>
+
+                    <div class="text-center mt-3">
+                        <a href="?opt=recuperar_cuenta" class="text-decoration-none fw-semibold">
+                            Olvidé mi contraseña
+                        </a>
+                    </div>
+
+                    <button type="submit" class="btn btn-primary w-100 btn-lg mt-3">
+                        Entrar
+                    </button>
+
+                </form>
+
+                <!-- ERROR -->
+
+                <script>
+                    const serverErrors = <?php 
+                        if (!empty($_SESSION['flash_error'])) {
+                            $errorsArray = explode('<br>', $_SESSION['flash_error']);
+                            unset($_SESSION['flash_error']);
+                            echo json_encode($errorsArray);
+                        } else {
+                            echo '[]';
+                        }
+                    ?>;
+                </script>
+
+                <!-- SUCCES -->
+
+                <script>
+                    const serverSuccess = <?php
+                        if (!empty($_SESSION['flash_success'])) {
+                            $successArray = explode('<br>', $_SESSION['flash_success']);
+                            unset($_SESSION['flash_success']);
+                            echo json_encode($successArray);
+                        } else {
+                            echo '[]';
+                        }
+                    ?>;
+                </script>
+                
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Validar mediante js -->
+
+<script src="js/login/logInValidator.js"></script>
+
+<!-- Ojo de contrasenia -->
+
+<script>
+
+    document.querySelectorAll(".btn-toggle-password").forEach(button => {
+
+        button.addEventListener("click", () => {
+
+            const input = document.getElementById(button.dataset.target);
+            const icon = button.querySelector("i");
+
+            if (input.type === "password") {
+
+                input.type = "text";
+
+                icon.classList.remove("fa-eye");
+                icon.classList.add("fa-eye-slash");
+
+            } else {
+
+                input.type = "password";
+
+                icon.classList.remove("fa-eye-slash");
+                icon.classList.add("fa-eye");
+            }
+        });
+    });
+</script>