index.html

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transformador de Fórmulas Lógicas | Lógica de Primeira Ordem</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"
    />
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="assets/styles/index.css" />
    <link rel="shortcut icon" href="icon.svg" type="image/x-icon" />
  </head>
  <body>
    <!-- Theme Toggle -->
    <div class="theme-toggle" id="theme-toggle">
      <i class="fas fa-moon" id="theme-icon"></i>
    </div>

    <div class="max-w-8xl mx-auto p-4 md:p-6 pt-16">
      <!-- Header -->
      <div class="text-center mb-8">
        <h1 class="text-3xl md:text-4xl font-bold header-gradient mb-3">
          Transformador de Fórmulas Lógicas de Primeira Ordem
        </h1>
        <p
          class="text-base md:text-lg max-w-2xl mx-auto"
          style="color: var(--text-light)"
        >
          Insira uma fórmula bem-formada e visualize cada etapa da transformação para
          formas normais
        </p>
      </div>

      <!-- Main Content Grid -->
      <div class="main-content-grid">
        <!-- Left Column: Input and Preview -->
        <div class="left-column">
          <div class="card">
            <div class="section-title">
              <i class="fas fa-pen"></i>
              <span>Fórmula de Entrada</span>
            </div>

            <textarea
              id="latex-input"
              rows="3"
              placeholder="Ex: \forall x \exists y (P(x) \land Q(x, y))"
            >
\forall x \exists y (P(x) \land Q(x, y))</textarea
            >

            <div class="mt-4">
              <div
                class="text-sm font-medium mb-2"
                style="color: var(--text-light)"
              >
                Exemplos rápidos:
              </div>
              <div class="formula-examples">
                <div class="example-chip" data-formula="P \land Q">P ∧ Q</div>
                <div class="example-chip" data-formula="P \lor Q">P ∨ Q</div>
                <div class="example-chip" data-formula="P \rightarrow Q">
                  P → Q
                </div>
                <div class="example-chip" data-formula="\neg(P \land Q)">
                  ¬(P ∧ Q)
                </div>
                <div
                  class="example-chip"
                  data-formula="\forall x (P(x) \rightarrow \exists y Q(x, y))"
                >
                  ∀x(P(x)→∃yQ(x, y))
                </div>
                <div
                  class="example-chip"
                  data-formula="\exists x \forall y (P(x) \iff Q(x, y))"
                >
                  ∃x∀y(P(x)⇔Q(x, y))
                </div>
              </div>
            </div>

            <div class="flex justify-center mt-6">
              <button id="calculate-btn" class="btn-primary">
                <i class="fas fa-cogs"></i> Executar Transformações
              </button>
            </div>
          </div>

          <div class="card">
            <div class="section-title">
              <i class="fas fa-eye"></i>
              <span>Visualização da Fórmula</span>
            </div>

            <div id="latex-output" class="latex-container mt-4">
              <span style="color: var(--text-light)"
                >Sua fórmula aparecerá aqui</span
              >
            </div>

            <div class="mt-4 text-sm" style="color: var(--text-light)">
              <p>
                <i class="fas fa-info-circle mr-1"></i> A visualização é
                atualizada automaticamente
              </p>
            </div>
          </div>

          <div class="card">
            <div class="section-title">
              <i class="fas fa-info-circle"></i>
              <span>Como Usar</span>
            </div>

            <div class="space-y-3 text-sm" style="color: var(--text-light)">
              <p>
                <strong>1.</strong> Digite sua fórmula lógica no campo acima
              </p>
              <p>
                <strong>2.</strong> Use os exemplos rápidos para preencher
                automaticamente
              </p>
              <p>
                <strong>3.</strong> Clique em "Executar Transformações" para
                processar
              </p>
              <p>
                <strong>4.</strong> Visualize cada etapa no painel à direita
              </p>
              <p>
                <strong>5.</strong> Clique no ícone 📋 para copiar qualquer
                fórmula
              </p>
            </div>

            <div class="mt-4 section-title">
              <i class="fas fa-code"></i>
              <span>Operadores Suportados</span>
            </div>

            <div class="grid grid-cols-2 gap-2 mt-2 text-xs">
              <div class="tip">
                <strong>\land, \lor, \neg</strong><br />E, OU, NÃO
              </div>
              <div class="tip">
                <strong>\rightarrow, \leftrightarrow</strong><br />Implicação,
                Bi-implicação
              </div>
              <div class="tip">
                <strong>\forall, \exists</strong><br />Para todo, Existe
              </div>
              <div class="tip">
                <strong>A, B, C, P, Q, R, ...</strong><br />Variáveis
                proposicionais
              </div>
              <div class="tip">
                <strong>x, y, z, ...</strong><br />Variáveis individuais (usadas
                com quantificadores)
              </div>
              <div class="tip">
                <strong>P(x), Q(x,y)</strong><br />Predicados com argumentos
              </div>
            </div>

            <div class="mt-4 text-xs" style="color: var(--text-light)">
              <p>
                <i class="fas fa-lightbulb mr-1"></i> Use parênteses para
                agrupar expressões
              </p>
            </div>
          </div>
        </div>

        <!-- Right Column: Steps -->
        <div class="right-column">
          <div class="card steps-container">
            <div class="section-title">
              <i class="fas fa-list-ol"></i>
              <span>Etapas de Transformação</span>
            </div>

            <div id="steps-content" class="steps-content">
              <div class="text-center py-8" style="color: var(--text-light)">
                <i
                  class="fas fa-arrow-down text-xl mb-3"
                  style="color: var(--primary)"
                ></i>
                <p>
                  Clique em "Executar Transformações" para visualizar as etapas
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-10 text-center text-sm" style="color: var(--text-light)">
        <p>
          Desenvolvido por Renan Andrade
          <a
            href="https://github.com/marshmll"
            class="hover:underline"
            style="color: var(--primary)"
            >@marshmll</a
          >
        </p>
      </div>
    </div>

    <div id="toast" class="toast">Fórmula copiada!</div>

    <script type="module" src="assets/scripts/index.js"></script>
  </body>
</html>