button modified
This commit is contained in:
clement callaert
parent
434defc6b1
commit
6c77008d47
9 changed files with 652 additions and 21 deletions
|
|
@ -1,5 +1,5 @@
|
|||
body {
|
||||
font-feature: Arial;
|
||||
font-family: 'Orbitron', sans-serif;/*Voyager Typeface, Stargaze Typeface, Centauri - Fonte futuriste, Haynthams Spacescript, Death Star Space Police*/
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #0f056b;
|
||||
|
|
@ -22,7 +22,7 @@ body {
|
|||
background: linear-gradient(45deg, #0f056b, rgb(133, 20, 20));
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 4rem;
|
||||
height: 4.5rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
|
@ -81,7 +81,7 @@ footer a img {
|
|||
padding: 0;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -184,4 +184,181 @@ footer div p {
|
|||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: -0.5rem 0 0 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 10rem;
|
||||
height: 3rem;
|
||||
background-size: 300% 300%;
|
||||
backdrop-filter: blur(1rem);
|
||||
border-radius: 5rem;
|
||||
transition: 0.5s;
|
||||
animation: gradient_301 5s ease infinite;
|
||||
border: double 4px transparent;
|
||||
background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
|
||||
background-origin: border-box;
|
||||
background-clip: content-box, border-box;
|
||||
}
|
||||
|
||||
#container-stars {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: 0.5s;
|
||||
backdrop-filter: blur(1rem);
|
||||
border-radius: 5rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
z-index: 2;
|
||||
font-family: 'Avalors Personal Use';
|
||||
font-size: 12px;
|
||||
letter-spacing: 5px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0 0 4px white;
|
||||
}
|
||||
|
||||
#glow {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
filter: blur(2rem);
|
||||
animation: pulse_3011 4s infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.circle:nth-of-type(1) {
|
||||
background: rgba(254, 83, 186, 0.636);
|
||||
}
|
||||
|
||||
.circle:nth-of-type(2) {
|
||||
background: rgba(142, 81, 234, 0.704);
|
||||
}
|
||||
|
||||
.btn:hover #container-stars {
|
||||
z-index: 1;
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: scale(1.1)
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
border: double 4px #FE53BB;
|
||||
background-origin: border-box;
|
||||
background-clip: content-box, border-box;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.btn:active .circle {
|
||||
background: #FE53BB;
|
||||
}
|
||||
|
||||
#stars {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
width: 200rem;
|
||||
height: 200rem;
|
||||
}
|
||||
|
||||
#stars::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10rem;
|
||||
left: -100rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: animStarRotate 90s linear infinite;
|
||||
}
|
||||
|
||||
#stars::after {
|
||||
background-image: radial-gradient(#ffffff 1px, transparent 1%);
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
|
||||
#stars::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -50%;
|
||||
width: 170%;
|
||||
height: 500%;
|
||||
animation: animStar 60s linear infinite;
|
||||
}
|
||||
|
||||
#stars::before {
|
||||
background-image: radial-gradient(#ffffff 1px, transparent 1%);
|
||||
background-size: 50px 50px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes animStar {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(-135rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animStarRotate {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient_301 {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse_3011 {
|
||||
0% {
|
||||
transform: scale(0.75);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.75);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -19,6 +19,20 @@ body {
|
|||
|
||||
}
|
||||
|
||||
#secondDiv {
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
border: 0.2rem solid rgba(230,173,26,255);
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#thirdDiv {
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
border: 0.2rem solid rgba(230,173,26,255);
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#hiddenDiv {
|
||||
display: none;
|
||||
object-fit: cover;
|
||||
|
|
@ -38,4 +52,7 @@ body {
|
|||
|
||||
#hiddenDiv h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ main {
|
|||
opacity: 80%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0 1rem 3rem 0;
|
||||
margin: 6rem 3rem 1rem 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ main {
|
|||
opacity: 90%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0 0 3rem 1rem;
|
||||
margin: 6rem 0 1rem 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ main {
|
|||
opacity: 80%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 6rem 0 0 0;
|
||||
margin: 2rem 0 0 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -108,4 +108,376 @@ main {
|
|||
font-size: 24px;
|
||||
min-width: 196px;
|
||||
}
|
||||
}
|
||||
|
||||
/* overengeneered pure css action button */
|
||||
/* UIVERSE CSS Challenge entry */
|
||||
/* by kennyotsu <3 */
|
||||
|
||||
|
||||
|
||||
/* container wraps everything together, applies general styles and does nothing else*/
|
||||
.container {
|
||||
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
color: rgb(131, 131, 131);
|
||||
-webkit-transition: 400ms ease-in-out;
|
||||
transition: 400ms ease-in-out;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
/* clickHandler, as the name suggests, handles clicks.
|
||||
Its a label for invisible checkbox, positioned absolutely and taking whole container space.
|
||||
Comes with insane z-index. Stays above .container
|
||||
When clicked, will change input state to checked */
|
||||
#shuttle-wrapper {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
-webkit-transition: 200ms ease-in;
|
||||
transition: 200ms ease-in;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
#b {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
#shadow {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
-webkit-transform: rotateX(45deg) rotateZ(45deg);
|
||||
transform: rotateX(45deg) rotateZ(45deg);
|
||||
bottom: -10px;
|
||||
z-index: -1;
|
||||
background: radial-gradient(rgba(0, 0, 0, 0.382) 0%, rgba(0, 0, 0, 0) 70%);
|
||||
}
|
||||
|
||||
#clickHandler {
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#clickHandler:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.container:hover #shuttle-wrapper {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(-100px) translateZ(140px);
|
||||
-ms-transform: translateY(-100px) translateZ(140px);
|
||||
transform: translateY(-100px) translateZ(140px);
|
||||
-webkit-transition: 400ms ease-in-out;
|
||||
transition: 400ms ease-in-out;
|
||||
}
|
||||
|
||||
#checkbox {
|
||||
/* comment out to actually see the checkbox state */
|
||||
display: none;
|
||||
/* */
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* this pseudo-selectors will fire animations when
|
||||
clickHandler changes checkbox state to checked */
|
||||
#checkbox:checked ~ #shuttle-wrapper #b {
|
||||
-webkit-animation-name: launch_31;
|
||||
animation-name: launch_31;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-duration: 6s;
|
||||
animation-duration: 6s;
|
||||
}
|
||||
|
||||
#checkbox:checked ~ #shuttle-wrapper #shadow {
|
||||
-webkit-animation: shadow-launch 6s ease-in-out;
|
||||
animation: shadow-launch 6s ease-in-out;
|
||||
}
|
||||
|
||||
#checkbox:checked ~ #to-hover {
|
||||
-webkit-animation-name: fadeout_010;
|
||||
animation-name: fadeout_010;
|
||||
-webkit-animation-duration: 6s;
|
||||
animation-duration: 6s;
|
||||
}
|
||||
|
||||
#checkbox:checked ~ #button #to-launch {
|
||||
-webkit-animation-name: fadeout_010;
|
||||
animation-name: fadeout_010;
|
||||
-webkit-animation-duration: 6s;
|
||||
animation-duration: 6s;
|
||||
}
|
||||
/* and this will take care of hover */
|
||||
#clickHandler:hover ~ #button {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
-webkit-transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
|
||||
transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
|
||||
-webkit-box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512),
|
||||
28px 28px 28px 0 rgba(28, 27, 88, 0.315);
|
||||
box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512),
|
||||
28px 28px 28px 0 rgba(28, 27, 88, 0.315);
|
||||
-webkit-transition-delay: 0ms;
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
|
||||
.container:hover {
|
||||
-webkit-transform: translateY(30%);
|
||||
-ms-transform: translateY(30%);
|
||||
transform: translateY(30%);
|
||||
}
|
||||
|
||||
#to-launch {
|
||||
color: rgb(1, 85, 255);
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
-webkit-transition: ease-out 200ms;
|
||||
transition: ease-out 200ms;
|
||||
}
|
||||
|
||||
#to-hover {
|
||||
margin-top: 1em;
|
||||
text-align: center;
|
||||
-webkit-transition: ease-out 200ms;
|
||||
transition: ease-out 200ms;
|
||||
}
|
||||
|
||||
#tag {
|
||||
opacity: 0;
|
||||
color: rgb(43, 43, 43);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#platform {
|
||||
position: absolute;
|
||||
width: 70%;
|
||||
height: 0;
|
||||
border-radius: 16px;
|
||||
background-color: rgb(234, 234, 234);
|
||||
-webkit-transition: 0.3s ease-in-out;
|
||||
transition: 0.3s ease-in-out;
|
||||
-webkit-transition-delay: 150ms;
|
||||
transition-delay: 150ms;
|
||||
border: solid 0px rgba(42, 42, 42, 0);
|
||||
outline: dashed rgba(255, 173, 57, 0);
|
||||
-moz-outline-radius: 16px;
|
||||
outline-width: 0px;
|
||||
outline-offset: 0px;
|
||||
}
|
||||
|
||||
#clickHandler:hover ~ #button #platform {
|
||||
height: 70%;
|
||||
background: rgb(244, 244, 244);
|
||||
border: solid 4px rgb(42, 42, 42);
|
||||
outline: dashed rgb(255, 172, 57);
|
||||
outline-width: 4px;
|
||||
outline-offset: -4px;
|
||||
-webkit-animation: shake_010 80ms infinite;
|
||||
animation: shake_010 80ms infinite;
|
||||
}
|
||||
|
||||
.caution {
|
||||
-webkit-transform: translateY(-200);
|
||||
-ms-transform: translateY(-200);
|
||||
transform: translateY(-200);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#checkbox:checked ~ .caution {
|
||||
-webkit-animation-name: fadeout_010;
|
||||
animation-name: fadeout_010;
|
||||
-webkit-animation-duration: 6s;
|
||||
animation-duration: 6s;
|
||||
}
|
||||
|
||||
#caution-left {
|
||||
-webkit-transition: 200ms ease;
|
||||
transition: 200ms ease;
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
|
||||
transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
|
||||
}
|
||||
|
||||
#caution-right {
|
||||
-webkit-transition: 200ms ease;
|
||||
transition: 200ms ease;
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
|
||||
transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
|
||||
}
|
||||
|
||||
#clickHandler:hover ~ #button .caution #caution-left {
|
||||
opacity: 1;
|
||||
-webkit-transition: 400ms ease-in;
|
||||
transition: 400ms ease-in;
|
||||
animation: glow_010 1.2s infinite;
|
||||
}
|
||||
|
||||
#clickHandler:hover ~ #button .caution #caution-right {
|
||||
opacity: 1;
|
||||
-webkit-transition: 400ms ease-in;
|
||||
transition: 400ms ease-in;
|
||||
animation: glow_010 1.2s infinite;
|
||||
}
|
||||
|
||||
#button {
|
||||
width: 200px;
|
||||
height: 80px;
|
||||
border: none;
|
||||
border-radius: 1.8rem;
|
||||
-webkit-transition: 0.4s ease-in-out;
|
||||
transition: 0.4s ease-in-out;
|
||||
-webkit-box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315);
|
||||
box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#ececec));
|
||||
background: linear-gradient(125deg, #ffffff 50%, #f5f5ff);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
font-family: inherit;
|
||||
-webkit-transition-delay: 100ms;
|
||||
transition-delay: 100ms;
|
||||
}
|
||||
|
||||
#clickHandler:hover ~ #button #to-launch {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#clickHandler:hover ~ #to-hover {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#checkbox:checked ~ #button #tag {
|
||||
-webkit-animation: tag-transition 5s ease-in-out;
|
||||
animation: tag-transition 5s ease-in-out;
|
||||
}
|
||||
|
||||
/* launch sequence, takes only 20% of duration to completely fade out,
|
||||
and stays there til 90% */
|
||||
|
||||
@keyframes launch_31 {
|
||||
5% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
15%, 90% {
|
||||
-webkit-transform: translateY(-200px);
|
||||
transform: translateY(-200px);
|
||||
-webkit-transition-timing-function: ease-in;
|
||||
transition-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shadow-launch {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
10%, 90% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeout_010 {
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
0%, 20%, 90% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake_010 {
|
||||
0%, 50% {
|
||||
-webkit-transform: translate3d(1px, 0px, 0px);
|
||||
transform: translate3d(1px, 0px, 0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(0px, 1px, 0px);
|
||||
transform: translate3d(0px, 1px, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow_010 {
|
||||
0% {
|
||||
color: rgb(94, 94, 94);
|
||||
-webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
|
||||
filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
|
||||
}
|
||||
|
||||
70% {
|
||||
color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
color: rgb(94, 94, 94);
|
||||
-webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
|
||||
filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tag-transition {
|
||||
0%, 100% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
20%, 80% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.noselect {
|
||||
margin: auto;
|
||||
-webkit-touch-callout: none;
|
||||
/* iOS Safari */
|
||||
-webkit-user-select: none;
|
||||
/* Safari */
|
||||
/* Konqueror HTML */
|
||||
-moz-user-select: none;
|
||||
/* Old versions of Firefox */
|
||||
-ms-user-select: none;
|
||||
/* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
/* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
let button_element = document.querySelector("#menu_button");
|
||||
let button_element = document.querySelector(".btn");
|
||||
let navElement = document.querySelector("#nav_id");
|
||||
let listElements = document.querySelectorAll("#nav_id ul li");
|
||||
|
||||
|
|
|
|||
|
|
@ -41,20 +41,27 @@ router.get('/hotLine', async function (req,res) {
|
|||
return res.status(401).render('401');
|
||||
}
|
||||
const postData = await db.getDb().collection('posts').find().toArray();
|
||||
res.render('hotLine', {postData: postData})
|
||||
const commandeData = await db.getDb().collection('commandes').find().toArray();
|
||||
res.render('hotLine', {postData: postData, commandeData: commandeData})
|
||||
})
|
||||
|
||||
router.post('/commandeCrepe', async function (req, res) {
|
||||
const crepeData = req.body;
|
||||
const enteredCommentaire = crepeData.commentaire;
|
||||
const enteredGarniture = crepeData.garniture;
|
||||
const nom = req.session.user.nom;
|
||||
const prenom = req.session.user.prenom;
|
||||
|
||||
|
||||
|
||||
const crepeCommande = {
|
||||
garniture: enteredGarniture,
|
||||
commentaire: enteredCommentaire,
|
||||
nom: nom,
|
||||
prenom: prenom,
|
||||
finish: false
|
||||
}
|
||||
await db.getDb().collection('commande').insertOne(crepeCommande);
|
||||
await db.getDb().collection('commandes').insertOne(crepeCommande);
|
||||
res.redirect("/hotLine");
|
||||
})
|
||||
|
||||
|
|
@ -93,4 +100,6 @@ router.post('/accepter/:id', async function (req, res) {
|
|||
res.redirect('/admin')
|
||||
})
|
||||
|
||||
|
||||
|
||||
module.exports = router;
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
<div id="secondDiv">
|
||||
<h2>
|
||||
Commandes
|
||||
Commander
|
||||
</h2>
|
||||
<form action="/commandeCrepe" methode="POST">
|
||||
<ul>
|
||||
|
|
@ -53,7 +53,25 @@
|
|||
submit
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<h2>
|
||||
Commandes
|
||||
</h2>
|
||||
<% if (commandeData.length === 0) {%>
|
||||
<h3>
|
||||
Pas encore de commande
|
||||
</h3>
|
||||
<% } %>
|
||||
<% commandeData.forEach(commande => { %>
|
||||
<% if (!commande.isFinish) { %>
|
||||
<h3>
|
||||
<%= commande.nom %> <%= commande.prenom %>
|
||||
</h3>
|
||||
<p>
|
||||
<%= commande.commentaire %>
|
||||
<%= commande.garniture %>
|
||||
</p>
|
||||
<% } %>
|
||||
<% }) %>
|
||||
</div>
|
||||
<div id="thirdDiv">
|
||||
<h2>
|
||||
|
|
|
|||
|
|
@ -7,3 +7,6 @@
|
|||
<link rel="icon" type="image/x-icon" href="favicon_ico/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="css/base.css">
|
||||
<script src="js/Titre_Accueil.js" defer></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
|
||||
|
|
@ -19,8 +19,16 @@
|
|||
</li>
|
||||
<% } %>
|
||||
<li>
|
||||
<button class="button-85" role="button" id="menu_button">
|
||||
Menu
|
||||
<button class="btn" type="button">
|
||||
<strong>Explore</strong>
|
||||
<div id="container-stars">
|
||||
<div id="stars"></div>
|
||||
</div>
|
||||
|
||||
<div id="glow">
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue