native_client_sdk/src/gonacl_appengine/static/bullet/fullscreen.html

   1 <!DOCTYPE html>
   2 <html>
   3   <!--
   4   Copyright (c) 2014 The Chromium Authors. All rights reserved.
   5   Use of this source code is governed by a BSD-style license that can be
   6   found in the LICENSE file.
   7   -->
   8   <head>
   9     <meta charset="UTF-8">
  10
  11     <title>Bullet Physics</title>
  12
  13     <link rel="stylesheet" href="fullscreen.css">
  14     <script type="text/javascript" src="NaClAM.js"></script>
  15     <script type="text/javascript" src="NaClAMBullet.js"></script>
  16     <script type="text/javascript" src="//storage.googleapis.com/gonacl/pnacl-demo-bullet/three.min.js"></script>
  17     <script type="text/javascript" src="scene.js"></script>
  18     <script type="text/javascript" src="world.js"></script>
  19     <script type="text/javascript" src="scenes.js"></script>
  20
  21     <script type="text/javascript">
  22       var expandoClosedMsg = 'Click for options';
  23       var expandoOpenMsg = '×';
  24       var expandoClosed = true;
  25
  26       function toggleExpando() {
  27         var expandoEl = document.getElementById('title-box-expando');
  28         var toggleButton = document.getElementById('title-box-toggle-button');
  29         toggleButton.classList.toggle('open');
  30         expandoEl.classList.toggle('open');
  31         expandoClosed = !expandoClosed;
  32         if (expandoClosed)
  33           toggleButton.textContent = expandoClosedMsg;
  34         else
  35           toggleButton.textContent = expandoOpenMsg;
  36       }
  37     </script>
  38   </head>
  39
  40   <body>
  41     <section>
  42       <div id="title-box">
  43         <h1>Bullet Physics in Portable Native Client</h1>
  44         <span id="title-box-toggle-button" onclick="toggleExpando()"></span>
  45         <script type="text/javascript">
  46           var toggleButton = document.getElementById('title-box-toggle-button');
  47           toggleButton.textContent = expandoClosedMsg;
  48         </script>
  49         <div id="title-box-expando">
  50           <p>
  51             <a href="http://bulletphysics.org/wordpress">Bullet Physics</a> is an
  52             open-source real-time phsyics simulation.
  53           </p>
  54           <p>
  55             <a href="https://developers.google.com/native-client/dev/">Native
  56               Client</a> is a sandbox for running compiled C and C++ code in the
  57             browser efficiently and securely.
  58           </p>
  59           <h2>Scenes</h2>
  60           <div>
  61             <div><button type="button" id="jenga10">Block Tower (10 blocks)</button></div>
  62             <div><button type="button" id="jenga20">Block Tower (20 blocks)</button></div>
  63             <div><button type="button" id="randomCube250">Random Cubes (250)</button></div>
  64             <div><button type="button" id="randomCube1000">Random Cubes (1000)</button></div>
  65             <div><button type="button" id="randomCube2000">Random Cubes (2000)</button></div>
  66             <div><button type="button" id="randomCylinder500">Random Cylinders (500)</button></div>
  67             <div><button type="button" id="randomShapes">Random Shapes</button></div>
  68             <div><button type="button" id="reload">Reload Scene</button></div>
  69           </div>
  70           <p class="small">
  71             Simulation Time: <span id="simulationTime">0</span>&mu;s
  72             <br>
  73             FPS: <span id="fps">0</span>
  74           </p>
  75         </div>
  76       </div>
  77
  78       <div id="listener">
  79         <div id="rendererContainer"></div>
  80       </div>
  81
  82       <div id="loading-cover">
  83         <div id="message">
  84           <div id="statusField"></div>
  85           <div id="progress" class="progress progress-striped active">
  86             <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
  87             </div>
  88           </div>
  89         </div>
  90       </div>
  91     </section>
  92
  93     <script type="text/javascript" src="main.js"></script>
  94   </body>
  95 </html>