From 3391f430576381c4399c5efe9c0fbcaad8a7e814 Mon Sep 17 00:00:00 2001
From: nathan boileau <boileaunathan42@gmail.com>
Date: Mon, 17 Oct 2022 11:32:20 +0200
Subject: [PATCH] Set button for palindrome

---
 WEB/src/CSS/enigme.css               | 113 +++++++++++++++++++--------
 WEB/src/pages/Enigme/palindrome.html |  32 +++++---
 2 files changed, 100 insertions(+), 45 deletions(-)

diff --git a/WEB/src/CSS/enigme.css b/WEB/src/CSS/enigme.css
index 5e23618d..acf79bd0 100644
--- a/WEB/src/CSS/enigme.css
+++ b/WEB/src/CSS/enigme.css
@@ -35,7 +35,7 @@
   }
   
 @media (min-width:1700px) {
-      main .container {
+      main .buttons {
           max-width: 100%;
           padding: 0 150px;
       }
@@ -45,7 +45,7 @@
 /* Main CSS */
 html{
   scroll-behavior: smooth;
-  background-image: url(../../assets/img/Background4.png);
+  background-color: black;
   height: 100vh;
   background-position: center;
   background-repeat: no-repeat;
@@ -53,14 +53,12 @@ html{
 }
 
 
-
-
 body{
     display: flex;
     font-family: "Orbitron" , sans-serif;
     flex-direction: row;
     align-items: stretch;
-    height: 98%;
+    height: 100%;
     margin-top: 10px;
     padding: 0;
 }
@@ -87,45 +85,96 @@ textarea {
     font-size: .8rem;
     letter-spacing: 1px;
 }
-textarea {
+#console {
     padding: 10px;
+    margin: 10px;
     max-width: 95%;
     max-height: 50%;
     line-height: 1.5;
     border-radius: 5px;
     border: 1px solid #ccc;
-    box-shadow: 1px 1px 1px #999;
 }
 
 
-.compiler_class.container {
-  width: 400px;
-  height: 400px;
+/* Button Css */
+
+.buttons{
   display: flex;
-  flex-direction: row;
-  align-items: stretch;
-}
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
 
-.right {
-  width: 180px;
-  height: 60px;
+.compiler_class .buttons div{
+  display: flex;
 }
-.left {
-    width: 180px;
+
+.buttons button{
+  position: relative;
+    width: 120px;
     height: 60px;
-    position: relative;
-}
+    display: inline-block;
+    background: transparent;
+    margin: 20px;
+  }
+
+.buttons button:before, .buttons button:after
+{
+  content:'';
+    position: absolute;
+    inset: 0;
+    transition: 0.5s;
+    background: #f00
+  }
 
-.btn {
-  width: 180px;
-  height: 60px;
-  cursor: pointer;
-  background: transparent;
-  border: 1px solid #11f830;
-  outline: none;
-  transition: 0.5s ease-in-out;
-  color: white;
-  font-size: 18px;
-  font-weight: 100;
-  position: absolute;
+.buttons button:nth-child(1):before, .buttons button:nth-child(1):after
+  {
+   background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4)
+  }
+
+.buttons button:nth-child(2):before, .buttons button:nth-child(2):after
+  {
+    background: linear-gradient(45deg, #f0075b, #0e1538, #1aff22);
+  }
+
+.buttons button:hover:before
+  {
+    inset: -3px;  
+  }
+
+.buttons button:hover:after
+  {
+    inset: -3px;  
+    filter: blur(10px);
+  }
+
+.buttons button 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 button span::before{
+  content:'';
+    position: absolute;
+    top: 0;
+    left: -50%;
+    width: 100%;
+    height: 100%;
+    background: rgba(255,255,255,0.075);
+      transform: skew(25deg)
 }
\ No newline at end of file
diff --git a/WEB/src/pages/Enigme/palindrome.html b/WEB/src/pages/Enigme/palindrome.html
index eba2a544..63a7bed2 100644
--- a/WEB/src/pages/Enigme/palindrome.html
+++ b/WEB/src/pages/Enigme/palindrome.html
@@ -12,7 +12,7 @@
     
   </div>
   <div class="enigme">
-	  <p>
+	  <p class="enonce">
       Écrire une fonction estPalindrome qui prend en argument un entier et qui renvoie True si c’est un palindrome et False sinon. 
 		</p>
   </div>
@@ -33,26 +33,32 @@
 	</div>
   <div class='compiler_class'>
     <textarea id='console' readonly rows="30" cols="100"></textarea>
-    <div class="container">
-      <div class="right">
-        <button onclick="run_init()" class="btn">Run</button>
-      </div>
-      <!-- <div class="left">
-        <button onclick="submit()" class="btn">
-          <svg width="180px" height="60px" viewBox="0 0 180 60">
-            <polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
-            <polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
-          </svg>
+    <div class="buttons">
+      <div>
+        <button onclick="run_init()">
+          <span>Run</span>
+        </button>
+        <button onclick="submit()">
           <span>Submit</span>
         </button>
-      </div> -->
+      </div>
     </div>
   </div>
+  
+
+
+
+
 
+
+
+
+
+
+  
   <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
   <script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
   <script src="../../JS/base.js"></script>
   <script src="../../JS/palindrome.js"></script>
-
 </body>
 </html>