Merge branch 'master' of https://codefirst.iut.uca.fr/git/nathan.boileau/Scripted

WEB/src/CSS/enigme.css

@@ -35,7 +35,7 @@
   }
   
 @media (min-width:1700px) {
-      main .container {
+      main .buttons {
           max-width: 100%;
           padding: 0 150px;
       }
@@ -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;
 }
@@ -90,45 +88,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)
 }

WEB/src/pages/Enigme/palindrome.html

@@ -43,26 +43,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>