- Colección exclusiva para venta mayorista

 <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acceso exclusivo</title>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  background: radial-gradient(circle at center, #2a1f23 0%, #151010 55%, #0d0a0a 100%);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.box {
  width: 100%;
  max-width: 380px;
  background: rgba(20,14,14,0.9);
  border: 1px solid rgba(255,214,10,0.2);
  border-radius: 18px;
  padding: 35px 25px;
  text-align: center;
}

.logo {
  width: 140px;
  margin: 0 auto 15px;
  display: block;
}

h1 {
  color: #f4d20a;
  margin-bottom: 8px;
}

.sub {
  font-size: 13px;
  color: #ccc;
  margin-bottom: 15px;
}

.error {
  color: #ff4d4d;
  font-size: 13px;
  margin-bottom: 10px;
  display: none;
}

input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #444;
  background: #1a1414;
  color: white;
  margin-bottom: 12px;
}

button {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.btn-login {
  background: linear-gradient(90deg, #f4d20a, #ffea55);
  color: #111;
  margin-bottom: 10px;
}

.btn-wsp {
  background: #25D366;
  color: white;
  text-decoration: none;
  display: block;
  margin-top: 10px;
  padding: 12px;
  border-radius: 8px;
}

.hidden {
  display: none;
}
</style>
</head>

<body>

<div class="box" id="loginBox">

  <!-- 🔥 LOGO -->
  <img src="URL_DE_TU_LOGO_AQUI" class="logo" alt="Logo">

  <h1>Acceso exclusivo</h1>
  <p class="sub">Sección reservada para clientes mayoristas</p>

  <div class="error" id="errorMsg">Contraseña incorrecta</div>

  <input type="password" id="password" placeholder="Contraseña">

  <button class="btn-login" onclick="checkPassword()">Entrar</button>

  <a 
    class="btn-wsp"
    href="https://wa.me/5491163640891?text=%F0%9F%91%87%0A%0Amayorista.%0APara%20habilitar%20el%20ingreso%20necesito%3A%0ANombre%3A%0ANombre%20de%20mi%20negocio%3A%0AInstagram%20o%20canal%20de%20ventas%3A%0ACiudad%3A%0A%C2%BFTenes%20local%2C%20showroom%20o%20venta%20online%3F"
    target="_blank">
    Solicitar acceso por WhatsApp
  </a>

</div>

<!-- CONTENIDO -->
<div class="box hidden" id="contentBox">
  <h1>Bienvenido</h1>
  <p>Acceso habilitado correctamente.</p>
</div>

<script>
const PASSWORD = "1234"; // CAMBIAR

function checkPassword() {
  const input = document.getElementById("password").value;
  const error = document.getElementById("errorMsg");

  if (input === PASSWORD) {
    document.getElementById("loginBox").classList.add("hidden");
    document.getElementById("contentBox").classList.remove("hidden");
  } else {
    error.style.display = "block";
  }
}
</script>

</body>
</html>
Acceder
