adam-garcia/defaultmsg.txt

## defaultmsg.txt
My school is participating in the New Balance Foundation Billion Mile Race, which is challenging America’s schools to collectively walk, jog, and run one billion miles! Will your school join, too?

It’s free and easy to participate. Plus, schools that contribute miles to the national goal are eligible for cool grants and prizes!

Watch this video (https://www.youtube.com/watch?v=PZq_FPqllNs) to learn more and enroll at http://BillionMileRace.org. If you have questions, you can email the Billion Mile Race team at billionmilerace@tufts.edu. I hope you’ll join today!

## index.html
<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Referral Button</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic' rel='stylesheet' type='text/css'>
  <script src="https://use.typekit.net/gst0xpt.js"></script>
  <script>try{Typekit.load({ async: true });}catch(e){}</script>


  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">

  <link rel="stylesheet" type="text/css" href="./main.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
  <script src="./refer.js"></script>

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="#!">

</head>
<body>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div class="container">
    <div class="row">
      <form onsubmit="return generateEmail(); location.reload()" id="reform">
        <div id="msg-data" onclick="warn_overwrite();">
          <div class="row">
            <div class="one-half column">
              <label>Recipient's name <span class="req">*</span></label>
              <input id="recip-name" class="u-full-width" type="text" placeholder="Louise Lovestarun" required>
            </div>
            <div class="one-half column">
              <label>Recipient e-mail <span class="req">*</span></label>
              <input id="recip-email" class="u-full-width" type="email" placeholder="llovestarun@speedyracersacademy.edu" required>
            </div>
          </div>
          <div class="row">
            <div class="one-half column">
              <label>Your name <span class="req">*</span></label>
              <input id="sender-name" class="u-full-width" type="text" placeholder="Johnny Jogsallday" required>
            </div>
            <div class="one-half column">
              <label for="cc-bmr">Keep us in the loop!</label>
              <input type="checkbox" id="cc-bmr" checked="true">
              <span class="muted">(Cc us on the e-mail)</span>
            </div>
          </div>
        </div>
        <div class="row" onclick="checkform();">
          <label>Customize your message</label>
          <textarea disabled="true" id="custom-message" class="u-full-width">
Hi Louise Lovestarun,

My school is participating in the New Balance Foundation Billion Mile Race, which is challenging America’s schools to collectively walk, jog, and run one billion miles! Will your school join, too?

It’s free and easy to participate. Plus, schools that contribute miles to the national goal are eligible for cool grants and prizes!

Watch this video (https://www.youtube.com/watch?v=PZq_FPqllNs) to learn more and enroll at http://BillionMileRace.org. If you have questions, you can email the Billion Mile Race team at billionmilerace@tufts.edu. I hope you’ll join today!

High five,

Johnny Jogsallday
          </textarea>
        </div>
        <div class="row">
          <div class="twelve columns">
            <p class="muted"><span class="req">* </span> Required field</p>
          </div>
        </div>
        <div class="row">
          <div class="twelve columns">
            <input class="button-primary" type="submit" value="Send Invitation">
          </div>
        </div>
      </form>
    </div>
    <!--
    <div class="row">
      <h4>Preview your message:</h4>
      <div class="ten columns offset-by-one" id="preview">
        placeholder text <br> placeholder text
      </div>
    </div>
     -->
  </div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

## main.css
body {
  font-family: "proxima-nova", Helvetica, Arial, sans-serif;
}

div.container {
  max-width: 930px;
  margin: 5px auto;
}

div#preview {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  height: 20vh;
  padding: 10pt;
}

textarea#custom-message {
  height: 400px;
}

/* Typography
*/
.muted {
    color: #6a6a6a;
}
.req {
    color: #D42030;
}

/* Referral Button
 * * * * * * * * * * * * * * * * * * * * * * * */

.is-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* The Referral Modal
 * * * * * * * * * * * * * * * * * * * * * * * */
