Skip to content

Instantly share code, notes, and snippets.

@adam-garcia

adam-garcia/index.html

Last active February 17, 2016 22:33
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 adam-garcia/b800f9adc8c714cbf068 to your computer and use it in GitHub Desktop.
Save adam-garcia/b800f9adc8c714cbf068 to your computer and use it in GitHub Desktop.
Download ZIP
BMR referral button
Raw
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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.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">
<h3>Refer a Friend</h3>
</div>
<div class="row">
<form onsubmit="return generateEmail(); location.reload()">
<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="First" required>
</div>
<div class="one-half column">
<label>Recipient's name</label>
<input id="recip-name" class="u-full-width" type="text" placeholder="Barry (optional)">
</div>
</div>
<div class="row">
<label>Recipient e-mail <span class="req">*</span></label>
<input id="recip-email" class="u-full-width" type="email" placeholder="obama@whitehouse.gov" required>
</div>
<div class="row">
<label>Add a message</label>
<textarea id="custom-message" class="u-full-width" placeholder="Message text (optional)"></textarea>
</div>
<div class="row">
<div class="twelve columns">
<input class="button-primary" type="submit" value="Send Invitation">
<div class="u-pull-right">
<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">
<div class="twelve columns">
<p class="muted"><span class="req">* </span> Required field</p>
</div>
</div>
</form>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Raw
main.css
body {
font-family: "proxima-nova", sans-serif;
}
div.container {
max-width: 930px;
margin: 5px auto;
}
/* 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;
}
Raw
refer.js
function showReferral () {
var modal = document.getElementById('about-modal');
modal.style.display = "block";
}
function hideReferral() {
var modal = document.getElementById('about-modal');
modal.style.display = "none";
}
window.onclick = function(event) {
var modal = document.getElementById('about-modal');
if (event.target == modal) {
modal.style.display = "none";
}
}
/* E-mail Generation
\* * * * * * * * * * * * * * * * * * * * * * * * * * */
var email = {
subject: "Join the Race!",
message: "[Information about the race] Sign up here: http://billionmilerace.org"
};
function generateEmail () {
email.subject = email.subject
email.to = $( '#recip-email' ).val();
email.recip = $( '#recip-name' ).val();
email.from = $( '#sender-name' ).val();
email.lead = email.from + " has invited you to join the Billion Mile Race!\n" + $( '#custom-message' ).val();
if ($( '#custom-message' ).val() != "") {
email.lead = email.from + " says:\n" + $( '#custom-message' ).val();
};
email.message = email.lead + "\n\n\n" + email.message;
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;
return false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment