From 541461409e77048fb762c95381a1398d997d2baf Mon Sep 17 00:00:00 2001 From: illfriday Date: Mon, 18 Jan 2021 15:58:28 -0800 Subject: [PATCH 1/2] add css to signUp.ejs/ add signUp.css to layouts --- public/css/index.css | 1 + public/css/signUp.css | 238 +++++++++++++++++++++++++--------- public/js/signUp.js | 34 ++++- views/auth/logIn.ejs | 2 +- views/auth/signUp.ejs | 64 ++++----- views/layouts/user-layout.ejs | 2 +- workspace.code-workspace | 13 ++ 7 files changed, 254 insertions(+), 100 deletions(-) create mode 100644 workspace.code-workspace diff --git a/public/css/index.css b/public/css/index.css index e68b061..6650e89 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -3,6 +3,7 @@ @import 'global.css'; @import 'utilities.css'; @import 'carousel.css'; +@import 'signUp.css'; diff --git a/public/css/signUp.css b/public/css/signUp.css index 6d54ded..5fe41b5 100644 --- a/public/css/signUp.css +++ b/public/css/signUp.css @@ -1,53 +1,74 @@ body.signUp { /* background-image: url("/site2-sunspel/images/shop_background.jpg"); - background-attachment: fixed; */ - font-family: 'Lato', sans-serif; + background-attachment: fixed; */ + font-family: 'Darker Grotesque', sans-serif; +} + +main.signUp { + font-size: 12px; + line-height: 1em; + padding: 1em; + background-color: white; +} + +main.signUp div { + margin-bottom: 2em; } h1.signUp { text-align: center; - font-weight: bold; - font-size:x-large; - margin-bottom: 1.5em; + font-weight: 700; + font-size:xx-large; + margin-bottom: 1.25em; } h2.signUp { - text-align: center; - margin-bottom: 1.5em; + text-align: left; + font-weight: 600; + font-size:x-large; + margin-bottom: 1.25em; + margin-left: 20%; } -main.signUp { - font-size: 12px; - line-height: 1em; - padding: 1em; - background-color: white; +p.signUp{ + font-size:1.5em; + margin-bottom:2em; } a.signUp { color :black; + text-decoration: underline; +} + +a.signUp:hover { + font-weight:bolder; } form label.signUp.required:after{ color:red; content: " *"; } + #prefix { - width: 20%; + width: 15%; display: block; - padding: 1em ; - margin: 1em 40% 0 19%; - + padding: .75em ; + margin: 1em 45% 0 20%; + border: 1px solid black; } -#prefix:hover { - background-color: antiquewhite; +#prefix:focus { + /* border-style: double; + border: 1px solid black, 2px solid orange; */ + box-shadow: 0 0 0 2px orange, 0 0 0 3px black; + border: none; + outline: none !important; } .userChoice { text-align: center; font-size: 12px; margin-bottom: 4em; - } .userLogIn { @@ -56,11 +77,11 @@ form label.signUp.required:after{ align-items: center; } -.input_label { - font-size: 12px; - margin: 0 19%; +.inputLabel, .checkboxLabel, #interested { + font-size: 14px; + margin: 0 20%; text-align: center; - + font-weight: 500; } .textInput { @@ -70,62 +91,160 @@ form label.signUp.required:after{ padding: 1em; padding-right: 0.25em; border: 1px solid black; + height: 3em; } -.passwordMeter { - width: 100%; - display: block; - padding: 1em; - padding-right: 0.25em; - border: 2px solid black; - height: 2em; - background: white; +.textInput:focus{ + outline: 1px solid black !important; } -.textInput:hover { - background-color: antiquewhite; +.checkboxInput{ + /* display:inline; */ + position: relative; + margin-left:20%; + -webbkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* vertical-align: -2px; */ + width: 1em; + height: 1em; + border: 1px solid black; } -div { - margin-bottom: 2em; +.checkboxInput::before{ + content: "\2713"; + position: absolute; + font-size: 1.2em; + right: 0.1em; + visibility: hidden; + } +.checkboxInput:checked{ + background-color:transparent; + background-size: 30px; + background-position: center; + background-image: url(https://img.icons8.com/android/24/000000/checked-2.png); -input[type='radio']:after { +} + +.checkboxInput:focus{ + box-shadow: 0 0 0 2px orange, 0 0 0 3px black; + border: none; + outline: none !important; +} + +.checkboxLabel{ + margin: 0 20% 0 0; +} + +.dateInput{ + display:block; + margin: .75em 0 .75em 20%; +} + +.password{ + margin-bottom:0; + +} +.passwordMeter, #passwordWarning { + width: 60%; + display: block; + margin: 0 auto; + padding: 1em .75em 1em; + /* padding-right: 0.25em; */ + height: 3em; + background: #eaebed; + font-weight: 400; + font-size: 1.5em; +} + +#passwordWarning { + font-size: 1.5em; + color: red; + background: white; + line-height: 1em; + padding-left:0; + font-weight: 400; +} +.genderSelect{ + margin-left: 0; +} + +input[type='radio']{ + margin-left: 20%; + -webbkit-appearance: none; + -moz-appearance: none; + appearance: none; width: 15px; height: 15px; - border-radius: 15px; - top: -2px; - left: -1px; + border-radius: 50%; + box-sizing:border-box; position: relative; + /* background-color: #d1d3d1; + border: 2px solid #d1d3d1; */ + border: 1px solid #eaebed; + box-shadow: inset 0px 0px 0px 3px #fff, + inset 0px 0px 0px 30px #eaebed; +} + +/* input[type='radio'].signUp:after{ + -webbkit-appearance: none; + -moz-appearance: none; + appearance: none; background-color: #d1d3d1; content: ''; - display: inline-block; + width: 7px; + height: 7px; + padding: auto; + border-radius: 50%; + display: block; visibility: visible; - border: 2px solid white; -} + border: 2.5px solid white; +} */ -input[type='radio']:checked:after { +input[type='radio'].signUp:checked:after { + -webbkit-appearance: none; + -moz-appearance: none; + appearance: none; width: 15px; height: 15px; - border-radius: 15px; - top: -2px; - left: -1px; + border-radius: 50%; + box-sizing:border-box; + /* top: -2px; + left: -1px; */ position: relative; - background-color: black; + /* background-color: black; */ content: ''; - display: inline-block; + display: block; visibility: visible; - border: 2px solid white; + border:1px solid #eaebed; + box-shadow: inset 0px 0px 0px 3px #fff, + inset 0px 0px 0px 30px #3c3c3c; +} + +input[type='radio'].signUp:focus{ + box-shadow: 0 0 0 1px orange; + animation: box-shadow 3ms 1 ; + border: none; + outline: none !important; +} + +input[type='radio'].signUp:focus:not(:active){ + box-shadow: none; + border: none; + outline: none !important; } -#remember{ +#remember, #newsletter{ border-radius: 0%; width: 1.5em; height: 1.5em; vertical-align: middle; } - +#interested{ + text-align:left; +} .userInfo { border: none; @@ -133,14 +252,15 @@ input[type='radio']:checked:after { align-items: center; } -button { - height: 2em; - font-size: 2em; - width: 100%; - /* font-family: 'Lato', sans-serif; */ - font-weight: 700; +button.signUp { + min-height: 3em; + font-size: 1.25em; + line-height:2em; + padding: auto; + width: 60%; + font-weight: 500; color: white; background-color: black; - margin: 0 0 0 0.7em; - padding-right: 0.7em; + margin: 0.75em auto; + display:block; } \ No newline at end of file diff --git a/public/js/signUp.js b/public/js/signUp.js index b6fd762..09cc794 100644 --- a/public/js/signUp.js +++ b/public/js/signUp.js @@ -5,7 +5,9 @@ let input = document.getElementById("password").value; input = input.trim(); - if (input.length < 8) { + if (input.length == 0) { + document.getElementById("passwordMeter").innerHTML = "Password strength: No Password"; + } else if (input.length < 8) { // console.log("Minimum length of this field must be equal or greater than 8 symbols.Leading and trailing spaces will be ignored."); document.getElementById("passwordMeter").innerHTML = "Password strength: Weak"; document.getElementById("passwordWarning").innerHTML = "Minimum length of this field must be equal or greater than 8 symbols.Leading and trailing spaces will be ignored."; @@ -30,7 +32,33 @@ document.getElementById("passwordMeter").innerHTML = "Password strength: Weak"; document.getElementById("passwordWarning").style.visibility = "hidden"; } else { - document.getElementById("passwordWarning").innerHTML = "Minimum of different classes of characters in password is 3. Classes of characters: Lower Case, Upper Case, Digits, Special Characters." + document.getElementById("passwordWarning").innerHTML = "Minimum of different classes of characters in password is 3. Classes of characters: Lower Case, Upper Case, Digits, Special Characters."; } } - \ No newline at end of file + + // NOT WORKING YET CHECK REQUIRED FIELDS ON SUBMIT + // function isRequired(){ + // let input = document.getElementsByClassName("required").value; + + // if (input.length == 0) { + // document.getElementsByClassName("requiredWarning").innerHTML = "This is a required field."; + // } + // } +// const input = document.getElementsByClassName("required"); +// const inputError = document.getElementsByClassName("requiredWarning") + +// function isRequired(){ +// // document.getElementsById('submit').addEventListener('submit', function (event){ +// if(!input.validity.valid) { +// showError(); +// event.preventDefault(); +// } +// } +// // }); +// // } + +// function showError() { +// if(input.validity.valueMissing){ +// inputError.textContent = "This is a required field."; +// } +// } diff --git a/views/auth/logIn.ejs b/views/auth/logIn.ejs index 6291704..b11eb5a 100644 --- a/views/auth/logIn.ejs +++ b/views/auth/logIn.ejs @@ -6,7 +6,7 @@ Log in or sign up - +
diff --git a/views/auth/signUp.ejs b/views/auth/signUp.ejs index 7b2e3a0..4f52a5c 100644 --- a/views/auth/signUp.ejs +++ b/views/auth/signUp.ejs @@ -6,11 +6,11 @@

REGISTER:

-

Register a new account or

+
- +
- - -
+ + + + +
- +
- - + +
- - + +
-

INTERESTED IN:

-

-

-

-

+

INTERESTED IN

+

+

+

+

-
+
-

--SIGN-IN INFORMATION--

+
- +
-<<<<<<< HEAD - - -======= - - -
- -
-

-
-
- ->>>>>>> master + + + +
- +
- - + +
- +
diff --git a/views/layouts/user-layout.ejs b/views/layouts/user-layout.ejs index 302c2e0..a38bbd1 100644 --- a/views/layouts/user-layout.ejs +++ b/views/layouts/user-layout.ejs @@ -11,7 +11,7 @@ Sunspel Clone - + diff --git a/workspace.code-workspace b/workspace.code-workspace new file mode 100644 index 0000000..20c09e9 --- /dev/null +++ b/workspace.code-workspace @@ -0,0 +1,13 @@ +{ + "folders": [ + { + "path": "." + }, + { + "path": "../../../../NewWebDev" + } + ], + "settings": { + "liveServer.settings.multiRootWorkspaceName": "NewWebDev" + } +} \ No newline at end of file From f7d675873f942e0ddd6a18251ddce33bcd6b0b2f Mon Sep 17 00:00:00 2001 From: illfriday Date: Mon, 18 Jan 2021 16:23:02 -0800 Subject: [PATCH 2/2] remove unnecsessary google font link --- views/layouts/user-layout.ejs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/views/layouts/user-layout.ejs b/views/layouts/user-layout.ejs index a38bbd1..eaa4f48 100644 --- a/views/layouts/user-layout.ejs +++ b/views/layouts/user-layout.ejs @@ -12,8 +12,7 @@ Sunspel Clone - - +