From c5b720bf63d0a322b89989d47fb78167d8d2fb38 Mon Sep 17 00:00:00 2001 From: flifloo Date: Mon, 4 May 2020 12:35:27 +0200 Subject: [PATCH] English seance 4/5/2020 --- assets/css/main.css | 146 ++++++++++++++++++++++++++++++++++++++++++++ assets/js/main.js | 36 +++++++++++ index.html | 42 +++++++++++++ 3 files changed, 224 insertions(+) diff --git a/assets/css/main.css b/assets/css/main.css index e69de29..b92606f 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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; +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index e69de29..2cd1cdf 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -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"); + } +} diff --git a/index.html b/index.html index a3ced76..515eef5 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,48 @@ +
+

Do you really think you're safe on the web ?

+ + +
+
+

Results

+

+

Let's see what about your passwords ?

+
+
+

Do you really think your passwords are safe?

+ + +
+
+

Results

+

+ + +
+
+

To make your life easier, use a password manager !

+

Learn more

+
+ +
+

For more security, the 2AF should be used as much as possible

+

It's one of the best protection you can get !

+

Learn more

+
+ + +