From b63a7cf0d72d1bac8a81cf8ff325e1f8f526bdfb Mon Sep 17 00:00:00 2001 From: Pierre BALLANDRAS Date: Wed, 16 Nov 2022 09:57:53 +0100 Subject: [PATCH] booststrap enigme --- WEB/View/src/CSS/Enigmev2.css | 215 ++++++++++++++++++ .../src/pages/Enigme/Enigmebootstrap.html | 84 +++++++ 2 files changed, 299 insertions(+) create mode 100644 WEB/View/src/CSS/Enigmev2.css create mode 100644 WEB/View/src/pages/Enigme/Enigmebootstrap.html diff --git a/WEB/View/src/CSS/Enigmev2.css b/WEB/View/src/CSS/Enigmev2.css new file mode 100644 index 00000000..e861a9ee --- /dev/null +++ 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); + } \ No newline at end of file diff --git a/WEB/View/src/pages/Enigme/Enigmebootstrap.html b/WEB/View/src/pages/Enigme/Enigmebootstrap.html new file mode 100644 index 00000000..4238858c --- /dev/null +++ b/WEB/View/src/pages/Enigme/Enigmebootstrap.html @@ -0,0 +1,84 @@ + + + + + + Bootstrap Site + + + + + + + + + +
+
+
+
+ home +
+
+

+ p + alin + d + rome +

+

+
+

Consigne


+

+ Écrire une fonction estPalindrome qui prend en argument un entier et qui renvoie True si c’est un palindrome et False sinon. +



+

Rappel


+

Un palindrome est un nombre qui peut se lire dans les deux sens. Par exemple 111.



+

Exemple


+

Entrée :      Sortie :

+

[1,0,1]        True

+

[1,1,9,1]       False



+

Aide


+

En python l’instruction [::-1] permet d’inverse une chaine de caractère. Par exemple print("ae"[::-1]) affiche : ea.

+
+
+
+
def estPalindrome(var): + return var == var[::-1] +print(estPalindrome("abba")) +
+
+
+
+ +
+
+ +
+
+
+
+ + + + + + + \ No newline at end of file