Interactive Login Portal - Copy this Html, Tailwind Component to your project
{% load static %} <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Claro CRM</title> <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="{% static 'css/inicio_de_sesion.css'%}"> <link rel="shortcut icon" href="{% static 'img/favicon.png' %}" type="image/x-icon"> </head> <body> <!-- Loader --> <div class="loader-container" id="loader"> <div class="loader"></div> </div> <!-- Contenido principal --> <div class="main-content" id="main-content"> <div class="login-page"> <div class="welcome-container"> <h1 class="welcome-title">Bienvenidos a Claro CRM</h1> <p class="welcome-text">Claro CRM es una plataforma integral de gestión de relaciones con clientes que permite administrar todo su proceso de ventas desde un único lugar.</p> </div> <div class="login-container"> <img src="{% static 'images/claro_logo.png' %}" alt="Logo Claro"> <h2 class="login-title">INICIO DE SESIÓN</h2> <form method="post" action="{% url 'inicio_de_sesion' %}"> {% csrf_token %} <div class="form-floating mb-3"> <div class="input-group flex-nowrap"> <span class="input-group-text"> <i class="bi bi-person-fill"></i> </span> <input type="text" class="form-control" name="username" placeholder="Ingresa tu usuario" required autocomplete="off" autofocus> </div> </div> <div class="form-floating mb-3"> <div class="input-group flex-nowrap"> <span class="input-group-text"> <i class="bi bi-lock-fill"></i> </span> <input type="password" class="form-control" name="password" placeholder="Ingresa tu contraseña" required autocomplete="off"> </div> </div> <div class="d-grid"> <button type="submit" class="btn btn-primary btn-login"> Ingresar <i class="bi bi-box-arrow-in-right ms-2"></i> </button> </div> </form> </div> </div> </div> <script> function hideLoader() { document.getElementById('loader').style.opacity = '0'; document.getElementById('loader').style.transition = 'opacity 0.3s ease-out'; setTimeout(() => { document.getElementById('loader').style.display = 'none'; document.getElementById('main-content').style.display = 'block'; }, 500); } window.addEventListener('load', function() { setTimeout(hideLoader, 1000); }); </script> </body> </html>
