teqo-backup/docs/plans/c151-atividade-evento-publico-ui-draft.html

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>UI draft — Atividade: marcar evento como público (C151)</title>
  </head>
  <body class="bg-zinc-950 text-zinc-100 antialiased">
    <main class="mx-auto max-w-5xl p-6 sm:p-8">
      <h1 class="text-lg font-medium text-zinc-100">
        UI draft — Atividade: marcar evento como público (C151)
      </h1>
      <p class="mt-1 text-sm text-zinc-400">
        Staff edita uma atividade no modal e marca "Evento público" (default desmarcado); a marcação
        é durável — nenhuma tela muda de comportamento.
      </p>
      <p class="mt-2 text-sm text-zinc-500">
        Cinza = contexto existente (sem mudança) · <span class="text-amber-400">acento</span> = novo
        neste item. Posição do checkbox segue a recomendação (junto dos outros checkboxes) — validar
        no gate.
      </p>

      <section class="mt-8">
        <p class="text-xs uppercase tracking-wide text-zinc-500">
          Cena 1 · desktop — modal de atividade, seções "Informações básicas" e "Agendamento"
        </p>
        <div
          class="mx-auto mt-3 max-w-2xl overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900"
        >
          <div class="flex items-center justify-between border-b border-zinc-800 px-6 py-4">
            <div>
              <p class="text-sm font-medium text-zinc-200">Editar atividade</p>
              <p class="text-xs text-zinc-500">/campanha/atividades</p>
            </div>
            <span class="text-lg text-zinc-500">×</span>
          </div>
          <div class="px-6 py-5">
            <p class="text-xs font-medium uppercase tracking-wide text-zinc-500">
              Informações básicas
            </p>
            <div class="mt-3 space-y-3">
              <div>
                <p class="text-xs text-zinc-400">Título</p>
                <div
                  class="mt-1 flex h-11 items-center rounded-lg border border-zinc-700 bg-zinc-950/60 px-3"
                >
                  <span class="h-3 w-44 rounded bg-zinc-800"></span>
                </div>
              </div>
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <p class="text-xs text-zinc-400">Tipo</p>
                  <div
                    class="mt-1 flex h-11 items-center justify-between rounded-lg border border-zinc-700 bg-zinc-950/60 px-3"
                  >
                    <span class="h-3 w-20 rounded bg-zinc-800"></span>
                    <span class="text-xs text-zinc-600">▾</span>
                  </div>
                </div>
                <div>
                  <p class="text-xs text-zinc-400">Status</p>
                  <div
                    class="mt-1 flex h-11 items-center justify-between rounded-lg border border-zinc-700 bg-zinc-950/60 px-3"
                  >
                    <span class="h-3 w-20 rounded bg-zinc-800"></span>
                    <span class="text-xs text-zinc-600">▾</span>
                  </div>
                </div>
              </div>
              <label class="flex items-start gap-3 pt-1">
                <input type="checkbox" class="mt-0.5 h-4 w-4 accent-zinc-500" />
                <span>
                  <span class="block text-sm text-zinc-300">Deputado presente</span>
                  <span class="block text-xs text-zinc-500"
                    >Marque quando o deputado estiver presente na atividade.</span
                  >
                </span>
              </label>
            </div>

            <p class="mt-6 text-xs font-medium uppercase tracking-wide text-zinc-500">
              Agendamento
            </p>
            <div class="mt-3 space-y-3">
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <p class="text-xs text-zinc-400">Início</p>
                  <div
                    class="mt-1 flex h-11 items-center rounded-lg border border-zinc-700 bg-zinc-950/60 px-3"
                  >
                    <span class="h-3 w-28 rounded bg-zinc-800"></span>
                  </div>
                </div>
                <div>
                  <p class="text-xs text-zinc-400">Fim</p>
                  <div
                    class="mt-1 flex h-11 items-center rounded-lg border border-zinc-700 bg-zinc-950/60 px-3"
                  >
                    <span class="h-3 w-28 rounded bg-zinc-800"></span>
                  </div>
                </div>
              </div>
              <div class="divide-y divide-zinc-800 rounded-lg border border-zinc-800 px-4">
                <label class="flex items-start gap-3 py-3">
                  <input type="checkbox" class="mt-0.5 h-4 w-4 accent-zinc-500" />
                  <span>
                    <span class="block text-sm text-zinc-300">Todo o dia</span>
                    <span class="block text-xs text-zinc-500"
                      >Compromisso que ocupa um ou mais dias inteiros, sem horário.</span
                    >
                  </span>
                </label>
                <label class="flex items-start gap-3 py-3">
                  <input type="checkbox" class="mt-0.5 h-4 w-4 accent-amber-400" />
                  <span class="min-w-0 flex-1">
                    <span class="flex items-center gap-2">
                      <span class="text-sm font-medium text-zinc-100">Evento público</span>
                      <span
                        class="rounded-full border border-amber-400/50 px-1.5 text-[10px] uppercase tracking-wide text-amber-400"
                        >neste item</span
                      >
                    </span>
                    <span class="mt-0.5 block text-xs text-zinc-400"
                      >Quando marcado, este evento poderá ser publicado no site do candidato
                      (futuro).</span
                    >
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div class="flex items-center justify-end gap-3 border-t border-zinc-800 px-6 py-4">
            <span
              class="inline-flex h-10 items-center rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
              >Cancelar</span
            >
            <span
              class="inline-flex h-10 items-center rounded-lg bg-amber-400 px-4 text-sm font-medium text-zinc-950"
              >Salvar</span
            >
          </div>
        </div>
      </section>

      <section class="mt-10">
        <p class="text-xs uppercase tracking-wide text-zinc-500">
          Cena 2 · mobile (~390px) — mesma cena
        </p>
        <div
          class="mt-3 w-[390px] max-w-full overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900"
        >
          <div class="flex items-center justify-between border-b border-zinc-800 px-4 py-4">
            <div>
              <p class="text-sm font-medium text-zinc-200">Editar atividade</p>
              <p class="text-xs text-zinc-500">/campanha/atividades</p>
            </div>
            <span class="text-lg text-zinc-500">×</span>
          </div>
          <div class="px-4 py-4">
            <p class="text-xs font-medium uppercase tracking-wide text-zinc-500">
              Informações básicas
            </p>
            <div class="mt-3 space-y-3">
              <div>
                <p class="text-xs text-zinc-400">Título</p>
                <div
                  class="mt-1 flex h-11 items-center rounded-lg border border-zinc-700 bg-zinc-950/60 px-3"
                >
                  <span class="h-3 w-44 rounded bg-zinc-800"></span>
                </div>
              </div>
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <p class="text-xs text-zinc-400">Tipo</p>
                  <div
                    class="mt-1 flex h-11 items-center justify-between rounded-lg border border-zinc-700 bg-zinc-950/60 px-3"
                  >
                    <span class="h-3 w-16 rounded bg-zinc-800"></span>
                    <span class="text-xs text-zinc-600">▾</span>
                  </div>
                </div>
                <div>
                  <p class="text-xs text-zinc-400">Status</p>
                  <div
                    class="mt-1 flex h-11 items-center justify-between rounded-lg border border-zinc-700 bg-zinc-950/60 px-3"
                  >
                    <span class="h-3 w-16 rounded bg-zinc-800"></span>
                    <span class="text-xs text-zinc-600">▾</span>
                  </div>
                </div>
              </div>
              <label class="flex items-start gap-3 pt-1">
                <input type="checkbox" class="mt-0.5 h-4 w-4 accent-zinc-500" />
                <span>
                  <span class="block text-sm text-zinc-300">Deputado presente</span>
                  <span class="block text-xs text-zinc-500"
                    >Marque quando o deputado estiver presente na atividade.</span
                  >
                </span>
              </label>
            </div>

            <p class="mt-6 text-xs font-medium uppercase tracking-wide text-zinc-500">
              Agendamento
            </p>
            <div class="mt-3 space-y-3">
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <p class="text-xs text-zinc-400">Início</p>
                  <div
                    class="mt-1 flex h-11 items-center rounded-lg border border-zinc-700 bg-zinc-950/60 px-3"
                  >
                    <span class="h-3 w-20 rounded bg-zinc-800"></span>
                  </div>
                </div>
                <div>
                  <p class="text-xs text-zinc-400">Fim</p>
                  <div
                    class="mt-1 flex h-11 items-center rounded-lg border border-zinc-700 bg-zinc-950/60 px-3"
                  >
                    <span class="h-3 w-20 rounded bg-zinc-800"></span>
                  </div>
                </div>
              </div>
              <div class="divide-y divide-zinc-800 rounded-lg border border-zinc-800 px-4">
                <label class="flex items-start gap-3 py-3">
                  <input type="checkbox" class="mt-0.5 h-4 w-4 accent-zinc-500" />
                  <span>
                    <span class="block text-sm text-zinc-300">Todo o dia</span>
                    <span class="block text-xs text-zinc-500"
                      >Compromisso que ocupa um ou mais dias inteiros, sem horário.</span
                    >
                  </span>
                </label>
                <label class="flex items-start gap-3 py-3">
                  <input type="checkbox" class="mt-0.5 h-4 w-4 accent-amber-400" />
                  <span class="min-w-0 flex-1">
                    <span class="flex flex-wrap items-center gap-2">
                      <span class="text-sm font-medium text-zinc-100">Evento público</span>
                      <span
                        class="rounded-full border border-amber-400/50 px-1.5 text-[10px] uppercase tracking-wide text-amber-400"
                        >neste item</span
                      >
                    </span>
                    <span class="mt-0.5 block text-xs text-zinc-400"
                      >Quando marcado, este evento poderá ser publicado no site do candidato
                      (futuro).</span
                    >
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div class="flex flex-col gap-3 border-t border-zinc-800 px-4 py-4">
            <span
              class="inline-flex h-11 items-center justify-center rounded-lg border border-zinc-700 text-sm text-zinc-300"
              >Cancelar</span
            >
            <span
              class="inline-flex h-11 items-center justify-center rounded-lg bg-amber-400 text-sm font-medium text-zinc-950"
              >Salvar</span
            >
          </div>
        </div>
      </section>

      <p class="mt-10 text-xs text-zinc-600">
        Rascunho descartável (gate) — registro do aceite visual. Zero JS além do build browser do
        Tailwind v4; sem comportamento.
      </p>
    </main>
  </body>
</html>