native_client_sdk/src/gonacl_appengine/static/cube/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <!--
   4 Copyright (c) 2013 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   <title>Rotating Cube</title>
  11   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700">
  12   <link href="/static/css/out/site.css" rel="stylesheet">
  13   <script type="text/javascript" src="example.js"></script>
  14 </head>
  15 <body class="demo">
  16
  17   <header>
  18     <h1>Rotating Cube</h1>
  19   </header>
  20
  21   <section>
  22     <div class="intro">
  23       <p>
  24         An example showing rendering via OpenGLES2 in a Native Client module.
  25       </p>
  26       <p class="note">
  27         Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/api/graphics_3d</tt>).
  28       </p>
  29       <p class="note">
  30         FPS: <span id="fps">0</span>
  31       </p>
  32
  33       <div class="panel panel-info">
  34         <h2>Controls</h2>
  35         <div class="panel-body">
  36           <table id="config" cellspacing="0" cellpadding="0">
  37             <tbody>
  38               <tr>
  39                 <td class="name">X Angle:</td>
  40                 <td class="value">
  41                   <input type="range" id="xAngle" min="0" max="360" step="1"
  42                       value="0">
  43                 </td>
  44               </tr>
  45               <tr>
  46                 <td class="name">Y Angle:</td>
  47                 <td class="value">
  48                   <input type="range" id="yAngle" min="0" max="360" step="1"
  49                       value="0">
  50                 </td>
  51               </tr>
  52               <tr>
  53                 <td class="name">Animating:</td>
  54                 <td class="value">
  55                   <label>
  56                     off
  57                     <input type="radio" id="animateOff" value="false">
  58                   </label>
  59                   <label>
  60                     on
  61                     <input type="radio" id="animateOn" value="true"
  62                         checked="true">
  63                   </label>
  64                 </td>
  65               </tr>
  66             </tbody>
  67           </table>
  68         </div>
  69       </div>
  70     </div>
  71
  72     <div class="Demo-body">
  73       <div id="listener" class="Demo-content"></div>
  74     </div>
  75
  76     <div id="loading-cover">
  77       <div id="message">
  78         <div id="statusField"></div>
  79           <div id="progress" class="progress progress-striped active">
  80             <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
  81             </div>
  82           </div>
  83         </div>
  84       </div>
  85     </div>
  86
  87   </section>
  88   </div>
  89 </body>
  90 </html>