Changement modal

WEB/src/CSS/Home.css

@@ -233,7 +233,7 @@ body {
 
 /* Main CSS */
 .main{
-  background-image: url(../../assets/img/banner.jpg);
+  background-image: url(../../assets/img/BackgroundMain.jpg);
   height: 100vh;
   background-position: center;
   background-repeat: no-repeat;

WEB/src/CSS/enigme.css

@@ -65,7 +65,7 @@ body{
   --focus: hsl(210, 90%, 50%);
   --border-color: hsla(0, 0%, 100%, .2);
   --global-background: hsl(220, 25%, 10%);
-  --background: linear-gradient(to right, #0e1538, #061663);
+  --background: linear-gradient(to right, #040a29, #0e1538);
   --shadow-1: hsla(236, 50%, 50%, .3);
   --shadow-2: hsla(236, 50%, 50%, .4);
 }
@@ -77,7 +77,6 @@ body{
     margin-left: 20px;
     background: rgba(0,0,0,0.6);
     box-sizing: border-box;
-    box-shadow: 0 15px 25px rgba(0,0,0,);
     border-radius: 10px;
     padding: 10px;
     margin-left: 10px;
@@ -87,13 +86,14 @@ body{
 
 
 
-/* Button Css */
+/* Main Button Css */
 
 .buttons{
   display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    cursor: pointer;
   }
 
 .compiler_class .buttons div{
@@ -120,26 +120,26 @@ body{
     }
 
 
-  .buttons .btn:nth-child(1):before, .buttons .btn:nth-child(1):after
+.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;
@@ -159,7 +159,7 @@ body{
     color: #fff;
     border: 1px solid #040a29;
     overflow: hidden;
-  }
+}
 
 .buttons .btn span::before{
   content:'';
@@ -241,6 +241,8 @@ body{
 #result{
   display: flex;
   align-items: center;
+  margin: 0 30px;
+  font-size: 1.5rem;
 }
 
 
@@ -258,21 +260,21 @@ body{
 
   width: 100%;
   height: 100%;
-
-  /* --m-background is set as inline style */
   background: var(--m-background);
 }
 
 .modal-container:target {
   display: flex;
+  align-items: center;
 }
 
 .modal {
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
-  width: 95%;
+  align-items: flex-end;
-  height: 25%;
+  width: 30%;
-  padding: 4rem 2rem;
+  height: 35%;
+  padding: 10px 0;
   border-radius: .8rem;
 
   color: aliceblue;
@@ -282,80 +284,66 @@ body{
   overflow: hidden;
 }
 
-.modal__title {
+/* Modal H1  */
-  font-size: 3.2rem;
+
+.modal #containerResult{
   display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 80%;
+  height: 100%;
 }
 
-.modal__btn {
+/* Modal Container Buttons  */
-  margin-top: 4rem;
-  padding: 1rem 1.6rem;
-  border: 1px solid var(--border-color);
-  border-radius: 100rem;
-
-  color: inherit;
-  background: transparent;
-  font-size: 1.4rem;
-  font-family: inherit;
-  letter-spacing: .2rem;
-
-  transition: .2s;
-  cursor: pointer;
-}
 
-.modal__btn:nth-of-type(1) {
+.modal .buttons{
-  margin-right: 1rem;
+  display: flex;
+  align-items: flex-end;
+  height: 100%;
+  width: auto;
 }
 
-.modal__btn:hover,
+.modal .buttons #top{
-.modal__btn:focus {
+  display: flex;
-  background: var(--focus);
+  justify-content: flex-end;
-  border-color: var(--focus);
+  align-items: flex-start;
-  transform: translateY(-.2rem);
+  width: 100%;
+  height: 50%;
 }
 
-
+.modal .buttons #bottom{
-.link-2, #fleche {
-  width: 4rem;
-  height: 4rem;
-  border: 1px solid var(--border-color);
-  border-radius: 100rem;
-
-  color: inherit;
-  font-size: 2.2rem;
-
-  position: absolute;
-  top: 2rem;
-  right: 2rem;
-
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-end;
-
+  width: 100%;
-  transition: .2s;
+  height: 50%;
 }
 
-#fleche{
+/* Modal buttons btn */
-  display: none;
+
-  position: absolute;
+.modal .buttons .btn{
-  top: 7rem;
+  width: 30px;
-  right: 2rem;
+  height: 30px;
+  margin : 0 15px;
 }
 
-.link-2::before {
+.modal .buttons #bottom{
-  content: '×';
+  width: 100%;
+}
 
-  transform: translateY(-.1rem);
+.modal .buttons #fleche{
+  display: none; 
+  width: 75px;
+  height: 40px;
 }
-#fleche::before {
-  content: '->';
 
-  transform: translateY(-.1rem);
+.modal .buttons .btn span{
+  background: #06124b;
+  color: white;
 }
 
-.link-2:hover,
+.modal .buttons #bottom .btn:nth-child(1):before, .modal .buttons #bottom .btn:nth-child(1):after
-.link-2:focus, #fleche:hover, #fleche:focus {
+{
-  background: var(--focus);
+    background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
-  border-color: var(--focus);
-  transform: translateY(-.2rem);
 }

WEB/src/pages/Enigme/palindrome.html

@@ -61,9 +61,21 @@ print(estPalindrome("abba"))</div>
 
   <div class="modal-container" id="m1-o" style="--m-background: transparent;">
     <div class="modal">
-      <h1 id="result"></h1>
+      <div id="containerResult">
-      <a href="#m1-c" class="link-2"></a>
+        <h1 id="result"></h1>
-      <a href="./ChuckNorris.html" id="fleche"></a>
+      </div>
+      <div class="buttons">
+        <div id="top">
+          <a href="#" class="btn">
+            <span class="noAnimation">x</span>
+          </a>
+        </div>
+        <div id="bottom">
+          <a href="./ChuckNorris.html" class="btn" id="fleche">
+            <span class="noAnimation">Next</span>
+          </a>
+        </div>
+      </div>
     </div>
   </div>