<div class="demo-layout mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">
<div class="demo-ribbon"></div>
<main class="demo-main mdl-layout__content">
<div class="demo-container mdl-grid">
<div class="mdl-cell mdl-cell--1-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--10-col">
<h5>Live Email App</h5>
<form class="sendEmail" method="post" autocomplete="off">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="email" id="from" data-required="true">
<label class="mdl-textfield__label" for="sample3">From</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="email" id="to" data-required="true">
<label class="mdl-textfield__label" for="sample3">To</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="subject" data-required="true">
<label class="mdl-textfield__label" for="sample3">Subject</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<textarea class="mdl-textfield__input" type="text" rows="3" id="emailbody" data-required="true"></textarea>
<label class="mdl-textfield__label" for="sample5">Email body</label>
</div>
<div>
<button style="background-color: #3baddc;" type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">Send</button>
<div class="mdl-spinner mdl-js-spinner is-active"></div>
<span class="success-help">Your message has been sent!</span>
</div>
</form>
</div>
</div>
</main>
</div>
.demo-ribbon {
width: 100%;
height: 34vh;
background-color: #3baddc;
flex-shrink: 0;
}
.demo-main {
margin-top: -35vh;
flex-shrink: 0;
}
.demo-header .mdl-layout__header-row {
padding-left: 40px;
}
.demo-container {
max-width: 1600px;
width: calc(100% - 16px);
margin: 0 auto;
}
.demo-content {
border-radius: 2px;
padding: 0px 56px 80px;
}
.demo-layout.is-small-screen .demo-content {
padding: 0px 28px 40px;
}
.demo-content h3 {
margin-top: 48px;
}
.demo-footer {
padding-left: 40px;
}
.demo-footer .mdl-mini-footer--link-list a {
font-size: 13px;
}
.mdl-textfield {
width: 100%
}
.success-help {
padding: 0 15px;
vertical-align: 0px;
display: none;
font-size: 16px;
color: #444;
}
.mdl-spinner {
vertical-align: middle;
margin: 0px 10px;
display: none;
}
$(function() {
["from", "to", "subject", "emailbody"].forEach(function(field) {
$("#" + field).attr("required", true);
$("#" + field).focus(function() {
$(".success-help").fadeOut("fast");
});
});
$(".sendEmail").submit(function(e) {
$(".mdl-spinner").fadeIn("slow").css("display", "inline-block");
e.preventDefault();
var from = $("#from").val();
var to = $("#to").val();
var subject = $("#subject").val();
var emailbody = $("#emailbody").val();
$.ajax({
url: "https://mybench-sendingemail.backbench.io/send",
data: {
from: from,
to: to,
subject: subject,
emailbody: emailbody
},
error: function() {
$(".mdl-spinner").fadeOut("fast");
$(".success-help").html("An error has occurred").fadeIn("slow");
},
success: function(data) {
$(".mdl-spinner").fadeOut("fast");
["from", "to", "subject", "emailbody"].forEach(function(field) {
$("#" + field).val("");
});
$(".success-help").fadeIn("slow");
},
type: "POST"
});
});
});