[NaCl SDK AppEngine] Update demos design.

BUG=none R=sbc@chromium.org Review URL: https://codereview.chromium.org/64373005 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@233750 0039d316-1c4b-4281-b951-d872f2087c98
author: binji@chromium.org <binji@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> 2013-11-08 01:29:11 +0000
committer: binji@chromium.org <binji@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> 2013-11-08 01:29:11 +0000
commit: 1e5a5a9316011fd4dba904995bcddd0945bca437 (patch)
tree: 447b9033cb6caf0e63352c8721d8e1416ba77aef /native_client_sdk
parent: ce5b807d3e244c28aa3d0d3abe53072e25397100 (diff)
download: chromium_src-1e5a5a9316011fd4dba904995bcddd0945bca437.zip
chromium_src-1e5a5a9316011fd4dba904995bcddd0945bca437.tar.gz
chromium_src-1e5a5a9316011fd4dba904995bcddd0945bca437.tar.bz2
20 files changed, 988 insertions, 528 deletions
diff --git a/native_client_sdk/src/gonacl_appengine/app.yaml b/native_client_sdk/src/gonacl_appengine/app.yaml
index 6dbc6f0..4fcef78 100644
--- a/native_client_sdk/src/gonacl_appengine/app.yaml
+++ b/native_client_sdk/src/gonacl_appengine/app.yaml
@@ -17,6 +17,10 @@ handlers:
   static_files: static/pnacl-demo-earth/\1
   upload: static/pnacl-demo-earth/.*
 
+- url: /static/home/(.*)
+  static_files: static/home/\1
+  upload: static/home/.*
+
 - url: /static
   static_dir: static
 
diff --git a/native_client_sdk/src/gonacl_appengine/static/common.css b/native_client_sdk/src/gonacl_appengine/static/common.css
deleted file mode 100644
index e64fd0d..0000000
--- a/native_client_sdk/src/gonacl_appengine/static/common.css
+++ /dev/null
@@ -1,97 +0,0 @@
-/* Copyright (c) 2013 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file. */
-
-body {
-  /* from http://css-tricks.com/snippets/css/better-helvetica/ */
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
-      "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-  font-weight: 300;
-  overflow: hidden;
-}
-.absolute-fill-parent {
-  position: relative;
-}
-.absolute-fill {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-.flex-container {
-  margin: 0;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-.main {
-  background-color: #000;
-  -moz-box-flex: 1;
-  -ms-flex: 1;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  flex: 1;
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.flex-column {
-  -moz-box-orient: vertical;
-  -ms-flex-direction: column;
-  -webkit-box-orient: vertical;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-}
-.flex-justify-center {
-  -moz-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-#message {
-  text-align: center;
-  width: 100%;
-}
-#statusField {
-  display: none;
-  color: #fff;
-  font-size: 34px;
-  text-align: center;
-  width: 100%;
-}
-#progress {
-  display: none;
-  margin: auto;
-  width: 300px;
-}
-#nacl_module {
-  height: 100%;
-  width: 100%;
-}
-.sidebar {
-  padding: 0 8px;
-  overflow-y: auto;
-  width: 350px;
-}
-#config {
-  width: 100%;
-}
-#config .name {
-  font-weight: bold;
-  padding-right: 8px;
-  text-align: right;
-  white-space: nowrap;
-  width: 1px;
-}
-#threadCount, #lightRange, #zoomRange {
-  width: 100%;
-}
-.small {
-  font-size: 12px;
-}
diff --git a/native_client_sdk/src/gonacl_appengine/static/home/index.html b/native_client_sdk/src/gonacl_appengine/static/home/index.html
new file mode 100644
index 0000000..e7e56bd
--- /dev/null
+++ b/native_client_sdk/src/gonacl_appengine/static/home/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <!--
+  Copyright (c) 2013 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+  -->
+  <head>
+    <meta charset="UTF-8">
+
+    <title>PNaCl Demos</title>
+
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,700">
+    <link href="../styles/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="example.js"></script>
+
+  </head>
+
+  <body class="demo">
+
+    <header>
+      <h1>PNaCl Demos</h1>
+
+    </header>
+
+    <section>
+      <div class="intro">
+        <p>
+          Choose a demo from the list!
+        </p>
+      </div>
+
+    </section>
+
+  </body>
+</html>
diff --git a/native_client_sdk/src/gonacl_appengine/static/index.html b/native_client_sdk/src/gonacl_appengine/static/index.html
new file mode 100644
index 0000000..710bfd5
--- /dev/null
+++ b/native_client_sdk/src/gonacl_appengine/static/index.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width">
+
+  <title>PNaCl Demos</title>
+
+  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300">
+  <link href="styles/style.css" rel="stylesheet">
+</head>
+<body>
+  <nav>
+    <h1>PNaCl Demos</h1>
+    <ul>
+      <li id="lua">
+        <a href="pnacl-demo-lua/" target="content">Lua Editor</a>
+      </li>
+      <li id="bullet">
+        <a href="pnacl-demo-bullet/" target="content">Bullet Physics</a>
+      </li>
+      <li id="earth">
+        <a href="pnacl-demo-earth/" target="content">Raycasted Earth</a>
+      </li>
+      <li id="life">
+        <a href="pnacl-demo-life/" target="content">Game of Life</a>
+      </li>
+      <li id="voronoi">
+        <a href="pnacl-demo-voronoi/" target="content">Voronoi Simulation</a>
+      </li>
+      <li id="smoothlife">
+        <a href="pnacl-demo-smoothlife/" target="content">SmoothLife</a>
+      </li>
+      <li id="cube">
+        <a href="pnacl-demo-cube/" target="content">Rotating Cube</a>
+      </li>
+    </ul>
+  </nav>
+
+  <section>
+    <iframe src="home/index.html" frameborder="0" id="content" width="100%" height="100%"></iframe>
+  </section>
+
+  <script>
+    var links = document.querySelectorAll('li a');
+    for (var l = 0; l < links.length; l++) {
+      links[l].addEventListener('click', onLinkClick, false);
+    }
+
+    function onLinkClick(evt) {
+      for (var l = 0; l < links.length; l++) {
+        links[l].classList.remove('active');
+      }
+      evt.target.classList.add('active');
+    }
+  </script>
+</body>
+</html>
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/index.html b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/index.html
index 7af7346..87f6eb2 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/index.html
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/index.html
@@ -1,88 +1,92 @@
+<!DOCTYPE html>
 <html>
