comunatec/controles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplifica e moderniza a tela de login

Browse Source
This commit is contained in:
andersonid
2025-04-02 17:44:46 -03:00
parent ce3b5a4231
commit c44ce94bef
3 changed files with 101 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
templates/login.html
View File

@@ -3,60 +3,59 @@
{% block title %}Login{% endblock %}
{% block content %}
<div class="row justify-content-center align-items-center min-vh-100 m-0">
<div class="col-md-6 col-lg-4 px-3">
<div class="card shadow-lg animate__animated animate__fadeIn">
<div class="card-body p-4 p-sm-5">
<div class="text-center mb-4">
<img src="{{ url_for('static', filename='img/logo002-alpha.png') }}" alt="Logo OCI" class="login-logo">
<h2 class="card-title mb-4">Controles OCI</h2>
<div class="login-container">
<div class="login-content">
<div class="text-center mb-4">
<img src="{{ url_for('static', filename='img/logo002-alpha.png') }}" alt="Logo OCI" class="login-logo mb-3">
<h4 class="login-title">Controles OCI</h4>
<p class="login-subtitle">Prossiga com sua conta</p>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
<form method="POST" action="{{ url_for('login') }}" class="needs-validation" novalidate>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required autofocus>
<label for="email">Email</label>
<div class="invalid-feedback">
Por favor, informe seu email.
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
<form method="POST" action="{{ url_for('login') }}" class="needs-validation" novalidate>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required autofocus>
<label for="email">Email</label>
<div class="invalid-feedback">
Por favor, informe seu email.
</div>
</div>
<div class="form-floating mb-4">
<input type="password" class="form-control" id="senha" name="senha" placeholder="Senha" required>
<label for="senha">Senha</label>
<div class="invalid-feedback">
Por favor, informe sua senha.
</div>
<button class="btn btn-link text-secondary position-absolute end-0 top-50 translate-middle-y me-2" type="button" id="togglePassword">
<i class="fas fa-eye"></i>
</button>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-danger btn-lg">
<i class="fas fa-sign-in-alt me-2"></i>Entrar
</button>
</div>
</form>
</div>
</div>
<div class="text-center mt-4">
<small class="text-dark">
Precisa de ajuda? Entre em contato com o administrador.
</small>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="senha" name="senha" placeholder="Senha" required>
<label for="senha">Senha</label>
<div class="invalid-feedback">
Por favor, informe sua senha.
</div>
<button class="btn btn-link text-secondary position-absolute end-0 top-50 translate-middle-y me-2" type="button" id="togglePassword">
<i class="fas fa-eye"></i>
</button>
</div>
<div class="form-floating mb-4">
<input type="text" class="form-control" id="otp" name="otp" placeholder="Código OTP" required>
<label for="otp">Código OTP</label>
<div class="invalid-feedback">
Por favor, informe o código OTP do seu autenticador.
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-danger btn-lg">
<i class="fas fa-sign-in-alt me-2"></i>Entrar
</button>
</div>
</form>
</div>
</div>
@@ -99,36 +98,60 @@ document.addEventListener('DOMContentLoaded', function() {
body {
background: linear-gradient(135deg, var(--primary-color) 40%, white 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.card {
background-color: white;
border: none;
border-radius: 15px;
.login-container {
width: 100%;
max-width: 400px;
margin: auto;
}
.login-content {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 2rem;
border-radius: 20px;
}
.login-logo {
height: 100px;
height: 60px;
width: auto;
margin-bottom: 1rem;
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.25rem rgba(232, 0, 12, 0.25);
.login-title {
color: var(--secondary-color);
font-weight: 500;
margin-bottom: 0.5rem;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
color: var(--primary-color);
.login-subtitle {
color: var(--secondary-light);
font-size: 0.9rem;
margin-bottom: 2rem;
}
.form-floating > .form-control {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
height: calc(3.5rem + 2px);
line-height: 1.25;
}
.form-floating > label {
padding: 1rem;
}
.btn-danger {
background: var(--primary-color);
border: none;
padding: 12px;
border-radius: 12px;
font-weight: 500;
letter-spacing: 0.5px;
font-size: 1rem;
transition: all 0.3s ease;
}
.btn-danger:hover {
@@ -137,45 +160,20 @@ body {
box-shadow: 0 4px 12px rgba(232, 0, 12, 0.25);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.card {
margin: 1rem;
.login-container {
max-width: 100%;
}
.card-body {
.login-content {
padding: 1.5rem;
border-radius: 16px;
}
.login-logo {
height: 80px;
height: 50px;
}
}
/* Alert adjustments */
.alert {
position: fixed;
top: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 1050;
min-width: 300px;
max-width: 90%;
text-align: center;
backdrop-filter: blur(5px);
}
.alert-info {
background-color: rgba(255,255,255,0.9);
border: none;
color: var(--secondary-color);
}
.alert-danger {
background-color: var(--primary-color);
color: white;
border: none;
}
</style>
{% endblock %}
{% endblock %}