Tul xxx Tul

Viewing: admin_login.php

<?php

include '../components/connect.php';
require_once '../components/admin_roles.php';
ensureAdminRolesSchema($conn);
// 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'];
      refreshAdminRole($conn, (int)$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">
   <title>DONDEEDY</title>
   <link rel="icon" href="../images/favicon.png" type="image/x-icon">

   <!-- font awesome cdn link  -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">

   <style>
      :root {
         --brand-primary: #b30000;
         --brand-accent: #ffc107;
         --glass-bg: rgba(255,255,255,0.92);
      }
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }

      body {
         min-height: 100vh;
         background-image: url('../images/2.png');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         background-attachment: fixed;
         display: flex;
         align-items: center;
         justify-content: center;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         padding: 20px;
      }
      body::before {
         content: '';
         position: fixed;
         inset: 0;
         background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.55) 100%),
                    radial-gradient(900px 600px at 12% 8%, rgba(255,193,7,0.22), transparent 60%),
                    radial-gradient(800px 600px at 85% 90%, rgba(179,0,0,0.25), transparent 55%);
         mix-blend-mode: multiply;
         pointer-events: none;
         z-index: 0;
      }

      .login-container {
         background: var(--glass-bg);
         backdrop-filter: blur(10px);
         border-radius: 20px;
         padding: 2.5rem;
         max-width: 420px;
         width: 100%;
         position: relative;
         animation: fadeInDown 0.7s ease-out;
         border: 2px solid transparent;
         background-image: linear-gradient(var(--glass-bg), var(--glass-bg)), linear-gradient(135deg, rgba(255,193,7,0.6), rgba(179,0,0,0.6));
         background-clip: padding-box, border-box;
         box-shadow: 0 15px 35px rgba(0,0,0,0.12), 0 6px 18px rgba(179,0,0,0.08);
         z-index: 1;
      }
      .login-container::after {
         content: '';
         position: absolute;
         top: 0; left: 20%; right: 20%;
         height: 3px;
         background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary));
         border-radius: 0 0 2px 2px;
         opacity: .9;
      }

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

      .login-logo {
         width: 86px;
         height: 86px;
         object-fit: contain;
         margin: 0 auto 20px;
         display: block;
         border-radius: 16px;
         background: transparent;
         padding: 0;
         filter: drop-shadow(0 6px 14px rgba(179,0,0,0.25));
      }

      .login-title {
         font-weight: 700;
         color: var(--brand-primary);
         margin-bottom: 1.5rem;
         text-align: center;
         font-size: 1.8rem;
         letter-spacing: 0.5px;
      }

      .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;
      }

      .form-control:focus {
         border-color: var(--brand-primary);
         box-shadow: 0 0 0 0.2rem rgba(179, 0, 0, 0.20);
         background: #fff;
      }

      .input-with-icon { position: relative; }
      .input-icon {
         position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
         color: var(--brand-primary); font-size: 1.05rem;
      }
      .form-control.with-icon { padding-left: 2.5rem; }

      .btn-login {
         background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
         color: #fff;
         font-weight: 600;
         border: none;
         border-radius: 12px;
         padding: 0.875rem 0;
         font-size: 1.1rem;
         box-shadow: 0 4px 15px rgba(179, 0, 0, 0.25);
         transition: all 0.3s ease;
         width: 100%;
         margin-top: 0.5rem;
      }

      .btn-login:hover, .btn-login:focus {
         background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
         transform: translateY(-1px);
         box-shadow: 0 6px 20px rgba(179, 0, 0, 0.25);
      }

      .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: 15px;
         top: 50%;
         transform: translateY(-50%);
         cursor: pointer;
         color: #6c757d;
         transition: color 0.3s ease;
         z-index: 10;
      }

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

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

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

      /* Responsive Design */
      @media (max-width: 480px) {
         body {
            padding: 15px;
         }

         .login-container {
            padding: 2rem 1.5rem;
            max-width: 100%;
            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 */
         }
      }

      @media (max-width: 360px) {
         .login-container {
            padding: 1.5rem 1rem;
         }

         .login-title {
            font-size: 1.4rem;
         }
      }

      /* Mejoras para pantallas grandes */
      @media (min-width: 768px) {
         .login-container {
            max-width: 450px;
         }
      }
   </style>
</head>
<body>
   <div class="login-container">
      <!-- Logo -->
      <div class="text-center mb-3">
         <img src="../images/favicon.png" alt="Logo DONDEEDY" class="login-logo">
      </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-with-icon">
            <span class="input-icon"><i class="bi bi-person"></i></span>
            <input type="text" name="name" maxlength="20" required placeholder="Usuario" class="form-control with-icon" oninput="this.value = this.value.replace(/\s/g, '')" autocomplete="username">
         </div>
         
         <div class="form-group">
            <div class="password-container input-with-icon">
               <span class="input-icon"><i class="bi bi-lock"></i></span>
               <input type="password" id="passwordInput" name="pass" maxlength="20" required placeholder="Contraseña" class="form-control with-icon" oninput="this.value = this.value.replace(/\s/g, '')" autocomplete="current-password">
               <span class="password-toggle" onclick="togglePassword()">
                  <i id="togglePasswordIcon" class="bi bi-eye-slash"></i>
               </span>
            </div>
         </div>
         
         <button type="submit" name="submit" class="btn btn-login">
            <i class="bi bi-box-arrow-in-right me-2"></i> Entrar
         </button>

         <div class="text-center mt-3">
            <a href="../index.php" class="btn btn-regresar" style="width: 100%; justify-content: center;">
               <i class="bi bi-arrow-left"></i> Regresar
            </a>
         </div>
      </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('bi-eye-slash');
            icon.classList.add('bi-eye');
         } else {
            passwordInput.type = 'password';
            icon.classList.remove('bi-eye');
            icon.classList.add('bi-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