bamarty/Projet_Prog_Web
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Page reussite

Browse source
This commit is contained in:
Baptiste Marty 2020-12-15 18:04:04 +01:00
parent d2fcff4480
commit c2ae894a77
5 changed files with 151 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
CSS/crypto_seul.css
View file

@ -113,7 +113,7 @@ body {
color: black;
font-family: 'Special Elite', cursive;
font-size: 1.5vw;
background-image: linear-gradient(to top, black -50%, #057B26 80%);
cursor : pointer;
display: flex;
justify-content: center;
@ -125,10 +125,22 @@ body {
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%);
}
#validate {
background-image: linear-gradient(to top, black -50%, #057B26 80%);
}
footer{
height:15vh;
display:flex;

90
CSS/reussite.css Normal file
View 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;
}

3
HTML/crypto_seul.html
View file

@ -25,7 +25,8 @@
</div>
</article>
<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>
</section>
</main>

28
HTML/reussite.html Normal file
View 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>

21
JAVASCRIPT/crypto_seul.js
View file

@ -1,10 +1,10 @@
// select elements
let codeTxtL1 = document.getElementById("codeTxtL1")
let codeTxtL2 = document.getElementById("codeTxtL2")
let button = document.getElementById("buttons")
let buttons = document.getElementById("buttons")
let mdp = "Le petit chaperon rouge"
let mdpletters = mdp.replace(/ /g,'');
let mdpletters = mdp.replace(/ /g,'').toUpperCase();
let letters = []
console.log(mdpletters);
@ -13,6 +13,7 @@ console.log(mdpletters);
function fillCases(div){
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;"
div.appendChild(letterCase)
letters.push(letterCase)
@ -68,13 +69,24 @@ function changeSameLetters(event,index){
function verif(){
var AllOk = true
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;"
} 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;"
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()
@ -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)