Skip to content

Instantly share code, notes, and snippets.

@taylorbrooks
Created October 26, 2012 17:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save taylorbrooks/6b6cb6f7d44e6a3ebe54 to your computer and use it in GitHub Desktop.
Save taylorbrooks/6b6cb6f7d44e6a3ebe54 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Donate | Demo, Inc</title>
<meta charset='UTF-8'>
<meta content='SimpleDonation.co' property='og:site_name'>
<meta content='Simple Donation | Easiest Way to Tithe Online' property='og:title'>
<meta content='width=device-width, initial-scale=1.0;' name='viewport'>
<meta content='Simple Donation is the easiest online tithing software for churches to accept one-time and recurring donations.' property='og:description'>
<meta content="authenticity_token" name="csrf-param" />
<meta content="LTE0b6CqRmT+Mak6uPq47SV6FWlTQ6ljKil6/rLLZuo=" name="csrf-token" />
<link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/creditcard.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/datatables.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/public.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/sadmin.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/tabletools.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/slider.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/accounts.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<script src="https://use.typekit.com/rhl2ftj.js" type="text/javascript"></script>
<script src="https://js.stripe.com/v1/" type="text/javascript"></script>
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.core.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.blind.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.bounce.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.clip.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.drop.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.explode.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.fade.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.fold.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.highlight.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.pulsate.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.scale.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.shake.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.slide.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.effects.transfer.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.core.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.accordion.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.position.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.autocomplete.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.button.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.mouse.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.draggable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.resizable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.dialog.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.droppable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.progressbar.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.selectable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.slider.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.sortable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.tabs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.all.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/customers.js?body=1" type="text/javascript"></script>
<script src="/assets/formatcurrency.js?body=1" type="text/javascript"></script>
<script src="/assets/datatables.js?body=1" type="text/javascript"></script>
<script src="/assets/highcharts.js?body=1" type="text/javascript"></script>
<script src="/assets/tabletools.js?body=1" type="text/javascript"></script>
<script src="/assets/sadmin.js?body=1" type="text/javascript"></script>
<script src="/assets/slider.js?body=1" type="text/javascript"></script>
<script src="/assets/rest_in_place/rest_in_place.js?body=1" type="text/javascript"></script>
<script src="/assets/rest_in_place/index.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script>
//<![CDATA[
try{Typekit.load();}catch(e){}
//]]>
</script>
</head>
<body class='account_2'>
<div class='container'>
<div class='row' style='margin-bottom:50px;'>
<div class='span5'>
<a href='http://austinstone.org'><img alt="Account_2_logo" id="account_2_logo" src="/assets/account_2_logo.svg" /></a>
</div>
<div class='span7'>
<nav class='main'>
<ul class='nav' id='nav'>
<li><a href="http://austinstone.org/campuses">Campuses</a></li>
<li><a href="http://austinstone.org/about/identity-beliefs">About</a></li>
<li><a href="http://austinstone.org/connect/missional-community">Connect</a></li>
<li><a href="http://austinstone.org/resources/sermons">Resources</a></li>
<li id='last_nav'><a href="http://austinstone.org/stories/stories-main">Stories</a></li>
</ul>
</nav>
</div>
</div>
<div class='row'>
<div class='box span8'>
<form accept-charset="UTF-8" action="/customers" class="form-horizontal" id="new_customer" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="LTE0b6CqRmT+Mak6uPq47SV6FWlTQ6ljKil6/rLLZuo=" /></div>
<div id='stripe_error'>
<noscript>JavaScript is not enabled and is required for this form. First enable it in your web browser settings.</noscript>
</div>
<input id="stripe_card_token" name="customer[stripe_card_token]" type="hidden" />
<fieldset>
<legend id='no_border'>
<span class='form-step'>1</span>
Your Information
</legend>
<div class='control-group'>
<label class='control-label'>Full Name</label>
<div class='controls'>
<input class="span2" id="donation_first_name" name="customer[first_name]" placeholder="First Name" size="30" type="text" />
<input class="span2" id="donation_last_name" name="customer[last_name]" placeholder="Last Name" size="30" type="text" />
</div>
</div>
<div class='control-group'>
<label class='control-label'>Email</label>
<div class='controls'>
<input id="donation_email" name="customer[email]" placeholder="jon@example.com" size="30" type="text" />
<a id='notes'>Add a note...</a>
</div>
</div>
<div class='control-group' id='notes_form'>
<label class='control-label'>Note</label>
<div class='controls'>
<textarea class='span4' name='customer[donations][note]' type='text'></textarea>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<span class='form-step'>2</span>
Choose Your Amount
</legend>
<div class='control-group'>
<div class='controls'>
<div class='row'>
<div class='span2' id='cc'>
<label class='radio'>
<input class="donation_amount" id="amount1" name="customer[donations][amount]" type="radio" value="2500" />
<label class="add-on donation_amount" for="amount1">$25</label>
</label>
<label class='radio'>
<input checked="checked" class="donation_amount" id="amount2" name="customer[donations][amount]" type="radio" value="10000" />
<label class="add-on donation_amount" for="amount2">$100</label>
</label>
<label class='radio'>
<input class="donation_amount" id="amount3" name="customer[donations][amount]" type="radio" value="25000" />
<label class="add-on donation_amount" for="amount3">$250</label>
</label>
</div>
<div class='span2'>
<label class='radio'>
<input class="donation_amount" id="amount4" name="customer[donations][amount]" type="radio" value="50000" />
<label class="add-on donation_amount" for="amount4">$500</label>
</label>
<label class='radio'>
<input class="donation_amount" id="amount5" name="customer[donations][amount]" type="radio" value="100000" />
<label class="add-on donation_amount" for="amount5">$1000</label>
</label>
<label class='radio' id='custom_donation_amount'>
<input class="donation_amount" id="amount6" name="customer[donations][amount]" type="radio" />
<input class="donation_amount span1" id="donation_custom_amount" name="customer[donations][amount]" placeholder="Other" size="30" type="text" />
</label>
<input id="donation_custom_hidden_amount" name="customer[donations][amount]" type="hidden" value="10000" />
</div>
</div>
</div>
</div>
<div class='control-group'>
<label class='control-label'>Frequency</label>
<div class='controls' id='frequency'>
<label class='radio'>
<input checked class='once' name='customer[recurring]' type='radio' value='0'>One time</input>
</label>
<label class='radio'>
<input class='monthly' name='customer[recurring]' type='radio' value='1'>Monthly</input>
</label>
</div>
</div>
<div class='control-group'>
<label class='control-label'></label>
<div class='controls' id='frequency'>
<label class='checkbox'>
<input name="customer[donations][amount_offset]" type="hidden" value="0" /><input id="customer_donations_amount_offset" name="customer[donations][amount_offset]" type="checkbox" value="1" />
Cover the
<span id='offsetplease'>$4.15</span>
in credit card processing fees
</label>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<span class='form-step'>3</span>
Payment Method
<img alt="Ssl-seal" class="pull-right" src="/assets/ssl-seal.jpg" width="75" />
</legend>
<div class='control-group'>
<label class='control-label'>Give by</label>
<div class='controls' id='method'>
<label class='radio btn'>
<input checked='checked' id='donation_payment_type_eft' name='donation[payment_type]' type='radio' value='eft'>
<span class='payment-type-echeck' style='background-position: -413px 0;'>ECheck</span>
</label>
<label class='radio btn'>
<input id='donation_payment_type_cc' name='donation[payment_type]' type='radio' value='cc'>
<ul class='card_logos'>
<li class='card_visa'>Visa</li>
<li class='card_mastercard'>Mastercard</li>
<li class='card_amex'>American Express</li>
<li class='card_discover'>Discover</li>
</ul>
</label>
</div>
</div>
<div class='eft_donation'>
<div class='control-group'>
<label class='control-label'>Routing Number</label>
<div class='controls'>
<input autocomplete="off" id="eft_routing_number" type="text" />
</div>
</div>
<div class='control-group'>
<label class='control-label'>Account Number</label>
<div class='controls'>
<input autocomplete="off" id="eft_account_number" type="text" />
</div>
</div>
<div class='control-group'>
<div class='controls'>
<div class='diagram-routing_number'>You can locate your routing number and account number off of your checkbook.</div>
</div>
</div>
</div>
<div class='cc_donation' style='display: none;'>
<div class='control-group'>
<label class='control-label'>Card Number</label>
<div class='controls' id='card_number'>
<input autocomplete="off" class="span2" id="credit_card_number" type="text" />
<div class='input-append'>
<span class='help-inline'>CVV</span>
<input autocomplete="off" class="span1" id="credit_card_code" type="text" />
<a class='btn add-on' data-content='For Visa and Mastercards, your security code is a 3-digit number on the back of your card. American Express cards have a 4-digit number on the front.' data-title='Where is my security code?' id='card_cvv' rel='popover'>
<ul class='card_logos'>
<li class='card_cvv'>CVV</li>
</ul>
</a>
</div>
</div>
</div>
<div class='control-group'>
<label class='control-label'>Expiration</label>
<div class='controls'>
<select class="span2" id="date_month" name="date[month]">
<option value="1">1 - January</option>
<option value="2">2 - February</option>
<option value="3">3 - March</option>
<option value="4">4 - April</option>
<option value="5">5 - May</option>
<option value="6">6 - June</option>
<option value="7">7 - July</option>
<option value="8">8 - August</option>
<option value="9">9 - September</option>
<option selected="selected" value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
<select class="span1" id="date_year" name="date[year]">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
</select>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend></legend>
<div class='control-group'>
<label class='control-label'></label>
<div class='controls'>
<input class='btn btn-primary btn-large' name='commit' type='submit' value='Give Now'>
<a class='btn mini cancel' href='/'>Cancel</a>
</div>
</div>
</fieldset>
</form>
</div>
<div class='span3 offset1'>
<div data-offset-top='140' data-spy='affix' id='sidebar'>
<div class='row'>
<div class='well checkout loginbox'>
<h4>Total:</h4>
<h1>
<span id='amount'>$100.00</span>
<span id='type'></span>
</h1>
</div>
</div>
<div class='row'>
<div class='well loginbox'>
<img alt="Donated_before" src="/assets/donated_before.png" />
<br>
<a class='btn btn-info' href='/login'>Login</a>
</div>
</div>
</div>
</div>
</div>
<div class='row belowbox'>
<div class='span8' style='text-align:right;'>
<p>
<i class='icon-lock'></i>
Payments secured by
<span class='tk-adelle logo'><a href="https://simpledonation.co" id="footer_link">Simple Donation</a></span>
</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment