Update compare.html

vishalsiddula · Apr 19, 2019 · a85e4e7 · a85e4e7
1 parent 26d76ed
commit a85e4e7
Showing 1 changed file with 19 additions and 4 deletions.
diff --git a/gmail/compare.html b/gmail/compare.html
@@ -96,9 +96,9 @@ <h1>Simplify <em>/</em> Gmail</h1>
 	</div>
 
 	<div id="screens" class="box">
-		<p>Click to compare</p> 
-		<img src="screens/inbox_simplify.png" onclick="toggleImg(this, 'inbox')">
-		<img src="screens/cv_simplify.png" onclick="toggleImg(this, 'cv')">
+		<p><b>Click below to compare before vs after</b></p> 
+		<img src="screens/inbox_simplify.png" onclick="toggleImg(this, 'inbox', true)" id="tl">
+		<img src="screens/cv_simplify.png" onclick="toggleImg(this, 'cv', true)" id="cv">
 	</div>
 
 	<a name="about"></a>
@@ -114,20 +114,35 @@ <h2>I've got feedback</h2>
 	</div>
 </body>
 <script type="text/javascript">
-	function toggleImg(img, which) {
+	function toggleImg(img, which, shouldStop) {
 		if (which == "inbox") {
 			if (img.src.indexOf("inbox_simplify.png") > 0) {
 				img.src = "screens/inbox.png";
 			} else {
 				img.src = "screens/inbox_simplify.png";
 			}
+			if (shouldStop) clearInterval(autoCycleTL)
 		} else {
 			if (img.src.indexOf("cv_simplify.png") > 0) {
 				img.src = "screens/cv.png";
 			} else {
 				img.src = "screens/cv_simplify.png";
 			}
+			if (shouldStop) clearInterval(autoCycleCV)
 		}
 	}
+
+	function autoCycleInbox() {
+		var img = document.getElementById('tl');
+		toggleImg(img, 'inbox', false);
+	}
+
+	function autoCycleCv() {
+		var img = document.getElementById('cv');
+		toggleImg(img, 'cv', false);
+	}
+
+	var autoCycleTL = setInterval(autoCycleInbox, 3000);
+	var autoCycleCV = setInterval(autoCycleCv, 3000);
 </script>
 </html>