add modals and menus

public/stylesheets/modal.css

@@ -0,0 +1,74 @@
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 15%; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    color: black;
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0, 0, 0); /* Fallback color */
+    background-color: rgba(0, 0, 0, 0.7); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+    margin: auto;
+    padding: 23px;
+    border-radius: 5px;
+    border: 1px solid #888888;
+    width: 80%;
+    text-align: center;
+    background-color: #fefefe;
+}
+
+#modalTitle {
+    font-size: 1.9em;
+    font-weight: 500;
+    margin-bottom: 12px;
+}
+
+@keyframes modalBlendOut {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes modalBlendIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.modalBlendIn {
+    animation: modalBlendIn 0.5s ease;
+}
+
+.modalBlendOut {
+    animation: modalBlendOut 0.8s ease;
+}
+
+/* The Close Button */
+.close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: #000000;
+    text-decoration: none;
+    cursor: pointer;
+}

public/stylesheets/style.css

@@ -1,13 +1,19 @@
+@import url("https://fonts.gaminggeneration.de/Roboto.css");
+
 
 body {
-
+    color: white;
     scroll-behavior: smooth;
+    font-family: "Roboto", serif;
+    font-style: normal;
 }
 
+
 #overlay {
     color: white;
 }
 
+
 #overlay #top {
     display: block;
     position: fixed;
@@ -19,15 +25,13 @@ body {
     color: white;
 }
 
-#title, #time {
+
-    width:50%;
+
-    float:right;
+#title {
-    text-align:left;
+    float: right;
-}
+    width: 100%;
-#time {
-    width:100%;
     font-size: 1.9em;
-    text-align:center;
+    text-align: center;
 }
 
 
@@ -41,6 +45,7 @@ body {
     background-color: #1F5E5F;
 }
 
+
 #overlay #bottom #menuBtn {
     height: 100%;
     width: 10%;
@@ -48,7 +53,7 @@ body {
     padding: 1px;
     font-size: 1.5em;
     border: 0;
-    border-radius: 3px;
+    border-radius: 0 8px 0 0;
     color: white;
 }
 
@@ -57,7 +62,6 @@ body {
     position: absolute;
     top: 10%;
     left: 1%;
-    background-color: lightseagreen;
     right: 1%;
     height: 80%;
 }
@@ -87,7 +91,7 @@ body {
 #main {
     display: grid;
     height: 100%;
-    background-color: red;
+
     grid-template-columns: repeat(3, calc(90% / 3));
     grid-template-rows: repeat(2, calc(90% / 2));
     grid-gap: 10% 5%;
@@ -104,4 +108,20 @@ body {
     background-color: black;
     width: 100%;
     height: 100%;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: repeat(3, calc(100% / 3));
+    grid-row-gap: 5%;
+    text-align: center;
+    border-radius: 30px 10px 30px;
+}
+
+.drink .thumbnail {
+    grid-column: span 1;
+    grid-row: span 2;
+}
+.drink .name {
+    grid-column: span 1;
+    grid-row: span 1;
+    font-size: 140%;
 }

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");
+   openModal("iTender", "Starten...")
-   const time = document.getElementById("time");
+
+   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);
 
 
-});
+}

views/layout.pug

@@ -4,11 +4,15 @@ html
         title iTender
         link(rel='stylesheet', href='/stylesheets/reset.css')
         link(rel='stylesheet', href='/stylesheets/style.css')
+        link(rel='stylesheet', href='/stylesheets/modal.css')
     body
+        div.modal#modal
+            div.modal-content#modal-content
+                div.modalInnerContent#modalInnerContent
+
         div#overlay
             div#top
-
+                span#title iTender
-                span#time 00:00
             div#bottom
                 button#menuBtn Menü
         div#container