show a notification to a user |showNotification(message_text, button_text, button_url)| The buttonURL is optional

notification.js

//REQURIES JQUERY!!!!!!

/**
 * The showNotification function displays a banner at the top of the page.
 *
 *
 * @param message_text Set the text of the banner
 * @param button_text Set the text of the button
 * @param button_url Redirect to a specific page after the information banner is closed
 *
 * @return Nothing
 *
 * @author Spotlightforbugs
 */
function showNotification(message_text, button_text, button_url) {
  const text = message_text;
  const buttonText = button_text;
  const buttonUrl = button_url;

  // show the information banner
  const infBanner = document.createElement("div");
  infBanner.setAttribute("id", "infBanner");
  infBanner.innerHTML = `


    <br>

        <div class="infBanner">
            <div class="infBanner__container">
                <div class="infBanner__text">
                    ${text}
                </div>


                <div><p></p></div>
                <button class="infBanner__button">
                    ${buttonText}
                </button>
            </div>
        </div>
        `;

  infBanner.style.position = "fixed";
  infBanner.style.top = "0";
  infBanner.style.left = "0";
  infBanner.style.width = "100%";
  infBanner.style.height = "100%";

  infBanner.style.display = "flex";
  infBanner.style.justifyContent = "center";
  infBanner.style.alignItems = "center";

  // style the information banner container to be solid white
  infBanner.querySelector(".infBanner__container").style.backgroundColor =
    "#fff";
  infBanner.querySelector(".infBanner__container").style.padding = "2rem";
  infBanner.querySelector(".infBanner__container").style.borderRadius = "1rem";
  infBanner.querySelector(".infBanner__container").style.boxShadow =
    "0 0 1rem rgba(0,0,0,0.2)";
  infBanner.querySelector(".infBanner__container").style.maxWidth = "50rem";
  infBanner.querySelector(".infBanner__container").style.textAlign = "center";

  // style the information banner text
  infBanner.querySelector(".infBanner__text").style.fontSize = "1.5rem";
  infBanner.querySelector(".infBanner__text").style.marginBottom = "2rem";

  // style the information banner button
  infBanner.querySelector(".infBanner__button").style.backgroundColor = "#000";
  infBanner.querySelector(".infBanner__button").style.color = "#fff";
  infBanner.querySelector(".infBanner__button").style.border = "none";
  infBanner.querySelector(".infBanner__button").style.padding = "1rem 2rem";
  infBanner.querySelector(".infBanner__button").style.borderRadius = "0.5rem";
  infBanner.querySelector(".infBanner__button").style.fontSize = "1.5rem";
  infBanner.querySelector(".infBanner__button").style.cursor = "pointer";
  infBanner.querySelector(".infBanner__button").style.marginTop = "2rem";

  // make the button be located under the text and not next to it
  infBanner.querySelector(".infBanner__button").style.display = "block";

  const url = window.location.href;
  // add the logo to the information banner
  const logo = document.createElement("img");
  logo.setAttribute("src", "../static/images/Logo.png");
  logo.setAttribute("width", "100");
  logo.setAttribute("height", "100");

  // prepend a br (we could append it, but then I would have to move the code around)
  const br = document.createElement("br");
  infBanner.querySelector(".infBanner__container").prepend(br);

  // append the logo above the information banner text
  infBanner.querySelector(".infBanner__text").prepend(logo);
  // append a line break after the logo

  document.getElementsByTagName("body")[0].appendChild(infBanner);

  // center the button without using auto attributes
  infBanner.querySelector(".infBanner__button").style.marginLeft = "auto";
  infBanner.querySelector(".infBanner__button").style.marginRight = "auto";

  // further center the button
  infBanner.querySelector(".infBanner__button").style.marginTop = "2rem";

  // replace . with <br> if no . is directly before or after it
  const textNodes = document.querySelectorAll(".infBanner__text");
  textNodes.forEach((textNode) => {
    textNode.innerHTML = textNode.innerHTML.replace("<br>", /(?<!\.)\.(?!\.)/g);
  });
  // replace the logos src with the correct one by replacing .<br> with ..
  infBanner.querySelector(".infBanner__text").innerHTML = infBanner
    .querySelector(".infBanner__text")
    .innerHTML.replace(/.<br>/g, "..");

  // make all text bold which is in this array:
  const bold = [
    "thisWIllBeBold","thisWillbeBoldAsWell"
 
    
  ];
  bold.forEach((boldText) => {
    const text = infBanner.querySelector(".infBanner__text").innerHTML;
    const newText = text.replace(boldText, `<b>${boldText}</b>`);
    infBanner.querySelector(".infBanner__text").innerHTML = newText;
  });

  infBanner
    .querySelector(".infBanner__button")
    .addEventListener("mouseover", function () {
      infBanner.querySelector(".infBanner__button").style.backgroundColor =
        "#000";
      infBanner.querySelector(".infBanner__button").style.color = "#fff";
      infBanner.querySelector(".infBanner__button").style.border = "none";
      infBanner.querySelector(".infBanner__button").style.padding = "1rem 2rem";
      infBanner.querySelector(".infBanner__button").style.borderRadius =
        "0.5rem";
      infBanner.querySelector(".infBanner__button").style.fontSize = "1.5rem";
      infBanner.querySelector(".infBanner__button").style.cursor = "pointer";
      infBanner.querySelector(".infBanner__button").style.marginTop = "2rem";
      infBanner.querySelector(".infBanner__button").style.display = "block";
      infBanner.querySelector(".infBanner__button").style.transition =
        "all 1s ease-in-out";
      infBanner.querySelector(".infBanner__button").style.transform =
        "scale(1.1)";
      infBanner.querySelector(".infBanner__button").style.boxShadow =
        "0 0 1rem rgba(0,0,0,0.2)";
    });

  infBanner
    .querySelector(".infBanner__button")
    .addEventListener("mouseout", function () {
      infBanner.querySelector(".infBanner__button").style.backgroundColor =
        "#000";
      infBanner.querySelector(".infBanner__button").style.color = "#fff";
      infBanner.querySelector(".infBanner__button").style.border = "none";
      infBanner.querySelector(".infBanner__button").style.padding = "1rem 2rem";
      infBanner.querySelector(".infBanner__button").style.borderRadius =
        "0.5rem";
      infBanner.querySelector(".infBanner__button").style.fontSize = "1.5rem";
      infBanner.querySelector(".infBanner__button").style.cursor = "pointer";
      infBanner.querySelector(".infBanner__button").style.marginTop = "2rem";
      infBanner.querySelector(".infBanner__button").style.display = "block";
      infBanner.querySelector(".infBanner__button").style.transition =
        "all 1s ease-in-out";
      infBanner.querySelector(".infBanner__button").style.transform =
        "scale(1.0)";
      infBanner.querySelector(".infBanner__button").style.boxShadow =
        "0 0 1rem rgba(0,0,0,0.2)";
    });

  hide_everything_but_infBanner();

  // add an event listener to the button
  infBanner
    .querySelector(".infBanner__button")
    .addEventListener("click", function () {
      // show an loading animation for 1 second and then redirect to the url specified by buttonUrl
      
      if (buttonUrl != null && buttonUrl != "" && buttonUrl != undefined) {
      
        infBanner.querySelector(".infBanner__button").innerHTML =
          //REDIRECTION TEXT
          "Sichere Verbindung wird hergestellt...";
      } else {
        infBanner.querySelector(".infBanner__button").innerHTML =
          //JUST MESSAGE CLOSING TEXT
          "aktualisieren...";
      }


      // if the buttonUrl is set, then redirect to it, otherwise remove the banner
      if (buttonUrl) {
        setTimeout(function () {
          window.location.href = buttonUrl;
        }, 1000);
      } else {
        show_everything_but_infBanner();
      }
    });

  function hide_everything_but_infBanner() {
    // hide everything but the information banner
    document.querySelectorAll("body > *").forEach((element) => {
      if (element !== infBanner) {
        element.style.display = "none";
      }
    });
  }

  function show_everything_but_infBanner() {
    // show everything by loading the body again using ajax and then removing the information banner
    $.ajax({
      url: window.location.href,
      success: function (data) {
        document.body.innerHTML = data;
        infBanner.remove();
      },
    });
  }
}