From 77008c1096e9e58490f8fdd0d5fa602fc7bee0ea Mon Sep 17 00:00:00 2001
From: Eric Fawcett <eric.fawcett@gmail.com>
Date: Sun, 5 Apr 2020 17:47:32 -0400
Subject: [PATCH] Initial Commit

---
 index.html | 111 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c65a217
--- /dev/null
+++ b/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+		<title>Route 8 Cameras</title>
+		<style type="text/css">
+			body {
+				margin: 0px auto;
+				background-color: #444444;
+				/*overflow: hidden;*/
+			}
+			.grid-container {
+				display: grid;
+				grid-template-columns: auto;
+				grid-gap: 2px 2px;
+				/* height: 90vh; */
+			}
+			@media only screen and (min-width: 640px){
+				.grid-container {
+					grid-template-columns: auto auto;
+				}
+			}
+			@media only screen and (min-width: 981px){
+				.grid-container {
+					grid-template-columns: auto auto auto;
+				}
+			}
+			.grid-item img {
+				width: 100%;
+			}
+			.title-wrapper{
+				text-align: center;
+				background-color: black;
+			}
+			.item-title {
+				color: white;
+				font-size: 24px;
+				text-transform: uppercase;
+			}
+		</style>
+		<script>
+			$(document).ready(function(){
+				
+				var camList = [];
+				camList[1] = ["CLE/CLE034", "Hudson Dr"];
+				camList[2] = ["CLE/CLE036a-L", "Graham Rd"];
+				camList[3] = ["CLE/CLE040-L", "Hampshire Rd"];
+				camList[4] = ["CLE/CLE038-L", "Steels Corners"];
+				camList[5] = ["CLE/CLE044-L", "Barlow Rd"];
+				camList[6] = ["CLE/CLE013-L", "SR 303"];
+			
+				camList.forEach(loadTitle); //set titles
+				
+				setIMG(camList); //load initial images
+				
+				setInterval(setIMG, 6000, camList); //set timer to continuously reload images.
+				
+			}); 
+			
+			function loadTitle(camDat, camNum){
+				
+				$("#title" + camNum).text(camDat[1]);
+				
+			}
+			
+			function setIMG(camList){
+				
+				camList.forEach(loadIMG);
+				
+			}
+			
+			function loadIMG(camDat, camNum){
+				
+				datestr = Date.now();
+				camURL = "https://itscameras.dot.state.oh.us/images/" + camDat[0] + ".jpg?date=" + datestr;
+				$("#cam" + camNum).attr("src", camURL);
+						
+			}
+		</script>
+	</head>
+	<body>
+		<div class="grid-container">
+			<div class="grid-item">
+				<div class="title-wrapper"><span class="item-title" id="title1"></span></div>
+				<img src="" id="cam1"> 
+			</div>
+			<div class="grid-item">
+				<div class="title-wrapper"><span class="item-title" id="title2"></span></div>
+				<img src="" id="cam2"> 
+			</div>
+			<div class="grid-item">
+				<div class="title-wrapper"><span class="item-title" id="title3"></span></div>
+				<img src="" id="cam3"> 
+			</div>
+			<div class="grid-item">
+				<div class="title-wrapper"><span class="item-title" id="title4"></span></div>
+				<img src="" id="cam4"> 
+			</div>
+			<div class="grid-item">
+				<div class="title-wrapper"><span class="item-title" id="title5"></span></div>
+				<img src="" id="cam5"> 
+			</div>
+			<div class="grid-item">
+				<div class="title-wrapper"><span class="item-title" id="title6"></span></div>
+				<img src="" id="cam6"> 
+			</div>
+		</div>
+	</body>
+</html>
