Presentation page

WEB/Config/Config.php

@@ -17,7 +17,7 @@ $sel = "JeSuisUnSeldeHashageEtJeSuisUniqueEtTresSecuriseEtJeSuisTresLong";
 //View
 //Page
 $vues['main'] = 'View/src/pages/Main.php';
-$vues['presenation'] = 'View/src/pages/Presentation.html';
+$vues['presentation'] = 'View/src/pages/Presentation.html';
 $vues['login'] = 'View/src/pages/LogSign/Login.php';
 $vues['signUp'] = 'View/src/pages/LogSign/SignUp.php';
 $vues['enigme'] = 'View/src/pages/Enigme/palindrome.html';

WEB/Controller/Controller.php

@@ -103,7 +103,7 @@ class Controller
     private function goToPresentation() {
         global $rep, $vues, $error;
         try {
-            require ($rep.$vues['presenation']);
+            require ($rep.$vues['presentation']);
         }catch (Exception $e){
             $error = "Erreur Inconnue";
             require($rep.$vues['erreur']);

WEB/View/src/CSS/Enigme.css

@@ -1,7 +1,6 @@
 /*Fonts CSS */
 
-@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");
-
 
 /*Default CSS*/
 * {
@@ -10,13 +9,22 @@
   box-sizing: border-box;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 0;
   padding: 0;
   line-height: normal;
 }
 
-  p, a, li, button, ul {
+p,
+a,
+li,
+button,
+ul {
   margin: 0;
   padding: 0;
   line-height: normal;
@@ -27,8 +35,9 @@ a:hover {
   text-decoration: none !important;
 }
 
-
+input:focus,
-input:focus, textarea:focus, select:focus {
+textarea:focus,
+select:focus {
   outline: none;
 }
 
@@ -39,7 +48,6 @@ input:focus, textarea:focus, select:focus {
   }
 }
 
-
 /* Main CSS */
 html {
   scroll-behavior: smooth;
@@ -63,7 +71,7 @@ body{
   --light: hsl(220, 50%, 90%);
   --primary: hsl(255, 30%, 55%);
   --focus: hsl(210, 90%, 50%);
-  --border-color: hsla(0, 0%, 100%, .2);
+  --border-color: hsla(0, 0%, 100%, 0.2);
   --global-background: hsl(220, 25%, 10%);
   --background: linear-gradient(to right, #040a29, #0e1538);
   --shadow-1: #0b1b78;
@@ -95,9 +103,6 @@ body{
   margin-left: 5%;
 }
 
-
-
-
 /* Main Button Css */
 
 .buttons {
@@ -121,34 +126,30 @@ body{
   margin: 20px;
 }
 
-
+.buttons .btn:before,
-  .buttons .btn:before, .buttons .btn:after
+.buttons .btn:after {
-  {
+  content: "";
-    content:'';
   position: absolute;
   inset: 0;
   transition: 0.5s;
-      background: #f00
+  background: #f00;
 }
 
-
+.buttons .btn:nth-child(1):before,
-.buttons .btn:nth-child(1):before, .buttons .btn:nth-child(1):after
+.buttons .btn:nth-child(1):after {
-{
+  background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4);
-   background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4)
 }
 
-.buttons .btn:nth-child(2):before, .buttons .btn:nth-child(2):after
+.buttons .btn:nth-child(2):before,
-{
+.buttons .btn:nth-child(2):after {
   background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
 }
 
-.buttons .btn:hover:before
+.buttons .btn:hover:before {
-{
   inset: -3px;
 }
 
-.buttons .btn:hover:after
+.buttons .btn:hover:after {
-{
   inset: -3px;
   filter: blur(10px);
 }
@@ -174,24 +175,21 @@ body{
 }
 
 .buttons .btn span::before {
-  content:'';
+  content: "";
   position: absolute;
   top: 0;
   left: -50%;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.075);
-      transform: skew(25deg)
+  transform: skew(25deg);
 }
 
-
-
 .buttons .btn .noAnimation {
   animation: none;
   font-size: 1em;
 }
 
-
 /* Console CSS*/
 
 .compiler_class {
@@ -199,7 +197,7 @@ body{
 }
 
 #console {
-  font-size: .8rem;
+  font-size: 0.8rem;
   opacity: 0.85;
   letter-spacing: 1px;
   background-color: #040a29;
@@ -215,7 +213,6 @@ body{
   resize: none;
 }
 
-
 /* Ace CSS*/
 
 .ace {
@@ -231,7 +228,6 @@ body{
   font-size: 1.5rem !important;
   font-weight: 700;
   text-align: center;
-
 }
 .enigme .sign {
   display: contents;
@@ -240,7 +236,6 @@ body{
 .enigme h2 {
   font-size: 1.5rem;
   font-weight: 600;
-    
 }
 
 .enigme p {
@@ -256,7 +251,6 @@ body{
   font-size: 1.5rem;
 }
 
-
 /* Modal CSS */
 
 .modal-container {
@@ -286,11 +280,11 @@ body{
   width: 30%;
   height: 35%;
   padding: 10px 0;
-  border-radius: .8rem;
+  border-radius: 0.8rem;
 
   color: aliceblue;
   background: var(--background);
-  box-shadow: var(--m-shadow, .4rem .4rem 8.2rem .2rem) var(--shadow-1);
+  box-shadow: var(--m-shadow, 0.4rem 0.4rem 8.2rem 0.2rem) var(--shadow-1);
   position: relative;
   overflow: hidden;
 }
@@ -306,7 +300,6 @@ body{
   height: 100%;
 }
 
-
 /* Modal Container Buttons  */
 
 .modal .buttons {
@@ -355,7 +348,7 @@ body{
   color: white;
 }
 
-.modal .buttons #bottom .btn:nth-child(1):before, .modal .buttons #bottom .btn:nth-child(1):after
+.modal .buttons #bottom .btn:nth-child(1):before,
-{
+.modal .buttons #bottom .btn:nth-child(1):after {
   background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
 }

WEB/View/src/CSS/Pres.css

@@ -1,61 +0,0 @@
-/*Fonts CSS */
-
-@font-face {
-  font-family: Fauna;
-  src: url("../../assets/fonts/Fauna.ttf");
-}
-@font-face {
-  font-family: Equinox;
-  src: url("../../assets/fonts/Equinox.otf");
-}
-
-body {
-  min-height: 100vh;
-  font-family: "Equinox", sans-serif;
-  color: white;
-  scroll-behavior: smooth;
-  height: 100vh;
-  background-position: center center;
-  background-attachment: fixed;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-color: #050e15;
-}
-
-/* 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);
-}
-
-@media (prefers-reduced-motion) {
-  .hidden {
-    transition: none;
-  }
-}
-
-p {
-  font-family: "Fauna", sans-serif;
-  font-size: 20px;
-}

WEB/View/src/CSS/Presentation.css

@@ -1,82 +1,70 @@
+/*Fonts CSS */
 
-html{
+@font-face {
-    scroll-behavior: smooth;
+  font-family: Fauna;
-    background-image: url(../../assets/img/BackgroundPresentation.jpg);
+  src: url("../../assets/fonts/Fauna.ttf");
+}
+@font-face {
+  font-family: Equinox;
+  src: url("../../assets/fonts/Equinox.otf");
+}
+
+body {
+  min-height: 100vh;
+  font-family: "Equinox", sans-serif;
+  color: white;
   scroll-behavior: smooth;
   height: 100vh;
   background-position: center center;
-    background-color: #464646;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
-    letter-spacing: 1.2px;
+  background-color: #050e15;
 }
 
-body{
+/* Navbar CSS */
-    font-family: "Orbitron", sans-serif;
-    height: 95%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
 
-.Presentation{
+nav {
-    font-family: "Orbitron", sans-serif;
+  background-color: #050e15;
-    color:aliceblue;
-    font-size: 20px;
 }
 
-.Histoire{
+/* Moving fox CSS */
-    margin-left: 5% ;
-    width: 80%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-}
 
-.ConsigneRun{
+.moving-fox {
-    margin-left: 5% ;
+  position: relative;
-    width: 80%;
+  top : 0;
-    display: flex;
+  z-index: -1;
-    justify-content: space-around;
+  opacity: 0;
-    align-items: center;
 }
 
-.ConsigneSubmit{
-    margin-left: 5% ;
-    width: 80%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-}
 
-.Consigne{
+/* Section Histoire */
-    width: 60%;
+
+section{
+  min-height: 60vh;
+  margin-bottom: 10px;
 }
 
-.Histoire,.ConsigneRun,.ConsigneSubmit{
+.hidden {
-    margin-top: 0;
+  opacity: 0;
-    background: rgba(0,0,0,0.8);
+  filter: blur(10px);
-    box-sizing: border-box;
+  transform: translateX(-100px);
-    box-shadow: 0 15px 25px rgba(0,0,0,);
+  transition: all 1.2s;
-    border-radius: 10px;
-    padding: 10px;
-    margin-left: 10%;
-    margin-right: 10%;
 }
 
-.titre_pre{
+.show {
-    display: flex;
+  opacity: 1;
-    font-size: 14px;
+  filter: blur(0px);
-    height: 15%;
+  transform: translateX(0px);
 }
 
-.sign{
+@media (prefers-reduced-motion) {
-    margin-top: 3%;
+  .hidden {
-    margin-left:12%
+    transition: none;
+  }
 }
 
-.retour{
+p {
-    margin-top: 1%;
+  font-family: "Fauna", sans-serif;
-    margin-left: 10%;
+  font-size: 20px;
 }

WEB/View/src/JS/Presentation.js

@@ -1,14 +1,23 @@
 const observer = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
+  entries.forEach((entry) => {
     console.log(entry);
     if (entry.isIntersecting) {
-            entry.target.classList.add('show');
+      entry.target.classList.add("show");
     } else {
-            entry.target.classList.remove('show');
+      entry.target.classList.remove("show");
     }
   });
 });
 
+const hiddenElements = document.querySelectorAll(".hidden");
+hiddenElements.forEach((element) => observer.observe(element));
 
-const hiddenElements = document.querySelectorAll('.hidden');
+// Increase the top position of the element when scrolling down
-hiddenElements.forEach(element => observer.observe(element));
+
+const fox = document.querySelector(".moving-fox");
+
+window.addEventListener("scroll", () => {
+  const scrollValue = window.scrollY - 500;
+  fox.style.top = `${scrollValue / 1.2}px`;
+  fox.style.opacity = `${window.scrollY / 500}`;
+});

WEB/View/src/pages/Pres.html

@@ -1,85 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Présentation</title>
-    <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
-      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
-      crossorigin="anonymous"
-    />
-    <link rel="stylesheet" href="../CSS/Pres.css" />
-    <script
-      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
-      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
-      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
-      crossorigin="anonymous"
-    ></script>
-    <script defer src="../JS/Presentation.js"></script>
-  </head>
-  <body>
-    <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" href="./Main.html">Home</a>
-        </div>
-        <div class="mx-auto">
-          <h5
-            class="m-1 text-uppercase"
-            style="color: #fff; font-weight: bold; font-size: 22px"
-          >
-            Northgan
-          </h5>
-        </div>
-        <div class="nav-link">
-          <a class="navbar-brand">Next</a>
-        </div>
-      </div>
-    </nav>
-
-    <img src="../../assets/img/TestBG.png" class="img-fluid" />
-
-    <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,68 +1,91 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
-<html lang="fr">
+<html lang="en">
   <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <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">
+    <title>Présentation</title>
-    <link rel="stylesheet" href="./View/src/CSS/Enigme.css">
+    <link
-    <link rel="stylesheet" href="./View/src/CSS/Home.css">
+      rel="stylesheet"
-    <link rel="stylesheet" href="./View/src/CSS/Presentation.css">
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
-    <title>Presentation</title>
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="./View/src/CSS/Presentation.css" />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <script defer src="./View/src/JS/Presentation.js"></script>
   </head>
-  <body onload="script();">
+  <body>
-    <div class="presentation_titre" id="home">
+    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
-        <div class="titre_pre">
+      <div class="container-fluid mx-0">
-            <div class="retour">
+        <div class="nav-item nav-link">
-                <a class="material-icons" id="home" href="index.php?action=goToHome" style="font-size:64px;color:white;">home</a>
+          <a class="navbar-brand" href="./Main.html">Home</a>
         </div>
-            <div class="sign">
+        <div class="mx-auto">
-                <h1>
+          <h5
-                    <span class="fast-flicker">P</span>
+            class="m-1 text-uppercase"
-                    <span>resen</span>
+            style="color: #fff; font-weight: bold; font-size: 22px"
-                    <span class="flicker">t</span>
+          >
-                    <span>ation</span>
+            Northgan
-                </h1>
+          </h5>
         </div>
-        </div>   
+        <div class="nav-link">
-        <div class="Presentation">
+          <a class="navbar-brand" href="./Enigme/palindrome.html">Next</a>
-            <div class="Histoire">
-                <img src="./View/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>
+    </nav>
-            <div class="ConsigneSubmit">
+
-                <div class="buttons">
+    <img src="../../assets/img/BGPres.png" class="img-fluid" />
-                    <a class="btn">
+
-                        <span class="noAnimation">Submit</span>
+    <div class="container pt-5">
-                    </a>
+      <div class="col-12">
-                </div>
+        <div class="row py-5">
-                <div class="Consigne">
+          <div class="col-8">
-                    <p>Tu pense avoir réussi ? Tres bien ! Utilise le bouton submit pour faire valider ton code et passer à la prochaine enigme </p>
+            <section class="hidden row">
-                </div> 
+              <p>
+                Bonjour Utilisateur ! Je suis <b>Foxy</b>. <br /><br /><br />
+                Une IA créer dans le but de rétablir un environnement sain et
+                équilibré sur la planète.
+                <br />
+                <br />
+                Malgres mon apparence mignonne je pourrai être une arme de
+                destruction massive si on parvenait à me pirater.
+              </p>
+            </section>
+
+            <section class="hidden row">
+              <p>
+                J'ai donc besoin de ton aide pour me protéger d'une organisation
+                malveillante nommé <b>Gamma</b> qui souhaite m'utiliser à des
+                fins militaires
+              </p>
+            </section>
+
+            <section class="hidden row">
+              <p>
+                Pour cela je vais te demander de réaliser des missions pour moi.
+                Mais tout d'abord, tu dois passer un test de qualification. Si
+                vous réussissez, vous pourrez m'aider à protéger mon code
+                source.
+              </p>
+            </section>
           </div>
-            <div class="buttons">
+
-                <a href="index.php?action=goToEnigme" class="btn">
+          <div class="col-3" id="fox">
-                    <span class="noAnimation">Next</span>
+            <img
-                </a>
+              src="../../assets/img/Foxy.png"
+              alt="Logo"
+              class="img-fluid rounded-circle moving-fox"
+              style="border: 2px solid #44fff6"
+            />
           </div>
         </div>
       </div>