Tul xxx Tul

Viewing: admin_login.php

<?php

include '../components/connect.php';
// Elimina o comenta la siguiente línea para quitar la barra y el error
// include '../components/user_header.php'; 

session_start();

if(isset($_POST['submit'])){

   $name = $_POST['name'];
   $name = filter_var($name, FILTER_SANITIZE_STRING);
   $pass = sha1($_POST['pass']);
   $pass = filter_var($pass, FILTER_SANITIZE_STRING);

   $select_admin = $conn->prepare("SELECT * FROM `admin` WHERE name = ? AND password = ?");
   $select_admin->execute([$name, $pass]);
   
   if($select_admin->rowCount() > 0){
      $fetch_admin_id = $select_admin->fetch(PDO::FETCH_ASSOC);
      $_SESSION['admin_id'] = $fetch_admin_id['id'];
      header('location:dashboard.php');
   }else{
      $message[] = 'Usuario o Contraseña Incorrecta!';
   }

}

?>

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="#e6a859">
   <title>Panadería y Pastelería</title>
   <link rel="icon" type="image/png" href="../img/cuerno.png" />

   <!-- Fuentes e iconos (alineados con la página principal) -->
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet"/>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" referrerpolicy="no-referrer" />

   <style>
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }

      body {
         min-height: 100vh;
         background-image: url('../img/fondo1.jpg');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         background-attachment: fixed;
         display: grid; place-items: center;
         font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
         padding: 20px;
         position: relative;
      }
      body::before{
         content: '';
         position: fixed; inset: 0;
         background: linear-gradient(180deg, rgba(20,23,32,.45), rgba(20,23,32,.45));
         backdrop-filter: blur(1px);
         z-index: 0;
      }

      .login-container {
         background: rgba(255, 255, 255, 0.95);
         backdrop-filter: blur(10px);
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
         border-radius: 20px;
         padding: 2.2rem;
         max-width: 520px;
         width: 100%;
         position: relative; z-index: 1;
         animation: fadeInDown 0.7s ease-out;
         border: 1px solid rgba(255, 255, 255, 0.2);
      }

      @keyframes fadeInDown {
         from { 
            opacity: 0; 
            transform: translateY(-30px);
         }
         to { 
            opacity: 1; 
            transform: translateY(0);
         }
      }

      .login-logo {
         width: 80px;
         height: 80px;
         object-fit: contain;
         margin: 0 auto 8px;
         display: block;
         border-radius: 50%;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         background: #fff;
         padding: 5px;
      }

      .brand-block { text-align: center; margin-bottom: .75rem; }
      .brand-title { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 800; color: #1f2937; letter-spacing: .2px; }
      .login-subtitle { color: #6b7280; font-weight: 600; margin-top: .1rem; }

      .login-title {
         font-weight: 800;
         color: #111827;
         margin-bottom: 1.2rem;
         text-align: center;
         font-size: 1.7rem;
         letter-spacing: 0.2px;
      }

      @media (max-width: 768px) {
         .login-container { max-width: 560px; padding: 2rem 1.25rem; }
         .form-control { width: 100%; }
      }
      @media (max-width: 480px) {
         body { padding: 10px; }
         .login-container { max-width: 100%; width: 100%; padding: 1.4rem 1rem; margin: 0; }
         .login-title { font-size: 1.6rem; }
         .btn-regresar { width: 100%; justify-content: center; margin-bottom: 1rem; }
         .form-control { font-size: 16px; /* Previene zoom en iOS */ width: 100%; }
      }

      .form-control {
         border-radius: 12px;
         background: #f8f9fa;
         border: 2px solid #e9ecef;
         font-size: 1rem;
         margin-bottom: 1rem;
         padding: 0.875rem 1rem;
         transition: all 0.3s ease;
         height: auto;
         width: 100%;
      }

      .form-control:focus {
         border-color: #a855f7;
         box-shadow: 0 0 0 0.2rem rgba(168, 85, 247, 0.25);
         background: #fff;
      }

      .btn-login {
         background: linear-gradient(135deg, #e6a859 0%, #a855f7 100%);
         color: #fff; font-weight: 700;
         border: none; border-radius: 12px;
         padding: 0.875rem 0; font-size: 1.06rem;
         box-shadow: 0 6px 20px rgba(168, 85, 247, 0.25);
         transition: all 0.25s ease; width: 100%; margin-top: 0.5rem;
         display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
      }

      .btn-login:hover, .btn-login:focus {
         transform: translateY(-1px);
         box-shadow: 0 10px 28px rgba(168, 85, 247, 0.35);
      }
      .btn-login i { margin-right: .5rem; }

      .btn-regresar {
         background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
         color: #fff !important;
         font-weight: 600;
         border: none;
         border-radius: 12px;
         padding: 0.75rem 1.5rem;
         font-size: 0.95rem;
         margin-bottom: 1.5rem;
         box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
         transition: all 0.3s ease;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         text-decoration: none;
      }

      .btn-regresar:hover, .btn-regresar:focus {
         background: linear-gradient(135deg, #495057 0%, #6c757d 100%);
         color: #fff;
         transform: translateY(-2px);
         box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
         text-decoration: none;
      }

      .message {
         background: #f8d7da;
         color: #721c24;
         border-radius: 12px;
         padding: 1rem;
         margin-bottom: 1rem;
         font-size: 0.95rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
         box-shadow: 0 2px 10px rgba(220, 53, 69, 0.1);
         border: 1px solid #f5c6cb;
      }

      .message i {
         cursor: pointer;
         margin-left: 10px;
         font-size: 1.1rem;
         transition: color 0.3s ease;
      }

      .message i:hover {
         color: #721c24;
      }

      .password-container {
         position: relative;
         margin-bottom: 1rem;
      }

      .password-toggle {
         position: absolute;
         right: 12px;
         top: 50%;
         transform: translateY(-50%);
         cursor: pointer;
         color: #6c757d;
         transition: color 0.3s ease;
         z-index: 10;
      }

      .password-toggle:hover {
         color: #218838;
      }

      /* Ensure the icon sits neatly inside the input */
      .password-container .form-control { padding-right: 3rem; }
      .password-container .password-toggle { width: 42px; height: 42px; display: grid; place-items: center; }

      /* Responsive: perfect vertical centering by covering the input height */
      @media (max-width: 520px){
         .password-container .password-toggle{ right: 10px; top: 0; bottom: 0; height: auto; transform: none; }
         .password-container .password-toggle i{ font-size: 1.05rem; }
         .password-container .form-control { padding-right: 3.2rem; }
      }

      .form-group {
         margin-bottom: 1rem;
      }

      .form-label {
         font-weight: 600;
         color: #495057;
         margin-bottom: 0.5rem;
         display: block;
      }

      /* Utilidades mínimas */
      .text-center { text-align: center; }
      .mb-3 { margin-bottom: 1rem; }
   </style>
</head>
<body>
   <div class="login-container">
      <!-- Botón Regresar -->
      <div class="text-center">
         <a href="../index.php" class="btn-regresar">
            <i class="fa-solid fa-arrow-left"></i> Regresar
         </a>
      </div>

      <!-- Marca -->
      <div class="brand-block mb-3">
         <img src="../img/logo.png" alt="Punto de Pan" class="login-logo">
         <div class="brand-title">Punto de Pan</div>
         <div class="login-subtitle">Panel administrativo</div>
      </div>

      <!-- Título -->
      <h2 class="login-title">Iniciar Sesión</h2>

      <!-- Mensajes de error -->
      <?php
      if(isset($message)){
         foreach($message as $message){
            echo '
            <div class="message">
               <span>'.$message.'</span>
               <i class="fas fa-times" onclick="this.parentElement.remove();"></i>
            </div>
            ';
         }
      }
      ?>

      <!-- Formulario -->
      <form action="" method="POST" autocomplete="off">
         <div class="form-group">
            <input type="text" name="name" maxlength="20" required placeholder="Usuario" class="form-control" oninput="this.value = this.value.replace(/\s/g, '')">
         </div>
         
         <div class="form-group">
            <div class="password-container">
               <input type="password" id="passwordInput" name="pass" maxlength="20" required placeholder="Contraseña" class="form-control" oninput="this.value = this.value.replace(/\s/g, '')">
               <span class="password-toggle" onclick="togglePassword()">
                  <i id="togglePasswordIcon" class="fa-solid fa-eye-slash"></i>
               </span>
            </div>
         </div>
         
         <button type="submit" name="submit" class="btn-login">
            <i class="fa-solid fa-right-to-bracket"></i> Entrar
         </button>
      </form>
   </div>

   <script>
      function togglePassword() {
         const passwordInput = document.getElementById('passwordInput');
         const icon = document.getElementById('togglePasswordIcon');
         
         if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
         } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
         }
      }

      // Cerrar mensajes de error al hacer clic en la X
      document.addEventListener('DOMContentLoaded', function() {
         const closeButtons = document.querySelectorAll('.message i');
         closeButtons.forEach(button => {
            button.addEventListener('click', function() {
               this.parentElement.remove();
            });
         });
      });
   </script>
</body>
</html>
User / IP	: 216.73.216.146
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64