Palindrome style

ServeurDeTest
nathan boileau 2 years ago
parent 729363e7fe
commit 0f303b8389

@ -9,7 +9,7 @@
body { body {
min-height: 100vh; min-height: 100vh;
font-family: "Equinox", sans-serif; font-family: Verdana, Arial, Helvetica, sans-serif;
color: white; color: white;
scroll-behavior: smooth; scroll-behavior: smooth;
height: 100vh; height: 100vh;
@ -17,7 +17,8 @@ body {
background-attachment: fixed; background-attachment: fixed;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-color: #222831; /* background-image: url("../../assets/img/Background5.jpg"); */
background-color: #050E15;
} }
p, p,
@ -29,20 +30,94 @@ ul {
padding: 0; padding: 0;
line-height: normal; line-height: normal;
text-decoration: none !important; 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 { #editor {
width: 100%; width: 100%;
min-height: 80vh; min-height: 80vh;
height: 100%; height: auto;
} }
#console { #console {
font-size: 0.8rem; font-size: 0.8rem;
letter-spacing: 1px; letter-spacing: 1px;
background-color: #050e15; background-color: #222831;
color: #fff; color: #fff;
border: solid 1px #414141; border: solid 1px #414141;
border-radius: 5px; border-radius: 5px;
resize: none; 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;
}

@ -18,6 +18,6 @@ const fox = document.querySelector(".moving-fox");
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
const scrollValue = window.scrollY - 700; const scrollValue = window.scrollY - 700;
fox.style.top = `${scrollValue / 1.3}px`; fox.style.top = `${scrollValue / 1}px`;
fox.style.opacity = `${window.scrollY / 700}`; fox.style.opacity = `${window.scrollY / 700}`;
}); });

