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>
|
||||
<body>
|
||||
<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="infEye"><a class="endText" id="return" href='./menu.html'>Recommencer l'aventure</a></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