src/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     <script type="text/javascript" src="NaClAM.js"></script>
  14     <script type="text/javascript" src="NaClAMBullet.js"></script>
  15     <script type="text/javascript" src="//storage.googleapis.com/gonacl/pnacl-demo-bullet/three.min.js"></script>
  16     <script type="text/javascript" src="scene.js"></script>
  17     <script type="text/javascript" src="world.js"></script>
  18     <script type="text/javascript" src="scenes.js"></script>
  19
  20     <style>
  21       * {
  22         box-sizing: border-box;
  23         -webkit-font-smoothing:antialiased;
  24       }
  25
  26       html, body {
  27         background: #FAFAFA;
  28         color: #444;
  29         font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  30         height: 100%;
  31         line-height: 1.35;
  32         margin: 0;
  33         padding: 0;
  34         width: 100%;
  35         overflow: hidden;
  36       }
  37
  38       .intro {
  39         background-color: #fff;
  40         border: 1px solid #ccc;
  41         border-radius: 2px;
  42         box-shadow: 0 1px 1px rgba(0,0,0,0.3);
  43         left: 8px;
  44         max-width: 300px;
  45         position: absolute;
  46         top: 8px;
  47         z-index: 1000;
  48       }
  49
  50       #listener {
  51         bottom: 0;
  52         left: 0;
  53         position: absolute;
  54         right: 0;
  55         top: 0;
  56       }
  57
  58       #rendererContainer {
  59         height: 100%;
  60         line-height: 0;
  61         width: 100%;
  62       }
  63
  64       h1 {
  65         color: #666;
  66         font-size: 130%;
  67         font-weight: 600;
  68         letter-spacing: -0.05em;
  69         margin: 0;
  70         text-align: center;
  71       }
  72
  73       a {
  74         color: #00A3D9;
  75       }
  76
  77       .small {
  78         font-size: 75%;
  79       }
  80
  81       .controls {
  82         margin: 1em 0;
  83       }
  84
  85       #controls-header {
  86       }
  87
  88       #controls-header-button {
  89         padding-left: 20px;
  90       }
  91
  92       #controls-buttons {
  93       }
  94
  95       button {
  96         background: #777;
  97         color: #FFF;
  98         width: calc(100% - 20px);
  99         height: 35px;
 100         border-radius: 6px;
 101         border: none;
 102         margin-left: 10px;
 103         margin-right: 10px;
 104         margin-bottom: 4px;
 105         cursor: pointer;
 106         text-align: center;
 107         transition: background-color 0.2s ease-out;
 108       }
 109
 110       button:hover {
 111         background: #333;
 112       }
 113
 114       #loading-cover{
 115         display: block;
 116         position: fixed;
 117         left: 0;
 118         top: 0;
 119         right: 0;
 120         bottom: 0;
 121         width: 100%;
 122         background-color: rgba(255, 255, 255, 0.8);
 123       }
 124
 125       #message {
 126         bottom: 0;
 127         font-size: 44px;
 128         height: calc(1em + 80px);  /* not perfect, but pretty close. */
 129         left: 0;
 130         margin: auto;
 131         position: absolute;
 132         right: 0;
 133         text-align: center;
 134         top: 0;
 135         z-index: 10;
 136       }
 137
 138       #statusField {
 139         color: #444;
 140         font-weight: 700;
 141         width: 100%;
 142         letter-spacing: -0.06em;
 143       }
 144
 145       #progress {
 146         margin: 20px auto;
 147         width: 300px;
 148         border-radius: 8px;
 149         background: #FFF;
 150         box-shadow: 0 3px 8px rgba(0,0,0,0.3);
 151       }
 152
 153       .progress-bar {
 154         border-radius: 8px;
 155         height: 40px;
 156         background: #6DD900;
 157         transition: width 0.1s ease-out;
 158       }
 159     </style>
 160
 161   </head>
 162
 163   <body>
 164     <section>
 165       <div class="intro">
 166         <div>
 167           <h1 class="bottom-line">Bullet Physics<br>in Portable Native Client</h1>
 168         </div>
 169
 170         <div class="controls bottom-line">
 171           <div id="controls-header">Scenes
 172             <span id="controls-header-button">+</span>
 173           </div>
 174           <div id="controls-buttons" style="display: none">
 175             <div><button type="button" id="jenga10">Block Tower (10 blocks)</button></div>
 176             <div><button type="button" id="jenga20">Block Tower (20 blocks)</button></div>
 177             <div><button type="button" id="randomCube250">Random Cubes (250)</button></div>
 178             <div><button type="button" id="randomCube1000">Random Cubes (1000)</button></div>
 179             <div><button type="button" id="randomCube2000">Random Cubes (2000)</button></div>
 180             <div><button type="button" id="randomCylinder500">Random Cylinders (500)</button></div>
 181             <div><button type="button" id="randomShapes">Random Shapes</button></div>
 182             <div><button type="button" id="reload">Reload Scene</button></div>
 183           </div>
 184         </div>
 185
 186         <div>
 187           Curious about Native Client?<br>
 188           Get Started <a href="https://developers.google.com/native_client/dev">here</a>.
 189         </div>
 190
 191         <div class="small" style="display: none">
 192           Simulation Time: <span id="simulationTime">0</span>&mu;s
 193           <br>
 194           FPS: <span id="fps">0</span>
 195         </div>
 196       </div>
 197
 198       <div id="listener">
 199         <div id="rendererContainer"></div>
 200       </div>
 201
 202       <div id="loading-cover">
 203         <div id="message">
 204           <div id="statusField"></div>
 205           <div id="progress" class="progress progress-striped active">
 206             <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
 207             </div>
 208           </div>
 209         </div>
 210       </div>
 211     </section>
 212
 213     <script type="text/javascript" src="main.js"></script>
 214   </body>
 215 </html>