Page reussite
This commit is contained in:
parent
d2fcff4480
commit
c2ae894a77
5 changed files with 151 additions and 7 deletions
|
|
@ -113,7 +113,7 @@ body {
|
||||||
color: black;
|
color: black;
|
||||||
font-family: 'Special Elite', cursive;
|
font-family: 'Special Elite', cursive;
|
||||||
font-size: 1.5vw;
|
font-size: 1.5vw;
|
||||||
background-image: linear-gradient(to top, black -50%, #057B26 80%);
|
|
||||||
cursor : pointer;
|
cursor : pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -125,10 +125,22 @@ body {
|
||||||
box-shadow: 0 0 3vw #B0C4DE;
|
box-shadow: 0 0 3vw #B0C4DE;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:active {
|
#reset:active {
|
||||||
|
background-image: linear-gradient(to top, #BF0909 20%, black 150%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#reset {
|
||||||
|
background-image: linear-gradient(to top, black -50%, #BF0909 80%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#validate:active {
|
||||||
background-image: linear-gradient(to top, #057B26 20%, black 150%);
|
background-image: linear-gradient(to top, #057B26 20%, black 150%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#validate {
|
||||||
|
background-image: linear-gradient(to top, black -50%, #057B26 80%);
|
||||||
|
}
|
||||||
|
|
||||||
footer{
|
footer{
|
||||||
height:15vh;
|
height:15vh;
|
||||||
display:flex;
|
display:flex;
|
||||||
|
|
|
||||||
90
CSS/reussite.css
Normal file
90
CSS/reussite.css
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
color:white;
|
||||||
|
font-family: 'Special Elite', cursive;
|
||||||
|
background-color: black;
|
||||||
|
height: 95vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
color: #BF0909;
|
||||||
|
font-family: 'Special Elite', cursive;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height:15vh;
|
||||||
|
z-index:0;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: min(4vw,7vh);
|
||||||
|
margin-bottom:0.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a {
|
||||||
|
font-size: min(1vw,1.7vh);
|
||||||
|
text-decoration: none;
|
||||||
|
color: #494949;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
display: flex;
|
||||||
|
height:65vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 50vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text {
|
||||||
|
margin-top:4vh;
|
||||||
|
font-family: 'Special Elite', cursive;
|
||||||
|
font-size: min(1.8vw,3.6vh);
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
cursor:default;
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#p1{
|
||||||
|
opacity:0;
|
||||||
|
margin:0.1vh 0vw 0.1vh 0vw;
|
||||||
|
animation: fade 2s forwards;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
0% {opacity :0}
|
||||||
|
100% {opacity:1}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer{
|
||||||
|
height:15vh;
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content:flex-end;
|
||||||
|
align-items: center;
|
||||||
|
font-size:1vw;
|
||||||
|
margin-top:2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#names{
|
||||||
|
margin : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rights{
|
||||||
|
margin-bottom:0;
|
||||||
|
}
|
||||||
|
|
@ -25,7 +25,8 @@
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<div id="buttons">
|
<div id="buttons">
|
||||||
<button class="button">Valider</button>
|
<button class="button" id="reset">Remettre à zéro</button>
|
||||||
|
<a class="button" id="validate">Valider</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
28
HTML/reussite.html
Normal file
28
HTML/reussite.html
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>INSAïde</title>
|
||||||
|
<link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
|
||||||
|
<link rel="stylesheet" href="../CSS/reussite.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Bravo !</h1>
|
||||||
|
<nav><a href='./menu.html'>Retourner au menu</a></nav>
|
||||||
|
</header>
|
||||||
|
<main id="main">
|
||||||
|
<section id="content">
|
||||||
|
<article id="text">
|
||||||
|
<p id="p1">Vous avez atteint la salle secrète</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<p id="names">Copyright © 2020 Florian EHR - Pierre FAVARY - Baptiste MARTY</p>
|
||||||
|
<p id="rights">Tous droits réservés </p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
// select elements
|
// select elements
|
||||||
let codeTxtL1 = document.getElementById("codeTxtL1")
|
let codeTxtL1 = document.getElementById("codeTxtL1")
|
||||||
let codeTxtL2 = document.getElementById("codeTxtL2")
|
let codeTxtL2 = document.getElementById("codeTxtL2")
|
||||||
let button = document.getElementById("buttons")
|
let buttons = document.getElementById("buttons")
|
||||||
|
|
||||||
let mdp = "Le petit chaperon rouge"
|
let mdp = "Le petit chaperon rouge"
|
||||||
let mdpletters = mdp.replace(/ /g,'');
|
let mdpletters = mdp.replace(/ /g,'').toUpperCase();
|
||||||
let letters = []
|
let letters = []
|
||||||
|
|
||||||
console.log(mdpletters);
|
console.log(mdpletters);
|
||||||
|
|
@ -13,6 +13,7 @@ console.log(mdpletters);
|
||||||
|
|
||||||
function fillCases(div){
|
function fillCases(div){
|
||||||
var letterCase = document.createElement("input");
|
var letterCase = document.createElement("input");
|
||||||
|
letterCase.setAttribute("maxlength",1)
|
||||||
letterCase.style.cssText = "background-color:white; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
|
letterCase.style.cssText = "background-color:white; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
|
||||||
div.appendChild(letterCase)
|
div.appendChild(letterCase)
|
||||||
letters.push(letterCase)
|
letters.push(letterCase)
|
||||||
|
|
@ -68,13 +69,24 @@ function changeSameLetters(event,index){
|
||||||
|
|
||||||
|
|
||||||
function verif(){
|
function verif(){
|
||||||
|
var AllOk = true
|
||||||
for (let i=0;i<letters.length;i++){
|
for (let i=0;i<letters.length;i++){
|
||||||
if (mdpletters[i] === letters[i].value){
|
if (mdpletters[i] === letters[i].value.toUpperCase()){
|
||||||
letters[i].style.cssText = "background-color:#057B26; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
|
letters[i].style.cssText = "background-color:#057B26; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
|
||||||
} else {
|
} else {
|
||||||
letters[i].style.cssText = "background-color:#BF0909; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
|
letters[i].style.cssText = "background-color:#BF0909; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
|
||||||
|
AllOk = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (AllOk){
|
||||||
|
buttons.children[1].setAttribute("href","reussite.html")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset(){
|
||||||
|
for (let i=0;i<letters.length;i++){
|
||||||
|
letters[i].value = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
styleMdp()
|
styleMdp()
|
||||||
|
|
@ -90,4 +102,5 @@ for (let i=0;i<letters.length;i++){
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
button.addEventListener("click",verif)
|
buttons.children[1].addEventListener("click",verif)
|
||||||
|
buttons.children[0].addEventListener("click",reset)
|
||||||
Loading…
Reference in a new issue