<!DOCTYPE html>
<html lang="en">
<title>QR Buffet Widget</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-amber.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
</style>
<body>
<!-- Header -->
<header class="w3-container w3-amber w3-center" style="padding:128px 16px">
<h1>QR Buffet Widget</h1>
</header>
<div id="allergySelection" class="w3-half w3-display-middle ">
<div class="w3-card-4 w3-container w3-white w3-animate-left">
<h2 class="w3-center">Joseph Farley<br></h2>
<div class="w3-section">
<input id="allergy" class="w3-input" type="text" placeholder="-NA-">
<label>Are your allergies correct?</label>
</div>
<br>
<br>
<br>
<ul class="w3-ul w3-hoverable ">
<div class="w3-light-gray">
<li id="myBar" class="w3-center w3-theme" style="width:0%"></li>
</div>
</ul>
<br>
<div class="w3-center"><button class="w3-btn w3-theme" onclick="selectService()">Next</button>
</div>
<br>
</div >
</div>
</div>
</div>
<div id="serviceSelection" class="w3-half w3-display-middle " style="display:none">
<div class="w3-card-4 w3-container w3-white w3-animate-left">
<h2 class="w3-center"><br> </h2>
<input name="service" class="w3-check" type="checkbox">
<label>Sausage</label>
<br>
<input name="service" class="w3-check" type="checkbox">
<label>Mash</label>
<br>
<input name="service" class="w3-check" type="checkbox">
<label>Gravy</label>
<br>
<br>
<ul class="w3-ul w3-hoverable ">
<div class="w3-light-gray">
<li id="myBar" class="w3-center w3-theme" style="width:0%"></li>
</div>
</ul>
<br>
<div class="w3-center"><button class="w3-btn w3-white" onclick="allergyService()">Previous</button><button class="w3-btn w3-theme" onclick="selectLocation()">Next</button>
</div>
<br>
</div >
</div>
</div>
</div>
<div id="locationSelection" class="w3-half w3-display-middle " style="display:none">
<div class="w3-card-4 w3-container w3-white w3-animate-left">
<h2 class="w3-center">What kind of location is this? <br> <i class="fas fa-tree" style="color:red;"></i></h2>
<input id="business" class="w3-radio" type="radio" name="location" value="Business" checked>
<label>Business</label>
<br>
<input id="residential" class="w3-radio" type="radio" name="location" value="Residential">
<label>Residential</label>
<br>
<br>
<ul class="w3-ul w3-hoverable ">
<div class="w3-light-gray">
<li id="myBar" class="w3-center w3-theme" style="width:25%"></li>
</div>
</ul>
<br>
<div class="w3-center"><button class="w3-btn w3-white" onclick="selectService()">Previous</button>
<button class="w3-btn w3-theme" onclick="selectEmergency()">Next</button>
</div >
<br>
</div>
</div>
</div>
<div id="emergencySelection" class="w3-half w3-display-middle " style="display:none">
<div class="w3-card-4 w3-container w3-white w3-animate-left">
<h2 class="w3-center">Is this an emergency? <br> <i class="fas fa-tree" style="color:red;"></i></h2>
<input id="emergencyYes" class="w3-radio" type="radio" name="emergency" value="yes" checked>
<label>Yes</label>
<br>
<input id="emergencyNo" class="w3-radio" type="radio" name="emergency" value="no">
<label>No</label>
<br>
<br>
<ul class="w3-ul w3-hoverable ">
<div class="w3-light-gray">
<li id="myBar" class="w3-center w3-theme" style="width:50%"></li>
</div>
</ul>
<br>
<div class="w3-center"><button class="w3-btn w3-white" onclick="selectLocation()">Previous</button>
<button class="w3-btn w3-theme" onclick="selectAddress()">Next</button>
</div >
<br>
</div>
</div>
</div>
<div id="addressSelection" class="w3-half w3-display-middle " style="display:none">
<div class="w3-card-4 w3-container w3-white w3-animate-left">
<h2 class="w3-center">Where's the project?<br> <i class="fas fa-tree" style="color:red;"></i></h2>
<div class="w3-section">
<input id="houseNumber" class="w3-input" type="text" required>
<label>House/Apt #</label>
</div>
<div class="w3-section">
<input id="streetAddress" class="w3-input" type="text" required>
<label>Street Address</label>
</div>
<br>
<ul class="w3-ul w3-hoverable ">
<div class="w3-light-gray">
<li id="myBar" class="w3-center w3-theme" style="width:75%"></li>
</div>
</ul>
<br>
<div class="w3-center"><button class="w3-btn w3-white" onclick="selectEmergency()">Previous</button>
<button class="w3-btn w3-theme" onclick="selectName()">Next</button>
</div >
<br>
</div>
</div>
</div>
<div id="nameSelection" class="w3-half w3-display-middle " style="display:none">
<div class="w3-card-4 w3-container w3-white w3-animate-left">
<h2 class="w3-center">What's your contact information?<br> <i class="fas fa-tree" style="color:red;"></i></h2>
<div class="w3-section">
<input id="fullName" class="w3-input" type="text" required>
<label>Full Name</label>
</div>
<div class="w3-section">
<input id="email" class="w3-input" type="text" required>
<label>Email</label>
</div>
<br>
<ul class="w3-ul w3-hoverable ">
<div class="w3-light-gray">
<li id="myBar" class="w3-center w3-theme" style="width:100%"></li>
</div>
</ul>
<br>
<div class="w3-center"><button class="w3-btn w3-white" onclick="selectAddress()">Previous</button>
<button class="w3-btn w3-theme" onclick="send()">Complete</button>
</div >
<br>
</div>
</div>
</div>
<script>
function allergyService(){
document.getElementById("allergySelection").style.display = "block";
document.getElementById("serviceSelection").style.display = "none";
document.getElementById("locationSelection").style.display = "none";
document.getElementById("emergencySelection").style.display = "none";
document.getElementById("addressSelection").style.display = "none";
document.getElementById("addressName").style.display = "none";
}
function selectService(){
document.getElementById("allergySelection").style.display = "none";
document.getElementById("serviceSelection").style.display = "block";
document.getElementById("locationSelection").style.display = "none";
document.getElementById("emergencySelection").style.display = "none";
document.getElementById("addressSelection").style.display = "none";
document.getElementById("addressName").style.display = "none";
}
function selectLocation(){
document.getElementById("allergySelection").style.display = "none";
document.getElementById("serviceSelection").style.display = "none";
document.getElementById("locationSelection").style.display = "block";
document.getElementById("emergencySelection").style.display = "none";
document.getElementById("addressSelection").style.display = "none";
document.getElementById("addressName").style.display = "none";
}
function selectEmergency(){
document.getElementById("allergySelection").style.display = "none";
document.getElementById("serviceSelection").style.display = "none";
document.getElementById("locationSelection").style.display = "none";
document.getElementById("emergencySelection").style.display = "block";
document.getElementById("addressSelection").style.display = "none";
document.getElementById("addressName").style.display = "none";
}
function selectAddress(){
document.getElementById("allergySelection").style.display = "none";
document.getElementById("serviceSelection").style.display = "none";
document.getElementById("locationSelection").style.display = "none";
document.getElementById("emergencySelection").style.display = "none";
document.getElementById("addressSelection").style.display = "block";
document.getElementById("nameSelection").style.display = "none";
}
function selectName(){
document.getElementById("allergySelection").style.display = "none";
document.getElementById("serviceSelection").style.display = "none";
document.getElementById("locationSelection").style.display = "none";
document.getElementById("emergencySelection").style.display = "none";
document.getElementById("addressSelection").style.display = "none";
document.getElementById("nameSelection").style.display = "block";
}
function send(){
var data="";
var emailAddress=document.getElementById("email").value;
var emergency;
if(document.getElementsByName("emergency")[0].checked){
emergency="Yes";}
if(document.getElementsByName("emergency")[1].checked){
emergency="No";}
var location;
if(document.getElementsByName("location")[0].checked){
location="Business";}
if(document.getElementsByName("location")[1].checked){
location="Residential";}
var services="";
if(document.getElementsByName("service")[0].checked){
services=services+"Mow Lawn"+"<br>";}
if(document.getElementsByName("service")[1].checked){
services=services+"Cut Trees"+"<br>";}
if(document.getElementsByName("service")[2].checked){
services=services+"Water Plants"+"<br>";}
data="<html><img src='http://blog.oliviasgiftsandmore.com/brackstonPage/callKodiLogo.png'><h1>Work Order</h1> <u>Client Address</u><br>"+
document.getElementById("fullName").value +"<br>" +
document.getElementById("houseNumber").value +", "+
document.getElementById("streetAddress").value +"<br><br>" +
"<u>Emergency</u>"+"<br>"+emergency+"<br><br>"+
"<u>Location</u>"+"<br>"+
location+"<br><br>"+
"<u>Services Needed</u>"+"<br>"+
services+"<br>"+
"</html>";
jQuery.post('http://blog.oliviasgiftsandmore.com/brackstonPage/email.asp',{email:emailAddress,orderData:data});
var timer = setTimeout(function(){ window.location = "http://blog.oliviasgiftsandmore.com/brackstonPage/thankyou.html"}, 1000);
}
</script>
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>