Masterstreet
/
pedidos-express


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal de Registro</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="/register/app.js" defer></script>
</head>
<body class="bg-gray-100 p-8">

    <!-- === MODAL DE REGISTRO === -->
    <div id="registerModal"
         class="fixed hidden inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
      <form id="registerForm" class="bg-white w-full max-w-md p-8 rounded-xl shadow-xl space-y-6">
        <div class="text-center">
          <h2 class="text-2xl font-bold text-gray-900">¡Regístrate!</h2>
          <p id="registerMessage" class="text-sm text-gray-600 mt-2">
            Crea tu cuenta para realizar pedidos
          </p>
        </div>

        <div class="space-y-4">
          <div>
            <label for="nameInput" class="block text-sm font-medium text-gray-700 mb-2">
              Nombre completo
            </label>
            <input id="nameInput"
                   name="name"
                   type="text"
                    pattern="[A-Za-zÀ-ÿ\s]{2,}"
                   class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:ring-2 focus:ring-[#101419] focus:border-transparent outline-none transition-all"
                   placeholder="Juan Pérez" 
                   required />
          </div>

          <div>
            <label for="emailRegisterInput" class="block text-sm font-medium text-gray-700 mb-2">
              Correo electrónico
            </label>
            <input id="emailRegisterInput"
                   name="email"
                   type="email"
                   class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:ring-2 focus:ring-[#101419] focus:border-transparent outline-none transition-all"
                   placeholder="tu@email.com" 
                   required />
          </div>

          <div>
            <label for="rutInput" class="block text-sm font-medium text-gray-700 mb-2">
              RUT
            </label>
            <input id="rutInput"
                   name="rut"
                   type="text"
                   maxlength="12"
                   pattern="^\d{1,2}\.\d{3}\.\d{3}-[\dkK]$"
                   class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:ring-2 focus:ring-[#101419] focus:border-transparent outline-none transition-all"
                   placeholder="12345678-9" 
                   required />
          </div>
        </div>

        <div class="flex gap-3">
          <button id="registerAcceptBtn"
                  type="submit"
                  class="flex-1 bg-[#101419] hover:bg-[#37404a] text-white py-3 rounded-lg font-medium transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-[#101419]">
            Registrarse
          </button>
        </div>
      </form>
    </div>
</body>
</html>