Masterstreet
/
pedidos-express


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604
							<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Recuperar PIN - Biergarten Klein</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Meta tags para evitar cache -->
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" as="style" onload="this.rel='stylesheet'"
        href="https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans:wght@400;500;700;900&family=Spline+Sans:wght@400;500;700">
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
   <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'custom-dark': '#101419',
                        'custom-dark-hover': '#37404a',
                        'gray-50': '#f9fafb',
                        'gray-100': '#f3f4f6',
                    }
                }
            }
        }
    </script>
</head>

<body class="min-h-screen bg-gray-50 flex items-center justify-center p-4" style='font-family:"Spline Sans","Noto Sans",sans-serif;'>
  
  <div class="w-full max-w-md">
    <!-- Header -->
    <div class="text-center mb-8">
      <div class="inline-flex items-center justify-center w-16 h-16 bg-[#101419] rounded-full mb-4">
        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
        </svg>
      </div>
      <h1 class="text-[26px] font-bold text-[#101419] tracking-tight mb-2">
        ¿Olvidaste tu PIN?
      </h1>
      <p class="text-[#58728d] text-sm leading-relaxed">
        No te preocupes, te ayudamos a recuperar el acceso a tu cuenta
      </p>
    </div>

    <!-- Indicador de pasos -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
      <div class="space-y-4">
        <div class="flex items-start space-x-3" id="step1Indicator">
          <div class="flex-shrink-0 w-6 h-6 bg-[#101419] text-white rounded-full flex items-center justify-center text-xs font-medium">1</div>
          <div class="text-sm">
            <p class="font-medium text-[#101419]">Ingresa tu correo</p>
            <p class="text-[#58728d] mt-1">Te enviaremos un código de verificación</p>
          </div>
        </div>
        <div class="flex items-start space-x-3" id="step2Indicator">
          <div class="flex-shrink-0 w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-medium">2</div>
          <div class="text-sm">
            <p class="font-medium text-gray-400">Código de verificación</p>
            <p class="text-gray-400 mt-1">Ingresa el código de 6 dígitos</p>
          </div>
        </div>
        <div class="flex items-start space-x-3" id="step3Indicator">
          <div class="flex-shrink-0 w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-medium">3</div>
          <div class="text-sm">
            <p class="font-medium text-gray-400">Nuevo PIN</p>
            <p class="text-gray-400 mt-1">Crea tu nuevo PIN de 4 dígitos</p>
          </div>
        </div>
      </div>
    </div>

    <!-- FASE 1: Ingreso de correo -->
    <form id="emailForm" class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 space-y-6">
      <div class="text-center">
        <h2 class="text-[19px] font-bold text-[#101419] mb-2">Ingresa tu correo electrónico</h2>
        <p class="text-sm text-[#58728d]">
          Te enviaremos un código de verificación a tu correo
        </p>
      </div>

      <div class="space-y-4">
        <div>
          <label for="emailInput" class="block text-sm font-medium text-[#101419] mb-2">
            Correo electrónico 
          </label>
          <input 
            id="emailInput"
            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>

      <div class="space-y-3">
        <button 
          id="emailSubmitBtn"
          type="submit"
          class="w-full bg-[#101419] hover:bg-[#37404a] disabled:opacity-50 disabled:cursor-not-allowed text-white py-3 rounded-lg font-medium transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-[#101419]"
        >
          Enviar código
        </button>
        
        <a 
          href="/"
          class="block w-full text-center border border-gray-300 hover:border-[#101419] text-[#101419] py-3 rounded-lg font-medium transition-colors duration-200"
        >
          Volver al inicio
        </a>
      </div>
    </form>

    <!-- FASE 2: Verificación de código -->
    <form id="codeForm" class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 space-y-6 hidden">
      <div class="text-center">
        <h2 class="text-[19px] font-bold text-[#101419] mb-2">Código de verificación</h2>
        <p class="text-sm text-[#58728d]">
          Ingresa el código de 6 dígitos que enviamos a <span id="emailDisplay" class="font-medium"></span>
        </p>
      </div>

      <div class="space-y-4">
        <div>
          <label for="codeInput" class="block text-sm font-medium text-[#101419] mb-2">
            Código de verificación
          </label>
          <input 
            id="codeInput"
            name="code"
            type="text"
            maxlength="6"
            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 text-center text-2xl tracking-widest"
            placeholder="000000"
            required
          />
        </div>

        <div class="text-center">
          <button 
            type="button"
            id="resendCodeBtn"
            class="text-sm text-[#58728d] hover:text-[#101419] transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:text-[#58728d]"
          >
            ¿No recibiste el código? <span class="font-medium" id="resendText">Reenviar</span>
          </button>
        </div>
      </div>

      <div class="space-y-3">
        <button 
          id="codeSubmitBtn"
          type="submit"
          class="w-full bg-[#101419] hover:bg-[#37404a] disabled:opacity-50 disabled:cursor-not-allowed text-white py-3 rounded-lg font-medium transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-[#101419]"
        >
          Verificar código
        </button>
        
        <button 
          type="button"
          id="backToEmailBtn"
          class="block w-full text-center border border-gray-300 hover:border-[#101419] text-[#101419] py-3 rounded-lg font-medium transition-colors duration-200"
        >
          Cambiar correo
        </button>
      </div>
    </form>

    <!-- FASE 3: Crear nuevo PIN -->
    <form id="pinForm" class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 space-y-6 hidden">
      <div class="text-center">
        <h2 class="text-[19px] font-bold text-[#101419] mb-2">Crea tu nuevo PIN</h2>
        <p class="text-sm text-[#58728d]">
          Ingresa un PIN de 4 dígitos que sea fácil de recordar para ti
        </p>
      </div>

      <div class="space-y-4">
        <div>
          <label for="newPinInput" class="block text-sm font-medium text-[#101419] mb-2">
            Nuevo PIN
          </label>
          <input 
            id="newPinInput"
            name="newPin"
            type="password"
            maxlength="4"
            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 text-center text-2xl tracking-widest"
            placeholder="••••"
            required
          />
        </div>

        <div>
          <label for="confirmPinInput" class="block text-sm font-medium text-[#101419] mb-2">
            Confirmar PIN
          </label>
          <input 
            id="confirmPinInput"
            name="confirmPin"
            type="password"
            maxlength="4"
            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 text-center text-2xl tracking-widest"
            placeholder="••••"
            required
          />
        </div>

        <div class="bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-lg text-sm">
          <div class="flex items-start space-x-2">
            <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
            </svg>
            <p>Recuerda elegir un PIN que sea seguro pero fácil de recordar. Evita fechas obvias como tu cumpleaños.</p>
          </div>
        </div>
      </div>

      <div class="space-y-3">
        <button 
          id="pinSubmitBtn"
          type="submit"
          class="w-full bg-[#101419] hover:bg-[#37404a] disabled:opacity-50 disabled:cursor-not-allowed text-white py-3 rounded-lg font-medium transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-[#101419]"
        >
          Establecer nuevo PIN
        </button>
      </div>
    </form>

    <!-- Mensaje de error global -->
    <div id="errorMessage" class="hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm mt-4">
    </div>

    <!-- Mensaje de éxito -->
    <div id="successMessage" class="hidden bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm mt-4">
    </div>
  </div>

  <script>
    // Variables globales
    let currentStep = 1;
    let userEmail = '';
    let verificationCode = '';
    let resendTimer = null;
    let resendCountdown = 0;

    // Referencias a elementos del DOM
    const emailForm = document.getElementById('emailForm');
    const codeForm = document.getElementById('codeForm');
    const pinForm = document.getElementById('pinForm');
    
    const emailInput = document.getElementById('emailInput');
    const codeInput = document.getElementById('codeInput');
    const newPinInput = document.getElementById('newPinInput');
    const confirmPinInput = document.getElementById('confirmPinInput');
    
    const emailSubmitBtn = document.getElementById('emailSubmitBtn');
    const codeSubmitBtn = document.getElementById('codeSubmitBtn');
    const pinSubmitBtn = document.getElementById('pinSubmitBtn');
    
    const backToEmailBtn = document.getElementById('backToEmailBtn');
    const resendCodeBtn = document.getElementById('resendCodeBtn');
    const resendText = document.getElementById('resendText');
    
    const errorMessage = document.getElementById('errorMessage');
    const successMessage = document.getElementById('successMessage');
    const emailDisplay = document.getElementById('emailDisplay');

    // Indicadores de pasos
    const step1Indicator = document.getElementById('step1Indicator');
    const step2Indicator = document.getElementById('step2Indicator');
    const step3Indicator = document.getElementById('step3Indicator');

    // Inicialización
    emailInput.focus();

    // Funciones de utilidad
    function showError(message) {
      errorMessage.textContent = message;
      errorMessage.classList.remove('hidden');
      successMessage.classList.add('hidden');
    }

    function showSuccess(message) {
      successMessage.textContent = message;
      successMessage.classList.remove('hidden');
      errorMessage.classList.add('hidden');
    }

    function hideMessages() {
      errorMessage.classList.add('hidden');
      successMessage.classList.add('hidden');
    }

    function updateStepIndicators() {
      // Resetear todos los indicadores
      [step1Indicator, step2Indicator, step3Indicator].forEach((step, index) => {
        const circle = step.querySelector('.w-6');
        const texts = step.querySelectorAll('p');
        
        if (index + 1 < currentStep) {
          // Paso completado
          circle.className = 'flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-medium';
          circle.innerHTML = '✓';
          texts.forEach(text => {
            text.className = text.className.replace('text-gray-400', 'text-green-600');
            text.className = text.className.replace('text-[#58728d]', 'text-green-600');
          });
        } else if (index + 1 === currentStep) {
          // Paso actual
          circle.className = 'flex-shrink-0 w-6 h-6 bg-[#101419] text-white rounded-full flex items-center justify-center text-xs font-medium';
          circle.textContent = index + 1;
          texts.forEach(text => {
            text.className = text.className.replace('text-gray-400', 'text-[#101419]');
            if (text.className.includes('font-medium')) {
              text.className = text.className.replace('text-gray-400', 'text-[#101419]');
            } else {
              text.className = text.className.replace('text-gray-400', 'text-[#58728d]');
            }
          });
        } else {
          // Paso pendiente
          circle.className = 'flex-shrink-0 w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-medium';
          circle.textContent = index + 1;
          texts.forEach(text => {
            text.className = text.className.replace('text-[#101419]', 'text-gray-400');
            text.className = text.className.replace('text-[#58728d]', 'text-gray-400');
            text.className = text.className.replace('text-green-600', 'text-gray-400');
          });
        }
      });
    }

    function showStep(step) {
      // Ocultar todos los formularios
      emailForm.classList.add('hidden');
      codeForm.classList.add('hidden');
      pinForm.classList.add('hidden');
      
      // Detener timer si cambia de paso
      if (step !== 2) {
        stopResendTimer();
      }
      
      // Mostrar el formulario correspondiente
      switch(step) {
        case 1:
          emailForm.classList.remove('hidden');
          emailInput.focus();
          break;
        case 2:
          codeForm.classList.remove('hidden');
          codeInput.focus();
          break;
        case 3:
          pinForm.classList.remove('hidden');
          newPinInput.focus();
          break;
      }
      
      currentStep = step;
      updateStepIndicators();
      hideMessages();
    }

    function generateVerificationCode() {
      return Math.floor(100000 + Math.random() * 900000).toString();
    }

    function startResendTimer() {
      resendCountdown = 60; // 1 minuto
      resendCodeBtn.disabled = true;
      
      resendTimer = setInterval(() => {
        if (resendCountdown > 0) {
          resendText.textContent = `Reenviar (${resendCountdown}s)`;
          resendCountdown--;
        } else {
          clearInterval(resendTimer);
          resendCodeBtn.disabled = false;
          resendText.textContent = 'Reenviar';
        }
      }, 1000);
    }

    function stopResendTimer() {
      if (resendTimer) {
        clearInterval(resendTimer);
        resendTimer = null;
      }
      resendCountdown = 0;
      resendCodeBtn.disabled = false;
      resendText.textContent = 'Reenviar';
    }

    // FASE 1: Envío de correo
    emailForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const email = emailInput.value.trim();
      
      if (!email) {
        showError('Por favor ingresa tu correo electrónico');
        emailInput.focus();
        return;
      }
      
      if (!isValidEmail(email)) {
        showError('Por favor ingresa un correo electrónico válido');
        emailInput.focus();
        return;
      }
      
      // Simular envío de código
      emailSubmitBtn.disabled = true;
      emailSubmitBtn.textContent = 'Enviando código...';
      
      setTimeout(() => {
        userEmail = email;
        verificationCode = generateVerificationCode();
        emailDisplay.textContent = email;
        
        // En una aplicación real, aquí enviarías el código por email
        fetch('/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ email })
        });

        showSuccess(`Código enviado a ${email}`);
        
        setTimeout(() => {
          showStep(2);
          startResendTimer(); // Iniciar el timer cuando se muestra la fase 2
        }, 1500);
        
        emailSubmitBtn.disabled = false;
        emailSubmitBtn.textContent = 'Enviar código';
      }, 2000);
    });

    // FASE 2: Verificación de código
    codeForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const code = codeInput.value.trim();
      
      if (!code || code.length !== 6) {
        showError('Por favor ingresa el código de 6 dígitos');
        codeInput.focus();
        return;
      }
      
      if (!/^\d{6}$/.test(code)) {
        showError('El código debe contener solo números');
        codeInput.focus();
        return;
      }
      
      codeSubmitBtn.disabled = true;
      codeSubmitBtn.textContent = 'Verificando...';
      
      setTimeout(() => {
        // En una aplicación real, verificarías el código con el servidor
        if (code === verificationCode) {
          showSuccess('Código verificado correctamente');
          
          setTimeout(() => {
            showStep(3);
          }, 1500);
        } else {
          showError('Código incorrecto. Por favor verifica e intenta nuevamente.');
          codeInput.focus();
          codeInput.select();
        }
        
        codeSubmitBtn.disabled = false;
        codeSubmitBtn.textContent = 'Verificar código';
      }, 1500);
    });

    // FASE 3: Crear nuevo PIN
    pinForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const newPin = newPinInput.value.trim();
      const confirmPin = confirmPinInput.value.trim();
      
      if (!newPin || newPin.length !== 4) {
        showError('El PIN debe tener 4 dígitos');
        newPinInput.focus();
        return;
      }
      
      if (!/^\d{4}$/.test(newPin)) {
        showError('El PIN debe contener solo números');
        newPinInput.focus();
        return;
      }
      
      if (!confirmPin || confirmPin.length !== 4) {
        showError('Por favor confirma tu PIN');
        confirmPinInput.focus();
        return;
      }
      
      if (newPin !== confirmPin) {
        showError('Los PINs no coinciden. Por favor verifica e intenta nuevamente.');
        confirmPinInput.focus();
        confirmPinInput.select();
        return;
      }
      
      // Validar que no sea un PIN muy obvio
      if (newPin === '1234' || newPin === '0000' || newPin === '1111' || newPin === '2222' || 
          newPin === '3333' || newPin === '4444' || newPin === '5555' || newPin === '6666' || 
          newPin === '7777' || newPin === '8888' || newPin === '9999') {
        showError('Por favor elige un PIN más seguro. Evita secuencias obvias.');
        newPinInput.focus();
        newPinInput.select();
        return;
      }
      
      pinSubmitBtn.disabled = true;
      pinSubmitBtn.textContent = 'Estableciendo PIN...';
      
      setTimeout(() => {
        // En una aplicación real, aquí guardarías el nuevo PIN
        showSuccess('¡PIN establecido correctamente! Ya puedes acceder a tu cuenta.');
        
        setTimeout(() => {
          // Redirigir al login o página principal
          alert('PIN establecido correctamente. Serás redirigido al inicio de sesión.');
          window.location.href = '/login';
        }, 2000);
        
      }, 2000);
    });

    // Eventos adicionales
    backToEmailBtn.addEventListener('click', function() {
      stopResendTimer(); // Detener el timer si regresa al paso 1
      showStep(1);
    });

    resendCodeBtn.addEventListener('click', function() {
      if (resendCodeBtn.disabled) return; // Prevenir clics múltiples
      
      verificationCode = generateVerificationCode();
      console.log('Nuevo código de verificación:', verificationCode);
      showSuccess('Código reenviado a ' + userEmail);
      startResendTimer(); // Reiniciar el timer
    });

    // Formatear inputs de PIN para que solo acepten números
    [newPinInput, confirmPinInput].forEach(input => {
      input.addEventListener('input', function(e) {
        e.target.value = e.target.value.replace(/\D/g, '').slice(0, 4);
        hideMessages();
      });
    });

    // Formatear input de código para que solo acepte números
    codeInput.addEventListener('input', function(e) {
      e.target.value = e.target.value.replace(/\D/g, '').slice(0, 6);
      hideMessages();
    });

    // Ocultar mensajes cuando el usuario escriba
    [emailInput, codeInput, newPinInput, confirmPinInput].forEach(input => {
      input.addEventListener('input', hideMessages);
    });

    // Validar email
    function isValidEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(email);
    }

    // Navegación con Enter entre campos de PIN
    newPinInput.addEventListener('keypress', function(e) {
      if (e.key === 'Enter' && this.value.length === 4) {
        confirmPinInput.focus();
      }
    });

    confirmPinInput.addEventListener('keypress', function(e) {
      if (e.key === 'Enter' && this.value.length === 4) {
        pinForm.dispatchEvent(new Event('submit'));
      }
    });
  </script>

</body>
</html>