From b815f77240bcc3db3627261e1c36dfb30d93862a Mon Sep 17 00:00:00 2001
From: andersonid <nobre.it@gmail.com>
Date: Wed, 2 Apr 2025 14:47:51 -0300
Subject: [PATCH] refactor: melhorias na interface de login e alertas, foco em
 mobile-first

---
 static/css/style.css |  42 +++++++++++--
 templates/login.html | 137 ++++++++++++++++++++++++++++++++-----------
 2 files changed, 142 insertions(+), 37 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 36fed98..7eebb80 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -41,6 +41,13 @@ body {
     height: 35px;
     width: auto;
     margin-right: 10px;
+    object-fit: contain;
+}
+
+.login-logo {
+    height: 100px;
+    width: auto;
+    object-fit: contain;
 }
 
 .nav-link {
@@ -114,16 +121,33 @@ body {
     box-shadow: 0 0 0 0.2rem rgba(232, 0, 12, 0.25);
 }
 
-.alert-success {
-    background-color: #28a745;
-    color: white;
+.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);
     border: none;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.alert-info {
+    background-color: rgba(255,255,255,0.9);
+    color: var(--secondary-color);
 }
 
 .alert-danger {
     background-color: var(--primary-color);
     color: white;
-    border: none;
+}
+
+.alert-success {
+    background-color: rgba(40, 167, 69, 0.9);
+    color: white;
 }
 
 /* Animações para feedback */
@@ -142,6 +166,10 @@ body {
         font-size: 1.2rem;
     }
     
+    .navbar-logo {
+        height: 30px;
+    }
+    
     .container {
         padding: 1rem;
     }
@@ -149,6 +177,12 @@ body {
     .card {
         margin-bottom: 1rem;
     }
+    
+    .alert {
+        margin: 1rem;
+        width: calc(100% - 2rem);
+        max-width: none;
+    }
 }
 
 .dropdown-menu {
diff --git a/templates/login.html b/templates/login.html
index 652174c..37a0733 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -3,13 +3,13 @@
 {% block title %}Login{% endblock %}
 
 {% block content %}
-<div class="row justify-content-center align-items-center min-vh-100">
-    <div class="col-md-6 col-lg-4">
+<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-5">
+            <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="mb-3 login-logo">
-                    <h2 class="card-title mb-4">Controles OCI</h2>
+                    <img src="{{ url_for('static', filename='img/logo002-alpha.png') }}" alt="Logo OCI" class="login-logo">
+                    <h2 class="card-title mb-4 text-light">Controles OCI</h2>
                 </div>
 
                 {% with messages = get_flashed_messages(with_categories=true) %}
@@ -23,44 +23,56 @@
                     {% endif %}
                 {% endwith %}
 
-                <form method="POST" action="{{ url_for('login') }}">
-                    <div class="mb-3">
-                        <label for="email" class="form-label">Email</label>
-                        <div class="input-group">
-                            <span class="input-group-text">
-                                <i class="fas fa-envelope"></i>
-                            </span>
-                            <input type="email" class="form-control" id="email" name="email" required autofocus>
+                <form method="POST" action="{{ url_for('login') }}" class="needs-validation" novalidate>
+                    <div class="form-floating mb-3">
+                        <input type="email" class="form-control bg-dark text-light" id="email" name="email" placeholder="Email" required autofocus>
+                        <label for="email" class="text-light-50">Email</label>
+                        <div class="invalid-feedback text-light">
+                            Por favor, informe seu email.
                         </div>
                     </div>
 
-                    <div class="mb-4">
-                        <label for="senha" class="form-label">Senha</label>
-                        <div class="input-group">
-                            <span class="input-group-text">
-                                <i class="fas fa-lock"></i>
-                            </span>
-                            <input type="password" class="form-control" id="senha" name="senha" required>
-                            <button class="btn btn-outline-secondary" type="button" id="togglePassword">
-                                <i class="fas fa-eye"></i>
-                            </button>
+                    <div class="form-floating mb-4">
+                        <input type="password" class="form-control bg-dark text-light" id="senha" name="senha" placeholder="Senha" required>
+                        <label for="senha" class="text-light-50">Senha</label>
+                        <div class="invalid-feedback text-light">
+                            Por favor, informe sua senha.
                         </div>
+                        <button class="btn btn-link text-light 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-primary">
+                        <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-light">
+                Precisa de ajuda? Entre em contato com o administrador.
+            </small>
+        </div>
     </div>
 </div>
 
 {% block extra_js %}
 <script>
 document.addEventListener('DOMContentLoaded', function() {
+    // Form validation
+    const form = document.querySelector('form');
+    form.addEventListener('submit', function(event) {
+        if (!form.checkValidity()) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        form.classList.add('was-validated');
+    });
+
     // Toggle password visibility
     const togglePassword = document.getElementById('togglePassword');
     const password = document.getElementById('senha');
@@ -84,23 +96,42 @@ document.addEventListener('DOMContentLoaded', function() {
 </script>
 
 <style>
-.login-logo {
-    height: 80px;
-    width: auto;
-    margin-bottom: 1rem;
+body {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    min-height: 100vh;
 }
 
-.form-floating > .form-control:focus ~ label,
-.form-floating > .form-control:not(:placeholder-shown) ~ label {
-    color: var(--primary-color);
+.card {
+    background-color: rgba(45, 45, 45, 0.95);
+    border: none;
+    border-radius: 15px;
+    backdrop-filter: blur(10px);
+}
+
+.login-logo {
+    height: 100px;
+    width: auto;
+    margin-bottom: 1rem;
+    filter: drop-shadow(0 0 10px rgba(255,255,255,0.1));
+}
+
+.form-control {
+    border: 1px solid rgba(255,255,255,0.1);
 }
 
 .form-control:focus {
+    background-color: var(--secondary-dark) !important;
     border-color: var(--primary-color);
     box-shadow: 0 0 0 0.25rem rgba(232, 0, 12, 0.25);
 }
 
-.btn-primary {
+.form-floating > .form-control:focus ~ label,
+.form-floating > .form-control:not(:placeholder-shown) ~ label {
+    color: var(--primary-light);
+    opacity: 0.8;
+}
+
+.btn-danger {
     background: var(--primary-color);
     border: none;
     padding: 12px;
@@ -108,11 +139,51 @@ document.addEventListener('DOMContentLoaded', function() {
     letter-spacing: 0.5px;
 }
 
-.btn-primary:hover {
+.btn-danger:hover {
     background: var(--primary-light);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(232, 0, 12, 0.25);
 }
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+    .card {
+        margin: 1rem;
+    }
+    
+    .card-body {
+        padding: 1.5rem;
+    }
+    
+    .login-logo {
+        height: 80px;
+    }
+}
+
+/* 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 %} 
\ No newline at end of file