Add about & Contact popups

public/javascripts/index.js

@@ -1,13 +1,16 @@
 const commandAction = document.getElementById("command-action");
-const addButton = document.getElementById("add-command");
 const rmButton = document.getElementById("remove-command");
+const more = document.getElementById("more");
+const dark = document.getElementById("dark");
+const about = document.getElementById("about");
+const contact = document.getElementById("contact");
 
 function lastCommandId() {
     let list = document.querySelectorAll("div.command h2");
     return parseInt(list[list.length-1].innerText.replace("Command ", ""));
 }
 
-addButton.addEventListener("click", () => {
+document.getElementById("add-command").addEventListener("click", () => {
     let id = lastCommandId() + 1;
     commandAction.insertAdjacentHTML("beforebegin", `<div id="command${id}" class="command">
     <h2>Command ${id}</h2>
@@ -30,3 +33,21 @@ rmButton.addEventListener("click", () => {
     if (id === 2)
         rmButton.classList.add("hide");
 });
+
+more.firstChild.addEventListener("click", () => {
+    dark.classList.remove("hide");
+    about.classList.remove("hide");
+});
+
+more.lastChild.addEventListener("click", () => {
+    dark.classList.remove("hide");
+    contact.classList.remove("hide")
+});
+
+dark.addEventListener("click", () => {
+    dark.classList.add("hide");
+    if (! about.classList.contains("hide"))
+        about.classList.add("hide");
+    else
+        contact.classList.add("hide");
+});

public/stylesheets/style.css

@@ -31,7 +31,6 @@ body {
   margin: auto;
   background-color: white;
   box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
- /* overflow-y: scroll; */
 }
 
 h1, h2, p, label {
@@ -41,6 +40,8 @@ h1, h2, p, label {
 
 a {
   color: #00B7FF;
+  cursor: pointer;
+  text-decoration: none;
 }
 
 #command {
@@ -79,7 +80,7 @@ a {
   justify-content: space-around;
 }
 
-#add-command p, #remove-command p {
+#add-command, #remove-command {
   font-weight: bold;
   font-size: 2em;
   margin: auto auto 1em auto;
@@ -88,3 +89,58 @@ a {
 .hide {
   display: none;
 }
+
+#more {
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  padding: 0.3em;
+  background-color: white;
+  box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
+  border-radius: 0.5em 0.5em 0 0;
+}
+
+#more a {
+  margin: 0.1em;
+  color: black;
+  text-decoration: underline;
+}
+
+#about, #contact {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: max-content;
+  width: max-content;
+}
+
+.images {
+  display: flex;
+  justify-content: space-around;
+}
+
+.images>div {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.images img {
+  height: 5em;
+}
+
+p.before-link a::before {
+  content: " ";
+}
+
+#dark {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(52, 55, 55, .4);
+}

views/index.pug

@@ -32,10 +32,8 @@ block content
           input#day(type="list" list="date-list" name="date1" required)
 
       div#command-action
-        a#add-command
+        a#add-command +
-          p +
+        a#remove-command.hide -
-        a#remove-command.hide
-          p -
 
       div.field
         input#send(type="submit" value="Pay")
@@ -44,4 +42,27 @@ block content
         option(value="Jambon beurre")
       datalist#date-list
         option(value="14/08/2020")
+
+  div#more
+    a(href="#about") About
+    a(href="#contact") Contact
+
+  div#dark.hide
+  div#about.card.hide
+    h1 About
+    p This software respond to the COVID-19 health crisis for the following students' offices food supply
+    div.images
+      div
+        img(src="images/logoInfo.png")
+        p IT student office
+      div
+        img(src="images/logoGC.png")
+        p Civil engineering student office
+    p.before-link Made with ❤️ by
+      a(href="https://www.linkedin.com/in/florian-charlaix" target="_blank") Florian Charlaix
+  div#contact.card.hide
+    h1 Contact
+    p.before-link Order issue
+      a(href="") test@test.fr
+
   script(src="javascripts/index.js")