diff --git a/WEB/View/assets/img/BGBotPres.png b/WEB/View/assets/img/BGBotPres.png new file mode 100644 index 00000000..135b3985 Binary files /dev/null and b/WEB/View/assets/img/BGBotPres.png differ diff --git a/WEB/View/assets/img/BGTopPres.png b/WEB/View/assets/img/BGTopPres.png new file mode 100644 index 00000000..9f67c5da Binary files /dev/null and b/WEB/View/assets/img/BGTopPres.png differ diff --git a/WEB/View/assets/img/BuildingBG.png b/WEB/View/assets/img/BuildingBG.png deleted file mode 100644 index fb4afd6a..00000000 Binary files a/WEB/View/assets/img/BuildingBG.png and /dev/null differ diff --git a/WEB/View/assets/img/LogoScripted.png b/WEB/View/assets/img/LogoScripted.png deleted file mode 100644 index a21884c0..00000000 Binary files a/WEB/View/assets/img/LogoScripted.png and /dev/null differ diff --git a/WEB/View/assets/img/LogoScripted2.png b/WEB/View/assets/img/LogoScripted2.png deleted file mode 100644 index ff142526..00000000 Binary files a/WEB/View/assets/img/LogoScripted2.png and /dev/null differ diff --git a/WEB/View/assets/img/MenBGPres.png b/WEB/View/assets/img/MenBGPres.png deleted file mode 100644 index cad3d4b5..00000000 Binary files a/WEB/View/assets/img/MenBGPres.png and /dev/null differ diff --git a/WEB/View/assets/img/Renard.png b/WEB/View/assets/img/Renard.png deleted file mode 100644 index e5655e31..00000000 Binary files a/WEB/View/assets/img/Renard.png and /dev/null differ diff --git a/WEB/View/assets/img/TestBg.png b/WEB/View/assets/img/TestBg.png new file mode 100644 index 00000000..8fd34d4a Binary files /dev/null and b/WEB/View/assets/img/TestBg.png differ diff --git a/WEB/View/assets/img/neonHead.jpg b/WEB/View/assets/img/neonHead.jpg new file mode 100644 index 00000000..813b578b Binary files /dev/null and b/WEB/View/assets/img/neonHead.jpg differ diff --git a/WEB/View/src/CSS/Home.css b/WEB/View/src/CSS/Home.css deleted file mode 100644 index aaab7f07..00000000 --- a/WEB/View/src/CSS/Home.css +++ /dev/null @@ -1,453 +0,0 @@ -/*Fonts CSS */ - -@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap'); - - -/*Default CSS*/ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - overflow-x: hidden; - position: relative; - font-family: "Orbitron", sans-serif; -} - - h1, h2, h3, h4, h5, h6 { - margin: 0; - padding: 0; - line-height: normal; - } - - p, a, li, button, ul { - margin: 0; - padding: 0; - line-height: normal; - text-decoration: none !important; - } - - a:hover { - text-decoration: none !important; - } - - input:focus, textarea:focus, select:focus { - outline: none; - } - -@media (min-width:1700px) { - main .container { - max-width: 100%; - padding: 0 150px; - } -} - -/* Animation CSS*/ - -@keyframes blink { - 0%, - 22%, - 36%, - 75% { - color: #ffe6ff; - text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #dd07bf, - -0.2rem 0.1rem 1rem #dd07bf, 0.2rem 0.1rem 1rem #dd07bf, - 0 -0.5rem 2rem #841174, 0 0.5rem 3rem #841174; - } - 28%, - 33% { - color: #dd07bf; - text-shadow: none; - } - 82%, - 97% { - color: #991888; - text-shadow: none; - } -} - -@keyframes flicker { - from { - opacity: 1; - } - - 4% { - opacity: 0.9; - } - - 6% { - opacity: 0.85; - } - - 8% { - opacity: 0.95; - } - - 10% { - opacity: 0.9; - } - - 11% { - opacity: 0.922; - } - - 12% { - opacity: 0.9; - } - - 14% { - opacity: 0.95; - } - - 16% { - opacity: 0.98; - } - - 17% { - opacity: 0.9; - } - - 19% { - opacity: 0.93; - } - - 20% { - opacity: 0.99; - } - - 24% { - opacity: 1; - } - - 26% { - opacity: 0.94; - } - - 28% { - opacity: 0.98; - } - - 37% { - opacity: 0.93; - } - - 38% { - opacity: 0.5; - } - - 39% { - opacity: 0.96; - } - - 42% { - opacity: 1; - } - - 44% { - opacity: 0.97; - } - - 46% { - opacity: 0.94; - } - - 56% { - opacity: 0.9; - } - - 58% { - opacity: 0.9; - } - - 60% { - opacity: 0.99; - } - - 68% { - opacity: 1; - } - - 70% { - opacity: 0.9; - } - - 72% { - opacity: 0.95; - } - - 93% { - opacity: 0.93; - } - - 95% { - opacity: 0.95; - } - - 97% { - opacity: 0.93; - } - - to { - opacity: 1; - } -} - -@keyframes animate1{ - 0%{ - left: -100%; - } - 50%,100%{ - left: 100%; - } -} - -@keyframes animate2{ - 0%{ - top: -100%; - } - 50%,100%{ - top: 100%; - } -} - -@keyframes animate3{ - 0%{ - right: -100%; - } - 50%,100%{ - right: 100%; - } -} - -@keyframes animate4{ - 0%{ - bottom: -100%; - } - 50%,100%{ - bottom: 100%; - } -} - - -/* Main CSS */ -.main{ - background-image: url(../../assets/img/BackgroundMain.jpg); - scroll-behavior: smooth; - height: 100vh; - background-position: center center; - background-color: #464646; - background-attachment: fixed; - background-repeat: no-repeat; - background-size: cover; -} - - -/*Title CSS*/ - -.flicker { - animation: shine 2s forwards, blink 3s 2s infinite; -} - -.fast-flicker { - animation: shine 2s forwards, blink 10s 1s infinite; -} - -.sign{ - margin-bottom: 100px; -} - - -.sign h1 { - font-weight: 600; - margin: auto !important; - display: flex; - justify-content: center; - align-items: center; - width: 40%; - height: 40%; - left: 50%; - top: 50%; - letter-spacing: 0.5rem; - font-family: "Orbitron", sans-serif; - text-transform: uppercase; - font-size: 5em; - color: #ffe6ff; - text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #dd07bf, - -0.2rem 0.1rem 1rem #dd07bf, 0.2rem 0.1rem 1rem #dd07bf, - 0 -0.5rem 2rem #841174, 0 0.5rem 3rem #841174; - animation: shine 2s forwards, flicker 3s infinite; -} - - - - -/*Main Button CSS*/ - -.main .duel{ - margin-top: 60px; -} - -.main .align-items-center a { - letter-spacing: 0.2rem; - padding: 25px 30px; - color: #ff86ff; - height: 50px; - width: 200px; - border: none; - font-weight: 400; - border-radius: 10px; - font-size: 22px; - display: flex; - position: relative; - align-items: center; - justify-content: space-around; - cursor: pointer; - text-transform: uppercase; - transition: 0.5s; - overflow: hidden; -} - -.main .align-items-center .duel{ - color: #56fcfc; -} - - -.align-items-center{ - display: table; - margin: auto; -} - -.main .align-items-center .enigme:hover { - background: #ff86ff; - color: #000000; - box-shadow: 0 0 5px #ff86ff, - 0 0 25px #ff86ff, - 0 0 50px #ff86ff, - 0 0 100px #ff86ff; - -webkit-box-reflect:below 1px linear-gradient(transparent, #0005); -} - -.main .align-items-center .duel:hover{ - background: #56fcfc; - color: #000000 !important; - box-shadow: 0 0 5px #56fcfc, - 0 0 25px #56fcfc, - 0 0 50px #56fcfc, - 0 0 100px #56fcfc; - -webkit-box-reflect:below 1px linear-gradient(transparent, #0005); -} - - -.main a span{ - position: absolute; - display: block; -} - - -.duel span:nth-child(1){ - background: linear-gradient(90deg, transparent, #56fcfc); -} - -a span:nth-child(1){ - top: 0; - left: 0; - width: 100%; - height: 2px; - background: linear-gradient(90deg,transparent,#ff86ff); - animation: animate1 1s linear infinite; -} - -.duel span:nth-child(2){ - background: linear-gradient(180deg, transparent, #56fcfc); -} - -a span:nth-child(2){ - top: -100%; - right: 0; - width: 2px; - height: 100%; - background: linear-gradient(180deg,transparent,#ff86ff); - animation: animate2 1s linear infinite; - animation-delay: 0.25s; -} - -.duel span:nth-child(3){ - background: linear-gradient(270deg, transparent, #56fcfc); -} - -a span:nth-child(3){ - bottom: 0; - right: 0; - width: 100%; - height: 2px; - background: linear-gradient(270deg,transparent,#ff86ff); - animation: animate3 1s linear infinite; - animation-delay: 0.50s; -} - -.duel span:nth-child(4){ - background: linear-gradient(360deg, transparent, #56fcfc); -} - -a span:nth-child(4){ - bottom: -100%; - left: 0; - width: 2px; - height: 100%; - background: linear-gradient(360deg,transparent,#ff86ff); - animation: animate4 1s linear infinite; - animation-delay: 0.75s; -} - - -/* LogIn Button Css */ - -.main .align-items-center #login{ - display: flex; - justify-content: center; -} - -.main .align-items-center .log{ - color: #ffffff; - margin-bottom: 60px; - width: 140px; - font-weight: 500; - font-size: 20px; -} - -.main .align-items-center .log:hover{ - background: #6090d1; - color: #000000 !important; - transition-delay: 450ms; - box-shadow: 0 0 5px #6090d1, - 0 0 25px #6090d1, - 0 0 50px #6090d1, - 0 0 100px #6090d1; - -webkit-box-reflect:below 1px linear-gradient(transparent, #0005); -} - -.main .align-items-center .log:before, -.main .align-items-center .log:after{ - content:''; - position:absolute; - top:0; - right:0; - height:2px; - background: #6090d1; - width:0; - box-shadow: 0 0 5px #6090d1, 0 0 5px #6090d1 inset; - transition:400ms ease all; -} -.main .align-items-center .log:after{ - right:inherit; - top:inherit; - left:0; - bottom:0; -} -.main .align-items-center .log:hover:before, -.main .align-items-center .log:hover:after{ - width:100%; - transition:800ms ease all; -} diff --git a/WEB/View/src/CSS/Pres.css b/WEB/View/src/CSS/Pres.css index 276ba83d..d2aec2e1 100644 --- a/WEB/View/src/CSS/Pres.css +++ b/WEB/View/src/CSS/Pres.css @@ -9,7 +9,6 @@ src: url("../../assets/fonts/Equinox.otf"); } - body { min-height: 100vh; font-family: "Equinox", sans-serif; @@ -23,21 +22,40 @@ body { background-color: #050e15; } -nav{ - background: none; +/* Navbar CSS */ + +nav { + background-color: #050e15; +} + +/* Scrolling Page */ + +/* Section Histoire */ + +section{ + min-height: 30vh; +} + +.hidden { + opacity: 0; + filter: blur(10px); + transform: translateX(-100px); + transition: all 1.2s; +} + +.show { + opacity: 1; + filter: blur(0px); + transform: translateX(0px); } -h1{ - z-index: 10; - color: #fff; - font-size: 65px; - letter-spacing: 1px; +@media (prefers-reduced-motion) { + .hidden { + transition: none; + } } -section img { - position: absolute; - top: 0; - left: 0; - width: 100%; - object-fit: cover; +p { + font-family: "Fauna", sans-serif; + font-size: 20px; } diff --git a/WEB/View/src/JS/Presentation.js b/WEB/View/src/JS/Presentation.js new file mode 100644 index 00000000..e623b11b --- /dev/null +++ b/WEB/View/src/JS/Presentation.js @@ -0,0 +1,14 @@ +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + console.log(entry); + if (entry.isIntersecting) { + entry.target.classList.add('show'); + } else { + entry.target.classList.remove('show'); + } + }); +}); + + +const hiddenElements = document.querySelectorAll('.hidden'); +hiddenElements.forEach(element => observer.observe(element)); \ No newline at end of file diff --git a/WEB/View/src/pages/Home.html b/WEB/View/src/pages/Home.html deleted file mode 100644 index b681e926..00000000 --- a/WEB/View/src/pages/Home.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - Home - - -
-
-

- s - crip - t - ed -

-
-
- -
- - - - - - Énigme - -
-
- - - - - - Multi - -
-
-
- - \ No newline at end of file diff --git a/WEB/View/src/pages/Main.html b/WEB/View/src/pages/Main.html index 4115417a..7d09afc0 100644 --- a/WEB/View/src/pages/Main.html +++ b/WEB/View/src/pages/Main.html @@ -37,7 +37,7 @@ diff --git a/WEB/View/src/pages/Pres.html b/WEB/View/src/pages/Pres.html index 3bc899ce..aecf14a0 100644 --- a/WEB/View/src/pages/Pres.html +++ b/WEB/View/src/pages/Pres.html @@ -21,15 +21,19 @@ integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous" > + -