<h1>Quote Demo:</h1>


<!--	-->
		<div id=the_void  style="
			position:fixed;
			top:0;
			left:0;
			z-index:10000;
		background-color:rgba(0,0,0,0.8);
		height:100vh;
			width:100vw;
		display:none;
			grid-template-rows:5% 5% 85% 5%;
			grid-template-columns:5% 90% 5%;
			grid-template-areas:'. . .'
								'. a_fr a_x'
								'. a_fr .'
								'. . .';
		opacity:0;
		transition:opacity 0.3s ease-in-out;
		">
			<div id=personalize_frame_frame >
				<div id=quickgridthing >
					<img class='Frame_Tool_Img' id=grandprize__hori src='' style='grid-area:1 / 1;'>
					<img class='Frame_Tool_Img' id=grandprize__vert src='' style='grid-area:1 / 1;'>
					<img class='Frame_Tool_Img' id=grandprize src='' style='grid-area:1 / 1;'>
				</div>
				<div id=customizations >
				
				<div id=arrow_for_joist class=blinking_arrow >►</div>
				<input id=joist_space type=text placeholder='Joist Spacing (in.)' onfocus='selectoneofthetwoinputspluscolouring("joist")'/>
					
				<br><br>
					<div id=arrow_for_opening class=blinking_arrow >►</div>
				<input id=opening_size type=text placeholder='Opening Size (in.)' onfocus='selectoneofthetwoinputspluscolouring("opening")'/>
					
				<br><br><div id=unit_type onclick='selectoneofthetwoinputspluscolouring(false)'>
						<p style='text-align:center;'>Unit Type:</p>
						<div style='
						background-color:#fff;
							border:solid #767676 1px;
							border-radius:2px;
							color:#000;
							font-size:80%;
							padding:5px;' >
							<input type=radio name='d' id='u_opt_1' value='opt1' onfocus='selectoneofthetwoinputspluscolouring(false)'/><label for='u_opt_1'>RTU/AHU/MAU</label>
							<input type=radio name='d' id='u_opt_2' value='opt2'/><label for='u_opt_2'>EVAP Coolers</label>
							<input type=radio name='d' id='u_opt_3' value='opt3'/><label for='u_opt_3'>Exhaust Fans</label>
							<input type=radio name='d' id='u_opt_4' value='opt4'/><label for='u_opt_4'>Powered Vents</label>
							<input type=radio name='d' id='u_opt_5' value='opt5'/><label for='u_opt_5'>Gravity Vents</label>
							<input type=radio name='d' id='u_opt_6' value='opt6'/><label for='u_opt_6'>Skylights</label>
							<input type=radio name='d' id='u_opt_7' value='opt7'/><label for='u_opt_7'>Roof Drains</label>
							<input type=radio name='d' id='u_opt_8' value='opt8'/><label for='u_opt_8'>Roof Hatch</label>
							<input type=radio name='d' id='u_opt_9' value='opt9'/><label for='u_opt_9'>Floor Openings</label>
							<input type=radio name='d' id='u_opt_text' value='opt10'/><input id='u_opt_text' style='width:65%' type=text placeholder='Other'/>
						</div>
					</div>
					
			<br><br><input id=unit_weight type=text placeholder='Unit Weight (lbs.)' onfocus='selectoneofthetwoinputspluscolouring(false)'/>
					
	<br><br><div id=bottomofframeoptions >
				<input id=save_unit type=button value='Add to Cart' onclick='saveframe()' onfocus='selectoneofthetwoinputspluscolouring(false)'/>
			</div>
				</div>
			</div>
			<div id=all_of_the_frames_you_can_select_from >
				
				<div id=fr_double >
					<img src='../../wp-content/uploads/frame-0.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
					<img src='../../wp-content/uploads/frame-1.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
					<img src='../../wp-content/uploads/frame-2.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
					<img src='../../wp-content/uploads/frame-5.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
					<img src='../../wp-content/uploads/frame-6.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
					<img src='../../wp-content/uploads/frame-9.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
				</div>
				<div id=fr_triple >
					<img src='../../wp-content/uploads/frame-3.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
					<img src='../../wp-content/uploads/frame-4.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
					<img src='../../wp-content/uploads/frame-7.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
					<img src='../../wp-content/uploads/frame-8.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
					<img src='../../wp-content/uploads/frame-11.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
				</div>
				<div id=fr_quad >
					<img src='../../wp-content/uploads/frame-10.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
					<img src='../../wp-content/uploads/frame-12.png' class='Frame_Tool_Img' onload='this.width/=1.5;this.onload=null;' onclick='choose(this)'>
				</div>
				
			</div>
			<div id=the_little_x_in_the_top_right onclick='closetheframeselectwindow()'>X</div>
		</div>


		<div id=fanciest >
			<div class=fancy id=disable_5  style="width:20vw;height:50vh;border-radius:10px;position:absolute;left:25%;top:25vh;background-color:#eee;display:grid;grid-auto-columns:100%;grid-template-rows:85% 15%;">
				<p style='text-align:center;'>Thank you for submitting!</p>
				<input style='height:2.5vh;width:5vw;margin-top:32%;margin-left:3.5vw;' type=button value='Return' onclick='location.reload()' />
			</div>
			<div class=fancy id=disable_4  style="width:20vw;height:50vh;border-radius:10px;position:absolute;left:25%;top:25vh;background-color:#eee;display:grid;grid-auto-columns:100%;grid-template-rows:85% 15%;">
				<div id=f1 >
					<input type=text id=_addnotes placeholder='Additional Notes'>
				</div>
				<div id=f2 >
					<input id=f2_2 type=button value='Back' onclick='back(2)'>
					<input id=f2_1_final type=button value='Skip' onclick='next(2)'>
				</div>
			</div>
			<div class=fancy id=disable_3  style="width:20vw;height:50vh;border-radius:10px;position:absolute;left:25%;top:25vh;background-color:#eee;display:grid;grid-auto-columns:100%;grid-template-rows:85% 15%;">
				<div id=f1 >
					<h1>Cart:</h1>
					<div id=cart_area >
						<div class=container_around_selected_frames_in_the_cart_screen id=frame_1 style='display:none;'>
							<img id=saved_frame_1 src=''>
							<div>Qty: 
							<select id=quant_1 >
								<option value='1'>1</option>
								<option value='2'>2</option>
								<option value='3'>3</option>
								<option value='4'>4</option>
								<option value='5'>5</option>
								<option value='6'>6</option>
								<option value='7'>7</option>
								<option value='8'>8</option>
								<option value='9'>9</option>
								<option value='10'>10+</option>
							</select></div>
						<br>
							<input id=rmv_q1 type=button value='Delete' onclick='removeitemfromcard(1)'/>
						</div>
						<div><input id=frame_add type=button value='Add Frame' onclick='dotheframething()'/></div>
					</div>
				</div>
				<div id=f2 >
					<input id=f2_2 type=button value='Back' onclick='back(2)'>
					<input id=f2_1_final type=button value='Skip' onclick='next(2)'/>
				</div>
			</div>
			<div class=fancy id=disable_2  style="width:20vw;height:50vh;border-radius:10px;position:absolute;left:25%;top:25vh;background-color:#eee;display:grid;grid-auto-columns:100%;grid-template-rows:85% 15%;">
				<div id=f1 >
					<h1>Project Info:</h1>
			<br>	<input class=buTy_0 id='_projname' type=text placeholder='project name'/>
			<br><br><input class=buTy_0 id='_postal' type=postalcode placeholder='zip/postal code'/>
			<br><br><input class=buTy_0 id='_neededby' type=text placeholder='frames needed by  (e.g. 01/01/2021)'/>
			<br><br><form id=project_type >
						<input type=radio name='a' id='newmodel' value='NewModel'/><label for='newmodel'>New Build</label>
						<input type=radio name='a' id='TI' value='Newbuild/TI'/><label for='TI'>Remodel/T.I.</label>
					</form>
						<p style='position:relative;left:-25%;top:6%;'>Roof Material:</p>
					<div class=buTy_2 style='left:2%'>
						<input type=radio name='b' id='1_opt_1' value='opt1'/><label for='1_opt_1' class='butte_radio_lbl'>Steel Deck</label>
						<input type=radio name='b' id='1_opt_2' value='opt2'/><label for='1_opt_2' class='butte_radio_lbl'>Panelized Wood</label>
						<input type=radio name='b' id='1_opt_3' value='opt3'/><label for='1_opt_3' class='butte_radio_lbl'>Concrete</label>
						<input type=radio name='b' id='1_opt_4' value='opt4'/><label for='1_opt_4' class='butte_radio_lbl'>Gypcrete</label>
						<input type=radio name='b' id='1_opt_5' value='opt5'/><input id='1_opt_text' style='width:65%' type=text placeholder='Other'/>
					</div>
						<p style='position:relative;right:-25%;top:-2%;'>Roof Structure:</p>
					<div class=buTy_2 style='right:2%;'>
						<input type=radio name='c' id='2_opt_1' value='opt1'/><label for='2_opt_1' class='butte_radio_lbl'>Steel Joists/Beams</label>
						<input type=radio name='c' id='2_opt_2' value='opt2'/><label for='2_opt_2' class='butte_radio_lbl'>PEMB Purlins</label>
						<input type=radio name='c' id='2_opt_3' value='opt3'/><label for='2_opt_3' class='butte_radio_lbl'>Hybrid</label>
						<input type=radio name='c' id='2_opt_4' value='opt4'/><label for='2_opt_4' class='butte_radio_lbl'>Wood Trusses</label>
						<input type=radio name='c' id='2_opt_5' value='opt5'/><input id='2_opt_text' style='width:65%' type=text placeholder='Other'/>
					</div>
				</div>
				<div id=f2 >
					<input id=f2_2 type=button value='Back' onclick='back(1)'>
					<input id=f2_1 type=button value='Next' onclick='next(1)'/>
				</div>
			</div>
			<div class=fancy id=disable_1  style="width:20vw;height:50vh;border-radius:10px;position:absolute;left:25%;top:25vh;background-color:#eee;display:grid;grid-auto-columns:100%;grid-template-rows:85% 15%;">
				<div id=f1 >
					<h1 style='margin-top:7px;'>Customer Info:</h1>
			<br><br><input class=buTy_0 id=_fname type=text required placeholder='first name'/>
			<br><br><input class=buTy_0 id=_lname type=text required placeholder='last name'/>
			<br><br><input class=buTy_0 id=_email type=email required placeholder='email'/>
			<br><br><input class=buTy_0 id=_tel type=tel required placeholder='### ###-####'/>
				</div>
				<div id=f2 >
					<input id=f2_1 type=button value='Next' onclick='next(0)'/>
				</div>
			</div>
		</div>

