<div class="actions">
<button id="openBtn" class="cta" disabled>Abrir Office</button>
<button id="cancelBtn" class="ghost">Cancelar</button>
</div>
</div> <script>
const openBtn = document.getElementById('openBtn');
const cancelBtn = document.getElementById('cancelBtn');
const message = document.getElementById('message');
let remaining = 42;
let intervalId = null;
// Initialize button text with countdown
openBtn.textContent = `Abrir Office (${remaining}s)`;
function startCountdown() {
intervalId = setInterval(() => {
remaining--;
if (remaining > 0) {
openBtn.textContent = `Abrir Office (${remaining}s)`;
} else {
clearInterval(intervalId);
intervalId = null;
openBtn.disabled = false;
openBtn.textContent = 'Abrir Office';
message.textContent = 'El botón ya está activo.';
}
}, 1000);
}
// Start 20s countdown on load
startCountdown();
// Cancel button: stop countdown and enable immediately
cancelBtn.addEventListener('click', () => {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
}
openBtn.disabled = false;
openBtn.textContent = 'Abrir Office';
message.textContent = 'Activación cancelada.';
});
// Example open action
openBtn.addEventListener('click', () => {
message.textContent = 'Abriendo Office...';
// Aquí iría la lógica real para abrir Office o navegar.
});
</script>
agrega a la script que el boton tenga una url a redireccionar al darle click terminsndo el conteo de segundos