The main page now clicks through to the video.

website/resources/css/custom.css

@@ -1,3 +1,44 @@
+#clickForVideo {
+	padding: 20px 30px;
+	background-color: #DDD;
+	cursor: pointer;
+	margin-left: auto;
+	margin-right: auto;
+	margin-bottom: 40px;
+}
+
+.errorBox {
+	border: 1px dashed #F44;
+	font-size: 1.2em;
+	padding: 20px;
+	background-color: #EEE;
+	text-align: center;
+}
+
+.noSupportersBox {
+	font-size: 1.2em;
+	padding: 20px;
+	background-color: #EEE;
+	text-align: center;
+}
+
+.spinner {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	width: 16px;
+	height: 16px;
+}
+
+.legalese {
+	font-style: italic;
+	font-size: 0.8em;
+}
+
+#companyLogo {
+	margin-right: 8px;
+}
+
 html {
 	position: relative;
 	min-height: 100%;
@@ -96,7 +137,7 @@ div.snippet code {
 }
 
 h1, h2, h3 {
-	padding: 40px;
+	padding: 12px 40px;
 	text-align: center;
 }
 

website/resources/js/main.js

@@ -3,6 +3,31 @@
 (function($) {
 	swfobject.registerObject("player", "9.0.98", "videos/expressInstall.swf");
 	
+	function clickToTap() {
+		if (matchMedia && matchMedia('(hover: none)').matches) $(".clickToTap").each(function() {
+			var x = $(this);
+			if (x.text() === "Click") x.text("Tap");
+			else x.text("tap");
+		});
+	}
+	
+	function clickForVideo() {
+		var cfv = $("#clickForVideo");
+		var f = function() {
+			if (!cfv.is(":visible")) return;
+			cfv.hide();
+			$("#demoVideo").show().get(0).play();
+		};
+		
+		cfv.css("cursor", "pointer").on("click", f).on("touchstart", function() {
+			$(this).data("moved", 0);
+		}).on("touchmove", function() {
+			$(this).data("moved", 1);
+		}).on("touchend", function() {
+			if ($(this).data("moved") === 0) f();
+		});
+	}
+	
 	function toKey(href) {
 		var lnk = "__savedContent_" + href.replace(/\//g, '_');
 		if (lnk.substring(lnk.length - 5) === ".html") lnk = lnk.substring(0, lnk.length - 5);
@@ -72,4 +97,6 @@
 	}
 	
 	$(ajaxFeaturePages);
+	$(clickToTap);
+	$(clickForVideo);
 })($);

website/templates/main.html

@@ -1,16 +1,16 @@
 <#import "/_scaffold.html" as main>
-<@main.scaffold>
+<@main.scaffold load=["/js/supporters.js"]>
 	<div class="page-header top5">
 		<div class="row text-center">
 			<@main.h1 title="Project Lombok" />
 			<p>
 				Project Lombok is a java library that automatically plugs into your editor and build tools, spicing up your java.<br />
-				Never write another getter or equals method again. Early access to future java features such as <code>val</code>, and much more.<br />
-				Watch the 4 minute demo below to learn more!
+				Never write another getter or equals method again. Early access to future java features such as <code>val</code>, and much more.
 			</p>
 		</div>
 		<div class="video text-center">
-			<video width="800" height="480" poster="/img/poster.png" controls="controls" preload="none">
+			<div id="clickForVideo"><span class="clickToTap">Click</span> to watch a 4 minute demo to learn more.</div>
+			<video id="demoVideo" hidden="hidden" width="800" height="480" poster="/img/poster.png" controls="controls" preload="none">
 				<source src="/videos/lombok.ogv" type="video/ogg" />
 				<source src="/videos/lombok.mp4" type="video/mp4" />
 				<source src="/videos/lombok-iPhone.m4v" type="video/mp4" />
@@ -36,9 +36,11 @@
 			</video>
 			<div class="row">
 				<div class="text-center">
-					<a href="http://jnb.ociweb.com/jnb/jnbJan2010.html">I can't see video. Show me a text and images based explanation and tutorial instead!</a>
+					<a href="http://jnb.ociweb.com/jnb/jnbJan2010.html">Show me a text and images based explanation and tutorial instead!</a>
 				</div>
 			</div>
+			<div class="row supporterBar">
+			</div>
 		</div>
 	</div>
 </@main.scaffold>