diff --git a/build.sh b/build.sh index 7e13884..a0e810a 100755 --- a/build.sh +++ b/build.sh @@ -11,6 +11,8 @@ SIGNUPFILENAME="./web-assets/js/signup.js" perl -pi -e "s/\{\{DOMAIN\}\}/$DOMAIN/g" $SIGNUPFILENAME perl -pi -e "s/\{\{AUTH0DOMAIN\}\}/$AUTH0DOMAIN/g" $SIGNUPFILENAME +CHECKEMAIL="./web-assets/static-pages/check_email.html" +perl -pi -e "s/\{\{DOMAIN\}\}/$DOMAIN/g" $CHECKEMAIL mkdir dist cp -rv ./web-assets/css/* ./dist/ diff --git a/web-assets/auth0/css/custom.css b/web-assets/auth0/css/custom.css index 0f401a0..dfa6a8b 100644 --- a/web-assets/auth0/css/custom.css +++ b/web-assets/auth0/css/custom.css @@ -461,6 +461,12 @@ div.auth0-lock-error::before{ width: auto; margin: 0px 20px 10px 20px; } + div.auth0-lock-error-msg { + white-space:normal; + } + div.auth0-lock-error::before { + left: calc(100% + 5px) + } /* end: form */ /* terms */ diff --git a/web-assets/css/styles.css b/web-assets/css/styles.css index bd2a48b..4c16bb6 100644 --- a/web-assets/css/styles.css +++ b/web-assets/css/styles.css @@ -414,6 +414,160 @@ select::-ms-expand { } /** End: Confirmation Card **/ +/** Start: Sign Up Card **/ +.center-align-card.signup-card .page-wrapper { + margin-left: auto; + margin-right: auto; + padding: 0px; + text-align: center; + max-width: 1139px; +} + +.center-align-card.signup-card .page-content { + margin-top: 60px; + min-height: 820px; + height: clamp(820px, 100%, 820px); + border-radius: 10px 10px; + width: 1139px; + background-repeat: no-repeat; + background-position: top right; + background-image: url(./images/signup_bg.png); +} + +.center-align-card.signup-card .page-main { + padding: 0px 50px 40px 40px; + width: 100%; + max-width:495px; +} + +.center-align-card.signup-card .page-main header{ + background: transparent; + border-radius: 0px; + padding: 28px 0px 17px 0px; +} +.center-align-card.signup-card .page-main .page-title-heading{ + color: #2A2A2A; + font-family: Roboto, sans-serif; + font-weight: 500 ; + font-size: 28px; + line-height: 38px; + text-transform: capitalize; + padding-bottom: 46px; +} + + +.center-align-card.signup-card .page-content #signup-container { + color: white; + text-align: left; + position: absolute; + margin-left:495px; + +} + +.center-align-card.signup-card .page-content #signup-container .title{ + font-weight: 500; + font-family: 'Barlow Condensed', sans-serif; + font-size: 34px; + line-height: 38px; + padding: 81px 0px 20px 143px; +} + +.center-align-card.signup-card .page-content #signup-container .body{ + font-weight: normal; + font-family: 'Roboto'; + font-size: 18px; + line-height: 27px; + padding: 0px 88px 0px 143px; +} +.center-align-card.signup-card .page-content .input-field { + margin-bottom: 10px; +} +.center-align-card.signup-card .page-content .input-field select, .center-align-card.signup-card .page-content .input-field input{ + border: 1px solid #D4D4D4; + border-radius: 4px; + color: #2A2A2A; + font-family: Roboto; + font-size: 14px; +} +.center-align-card.signup-card .page-content .input-field select{ + background: none; +} + +.center-align-card.signup-card .page-content .input-field .icon-arrow g{ + fill: #AAAAAA; + opacity: 1; +} +.center-align-card.signup-card .page-content .input-field .icon-arrow { + transform: rotate(90deg); +} + +.center-align-card.signup-card .page-content .input-field .icon-arrow { + position: absolute; + top: 18px; + width: 12px; + height: 14px; + right: 14px; + pointer-events: none; +} + +.center-align-card.signup-card .page-content .input-field select:focus, +.center-align-card.signup-card .page-content .input-field input:focus, +.center-align-card.signup-card .page-content .input-field select:hover, +.center-align-card.signup-card .page-content .input-field input:hover { + box-shadow: none; +} +.center-align-card.signup-card .page-content .input-field label { + color: #AAAAAA; + font-family: Roboto; + font-size: 14px; + line-height: 22px; + width: 146px; + text-align: left; +} + +.center-align-card.signup-card .page-content button.continue-btn:not(:disabled):hover { + background-image: none; +} +.center-align-card.signup-card .page-content button.continue-btn:focus{ + outline: 0px; +} + +.center-align-card.signup-card .page-content button.continue-btn { + background-color: #137D60; + border-radius: 4px; + width: 100%; + max-width: 405px; + height: 48px; + color: #FFFFFF; + font-family: Roboto; + font-size: 17px; + line-height: 20px; + font-weight: normal; + text-transform: capitalize; +} +.center-align-card.signup-card .page-content .terms { + text-align: left; + padding-bottom: 25px; +} + +.center-align-card.signup-card .page-content .terms, +.center-align-card.signup-card .page-content .terms a{ + color: #37373C; + font-family: Roboto; + font-size: 13px; + line-height: 20px; +} +.center-align-card.signup-card .page-content .terms a, +.center-align-card.signup-card .page-content .terms a:visited, +.center-align-card.signup-card .page-content .terms a :active, +.center-align-card.signup-card .page-content .terms a:focus { + text-decoration: underline; + font-size: 13px; + line-height: 20px; + color: #0D61BF; +} +/** End: Sign Up Card **/ + /** Start : Input/select box - field area style **/ .input-field { position: relative; @@ -521,17 +675,6 @@ select::-ms-expand { width: 20px; } -/** Mobile - specific CSS **/ -@media (max-width: 767px) { - .footer { - padding-bottom: 10px; - } - .footer .copyright-text, - .footer .privacy-policy { - margin-bottom: 10px; - } -} - /** Desktop + tab - specific CSS **/ @media (min-width: 768px) { .center-align-card .page-content { @@ -543,4 +686,44 @@ select::-ms-expand { .confirmation-card.center-align-card .page-wrapper { max-width: 511px; } + + .center-align-card.signup-card .page-content { + width: 1139px; + min-height: 820px; + height: 820px; + } } + +@media (max-width: 1156px) { + .center-align-card.signup-card .page-content { + background-image: none; + width: 90%; + max-width: 495px; + min-height: auto; + height: auto; + } + .center-align-card.signup-card .page-content #signup-container { + display: none; + } +} + +/** Mobile - specific CSS **/ +@media (max-width: 767px) { + .center-align-card.signup-card .page-wrapper { + background-image: none; + width: 90%; + min-height: auto; + height: auto; + } + .center-align-card.signup-card .page-content #signup-container { + display: none; + } + + .footer { + padding-bottom: 10px; + } + .footer .copyright-text, + .footer .privacy-policy { + margin-bottom: 10px; + } +} \ No newline at end of file diff --git a/web-assets/images/logo_dark_small.png b/web-assets/images/logo_dark_small.png new file mode 100644 index 0000000..43cc7dd Binary files /dev/null and b/web-assets/images/logo_dark_small.png differ diff --git a/web-assets/images/signup_bg.png b/web-assets/images/signup_bg.png new file mode 100644 index 0000000..788ceba Binary files /dev/null and b/web-assets/images/signup_bg.png differ diff --git a/web-assets/js/signup.js b/web-assets/js/signup.js index a8620d1..079855b 100644 --- a/web-assets/js/signup.js +++ b/web-assets/js/signup.js @@ -12,6 +12,7 @@ var qs = (function (a) { return b; })(window.location.search.substr(1).split("&")); $(document).ready(function () { + window.history.forward(); $.each(countryObjs, function () { $("#country").append( $("").text(this.name).val(JSON.stringify(this)) @@ -20,14 +21,14 @@ $(document).ready(function () { //first name & last name div var firstname = qs['firstName']; if (firstname !== 'undefined') { - $("#firstName").val(firstname); + $("#firstName").val(firstname); $("#fn").hide(); - } + } var lastname = qs['lastName']; if (lastname !== 'undefined') { - $("#lastName").val(lastname); + $("#lastName").val(lastname); $("#ln").hide(); - } + } $("#continueBtn").click(function () { var handle = $("#handle").val(); var country = $("#country").val(); diff --git a/web-assets/static-pages/check_email.html b/web-assets/static-pages/check_email.html index 67f1bcb..59ab8a5 100644 --- a/web-assets/static-pages/check_email.html +++ b/web-assets/static-pages/check_email.html @@ -27,7 +27,7 @@ if (state) { document.querySelector("#resend").addEventListener("click", e => { e.preventDefault(); - window.location = 'https://auth.topcoder.com/continue?state=' + state + '&resend=1'; + window.location = 'https://auth.{{DOMAIN}}/continue?state=' + state + '&resend=1'; }); } else { document.querySelector("#resend-text").style.display = "none"; diff --git a/web-assets/static-pages/signup.html b/web-assets/static-pages/signup.html index 3330667..82bbbef 100644 --- a/web-assets/static-pages/signup.html +++ b/web-assets/static-pages/signup.html @@ -10,6 +10,7 @@ href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet" /> + - +
-
- - Topcoder Logo - -
+
+
ONE MORE STEP
+
Create your username - it's how you will be known in the community by members and customers.
+
+
+ + Topcoder Logo + +

- JOIN TOPCODER + Join Topcoder