English seance 4/5/2020
This commit is contained in:
parent
8833e6ca1f
commit
c5b720bf63
3 changed files with 224 additions and 0 deletions
|
|
@ -0,0 +1,146 @@
|
|||
html{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
scroll-behavior: smooth;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.container{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
border-bottom: 0.2vw solid black;
|
||||
}
|
||||
|
||||
#main h1{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-size: 4vw;
|
||||
padding: 25vh 0;
|
||||
animation: fadeup 1s;
|
||||
}
|
||||
|
||||
.container h1{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-size: 4vw;
|
||||
padding: 15vh 0;
|
||||
animation: fadeup 1s;
|
||||
}
|
||||
|
||||
.container h2{
|
||||
text-align: center;
|
||||
animation: fade 2s;
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0%{opacity: 0}
|
||||
100%{opacity: 1}
|
||||
}
|
||||
|
||||
@keyframes fadeup {
|
||||
0%{opacity: 0;margin-left: 10vw;}
|
||||
100%{opacity: 1;margin-top: 0;}
|
||||
}
|
||||
|
||||
label{
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
padding: 5vh 0;
|
||||
animation: fadeup 2s;
|
||||
}
|
||||
|
||||
input{
|
||||
display: block;
|
||||
margin: auto;
|
||||
border-top: transparent;
|
||||
border-left: transparent;
|
||||
border-right: transparent;
|
||||
text-align: center;
|
||||
padding: 1vw;
|
||||
background-color: transparent;
|
||||
border-bottom: 0.2vw solid rgba(69, 69, 69, 0.87);
|
||||
color: black;
|
||||
width: 50%;
|
||||
animation: fadewidth 2s;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
-webkit-transition: box-shadow 0.5s;
|
||||
transition: box-shadow 0.5s;
|
||||
}
|
||||
|
||||
.error {
|
||||
-webkit-animation: shake 0.2s ease-in-out 0s 2;
|
||||
animation: shake 0.2s ease-in-out 0s 2;
|
||||
box-shadow: 0 0 0.5em red;
|
||||
}
|
||||
|
||||
input:hover{
|
||||
border-bottom-right-radius: 20px;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
input:focus{
|
||||
border-color: #057693;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
@keyframes fadewidth {
|
||||
0%{width: 20%}
|
||||
100%{width: 50%}
|
||||
}
|
||||
|
||||
@-webkit-keyframes shake {
|
||||
0% {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
25% {
|
||||
margin-left: 15vh;
|
||||
margin-right: auto;
|
||||
}
|
||||
75% {
|
||||
margin-left: auto;
|
||||
margin-right: 15vh;
|
||||
}
|
||||
100% {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
25% {
|
||||
margin-left: 15vh;
|
||||
margin-right: auto;
|
||||
}
|
||||
75% {
|
||||
margin-left: auto;
|
||||
margin-right: 15vh;
|
||||
}
|
||||
100% {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.hide{
|
||||
|
||||
}
|
||||
|
||||
h2#cookie_text{
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
const main = document.querySelector("#main");
|
||||
const resultMail = document.querySelector("#result_mail");
|
||||
const passwordTest = document.querySelector("#password_test");
|
||||
const resultPassword = document.querySelector("#result_password");
|
||||
const passwordManage = document.querySelector("#password_manage");
|
||||
const security2AF = document.querySelector("#security_2AF");
|
||||
const cookie = document.querySelector("#cookie");
|
||||
|
||||
|
||||
mailRegex = new RegExp("(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\\])");
|
||||
|
||||
|
||||
document.querySelectorAll("input").forEach((el) => {
|
||||
el.addEventListener("change", (e => {
|
||||
el.classList.remove("error");
|
||||
}));
|
||||
});
|
||||
|
||||
main.querySelector("input").addEventListener("keyup", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
mailValid();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function mailValid() {
|
||||
let input = main.querySelector("input");
|
||||
if (mailRegex.test(input.value)) {
|
||||
resultMail.classList.remove("hide");
|
||||
resultMail.scrollIntoView({
|
||||
"behavior": "smooth"
|
||||
});
|
||||
} else {
|
||||
input.classList.add("error");
|
||||
}
|
||||
}
|
||||
42
index.html
42
index.html
|
|
@ -6,6 +6,48 @@
|
|||
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="main">
|
||||
<h1>Do you really think you're safe on the web ?</h1>
|
||||
<label for="email">Let's begin by check if your email is safe ;)</label>
|
||||
<input type="email" id="email" name="email" placeholder="example : xyz@gmail.com">
|
||||
</div>
|
||||
<div class="container hide" id="result_mail">
|
||||
<h1>Results</h1>
|
||||
<h2></h2> <!-- Your email isn't safe ! OR Your email is safe ! -->
|
||||
<h2>Let's see what about your <a href="#password_test">passwords ?</a></h2>
|
||||
</div>
|
||||
<div class="container hide" id="password_test">
|
||||
<h1>Do you really think your passwords are safe?</h1>
|
||||
<label for="password">Let's see if your password is secure</label>
|
||||
<input type="password" id="password" name="password" placeholder="your password: MDPdrive2">
|
||||
</div>
|
||||
<div class="container hide" id="result_password">
|
||||
<h1>Results</h1>
|
||||
<h2></h2><!-- your password isn't safe ! | you password is safe -->
|
||||
<!-- use https://password.kaspersky.com/ -->
|
||||
<ul>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="container hide" id="password_manage">
|
||||
<h1>To make your life easier, use a password manager !</h1>
|
||||
<h2><a href="https://techcrunch.com/2018/12/25/cybersecurity-101-guide-password-manager/">Learn more</a></h2>
|
||||
</div>
|
||||
|
||||
<div class="container hide" id="security_2AF">
|
||||
<h1>For more security, the 2AF should be used as much as possible</h1>
|
||||
<h2>It's one of the best protection you can get !</h2>
|
||||
<h2><a href="https://fr.wikipedia.org/wiki/Double_authentification">Learn more</a></h2>
|
||||
</div>
|
||||
|
||||
<div class="container hide" id="cookie">
|
||||
<h1>Pay attention to the cookie on the sites!
|
||||
Don't accept them for nothing</h1>
|
||||
<h2 id="cookie_text">Cookie :</h2>
|
||||
<h2>Before : Formerly a sweet little cake, which was accepted with pleasure.</h2>
|
||||
<h2>Today: a small, salty computer file, which must be vehemently refused</h2>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Reference in a new issue