2015-10-02 23:58:22 -07:00
extends ../layout
block content
2016-01-09 23:49:07 -06:00
h2.text-center Commit to yourself. Commit to a nonprofit.
.row
.col-xs-12.col-sm-6.col-sm-offset-3
p Give yourself external motivation and help nonprofits right away. Pledge a monthly donation to a nonprofit until you’
2015-10-07 00:44:46 -07:00
2016-01-09 23:49:07 -06:00
.row
.col-xs-12.col-sm-6.col-sm-offset-3.text-center
h3 Pledge to #{displayName} 
.button-spacer
a(href='#{imgUrl}' data-lightbox='img-enlarge' alt='#{imgAlt}')
img.img-responsive(src='#{imgUrl}' alt='#{imgAlt}')
p.large-p
= description
p
a(href='/commit/directory') ...or see other nonprofits
.spacer
form.form(name='commit')
.hidden
input(type='text' value='#{name}' name='nonprofit')
.row
.col-xs-12.col-sm-6.col-sm-offset-3
h3 Step 1: Which certification do you pledge to complete?
.btn-group.btn-group-justified(data-toggle='buttons' role='group')
label.btn.btn-primary.btn-lg.active
input(type='radio' id=frontEndCert value=frontEndCert name='goal' checked="checked")
| Front End
label.btn.btn-primary.btn-lg
input(type='radio' id=dataVisCert value=dataVisCert name='goal')
| Data
label.btn.btn-primary.btn-lg
input(type='radio' id=backEndCert value=backEndCert name='goal')
| Back End
label.btn.btn-primary.btn-lg
input(type='radio' id=fullStackCert value=fullStackCert name='goal')
| Full Stack
.spacer
.row
.col-xs-12.col-sm-6.col-sm-offset-3
h3 Step 2: How much do you want to pledge monthly until you earn that certification?
.btn-group.btn-group-justified(data-toggle='buttons' role='group')
label.btn.btn-primary
input(type='radio' id='5-dollar-pledge' value='5' name='amount')
| $5 per month
label.btn.btn-primary.active
input(type='radio' id='10-dollar-pledge' value='10' name='amount' checked="checked")
| $10 per month
label.btn.btn-primary
input(type='radio' id='25-dollar-pledge' value='25' name='amount')
| $25 per month
label.btn.btn-primary
input(type='radio' id='50-dollar-pledge' value='50' name='amount')
| $50 per month
.spacer
.col-xs-12.col-sm-6.col-sm-offset-3
h3 Step 3: Set up your monthly donation
.row
.col-xs-12.col-sm-6.col-sm-offset-3.text-center
a#commit-btn-donate.btn.btn-block.btn-lg.btn-primary(href=donateUrl target='_blank') Open the #{displayName} donation page
2015-10-08 16:29:43 -07:00
2016-01-09 23:49:07 -06:00
.spacer
.col-xs-12.col-sm-6.col-sm-offset-3
h3#commit-step4-text.disabled
Step 4: Confirm
span#commit-step4-hidden.disabled (Do step 3 first)
span#commit-step4-show.hidden your commitment to your goal
.row
.col-xs-12.col-sm-6.col-sm-offset-3.text-center
button#commit-btn-submit.btn.btn-block.btn-lg.btn-primary.disabled Commit
2015-10-07 00:44:46 -07:00
2016-01-09 23:49:07 -06:00
if pledge
form.row(name='stop-pledge' action='/commit/stop-commitment' method='post')
.col-xs-12.col-sm-6.col-sm-offset-3.text-center
.button-spacer
button.btn.btn-block.btn-lg.btn-default(name='submit' type='submit') Stop my current pledge
else
.row
.col-xs-12.col-sm-6.col-sm-offset-3.text-center
.button-spacer
a.btn.btn-block.btn-lg.btn-default(href='/map') Maybe later
2015-10-06 00:13:51 -07:00
script.
$(function() {
2015-10-08 17:00:15 -07:00
$('#commit-btn-donate').click(function() {
$('#commit-btn-submit').removeClass('disabled');
$('#commit-step4-text').removeClass('disabled');
$('#commit-step4-hidden').hide();
$('#commit-step4-show').removeClass('hidden');
});
2015-10-06 00:13:51 -07:00
$('#commit-btn-submit').click(function() {
2015-12-09 14:19:37 -08:00
if (
history &&
typeof history.pushState === 'function'
) {
history.pushState(history.state, null, '/commit/pledge?' + $('form').serialize());
return null;
}
2015-10-06 00:13:51 -07:00
window.location.href = '/commit/pledge?' + $('form').serialize();
});
});
