96 lines
4.8 KiB
PHP
96 lines
4.8 KiB
PHP
<?php
|
|
session_start();
|
|
if (isset($_SESSION['user_id'])) {
|
|
header('Location: dashboard.php');
|
|
exit;
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Acceso - Consultoría Jurídica</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
'primary': '#0f172a',
|
|
'accent': '#c2410c',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-slate-50 flex items-center justify-center h-screen bg-[url('https://images.unsplash.com/photo-1589829085413-56de8ae18c73?q=80&w=2000&auto=format&fit=crop')] bg-cover bg-center relative">
|
|
|
|
<!-- Overlay oscuro para dar contraste -->
|
|
<div class="absolute inset-0 bg-slate-900/80 backdrop-blur-sm z-0"></div>
|
|
|
|
<div class="relative z-10 w-full max-w-md p-8 bg-white/95 backdrop-blur-md rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] border border-white/20 transform transition-all hover:scale-[1.01] duration-300">
|
|
<div class="text-center mb-8">
|
|
<i class="fas fa-balance-scale text-5xl text-accent mb-4 drop-shadow-md"></i>
|
|
<h1 class="text-2xl font-bold text-slate-800 tracking-wider">SISTEMA JURÍDICO</h1>
|
|
<p class="text-xs text-slate-500 mt-2 uppercase tracking-[0.3em] font-bold">Gestión de Documentos</p>
|
|
</div>
|
|
|
|
<?php if (isset($_SESSION['error'])): ?>
|
|
<div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg shadow-sm">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-exclamation-circle text-red-500"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm text-red-700 font-medium">
|
|
<?= htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<form action="actions/login_action.php" method="POST" class="space-y-6">
|
|
<div>
|
|
<label for="username" class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Usuario</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
<i class="fas fa-user text-slate-400"></i>
|
|
</div>
|
|
<input type="text" name="username" id="username" required
|
|
class="block w-full pl-11 pr-3 py-3 border border-slate-300 rounded-xl focus:ring-accent focus:border-accent sm:text-sm bg-slate-50 text-slate-800 transition-colors shadow-inner font-medium placeholder-slate-400"
|
|
placeholder="Ingresa tu usuario">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="password" class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Contraseña</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
<i class="fas fa-lock text-slate-400"></i>
|
|
</div>
|
|
<input type="password" name="password" id="password" required
|
|
class="block w-full pl-11 pr-3 py-3 border border-slate-300 rounded-xl focus:ring-accent focus:border-accent sm:text-sm bg-slate-50 text-slate-800 transition-colors shadow-inner font-medium placeholder-slate-400"
|
|
placeholder="••••••••">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-2">
|
|
<button type="submit"
|
|
class="w-full flex justify-center items-center gap-2 py-3.5 px-4 border border-transparent rounded-xl shadow-lg text-sm font-bold text-white bg-primary hover:bg-slate-800 hover:shadow-xl hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300 uppercase tracking-wider">
|
|
<span>Ingresar al Sistema</span>
|
|
<i class="fas fa-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|