CSS Enigme

3 years ago · fd2ad3a8d4
parent 41c2d55112
commit fd2ad3a8d4
3 changed files with 69 additions and 55 deletions
--- a/WEB/src/CSS/enigme.css
+++ b/WEB/src/CSS/enigme.css
@ -11,8 +11,6 @@
    box-sizing: border-box;
 }
  
-
-  
 h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
@ -58,7 +56,7 @@ body{
    font-family: "Orbitron" , sans-serif;
    flex-direction: row;
    align-items: stretch;
-    height: 100%;
+    height: 95%;
    margin-top: 10px;
    padding: 0;
 }
@ -66,41 +64,11 @@ body{
 .enigme{
    width: 25%;
    height: 100%;
-    margin: 0;
-    padding: 0;
-    margin-left: 20px;
    color: aliceblue;
+    margin-left: 20px;
 }


-.editor_class{
-    width: 45%;
-    min-height: 100%;
-    margin-bottom: 0;
-    margin-right: 10px;
-}
-
-.compiler_class{
-    width: 30%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-textarea {
-    font-size: .8rem;
-    letter-spacing: 1px;
-}
-#console {
-    padding: 10px;
-    margin: 10px;
-    max-width: 95%;
-    max-height: 100%;
-    line-height: 1.5;
-    border-radius: 5px;
-    resize: none;
-}


 /* Button Css */
@ -187,10 +155,60 @@ textarea {
      transform: skew(25deg)
 }

-#hide{
-  display: none;
+/* Console CSS*/
+
+.compiler_class{
+  width: 30%;
 }

 #console{
-  display: none;
+  font-size: .8rem;
+  letter-spacing: 1px;
+  background-color: #0e1538;
+  color: #fff;
+  border: solid 1px #414141;
+  padding: 10px;
+  margin: 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: 2rem !important;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 20px;
+}
+.enigme .sign{
+  margin-top: 10px;
+  margin-bottom: 20px;
+  margin-right: 20px;
+}
+
+.enigme h2{
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.enigme p{
+    font-size: 1rem;
+    font-weight: 400;
+    margin-right: 10px;
+}
+
+
--- a/WEB/src/JS/base.js
+++ b/WEB/src/JS/base.js
@ -36,20 +36,9 @@ function run_init() {
  if (document.getElementById("console") != '') {
    document.getElementById("console").innerHTML = '';
  }
-  hide();
  run();
 }

-function hide() {
-  if (document.getElementById("console").style.display == 'block'){
-    document.getElementById("console").style = ('display: none');
-    document.getElementById("hide").style =('display: none');
-  }
-  else {
-    document.getElementById("console").style = ('display: block');
-    document.getElementById("hide").style =('display: block');
-  }
-}

 var editor = ace.edit("editor");
 editor.setTheme("ace/theme/vibrant_ink");
--- a/WEB/src/pages/Enigme/palindrome.html
+++ b/WEB/src/pages/Enigme/palindrome.html
@ -4,15 +4,23 @@
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Brython</title>
+  <title>Palindrome</title>
  <link rel="stylesheet" href="../../CSS/enigme.css" />
+  <link rel="stylesheet" href="../../CSS/Home.css">
 </head>
 <body>
  <div>
    
  </div>
  <div class="enigme">
-    <h1>PALINDROME</h1><br>
+    <div class="sign">
+      <h1>
+          <span class="fast-flicker">p</span>
+          <span>alin</span>
+          <span class="flicker">d</span>
+          <span>rome</span>
+      </h1>
+    </div><br>
    <h2>Consigne</h2><br>
 	  <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. 
@ -35,7 +43,7 @@
  <button onclick="rappel()" id="buttonRappel">Rappel</button> -->
  <p id="textAide"></p>
  <p id="textRappel"></p>
-  <div class='editor_class' id='editor'>def estPalindrome(var):
+  <div class='ace' id='editor'>def estPalindrome(var):
  if(var == var[::-1]):
    return True
  else:
@ -43,7 +51,6 @@

 print(estPalindrome("abba"))</div>
  <div class='compiler_class'>
-    <button id="hide" class="btn" onclick="hide()">X</button>
    <textarea id='console' readonly rows="30" cols="100"></textarea>
    <div class="buttons">
      <div>