-<!--
-Copyright (c) 2013 The Chromium Authors. All rights reserved.
-Use of this source code is governed by a BSD-style license that can be
-found in the LICENSE file.
--->
-<head>
-  <title>Bullet Physics</title>
-  <script type="text/javascript" src="NaClAM.js"></script>
-  <script type="text/javascript" src="NaClAMBullet.js"></script>
-  <script type="text/javascript" src="http://commondatastorage.googleapis.com/gonacl/pnacl-demo-bullet/three.min.js"></script>
-  <script type="text/javascript" src="scene.js"></script>
-  <script type="text/javascript" src="world.js"></script>
-  <script type="text/javascript" src="scenes.js"></script>
-  <link href="/static/common.css" rel="stylesheet" type="text/css">
-  <style>
-    .main {
-      background-color: #fff;
-    }
-    #curtain {
-      background-color: rgba(0, 0, 0, 1.0);
-    }
-    #curtain.lift {
-      -webkit-transition: background-color 1s;
-      background-color: rgba(0, 0, 0, 0);
-      pointer-events: none;
-    }
-    .no-pointer-events {
-      pointer-events: none;
-    }
-    button {
-      display: block;
-    }
-  </style>
-</head>
-<body>
-  <div class="absolute-fill">
-    <div class="flex-container">
-      <div class="main absolute-fill-parent">
-        <div id="rendererContainer" class="absolute-fill"></div>
-        <div id="curtain" class="absolute-fill"></div>
-        <div class="absolute-fill no-pointer-events">
-          <div class="flex-container flex-column flex-justify-center">
-            <div id="message">
-              <div id="statusField"></div>
-              <progress id="progress"></progress>
-            </div>
+  <!--
+  Copyright (c) 2013 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+  -->
+  <head>
+    <meta charset="UTF-8">
+
+    <title>Bullet Physics</title>
+
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,700">
+    <link href="../styles/style.css" rel="stylesheet">
+
+
+    <script type="text/javascript" src="NaClAM.js"></script>
+    <script type="text/javascript" src="NaClAMBullet.js"></script>
+    <script type="text/javascript" src="http://commondatastorage.googleapis.com/gonacl/pnacl-demo-bullet/three.min.js"></script>
+    <script type="text/javascript" src="scene.js"></script>
+    <script type="text/javascript" src="world.js"></script>
+    <script type="text/javascript" src="scenes.js"></script>
+
+  </head>
+
+  <body class="demo">
+
+    <header>
+      <h1>Bullet Physics</h1>
+
+    </header>
+
+    <section>
+      <div class="intro">
+        <p>
+          An example of the <a href="http://bulletphysics.org/"><span class="label label-success">Bullet Physics SDK</span></a> ported to Native Client, using WebGL for rendering.
+        </p>
+        <p class="note">
+          Example courtesy  <a
+            href="http://www.johnmccutchan.com">John McCutchan</a>. Read his <a
+            href="http://www.johnmccutchan.com/2012/10/bullet-native-client-acceleration-module.html">description</a> of the demo or browse the <a
+            href="https://github.com/johnmccutchan/NaClAMBase">source</a>. Simulation time: <span id="simulationTime">0</span>&mu;s.
+        </p>
+
+        <div class="panel panel-info">
+
+          <h2>Controls</h2>
+
+          <div class="panel-body">
+            <ul>
+              <li><b>Click and drag</b> an object to move it</li>
+              <li><b>Click and drag</b> elsewhere to rotate the camera</li>
+              <li>Use the <b>mousewheel</b> to zoom in/out</li>
+            </ul>
+          </div>
+
+          <h2>Add Objects</h2>
+
+          <div class="panel-body">
+              <button type="button" class="btn btn-primary btn-block" id="jenga10">Block Tower (10 blocks)</button>
+              <button type="button" class="btn btn-primary btn-block" id="jenga20">Block Tower (20 blocks)</button>
+              <button type="button" class="btn btn-success btn-block" id="randomCube250">Random Cubes (250)</button>
+              <button type="button" class="btn btn-success btn-block" id="randomCube1000">Random Cubes (1000)</button>
+              <button type="button" class="btn btn-success btn-block" id="randomCube2000">Random Cubes (2000)</button>
+              <button type="button" class="btn btn-warning btn-block" id="randomCylinder500">Random Cylinders (500)</button>
+              <button type="button" class="btn btn-danger btn-block" id="randomShapes">Random Shapes</button>
+              <button type="button" class="btn btn-default btn-block" id="reload">Reload Scene</button>
           </div>
         </div>
       </div>
-      <div class="sidebar">
-        <h1>Bullet Physics</h1>
-        <div id="config">
-          <button id="jenga10">Block Tower (10 blocks)</button>
-          <button id="jenga20">Block Tower (20 blocks)</button>
-          <button id="randomShapes">Random Shapes</button>
-          <button id="randomCube250">Random Cubes (250)</button>
-          <button id="randomCylinder500">Random Cylinders (500)</button>
-          <button id="randomCube1000">Random Cubes (1000)</button>
-          <button id="randomCube2000">Random Cubes (2000)</button>
-          <button id="reload">Reload Scene</button>
+
+      <div class="Demo-body">
+
+      <div id="listener" class="Demo-content">
+        <div id="rendererContainer"></div>
+      </div>
+    </div>
+
+    <div id="loading-cover">
+      <div id="message">
+        <div id="statusField"></div>
+        <div id="progress" class="progress progress-striped active">
+          <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
+          </div>
         </div>
-        <ul>
-          <li>Click and drag an object to move it</li>
-          <li>Click and drag elsewhere to rotate the camera</li>
-          <li>Use the mousewheel to zoom in/out</li>
-        </ul>
-        <p class="small">
-          More info about Bullet Physics can be found at <a
-          href="http://bulletphysics.org/">http://bulletphysics.org</a>.
-        </p>
-        <p class="small">
-          This demo was implemented by <a
-            href="http://www.johnmccutchan.com">John McCutchan</a>.  Read his
-          blog post about Native Client acceleration modules <a
-            href="http://www.johnmccutchan.com/2012/10/bullet-native-client-acceleration-module.html">here</a>,
-          and see the source for this demo <a
-            href="https://github.com/johnmccutchan/NaClAMBase">here</a>.
-        </p>
-        <p class="small">
-          Simulation time: <span id="simulationTime">0</span>&mu;s.
-        </p>
       </div>
     </div>
-  </div>
+  </section>
+
+  <script type="text/javascript" src="main.js"></script>
 </body>