<div style='height:60vh;'></div>




<!--<h1>Let QuickFrames do the take-offs and eliminate your need to detail.</h1>
[contact-form-7 id="1936" title="New QuickFrames Quote Form"]


From: https://wplearninglab.com/contact-form-7-get-value-from-url/

<script type="text/javascript">
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var VARIABLE = getUrlParameter('PARAMETER');

if (VARIABLE != null) {
     document.getElementById('INPUT-FIELD-ID').value = VARIABLE;
}

</script>


<a name="quote-a-few-frames"></a>

[two_fifth]
<h3>Need Just A Few Frames Quoted?</h3>
If you are working on a project requiring only a few frames and you know the basic requirements for how they will be used, just fill out the form to the right. We'll get a quote back to you within 24 hours or less!

For each framed opening, using the <a href="#frame-types"> frame type examples </a> shown below, select the frame type number that most closely matches where the opening will be located relative to the joists/beams and enter that into the <strong>Type</strong> column. While RTUs are shown in these images, they apply to all types of roof top equipment. If none of the images match your configuration, enter (0).

[responsive] <img class="alignright" src="/wp-content/uploads/quote-frame-outline.jpg" alt="Frame Outline Image" width="320" /> [/responsive]

If the framing will <strong>only</strong> support the duct openings and not the curbing, enter the letter (<strong><span style="color: #37ade1;">Y</span></strong>) in the <strong>Duct Only</strong> column. If the framing will support the curbing and equipment, enter the letter (<strong><span style="color: #37ade1;">N</span></strong>).

