¡Por supuesto! Te proporcionaré un ejemplo completo de HTML, CSS y JavaScript para lograr lo que estás buscando. Aquí está el código:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Botón con Ventana Modal y Cuenta Regresiva</title>
<style>
/* Estilo del botón */
.button {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
cursor: pointer;
}
/* Estilo de la ventana modal */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
/* Estilo del contenido de la ventana modal */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* Estilo del enlace oculto */
.hidden-link {
display: none;
}
/* Estilo del mensaje de enlace desencriptado */
.link-message {
margin-top: 20px;
}
</style>
</head>
<body>
<!-- Botón "Aquí" con enlace encriptado en base64 -->
<button id="aqui" class="button">Aquí</button>
<a href="#" class="hidden-link" data-link="aHR0cHM6Ly93d3cueW91dHViZS5jb20="></a>
<!-- Ventana modal -->
<div id="modal" class="modal">
<div class="modal-content">
<div>Serás redirigido en <span id="countdown">4</span> segundos</div>
<div id="links"></div>
</div>
</div>
<!-- Script -->
<script>
// Botón "Aquí"
var button = document.getElementById('aqui');
var hiddenLink = document.getElementsByClassName('hidden-link')[0];
var link = window.atob(hiddenLink.dataset.link);
// Ventana modal
var modal = document.getElementById('modal');
var linksDiv = document.getElementById('links');
var countdownEl = document.getElementById('countdown');
var countdown = 4;
var intervalID;
// Cuenta regresiva
function startCountdown() {
intervalID = setInterval(function() {
countdown--;
countdownEl.textContent = countdown;
if (countdown <= 0) {
clearInterval(intervalID);
showLinks();
}
}, 1000);
}
// Abrir ventana modal al hacer clic en el botón
button.addEventListener('click', function() {
modal.style.display = 'block';
startCountdown();
});
// Ocultar enlace y mostrar ventana modal
hiddenLink.href = link;
hiddenLink.target = '_blank';
hiddenLink.click();
// Función para desencriptar la URL en base64
function decodeURL(url) {
return decodeURIComponent(atob(url).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
}
// Mostrar enlaces y ocultar cuenta regresiva
function showLinks() {
var links = ["aHR0cHM6Ly93d3cueW91dHViZS5jb20=", "aHR0cHM6Ly93d3cueW91dHViZS5jb20=", "aHR0cHM6Ly93d3cueW91dHViZS5jb20="];
countdownEl.style.display = 'none';
links.forEach(function(link) {
var decodedLink = decodeURL(link);
var linkEl = document.createElement('a');
linkEl.href = decodedLink;
linkEl.textContent = decodedLink;
linkEl.target = '_blank';
linksDiv.appendChild(linkEl);
linksDiv.appendChild(document.createElement('br'));
});
// Mostrar mensaje de enlace desencriptado
var messageEl = document.createElement('div');
messageEl.classList.add('link-message');
messageEl.textContent = 'El enlace desencriptado es: ' + link;
linksDiv.appendChild(messageEl);
}
</script>
</body>
</html>
```
Este código incluye un botón con ID "aqui" y un enlace oculto con una URL encriptada en base64. También incluye una ventana modal con una cuenta regresiva de 4 segundos y 3 enlaces ocultos. Al hacer clic en el botón, se abre la ventana modal y se inicia la cuenta regresiva. Al finalizar la cuenta regresiva, se muestran los enlaces ocultos. Al hacer clic en uno de los enlaces, se abre en una nueva pestaña y se muestra un mensaje con el enlace desencriptado debajo de los enlaces ocultos.
Por otra parte, el CSS proporciona los estilos para el botón, la ventana modal, el enlace oculto y el mensaje de enlace desencriptado.
Por último, el JavaScript maneja las funcionalidades mencionadas, como abrir