add modals and menus

src/web/main.ts

@@ -1,16 +1,25 @@
 
+const main = document.getElementById("main");
+const time = document.getElementById("title");
+
 document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM Loaded");
 
-   const main = document.getElementById("main");
-   const time = document.getElementById("time");
+   openModal("iTender", "Starten...")
+
+   setTimeout( load, 1000);
+   setTimeout( () => closeModal(), 2500 );
+
+
+});
+
+function load()
+{
    if(!main||!time)
       return;
-   let currentDate = new Date();
-
 
    setInterval( () => {
-      currentDate = new Date();
+      let currentDate = new Date();
       time.innerText = "" + ( currentDate.getHours() < 10 ? "0" + currentDate.getHours() : currentDate.getHours() ) + ":" + ( currentDate.getMinutes() < 10 ? "0" + currentDate.getMinutes() : currentDate.getMinutes() );
    }, 1000 );
 
@@ -24,10 +33,59 @@ document.addEventListener("DOMContentLoaded", () => {
       let testDrink = document.createElement("div");
       testDrink.classList.add("drink");
 
+      let img = document.createElement("img");
+      img.classList.add("thumbnail");
+      testDrink.append(img);
+
+      let name = document.createElement("p");
+      name.classList.add("name");
+      testDrink.append(name);
+
+      img.alt="Thumbnail";
+      name.innerText = "Mixery"
+
       main.append(testDrink);
    }
+}
 
 
+function openModal(title, content) {
+   const modal = document.getElementById("modal");
+   const modalContent = document.getElementById("modalInnerContent");
+
+   if(!modal || !modalContent)
+      return;
+
+   modalContent.classList.add("modalBlendIn");
+   modal.classList.add("modalBlendIn");
+
+   setTimeout(() => {
+      modalContent.classList.remove("modalBlendIn");
+      modal.classList.remove("modalBlendIn");
+   }, 800);
+
+   modalContent.innerHTML = `<h1 id="modalTitle">${title}</h1>${content}`;
+   modal.style.display = "block";
+
+}
+
+function closeModal() {
+   const modal = document.getElementById("modal");
+   const modalContent = document.getElementById("modal-content");
+   const modalInnerContent = document.getElementById("modalInnerContent");
+
+   if(!modal || !modalContent || !modalInnerContent)
+      return;
+
+   modalContent.classList.add("modalBlendOut");
+   modal.classList.add("modalBlendOut");
+
+   setTimeout(() => {
+      modal.style.display = "none";
+      modalInnerContent.innerHTML = "";
+      modalContent.classList.remove("modalBlendOut");
+      modal.classList.remove("modalBlendOut");
+   }, 800);
 
 
-});
+}