Specify the center-to-center joist/beam spacing as shown by (<strong><span style="color: #37ade1;">A</spacing></strong>) in the image to the right.

When specifying the frame opening size (<strong><span style="color: #37ade1;">B</span></strong>), use the length of the opening running <strong>parallel</strong> to (running with) the joists or beams.

[responsive] <img class="alignright" src="/wp-content/uploads/home-install-after-roof.jpg" alt="Install After Roof Image" width="400"/> [/responsive]

[/two_fifth]

[three_fifth_last]
[contact-form-7 id="1036" title="Expanded Quote Request Small"]
[/three_fifth_last]

<a name="frame-types"></a>
<h2>Frame Type Examples</h2>
[responsive] <img class="alignright" src="/wp-content/uploads/quote-frame-configurations.png" alt="Roof Framing Configurations" /> [/responsive]

<a name="quote-a-lot-of-frames"></a>
[divider type="space" margintop="0" marginbottom="20"]

<h2>Have A Large Or Complex Project? Let Us Do The Take-offs For You!</h2>
[divider type="space" margintop="0" marginbottom="10"]

[one_third]
[responsive] <img src="/wp-content/uploads/drawing-image.jpg" alt="Drawing Image" /> [/responsive]
[/one_third]

[two_third_last]
The simplest way for us to provide you with a customized QuickFrames quotation is for you to allow us to do the take-offs directly from the engineering drawing set.

We have developed an extensive database of roof top equipment information, such as sizes, weights, opening dimensions, and structural requirements that allows us to select the optimal roof frames for your applications. All you need to do is to provide us with access to your drawing set and then let us go to work for you. You can also have complete confidence that we treat all drawing sets as proprietary information and we respect the importance of confidentiality for anything you share with us.

The easiest way for us to access your files is for you to provide us with an FTP address, login and password. Or, if the file set is small enough, you can also email it to us.

[contact-form-7 id="401" title="Quote Request"]

[/two_third_last]-->
