Finition du style des énigmes + Début premier test de foxy

WEB/View/src/CSS/Eni.css

@@ -61,13 +61,18 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 #console {
+  font-family: DejaVu Sans Mono, monospace;
   font-size: 0.8rem;
   letter-spacing: 1px;
   background-color: #222831;
-  color: #fff;
-  border: solid 1px #414141;
-  border-radius: 5px;
   resize: none;
+  color: #fff;
+  border: 1px solid #44fff6;
+  box-shadow: 0 0 1px #fff,
+              0 0 1px #fff,
+              0 0 5px #44fff6,
+              0 0 5px #44fff6,
+              inset 0 0 5px #44fff6; 
 }
 
 /***** End Editor + Console CSS *****/

WEB/View/src/CSS/Enigme.css

@@ -1,354 +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;
-}
-
-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 .buttons {
-    max-width: 100%;
-    padding: 0 150px;
-  }
-}
-
-/* Main CSS */
-html {
-  scroll-behavior: smooth;
-  height: 100vh;
-  background-position: center center;
-  background-color: #464646;
-  background-attachment: fixed;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-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%, 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;
-}
-
-.titre_pre {
-  display: flex;
-  margin-top: 10px;
-  margin-right: 10px;
-  margin-bottom: 20px;
-  padding-left: 10px;
-}
-
-.sign {
-  margin-left: 5%;
-}
-
-/* Main Button Css */
-
-.buttons {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  cursor: pointer;
-}
-
-.compiler_class .buttons div {
-  display: flex;
-}
-
-.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);
-}
-
-.buttons .btn:nth-child(2):before,
-.buttons .btn:nth-child(2):after {
-  background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
-}
-
-.buttons .btn:hover:before {
-  inset: -3px;
-}
-
-.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 {
-  width: 30%;
-}
-
-#console {
-  font-size: 0.8rem;
-  opacity: 0.85;
-  letter-spacing: 1px;
-  background-color: #040a29;
-  color: #fff;
-  border: solid 1px #414141;
-  padding: 10px;
-  margin-left: 10px;
-  margin-right: 10px;
-  max-width: 95%;
-  max-height: 85%;
-  line-height: 1.5;
-  border-radius: 5px;
-  resize: none;
-}
-
-/* Ace CSS*/
-
-.ace {
-  width: 45%;
-  max-height: 100%;
-  margin-bottom: 0;
-  margin-right: 10px;
-}
-
-/* Text Css */
-
-.enigme h1 {
-  font-size: 1.5rem !important;
-  font-weight: 700;
-  text-align: center;
-}
-.enigme .sign {
-  display: contents;
-}
-
-.enigme h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
-.enigme p {
-  font-size: 1rem;
-  font-weight: 400;
-  margin-right: 10px;
-}
-
-#result {
-  display: flex;
-  align-items: center;
-  margin: 0 30px;
-  font-size: 1.5rem;
-}
-
-/* Modal CSS */
-
-.modal-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 10;
-
-  display: none;
-  justify-content: center;
-  align-items: center;
-
-  width: 100%;
-  height: 100%;
-  background: var(--m-background);
-}
-
-.modal-container:target {
-  display: flex;
-  align-items: center;
-}
-
-.modal {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  width: 30%;
-  height: 35%;
-  padding: 10px 0;
-  border-radius: 0.8rem;
-
-  color: aliceblue;
-  background: var(--background);
-  box-shadow: var(--m-shadow, 0.4rem 0.4rem 8.2rem 0.2rem) var(--shadow-1);
-  position: relative;
-  overflow: hidden;
-}
-
-/* Modal H1  */
-
-.modal #containerResult {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  width: 80%;
-  height: 100%;
-}
-
-/* Modal Container Buttons  */
-
-.modal .buttons {
-  display: flex;
-  align-items: flex-end;
-  height: 100%;
-  width: auto;
-}
-
-.modal .buttons #top {
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-  width: auto;
-  height: 50%;
-}
-
-.modal .buttons #bottom {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  width: auto;
-  height: 50%;
-}
-
-/* Modal buttons btn */
-
-.modal .buttons .btn {
-  width: 30px;
-  height: 30px;
-  margin: 0 15px;
-}
-
-.modal .buttons #bottom {
-  width: 100%;
-}
-
-.modal .buttons #fleche {
-  display: none;
-  width: 75px;
-  height: 40px;
-}
-
-.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);
-}

WEB/View/src/CSS/Enigmev2.css

