<!DOCTYPE html>

<html lang="es">

<head>

  <meta charset="UTF-8">

  <title>Pedido Cliente</title>

  <style>

    body {

      font-family: Arial;

      max-width: 500px;

      margin: 40px auto;

      padding: 20px;

    }

    input, select {

      width: 100%;

      padding: 10px;

      margin: 8px 0;

    }

    button {

      width: 100%;

      padding: 12px;

      background: #25D366;

      color: white;

      border: none;

      font-size: 16px;

      cursor: pointer;

    }

  </style>

</head>

<body>


<h2>🛒 Pedido de Cliente</h2>


<input id="nombre" placeholder="Nombre (Ej: María González)">

<input id="calzado" placeholder="Talla de calzado (Ej: 24 MX / 7 US)">

<input id="ropa" placeholder="Talla de ropa (XS / S / M / L)">

<input id="producto" placeholder="Producto que le interesa">

<input id="color" placeholder="Color preferido">


<button onclick="sendWhatsApp()">Enviar por WhatsApp</button>


<script>

function sendWhatsApp() {

  let nombre = document.getElementById("nombre").value;

  let calzado = document.getElementById("calzado").value;

  let ropa = document.getElementById("ropa").value;

  let producto = document.getElementById("producto").value;

  let color = document.getElementById("color").value;


  let phone = "524731527304"; // your real number


  let message = `🛒 Nuevo Pedido

Nombre: ${nombre}

Calzado: ${calzado}

Ropa: ${ropa}

Producto: ${producto}

Color: ${color}`;


  let url = "https://wa.me/" + phone + "?text=" + encodeURIComponent(message);


  // safer open method

  window.location.href = url;

}

</script>


</body>

</html>