document.addEventListener("DOMContentLoaded", function() {
// Crea el contenedor del modal
var modal = document.createElement("div");
modal.id = "welcomeModal";
modal.style.position = "fixed";
modal.style.zIndex = "9999";
modal.style.left = "0";
modal.style.top = "0";
modal.style.width = "100%";
modal.style.height = "100%";
modal.style.overflow = "auto";
modal.style.backgroundColor = "rgba(0,0,0,0.4)";
// Crea el contenedor del contenido del modal
var modalContent = document.createElement("div");
modalContent.style.backgroundColor = "#fff";
modalContent.style.margin = "15% auto";
modalContent.style.padding = "20px";
modalContent.style.border = "1px solid #ccc";
modalContent.style.width = "80%";
modalContent.style.maxWidth = "400px";
modalContent.style.textAlign = "center";
modalContent.style.borderRadius = "10px";
// Crea el botón para cerrar el modal
var closeBtn = document.createElement("span");
closeBtn.innerHTML = "×";
closeBtn.style.color = "#aaa";
closeBtn.style.float = "right";
closeBtn.style.fontSize = "28px";
closeBtn.style.fontWeight = "bold";
closeBtn.style.cursor = "pointer";
closeBtn.addEventListener("click", function() {
modal.style.display = "none";
});
modalContent.appendChild(closeBtn);
// Crea el elemento de mensaje de bienvenida
var greetingElem = document.createElement("p");
greetingElem.id = "greetingText";
greetingElem.style.fontSize = "18px";
greetingElem.style.fontWeight = "bold";
modalContent.appendChild(greetingElem);
// Añade el contenido al contenedor del modal
modal.appendChild(modalContent);
document.body.appendChild(modal);
// Determina el saludo basado en la hora
var hour = new Date().getHours();
var greeting = "";
if (hour < 12) {
greeting = "¡Buenos días!";
} else if (hour < 18) {
greeting = "¡Buenas tardes!";
} else {
greeting = "¡Buenas noches!";
}
greetingElem.textContent = greeting + " Bienvenido a nuestro catálogo digital.";
// Muestra el modal
modal.style.display = "block";
// Cierra el modal si se hace clic fuera del contenido
window.addEventListener("click", function(event) {
if (event.target === modal) {
modal.style.display = "none";
}
});
});
