Presentation page

WEB/View/src/CSS/Home.css

@@ -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;
-}

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{
+/* Navbar CSS */
-  background: none;
+
+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{
+@media (prefers-reduced-motion) {
-  z-index: 10;
+  .hidden {
-  color: #fff;
+    transition: none;
-  font-size: 65px;
+  }
-  letter-spacing: 1px;
 }
 
-section img {
+p {
-  position: absolute;
+  font-family: "Fauna", sans-serif;
-  top: 0;
+  font-size: 20px;
-  left: 0;
-  width: 100%;
-  object-fit: cover;
 }

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));

WEB/View/src/pages/Home.html

@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../CSS/Home.css">
-    <title>Home</title>
-</head>
-<body>
-    <div class="main" id="home">
-        <div class="sign">
-            <h1>
-                <span class="fast-flicker">s</span>
-                <span>crip</span>
-                <span class="flicker">t</span>
-                <span>ed</span>
-            </h1>
-        </div>
-        <div class="align-items-center">
-            <div id="login">
-                <a href="LogSign/Login.php" class="log">
-                    LOgin
-                  </a>
-            </div>
-            <div>
-                <a class="enigme" href="Presentation.html">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    Énigme
-                </a>
-            </div>
-            <div>
-                <a class="duel" href="./Duel/Duel.html">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    Multi
-                </a>
-            </div>
-        </div>     
-    </div>    
-</body>
-</html>

WEB/View/src/pages/Main.html

@@ -37,7 +37,7 @@
           <a
             id="enigme"
             class="mb-3 text-uppercase d-flex justify-content-center align-items-center"
-            href="Presentation.html"
+            href="./Pres.html"
             style="width: 260px; height: 50px"
           >
             <span></span>

WEB/View/src/pages/Pres.html

@@ -21,15 +21,19 @@
       integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
       crossorigin="anonymous"
     ></script>
+    <script defer src="../JS/Presentation.js"></script>
   </head>
   <body>
-    <nav class="navbar navbar-expand-lg navbar-dark">
+    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
       <div class="container-fluid mx-0">
         <div class="nav-item nav-link">
-          <a class="navbar-brand">Home</a>
+          <a class="navbar-brand" href="./Main.html">Home</a>
         </div>
         <div class="mx-auto">
-          <h5 class="m-1 fw-bold text-uppercase" style="color: #fff">
+          <h5
+            class="m-1 text-uppercase"
+            style="color: #fff; font-weight: bold; font-size: 22px"
+          >
             Northgan
           </h5>
         </div>
@@ -39,11 +43,43 @@
       </div>
     </nav>
 
-    <section class=" position-relative w-100 h-100 d-flex justify-content-center align-items-center">
+    <img src="../../assets/img/TestBG.png" class="img-fluid" />
-      <h1>Scripted</h1>
-      <img src="../../assets/img/MenBGPres.png" id="men"></img>
-      <img src="../../assets/img/BuildingBG.png" id="building"></img>
-    </section>
 
+    <div class="container mt-5 ml-0">
+      <div class="row py-5 justify-content-around">
+        <div class="col-3">
+          <img
+            src="../../assets/img/neonHead.jpg"
+            alt="Logo"
+            class="img-fluid"
+            id="moving-fox"
+          />
+        </div>
+        <div class="col-7 align-self-center ml-4">
+          <!-- <h4
+            class="display-4 fw-bold mb-5 text-uppercase d-flex justify-content-start"
+          >
+            Hello
+          </h4> -->
+
+          <section class="hidden row ">
+            <p>Bonjour Utilisateur !</p>
+          </section>
+
+          <section class="hidden row">
+            <p>
+              Je suis Foxy, une IA créer par Ashley Northgan, une éminente
+              chercheuse, malhereusement celle-ci est porté disparu.
+            </p>
+          </section>
+          <section class="hidden row">
+            <p>
+              Je suis Foxy, une IA créer par Ashley Northgan, une éminente
+              chercheuse, malhereusement celle-ci est porté disparu.
+            </p>
+          </section>
+        </div>
+      </div>
+    </div>
   </body>
 </html>

WEB/View/src/pages/Presentation.html

@@ -1,70 +1,88 @@
 <!DOCTYPE html>
 <html lang="fr">
-<head>
+  <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="../CSS/Enigme.css">
+    <link rel="stylesheet" href="../CSS/Enigme.css" />
-    <link rel="stylesheet" href="../CSS/Home.css">
+    <link rel="stylesheet" href="../CSS/Home.css" />
-    <link rel="stylesheet" href="../CSS/Presentation.css">
+    <link rel="stylesheet" href="../CSS/Presentation.css" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
     <title>Presentation</title>
-</head>
+  </head>
-<body onload="script();">
+  <body onload="script();">
     <div class="presentation_titre" id="home">
-        <div class="titre_pre">
+      <div class="titre_pre">
-            <div class="retour">
+        <div class="retour">
-                <a class="material-icons" id="home" href="Home.html" style="font-size:64px;color:white;">home</a>
+          <a
-            </div>
+            class="material-icons"
-            <div class="sign">
+            id="home"
-                <h1>
+            href="Home.html"
-                    <span class="fast-flicker">P</span>
+            style="font-size: 64px; color: white"
-                    <span>resen</span>
+            >home</a
-                    <span class="flicker">t</span>
+          >
-                    <span>ation</span>
-                </h1>
-            </div>
         </div>
-        <div class="Presentation">
+        <div class="sign">
-            <div class="Histoire">
+          <h1>
-                <img src="../../assets/img/Renard.png" alt="Foxy">
+            <span class="fast-flicker">P</span>
-                <div class="Consigne" id="message">
+            <span>resen</span>
-                    <p>Bonjour utilisateur ! Je suis Foxy, une IA créer par Howard Aiken, un eminent chercheur, 
+            <span class="flicker">t</span>
-                        malhereusement celui-ci est mort. J'ai besoin de votre aide pour protéger mon code source d'une organisation
+            <span>ation</span>
-                        malveillante qui veut le voler. Pour cela, je vais vous demander de résoudre des énigmes. Mais tout d'abord,
+          </h1>
-                        vous devez passer un test de qualification. Si vous réussissez, vous pourrez accéder aux énigmes. 
-                        Bonne chance utilisateur !
-                    </p>
-                </div>
-            </div>
-            <br>
-            <div class="ConsigneRun">
-                <div class="Consigne">
-                    <p>Le Bouton Run te permet de tester ton code, n'oublie pas de faire print(nomFonction(x)) pour afficher sur la console !</p>
-                </div>
-                <div class="buttons">
-                    <a class="btn">
-                        <span class="noAnimation">Run</span>
-                    </a>
-                </div> 
-            </div>
-            <br>
-            <div class="ConsigneSubmit">
-                <div class="buttons">
-                    <a class="btn">
-                        <span class="noAnimation">Submit</span>
-                    </a>
-                </div>
-                <div class="Consigne">
-                    <p>Tu pense avoir réussi ? Tres bien ! Utilise le bouton submit pour faire valider ton code et passer à la prochaine enigme </p>
-                </div> 
-            </div>
-            <div class="buttons">
-                <a href="Enigme/palindrome.html" class="btn">
-                    <span class="noAnimation">Next</span>
-                </a>
-            </div>
         </div>
+      </div>
+      <div class="Presentation">
+        <div class="Histoire">
+          <img src="../../assets/img/Renard.png" alt="Foxy" />
+          <div class="Consigne" id="message">
+            <p>
+              Bonjour utilisateur ! Je suis Foxy, une IA créer par Howard Aiken,
+              un eminent chercheur, malhereusement celui-ci est mort. J'ai
+              besoin de votre aide pour protéger mon code source d'une
+              organisation malveillante qui veut le voler. Pour cela, je vais
+              vous demander de résoudre des énigmes. Mais tout d'abord, vous
+              devez passer un test de qualification. Si vous réussissez, vous
+              pourrez accéder aux énigmes. Bonne chance utilisateur !
+            </p>
+          </div>
+        </div>
+        <br />
+        <div class="ConsigneRun">
+          <div class="Consigne">
+            <p>
+              Le Bouton Run te permet de tester ton code, n'oublie pas de faire
+              print(nomFonction(x)) pour afficher sur la console !
+            </p>
+          </div>
+          <div class="buttons">
+            <a class="btn">
+              <span class="noAnimation">Run</span>
+            </a>
+          </div>
+        </div>
+        <br />
+        <div class="ConsigneSubmit">
+          <div class="buttons">
+            <a class="btn">
+              <span class="noAnimation">Submit</span>
+            </a>
+          </div>
+          <div class="Consigne">
+            <p>
+              Tu pense avoir réussi ? Tres bien ! Utilise le bouton submit pour
+              faire valider ton code et passer à la prochaine enigme
+            </p>
+          </div>
+        </div>
+        <div class="buttons">
+          <a href="Enigme/palindrome.html" class="btn">
+            <span class="noAnimation">Next</span>
+          </a>
+        </div>
+      </div>
     </div>
-</body>
+  </body>
 </html>