.modal {
    color: #222;
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal h1 {
  font-size: 1.2em;
  font-family: "proxima-nova";
  text-transform: none;
  margin-bottom: 0;
}

.modal p {
  margin-bottom: 0;
}

.modal table {
  margin: 0 auto;
}

/* Modal Content/Box */
.modal-content {
    background: #fefefe;
    margin: 0 auto;
    margin-top: 15%;
    border: 1px solid #888;
    width: 70%;
}

.modal-titlebar {
  padding: 10px;
  padding-left: 1em;
  padding-bottom: 5px;
  margin-bottom: 15px;
  border-bottom: 1px solid #e5e5e5;
}

.modal-body {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 1em;
  padding: 0.5em 0 1em 1em;
}

.modal-body li {
  list-style-type: disc;
  margin-bottom: 0;
}

.modal-footer {
  border-top: 1px solid #e5e5e5;
  text-align: center;
}

.close-modal {
    padding-top: 0.25em;
    color: #aaa;
    font-weight: bold;
    -webkit-transition: .5s;
    transition: .5s
}

.close-modal-x{
    font-size: 2.5em;
}

.close-modal:hover,
.close-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #12a8dd;
  border-color: #12a8dd;
  -webkit-transition: .5s;
  transition: .5s;
  text-transform: none;
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1093c1;
  border-color: #1093c1;
}

## refer.js
/* E-mail Generation
\* * * * * * * * * * * * * * * * * * * * * * * * * * */

var defaultmsg;

var email = {};
email.subject = "Join the Race!"
defaultmsg = jQuery.get('./defaultmsg.txt', function(data) {
    email.message = data;
});
function generateEmail () {
    email.to = $( '#recip-email' ).val();
    email.recip = $( '#recip-name' ).val();
    email.from = $( '#sender-name' ).val();
    email.message = $( '#custom-message' ).val();

    email.url = "mailto:" + email.to +
                "?subject=" + encodeURI(email.subject) +
                "&body=" + encodeURI(email.message);
    if ($( '#cc-bmr' ).is( ':checked' )) {
        email.url += "&cc=billionmilerace@tufts.edu";
    };

    window.location.href = email.url;

    // Reset Email Data
    email = {};
    email.subject = "Join the Race!"
    defaultmsg = jQuery.get('./defaultmsg.txt', function(data) {
        email.message = data;
    });

    toastr.success('Thanks!');

    return false;
}

var recipname = $( '#recip-name' ).val();
var recipeml = $( '#recip-email' ).val();
var sendname = $( '#sender-name' ).val();
var overwrite = false;
var custom = true;

function checkform() {
    recipname = $( '#recip-name' ).val();
    recipeml = $( '#recip-email' ).val();
    sendname = $( '#sender-name' ).val();
    if ((!recipname || !recipeml || !sendname) && custom) {
        toastr.error('Please complete this form to customize your message');
        custom = false;
    } else {
        overwrite = true;
        if ($( '#recip-name' ).val() == "") {
            email.lead = "Hi Louise Lovestarun,\n\n";
        } else {
            email.lead = "Hi " + $( '#recip-name' ).val() + ",\n\n";
        }

        if ($( '#sender-name' ).val() == "") {
            email.foot = "\n\nHigh five,\n\nJohnny Jogsallday";
        } else {
            email.foot = "\n\nHigh five,\n\n" + $( '#sender-name' ).val();
        }
        $('#custom-message').val(email.lead + email.message + email.foot);
    }
}

function warn_overwrite() {
    if (overwrite) {
        toastr.warning('Warning: your custom message may be re-generated');
        overwrite = false;
    }
}

