First version of Crypto_Seul
This commit is contained in:
parent
a05c31e770
commit
f1ac25a6c8
5 changed files with 192 additions and 1 deletions
131
CSS/crypto_seul.css
Normal file
131
CSS/crypto_seul.css
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#codeBlock{
|
||||||
|
display:flex;
|
||||||
|
margin-top:5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#codeTxt{
|
||||||
|
display:flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
0% {opacity :0}
|
||||||
|
100% {opacity:1}
|
||||||
|
}
|
||||||
|
|
||||||
|
#buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top:5vh;
|
||||||
|
opacity:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
outline: none;
|
||||||
|
border:0.2vw solid #b9b9b9;
|
||||||
|
border-radius: 4vw;
|
||||||
|
width:20vw;
|
||||||
|
padding: 1vw 1.2vw 1vw 1.2vw;
|
||||||
|
color: black;
|
||||||
|
font-family: 'Special Elite', cursive;
|
||||||
|
font-size: 1.5vw;
|
||||||
|
background-image: linear-gradient(to top, black -50%, #BF0909 80%);
|
||||||
|
cursor : pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
border: 0.2vw solid white;
|
||||||
|
box-shadow: 0 0 3vw #B0C4DE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
background-image: linear-gradient(to top, #BF0909 20%, black 150%);
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
36
HTML/crypto_seul.html
Normal file
36
HTML/crypto_seul.html
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!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/crypto_seul.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
|
||||||
|
<script defer type="text/javascript" src="../JAVASCRIPT/crypto_seul.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Le code secret</h1>
|
||||||
|
<nav><a href='./menu.html'>Retourner au menu</a></nav>
|
||||||
|
</header>
|
||||||
|
<main id="main">
|
||||||
|
<section id="content">
|
||||||
|
<article id="text">
|
||||||
|
<p id="p1">A vous de deviner le mot de passe !</p>
|
||||||
|
<div id="codeBlock">
|
||||||
|
<div id="codeTxt"></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<div id="buttons">
|
||||||
|
<button class="button">Valider</button>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="eyeBlock">
|
<div id="eyeBlock">
|
||||||
<div id="supEye"><p class="endText" id="loose">Vous avez perdu !</p></div>
|
<div id="supEye"><p class="endText" id="loose">Vous êtes allé(e) dormir<br/>vous laissez tomber l'aventure.</p></div>
|
||||||
<div id="eye"></div>
|
<div id="eye"></div>
|
||||||
<div id="infEye"><a class="endText" id="return" href='./menu.html'>Recommencer l'aventure</a></div>
|
<div id="infEye"><a class="endText" id="return" href='./menu.html'>Recommencer l'aventure</a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
BIN
Images/Logo.png
BIN
Images/Logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
24
JAVASCRIPT/crypto_seul.js
Normal file
24
JAVASCRIPT/crypto_seul.js
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
// select elements
|
||||||
|
let codeTxt = document.getElementById("codeTxt")
|
||||||
|
|
||||||
|
let mdp = "Le Mot de Passe"
|
||||||
|
|
||||||
|
// functions
|
||||||
|
function styleMdp() {
|
||||||
|
for (let i=0;i<mdp.length;i++){
|
||||||
|
if (mdp[i] === ' '){
|
||||||
|
var spaceCase = document.createElement("div")
|
||||||
|
spaceCase.style.cssText = "width:3vw;height:5vh;margin:0vw 0.5vw 0vw 0.5vw;";
|
||||||
|
codeTxt.appendChild(spaceCase)
|
||||||
|
} else {
|
||||||
|
var letterCase = document.createElement("input");
|
||||||
|
letterCase.style.cssText = "background-color:white;margin:0vw 0.5vw 0vw 0.5vw;width:3vw;height:5vh"
|
||||||
|
codeTxt.appendChild(letterCase)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styleMdp()
|
||||||
|
|
||||||
|
// listeners
|
||||||
Loading…
Reference in a new issue