index.html

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Criar conta · NextFluent</title>
<meta name="description" content="Crie sua conta gratuita para acessar o curso NextFluent: inglês do A1 ao C2, com progresso salvo e certificado ao concluir.">
<link rel="icon" type="image/svg+xml" href="assets/brand/mark-badge.svg">
<link rel="icon" type="image/png" sizes="32x32" href="assets/brand/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/brand/favicon-180.png">
<meta property="og:type" content="website">
<meta property="og:site_name" content="NextFluent">
<meta property="og:title" content="NextFluent · Inglês sem Fronteiras">
<meta property="og:description" content="Curso de inglês em português, do A1 ao C2 (topo da escala CEFR), com módulo extra de inglês para o mercado de trabalho.">
<meta property="og:image" content="https://vaz2984.github.io/nextfluent/assets/brand/og-image.png">
<meta property="og:url" content="https://vaz2984.github.io/nextfluent/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="NextFluent · Inglês sem Fronteiras">
<meta name="twitter:description" content="Curso de inglês em português, do A1 ao C2 (topo da escala CEFR), com módulo extra de inglês para o mercado de trabalho.">
<meta name="twitter:image" content="https://vaz2984.github.io/nextfluent/assets/brand/og-image.png">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>

<div class="topbar">
  <div class="topbar-inner">
    <a class="brand" href="index.html"><img class="brand-mark" src="assets/brand/mark.svg" width="24" height="24" alt=""><span>NextFluent</span></a>
    <span class="stampbadge">Inglês sem Fronteiras</span>
    <span id="nf-auth-slot" class="auth-slot" data-root=""></span>
  </div>
</div>

<main class="page">
  <div class="auth-wrap">

    <div class="auth-card" id="signup-card">
      <div class="eyebrow" style="color:var(--gold-strong); margin-bottom:10px">Área do aluno</div>
      <h1>Crie sua conta</h1>
      <p class="lead">Cadastre-se para acessar o curso, salvar seu progresso e liberar o certificado de conclusão.</p>

      <div class="auth-error" id="auth-error"></div>

      <form id="signup-form" novalidate>
        <div class="auth-field">
          <label for="f-name">Nome completo</label>
          <input type="text" id="f-name" name="name" autocomplete="name" required maxlength="80">
          <small>É o nome que vai aparecer no seu certificado.</small>
        </div>
        <div class="auth-field">
          <label for="f-email">E-mail</label>
          <input type="email" id="f-email" name="email" autocomplete="email" required>
        </div>
        <div class="auth-field">
          <label for="f-phone">Telefone (WhatsApp)</label>
          <input type="tel" id="f-phone" name="phone" autocomplete="tel" required placeholder="(11) 91234-5678">
        </div>
        <div class="auth-field">
          <label for="f-password">Senha</label>
          <input type="password" id="f-password" name="password" autocomplete="new-password" required minlength="6">
          <small>Pelo menos 6 caracteres.</small>
        </div>
        <div class="auth-field">
          <label for="f-password2">Confirmar senha</label>
          <input type="password" id="f-password2" name="password2" autocomplete="new-password" required minlength="6">
        </div>
        <button type="submit" class="seal-btn solid auth-submit" id="signup-submit">Criar minha conta →</button>
      </form>

      <div class="auth-switch">Já tem conta? <a href="login.html" id="login-link">Entrar</a></div>
      <div class="auth-switch"><a href="vendas.html">Conheça o curso antes de se cadastrar</a></div>

      <div class="auth-note" id="not-configured-note" hidden>
        A área de cadastro deste curso ainda está sendo configurada pelo administrador.
        Enquanto isso, seu progresso continua sendo salvo automaticamente neste navegador.
        <a href="vendas.html">Veja o curso</a> e comece a estudar.
      </div>
    </div>

    <div class="auth-card" id="already-in-card" hidden>
      <div class="eyebrow" style="color:var(--gold-strong); margin-bottom:10px">Bem-vindo de volta</div>
      <h1>Você já tem uma conta</h1>
      <p class="lead" id="already-in-greeting">Continue seus estudos de onde parou.</p>
      <a class="seal-btn solid auth-submit" href="niveis/A1-iniciante/00-visao-geral.html">Continuar o curso →</a>
      <div class="auth-switch"><a href="certificado.html">Ver meu certificado</a></div>
    </div>

  </div>
</main>

<footer class="site-footer">
  <div class="wrap">
    <div style="font-weight:700; margin-bottom:12px">NextFluent · Inglês sem Fronteiras</div>
    <div class="links">
      <a href="vendas.html">Conheça o curso</a>
      <a href="README.html">Guia completo</a>
      <a href="certificado.html">Certificado</a>
    </div>
  </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="assets/supabase-config.js"></script>
<script src="assets/auth.js"></script>
<script src="assets/lessons-data.js"></script>
<script src="assets/progress.js"></script>
<script>
  (function () {
    if (!window.NFAuth || !window.NFAuth.isConfigured()) {
      document.getElementById("not-configured-note").hidden = false;
      document.getElementById("signup-form").hidden = true;
      document.querySelectorAll("#signup-card .auth-switch").forEach(function (el) { el.hidden = true; });
      return;
    }

    var signupCard = document.getElementById("signup-card");
    var alreadyInCard = document.getElementById("already-in-card");

    window.NFAuth.onChange(function (user) {
      signupCard.hidden = !!user;
      alreadyInCard.hidden = !user;
      if (user) {
        var name = (user.displayName || "").trim().split(" ")[0];
        document.getElementById("already-in-greeting").textContent = name
          ? "Continue seus estudos de onde parou, " + name + "."
          : "Continue seus estudos de onde parou.";
      }
    });

    var errorBox = document.getElementById("auth-error");
    var submitBtn = document.getElementById("signup-submit");

    document.getElementById("signup-form").addEventListener("submit", function (ev) {
      ev.preventDefault();
      errorBox.textContent = "";
      var name = document.getElementById("f-name").value.trim();
      var email = document.getElementById("f-email").value.trim();
      var phone = document.getElementById("f-phone").value.trim();
      var pass = document.getElementById("f-password").value;
      var pass2 = document.getElementById("f-password2").value;

      if (!name) { errorBox.textContent = "Digite seu nome completo."; return; }
      if (!phone) { errorBox.textContent = "Digite seu telefone."; return; }
      if (pass.length < 6) { errorBox.textContent = "A senha precisa ter pelo menos 6 caracteres."; return; }
      if (pass !== pass2) { errorBox.textContent = "As senhas não são iguais."; return; }

      submitBtn.disabled = true;
      submitBtn.textContent = "Criando conta…";
      window.NFAuth.signUp(name, email, pass, phone)
        .catch(function (err) {
          errorBox.textContent = err.message;
        })
        .finally(function () {
          submitBtn.disabled = false;
          submitBtn.textContent = "Criar minha conta →";
        });
    });
  })();
</script>
</body>
</html>