-<script type="text/javascript" src="main.js"></script>
 </html>
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/main.js b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/main.js
index 7329adf..770584b 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/main.js
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-bullet/main.js
@@ -10,8 +10,6 @@ function moduleLoad() {
   animate();
   NaClAMBulletInit();
   loadJenga20();
-
-  document.querySelector('#curtain').classList.add('lift');
 }
 
 function moduleLoadError() {
@@ -22,15 +20,15 @@ function moduleLoadProgress(event) {
   $('progress').style.display = 'block';
 
   var loadPercent = 0.0;
-  var bar = document.getElementById('progress');
+  var bar = $('progress-bar');
+
   if (event.lengthComputable && event.total > 0) {
     loadPercent = event.loaded / event.total * 100.0;
-    bar.value = loadPercent;
-    bar.max = 100;
   } else {
     // The total length is not yet known.
-    loadPercent = -1.0;
+    loadPercent = 10;
   }
+  bar.style.width = loadPercent + "%";
 }
 
 function moduleCrash(event) {
@@ -42,8 +40,6 @@ function moduleCrash(event) {
 }
 
 function updateStatus(opt_message) {
-  document.querySelector('#curtain').classList.remove('lift');
-
   var statusField = $('statusField');
   if (statusField) {
     statusField.style.display = 'block';
@@ -52,8 +48,7 @@ function updateStatus(opt_message) {
 }
 
 function hideStatus() {
-  $('statusField').style.display = 'none';
-  $('progress').style.display = 'none';
+  $('loading-cover').style.display = 'none';
 }
 
 function pageDidLoad() {
@@ -63,20 +58,25 @@ function pageDidLoad() {
   aM = new NaClAM('NaClAM');
   aM.enable();
 
-  var embedWrap = document.createElement('div');
+  var embedWrap = $('listener');
   embedWrap.addEventListener('load', moduleLoad, true);
   embedWrap.addEventListener('error', moduleLoadError, true);
   embedWrap.addEventListener('progress', moduleLoadProgress, true);
   embedWrap.addEventListener('crash', moduleCrash, true);
-  document.body.appendChild(embedWrap);
+
+  var revision = 233080;
+  var url = 'http://commondatastorage.googleapis.com/gonacl/demos/publish/' +
+      revision + '/bullet/NaClAMBullet.nmf';
 
   var embed = document.createElement('embed');
+  embed.setAttribute('name', 'NaClAM');
   embed.setAttribute('id', 'NaClAM');
   embed.setAttribute('width', '0');
   embed.setAttribute('height', '0');
   embed.setAttribute('type', 'application/x-pnacl');
-  embed.setAttribute('src', 'http://commondatastorage.googleapis.com/gonacl/demos/publish/233080/bullet/NaClAMBullet.nmf');
+  embed.setAttribute('src', url);
   embedWrap.appendChild(embed);
+
 }
 
 window.addEventListener("load", pageDidLoad, false);
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-cube/example.js b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-cube/example.js
index 3803f8c..3cca932 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-cube/example.js
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-cube/example.js
@@ -116,9 +116,8 @@ function handleCrash(event) {
  * This event listener is registered in attachDefaultListeners above.
  */
 function moduleDidLoad() {
-  var bar = $('progress');
-  bar.value = 100;
-  bar.max = 100;
+  var bar = $('progress-bar');
+  bar.style.width = 100;
   naclModule = $('nacl_module');
   hideStatus();
 }
@@ -127,8 +126,7 @@ function moduleDidLoad() {
  * Hide the status field and progress bar.
  */
 function hideStatus() {
-  $('statusField').style.display = 'none';
-  $('progress').style.display = 'none';
+  $('loading-cover').style.display = 'none';
 }
 
 /**
@@ -149,15 +147,15 @@ function moduleLoadProgress(event) {
   $('progress').style.display = 'block';
 
   var loadPercent = 0.0;
-  var bar = $('progress');
-  bar.max = 100;
+  var bar = $('progress-bar');
+
   if (event.lengthComputable && event.total > 0) {
     loadPercent = event.loaded / event.total * 100.0;
   } else {
     // The total length is not yet known.
-    loadPercent = -1.0;
+    loadPercent = 10;
   }
-  bar.value = loadPercent;
+  bar.style.width = loadPercent + "%";
 }
 
 /**
@@ -250,7 +248,7 @@ document.addEventListener('DOMContentLoaded', function() {
   if (!browserSupportsPNaCl()) {
     updateStatus('Browser does not support PNaCl or PNaCl is disabled');
   } else if (naclModule == null) {
-    createNaClModule('cube', 480, 480);
+    createNaClModule('cube', '100%', '100%');
     attachDefaultListeners();
   } else {
     // It's possible that the Native Client module onload event fired
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-cube/index.html b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-cube/index.html
index e011719..4d3e784 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-cube/index.html
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-cube/index.html
@@ -8,59 +8,79 @@ found in the LICENSE file.
 <head>
   <meta charset="UTF-8">
   <title>Rotating Cube</title>
+  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,700">
+  <link href="../styles/style.css" rel="stylesheet">
   <script type="text/javascript" src="example.js"></script>
-  <link href="/static/common.css" rel="stylesheet" type="text/css">
 </head>
-<body>
-  <div class="absolute-fill">
-    <div class="flex-container">
-      <div class="main absolute-fill-parent">
-        <div class="absolute-fill">
-          <div class="flex-container flex-column flex-justify-center">
-            <div id="message">
-              <div id="statusField"></div>
-              <progress id="progress"></progress>
+<body class="demo">
+
+  <header>
+    <h1>Rotating Cube</h1>
+  </header>
+
+  <section>
+    <div class="intro">
+      <p>
+        An example showing rendering via OpenGLES2 in a Native Client module.
+      </p>
+      <p class="note">
+        Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/api/graphics_3d</tt>).
+      </p>
+
+      <div class="panel panel-info">
+        <div class="panel-body">
+          <table id="config" cellspacing="0" cellpadding="0">
+            <tbody>
+              <tr>
+                <td class="name">X Angle:</td>
+                <td class="value">
+                  <input type="range" id="xAngle" min="0" max="360" step="1"
+                      value="0">
+                </td>
+              </tr>
+              <tr>
+                <td class="name">Y Angle:</td>
+                <td class="value">
+                  <input type="range" id="yAngle" min="0" max="360" step="1"
+                      value="0">
+                </td>
+              </tr>
+              <tr>
+                <td class="name">Animating:</td>
+                <td class="value">
+                  <label>
+                    off
+                    <input type="radio" id="animateOff" value="false">
+                  </label>
+                  <label>
+                    on
+                    <input type="radio" id="animateOn" value="true"
+                        checked="true">
+                  </label>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <div class="Demo-body">
+      <div id="listener" class="Demo-content"></div>
+    </div>
+
+    <div id="loading-cover">
+      <div id="message">
+        <div id="statusField"></div>
+          <div id="progress" class="progress progress-striped active">
+            <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
             </div>
           </div>
         </div>
-        <div id="listener" class="absolute-fill"></div>
-      </div>
-      <div class="sidebar">
-        <h1>Rotating Cube</h1>
-        <table id="config">
-          <tbody>
-            <tr>
-              <td class="name">X Angle:</td>
-              <td class="value">
-                <input type="range" id="xAngle" min="0" max="360" step="1"
-                    value="0">
-              </td>
-            </tr>
-            <tr>
-              <td class="name">Y Angle:</td>
-              <td class="value">
-                <input type="range" id="yAngle" min="0" max="360" step="1"
-                    value="0">
-              </td>
-            </tr>
-            <tr>
-              <td class="name">Animating:</td>
-              <td class="value">
-                <label>
-                  off
-                  <input type="radio" id="animateOff" value="false">
-                </label>
-                <label>
-                  on
-                  <input type="radio" id="animateOn" value="true"
-                      checked="true">
-                </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
       </div>
     </div>
+
+  </section>
   </div>
 </body>
 </html>
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-earth/example.js b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-earth/example.js
index af97fe5..7a09488 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-earth/example.js
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-earth/example.js
@@ -116,9 +116,8 @@ function handleCrash(event) {
  * This event listener is registered in attachDefaultListeners above.
  */
 function moduleDidLoad() {
-  var bar = $('progress');
-  bar.value = 100;
-  bar.max = 100;
+  var bar = $('progress-bar');
+  bar.style.width = 100;
   naclModule = $('nacl_module');
   hideStatus();
   setThreadCount();
@@ -128,8 +127,7 @@ function moduleDidLoad() {
  * Hide the status field and progress bar.
  */
 function hideStatus() {
-  $('statusField').style.display = 'none';
-  $('progress').style.display = 'none';
+  $('loading-cover').style.display = 'none';
 }
 
 /**
@@ -150,17 +148,18 @@ function moduleLoadProgress(event) {
   $('progress').style.display = 'block';
 
   var loadPercent = 0.0;
-  var bar = $('progress');
-  bar.max = 100;
+  var bar = $('progress-bar');
+
   if (event.lengthComputable && event.total > 0) {
     loadPercent = event.loaded / event.total * 100.0;
   } else {
     // The total length is not yet known.
-    loadPercent = -1.0;
+    loadPercent = 10;
   }
-  bar.value = loadPercent;
+  bar.style.width = loadPercent + "%";
 }
 
+
 /**
  * If the element with id 'statusField' exists, then set its HTML to the status
  * message as well.
@@ -264,7 +263,7 @@ document.addEventListener('DOMContentLoaded', function() {
   if (!browserSupportsPNaCl()) {
     updateStatus('Browser does not support PNaCl or PNaCl is disabled');
   } else if (naclModule == null) {
-    createNaClModule('earth', 480, 480);
+    createNaClModule('earth', '100%', '100%');
     attachDefaultListeners();
   } else {
     // It's possible that the Native Client module onload event fired
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-earth/index.html b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-earth/index.html
index bb01c1d..31393ca 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-earth/index.html
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-earth/index.html
@@ -1,85 +1,110 @@
 <!DOCTYPE html>
 <html>
-<!--
-Copyright (c) 2013 The Chromium Authors. All rights reserved.
-Use of this source code is governed by a BSD-style license that can be
-found in the LICENSE file.
--->
-<head>
-  <meta charset="UTF-8">
-  <title>Multi-Threaded Raycasted Earth</title>
-  <script type="text/javascript" src="example.js"></script>
-  <link href="/static/common.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  <div class="absolute-fill">
-    <div class="flex-container">
-      <div class="main absolute-fill-parent">
-        <div class="absolute-fill">
-          <div class="flex-container flex-column flex-justify-center">
-            <div id="message">
-              <div id="statusField"></div>
-              <progress id="progress"></progress>
-            </div>
+  <!--
+  Copyright (c) 2013 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+  -->
+  <head>
+    <meta charset="UTF-8">
+
+    <title>Multi-Threaded Raycasted Earth</title>
+
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,700">
+    <link href="../styles/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="example.js"></script>
+
+  </head>
+
+  <body class="demo">
+
+    <header>
+      <h1>Multi-Threaded Raycasted Earth</h1>
+
+    </header>
+
+    <section>
+      <div class="intro">
+        <p>
+          An example of using multiple threads to render the globe through ray-tracing.
+        </p>
+        <p class="note">
+          Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/demo/earth</tt>).
+        </p>
+
+        <div class="panel panel-info">
+
+          <h2>Controls</h2>
+
+          <div class="panel-body">
+            <table id="config" cellspacing="0" cellpadding="0">
+              <tbody>
+                <tr>
+                  <td class="name">Thread Count:</td>
+                  <td class="value">
+
+                    <select id="threadCount">
+                      <option value="0">Main Thread only</option>
+                      <option value="1">1 Thread</option>
+                      <option value="2" selected="selected">2 Threads</option>
+                      <option value="4">4 Threads</option>
+                      <option value="6">6 Threads</option>
+                      <option value="8">8 Threads</option>
+                      <option value="12">12 Threads</option>
+                      <option value="24">24 Threads</option>
+                      <option value="32">32 Threads</option>
+                    </select>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="name">Zoom:</td>
+                  <td class="value">
+                    <input type="range" id="zoomRange"
+                        min="1.0" max="50.0" step="0.5" value="14.0">
+                  </td>
+                </tr>
+                <tr>
+                  <td class="name">Light:</td>
+                  <td class="value">
+                    <input type="range" id="lightRange"
+                        min="0.2" max="2.0" step=".01" value="1.0">
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
-        <div id="listener" class="absolute-fill"></div>
-      </div>
-      <div class="sidebar">
-        <h1>Multi-Threaded Raycasted Earth</h1>
-        <table id="config">
-          <tbody>
-            <tr>
-              <td class="name">Thread Count:</td>
-              <td class="value">
-                <select id="threadCount">
-                  <option value="0">Main Thread only</option>
-                  <option value="1">1 Thread</option>
-                  <option value="2" selected="selected">2 Threads</option>
-                  <option value="4">4 Threads</option>
-                  <option value="6">6 Threads</option>
-                  <option value="8">8 Threads</option>
-                  <option value="12">12 Threads</option>
-                  <option value="24">24 Threads</option>
-                  <option value="32">32 Threads</option>
-                </select>
-              </td>
-            </tr>
-            <tr>
-              <td class="name">Zoom:</td>
-              <td class="value">
-                <input type="range" id="zoomRange"
-                    min="1.0" max="50.0" step="0.5" value="14.0">
-              </td>
-            </tr>
-            <tr>
-              <td class="name">Light:</td>
-              <td class="value">
-                <input type="range" id="lightRange"
-                    min="0.2" max="2.0" step=".01" value="1.0">
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <p class="small">
-          Note: the C++ source code of this demo is available in the Native
-          Client SDK (<tt>examples/demo/earth</tt>).
-        </p>
-        <p class="small">
-          Image Credit:
-          <br/>
+
+        <p class="credit">
+          <b>Image Credit:</b>
           NASA Goddard Space Flight Center Image by Reto Stöckli (land
           surface, shallow water, clouds). Enhancements by Robert Simmon
           (ocean color, compositing, 3D globes, animation).
           <br/>
-          Data and technical support: MODIS Land Group; MODIS Science Data,
+          <b>Data and technical support:</b> MODIS Land Group; MODIS Science Data,
           Support Team; MODIS Atmosphere Group; MODIS Ocean Group Additional
           data: USGS EROS Data Center (topography); USGS Terrestrial Remote
           Sensing Flagstaff Field Center (Antarctica); Defense Meteorological
           Satellite Program (city lights).
         </p>
       </div>
+
+      <div class="Demo-body">
+
+      <div id="listener" class="Demo-content"></div>
     </div>
-  </div>
+
+    <div id="loading-cover">
+        <div id="message">
+          <div id="statusField"></div>
+          <div id="progress" class="progress progress-striped active">
+            <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
+            </div>
+          </div>
+        </div>
+      </div>
+  </section>
+
 </body>
 </html>
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-life/example.js b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-life/example.js
index a05bf04..8d2c948 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-life/example.js
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-life/example.js
@@ -114,9 +114,8 @@ function handleCrash(event) {
  * This event listener is registered in attachDefaultListeners above.
  */
 function moduleDidLoad() {
-  var bar = $('progress');
-  bar.value = 100;
-  bar.max = 100;
+ var bar = $('progress-bar');
+  bar.style.width = 100;
   naclModule = $('nacl_module');
   hideStatus();
   setThreadCount();
@@ -126,8 +125,7 @@ function moduleDidLoad() {
  * Hide the status field and progress bar.
  */
 function hideStatus() {
-  $('statusField').style.display = 'none';
-  $('progress').style.display = 'none';
+  $('loading-cover').style.display = 'none';
 }
 
 /**
@@ -148,17 +146,16 @@ function moduleLoadProgress(event) {
   $('progress').style.display = 'block';
 
   var loadPercent = 0.0;
-  var bar = $('progress');
-  bar.max = 100;
+  var bar = $('progress-bar');
+
   if (event.lengthComputable && event.total > 0) {
     loadPercent = event.loaded / event.total * 100.0;
   } else {
     // The total length is not yet known.
-    loadPercent = -1.0;
+    loadPercent = 10;
   }
-  bar.value = loadPercent;
+  bar.style.width = loadPercent + "%";
 }
-
 /**
  * If the element with id 'statusField' exists, then set its HTML to the status
  * message as well.
@@ -182,7 +179,7 @@ document.addEventListener('DOMContentLoaded', function() {
   if (!browserSupportsPNaCl()) {
     updateStatus('Browser does not support PNaCl or PNaCl is disabled');
   } else if (naclModule == null) {
-    createNaClModule('life', 512, 512);
+    createNaClModule('life', '100%', '100%');
     attachDefaultListeners();
   } else {
     // It's possible that the Native Client module onload event fired
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-life/index.html b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-life/index.html
index 1b02777..5893b55 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-life/index.html
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-life/index.html
@@ -1,39 +1,54 @@
 <!DOCTYPE html>
 <html>
-<!--
-Copyright (c) 2013 The Chromium Authors. All rights reserved.
-Use of this source code is governed by a BSD-style license that can be
-found in the LICENSE file.
--->
-<head>
-  <meta charset="UTF-8">
-  <title>Life</title>
-  <script type="text/javascript" src="example.js"></script>
-  <link href="/static/common.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  <div class="absolute-fill">
-    <div class="flex-container">
-      <div class="main absolute-fill-parent">
-        <div class="absolute-fill">
-          <div class="flex-container flex-column flex-justify-center">
-            <div id="message">
-              <div id="statusField"></div>
-              <progress id="progress"></progress>
+  <!--
+  Copyright (c) 2013 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+  -->
+  <head>
+    <meta charset="UTF-8">
+
+    <title>The Game of Life</title>
+
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,700">
+    <link href="../styles/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="example.js"></script>
+
+  </head>
+
+  <body class="demo">
+
+    <header>
+      <h1>The Game of LIfe</h1>
+
+    </header>
+
+    <section>
+      <div class="intro">
+        <p>
+          This demo renders <a href="http://en.wikipedia.org/wiki/Conway%27s_Game_of_Life"><span class="label label-success">Conway's Game of Life</span></a>.
+        </p>
+        <p class="note">
+          Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/demo/life</tt>).
+        </p>
+
+      </div>
+
+      <div class="Demo-body">
+        <div id="listener" class="Demo-content"></div>
+      </div>
+
+      <div id="loading-cover">
+        <div id="message">
+          <div id="statusField"></div>
+          <div id="progress" class="progress progress-striped active">
+            <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
             </div>
           </div>
         </div>
-        <div id="listener" class="absolute-fill"></div>
-      </div>
-      <div class="sidebar">
-        <h1>Life</h1>
-        <p>
-          This demo renders <a
-            href="http://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Conway's
-            Game of Life</a>.
-        </p>
       </div>
-    </div>
-  </div>
-</body>
+    </section>
+
+  </body>
 </html>
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-lua/index.html b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-lua/index.html
index c0371d2..8453926 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-lua/index.html
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-lua/index.html
@@ -1,30 +1,58 @@
 <!DOCTYPE html>
 <html>
+  <!--
+  Copyright (c) 2013 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+  -->
   <head>
-    <title>Lua</title>
-    <script type="text/javascript" src="http://commondatastorage.googleapis.com/gonacl/demos/publish/231022/lua/hterm.concat.js"></script>
+    <meta charset="UTF-8">
+
+    <title>LUA Terminal</title>
+
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,700">
+    <link href="../styles/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="http://commondatastorage.googleapis.com/gonacl/demos/publish/233080/lua/hterm.concat.js"></script>
     <script type="text/javascript" src="naclterm.js"></script>
     <script type="text/javascript" src="lua.js"></script>
 
-    <style type="text/css">
-      body {
-        position: absolute;
-        padding: 0;
-        margin: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-      }
-
-      #terminal {
-        display: block;
-        position: static;
-        width: 100%;
-        height: 100%;
-      }
-    </style>
   </head>
-  <body>
-    <div id="terminal"></div>
-  </body>
+
+  <body class="demo">
+
+    <header>
+      <h1>LUA Terminal</h1>
+    </header>
+
+    <section>
+      <div class="intro">
+        <p>
+          This demo provides a client-side playground of the <a href="http://www.lua.org/"><span class="label label-success">LUA</span></a> programming language.
+        </p>
+        <p class="note">
+          Note: the C++ source code of this demo is available in <a href="https://code.google.com/p/naclports/source/browse/trunk/src/examples/tools/lua_ppapi/README.nacl">naclports<a>.
+        </p>
+
+      </div>
+
+      <div class="Demo-body">
+
+      <div id="listener" class="Demo-content">
+        <div id="terminal"></div>
+      </div>
+    </div>
+
+    <div id="loading-cover">
+      <div id="message">
+        <div id="statusField"></div>
+        <div id="progress" class="progress progress-striped active">
+          <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</body>
 </html>
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-lua/naclterm.js b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-lua/naclterm.js
index 23a5089..85cf0ce 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-lua/naclterm.js
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-lua/naclterm.js
@@ -9,6 +9,11 @@
 lib.rtdep('lib.f',
           'hterm');
 
+function updateStatus(message) {
+  document.getElementById('statusField').textContent = message;
+  term_.io.print(message + '\n');
+}
+
 // CSP means that we can't kick off the initialization from the html file,
 // so we do it like this instead.
 window.onload = function() {
@@ -77,7 +82,7 @@ NaClTerm.prototype.handleMessage_ = function(e) {
  * Handle load error event from NaCl.
  */
 NaClTerm.prototype.handleLoadAbort_ = function(e) {
-  term_.io.print('Load aborted.\n');
+  updateStatus('Load aborted.');
 }
 
 /**
@@ -102,10 +107,12 @@ NaClTerm.prototype.doneLoadingUrl = function() {
  * Handle load end event from NaCl.
  */
 NaClTerm.prototype.handleLoad_ = function(e) {
-  if (this.lastUrl)
+  if (this.lastUrl) {
     this.doneLoadingUrl();
-  else
+  } else {
     term_.io.print('Loaded.\n');
+  }
+  document.getElementById('loading-cover').style.display = 'none';
 
   term_.io.print(ansiReset);
 
@@ -122,21 +129,24 @@ NaClTerm.prototype.handleLoad_ = function(e) {
  */
 NaClTerm.prototype.handleProgress_ = function(e) {
   var url = e.url.substring(e.url.lastIndexOf('/') + 1);
-
   if (this.lastUrl && this.lastUrl != url)
     this.doneLoadingUrl()
 
   if (!url)
     return;
 
+  var percent = 10;
   var message = 'Loading ' + url;
-  if (e.lengthComputable && e.total) {
-    var percent = Math.round(e.loaded * 100 / e.total);
+
+  if (event.lengthComputable && event.total > 0) {
+    percent = Math.round(e.loaded * 100 / e.total);
     var kbloaded = Math.round(e.loaded / 1024);
     var kbtotal = Math.round(e.total / 1024);
     message += ' [' + kbloaded + ' KiB/' + kbtotal + ' KiB ' + percent + '%]';
   }
 
+  document.getElementById('progress-bar').style.width = percent + "%";
+
   var width = term_.io.terminal_.screenSize.width;
   term_.io.print('\r' + message.slice(-width));
   this.lastUrl = url;
@@ -149,9 +159,9 @@ NaClTerm.prototype.handleProgress_ = function(e) {
 NaClTerm.prototype.handleCrash_ = function(e) {
  term_.io.print(ansiCyan)
  if (embed.exitStatus == -1) {
-   term_.io.print('Program crashed (exit status -1)\n')
+   updateStatus('Program crashed (exit status -1)')
  } else {
-   term_.io.print('Program exited (status=' + embed.exitStatus + ')\n');
+   updateStatus('Program exited (status=' + embed.exitStatus + ')');
  }
 }
 
@@ -180,9 +190,9 @@ NaClTerm.prototype.run = function() {
   var mimetype = 'application/x-pnacl';
   if (navigator.mimeTypes[mimetype] === undefined) {
     if (mimetype.indexOf('pnacl') != -1)
-      this.io.print('Browser does not support PNaCl or PNaCl is disabled\n');
+      updateStatus('Browser does not support PNaCl or PNaCl is disabled');
     else
-      this.io.print('Browser does not support NaCl or NaCl is disabled\n');
+      updateStatus('Browser does not support NaCl or NaCl is disabled');
     return;
   }
 
@@ -224,8 +234,9 @@ NaClTerm.prototype.run = function() {
     argn = argn + 1;
   }
 
+  updateStatus('Loading...');
   this.io.print('Loading NaCl module.\n')
-  document.body.appendChild(embed);
+  document.getElementById("listener").appendChild(embed);
 
   this.io.onVTKeystroke = this.onVTKeystroke_.bind(this);
   this.io.onTerminalResize = this.onTerminalResize_.bind(this);
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-smoothlife/example.js b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-smoothlife/example.js
index 4cc6fa5..f389973 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-smoothlife/example.js
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-smoothlife/example.js
@@ -127,9 +127,8 @@ function handleCrash(event) {
  * This event listener is registered in attachDefaultListeners above.
  */
 function moduleDidLoad() {
-  var bar = $('progress');
-  bar.value = 100;
-  bar.max = 100;
+  var bar = $('progress-bar');
+  bar.style.width = 100;
   naclModule = $('nacl_module');
   hideStatus();
   setSize(256);
@@ -142,8 +141,7 @@ function moduleDidLoad() {
  * Hide the status field and progress bar.
  */
 function hideStatus() {
-  $('statusField').style.display = 'none';
-  $('progress').style.display = 'none';
+  $('loading-cover').style.display = 'none';
 }
 
 /**
@@ -164,15 +162,15 @@ function moduleLoadProgress(event) {
   $('progress').style.display = 'block';
 
   var loadPercent = 0.0;
-  var bar = $('progress');
-  bar.max = 100;
+  var bar = $('progress-bar');
+
   if (event.lengthComputable && event.total > 0) {
     loadPercent = event.loaded / event.total * 100.0;
   } else {
     // The total length is not yet known.
-    loadPercent = -1.0;
+    loadPercent = 10;
   }
-  bar.value = loadPercent;
+  bar.style.width = loadPercent + "%";
 }
 
 /**
@@ -295,7 +293,7 @@ document.addEventListener('DOMContentLoaded', function() {
   if (!browserSupportsPNaCl()) {
     updateStatus('Browser does not support PNaCl or PNaCl is disabled');
   } else if (naclModule == null) {
-    createNaClModule('smoothnacl', 512, 512);
+    createNaClModule('smoothnacl', '100%', '100%');
     attachDefaultListeners();
   } else {
     // It's possible that the Native Client module onload event fired
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-smoothlife/index.html b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-smoothlife/index.html
index 89115eb..9945d81 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-smoothlife/index.html
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-smoothlife/index.html
@@ -8,26 +8,38 @@ found in the LICENSE file.
 <head>
   <meta charset="UTF-8">
   <title>SmoothLife</title>
+  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,700">
+  <link href="../styles/style.css" rel="stylesheet">
   <script type="text/javascript" src="example.js"></script>
-  <link href="/static/common.css" rel="stylesheet" type="text/css">
 </head>
-<body>
-  <div class="absolute-fill">
-    <div class="flex-container">
-      <div class="main absolute-fill-parent">
-        <div class="absolute-fill">
-          <div class="flex-container flex-column flex-justify-center">
-            <div id="message">
-              <div id="statusField"></div>
-              <progress id="progress"></progress>
-            </div>
-          </div>
-        </div>
-        <div id="listener" class="absolute-fill"></div>
-      </div>
-      <div class="sidebar">
-        <h1>SmoothLife</h1>
-        <div>
+<body class="demo">
+  <header>
+    <h1>SmoothLife</h1>
+  </header>
+
+  <section>
+    <div class="intro">
+      <p>
+        An example of the <a
+          href="https://www.google.com/search?q=smoothlife">SmoothLife</a>
+        algorithm ported to Native Client.
+      </p>
+      <p class="note">
+        Example courtesy <a href="https://github.com/binji">Ben Smith</a>,
+        based on <a href="http://sourceforge.net/projects/smoothlife/">this
+          source</a> by ionreq.
+      </p>
+      <p class="note">
+        Read <a href="http://arxiv.org/abs/1111.1567">Stephan Rafler's paper</a>
+        for more information about the algorithm, or browse the <a
+        href="https://github.com/binji/smoothnacl">source</a>.
+      </p>
+      <p class="note">
+        FPS: <span id="fps">0</span>
+      </p>
+
+      <div class="panel panel-info">
+        <div class="panel-body">
           <select id="preset">
             <option value="0">Subdividers</option>
             <option value="1">Green Hex</option>
@@ -41,34 +53,34 @@ found in the LICENSE file.
           </select>
           <button id="reset">Reset</button>
         </div>
-        <div>
+        <div class="panel-body">
           <button id="splat">Splat</button>
           <button id="clear">Clear</button>
         </div>
-        <div>
+        <div class="panel-body">
           Brush Size:
           <input type="range" id="brushSizeRange" min="10.0" max="50.0"
               step="0.5" value="10.0">
           <span id="brushSize">10.0</span>
         </div>
-        <p class="small">
-          This demo was implemented by Ben Smith. The source code is available
-          on GitHub at <a
-            href="https://github.com/binji/smoothnacl">https://github.com/binji/smoothnacl</a>.
-        </p>
-        <p class="small">
-        The implementation was based on <a
-          href="http://sourceforge.net/projects/smoothlife/">this source</a> by
-        ionreq. Also see Stephan Rafler's paper <a
-          href="http://arxiv.org/abs/1111.1567">Generalization of Conway's
-          "Game of Life" to a continuous domain - SmoothLife</a> for more
-        information about the algorithm.
-        </p>
-        <p class="small">
-          FPS: <span id="fps">0</span>
-        </p>
+      </div>
+
+    </div>
+
+    <div class="Demo-body">
+      <div id="listener" class="Demo-content"></div>
+    </div>
+
+    <div id="loading-cover">
+      <div id="message">
+        <div id="statusField"></div>
+        <div id="progress" class="progress progress-striped active">
+          <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
+          </div>
+        </div>
       </div>
     </div>
-  </div>
+
+  </section>
 </body>
 </html>
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-voronoi/example.js b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-voronoi/example.js
index c2cabec..574d751 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-voronoi/example.js
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-voronoi/example.js
@@ -115,9 +115,8 @@ function handleCrash(event) {
  * This event listener is registered in attachDefaultListeners above.
  */
 function moduleDidLoad() {
-  var bar = $('progress');
-  bar.value = 100;
-  bar.max = 100;
+  var bar = $('progress-bar');
+  bar.style.width = 100;
   naclModule = $('nacl_module');
   hideStatus();
   setThreadCount();
@@ -127,8 +126,8 @@ function moduleDidLoad() {
  * Hide the status field and progress bar.
  */
 function hideStatus() {
-  $('statusField').style.display = 'none';
-  $('progress').style.display = 'none';
+  $('loading-cover').style.display = 'none';
+
 }
 
 /**
@@ -149,15 +148,15 @@ function moduleLoadProgress(event) {
   $('progress').style.display = 'block';
 
   var loadPercent = 0.0;
-  var bar = $('progress');
-  bar.max = 100;
+  var bar = $('progress-bar');
+
   if (event.lengthComputable && event.total > 0) {
     loadPercent = event.loaded / event.total * 100.0;
   } else {
     // The total length is not yet known.
-    loadPercent = -1.0;
+    loadPercent = 10;
   }
-  bar.value = loadPercent;
+  bar.style.width = loadPercent + "%";
 }
 
 /**
@@ -221,7 +220,7 @@ document.addEventListener('DOMContentLoaded', function() {
   if (!browserSupportsPNaCl()) {
     updateStatus('Browser does not support PNaCl or PNaCl is disabled');
   } else if (naclModule == null) {
-    createNaClModule('voronoi', 512, 512);
+    createNaClModule('voronoi', '100%', '100%');
     attachDefaultListeners();
   } else {
     // It's possible that the Native Client module onload event fired
diff --git a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-voronoi/index.html b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-voronoi/index.html
index f5167b0..0d91dab 100644
--- a/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-voronoi/index.html
+++ b/native_client_sdk/src/gonacl_appengine/static/pnacl-demo-voronoi/index.html
@@ -1,80 +1,103 @@
 <!DOCTYPE html>
 <html>
-<!--
-Copyright (c) 2013 The Chromium Authors. All rights reserved.
-Use of this source code is governed by a BSD-style license that can be
-found in the LICENSE file.
--->
-<head>
-  <meta charset="UTF-8">
-  <title>Voronoi</title>
-  <script type="text/javascript" src="example.js"></script>
-  <link href="/static/common.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  <div class="absolute-fill">
-    <div class="flex-container">
-      <div class="main absolute-fill-parent">
-        <div class="absolute-fill">
-          <div class="flex-container flex-column flex-justify-center">
-            <div id="message">
-              <div id="statusField"></div>
-              <progress id="progress"></progress>
-            </div>
-          </div>
-        </div>
-        <div id="listener" class="absolute-fill"></div>
-      </div>
-      <div class="sidebar">
-        <h1>Voronoi</h1>
+  <!--
+  Copyright (c) 2013 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+  -->
+  <head>
+    <meta charset="UTF-8">
+
+    <title>Voronoi</title>
+
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,700">
+    <link href="../styles/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="example.js"></script>
+
+  </head>
+
+  <body class="demo">
+
+    <header>
+      <h1>Voronoi</h1>
+
+    </header>
+
+    <section>
+      <div class="intro">
         <p>
-          This demo renders the Voronoi diagram for a moving set of points using
-          a brute force technique.
+          This demo renders the <a href="http://en.wikipedia.org/wiki/Voronoi"><span class="label label-success">Voronoi diagram</span></a> for a moving set of points using a brute force technique.
+        </p>
+        <p class="note">
+          Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/demo/voronoi</tt>).
         </p>
-        <table id="config">
-          <tbody>
-            <tr>
-              <td class="name">Points:</td>
-              <td class="value">
-                <input type="range" id="pointRange"
-                    min="1" max="1024" step="1" value="48">
-                <label id="pointCount">48 points</label>
-              </td>
-            </tr>
-            <tr>
-              <td class="name">Thread Count:</td>
-              <td class="value">
-                <select id="threadCount">
-                  <option value="0">Main Thread only</option>
-                  <option value="1">1 Thread</option>
-                  <option value="2" selected="selected">2 Threads</option>
-                  <option value="4">4 Threads</option>
-                  <option value="6">6 Threads</option>
-                  <option value="8">8 Threads</option>
-                  <option value="12">12 Threads</option>
-                  <option value="24">24 Threads</option>
-                  <option value="32">32 Threads</option>
-                </select>
-              </td>
-            </tr>
-            <tr>
-              <td class="name"><label for="drawPoints">Draw Points:</label></td>
-              <td class="value">
-                <input type="checkbox" id="drawPoints" checked="checked">
-              </td>
-            </tr>
-            <tr>
-              <td class="name">
-                <label for="drawInteriors">Draw Interiors:</label>
-              </td>
-              <td class="value">
-                <input type="checkbox" id="drawInteriors" checked="checked">
-              </td>
-            </tr>
-          </tbody>
-        </table>
+
+        <div class="panel panel-info">
+
+          <h2>Controls</h2>
+
+          <div class="panel-body">
+            <table id="config" cellspacing="0" cellpadding="0">
+              <tbody>
+                <tr>
+                  <td class="name">Points:</td>
+                  <td class="value">
+                    <input type="range" id="pointRange" min="1" max="1024" step="1" value="48">
+                    <label id="pointCount">48 points</label>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="name">Thread Count:</td>
+                  <td class="value">
+                    <select id="threadCount">
+                      <option value="0">Main Thread only</option>
+                      <option value="1">1 Thread</option>
+                      <option value="2" selected="selected">2 Threads</option>
+                      <option value="4">4 Threads</option>
+                      <option value="6">6 Threads</option>
+                      <option value="8">8 Threads</option>
+                      <option value="12">12 Threads</option>
+                      <option value="24">24 Threads</option>
+                      <option value="32">32 Threads</option>
+                    </select>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="name"><label for="drawPoints">Draw Points:</label></td>
+                  <td class="value">
+                    <input type="checkbox" id="drawPoints" checked="checked">
+                  </td>
+                </tr>
+                <tr>
+                  <td class="name">
+                    <label for="drawInteriors">Draw Interiors:</label>
+                  </td>
+                  <td class="value">
+                    <input type="checkbox" id="drawInteriors" checked="checked">
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
+
+      <div class="Demo-body">
+
+      <div id="listener" class="Demo-content"></div>
     </div>
-  </div>
+
+    <div id="loading-cover">
+        <div id="message">
+          <div id="statusField"></div>
+          <div id="progress" class="progress progress-striped active">
+            <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
+            </div>
+          </div>
+        </div>
+      </div>
+  </section>
+
 </body>
 </html>
diff --git a/native_client_sdk/src/gonacl_appengine/static/styles/icons.png b/native_client_sdk/src/gonacl_appengine/static/styles/icons.png
new file mode 100644
index 0000000..13a6983
--- /dev/null
+++ b/native_client_sdk/src/gonacl_appengine/static/styles/icons.png
diff --git a/native_client_sdk/src/gonacl_appengine/static/styles/style.css b/native_client_sdk/src/gonacl_appengine/static/styles/style.css
new file mode 100644
index 0000000..9011a93
--- /dev/null
+++ b/native_client_sdk/src/gonacl_appengine/static/styles/style.css
@@ -0,0 +1,327 @@
+/* Copyright (c) 2013 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+* {
+  box-sizing: border-box;
+  -webkit-font-smoothing:antialiased;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background: #FAFAFA;
+  font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  line-height: 1.35;
+  color: #444;
+}
+
+body {
+  display: flex;
+  flex-direction: row;
+}
+
+nav {
+  width: 230px;
+  background: #F3F3F3;
+  border-right: 1px solid #CCCCCC;
+  flex: 0 0 auto;
+}
+
+nav h1 {
+  font-family: 'Open Sans';
+  font-weight: 300;
+  color: #555;
+  margin: 0;
+  padding: 35px 0 20px 10px;
+  font-size: 22px;
+  border-bottom: 1px solid #CCC;
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+nav ul li {
+  height: 52px;
+  line-height: 52px;
+  border-top: 1px solid #FFF;
+  border-bottom: 1px solid #CCC;
+  position: relative;
+}
+
+nav ul li a {
+  padding-left: 50px;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-image: url(icons.png);
+  background-repeat: no-repeat;
+  background-color: #F3F3F3;
+  background-size: 30px 420px;
+  color: #444;
+  text-decoration: none;
+  transition: background-color 0.2s ease-out, color 0.3s ease-in-out;
+}
+
+nav ul li#lua a {
+  background-position: 14px 16px;
+}
+
+nav ul li#bullet a {
+  background-position: 14px -52px;
+}
+
+nav ul li#earth a {
+  background-position: 14px -108px;
+}
+
+nav ul li#life a {
+  background-position: 13px -166px;
+}
+
+nav ul li#voronoi a {
+  background-position: 15px -230px;
+}
+
+nav ul li#smoothlife a {
+  background-position: 13px -290px;
+}
+
+nav ul li#cube a {
+  background-position: 13px -350px;
+}
+
+nav ul li a:hover,
+nav ul li a.active {
+  background-color: #444;
+  color: #FFF;
+  transition: background-color 0.1s ease-out, color 0.2s ease-in-out;
+}
+
+nav ul li:last-child:after {
+  content: '';
+  width: 100%;
+  height: 0;
+  border-bottom: 1px solid #FFF;
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+}
+
+section {
+  padding: 25px;
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+section iframe {
+  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
+  width: 100%;
+  height: 100%;
+  background: #FFF;
+  flex: 1 1 auto;
+}
+
+/** Demo **/
+
+.demo {
+  background: #FFF;
+  flex-direction: column;
+}
+
+.demo header {
+  padding: 15px 25px;
+}
+
+.demo header h1 {
+  margin: 0;
+  font-family: 'Open Sans';
+  font-weight: 300;
+  color: #666;
+  font-size: 62px;
+  letter-spacing: -0.05em;
+}
+
+.demo p {
+  margin: 0 0 1em 0;
+  font-size: 17px;
+}
+
+.demo section {
+  padding: 0 25px 25px 25px;
+  display: flex;
+  flex-direction: row;
+}
+
+.demo .intro {
+  max-width: 350px;
+  padding-right: 50px;
+}
+
+.demo div {
+  flex: 1 1 auto;
+}
+
+.demo div.Demo-body,
+.demo div.Demo-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.demo div.Demo-body {
+  border: 1px solid #DFDFDF;
+  position: relative;
+  padding: 10px;
+}
+
+.demo div.Demo-content embed {
+  flex: 1 1 auto;
+}
+
+.demo p {
+  font-size: 20px;
+}
+
+.demo a {
+  color: #00A3D9;
+}
+
+.demo p.note {
+  color: #666;
+  font-style: italic;
+  font-size: 14px;
+}
+
+.demo .panel-info {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #CCC;
+}
+
+.demo tr {
+  font-size: 14px;
+  height: 30px;
+  line-height: 30px;
+}
+
+.demo td {
+  padding: 4px;
+}
+
+.demo tr:nth-child(2n) {
+  background: #f4f4f4;
+}
+
+.demo td.name {
+  font-weight: bold;
+}
+
+.demo h2 {
+  font-size: 16px;
+  font-family: 'Open Sans';
+  font-weight: 700;
+  margin: 0 0 0.2em 0;
+  color: #777;
+  letter-spacing: -0.06em;
+}
+
+.demo #loading-cover{
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.demo #message {
+  position:absolute;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  z-index:10;
+  top:0;
+  left:0;
+}
+
+.demo #statusField {
+  padding-top: 200px;
+  color: #444;
+  font-size: 44px;
+  font-weight: 700;
+  font-family: 'Open Sans';
+  text-align: center;
+  width: 100%;
+  letter-spacing: -0.06em;
+}
+
+.demo #terminal {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+.demo #terminal iframe {
+  width: auto;
+  height: auto;
+}
+
+.demo #rendererContainer {
+  width: calc(100% - 20px);
+  height: calc(100% - 20px);
+  position: absolute;
+}
+
+.no-pointer-events {
+  pointer-events: none;
+}
+
+.demo button {
+  background: #777;
+  color: #FFF;
+  width: 49%;
+  height: 35px;
+  border-radius: 6px;
+  border: none;
+  margin-bottom: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease-out;
+}
+
+.demo button:hover {
+  background: #333;
+}
+
+.demo {
+  min-height: 645px;
+}
+
+.demo #progress {
+  margin: 20px auto;
+  width: 300px;
+  border-radius: 8px;
+  background: #FFF;
+  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
+}
+
+.progress-bar {
+  border-radius: 8px;
+  height: 40px;
+  background: #6DD900;
+  transition: width 0.1s ease-out;
+}
+
+.demo .credit {
+  margin-top: 20px;
+  font-size: 10px;
+  color: #AAA;
+}
author	binji@chromium.org <binji@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>	2013-11-08 01:29:11 +0000
committer	binji@chromium.org <binji@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>	2013-11-08 01:29:11 +0000
commit	1e5a5a9316011fd4dba904995bcddd0945bca437 (patch)
tree	447b9033cb6caf0e63352c8721d8e1416ba77aef /native_client_sdk
parent	ce5b807d3e244c28aa3d0d3abe53072e25397100 (diff)
download	chromium_src-1e5a5a9316011fd4dba904995bcddd0945bca437.zip chromium_src-1e5a5a9316011fd4dba904995bcddd0945bca437.tar.gz chromium_src-1e5a5a9316011fd4dba904995bcddd0945bca437.tar.bz2