booststrap enigme

2 years ago · b63a7cf0d7
parent 2088859911
commit b63a7cf0d7
2 changed files with 299 additions and 0 deletions
--- a/WEB/View/src/CSS/Enigmev2.css
+++ b/WEB/View/src/CSS/Enigmev2.css
@ -0,0 +1,215 @@
 /*Fonts CSS */
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
 /*Default CSS*/
 /*Ace CSS */
 .ace{
    width: 45%;
    height: 90%;
    max-height: 100%;
    margin-bottom: 0;
    margin-right: 10px;
 }
 /* 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);
  }
--- a/WEB/View/src/pages/Enigme/Enigmebootstrap.html
+++ b/WEB/View/src/pages/Enigme/Enigmebootstrap.html
@ -0,0 +1,84 @@
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap Site</title>
        <link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous"/>
        <link rel="stylesheet" href="../../CSS/Enigmev2.css"/>
        <link rel="stylesheet" href="../../CSS/Main.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <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>
    </head>
    <body style="background-color: black;background-image: none;">
        <div class="container-fluid mx-4">
            <div class="row">
                <div class="col-3">
                    <div class="retour">
                        <a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
                    </div>
                    <div class="sign">
                        <h1>
                            <span class="fast-flicker">p</span>
                            <span>alin</span>
                            <span class="flicker">d</span>
                            <span>rome</span>
                        </h1>
                    </div><br>
                    <div>
                        <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. 
                            </p><br><br>
                        <h2>Rappel</h2><br>
                        <p class="rappel">Un palindrome est un nombre qui peut se lire dans les deux sens. Par exemple 111.</p><br><br>
                        <h2>Exemple</h2><br>
                        <p>Entrée :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Sortie :</p>
                        <p>[1,0,1]&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;True</p>
                        <p>[1,1,9,1]&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;False</p><br><br>
                        <h2>Aide</h2><br>
                        <p>En python l’instruction [::-1] permet d’inverse une chaine de caractère. Par exemple print("ae"[::-1])  affiche : ea.</p>
                    </div>
                </div>
                <div class="col-5">
                    <div class='ace' id='editor'>def estPalindrome(var):
    return var == var[::-1]
 print(estPalindrome("abba"))
                    </div>
                </div>
                <div class="col-4">
                    <div class='compiler_class'>
                        <textarea id='console' readonly></textarea>
                    </div>
                    <div class="buttons">
                        <div>
                            <a onclick="run_init()" class="btn">
                            <span class="noAnimation">Run</span>
                            </a>
                            <a href="#m1-o" onclick="submit()" class="btn">
                            <span class="noAnimation">Submit</span>
                            </a>
                        </div>
                    </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>