nathan.boileau
/
Scripted
0
3
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases Wiki Activity

Finition du style des énigmes + Début premier test de foxy
continuous-integration/drone/push Build is passing Details

Browse Source
ServeurDeTest
nathan boileau 2 years ago
parent 895f550c2e
commit 49aead805d
6 changed files with 109 additions and 598 deletions
Show Stats Download Patch File Download Diff File

11
WEB/View/src/CSS/Eni.css
Unescape View File

@ -61,13 +61,18 @@ h1, h2, h3, h4, h5, h6 {
}
#console {
font-family: DejaVu Sans Mono, monospace;
font-size: 0.8rem;
letter-spacing: 1px;
background-color: #222831;
color: #fff;
border: solid 1px #414141;
border-radius: 5px;
resize: none;
color: #fff;
border: 1px solid #44fff6;
box-shadow: 0 0 1px #fff,
0 0 1px #fff,
0 0 5px #44fff6,
0 0 5px #44fff6,
inset 0 0 5px #44fff6;
}
/***** End Editor + Console CSS *****/

354
WEB/View/src/CSS/Enigme.css
Unescape View File

@ -1,354 +0,0 @@
/*Fonts CSS */
@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");
/*Default CSS*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
line-height: normal;
}
p,
a,
li,
button,
ul {
margin: 0;
padding: 0;
line-height: normal;
text-decoration: none !important;
}
a:hover {
text-decoration: none !important;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
}
@media (min-width: 1700px) {
main .buttons {
max-width: 100%;
padding: 0 150px;
}
}
/* Main CSS */
html {
scroll-behavior: smooth;
height: 100vh;
background-position: center center;
background-color: #464646;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
body {
display: flex;
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%, 0.2);
--global-background: hsl(220, 25%, 10%);
--background: linear-gradient(to right, #040a29, #0e1538);
--shadow-1: #0b1b78;
--shadow-2: #173c45;
}
.enigme {
width: 25%;
height: fit-content;
color: aliceblue;
background: rgba(0, 0, 0, 0.6);
box-sizing: border-box;
border-radius: 10px;
padding: 10px;
margin-left: 10px;
margin-right: 20px;
letter-spacing: 1.2px;
}
.titre_pre {
display: flex;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 20px;
padding-left: 10px;
}
.sign {
margin-left: 5%;
}
/* 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;
}
/* Console CSS*/
.compiler_class {
width: 30%;
}
#console {
font-size: 0.8rem;
opacity: 0.85;
letter-spacing: 1px;
background-color: #040a29;
color: #fff;
border: solid 1px #414141;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
max-width: 95%;
max-height: 85%;
line-height: 1.5;
border-radius: 5px;
resize: none;
}
/* Ace CSS*/
.ace {
width: 45%;
max-height: 100%;
margin-bottom: 0;
margin-right: 10px;
}
/* Text Css */
.enigme h1 {
font-size: 1.5rem !important;
font-weight: 700;
text-align: center;
}
.enigme .sign {
display: contents;
}
.enigme h2 {
font-size: 1.5rem;
font-weight: 600;
}
.enigme p {
font-size: 1rem;
font-weight: 400;
margin-right: 10px;
}
#result {
display: flex;
align-items: center;
margin: 0 30px;
font-size: 1.5rem;
}
/* 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: 0.8rem;
color: aliceblue;
background: var(--background);
box-shadow: var(--m-shadow, 0.4rem 0.4rem 8.2rem 0.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);
}

226
WEB/View/src/CSS/Enigmev2.css
Unescape View File

@ -1,226 +0,0 @@
/*Fonts CSS */
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
/*Default CSS*/
/*Ace CSS */
.ace{
width: 100%;
height: 100%;
}
/* 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);
}
/* Console CSS*/
#console{
font-size: .8rem;
opacity: 0.85;
letter-spacing: 1px;
background-color: #040a29;
color: #fff;
border: solid 1px #414141;
max-width: 95%;
max-height: 85%;
line-height: 1.5;
resize: none;
}

5
WEB/View/src/JS/base.js
Unescape View File

@ -110,12 +110,13 @@ function check() {
}
}
/**
* It gets all the elements with the class name "help" and sets their opacity to 1.
* It gets all the elements with the class name "help" and sets their display property to "flex".
*/
function displayHelp() {
var help = document.getElementsByClassName("help");
for (var i = 0; i < help.length; i++) {
help[i].style.opacity = 1;
help[i].style.display = "flex";
}
}

48
WEB/View/src/pages/FirstTest.html
Unescape View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>First Test</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="../CSS/Presentation.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container-fluid mx-0">
<div class="nav-item nav-link">
<a class="navbar-brand" href="index.php?action=goToHome">Home</a>
</div>
<div class="mx-auto">
<h5
class="m-1 text-uppercase"
style="color: #fff; font-weight: bold; font-size: 22px"
>
Northgan
</h5>
</div>
<div class="nav-link">
<a class="navbar-brand" href="index.php?action=goToEnigme">Next</a>
</div>
</div>
</nav>
</body>
</html>

63
WEB/View/src/pages/Palindrome.html
Unescape View File

@ -28,8 +28,9 @@
</head>
<body>
<div class="container-fluid px-5">
<!-- First Row -->
<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"
@ -58,9 +59,15 @@
</div>
</div>
</div>
<!-- End First Row -->
<!-- Second Row -->
<div class="row">
<div class="col-3 rounded p-3" style="background-color: #222831">
<!-- First Column -->
<div
class="col-3 rounded p-3"
style="background-color: #222831; min-height: 80vh; height: auto"
>
<h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
Palindrome
</h2>
@ -77,26 +84,30 @@
<p><b>estPalindrome(12321)</b> renvoie <b>True</b></p>
<h3
class="text-left pb-3 pt-5 help"
style="color: #44fff6; opacity: 0"
style="color: #44fff6; display: none"
>
Aide
</h3>
<p style="opacity: 0" class="help">
<p style="display: none" class="help">
En python l’instruction [::-1] permet d’inverse une chaine de
caractère. <br /><br />print("ae"[::-1]) -> ea.
</p>
</div>
<!-- End First Column -->
<!-- Second Column -->
<div class="col-5 pr-0">
<div class="ace rounded" id="editor"></div>
</div>
<!-- End Second Column -->
<!-- Third Column -->
<div class="col-4">
<textarea
id="console"
readonly
style="width: 100%; height: 80%"
class="p-2"
style="width: 100%; min-height: 65vh; height: auto"
class="p-3 rounded"
></textarea>
<div class="row pt-5 text-center" style="cursor: pointer">
@ -106,36 +117,62 @@
</a>
</div>
<div class="col-6">
<button onclick="submit()" class="btn" data-toggle="modal" data-target="#modal">
<button
onclick="submit()"
class="btn"
data-toggle="modal"
data-target="#modal"
>
<span>Submit</span>
</button>
</div>
</div>
</div>
<!-- End Third Column -->
</div>
<!-- End Second Row -->
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<!-- Modal -->
<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">
<h2
class="modal-title"
id="exampleModalLongTitle"
style="color: black"
>
Results
</h2>
<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>
<h5 id="result" style="color: black"></h5>
</div>
<div class="modal-footer">
<a href="#" class="btn" style="display : none;" id="next">
<a href="#" class="btn" style="display: none" id="next">
<span>NEXT</span>
</a>
</div>
</div>
</div>
</div>
<!-- End Modal -->
<script
src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"

Write Preview
Loading…
Cancel
Save