Zenjob Notes, and new Templates
This commit is contained in:
Norm Rasmussen
200
Custom_Templates/customer_templates/JJSV/sign_up.html.liquid
Normal file
200
Custom_Templates/customer_templates/JJSV/sign_up.html.liquid
Normal file
@ -0,0 +1,200 @@
|
||||
<main class="np-main np-box-container">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
|
||||
<form class="np-form np-box-content" action="{% route sign_up %}" method="post" novalidate>
|
||||
<span class="np-form-terms">Use of this site constitutes your consent to the application of such laws and regulations and to our <a class="np-button-color" href="https://jnjinstitute.com/en-us/privacy-policy" target="_blank">Privacy Policy</a>. Your use of the information on this site is subject to the terms of our <a href="{{ current_school.terms_of_service_url }}" class="np-button-color" target="_blank">Terms of Use</a>.</span>
|
||||
<div class="np-form-title"> {% t .create_account %} </div>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-flex-desktop">
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="learner[first_name]"
|
||||
id="learner_first_name"
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="learner[last_name]"
|
||||
id="learner_last_name"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
{% t shared.email_address %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="email"
|
||||
name="learner[email]"
|
||||
id="learner_email"
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_password">
|
||||
{% t shared.password %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="password"
|
||||
name="learner[password]"
|
||||
id="learner_password"
|
||||
>
|
||||
</div>
|
||||
<div class="np-form-field checkbox-field">
|
||||
<label class="checkbox-container">I attest that I am a Healthcare Professional or Johnson & Johnson employee.
|
||||
<input type="checkbox" id="attestationCheckbox">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
Continue
|
||||
</button>
|
||||
{% comment %} <span class="np-form-terms">
|
||||
{% t .terms %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href="{{ current_school.terms_of_service_url }}"
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</span> {% endcomment %}
|
||||
<div class="err-required" style="display:none;">Please complete all required fields.</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
|
||||
.np-box-content-container {
|
||||
margin-top:0;
|
||||
padding-top:0;
|
||||
}
|
||||
|
||||
.np-form-terms {
|
||||
text-align:left;
|
||||
}
|
||||
/* Customize the label (the container) */
|
||||
.checkbox-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
line-height:24px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
color:#486776;
|
||||
}
|
||||
|
||||
/* Hide the browser's default checkbox */
|
||||
.checkbox-container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* Create a custom checkbox */
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: #f2f4f5;
|
||||
border: 1px solid #ccd4d8;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.has-err .checkmark {
|
||||
background: #fcddd3;
|
||||
border: 1px solid #f05323;
|
||||
}
|
||||
|
||||
/* On mouse-over, add a grey background color */
|
||||
.checkbox-container:hover input ~ .checkmark {
|
||||
background-color: #ccd4d8;
|
||||
}
|
||||
|
||||
/* When the checkbox is checked, add a blue background */
|
||||
.checkbox-container input:checked ~ .checkmark {
|
||||
background-color: #009999;
|
||||
}
|
||||
|
||||
/* Create the checkmark/indicator (hidden when not checked) */
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the checkmark when checked */
|
||||
.checkbox-container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Style the checkmark/indicator */
|
||||
.checkbox-container .checkmark:after {
|
||||
left: 8px;
|
||||
top: 5px;
|
||||
width: 7px;
|
||||
height: 11px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.err-required {
|
||||
color:#f05323;
|
||||
font-size:12px;
|
||||
margin-top:12px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-box-header {
|
||||
height:130px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
//validate the checkbox is selected
|
||||
|
||||
$('.np-form-action').click(function(e) {
|
||||
e.preventDefault()
|
||||
console.log("clicked")
|
||||
|
||||
if($("#attestationCheckbox").is(":checked")) {
|
||||
$('.np-form').submit()
|
||||
} else {
|
||||
console.log("Checkbox is not checked")
|
||||
$('.checkbox-field').addClass('has-err')
|
||||
$('.err-required').show();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user