freeCodeCamp/server/views/commit/index.jade

extends ../layout
block content
    h2.text-center Commit to yourself. Commit to a nonprofit.
    .row
        .col-xs-12.col-sm-6.col-sm-offset-3
          p You can give yourself external motivation, and immediately start helping nonprofits. You can do this by pledging a monthly donation to a nonprofit until you’ve earned one of our certifications. This pledge is completely optional. This pledge is entirely between you and the nonprofit, and no money goes to freeCodeCamp. You can change your commitment or stop it at any time.

    .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 Vis
                    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

        .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

    if pledge
        form.row(name='stop-pledge' action='/commit/stop-commitment' method='post')
            input(type='hidden', name='_csrf', value=_csrf)
            .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
    script.
      $(function() {
        $('#commit-btn-donate').click(function() {
          $('#commit-btn-submit').removeClass('disabled');
          $('#commit-step4-text').removeClass('disabled');
          $('#commit-step4-hidden').hide();
          $('#commit-step4-show').removeClass('hidden');
        });

        $('#commit-btn-submit').click(function() {

          if (
            history &&
            typeof history.pushState === 'function'
          ) {
            history.pushState(history.state, null, '/commit/pledge?' + $('form').serialize());
            return null;
          }

          window.location.href = '/commit/pledge?' + $('form').serialize();
        });
      });