|
<style> label.checkbox { display: flex; align-items: center; } input#checkbox { margin-right: 15px; cursor: pointer; } #content-container2 p.title { margin-bottom: 20px; font-family: Arimo; width: 60%; font-size: 22px; line-height: 1.36; text-align: left; color: #ffffff; } .resources-card-sub-description { font-family: Arimo; font-size: 16px; color: white; } .featureCards { display: flex; justify-content: space-around; flex-grow: 1; } .perkCards { display: flex; justify-content: space-around; flex-grow: 1; transform: translate3d(600px, 0, 0); } #content-container4 p.title { font-family: Arimo; font-size: 32px; line-height: 1.36; text-align: left; color: #ffffff; width: 60%; } .carousel-arrow { width: 47px; height: 47px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); background-color: #ffffff; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; color: #0698f0; align-self: center; } a:hover { color: unset !important; text-decoration: unset !important; } .form-container .form input { font-family: Arimo; font-size: 16px; color: black; padding: 0px 20px; } .form-container .form input:focus { outline: none; } #content-container3 .card { width: 150px; background: white; margin-right: 25px; margin-top: auto; margin-bottom: auto; } #content-container3 .card .container .title { font-size: 1.8vw; font-family: 'Arimo'; font-weight: bold; line-height: 0.52; letter-spacing: normal; color: #0698f0; } div#perks-container { display: flex; padding: 20px; justify-content: space-around; background-color: white; overflow: hidden } #custom-footer{ display:none !important; } #rw_wrapper #main-content.wiki-content{ padding-bottom: 0px; } .sign-up-page{ background: rgb(2,50,79); background: linear-gradient(91deg, rgba(2,50,79,1) 3%, rgba(2,99,158,1) 100%); padding: 60px 0px; } .sign-up-page .content-container{ margin: auto; margin-top: 50px; padding-bottom: 0px; width: 90%; } #content-container3 .title { font-family: Arimo; font-size: 21px; font-weight: bold; line-height: 2.33; color: #ffffff; padding-top: 20px; margin-bottom: 20px; } #content-container1{ display: flex; width: 90%; margin: 0 auto; } #content-container1 .content{ display: flex; align-items: flex-start; flex-direction: column; width: 65%; } #content-container1 img{ width: 20vw; } #content-container1 .title span.bold { font-weight: bold; } #content-container1 .title{ width: 631px; margin: 7px 0 0; font-family: Arimo; font-size: 32px; font-stretch: normal; font-style: normal; line-height: 1.36; letter-spacing: normal; text-align: left; color: #ffffff; } span.special{ color: #0698f0; } #content-container2{ width: 90%; height: auto; } #content-container2 .content{ padding: 40px 0px; } .resources-card { display: flex; margin-bottom: 25px; } .resources-card img { width: 35px; } .resources-card-title { font-family: Arimo; font-size: 21px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.38; letter-spacing: normal; color: #0698f0; } .resources-card-left { background: #f3f9fc; width: 45px; border-radius: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .resources-card-right { padding-left: 20px; } .resources-card-description { font-family: Arimo; font-size: 21px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.38; letter-spacing: normal; color: white; }; #content-container3{ width: 90%; height:auto; box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.2); background-color: #02324f; } .testimonial-container { display: flex; flex-direction: column; padding: 70px 50px; width: 50%; } .testimonial-container .heading p { font-family: Arimo; font-size: 25px; font-weight: bold; line-height: 0.87; letter-spacing: 0.32px; color: #0698f0; margin-bottom: 30px; } .testimonial-container .left { display: flex; flex-direction: column; width: auto; align-items: center; } .testimonial-container .body { display: flex; color: white; } .testimonial-container .body .left img { border-radius: 50%; width: 150px } .testimonial-container .right { display: flex; padding-left: 40px; font-family: Arimo; font-size: 25px; font-weight: bold; line-height: 1.59; color: #ffffff; } .testimonial-container .left .rating { color: #0698f0; margin-top: 20px; } .testimonial-container .body .left .name { font-weight: bold; color: #0698f0; font-family: Arimo; font-size: 15px; line-height: 1.4; letter-spacing: 0.32px; text-align: right; } .testimonial-container .body .left .description { font-weight: bold; color: white; font-family: Arimo; font-size: 15px; line-height: 1.4; letter-spacing: 0.32px; text-align: center; } .form-container .header .existing-account span a { color: #0698f0; } .form-container{ width: 400px; display: flex; flex-direction: column; padding: 40px 20px; box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.12); background-color: #ffffff; height: auto; justify-content: space-around; } .form-container .header{ margin-bottom: 50px; } .form-container .header .heading{ font-family: Arimo; font-size: 32px; font-weight: bold; color: #000000; } .form-container .header .existing-account{ font-family: Arimo; font-size: 14px; color: #0698f0; text-decoration: underline; } .form-container .header .existing-account span{ font-weight: bold; } .form-container .form .input-label{ font-family: Arimo; font-size: 14px; font-weight: bold; color: #000000; } .form-container .form input{ width: 90%; height: 49px; margin-bottom: 20px; margin-top: 10px; box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.12); background-color: #ffffff; border: unset; } .form-container { position: fixed; right: 4%; z-index: 1; top: 170px; } .form-container .footer{ display: flex; width: 90%; justify-content: flex-end; } .form-container .footer button{ width: 110px; height: 40px; margin-top: 20px; background-color: #0698f0; border: unset; font-family: Arimo; font-size: 16px; font-weight: bold; color: #ffffff; cursor: pointer; outline: none; } .err-msg{ pointer-events: none; color: red; margin-top: 2px; } #signup-spinner{ display: none; margin-right: 10px; } /* ================================================================= MOBILE STYLING ================================================================= */ @media only screen and (max-width: 480px) and (min-width: 320px){ #content-container4 p.title{ font-size: 18px; } #content-container3 .card { width: 18vw; } div#content-container3 { height: auto; } .perkCards { display: grid; grid-template-columns: repeat(auto-fill, 68px); grid-column-gap: 12px; grid-row-gap: 12px; width: 100%; justify-content: center; transform: unset; } div#perks-container{ padding: 10px; } #content-container1 img{ width: 60vw; display: none; } #content-container1 .title{ font-size: 24px; width: 350px; } #content-container2 .content{ padding : 40px 10px; } .sign-up-page .content-container{ margin-top: 20px; } .form-container { position: unset; right: unset; z-index: unset; top: unset; width: 80vw; margin: auto; margin-top: 20px; } .container { position: unset; width: unset; height: unset; text-align: center; top: unset; margin: unset; font-family: Arimo; } .featureCards{ justify-content: space-between; } .testimonial-container .body{ flex-direction: column; } .container{ height: unset; } .testimonial-container{ width: unset; } .testimonial-container .heading p{ text-align: center; font-size: 22px; line-height: 1.6; } .testimonial-container .right{ font-size: 18px; padding: unset; font-weight: unset; text-align: center; margin-top: 20px; } .carousel-arrow{ display: none; } #content-container1 .content{ width: 75%; top: 25%; } .form-container .form input{ width: 80%; -webkit-appearance: none; } } </style> <link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap" rel="stylesheet"> |
<div class="sign-up-page"> <div class="content-container" id="content-container1"> <div class="content" id="main-banner-content"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/PassportLogo_main.png" alt=""> <p class="title"> <span class="bold">Supporting Startups Where and When it Matters Most</span></br> Sign up for a free account to explore how Passport can help accelerate your business. </p> </div> </div> <div class="form-container" id="sign-up-form-container"> <div class="header"> <div class="heading">Sign Up</div> <div class="existing-account"> Already have an account? <span><a href="https://passport.theonevalley.com/login.action?os_destination=/site/pass">Login here</a></span> </div> </div> <div class="form"> <div class="input-label">Full Name </div> <div class="err-msg name-error"> </div> <input type="text" id="name" oninput="document.getElementsByClassName('name-error')[0].innerText = ''"> <div class="input-label">Email </div> <div class="err-msg email-error"> </div> <input type="email" id="email" oninput="document.getElementsByClassName('email-error')[0].innerText = ''"> <div class="input-label">Password </div> <div class="err-msg password-error"> </div> <input type="password" id="password" oninput="document.getElementsByClassName('password-error')[0].innerText = ''"> <div class="input-label">Confirm Password</div> <input type="password" id="password-confirm" oninput="document.getElementsByClassName('password-error')[0].innerText = ''"> </div> <div class="conditions "> <label class="checkbox "> <input id="checkbox" type="checkbox" name="privacy" value="privacy" class="" onchange="toggleSubmitBtn()"> <p class="conditions-message ">By signing up, you agree to our <a href="http://support.theonevalley.com/en/articles/2546657-privacy-policy" target="_blank" rel="noopener noreferrer" class="external-link " data-ext-link-init="true">privacy policy</a> and <a href="http://support.theonevalley.com/legal-and-privacy/terms-and-conditions" target="_blank" rel="noopener noreferrer" class="external-link " data-ext-link-init="true">terms and conditions</a> </p> </label> </div> <div class="footer"> <button id="signupButton" onclick="registerUser()"><i id="signup-spinner" class="fa fa-spinner fa-spin"></i>Sign Up</button> </div> </div> <div class="content-container" id="content-container2"> <div class="content"> <p class="title">Passport connects entrepreneurs and emerging startups to savings on business tools, resources, and a global network of mentors, investors, and founders.</p> <div class="resources-card"> <div class="resources-card-left"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/Features+Icons/savings.jpg" alt=""> </div> <div class="resources-card-right"> <div class="resources-card-title"> Savings </div> <div class="resources-card-description"> Save money on tools and services to grow your business. </div> <div class="resources-card-sub-description"> Over $1 million+ in Perk discounts. </div> </div> </div> <div class="resources-card"> <div class="resources-card-left"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/Features+Icons/mentors.jpg" alt=""> </div> <div class="resources-card-right"> <div class="resources-card-title"> Mentors </div> <div class="resources-card-description"> Don't go at it alone – Tangible insights are a Zoom call away. </div> <div class="resources-card-sub-description"> Choose from over 175+ industry experts. </div> </div> </div> <div class="resources-card"> <div class="resources-card-left"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/Features+Icons/resources.jpg" alt=""> </div> <div class="resources-card-right"> <div class="resources-card-title"> Resources </div> <div class="resources-card-description make-bold"> Latest resources across top categories at your fingertips. </div> <div class="resources-card-sub-description"> 100+ vital resources, templates and videos. </div> </div> </div> <div class="resources-card"> <div class="resources-card-left"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/Features+Icons/investors.jpg" alt=""> </div> <div class="resources-card-right"> <div class="resources-card-title"> Investors </div> <div class="resources-card-description"> Ready to raise funds? Connect with the right investors. </div> <div class="resources-card-sub-description"> Over 450 VC's and investors to match with. </div> </div> </div> <div class="resources-card" style="margin: unset;"> <div class="resources-card-left"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/Features+Icons/community.png" alt=""> </div> <div class="resources-card-right"> <div class="resources-card-title"> Community </div> <div class="resources-card-description"> Stay connected with webinars, pitch events, and the founder forum. </div> <div class="resources-card-sub-description"> Connect with thousands of like-minded founders. </div> </div> </div> </div> </div> <div class="content-container" id="content-container3"> <div class="title">Instant savings on hundreds of tools and services including: </div> <div id="perks-container"> <div class="perkCards"> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/amazonwebservices.png" alt="AWS" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/brex.jpg" alt="Brex" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/freshworks.png" alt="Freshworks" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/sendgrid.jpg" alt="Sendgrid" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/stripe.png" alt="Stripe" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/segment.png" alt="Segment" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/airtable.png" alt="Airtable" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/Zoom+-+Blue.jpg" alt="Zoom" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3.us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/aws.jpg" alt="AWS" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/brex.jpg" alt="Brex" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/freshworks.png" alt="Freshworks" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/sendgrid.jpg" alt="Sendgrid" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/stripe.png" alt="Stripe" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/segment.png" alt="Segment" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/airtable.png" alt="Airtable" style="width:100%" > </div> <div class="card"> <img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/Passport/sign-up-page/perks/Zoom+-+Blue.jpg" alt="Zoom" style="width:100%" > </div> </div> </div> </div> <div class="content-container" id="content-container4"> <div class="content" > <p class="title"> Don't go at it alone. Passport supports the innovators, visionaries and hustlers who put it all on the line to build the next game-changing company. Sign-up to explore Passport today. </p> </div> </div> </div> <form style="display:none!important;" id="loginform" name="loginform" method="POST" action="/dologin.action" class="aui login-form-container fullSite"> <input type="text" name="os_username" id="os_username" class="text fullSite" placeholder="Username" data-focus="0"> <input type="password" name="os_password" id="os_password" class="password fullSite" placeholder="Password"> <input id="loginButton" class="aui-button aui-style aui-button-primary fullSite" name="login" type="submit" value="Log in" resolved=""> <input type="hidden" id="os_destination" name="os_destination" value="" class="fullSite"> </form> |
<script> function toggleSubmitBtn(){ let checkbox = document.getElementById('checkbox') if(checkbox.checked){ document.getElementById('signupButton').removeAttribute('disabled') document.getElementById('signupButton').style.cursor = 'pointer' //document.getElementById('signupButton').style.backgroundColor = '#0698f0' } else{ document.getElementById('signupButton').setAttribute('disabled',true) document.getElementById('signupButton').style.cursor = 'not-allowed' //document.getElementById('signupButton').style.backgroundColor = '#0698f0d' } } toggleSubmitBtn() </script> |
<script> let nameError = document.getElementsByClassName('name-error')[0] let emailError = document.getElementsByClassName('email-error')[0] let passwordError = document.getElementsByClassName('password-error')[0] function validateEmail(email) { const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); } function registerUser(){ // display loading indicator document.getElementById('signup-spinner').style.display = "inline-block" let validated = true; let name = document.querySelector("input#name").value let email = document.querySelector("input#email").value let password = document.querySelector("input#password").value let passwordConfirm = document.querySelector("input#password-confirm").value if(name === ""){ validated = false; nameError.innerText = "You must provide a name!"; } if(password === "" || passwordConfirm === ""){ validated = false; passwordError.innerText = "You must provide a password!"; } if(!validateEmail(email)){ validated = false; emailError.innerText = "Please enter a valid email and try again!"; } if(email === ""){ validated = false; emailError.innerText = "You must provide an email!"; } if(password !== passwordConfirm){ validated = false; passwordError.innerText = "The entered passwords didn't match. Please try again!"; } if(validated){ jQuery.ajax({ url: "/rest/scriptrunner/latest/custom/passportSignUp", headers: { 'X-Atlassian-Token' : 'nocheck', 'Content-type' : 'application/json' }, type: "POST", dataType: 'text', data: JSON.stringify({ "fullname":name, "email":email, "password" : password }), success: function(text){ var encoded_os_password = encodeURIComponent(password); var encoded_os_username = encodeURIComponent(email) var url = window.location.href; analytics.track('signupButtonClicked', { url }); var destination = "/display/das?newuser=true" $("#os_username").val(email) // set to right email variable $("#os_password").val(password) // set to right pass variable $("#os_destination").val(destination) // set to right destination variable $("#loginform").submit(); //window.location.href = `/login.action?os_username=${encoded_os_username}&os_password=${encoded_os_password}&formname=loginform&login=Log%20In&os_destination=/display/das?newuser=true`; }, error: function(err){ // display loading indicator document.getElementById('signup-spinner').style.display = "none" let errorCode = JSON.parse(err.responseText).error console.log(errorCode) if (errorCode === -1){ console.log('spit error message') emailError.innerText = "Email already exists. Please try signing in!"; $( ".err-msg" ).effect( "bounce", {times:3 , distance: 5, direction: 'left'}, 100 ) } } }); }else{ document.getElementById('signup-spinner').style.display = "none" $( ".err-msg" ).effect( "bounce", {times:3 , distance: 5, direction: 'left'}, 100 ) } } </script> |
<script> let mainTitle = document.getElementById('content-container1') let widthLimit = 1400 let mobileWidthLimit = 480 function overlapStyleFix(){ if(window.innerWidth < widthLimit){ mainTitle.style.justifyContent = 'center' $('head').append(` <style> div#sign-up-form-container { position: unset; margin: auto; margin-top: 50px; } #content-container1 .title{ text-align: center !important; } #content-container1 .content{ align-items: center !important; } #content-container2 p.title{ width: 100% !important; } #content-container4 p.title { width: 100% !important; } </style>`) } else if(window.innerWidth > widthLimit){ mainTitle.style.justifyContent = 'left' $('head').append(` <style> div#sign-up-form-container { position: fixed; right: 4%; z-index: 1; top: 66px; margin: unset; } #content-container1 .title{ text-align: left !important; } #content-container1 .content{ align-items: flex-start !important; } #content-container2 p.title{ width: 60% !important; } #content-container4 p.title { width: 60% !important; } </style>`) } } // Call once on load up to dynamically fix everything overlapStyleFix(); window.onresize = ()=>{ overlapStyleFix(); } </script> |
<script> let perksCards = document.getElementsByClassName('perkCards')[0] let currOffset = 600 let startOffset = 600 let endOffset = -600 if(window.innerWidth < mobileWidthLimit){ let perks = document.querySelectorAll('.perkCards .card') for(let i = 8 ; i < perks.length ; i++){ perks[i].remove() } } else{ setInterval(()=>{ if(currOffset > endOffset){ currOffset = currOffset - 0.5 perksCards.style.transform = `translate3d(${currOffset}px, 0, 0)` } else{ currOffset = startOffset perksCards.style.transform = `translate3d(${currOffset}px, 0, 0)` } },20) } </script> |