$(document).ready(function() {
    $(' #msg-data ').on('keyup', function() {
        recipname = $( '#recip-name' ).val();
        recipeml = $( '#recip-email' ).val();
        sendname = $( '#sender-name' ).val();
        if (recipname && recipeml && sendname) {
            $('#custom-message').prop( "disabled", false );
        }
        if ($( '#recip-name' ).val() == "") {
            email.lead = "Hi Louise Lovestarun,\n\n";
        } else {
            email.lead = "Hi " + $( '#recip-name' ).val() + ",\n\n";
        }

        if ($( '#sender-name' ).val() == "") {
            email.foot = "\n\nHigh five,\n\nJohnny Jogsallday";
        } else {
            email.foot = "\n\nHigh five,\n\n" + $( '#sender-name' ).val();
        }
        $('#custom-message').val(email.lead + email.message + email.foot);
    })
});
	My school is participating in the New Balance Foundation Billion Mile Race, which is challenging America’s schools to collectively walk, jog, and run one billion miles! Will your school join, too?

	It’s free and easy to participate. Plus, schools that contribute miles to the national goal are eligible for cool grants and prizes!

	Watch this video (https://www.youtube.com/watch?v=PZq_FPqllNs) to learn more and enroll at http://BillionMileRace.org. If you have questions, you can email the Billion Mile Race team at billionmilerace@tufts.edu. I hope you’ll join today!
	<!DOCTYPE html>
	<html lang="en">
	<head>

	<!-- Basic Page Needs
	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<meta charset="utf-8">
	<title>Referral Button</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Mobile Specific Metas
	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- FONT
	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic' rel='stylesheet' type='text/css'>
	<script src="https://use.typekit.net/gst0xpt.js"></script>
	<script>try{Typekit.load({ async: true });}catch(e){}</script>


	<!-- CSS
	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">

	<link rel="stylesheet" type="text/css" href="./main.css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
	<script src="./refer.js"></script>

	<!-- Favicon
	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<link rel="icon" type="image/png" href="#!">

	</head>
	<body>

	<!-- Primary Page Layout
	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
	<div class="container">
	<div class="row">
	<form onsubmit="return generateEmail(); location.reload()" id="reform">
	<div id="msg-data" onclick="warn_overwrite();">
	<div class="row">
	<div class="one-half column">
	<label>Recipient's name <span class="req">*</span></label>
	<input id="recip-name" class="u-full-width" type="text" placeholder="Louise Lovestarun" required>
	</div>
	<div class="one-half column">
	<label>Recipient e-mail <span class="req">*</span></label>
	<input id="recip-email" class="u-full-width" type="email" placeholder="llovestarun@speedyracersacademy.edu" required>
	</div>
	</div>
	<div class="row">
	<div class="one-half column">
	<label>Your name <span class="req">*</span></label>
	<input id="sender-name" class="u-full-width" type="text" placeholder="Johnny Jogsallday" required>
	</div>
	<div class="one-half column">
	<label for="cc-bmr">Keep us in the loop!</label>
	<input type="checkbox" id="cc-bmr" checked="true">
	<span class="muted">(Cc us on the e-mail)</span>
	</div>
	</div>
	</div>
	<div class="row" onclick="checkform();">
	<label>Customize your message</label>
	<textarea disabled="true" id="custom-message" class="u-full-width">
	Hi Louise Lovestarun,

	My school is participating in the New Balance Foundation Billion Mile Race, which is challenging America’s schools to collectively walk, jog, and run one billion miles! Will your school join, too?

	It’s free and easy to participate. Plus, schools that contribute miles to the national goal are eligible for cool grants and prizes!

	Watch this video (https://www.youtube.com/watch?v=PZq_FPqllNs) to learn more and enroll at http://BillionMileRace.org. If you have questions, you can email the Billion Mile Race team at billionmilerace@tufts.edu. I hope you’ll join today!

	High five,

	Johnny Jogsallday
	</textarea>
	</div>
	<div class="row">
	<div class="twelve columns">
	<p class="muted"><span class="req">* </span> Required field</p>
	</div>
	</div>
	<div class="row">
	<div class="twelve columns">
	<input class="button-primary" type="submit" value="Send Invitation">
	</div>
	</div>
	</form>
	</div>
	<!--
	<div class="row">
	<h4>Preview your message:</h4>
	<div class="ten columns offset-by-one" id="preview">
	placeholder text <br> placeholder text
	</div>
	</div>
	-->
	</div>

	<!-- End Document
	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
	</body>
	</html>
	body {
	font-family: "proxima-nova", Helvetica, Arial, sans-serif;
	}

	div.container {
	max-width: 930px;
	margin: 5px auto;
	}

	div#preview {
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	height: 20vh;
	padding: 10pt;
	}

	textarea#custom-message {
	height: 400px;
	}

	/* Typography
	*/
	.muted {
	color: #6a6a6a;
	}
	.req {
	color: #D42030;
	}

	/* Referral Button
	* * * * * * * * * * * * * * * * * * * * * * * */

	.is-centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	/* The Referral Modal
	* * * * * * * * * * * * * * * * * * * * * * * */
	.modal {
	color: #222;
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
	}

	.modal h1 {
	font-size: 1.2em;
	font-family: "proxima-nova";
	text-transform: none;
	margin-bottom: 0;
	}

	.modal p {
	margin-bottom: 0;
	}

	.modal table {
	margin: 0 auto;
	}

	/* Modal Content/Box */
	.modal-content {
	background: #fefefe;
	margin: 0 auto;
	margin-top: 15%;
	border: 1px solid #888;
	width: 70%;
	}

	.modal-titlebar {
	padding: 10px;
	padding-left: 1em;
	padding-bottom: 5px;
	margin-bottom: 15px;
	border-bottom: 1px solid #e5e5e5;
	}

	.modal-body {
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 1em;
	padding: 0.5em 0 1em 1em;
	}

	.modal-body li {
	list-style-type: disc;
	margin-bottom: 0;
	}

	.modal-footer {
	border-top: 1px solid #e5e5e5;
	text-align: center;
	}

	.close-modal {
	padding-top: 0.25em;
	color: #aaa;
	font-weight: bold;
	-webkit-transition: .5s;
	transition: .5s
	}

	.close-modal-x{
	font-size: 2.5em;
	}

	.close-modal:hover,
	.close-modal:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
	}


	.button.button-primary,
	button.button-primary,
	input[type="submit"].button-primary,
	input[type="reset"].button-primary,
	input[type="button"].button-primary {
	color: #FFF;
	background-color: #12a8dd;
	border-color: #12a8dd;
	-webkit-transition: .5s;
	transition: .5s;
	text-transform: none;
	}

	.button.button-primary:hover,
	button.button-primary:hover,
	input[type="submit"].button-primary:hover,
	input[type="reset"].button-primary:hover,
	input[type="button"].button-primary:hover,
	.button.button-primary:focus,
	button.button-primary:focus,
	input[type="submit"].button-primary:focus,
	input[type="reset"].button-primary:focus,
	input[type="button"].button-primary:focus {
	color: #FFF;
	background-color: #1093c1;
	border-color: #1093c1;
	}
	/* E-mail Generation
	\* * * * * * * * * * * * * * * * * * * * * * * * * * */

	var defaultmsg;

	var email = {};
	email.subject = "Join the Race!"
	defaultmsg = jQuery.get('./defaultmsg.txt', function(data) {
	email.message = data;
	});
	function generateEmail () {
	email.to = $( '#recip-email' ).val();
	email.recip = $( '#recip-name' ).val();
	email.from = $( '#sender-name' ).val();
	email.message = $( '#custom-message' ).val();

	email.url = "mailto:" + email.to +
	"?subject=" + encodeURI(email.subject) +
	"&body=" + encodeURI(email.message);
	if ($( '#cc-bmr' ).is( ':checked' )) {
	email.url += "&cc=billionmilerace@tufts.edu";
	};

	window.location.href = email.url;

	// Reset Email Data
	email = {};
	email.subject = "Join the Race!"
	defaultmsg = jQuery.get('./defaultmsg.txt', function(data) {
	email.message = data;
	});

	toastr.success('Thanks!');

	return false;
	}

	var recipname = $( '#recip-name' ).val();
	var recipeml = $( '#recip-email' ).val();
	var sendname = $( '#sender-name' ).val();
	var overwrite = false;
	var custom = true;

	function checkform() {
	recipname = $( '#recip-name' ).val();
	recipeml = $( '#recip-email' ).val();
	sendname = $( '#sender-name' ).val();
	if ((!recipname \|\| !recipeml \|\| !sendname) && custom) {
	toastr.error('Please complete this form to customize your message');
	custom = false;
	} else {
	overwrite = true;
	if ($( '#recip-name' ).val() == "") {
	email.lead = "Hi Louise Lovestarun,\n\n";
	} else {
	email.lead = "Hi " + $( '#recip-name' ).val() + ",\n\n";
	}

	if ($( '#sender-name' ).val() == "") {
	email.foot = "\n\nHigh five,\n\nJohnny Jogsallday";
	} else {
	email.foot = "\n\nHigh five,\n\n" + $( '#sender-name' ).val();
	}
	$('#custom-message').val(email.lead + email.message + email.foot);
	}
	}

	function warn_overwrite() {
	if (overwrite) {
	toastr.warning('Warning: your custom message may be re-generated');
	overwrite = false;
	}
	}

	$(document).ready(function() {
	$(' #msg-data ').on('keyup', function() {
	recipname = $( '#recip-name' ).val();
	recipeml = $( '#recip-email' ).val();
	sendname = $( '#sender-name' ).val();
	if (recipname && recipeml && sendname) {
	$('#custom-message').prop( "disabled", false );
	}
	if ($( '#recip-name' ).val() == "") {
	email.lead = "Hi Louise Lovestarun,\n\n";
	} else {
	email.lead = "Hi " + $( '#recip-name' ).val() + ",\n\n";
	}

	if ($( '#sender-name' ).val() == "") {
	email.foot = "\n\nHigh five,\n\nJohnny Jogsallday";
	} else {
	email.foot = "\n\nHigh five,\n\n" + $( '#sender-name' ).val();
	}
	$('#custom-message').val(email.lead + email.message + email.foot);
	})
	});