You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.9 KiB
80 lines
2.9 KiB
{% extends "Base.html" %}
|
|
|
|
{% block content %}
|
|
{% if user.is_authenticated %}
|
|
|
|
{% else %}
|
|
<style>
|
|
body {
|
|
background: #2c2f36; /* Color de fondo oscuro */
|
|
color: #fff; /* Texto en blanco para contraste */
|
|
}
|
|
.card {
|
|
background-color: #ffffff; /* Fondo blanco para el formulario */
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.card-body {
|
|
padding: 30px;
|
|
}
|
|
.form-label {
|
|
color: #333; /* Color de las etiquetas */
|
|
}
|
|
.btn-primary {
|
|
background-color: #007bff; /* Botón azul */
|
|
border-color: #007bff;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #0056b3; /* Color al pasar el ratón */
|
|
border-color: #0056b3;
|
|
}
|
|
.alert {
|
|
background-color: #f8d7da; /* Fondo rojo suave para los errores */
|
|
border-color: #f5c6cb;
|
|
}
|
|
.alert p {
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|
|
<div class="container-fluid p-0" style="height: 100vh; background-color: #2c2f36;">
|
|
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
|
|
<div class="card shadow-lg p-4" style="max-width: 400px; border-radius: 12px; background-color: #ffffff;">
|
|
<div class="card-body">
|
|
<h3 class="text-center mb-4" style="color: #333;">Iniciar Sesión</h3>
|
|
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<div class="mb-3">
|
|
<label for="username" class="form-label" style="color: #333;">Nombre de Usuario</label>
|
|
<input type="text" class="form-control" id="username" name="username" required
|
|
style="border-radius: 10px; box-shadow: none; transition: all 0.3s ease;">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label" style="color: #333;">Contraseña</label>
|
|
<input type="password" class="form-control" id="password" name="password" required
|
|
style="border-radius: 10px; box-shadow: none; transition: all 0.3s ease;">
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-dark w-100" style="border-radius: 10px; font-size: 16px; letter-spacing: 1px;">
|
|
Iniciar Sesión
|
|
</button>
|
|
</form>
|
|
<div class="text-center mt-3">
|
|
<a href="{% url 'signup' %}" class="text-muted" style="font-size: 14px;">Registrar</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endblock %}
|
|
{% block footer %}
|
|
<footer class="footer mt-auto py-3 bg-dark text-white">
|
|
<div class="container">
|
|
<span class="text-muted">© 2024 Mi Aplicación. Todos los derechos reservados.</span>
|
|
</div>
|
|
</footer>
|
|
{% endblock %}
|
|
|