From a9a95383f2cd18d3f281c5037aac837f9caf426c Mon Sep 17 00:00:00 2001 From: nathan boileau Date: Mon, 17 Oct 2022 22:15:30 +0200 Subject: [PATCH] Modal Enigme --- WEB/src/CSS/Home.css | 1 - WEB/src/CSS/enigme.css | 144 ++++++++++++++++++++++++--- WEB/src/pages/Enigme/palindrome.html | 44 ++++---- 3 files changed, 151 insertions(+), 38 deletions(-) diff --git a/WEB/src/CSS/Home.css b/WEB/src/CSS/Home.css index 847b66a1..49b201d8 100644 --- a/WEB/src/CSS/Home.css +++ b/WEB/src/CSS/Home.css @@ -1,6 +1,5 @@ /*Fonts CSS */ -@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap'); diff --git a/WEB/src/CSS/enigme.css b/WEB/src/CSS/enigme.css index 7d3718a2..2ca6bf99 100644 --- a/WEB/src/CSS/enigme.css +++ b/WEB/src/CSS/enigme.css @@ -1,6 +1,5 @@ /*Fonts CSS */ -@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap'); @@ -24,13 +23,14 @@ h1, h2, h3, h4, h5, h6 { text-decoration: none !important; } - a:hover { - text-decoration: none !important; - } +a:hover { + text-decoration: none !important; +} - input:focus, textarea:focus, select:focus { - outline: none; - } + +input:focus, textarea:focus, select:focus { + outline: none; +} @media (min-width:1700px) { main .buttons { @@ -43,7 +43,7 @@ h1, h2, h3, h4, h5, h6 { /* Main CSS */ html{ scroll-behavior: smooth; - background-color: black; + background-color: rgb(15, 15, 15); height: 100vh; background-position: center; background-repeat: no-repeat; @@ -53,12 +53,21 @@ html{ body{ display: flex; - font-family: "Orbitron" , sans-serif; + font-family: "Orbitron", sans-serif; flex-direction: row; align-items: stretch; height: 95%; margin-top: 10px; padding: 0; + + --light: hsl(220, 50%, 90%); + --primary: hsl(255, 30%, 55%); + --focus: hsl(210, 90%, 50%); + --border-color: hsla(0, 0%, 100%, .2); + --global-background: hsl(220, 25%, 10%); + --background: linear-gradient(to right, #0e1538, #061663); + --shadow-1: hsla(236, 50%, 50%, .3); + --shadow-2: hsla(236, 50%, 50%, .4); } .enigme{ @@ -93,6 +102,7 @@ body{ margin: 20px; } + .buttons .btn:before, .buttons .btn:after { content:''; @@ -155,6 +165,14 @@ body{ transform: skew(25deg) } + + +.buttons .btn .noAnimation { + animation: none; + font-size: 1em; +} + + /* Console CSS*/ .compiler_class{ @@ -164,7 +182,7 @@ body{ #console{ font-size: .8rem; letter-spacing: 1px; - background-color: #0e1538; + background-color: #040a29; color: #fff; border: solid 1px #414141; padding: 10px; @@ -192,12 +210,12 @@ body{ font-size: 2rem !important; font-weight: 700; text-align: center; - margin-bottom: 20px; + } .enigme .sign{ margin-top: 10px; + margin-right: 10px; margin-bottom: 20px; - margin-right: 20px; } .enigme h2{ @@ -212,3 +230,105 @@ body{ } +/* 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%; + + /* --m-background is set as inline style */ + background: var(--m-background); +} + +.modal-container:target { + display: flex; +} + +.modal { + display: flex; + justify-content: space-around; + width: 95%; + padding: 4rem 2rem; + border-radius: .8rem; + + color: aliceblue; + background: var(--background); + box-shadow: var(--m-shadow, .4rem .4rem 10.2rem .2rem) var(--shadow-1); + position: relative; + overflow: hidden; +} + +.modal__title { + font-size: 3.2rem; + display: flex; +} + +.modal__btn { + margin-top: 4rem; + padding: 1rem 1.6rem; + border: 1px solid var(--border-color); + border-radius: 100rem; + + color: inherit; + background: transparent; + font-size: 1.4rem; + font-family: inherit; + letter-spacing: .2rem; + + transition: .2s; + cursor: pointer; +} + +.modal__btn:nth-of-type(1) { + margin-right: 1rem; +} + +.modal__btn:hover, +.modal__btn:focus { + background: var(--focus); + border-color: var(--focus); + transform: translateY(-.2rem); +} + + +.link-2 { + width: 4rem; + height: 4rem; + border: 1px solid var(--border-color); + border-radius: 100rem; + + color: inherit; + font-size: 2.2rem; + + position: absolute; + top: 2rem; + right: 2rem; + + display: flex; + justify-content: center; + align-items: center; + + transition: .2s; +} + +.link-2::before { + content: '×'; + + transform: translateY(-.1rem); +} + +.link-2:hover, +.link-2:focus { + background: var(--focus); + border-color: var(--focus); + transform: translateY(-.2rem); +} \ No newline at end of file diff --git a/WEB/src/pages/Enigme/palindrome.html b/WEB/src/pages/Enigme/palindrome.html index bfbf7930..90b066eb 100644 --- a/WEB/src/pages/Enigme/palindrome.html +++ b/WEB/src/pages/Enigme/palindrome.html @@ -9,9 +9,7 @@ -
- -
+

@@ -35,14 +33,11 @@

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

-

- -

-

+
def estPalindrome(var): if(var == var[::-1]): return True @@ -54,25 +49,24 @@ print(estPalindrome("abba"))
- - + + Run + + + Submit +
- - - - - - - - - + + +