From 0f303b838919b260b9d051e33d0247d7dd97e386 Mon Sep 17 00:00:00 2001 From: nathan boileau Date: Tue, 29 Nov 2022 21:28:00 +0100 Subject: [PATCH] Palindrome style --- WEB/View/src/CSS/Eni.css | 83 +++++++++++- WEB/View/src/JS/Presentation.js | 2 +- WEB/View/src/JS/base.js | 115 ++++++++-------- WEB/View/src/pages/Enigme.html | 68 ---------- WEB/View/src/pages/Enigme/palindrome.html | 6 +- WEB/View/src/pages/Palindrome.html | 153 ++++++++++++++++++++++ WEB/View/src/pages/Presentation.html | 8 +- 7 files changed, 301 insertions(+), 134 deletions(-) delete mode 100644 WEB/View/src/pages/Enigme.html create mode 100644 WEB/View/src/pages/Palindrome.html diff --git a/WEB/View/src/CSS/Eni.css b/WEB/View/src/CSS/Eni.css index 95894038..e496983c 100644 --- a/WEB/View/src/CSS/Eni.css +++ b/WEB/View/src/CSS/Eni.css @@ -9,7 +9,7 @@ body { min-height: 100vh; - font-family: "Equinox", sans-serif; + font-family: Verdana, Arial, Helvetica, sans-serif; color: white; scroll-behavior: smooth; height: 100vh; @@ -17,7 +17,8 @@ body { background-attachment: fixed; background-repeat: no-repeat; background-size: cover; - background-color: #222831; + /* background-image: url("../../assets/img/Background5.jpg"); */ + background-color: #050E15; } p, @@ -29,20 +30,94 @@ ul { padding: 0; line-height: normal; text-decoration: none !important; + font-family: "Fauna", sans-serif; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.8px; +} + +/***** Text CSS *****/ + +p{ + font-family: "Fauna", sans-serif; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.8px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Equinox", sans-serif; } +/***** End Text CSS *****/ + + +/***** Editor + Console CSS *****/ + #editor { width: 100%; min-height: 80vh; - height: 100%; + height: auto; } #console { font-size: 0.8rem; letter-spacing: 1px; - background-color: #050e15; + background-color: #222831; color: #fff; border: solid 1px #414141; border-radius: 5px; resize: none; } + +/***** End Editor + Console CSS *****/ + +/* Buttons */ + +.btn{ + position: relative; + width: 120px; + height: 60px; + background: transparent; +} + +.btn:before, .btn:after{ + content: ""; + position: absolute; + inset: 0; + transition: 0.5s; + background: #f00; +} + +.btn:nth-child(1):before, .btn:nth-child(1):after{ + background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4); +} + +.btn:nth-child(2):before, .btn:nth-child(2):after{ + background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942); +} + +.btn:hover:before{ + inset: -3px; +} + +.btn:hover:after{ + inset: -3px; + filter: blur(10px); +} + +.btn span{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #0e1538; + z-index: 10; + display: flex; + justify-content: center; + align-items: center; + text-transform: uppercase; + letter-spacing: 1.5px; + color: #fff; +} \ No newline at end of file diff --git a/WEB/View/src/JS/Presentation.js b/WEB/View/src/JS/Presentation.js index 73eb19ab..bd756c5a 100644 --- a/WEB/View/src/JS/Presentation.js +++ b/WEB/View/src/JS/Presentation.js @@ -18,6 +18,6 @@ const fox = document.querySelector(".moving-fox"); window.addEventListener("scroll", () => { const scrollValue = window.scrollY - 700; - fox.style.top = `${scrollValue / 1.3}px`; + fox.style.top = `${scrollValue / 1}px`; fox.style.opacity = `${window.scrollY / 700}`; }); diff --git a/WEB/View/src/JS/base.js b/WEB/View/src/JS/base.js index e59cde08..745a5be5 100644 --- a/WEB/View/src/JS/base.js +++ b/WEB/View/src/JS/base.js @@ -1,45 +1,44 @@ function run() { - const terminal = document.getElementById("console"); - const runner = new BrythonRunner({ - stdout: { - write(content) { - terminal.innerHTML += content; - terminal.scrollTop = terminal.scrollHeight; - }, - flush() {} + const terminal = document.getElementById("console"); + const runner = new BrythonRunner({ + stdout: { + write(content) { + terminal.innerHTML += content; + terminal.scrollTop = terminal.scrollHeight; }, - stderr: { - write(content) { - terminal.innerHTML += content; - terminal.scrollTop = terminal.scrollHeight; - }, - flush() {} + flush() {}, + }, + stderr: { + write(content) { + terminal.innerHTML += content; + terminal.scrollTop = terminal.scrollHeight; }, - stdin: { - async readline() { - terminal.innerHTML += "\n"; - terminal.scrollTop = terminal.scrollHeight; - var userInput = prompt(); - return userInput; - }, - flush() {} - } - }); - var code = editor.getValue(); - runner.runCode(code); - setTimeout(() => { - runner.stopRunning(); - }, 10*1000); + flush() {}, + }, + stdin: { + async readline() { + terminal.innerHTML += "\n"; + terminal.scrollTop = terminal.scrollHeight; + var userInput = prompt(); + return userInput; + }, + flush() {}, + }, + }); + var code = editor.getValue(); + runner.runCode(code); + setTimeout(() => { + runner.stopRunning(); + }, 10 * 1000); } function run_init() { - if (document.getElementById("console") != '') { - document.getElementById("console").innerHTML = ''; + if (document.getElementById("console") != "") { + document.getElementById("console").innerHTML = ""; } run(); } - var editor = ace.edit("editor"); editor.container.style.opacity = 0.85; editor.setTheme("ace/theme/vibrant_ink"); @@ -55,31 +54,31 @@ editor.setOptions({ }); //Function that execute given code and return the result in a given element by id - + function exec(code, id) { const terminal = document.getElementById("console"); - terminal.innerHTML = ''; + terminal.innerHTML = ""; const runner = new BrythonRunner({ stdout: { write(content) { - if (id == "code"){ + if (id == "code") { retourCode = content; } - if (id == "solution"){ + if (id == "solution") { retourSolution = content; } }, - flush() {} + flush() {}, }, stderr: { write(content) { - if (id == "solution"){ + if (id == "solution") { retourSolution = "ERROR"; } terminal.innerHTML += content; terminal.scrollTop = terminal.scrollHeight; }, - flush() {} + flush() {}, }, stdin: { async readline() { @@ -88,27 +87,35 @@ function exec(code, id) { var userInput = prompt(); return userInput; }, - flush() {} - } + flush() {}, + }, }); - runner.runCode(code) + runner.runCode(code); setTimeout(() => { runner.stopRunning(); - }, 10*1000); + }, 10 * 1000); } - -//~ Function that check if the code in the editor as the same result as the solution. - -function check(){ + +/** + * It checks if the code in the editor as the same result as the solution. + */ +function check() { if (retourSolution == "ERROR") { result.innerHTML = "Il semblerait qu'il y a une erreur dans ton code :/"; - } - - else if (retourSolution == retourCode) { + } else if (retourSolution == retourCode) { result.innerHTML = "Bien joué"; - document.getElementById("fleche").style.display = "flex"; - } - else { + document.getElementById("next").style.display = "flex"; + } else { result.innerHTML = "Mauvaise réponse"; } -} \ No newline at end of file +} + +/** + * It gets all the elements with the class name "help" and sets their opacity to 1. + */ +function displayHelp() { + var help = document.getElementsByClassName("help"); + for (var i = 0; i < help.length; i++) { + help[i].style.opacity = 1; + } +} diff --git a/WEB/View/src/pages/Enigme.html b/WEB/View/src/pages/Enigme.html deleted file mode 100644 index 039e43db..00000000 --- a/WEB/View/src/pages/Enigme.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - Bootstrap Site - - - - - - - -
-
- home -
-
-
-

Palindrome

- - -
-
-
-
-
- -
-
-
- - - - - - - diff --git a/WEB/View/src/pages/Enigme/palindrome.html b/WEB/View/src/pages/Enigme/palindrome.html index df90daf1..02a5fc5f 100644 --- a/WEB/View/src/pages/Enigme/palindrome.html +++ b/WEB/View/src/pages/Enigme/palindrome.html @@ -5,7 +5,7 @@ Palindrome - +