@ -6,14 +6,14 @@ function run() {
terminal.innerHTML += content; terminal.innerHTML += content;
terminal.scrollTop = terminal.scrollHeight; terminal.scrollTop = terminal.scrollHeight;
}, },
flush() {} flush() {},
}, },
stderr: { stderr: {
write(content) { write(content) {
terminal.innerHTML += content; terminal.innerHTML += content;
terminal.scrollTop = terminal.scrollHeight; terminal.scrollTop = terminal.scrollHeight;
}, },
flush() {} flush() {},
}, },
stdin: { stdin: {
async readline() { async readline() {
@ -22,8 +22,8 @@ function run() {
var userInput = prompt(); var userInput = prompt();
return userInput; return userInput;
}, },
flush() {} flush() {},
} },
}); });
var code = editor.getValue(); var code = editor.getValue();
runner.runCode(code); runner.runCode(code);
@ -33,13 +33,12 @@ function run() {
} }
function run_init() { function run_init() {
if (document.getElementById("console") != '') { if (document.getElementById("console") != "") {
document.getElementById("console").innerHTML = ''; document.getElementById("console").innerHTML = "";
} }
run(); run();
} }
var editor = ace.edit("editor"); var editor = ace.edit("editor");
editor.container.style.opacity = 0.85; editor.container.style.opacity = 0.85;
editor.setTheme("ace/theme/vibrant_ink"); editor.setTheme("ace/theme/vibrant_ink");
@ -58,7 +57,7 @@ editor.setOptions({
function exec(code, id) { function exec(code, id) {
const terminal = document.getElementById("console"); const terminal = document.getElementById("console");
terminal.innerHTML = ''; terminal.innerHTML = "";
const runner = new BrythonRunner({ const runner = new BrythonRunner({
stdout: { stdout: {
write(content) { write(content) {
@ -69,7 +68,7 @@ function exec(code, id) {
retourSolution = content; retourSolution = content;
} }
}, },
flush() {} flush() {},
}, },
stderr: { stderr: {
write(content) { write(content) {
@ -79,7 +78,7 @@ function exec(code, id) {
terminal.innerHTML += content; terminal.innerHTML += content;
terminal.scrollTop = terminal.scrollHeight; terminal.scrollTop = terminal.scrollHeight;
}, },
flush() {} flush() {},
}, },
stdin: { stdin: {
async readline() { async readline() {
@ -88,27 +87,35 @@ function exec(code, id) {
var userInput = prompt(); var userInput = prompt();
return userInput; return userInput;
}, },
flush() {} flush() {},
} },
}); });
runner.runCode(code) runner.runCode(code);
setTimeout(() => { setTimeout(() => {
runner.stopRunning(); runner.stopRunning();
}, 10 * 1000); }, 10 * 1000);
} }
//~ Function that check if the code in the editor as the same result as the solution. /**
* It checks if the code in the editor as the same result as the solution.
*/
function check() { function check() {
if (retourSolution == "ERROR") { if (retourSolution == "ERROR") {
result.innerHTML = "Il semblerait qu'il y a une erreur dans ton code :/"; 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é"; result.innerHTML = "Bien joué";
document.getElementById("fleche").style.display = "flex"; document.getElementById("next").style.display = "flex";
} } else {
else {
result.innerHTML = "Mauvaise réponse"; result.innerHTML = "Mauvaise réponse";
} }
} }
/**
* 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;
}
}

@ -1,68 +0,0 @@
<!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"
/>
<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>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link rel="stylesheet" href="../CSS/Eni.css" />
</head>
<body>
<div class="container">
<div class="row py-4">
<a
class="material-icons"
id="home"
href="index.php?action=goToHome"
style="font-size: 36px; color: white"
>home</a
>
</div>
<div class="row py-3">
<div class="col-3 rounded" style="background-color: #050e15;">
<h2 class="text-center py-2">Palindrome</h2>
</div>
<div class="col-5">
<div class="ace rounded" id="editor"></div>
</div>
<div class="col-4">
<textarea id='console' readonly style="width: 100%; height:100%"></textarea>
</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>

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Palindrome</title> <title>Palindrome</title>
<link rel="stylesheet" href="./View/src/CSS/Enigme.css"/> <link rel="stylesheet" href="../../CSS/Enigme.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style> <style>
html{ html{
@ -87,7 +87,7 @@ print(estPalindrome("abba"))</div>
<script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <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="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="./View/src/JS/base.js"></script> <script src="../../JS/base.js"></script>
<script src="./View/src/JS/palindrome.js"></script> <script src="../../JS/palindrome.js"></script>
</body> </body>
</html> </html>

@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Palindrome</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous"
/>
<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>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link rel="stylesheet" href="/WEB/View/src/CSS/Eni.css" />
</head>
<body>
<div class="container-fluid px-5">
<div class="row py-4">
<!-- style="background-color: #050E15" -->
<div class="col-9 d-flex align-items-center px-0">
<a
class="material-icons pl-0"
id="home"
href="index.php?action=goToHome"
style="font-size: 40px; color: white"
>home</a
>
</div>
<div class="col-3 d-flex align-items-center">
<div class="col-10 text-right px-3">
<p style="font-size: 14px"><b>Besoin d'aide ?</b></p>
</div>
<div class="col-2 text-right">
<button
style="background-color: transparent; border: none"
onclick="displayHelp()"
>
<img
src="../../assets/img/Foxy.png"
alt="Logo"
class="rounded-circle moving-fox"
style="border: 1px solid #44fff6; width: 60px; height: 60px"
/>
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-3 rounded p-3" style="background-color: #222831">
<h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
Palindrome
</h2>
<p>
Écrire une fonction <b>estPalindrome</b> qui prend en argument un
entier et qui renvoie True si cest un palindrome et False sinon.
</p>
<h3 class="text-left pb-3 pt-5" style="color: #44fff6">Rappel</h3>
<p>
Un palindrome est un nombre qui reste le même si on le lit de gauche
à droite ou de droite à gauche.
</p>
<h3 class="text-left pb-3 pt-5" style="color: #44fff6">Exemple</h3>
<p><b>estPalindrome(12321)</b> renvoie <b>True</b></p>
<h3
class="text-left pb-3 pt-5 help"
style="color: #44fff6; opacity: 0"
>
Aide
</h3>
<p style="opacity: 0" class="help">
En python linstruction [::-1] permet dinverse une chaine de
caractère. <br /><br />print("ae"[::-1]) -> ea.
</p>
</div>
<div class="col-5 pr-0">
<div class="ace rounded" id="editor"></div>
</div>
<div class="col-4">
<textarea
id="console"
readonly
style="width: 100%; height: 80%"
class="p-2"
></textarea>
<div class="row pt-5 text-center" style="cursor: pointer">
<div class="col-6">
<a onclick="run_init()" class="btn">
<span>Run</span>
</a>
</div>
<div class="col-6">
<button onclick="submit()" class="btn" data-toggle="modal" data-target="#modal">
<span>Submit</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle" style="color: black;">Results</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h2 id="result" style="color: black;"></h2>
</div>
<div class="modal-footer">
<a href="#" class="btn" style="display : none;" id="next">
<span>NEXT</span>
</a>
</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>

@ -10,7 +10,7 @@
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous" crossorigin="anonymous"
/> />
<link rel="stylesheet" href="./View/src/CSS/Presentation.css" /> <link rel="stylesheet" href="../CSS/Presentation.css" />
<script <script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
@ -21,7 +21,7 @@
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
<script defer src="./View/src/JS/Presentation.js"></script> <script defer src="../JS/Presentation.js"></script>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top"> <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
@ -43,7 +43,7 @@
</div> </div>
</nav> </nav>
<img src="./View/assets/img/BGPres.png" class="img-fluid" /> <img src="../../assets/img/BGPres.png" class="img-fluid" />
<div class="container pt-5"> <div class="container pt-5">
<div class="col-12"> <div class="col-12">
@ -81,7 +81,7 @@
<div class="col-3" id="fox"> <div class="col-3" id="fox">
<img <img
src="./View/assets/img/Foxy.png" src="../../assets/img/Foxy.png"
alt="Logo" alt="Logo"
class="img-fluid rounded-circle moving-fox" class="img-fluid rounded-circle moving-fox"
style="border: 2px solid #44fff6" style="border: 2px solid #44fff6"

Loading…
Cancel
Save