255 lines
9.0 KiB
PHP
255 lines
9.0 KiB
PHP
<?php
|
||
/**
|
||
* login.php — Página de inicio de sesión
|
||
*/
|
||
require_once __DIR__ . '/config/config.php';
|
||
require_once __DIR__ . '/controllers/AuthController.php';
|
||
|
||
$auth = new AuthController();
|
||
|
||
// Si ya está autenticado, redirigir
|
||
if ($auth->estaAutenticado()) {
|
||
redirect(APP_URL . '/dashboard.php');
|
||
}
|
||
|
||
// Procesar POST
|
||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||
$auth->login();
|
||
}
|
||
|
||
$msgParam = $_GET['msg'] ?? '';
|
||
$errorMsg = $_SESSION['error_login'] ?? null;
|
||
$succMsg = $_SESSION['success_login'] ?? null;
|
||
unset($_SESSION['error_login'], $_SESSION['success_login']);
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="es" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Iniciar Sesión – <?= APP_NAME ?></title>
|
||
<meta name="description" content="Sistema de Control de Gestión de Operaciones ICT">
|
||
<link rel="stylesheet" href="<?= APP_URL ?>/assets/css/style.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||
<style>
|
||
body { background: #0f172a; margin: 0; padding: 0; height: 100vh; overflow: hidden; display: flex; font-family: 'Inter', sans-serif; }
|
||
.split-layout { display: flex; width: 100%; height: 100%; }
|
||
|
||
.split-left {
|
||
flex: 1.3;
|
||
background: url('<?= APP_URL ?>/assets/img/login_bg.png') center/cover no-repeat;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
color: white;
|
||
}
|
||
|
||
.split-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(180deg, rgba(15,23,42,0.1) 0%, rgba(15,23,42,0.95) 100%);
|
||
z-index: 1;
|
||
}
|
||
|
||
.split-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
padding: 4rem;
|
||
max-width: 800px;
|
||
animation: fadeUp 1s ease forwards;
|
||
}
|
||
|
||
.split-content h2 {
|
||
font-size: 2.5rem;
|
||
font-weight: 800;
|
||
margin-bottom: 1rem;
|
||
background: linear-gradient(90deg, #fff, var(--primary));
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
letter-spacing: -0.5px;
|
||
}
|
||
|
||
.split-content p {
|
||
font-size: 1.1rem;
|
||
line-height: 1.8;
|
||
color: rgba(255,255,255,0.75);
|
||
margin-bottom: 2rem;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.split-right {
|
||
width: 450px;
|
||
background: #0f172a;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 2.5rem;
|
||
box-shadow: -20px 0 50px rgba(0,0,0,0.5);
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.login-container {
|
||
width: 100%;
|
||
max-width: 360px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.login-header { text-align: center; margin-bottom: 2.5rem; }
|
||
.login-icon {
|
||
width: 54px; height: 54px;
|
||
margin: 0 auto 1.5rem;
|
||
background: linear-gradient(135deg, var(--secondary), var(--primary));
|
||
border-radius: 14px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.5rem; color: #0f172a;
|
||
box-shadow: 0 4px 20px rgba(0,229,255,0.4);
|
||
}
|
||
|
||
.login-header h1 { font-size: 1.8rem; font-weight: 700; color: #fff; margin-bottom: 0.2rem; }
|
||
.login-header p { font-size: 0.85rem; color: var(--text-muted); }
|
||
|
||
.form-control {
|
||
background: rgba(255,255,255,0.03);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
color: #fff;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.form-control:focus {
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 3px rgba(0,229,255,0.1);
|
||
}
|
||
|
||
.btn-submit {
|
||
background: linear-gradient(90deg, var(--primary), #00b8cc);
|
||
color: #000;
|
||
border: none;
|
||
font-weight: 600;
|
||
letter-spacing: 0.5px;
|
||
padding: 0.85rem;
|
||
border-radius: 8px;
|
||
margin-top: 1rem;
|
||
transition: all 0.3s ease;
|
||
width: 100%;
|
||
}
|
||
|
||
.btn-submit:hover {
|
||
box-shadow: 0 5px 20px rgba(0,229,255,0.4);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
@keyframes fadeUp {
|
||
from { opacity: 0; transform: translateY(30px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.split-left { display: none; }
|
||
.split-right { width: 100%; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="split-layout">
|
||
<!-- Panel Izquierdo: Gráfico Informativo -->
|
||
<div class="split-left">
|
||
<div class="split-overlay"></div>
|
||
<div class="split-content">
|
||
<h2>Transformación Digital Operacional</h2>
|
||
<p>Bienvenido a la plataforma centralizada de la Dirección de Tecnología de la Información y las Comunicaciones (DTIC). Este sistema de comando ciber-militar garantiza la eficiencia, seguridad y trazabilidad de todas las operaciones tecnológicas del Ejército Bolivariano.</p>
|
||
|
||
<div style="display:flex; gap: 2rem;">
|
||
<div style="display:flex; align-items:center; gap: 0.8rem;">
|
||
<i class="fa-solid fa-microchip" style="color:var(--primary); font-size: 1.5rem;"></i>
|
||
<span style="font-size:0.9rem; font-weight:500;">Innovación Activa</span>
|
||
</div>
|
||
<div style="display:flex; align-items:center; gap: 0.8rem;">
|
||
<i class="fa-solid fa-shield-virus" style="color:var(--secondary); font-size: 1.5rem;"></i>
|
||
<span style="font-size:0.9rem; font-weight:500;">Ciberdefensa</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Panel Derecho: Formulario Moderno -->
|
||
<div class="split-right">
|
||
<div class="login-container">
|
||
<div class="login-header">
|
||
<div class="login-icon">
|
||
<i class="fa-solid fa-server"></i>
|
||
</div>
|
||
<h1>DTIC-EB</h1>
|
||
<p>Acceso seguro al sistema de gestión</p>
|
||
</div>
|
||
|
||
<?php if ($errorMsg): ?>
|
||
<div class="alert alert-danger" style="font-size: 0.85rem; padding: 0.8rem; border-radius: 8px;">
|
||
<i class="fa-solid fa-circle-exclamation"></i> <?= htmlspecialchars($errorMsg) ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($succMsg): ?>
|
||
<div class="alert alert-success" style="font-size: 0.85rem; padding: 0.8rem; border-radius: 8px;">
|
||
<i class="fa-solid fa-circle-check"></i> <?= htmlspecialchars($succMsg) ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<form method="POST" action="<?= APP_URL ?>/login.php" novalidate>
|
||
<?= csrfField() ?>
|
||
|
||
<div class="form-group" style="margin-bottom: 1.25rem;">
|
||
<label class="form-label" for="cedula" style="font-size: 0.85rem; letter-spacing: 0.5px; opacity: 0.8;">CÉDULA DE IDENTIDAD</label>
|
||
<div style="position:relative">
|
||
<i class="fa-regular fa-id-card" style="position:absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.4);"></i>
|
||
<input type="text" class="form-control" id="cedula" name="cedula" placeholder="V-00000000" style="padding-left: 2.8rem; height: 3rem;" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group" style="margin-bottom: 1.5rem;">
|
||
<label class="form-label" for="password" style="font-size: 0.85rem; letter-spacing: 0.5px; opacity: 0.8;">CONTRASEÑA</label>
|
||
<div style="position:relative">
|
||
<i class="fa-solid fa-lock" style="position:absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.4);"></i>
|
||
<input type="password" class="form-control" id="password" name="password" placeholder="••••••••" style="padding-left: 2.8rem; padding-right: 2.8rem; height: 3rem;" autocomplete="current-password" required>
|
||
<button type="button" id="togglePass" style="position:absolute; right: 1rem; top: 50%; transform: translateY(-50%); background:none; border:none; color: var(--primary); cursor: pointer;">
|
||
<i class="fa-solid fa-eye" id="togglePassIcon"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-submit">
|
||
<i class="fa-solid fa-fingerprint" style="margin-right: 0.4rem;"></i> Autenticar
|
||
</button>
|
||
</form>
|
||
|
||
<div style="text-align:center; margin-top:2rem; display:flex; flex-direction:column; gap:0.8rem;">
|
||
<a href="<?= APP_URL ?>/recuperar_password.php" style="color:rgba(255,255,255,0.5); font-size: 0.8rem; text-decoration: none; transition: color 0.3s;" onmouseover="this.style.color='var(--primary)'" onmouseout="this.style.color='rgba(255,255,255,0.5)'">
|
||
¿Olvidaste tu contraseña?
|
||
</a>
|
||
<a href="<?= APP_URL ?>/register.php" style="color:var(--primary); font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: all 0.3s;">
|
||
Solicitar acceso especial
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.getElementById('togglePass').addEventListener('click', function() {
|
||
const pass = document.getElementById('password');
|
||
const icon = document.getElementById('togglePassIcon');
|
||
if (pass.type === 'password') {
|
||
pass.type = 'text';
|
||
icon.classList.replace('fa-eye', 'fa-eye-slash');
|
||
} else {
|
||
pass.type = 'password';
|
||
icon.classList.replace('fa-eye-slash', 'fa-eye');
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|