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,47 +1,55 @@
 /*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*/
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-  
-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 {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+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 {
+input:focus,
+textarea:focus,
+select:focus {
   outline: none;
 }
-  
-@media (min-width:1700px) {
-      main .buttons {
-          max-width: 100%;
-          padding: 0 150px;
-      }
-}
 
+@media (min-width: 1700px) {
+  main .buttons {
+    max-width: 100%;
+    padding: 0 150px;
+  }
+}
 
 /* Main CSS */
-html{
+html {
   scroll-behavior: smooth;
   height: 100vh;
   background-position: center center;
@@ -51,39 +59,39 @@ html{
   background-size: cover;
 }
 
-body{
-    display: flex;
-    font-family: "Orbitron", sans-serif;
-    flex-direction: row;
-    align-items: stretch;
-    height: 95%;
-    margin-top: 10px;
-    padding: 0;
+body {
+  display: flex;
+  font-family: "Orbitron", sans-serif;
+  flex-direction: row;
+  align-items: stretch;
+  height: 95%;
+  margin-top: 10px;
+  padding: 0;
 
   --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;
   --shadow-2: #173c45;
 }
 
-.enigme{
-    width: 25%;
-    height: fit-content;
-    color: aliceblue;
-    background: rgba(0,0,0,0.6);
-    box-sizing: border-box;
-    border-radius: 10px;
-    padding: 10px;
-    margin-left: 10px;
-    margin-right: 20px;
-    letter-spacing: 1.2px;
+.enigme {
+  width: 25%;
+  height: fit-content;
+  color: aliceblue;
+  background: rgba(0, 0, 0, 0.6);
+  box-sizing: border-box;
+  border-radius: 10px;
+  padding: 10px;
+  margin-left: 10px;
+  margin-right: 20px;
+  letter-spacing: 1.2px;
 }
 
-.titre_pre{
+.titre_pre {
   display: flex;
   margin-top: 10px;
   margin-right: 10px;
@@ -91,115 +99,105 @@ body{
   padding-left: 10px;
 }
 
-.sign{
-  margin-left:5%;
+.sign {
+  margin-left: 5%;
 }
 
-
-
-
 /* Main Button Css */
 
-.buttons{
+.buttons {
   display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    cursor: pointer;
-  }
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+}
 
-.compiler_class .buttons div{
+.compiler_class .buttons div {
   display: flex;
 }
 
-.buttons .btn{
+.buttons .btn {
   position: relative;
-    width: 120px;
-    height: 60px;
-    display: inline-block;
-    background: transparent;
-    margin: 20px;
-  }
-
-
-  .buttons .btn:before, .buttons .btn:after
-  {
-    content:'';
-      position: absolute;
-      inset: 0;
-      transition: 0.5s;
-      background: #f00
-    }
-
-
-.buttons .btn:nth-child(1):before, .buttons .btn:nth-child(1):after
-{
-   background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4)
+  width: 120px;
+  height: 60px;
+  display: inline-block;
+  background: transparent;
+  margin: 20px;
 }
 
-.buttons .btn:nth-child(2):before, .buttons .btn:nth-child(2):after
-{
-    background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
+.buttons .btn:before,
+.buttons .btn:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transition: 0.5s;
+  background: #f00;
 }
 
-.buttons .btn:hover:before
-{
-    inset: -3px;  
+.buttons .btn:nth-child(1):before,
+.buttons .btn:nth-child(1):after {
+  background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4);
 }
 
-.buttons .btn:hover:after
-{
-    inset: -3px;  
-    filter: blur(10px);
+.buttons .btn:nth-child(2):before,
+.buttons .btn:nth-child(2):after {
+  background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
 }
 
-.buttons .btn span{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: inline-block;
-    background: #0e1538;
-    z-index: 10;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1.2em;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    color: #fff;
-    border: 1px solid #040a29;
-    overflow: hidden;
+.buttons .btn:hover:before {
+  inset: -3px;
 }
 
-.buttons .btn span::before{
-  content:'';
-    position: absolute;
-    top: 0;
-    left: -50%;
-    width: 100%;
-    height: 100%;
-    background: rgba(255,255,255,0.075);
-      transform: skew(25deg)
+.buttons .btn:hover:after {
+  inset: -3px;
+  filter: blur(10px);
 }
 
+.buttons .btn span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  background: #0e1538;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.2em;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  color: #fff;
+  border: 1px solid #040a29;
+  overflow: hidden;
+}
 
+.buttons .btn span::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -50%;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.075);
+  transform: skew(25deg);
+}
 
 .buttons .btn .noAnimation {
   animation: none;
   font-size: 1em;
 }
 
-
 /* Console CSS*/
 
-.compiler_class{
+.compiler_class {
   width: 30%;
 }
 
-#console{
-  font-size: .8rem;
+#console {
+  font-size: 0.8rem;
   opacity: 0.85;
   letter-spacing: 1px;
   background-color: #040a29;
@@ -215,10 +213,9 @@ body{
   resize: none;
 }
 
-
 /* Ace CSS*/
 
-.ace{
+.ace {
   width: 45%;
   max-height: 100%;
   margin-bottom: 0;
@@ -227,36 +224,33 @@ body{
 
 /* Text Css */
 
-.enigme h1{
-    font-size: 1.5rem !important;
-    font-weight: 700;
-    text-align: center;
-
+.enigme h1 {
+  font-size: 1.5rem !important;
+  font-weight: 700;
+  text-align: center;
 }
-.enigme .sign{
+.enigme .sign {
   display: contents;
 }
 
-.enigme h2{
-    font-size: 1.5rem;
-    font-weight: 600;
-    
+.enigme h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
 }
 
-.enigme p{
-    font-size: 1rem;
-    font-weight: 400;
-    margin-right: 10px;
+.enigme p {
+  font-size: 1rem;
+  font-weight: 400;
+  margin-right: 10px;
 }
 
-#result{
+#result {
   display: flex;
   align-items: center;
   margin: 0 30px;
   font-size: 1.5rem;
 }
 
-
 /* Modal CSS */
 
 .modal-container {
@@ -286,18 +280,18 @@ 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;
 }
 
 /* Modal H1  */
 
-.modal #containerResult{
+.modal #containerResult {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -306,17 +300,16 @@ body{
   height: 100%;
 }
 
-
 /* Modal Container Buttons  */
 
-.modal .buttons{
+.modal .buttons {
   display: flex;
   align-items: flex-end;
   height: 100%;
   width: auto;
 }
 
-.modal .buttons #top{
+.modal .buttons #top {
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
@@ -324,7 +317,7 @@ body{
   height: 50%;
 }
 
-.modal .buttons #bottom{
+.modal .buttons #bottom {
   display: flex;
   justify-content: center;
   align-items: flex-end;
@@ -334,28 +327,28 @@ body{
 
 /* Modal buttons btn */
 
-.modal .buttons .btn{
+.modal .buttons .btn {
   width: 30px;
   height: 30px;
-  margin : 0 15px;
+  margin: 0 15px;
 }
 
-.modal .buttons #bottom{
+.modal .buttons #bottom {
   width: 100%;
 }
 
-.modal .buttons #fleche{
-  display: none; 
+.modal .buttons #fleche {
+  display: none;
   width: 75px;
   height: 40px;
 }
 
-.modal .buttons .btn span{
+.modal .buttons .btn span {
   background: #06124b;
   color: white;
 }
 
-.modal .buttons #bottom .btn:nth-child(1):before, .modal .buttons #bottom .btn:nth-child(1):after
-{
-    background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
-}
+.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{
-    scroll-behavior: smooth;
-    background-image: url(../../assets/img/BackgroundPresentation.jpg);
-    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;
+@font-face {
+  font-family: Fauna;
+  src: url("../../assets/fonts/Fauna.ttf");
 }
-
-body{
-    font-family: "Orbitron", sans-serif;
-    height: 95%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
+@font-face {
+  font-family: Equinox;
+  src: url("../../assets/fonts/Equinox.otf");
 }
 
-.Presentation{
-    font-family: "Orbitron", sans-serif;
-    color:aliceblue;
-    font-size: 20px;
+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;
 }
 
-.Histoire{
-    margin-left: 5% ;
-    width: 80%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-}
+/* Navbar CSS */
 
-.ConsigneRun{
-    margin-left: 5% ;
-    width: 80%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
+nav {
+  background-color: #050e15;
 }
 
-.ConsigneSubmit{
-    margin-left: 5% ;
-    width: 80%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-}
+/* Moving fox CSS */
 
-.Consigne{
-    width: 60%;
+.moving-fox {
+  position: relative;
+  top : 0;
+  z-index: -1;
+  opacity: 0;
 }
 
-.Histoire,.ConsigneRun,.ConsigneSubmit{
-    margin-top: 0;
-    background: rgba(0,0,0,0.8);
-    box-sizing: border-box;
-    box-shadow: 0 15px 25px rgba(0,0,0,);
-    border-radius: 10px;
-    padding: 10px;
-    margin-left: 10%;
-    margin-right: 10%;
+
+/* Section Histoire */
+
+section{
+  min-height: 60vh;
+  margin-bottom: 10px;
 }
 
-.titre_pre{
-    display: flex;
-    font-size: 14px;
-    height: 15%;
+.hidden {
+  opacity: 0;
+  filter: blur(10px);
+  transform: translateX(-100px);
+  transition: all 1.2s;
 }
 
-.sign{
-    margin-top: 3%;
-    margin-left:12%
+.show {
+  opacity: 1;
+  filter: blur(0px);
+  transform: translateX(0px);
 }
 
-.retour{
-    margin-top: 1%;
-    margin-left: 10%;
+@media (prefers-reduced-motion) {
+  .hidden {
+    transition: none;
+  }
 }
+
+p {
+  font-family: "Fauna", sans-serif;
+  font-size: 20px;
+}

WEB/View/src/JS/Presentation.js

@@ -1,14 +1,23 @@
 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');
-        }
-    });
+  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));
 
-const hiddenElements = document.querySelectorAll('.hidden');
-hiddenElements.forEach(element => observer.observe(element));
+// Increase the top position of the element when scrolling down
+
+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,69 +1,92 @@
-<!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="./View/src/CSS/Enigme.css">
-    <link rel="stylesheet" href="./View/src/CSS/Home.css">
-    <link rel="stylesheet" href="./View/src/CSS/Presentation.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <title>Presentation</title>
+<!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="./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();">
-    <div class="presentation_titre" id="home">
-        <div class="titre_pre">
-            <div class="retour">
-                <a class="material-icons" id="home" href="index.php?action=goToHome" style="font-size:64px;color:white;">home</a>
-            </div>
-            <div class="sign">
-                <h1>
-                    <span class="fast-flicker">P</span>
-                    <span>resen</span>
-                    <span class="flicker">t</span>
-                    <span>ation</span>
-                </h1>
-            </div>
-        </div>   
-        <div class="Presentation">
-            <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>
-            <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="index.php?action=goToEnigme" class="btn">
-                    <span class="noAnimation">Next</span>
-                </a>
-            </div>
+  <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" href="./Enigme/palindrome.html">Next</a>
+        </div>
+      </div>
+    </nav>
+
+    <img src="../../assets/img/BGPres.png" class="img-fluid" />
+
+    <div class="container pt-5">
+      <div class="col-12">
+        <div class="row py-5">
+          <div class="col-8">
+            <section class="hidden row">
+              <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="col-3" id="fox">
+            <img
+              src="../../assets/img/Foxy.png"
+              alt="Logo"
+              class="img-fluid rounded-circle moving-fox"
+              style="border: 2px solid #44fff6"
+            />
+          </div>
         </div>
       </div>
     </div>