From 2b171ab4b6bb8a6b87b26ad868e108eed4d696d5 Mon Sep 17 00:00:00 2001 From: Tchi <86352901+LucasVbr@users.noreply.github.com> Date: Mon, 19 Jul 2021 23:21:33 +0200 Subject: [PATCH] Update --- index.html | 108 ++++++++++++++++++++++++++++++----------------- scripts/main.js | 7 +-- styles/style.css | 55 ++++++++++++++++-------- 3 files changed, 110 insertions(+), 60 deletions(-) diff --git a/index.html b/index.html index 629c38f..2b5200d 100644 --- a/index.html +++ b/index.html @@ -4,65 +4,95 @@ Générateur de MDP - + - +
-
- -
- Générateur de mot de passe -
- - -
- Paramètres : -
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
+ +
+ Générateur de mot de passe
+ +
+ + +
+ + + + + + + + + +
+ + + + + + + + + + +
diff --git a/scripts/main.js b/scripts/main.js index 4ca56f8..6d4bb84 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -2,20 +2,21 @@ function generatePassword(nbDigits, caps, numbers, specials) { var resultat = "" for (let i = 0; i < nbDigits ; i++) { - resultat += generateCharacter(caps, numbers, specials) + resultat += generateCharacter(true, caps, numbers, specials) } return resultat } -function generateCharacter(caps, numbers, specials) { +function generateCharacter(letters, caps, numbers, specials) { var LETTERS_TABLE = "abcdefghijklmnopqrstuvwxyz" var CAPS_TABLE = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" var NUMBERS_TABLE = "0123456789" var SPECIALS_TABLE = "!#$%&'()*+,-./:;=?@[]^_`{|}~"; - var resultat = LETTERS_TABLE + var resultat = "" + if (letters) resultat += LETTERS_TABLE if (caps) resultat += CAPS_TABLE if (numbers) resultat += NUMBERS_TABLE if (specials) resultat += SPECIALS_TABLE diff --git a/styles/style.css b/styles/style.css index e7eebfb..76e0aae 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,38 +1,57 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); + body { margin: 0; padding: 0; width: 100%; height: 100vh; + font-family: 'Open Sans', sans-serif; background-color: #2c3e50; color: #ecf0f1; } .container { - text-align: center; height: 100%; - display: grid; + padding: 2.5rem 10rem; } -.card { - width: 500px; - height: 700px; - - margin: auto; - padding: 25px; - - background-color: #34495e; - border-radius: 10px; +.resultat { + padding: 25px 0; } #password { - background-color: #2c3e50; - padding: 0 10px; - font-size: 2em; + + font-size: 2rem; border-radius: 10px; - font-family : consolas + font-family: consolas; + color: #2ecc71; } -fieldset div { - text-align: left; -} \ No newline at end of file +/* General Range */ +input[type="range"] { + -webkit-appearance: none; + margin: 18px 0; + width: 100%; + border-radius: 8px; +} +input[type="range"]:focus { + outline: none; +} + +/* Chrome Range */ +input[type="range"]::-webkit-slider-runnable-track { + height: 8px; + cursor: pointer; + background-color: #ecf0f1; + border-radius: 8px; +} +input[type="range"]::-webkit-slider-thumb { + height: 30px; + width: 30px; + border-radius: 50%; + background: #ffffff; + cursor: pointer; + -webkit-appearance: none; + margin-top: calc( (8px - 30px) / 2); +}