@@ -1,226 +0,0 @@
-/*Fonts CSS */
-
-@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
-
-/*Default CSS*/
-
-
-/*Ace CSS */
-
-.ace{
-    width: 100%;
-    height: 100%;
-}
-
-
-/* Main Button Css */
-
-.buttons{
-  display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    cursor: pointer;
-}
-
-.compiler_class .buttons div{
-  display: flex;
-}
-
-.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)
-}
-
-.buttons .btn:nth-child(2):before, .buttons .btn:nth-child(2):after
-{
-    background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
-}
-
-.buttons .btn:hover:before
-{
-    inset: -3px;  
-}
-
-.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;
-}
-
-
-/* Modal CSS */
-
-.modal-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 10;
-  
-    display: none;
-    justify-content: center;
-    align-items: center;
-  
-    width: 100%;
-    height: 100%;
-    background: var(--m-background);
-  }
-  
-  .modal-container:target {
-    display: flex;
-    align-items: center;
-  }
-  
-  .modal {
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    width: 30%;
-    height: 35%;
-    padding: 10px 0;
-    border-radius: .8rem;
-  
-    color: aliceblue;
-    background: var(--background);
-    box-shadow: var(--m-shadow, .4rem .4rem 8.2rem .2rem) var(--shadow-1);
-    position: relative;
-    overflow: hidden;
-  }
-  
-  /* Modal H1  */
-  
-  .modal #containerResult{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    width: 80%;
-    height: 100%;
-  }
-  
-  
-  /* Modal Container Buttons  */
-  
-  .modal .buttons{
-    display: flex;
-    align-items: flex-end;
-    height: 100%;
-    width: auto;
-  }
-  
-  .modal .buttons #top{
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-start;
-    width: auto;
-    height: 50%;
-  }
-  
-  .modal .buttons #bottom{
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    width: auto;
-    height: 50%;
-  }
-  
-  /* Modal buttons btn */
-  
-  .modal .buttons .btn{
-    width: 30px;
-    height: 30px;
-    margin : 0 15px;
-  }
-  
-  .modal .buttons #bottom{
-    width: 100%;
-  }
-  
-  .modal .buttons #fleche{
-    display: none; 
-    width: 75px;
-    height: 40px;
-  }
-  
-  .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);
-  }
-
-  /* Console CSS*/
-
-#console{
-  font-size: .8rem;
-  opacity: 0.85;
-  letter-spacing: 1px;
-  background-color: #040a29;
-  color: #fff;
-  border: solid 1px #414141;
-  max-width: 95%;
-  max-height: 85%;
-  line-height: 1.5;
-  resize: none;
-}

WEB/View/src/JS/base.js

@@ -110,12 +110,13 @@ function check() {
   }
 }
 
+
 /**
- * It gets all the elements with the class name "help" and sets their opacity to 1.
+ * It gets all the elements with the class name "help" and sets their display property to "flex".
  */
 function displayHelp() {
   var help = document.getElementsByClassName("help");
   for (var i = 0; i < help.length; i++) {
-    help[i].style.opacity = 1;
+    help[i].style.display = "flex";
   }
 }

WEB/View/src/pages/FirstTest.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>First Test</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <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>
+    <link rel="stylesheet" href="../CSS/Presentation.css">
+  </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="index.php?action=goToHome">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="index.php?action=goToEnigme">Next</a>
+        </div>
+      </div>
+    </nav>
+
+    
+
+  </body>
+</html>

WEB/View/src/pages/Palindrome.html

@@ -28,8 +28,9 @@
   </head>
   <body>
     <div class="container-fluid px-5">
+
+      <!-- First Row -->
       <div class="row py-4">
-        <!-- style="background-color: #050E15" -->
         <div class="col-9 d-flex align-items-center px-0">
           <a
             class="material-icons pl-0"
@@ -58,9 +59,15 @@
           </div>
         </div>
       </div>
+      <!-- End First Row -->
 
+      <!-- Second Row -->
       <div class="row">
-        <div class="col-3 rounded p-3" style="background-color: #222831">
+        <!-- First Column -->
+        <div
+          class="col-3 rounded p-3"
+          style="background-color: #222831; min-height: 80vh; height: auto"
+        >
           <h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
             Palindrome
           </h2>
@@ -77,26 +84,30 @@
           <p><b>estPalindrome(12321)</b> renvoie <b>True</b></p>
           <h3
             class="text-left pb-3 pt-5 help"
-            style="color: #44fff6; opacity: 0"
+            style="color: #44fff6; display: none"
           >
             Aide
           </h3>
-          <p style="opacity: 0" class="help">
+          <p style="display: none" class="help">
             En python l’instruction [::-1] permet d’inverse une chaine de
             caractère. <br /><br />print("ae"[::-1]) -> ea.
           </p>
         </div>
+        <!-- End First Column -->
 
+        <!-- Second Column -->
         <div class="col-5 pr-0">
           <div class="ace rounded" id="editor"></div>
         </div>
+        <!-- End Second Column -->
 
+        <!-- Third Column -->
         <div class="col-4">
           <textarea
             id="console"
             readonly
-            style="width: 100%; height: 80%"
+            style="width: 100%; min-height: 65vh; height: auto"
-            class="p-2"
+            class="p-3 rounded"
           ></textarea>
 
           <div class="row pt-5 text-center" style="cursor: pointer">
@@ -106,36 +117,62 @@
               </a>
             </div>
             <div class="col-6">
-              <button onclick="submit()" class="btn" data-toggle="modal" data-target="#modal">
+              <button
+                onclick="submit()"
+                class="btn"
+                data-toggle="modal"
+                data-target="#modal"
+              >
                 <span>Submit</span>
               </button>
             </div>
           </div>
         </div>
+        <!-- End Third Column -->
       </div>
+      <!-- End Second Row -->
     </div>
 
-    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="modal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalCenterTitle"
+      aria-hidden="true"
+    >
       <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title" id="exampleModalLongTitle" style="color: black;">Results</h5>
+            <h2
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              class="modal-title"
+              id="exampleModalLongTitle"
+              style="color: black"
+            >
+              Results
+            </h2>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
           <div class="modal-body">
-            <h2 id="result" style="color: black;"></h2>
+            <h5 id="result" style="color: black"></h5>
           </div>
           <div class="modal-footer">
-            <a href="#" class="btn" style="display : none;" id="next">
+            <a href="#" class="btn" style="display: none" id="next">
               <span>NEXT</span>
             </a>
           </div>
         </div>
       </div>
     </div>
-    
+    <!-- End Modal -->
 
     <script
       src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"