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

Modal Enigme

Browse Source
ServeurDeTest
nathan boileau 3 years ago
parent 0f50c6bb43
commit a9a95383f2
3 changed files with 151 additions and 38 deletions
Show Stats Download Patch File Download Diff File

1
WEB/src/CSS/Home.css
Unescape View File

@ -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');

144
WEB/src/CSS/enigme.css
Unescape View File

@ -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);
}

44
WEB/src/pages/Enigme/palindrome.html
Unescape View File

@ -9,9 +9,7 @@
<link rel="stylesheet" href="../../CSS/Home.css">
</head>
<body>
<div>
</div>
<div class="enigme">
<div class="sign">
<h1>
@ -35,14 +33,11 @@
<p>En python l’instruction [::-1] permet d’inverse une chaine de caractère. Par exemple print("ae"[::-1]) affiche : ea.</p>
</div>
<h1 id="result" class="hidden"></h1>
<!-- <button onclick="run_init()">run</button>
<button onclick="submit()">submit</button>
<button onclick="aide()" id="buttonAide">Aide</button>
<button onclick="rappel()" id="buttonRappel">Rappel</button> -->
<p id="textAide"></p>
<p id="textRappel"></p>
<!-- <button onclick="aide()" id="buttonAide">Aide</button>
<button onclick="rappel()" id="buttonRappel">Rappel</button>
<p id="textAide">Hello</p>
<p id="textRappel"></p> -->
<div class='ace' id='editor'>def estPalindrome(var):
if(var == var[::-1]):
return True
@ -54,25 +49,24 @@ print(estPalindrome("abba"))</div>
<textarea id='console' readonly rows="30" cols="100"></textarea>
<div class="buttons">
<div>
<button onclick="run_init()" class="btn">
<span>Run</span>
</button>
<button onclick="submit()" class="btn">
<span>Submit</span>
</button>
<a onclick="run_init()" class="btn">
<span class="noAnimation">Run</span>
</a>
<a href="#m1-o" onclick="submit()" class="btn">
<span class="noAnimation">Submit</span>
</a>
</div>
</div>
</div>
<div class="modal-container" id="m1-o" style="--m-background: transparent;">
<div class="modal">
<h1 id="result" class="hidden"></h1>
<a href="#m1-c" class="link-2"></a>
</div>
</div>
<script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

Write Preview
Loading…
Cancel
Save