165 lines
7.0 KiB
HTML
165 lines
7.0 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Acceso al Sistema - Ejército Bolivariano</title>
|
|
<link rel="stylesheet" href="/static/assets/css/bootstrap.min.css">
|
|
|
|
<!-- Font Awesome 6.x (última versión estable) -->
|
|
<link rel="stylesheet" href="/static/assets/fonts/iconos/css/all.min.css">
|
|
|
|
<style>
|
|
.preloader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
z-index: 9999;
|
|
display: none;
|
|
}
|
|
.spinner {
|
|
animation: rotate 2s linear infinite;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
@keyframes rotate {
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
.login-card {
|
|
transition: transform 0.3s ease;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
}
|
|
.login-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gradient-primary d-flex justify-content-center align-items-center vh-100" style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);">
|
|
|
|
<!-- Preloader -->
|
|
<!-- <div class="preloader d-flex justify-content-center align-items-center">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Cargando...</span>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
|
|
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 col-lg-6">
|
|
<!-- Tarjeta de Login -->
|
|
<div class="login-card card p-4">
|
|
<div class="card-body">
|
|
<!-- Encabezado -->
|
|
<div class="text-center mb-4">
|
|
<img src="{% static 'img/transporte.png' %}" alt="Escudo Militar" class="mb-3" width="120">
|
|
<h2 class="fw-bold text-uppercase mb-1" style="color: #1e3c72;">Servicio de Transporte</h2>
|
|
<h4 class="text-muted">Ejército Bolivariano</h4>
|
|
</div>
|
|
|
|
<!-- Mensajes -->
|
|
{% if messages %}
|
|
<div class="alert-container">
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Formulario -->
|
|
|
|
<!-- <div class="alert alert-info mt-3">
|
|
<small>Licencia válida hasta: {{ expiration_date|date:"d/m/Y" }}</small>
|
|
</div> -->
|
|
|
|
<form method="POST" id="loginForm">
|
|
{% csrf_token %}
|
|
<!-- Usuario -->
|
|
<div class="mb-3">
|
|
<label class="form-label text-dark">Usuario</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-user"></i></span>
|
|
<input type="text" name="username" class="form-control" placeholder="Nombre de usuario" required>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contraseña -->
|
|
<div class="mb-4">
|
|
<label class="form-label text-dark">Contraseña</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-lock"></i></span>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
id="password"
|
|
class="form-control"
|
|
placeholder="Contraseña"
|
|
required
|
|
autocomplete="current-password"
|
|
>
|
|
<button class="btn btn-outline-secondary" type="button" id="togglePassword">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Botón de acceso -->
|
|
<button type="submit" class="btn btn-primary w-100 py-2 fw-bold">
|
|
<span class="submit-text">Acceder al Sistema</span>
|
|
<div class="spinner-border spinner-border-sm d-none" role="status">
|
|
<span class="visually-hidden">Cargando...</span>
|
|
</div>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/static/assets/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Mostrar/ocultar contraseña
|
|
document.getElementById('togglePassword').addEventListener('click', function() {
|
|
const password = document.getElementById('password');
|
|
const icon = this.querySelector('i');
|
|
if (password.type === 'password') {
|
|
password.type = 'text';
|
|
icon.classList.replace('fa-eye', 'fa-eye-slash');
|
|
} else {
|
|
password.type = 'password';
|
|
icon.classList.replace('fa-eye-slash', 'fa-eye');
|
|
}
|
|
});
|
|
|
|
// Manejar el preloader
|
|
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
|
const btn = this.querySelector('button[type="submit"]');
|
|
const preloader = document.querySelector('.preloader');
|
|
|
|
btn.disabled = true;
|
|
btn.querySelector('.submit-text').classList.add('d-none');
|
|
btn.querySelector('.spinner-border').classList.remove('d-none');
|
|
preloader.style.display = 'flex';
|
|
});
|
|
|
|
// Animación de entrada
|
|
window.addEventListener('load', () => {
|
|
document.querySelector('.login-card').style.opacity = '1';
|
|
document.querySelector('.login-card').style.transform = 'translateY(0)';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |