Login Website Empresarial html

    Código Fuente
    
  
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Login - Mi Empresa</title>
  <style>
    :root{
      --primary:#0d47a1;
      --accent:#ff9800;
      --muted:#6b7280;
      --bg:#f5f7fb;
      --card:#ffffff;
      --radius:12px;
      --shadow: 0 8px 30px rgba(13,71,161,0.08);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
      background:var(--bg);
      color:#111827;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:32px;
    }

    .container{
      width:100%;
      max-width:1100px;
      background:var(--card);
      border-radius:var(--radius);
      overflow:hidden;
      display:grid;
      grid-template-columns: 1fr 1fr;
      box-shadow:var(--shadow);
    }

    /* Left image */
    .side-image{
      min-height:420px;
      background-image: linear-gradient(90deg, rgba(13,71,161,0.85), rgba(13,71,161,0.55)), url('https://picsum.photos/900/900?business,office');
      background-size:cover;
      background-position:center;
      color:#fff;
      padding:36px;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      gap:12px;
    }

    .side-image h2{
      margin:0;
      font-size:1.6rem;
      letter-spacing:0.2px;
    }

    .side-image p{
      margin:0;
      color: rgba(255,255,255,0.9);
      font-size:0.98rem;
      max-width:380px;
      line-height:1.45;
    }

    /* Right form */
    .login-wrap{
      padding:40px 42px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .login-card{
      width:100%;
      max-width:420px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:18px;
    }

    .brand .logo{
      width:46px;
      height:46px;
      border-radius:8px;
      background:linear-gradient(135deg,var(--primary), #173c97);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-weight:700;
      font-size:1.1rem;
      box-shadow: 0 6px 18px rgba(13,71,161,0.12);
    }

    .brand h1{
      font-size:1.05rem;
      margin:0;
      color:var(--primary);
    }

    .lead{
      color:var(--muted);
      margin:6px 0 22px 0;
      font-size:0.95rem;
    }

    form{
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    label{
      font-size:0.82rem;
      color: #374151;
      margin-bottom:6px;
      display:block;
    }

    .input{
      width:100%;
      display:flex;
      align-items:center;
      gap:8px;
      background:#f8fafc;
      border:1px solid #e6eef9;
      padding:12px 14px;
      border-radius:10px;
    }

    .input input{
      border:0;
      outline:none;
      width:100%;
      font-size:0.95rem;
      background:transparent;
    }

    .small{
      font-size:0.85rem;
      color:var(--muted);
    }

    .row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
    }

    .checkbox{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:0.9rem;
      color:var(--muted);
    }

    .btn{
      display:inline-block;
      background:var(--primary);
      color:#fff;
      border:0;
      padding:12px 16px;
      border-radius:10px;
      font-weight:600;
      cursor:pointer;
      width:100%;
      font-size:1rem;
      box-shadow: 0 8px 20px rgba(13,71,161,0.12);
    }

    .btn.secondary{
      background:transparent;
      color:var(--primary);
      border:1px solid rgba(13,71,161,0.12);
      box-shadow:none;
    }

    .forgot{
      text-decoration:none;
      color:var(--muted);
      font-size:0.9rem;
    }

    .or{
      text-align:center;
      color:var(--muted);
      font-size:0.88rem;
      margin:6px 0 2px;
    }

    .foot{
      margin-top:18px;
      text-align:center;
      font-size:0.9rem;
      color:var(--muted);
    }

    /* Password toggle button */
    .toggle-btn{
      border:0;
      background:transparent;
      cursor:pointer;
      font-size:0.9rem;
      color:var(--muted);
      padding:6px;
    }

    /* Focus states */
    .input:focus-within{
      box-shadow: 0 6px 20px rgba(13,71,161,0.06);
      border-color: rgba(13,71,161,0.14);
    }

    /* Responsive */
    @media (max-width:900px){
      .container{
        grid-template-columns: 1fr;
      }
      .side-image{
        min-height:200px;
        padding:20px;
      }
      .login-wrap{
        padding:28px;
      }
    }

    @media (max-width:420px){
      body{ padding:18px }
      .login-card{ max-width:100% }
      .side-image h2{ font-size:1.2rem }
    }

    /* Accessibility improvements */
    input:invalid { box-shadow:none; }
  </style>
</head>
<body>
  <main class="container" role="main" aria-labelledby="login-title">
    <aside class="side-image" aria-hidden="true">
      <h2>Soluciones empresariales que funcionan</h2>
      <p>Entrar a tu panel seguro. Controla clientes, proyectos y reportes desde un solo lugar con acceso confiable y profesional.</p>
    </aside>

    <section class="login-wrap" aria-label="Formulario de acceso">
      <div class="login-card" role="form" aria-labelledby="login-title">
        <div class="brand" aria-hidden="false">
          <div class="logo" aria-hidden="true">ME</div>
          <div>
            <h1 id="login-title">Mi Empresa</h1>
            <div class="small">Acceso al panel administrativo</div>
          </div>
        </div>

        <p class="lead">Introduce tus credenciales para iniciar sesión.</p>

        <form id="loginForm" action="/login" method="POST" novalidate>
          <div>
            <label for="email">Correo electrónico</label>
            <div class="input">
              <input id="email" name="email" type="email" placeholder="nombre@ejemplo.com" required aria-required="true" />
            </div>
          </div>

          <div>
            <label for="password">Contraseña</label>
            <div class="input" style="justify-content:space-between;">
              <input id="password" name="password" type="password" placeholder="••••••••" required aria-required="true" minlength="6" />
              <button type="button" class="toggle-btn" id="togglePassword" aria-label="Mostrar contraseña">Mostrar</button>
            </div>
          </div>

          <div class="row">
            <label class="checkbox">
              <input type="checkbox" name="remember" id="remember" />
              <span>Recuérdame</span>
            </label>
            <a class="forgot" href="/forgot-password">¿Olvidaste tu contraseña?</a>
          </div>

          <div>
            <button type="submit" class="btn" id="submitBtn">Iniciar sesión</button>
          </div>

          <div class="or">o</div>

          <div>
            <button type="button" class="btn secondary" onclick="location.href='/signup'">Crear cuenta</button>
          </div>

          <div class="foot">
            <small>Al continuar aceptas los <a href="/terms">Términos</a> y la <a href="/privacy">Política de privacidad</a>.</small>
          </div>
        </form>
      </div>
    </section>
  </main>

  <script>
    // Mostrar / ocultar contraseña
    (function(){
      const pw = document.getElementById('password');
      const btn = document.getElementById('togglePassword');
      btn.addEventListener('click', () => {
        const isPwd = pw.getAttribute('type') === 'password';
        pw.setAttribute('type', isPwd ? 'text' : 'password');
        btn.textContent = isPwd ? 'Ocultar' : 'Mostrar';
        btn.setAttribute('aria-pressed', isPwd ? 'true' : 'false');
        pw.focus();
      });

      // Validación básica y bloqueo de botón si el formulario no es válido
      const form = document.getElementById('loginForm');
      const submit = document.getElementById('submitBtn');

      function validateForm(){
        // HTML5 will show the native validation on submit; here we only toggle disabled state
        submit.disabled = !form.checkValidity();
        submit.style.opacity = submit.disabled ? '0.85' : '1';
        submit.style.cursor = submit.disabled ? 'not-allowed' : 'pointer';
      }

      // Inicial
      validateForm();

      // Escuchar cambios para validar en vivo
      form.addEventListener('input', validateForm);

      // Previene envío real si no es válido (proporciona experiencia consistente)
      form.addEventListener('submit', function(e){
        if(!form.checkValidity()){
          e.preventDefault();
          // Forzar que el navegador muestre mensajes de validación
          const firstInvalid = form.querySelector(':invalid');
          if(firstInvalid) firstInvalid.focus();
        } else {
          // Aquí puedes mostrar algún loader o deshabilitar botón para evitar envíos múltiples
          submit.disabled = true;
          submit.textContent = 'Iniciando...';
        }
      });
    })();
  </script>
</body>
</html>
Nos apoyas abriendo una pequeña publicidad 🙏
Header Ads Widget

Login Website Empresarial html

Posted by: Administrador

Publicar un comentario

0 Comentarios

Sigueme

🎬 ¡Suscríbete a mi canal!

Redes Sociales

Herramientas de mano

Comentarios

Categorias

Recomendacion

LO MAS POPULAR

Video Popular

Tags

Seguidores

Visitas del mes pasado a la página

Menu Footer Widget

Header Ads Widget

Login Website Empresarial html

Posted by: Administrador

Tal vez te interesen estas entradas

Publicar un comentario

0 Comentarios

Sigueme

🎬 ¡Suscríbete a mi canal!

Redes Sociales

Herramientas de mano

Comentarios

Categorias

Recomendacion

LO MAS POPULAR

TOP 5

Video Popular

Tags

Seguidores

Visitas del mes pasado a la página

Menu Footer Widget
