Masterstreet
/
pedidos-express


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
							<!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>

        <span id="registerErrorMessage" class="text-red-500 text-sm hidden"></span>
        <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>

        <!-- === PÁGINA DE REGISTRO EXITOSO === -->
    <div id="successPage" class="hidden min-h-screen bg-gray-100 flex items-center justify-center p-4">
      <div class="bg-white w-full max-w-lg p-10 rounded-xl shadow-xl space-y-8 text-center">
        <!-- Icono de éxito -->
        <div class="flex justify-center">
          <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center">
            <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
          </div>
        </div>

        <!-- Mensaje de éxito -->
        <div>
          <h1 class="text-3xl font-bold text-gray-900 mb-3">¡Registro Exitoso!</h1>
          <p class="text-gray-600 text-lg">
            Tu cuenta ha sido creada correctamente. Recibirás un correo electrónico de confirmación en breve.
          </p>
          <p>
            Espero que disfrutes de la experiencia de pedidos con nosotros.
          </p>
        </div>
      </div>
    </div>
</body>
</html>