Skip to content

Instantly share code, notes, and snippets.

@rmetzger

rmetzger/websitetop.patch

Created January 11, 2015 19:54
Show Gist options
  • Save rmetzger/29d136097459a0ec4d8c to your computer and use it in GitHub Desktop.
Save rmetzger/29d136097459a0ec4d8c to your computer and use it in GitHub Desktop.
Download ZIP
Because svn doesn't support local branches, I have to put my wip on flink.apache.org here
Raw
websitetop.patch
Index: index.html
===================================================================
--- index.html (revision 1650799)
+++ index.html (working copy)
@@ -13,6 +13,79 @@
<link href="css/main/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/main/main.css" rel="stylesheet">
<link rel="stylesheet" href="css/syntax.css">
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
+ <script src="js/main/jquery.mobile.events.min.js"></script>
+ <script src="js/main/main.js"></script>
+
+ <script>
+ // how to: http://stackoverflow.com/questions/22595850/lightbox-like-overlay-effect-to-display-a-hidden-div-on-click
+
+ // just closes all overlays
+ function closeOverlay() {
+ $(".overlay").css("visibility", "hidden");
+ $(".overlay").css("opacity", "0");
+ $(".overlay").css("z-index", "-1");
+
+ $(".background").css("visibility", "hidden");
+ $(".background").css("opacity", "0");
+ }
+ function open(element) {
+ $("#overlay-" + element).css("visibility", "visible");
+ $("#overlay-" + element).css("opacity", "1");
+ $("#overlay-" + element).css("z-index", "999");
+
+ $(".background").css("visibility", "visible");
+ $(".background").css("opacity", "1");
+ $(".background").css("z-index", "999");
+ }
+ $( document ).ready(function() {
+ $(".clickable").click( function(event) {
+ console.log(event);
+ open(event.target.id);
+ })
+ });
+ </script>
+
+
+ <style>
+ div.background {
+ position:fixed;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left:0;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 999;
+ color: black;
+ -webkit-transition: opacity 0.8s;
+ transition: opacity 0.8s;
+ opacity: 1;
+ visibility: hidden
+ }
+
+ div.overlay {
+ /*width: 650px;
+ height: 400px; */
+ position: fixed;
+ left: calc(50% - 340px);
+ top: calc(50% - 230px);
+ -moz-border-radius: 15px;
+ border-radius: 15px;
+ z-index: -1;
+ -webkit-transition: opacity 1.5s;
+ transition: opacity 1.5s;
+ opacity: 0;
+ background-color: white;
+ }
+ .overlay p, ul{
+ text-align: left !important;
+ padding-left: 3px;
+ }
+ .overlay img {
+ width: 650px;
+ margin:4px;
+ }
+ </style>
</head>
<body>
<div class="af-header-container">
@@ -125,6 +198,64 @@
<section id="af-assets">
<div class="container">
<div class="row">
+ <div class="col-md-12 af-asset">
+ <div class="background" onClick="closeOverlay()"></div>
+ <div class="overlay" id="overlay-java">
+ <h2>Flink's Java API</h2>
+ <a style="position:absolute; bottom:0px;" href="javascript:void(0);" onclick="closeOverlay();">Close</a>
+ </div>
+
+ <div class="overlay" id="overlay-hadoop">
+ <p>
+ <img src="img/frontSlides/Slide21.PNG">
+ </p>
+ <a style="position:absolute; bottom:0px;" href="javascript:void(0);" onclick="closeOverlay();">Close</a>
+ </div>
+
+ <div class="overlay" id="overlay-scala">
+ <p>
+ <img src="img/frontSlides/Slide58.PNG">
+ </p>
+ <a style="position:absolute; bottom:0px;" href="javascript:void(0);" onclick="closeOverlay();">Close</a>
+ </div>
+
+ <div class="overlay" id="overlay-optimizer">
+ <p>
+ <img src="img/frontSlides/Slide19.PNG">
+ </p>
+ <a style="position:absolute; bottom:0px;" href="javascript:void(0);" onclick="closeOverlay();">Close</a>
+ </div>
+
+ <div class="overlay" id="overlay-distr">
+ <p>
+ <img src="img/frontSlides/Slide11.PNG">
+ </p>
+ <a style="position:absolute; bottom:0px;" href="javascript:void(0);" onclick="closeOverlay();">Close</a>
+ </div>
+
+
+ <div style="width:250px; position:absolute; margin-left:30px; text-align:left;">
+ <h3>What is Apache Flink?</h3>
+ Apache Flink is an open source system for fast and versatile data analytics in clusters. Flink supports batch and streaming analytics, in one system. Analytical programs can be written in concise and elegant APIs in Java and Scala.
+ </div>
+
+ <img width="1011px" src="img/WhatIsFlink.png" usemap="#imgmap201511021956">
+
+ <map id="imgmap201511021956" name="imgmap201511021956">
+ <area shape="rect" id="java" class="clickable" target="_self" coords="295,23,398,77" href="javascript:void(9);" />
+ <area shape="rect" id="scala" class="clickable" coords="407,21,552,68" href="javascript:void(8);" />
+ <area shape="rect" id="hadoop" class="clickable" coords="557,29,711,81" href="javascript:void(7);" target="" />
+ <area shape="rect" alt="" title="" coords="2,237,211,434" href="javascript:void(1);" target="" />
+ <area shape="rect" alt="" title="" coords="791,239,999,439" href="javascript:void(2);" target="" />
+ <area shape="rect" id="optimizer" class="clickable" coords="330,184,482,298" href="javascript:void(3);" target="" />
+ <area shape="rect" coords="512,187,662,299" href="javascript:void(4);" target="" />
+ <area shape="rect" alt="" title="" coords="512,323,663,435" href="javascript:void(5);" target="" />
+ <area shape="rect" id="distr" class="clickable" coords="332,322,478,441" href="javascript:void(6);" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
+
+ <hr>
+ </div>
+ </div>
+ <div class="row">
<div class="col-md-4 af-asset">
<div class="af-asset-img">
<a href="#af-fast"><img class="img-responsive" src="img/main/assets/fast-icon.png" alt="Apache Flink is Fast" /></a>
@@ -360,6 +491,7 @@
</div>
</div>
</footer>
+
</body>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
@@ -376,7 +508,4 @@
ga('create', 'UA-52545728-1', 'auto');
ga('send', 'pageview');
</script>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
- <script src="js/main/jquery.mobile.events.min.js"></script>
- <script src="js/main/main.js"></script>
</html>
Index: site/downloads.html
===================================================================
--- site/downloads.html (revision 1650799)
+++ site/downloads.html (working copy)
@@ -127,16 +127,16 @@
<div style="padding-top:120px" class="container">
<h1>Downloads</h1>
-<p><script type="text/javascript">
+<script type="text/javascript">
$( document ).ready(function() {
// Handler for .ready() called.
- $(&#39;.ga-track&#39;).on(&#39;click&#39;, function() {
+ $('.ga-track').on('click', function() {
// we just use the element id for tracking with google analytics
- ga(&#39;send&#39;, &#39;event&#39;, &#39;button&#39;, &#39;click&#39;, $(this).attr(&#39;id&#39;));
- });</p>
+ ga('send', 'event', 'button', 'click', $(this).attr('id'));
+ });
-<p>});
-</script></p>
+});
+</script>
<p class="lead">Pick the <strong>Apache Flink</strong> package matching your Hadoop version.</p>
Index: site/index.html
===================================================================
--- site/index.html (revision 1650799)
+++ site/index.html (working copy)
@@ -13,6 +13,79 @@
<link href="css/main/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/main/main.css" rel="stylesheet">
<link rel="stylesheet" href="css/syntax.css">
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
+ <script src="js/main/jquery.mobile.events.min.js"></script>
+ <script src="js/main/main.js"></script>
+
+ <script>
+ // how to: http://stackoverflow.com/questions/22595850/lightbox-like-overlay-effect-to-display-a-hidden-div-on-click
+
+ // just closes all overlays
+ function closeOverlay() {
+ $(".overlay").css("visibility", "hidden");
+ $(".overlay").css("opacity", "0");
+ $(".overlay").css("z-index", "-1");
+
+ $(".background").css("visibility", "hidden");
+ $(".background").css("opacity", "0");
+ }
+ function open(element) {
+ $("#overlay-" + element).css("visibility", "visible");
+ $("#overlay-" + element).css("opacity", "1");
+ $("#overlay-" + element).css("z-index", "999");
+
+ $(".background").css("visibility", "visible");
+ $(".background").css("opacity", "1");
+ $(".background").css("z-index", "999");
+ }
+ $( document ).ready(function() {
+ $(".clickable").click( function(event) {
+ console.log(event);
+ open(event.target.id);
+ })
+ });
+ </script>
+
+
+ <style>
+ div.background {
+ position:fixed;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left:0;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 999;
+ color: black;
+ -webkit-transition: opacity 0.8s;
+ transition: opacity 0.8s;
+ opacity: 1;
+ visibility: hidden
+ }
+
+ div.overlay {
+ /*width: 650px;
+ height: 400px; */
+ position: fixed;
+ left: calc(50% - 340px);
+ top: calc(50% - 230px);
+ -moz-border-radius: 15px;
+ border-radius: 15px;
+ z-index: -1;
+ -webkit-transition: opacity 1.5s;
+ transition: opacity 1.5s;
+ opacity: 0;
+ background-color: white;
+ }
+ .overlay p, ul{
+ text-align: left !important;
+ padding-left: 3px;
+ }
+ .overlay img {
+ width: 650px;
+ margin:4px;
+ }
+ </style>
</head>
<body>
<div class="af-header-container">
@@ -125,6 +198,64 @@
<section id="af-assets">
<div class="container">
<div class="row">
+ <div class="col-md-12 af-asset">
+ <div class="background" onClick="closeOverlay()"></div>
+ <div class="overlay" id="overlay-java">
+ <h2>Flink's Java API</h2>
+ <a style="position:absolute; bottom:0px;" href="javascript:void(0);" onclick="closeOverlay();">Close</a>
+ </div>
+
+ <div class="overlay" id="overlay-hadoop">
+ <p>
+ <img src="img/frontSlides/Slide21.PNG">
+ </p>
+ <a style="position:absolute; bottom:0px;" href="javascript:void(0);" onclick="closeOverlay();">Close</a>
+ </div>
+
+ <div class="overlay" id="overlay-scala">
+ <p>
+ <img src="img/frontSlides/Slide58.PNG">
+ </p>
+ <a style="position:absolute; bottom:0px;" href="javascript:void(0);" onclick="closeOverlay();">Close</a>
+ </div>
+
+ <div class="overlay" id="overlay-optimizer">
+ <p>
+ <img src="img/frontSlides/Slide19.PNG">
+ </p>
+ <a style="position:absolute; bottom:0px;" href="javascript:void(0);" onclick="closeOverlay();">Close</a>
+ </div>
+
+ <div class="overlay" id="overlay-distr">
+ <p>
+ <img src="img/frontSlides/Slide11.PNG">
+ </p>
+ <a style="position:absolute; bottom:0px;" href="javascript:void(0);" onclick="closeOverlay();">Close</a>
+ </div>
+
+
+ <div style="width:250px; position:absolute; margin-left:30px; text-align:left;">
+ <h3>What is Apache Flink?</h3>
+ Apache Flink is an open source system for fast and versatile data analytics in clusters. Flink supports batch and streaming analytics, in one system. Analytical programs can be written in concise and elegant APIs in Java and Scala.
+ </div>
+
+ <img width="1011px" src="img/WhatIsFlink.png" usemap="#imgmap201511021956">
+
+ <map id="imgmap201511021956" name="imgmap201511021956">
+ <area shape="rect" id="java" class="clickable" target="_self" coords="295,23,398,77" href="javascript:void(9);" />
+ <area shape="rect" id="scala" class="clickable" coords="407,21,552,68" href="javascript:void(8);" />
+ <area shape="rect" id="hadoop" class="clickable" coords="557,29,711,81" href="javascript:void(7);" target="" />
+ <area shape="rect" alt="" title="" coords="2,237,211,434" href="javascript:void(1);" target="" />
+ <area shape="rect" alt="" title="" coords="791,239,999,439" href="javascript:void(2);" target="" />
+ <area shape="rect" id="optimizer" class="clickable" coords="330,184,482,298" href="javascript:void(3);" target="" />
+ <area shape="rect" coords="512,187,662,299" href="javascript:void(4);" target="" />
+ <area shape="rect" alt="" title="" coords="512,323,663,435" href="javascript:void(5);" target="" />
+ <area shape="rect" id="distr" class="clickable" coords="332,322,478,441" href="javascript:void(6);" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
+
+ <hr>
+ </div>
+ </div>
+ <div class="row">
<div class="col-md-4 af-asset">
<div class="af-asset-img">
<a href="#af-fast"><img class="img-responsive" src="img/main/assets/fast-icon.png" alt="Apache Flink is Fast" /></a>
@@ -360,6 +491,7 @@
</div>
</div>
</footer>
+
</body>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
@@ -376,7 +508,4 @@
ga('create', 'UA-52545728-1', 'auto');
ga('send', 'pageview');
</script>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
- <script src="js/main/jquery.mobile.events.min.js"></script>
- <script src="js/main/main.js"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment