Archived
1
0
Fork 0

Add about & Contact popups

This commit is contained in:
Ethanell 2020-08-15 11:47:36 +02:00
parent 33627a7004
commit a62d7a1921
5 changed files with 106 additions and 8 deletions

BIN
public/images/logoGC.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/images/logoInfo.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

View file

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

View file

@ -31,7 +31,6 @@ body {
margin: auto; margin: auto;
background-color: white; background-color: white;
box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2); box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
/* overflow-y: scroll; */
} }
h1, h2, p, label { h1, h2, p, label {
@ -41,6 +40,8 @@ h1, h2, p, label {
a { a {
color: #00B7FF; color: #00B7FF;
cursor: pointer;
text-decoration: none;
} }
#command { #command {
@ -79,7 +80,7 @@ a {
justify-content: space-around; justify-content: space-around;
} }
#add-command p, #remove-command p { #add-command, #remove-command {
font-weight: bold; font-weight: bold;
font-size: 2em; font-size: 2em;
margin: auto auto 1em auto; margin: auto auto 1em auto;
@ -88,3 +89,58 @@ a {
.hide { .hide {
display: none; 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);
}

View file

@ -32,10 +32,8 @@ block content
input#day(type="list" list="date-list" name="date1" required) input#day(type="list" list="date-list" name="date1" required)
div#command-action div#command-action
a#add-command a#add-command +
p + a#remove-command.hide -
a#remove-command.hide
p -
div.field div.field
input#send(type="submit" value="Pay") input#send(type="submit" value="Pay")
@ -44,4 +42,27 @@ block content
option(value="Jambon beurre") option(value="Jambon beurre")
datalist#date-list datalist#date-list
option(value="14/08/2020") 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") script(src="javascripts/index.js")