qcook_target.html

<div id="three_column_layout">
	<div class="center_col">
		<div id="thermal_image">
			<iframe src="/grideye/snapshot.html" style="overflow: hidden" seamless="seamless" scrolling="no" style="width: 100%"></iframe>
			<script>
				// There are silly CSS games that can be played
				// This is cleaner and sets sizing properly for inside the iframe
				var iframe = $('#thermal_image iframe');
				iframe.on('load', function() {
					iframe.css({'height':iframe.width()+'px'});
				});
			</script>
		</div>
		<h1>One Touch Cooking</h1>
		<h2>{{script.details.title}}</h2>
		<p>{{script.details.description}}</p>
		<ol>
			<li ng-repeat="step in script.details.steps">{{step}}</li>
		</ol>
	</div>

	<!-- footer -->
	<a href="/" id="stop" type="button" class="btn btn-default footer" aria-label="Stop">
		<div class="btn btn-default btn-round" type="button">
			<span class="fa fa-stop" aria-hidden="true"></span>
		</div>
	</a>
</div>

<script>
$('.btn-round').each(function(index, elem) { square_element(elem); });
</script>