<html><head>
		<title>CollectionPoint</title>

		<script src="js/jquery-2.2.3.min.js"></script>
		<script src="js/ractive.min.js"></script>
		<script src="js/moment.min.js"></script>
		<script src="js/reconnecting-websocket.min.js"></script>
		<script src="js/json-patch-duplex.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.7.0/EQCSS.min.js"></script>
		<script src="js/sweetalert.min.js"></script>


		<script>
			// set the minimum estimated waiting time to show on the display (in minutes)
			var minWaitTime = 5;
		</script>

		<link rel="stylesheet" type="text/css" href="sweetalert.css">
		<link rel="stylesheet" href="style.css">
		<link rel="stylesheet" href="app.css">

		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="mobile-web-app-capable" content="yes">

		<script id="order-template" type="text/ractive">
			{{#orders}}
			<li data-order-number="{{consec}}" class="order status-{{orderStatus}}">
				<span class="order-number"><small>Order</small>{{orderNumber2}}</span>
				<!-- <span class="order-time">{{time}}</span> -->
				<span class="check-text">{{refText}}</span>
			</li>
			{{/orders}}
		</script>
	<style type="text/css"></style></head>
	<body unselectable="on" onselectstart="return false;" data-pinterest-extension-installed="cr2.0.5">
  					
		<div class="timers">
			<span>Estimated wait: <span id="wait-time">21 hours</span></span>
			<span class="clock" id="clock">09:06</span>
		</div>

		<main>
			<div class="orders-wrapper pending">
				<ul id="orders" class="orders pending"><li data-order-number="000137" class="order status-LIVE"><span class="order-number"><small>Order</small>73</span> <span class="check-text"></span></li><li data-order-number="000138" class="order status-LIVE"><span class="order-number"><small>Order</small>74</span> <span class="check-text"></span></li><li data-order-number="000139" class="order status-LIVE"><span class="order-number"><small>Order</small>75</span> <span class="check-text"></span></li><li data-order-number="000140" class="order status-LIVE"><span class="order-number"><small>Order</small>76</span> <span class="check-text"></span></li><li data-order-number="000143" class="order status-LIVE"><span class="order-number"><small>Order</small>79</span> <span class="check-text"></span></li><li data-order-number="000144" class="order status-LIVE"><span class="order-number"><small>Order</small>80</span> <span class="check-text"></span></li><li data-order-number="000145" class="order status-LIVE"><span class="order-number"><small>Order</small>81</span> <span class="check-text"></span></li></ul>
			</div>
		</main>	
  <ads>
  <!--<div id="slideshow">
   <div>
     
   </div>
   <div>
     <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>-->
  <div id="slideshow">
  <div><img src="graphics/ad1.png"></div><div><img src="graphics/ad2.png"></div>
    </div>
  <div id="slideshow2">
  <div><img src="graphics/ad3.png"></div><div><img src="graphics/ad4.png"></div><div><img src="graphics/ad5.png"></div>
    </div>

  </ads>

  <script>
  $("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(100)
    .next()
    .fadeIn(100)
    .end()
    .appendTo('#slideshow');
}, 30000);
</script>
 <script>
  $("#slideshow2 > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow2 > div:first')
    .fadeOut(100)
    .next()
    .fadeIn(100)
    .end()
    .appendTo('#slideshow2');
}, 5000);
</script>
		<script src="js/client.js"></script>

	
</body></html>