diff options
| -rw-r--r-- | website/resources/css/custom.css | 43 | ||||
| -rw-r--r-- | website/resources/js/main.js | 27 | ||||
| -rw-r--r-- | website/templates/main.html | 12 |
3 files changed, 76 insertions, 6 deletions
diff --git a/website/resources/css/custom.css b/website/resources/css/custom.css index ff31de04..3c8e0399 100644 --- a/website/resources/css/custom.css +++ b/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; } diff --git a/website/resources/js/main.js b/website/resources/js/main.js index 99ae3b19..f23ea28e 100644 --- a/website/resources/js/main.js +++ b/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); })($); diff --git a/website/templates/main.html b/website/templates/main.html index a0ead2cc..0591db4f 100644 --- a/website/templates/main.html +++ b/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> |