diff --git a/public/css/base.css b/public/css/base.css index 1578981..0acf37e 100644 --- a/public/css/base.css +++ b/public/css/base.css @@ -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); + } } \ No newline at end of file diff --git a/public/css/hotLine.css b/public/css/hotLine.css index 5eb3d6c..8a0454d 100644 --- a/public/css/hotLine.css +++ b/public/css/hotLine.css @@ -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; -} \ No newline at end of file +} + + + diff --git a/public/css/page-daccueil.css b/public/css/page-daccueil.css index 0df3078..c789555 100644 --- a/public/css/page-daccueil.css +++ b/public/css/page-daccueil.css @@ -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 */ } \ No newline at end of file diff --git a/public/js/Titre_Accueil.js b/public/js/Titre_Accueil.js index e37a5be..f0a7ebd 100644 --- a/public/js/Titre_Accueil.js +++ b/public/js/Titre_Accueil.js @@ -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"); diff --git a/routes/posts.js b/routes/posts.js index d3d6564..a9e71dc 100644 --- a/routes/posts.js +++ b/routes/posts.js @@ -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; \ No newline at end of file diff --git a/views/hotLine.ejs b/views/hotLine.ejs index 0fb9c6a..a5f9a2b 100644 --- a/views/hotLine.ejs +++ b/views/hotLine.ejs @@ -35,7 +35,7 @@

- Commandes + Commander

diff --git a/views/includes/head.ejs b/views/includes/head.ejs index 96b2e2d..217c0ed 100644 --- a/views/includes/head.ejs +++ b/views/includes/head.ejs @@ -7,3 +7,6 @@ + + + \ No newline at end of file diff --git a/views/includes/header.ejs b/views/includes/header.ejs index 75a850f..41e35dd 100644 --- a/views/includes/header.ejs +++ b/views/includes/header.ejs @@ -19,8 +19,16 @@ <% } %>
  • -
    • diff --git a/views/index.ejs b/views/index.ejs index 8198e82..209aa0c 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -7,16 +7,43 @@ + +
    + logo BDE permanent + logo BDS +
    +
    + + + + + + +

    hover me

    +
    + +
    + UIVERSE@kennyotsuUIVERSEUIVERSE +
    +
    + +
    logo Metzploreur
    - -
    - logo BDE permanent - logo BDS -
    <%- include('includes/footer') %>