<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"> </script>
<script>
    var is_add = false;
    $(document).ready(function() {

        self.setInterval("checkNewMessage()", 1000);
    });

	showMessage();
    // function checkNewMessage() {
    //     $.getJSON("/q.php/index.index.json", function(result) {
    //         if (result['userInfo']['newAtInfo'] > 0 || result['userInfo']['newMsg'] > 0) {
    //             showMessage();
    //         }
    //     });
    // }

    function showMessage() {
        if (is_add) {

        } else {
            is_add = true;

            const colorBlock = document.createElement("div");
			colorBlock.id = "color-block";
			colorBlock.style.position = "fixed";
			colorBlock.style.top = 0;
			colorBlock.style.left = 0;
			colorBlock.style.width = "100%";
			colorBlock.style.height = "100%";
			colorBlock.style.transition = "background 1s ease-in-out";
			colorBlock.style.zIndex = -1;
			document.body.insertAdjacentElement("afterbegin", colorBlock);

			const containers = document.querySelectorAll(".container");
			containers.forEach((container) => {
			  container.style.backgroundColor = "#ffffff47";
			});


			const generateColors = () => {
			  const colors = [];

			  const hue = Math.floor(Math.random() * 360);
			  const saturation = Math.floor(Math.random() * 21) + 80;
			  const lightness = Math.floor(Math.random() * 11) + 70;

			  for (let i = 0; i < 20; i++) {
			    const h = hue;
			    const s = saturation;
			    const l = lightness + i * 2;

			    colors.push(`hsl(${h}, ${s}%, ${l}%)`);
			  }

			  return colors;
			};

            // const colorBlock = document.getElementById("color-block");
			const colors = generateColors();



			let currentColor = 0;
			let direction = 1;

		

			let currentIndex = 0;

			function changeBackground() {
			    const nextIndex = currentIndex + direction;
				if (nextIndex === colors.length || nextIndex === -1) {
				    direction = -direction;
				    currentIndex += direction;
				} else {
				    document.body.style.background = `linear-gradient(to bottom right, ${colors[currentIndex]}, ${colors[nextIndex]})`;
				    currentIndex = nextIndex;
				}
			}

			setInterval(changeBackground, 100);


			// setInterval(changeColor, 200);

        }
    }




</script>