Checklist para tu web de trámites

Este checklist tiene la función de retener un poquito más al usuario y además contiene un botón de acción.

El checklist además guarda la información, por lo que si recargas la página estará el check que hiciste anteriormente. Esta función puede ser útil si dejamos un mensaje avisando que puede ir juntando los requisitos, marcarlos y volver a ingresar a nuestra web para ver si está todo.

Reemplazar "#" en <a href="#" class="btn-agendar"> por tu url.

Código html para copiar

<div class="checklist-wrapper">
  <div class="checklist-container">
    <div class="checklist-header">
      <h2><i class="fas fa-tasks"></i> Checklist para tu Trámite</h2>
      <p>Verifica que tengas todo antes de acudir</p>
    </div>

    <div class="checklist-actions">
      <button id="check-all" class="btn-secundario">Marcar todos</button>
      <button id="reset-all" class="btn-secundario">Reiniciar checklist</button>
    </div>

    <div class="checklist-items">
      <div class="checklist-column">
        <label class="checklist-item"><input type="checkbox" class="checklist-checkbox" data-id="req1"><span class="checkmark"></span><span class="item-text">DEBES CAMBIAR ESTE TEXTO</span></label>
        <label class="checklist-item"><input type="checkbox" class="checklist-checkbox" data-id="req2"><span class="checkmark"></span><span class="item-text">DEBES CAMBIAR ESTE TEXTO</span></label>
        <label class="checklist-item"><input type="checkbox" class="checklist-checkbox" data-id="req3"><span class="checkmark"></span><span class="item-text">DEBES CAMBIAR ESTE TEXTO</span></label>
        <label class="checklist-item"><input type="checkbox" class="checklist-checkbox" data-id="req4"><span class="checkmark"></span><span class="item-text">DEBES CAMBIAR ESTE TEXTO</span></label>
      </div>
      <div class="checklist-column">
        <label class="checklist-item"><input type="checkbox" class="checklist-checkbox" data-id="req5"><span class="checkmark"></span><span class="item-text">DEBES CAMBIAR ESTE TEXTO</span></label>
        <label class="checklist-item"><input type="checkbox" class="checklist-checkbox" data-id="req6"><span class="checkmark"></span><span class="item-text">DEBES CAMBIAR ESTE TEXTO</span></label>
        <label class="checklist-item"><input type="checkbox" class="checklist-checkbox" data-id="req7"><span class="checkmark"></span><span class="item-text">DEBES CAMBIAR ESTE TEXTO</span></label>
        <label class="checklist-item"><input type="checkbox" class="checklist-checkbox" data-id="req8"><span class="checkmark"></span><span class="item-text">DEBES CAMBIAR ESTE TEXTO</span></label>
      </div>
    </div>

    <div class="checklist-footer">
      <a href="#" class="btn-agendar">
        <i class="fas fa-calendar-plus"></i> Agendar Mi Cita
      </a>
    </div>
  </div>
</div>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
.checklist-wrapper {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

.checklist-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 40px;
  color: white;
  font-family: 'Segoe UI', sans-serif;
}

.checklist-header {
  text-align: center;
  margin-bottom: 20px;
}

.checklist-header h2 {
  margin: 0 0 10px 0;
  font-size: 1.8rem;
  color: white;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.checklist-header p {
  margin: 0;
  font-size: 1rem;
  color: white;
  opacity: 0.9;
}

.checklist-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.btn-secundario {
  background: rgba(255,255,255,0.2);
  border: 1px solid white;
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secundario:hover {
  background: white;
  color: #764ba2;
}

.checklist-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 30px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.3s ease;
}

.checklist-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.checklist-checkbox {
  display: none;
}

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.checklist-checkbox:checked + .checkmark {
  background: #27ae60;
  border-color: #27ae60;
}

.checklist-checkbox:checked + .checkmark::after {
  content: '✓';
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.item-text {
  font-size: 1rem;
  line-height: 1.4;
  color: white;
}

.checklist-footer {
  text-align: center;
  margin-top: 20px;
}

.btn-agendar {
  background: #27ae60;
  color: white;
  padding: 14px 36px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.btn-agendar:hover {
  background: #219a52;
  transform: translateY(-2px);
  color: white;
}

@media (max-width: 768px) {
  .checklist-items {
    grid-template-columns: 1fr;
  }

  .checklist-header h2 {
    font-size: 1.5rem;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const checkboxes = document.querySelectorAll(".checklist-checkbox");

  checkboxes.forEach((checkbox) => {
    const id = checkbox.getAttribute("data-id");
    const saved = localStorage.getItem(id);
    if (saved === "true") checkbox.checked = true;

    checkbox.addEventListener("change", () => {
      localStorage.setItem(id, checkbox.checked);
    });
  });

  document.getElementById("check-all").addEventListener("click", () => {
    checkboxes.forEach(checkbox => {
      checkbox.checked = true;
      localStorage.setItem(checkbox.getAttribute("data-id"), true);
    });
  });

  document.getElementById("reset-all").addEventListener("click", () => {
    checkboxes.forEach(checkbox => {
      checkbox.checked = false;
      localStorage.setItem(checkbox.getAttribute("data-id"), false);
    });
  });
});
</script>