<title>Bullet Physics</title>
+ <link rel="stylesheet" href="fullscreen.css">
<script type="text/javascript" src="NaClAM.js"></script>
<script type="text/javascript" src="NaClAMBullet.js"></script>
<script type="text/javascript" src="//storage.googleapis.com/gonacl/pnacl-demo-bullet/three.min.js"></script>
<script type="text/javascript" src="world.js"></script>
<script type="text/javascript" src="scenes.js"></script>
- <style>
- * {
- box-sizing: border-box;
- -webkit-font-smoothing:antialiased;
- }
-
- html, body {
- background: #FAFAFA;
- color: #444;
- font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- height: 100%;
- line-height: 1.35;
- margin: 0;
- padding: 0;
- width: 100%;
- overflow: hidden;
- }
-
- .intro {
- background-color: #fff;
- border: 1px solid #ccc;
- border-radius: 2px;
- box-shadow: 0 1px 1px rgba(0,0,0,0.3);
- left: 8px;
- max-width: 300px;
- position: absolute;
- top: 8px;
- z-index: 1000;
- }
-
- #listener {
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
- }
-
- #rendererContainer {
- height: 100%;
- line-height: 0;
- width: 100%;
- }
-
- h1 {
- color: #666;
- font-size: 130%;
- font-weight: 600;
- letter-spacing: -0.05em;
- margin: 0;
- text-align: center;
- }
-
- a {
- color: #00A3D9;
- }
-
- .small {
- font-size: 75%;
- }
-
- .controls {
- margin: 1em 0;
- }
-
- #controls-header {
- }
-
- #controls-header-button {
- padding-left: 20px;
- }
-
- #controls-buttons {
- }
-
- button {
- background: #777;
- color: #FFF;
- width: calc(100% - 20px);
- height: 35px;
- border-radius: 6px;
- border: none;
- margin-left: 10px;
- margin-right: 10px;
- margin-bottom: 4px;
- cursor: pointer;
- text-align: center;
- transition: background-color 0.2s ease-out;
- }
-
- button:hover {
- background: #333;
- }
-
- #loading-cover{
- display: block;
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- width: 100%;
- background-color: rgba(255, 255, 255, 0.8);
- }
-
- #message {
- bottom: 0;
- font-size: 44px;
- height: calc(1em + 80px); /* not perfect, but pretty close. */
- left: 0;
- margin: auto;
- position: absolute;
- right: 0;
- text-align: center;
- top: 0;
- z-index: 10;
- }
-
- #statusField {
- color: #444;
- font-weight: 700;
- width: 100%;
- letter-spacing: -0.06em;
- }
-
- #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;
- }
- </style>
-
+ <script type="text/javascript">
+ var expandoClosedMsg = 'Click for options';
+ var expandoOpenMsg = '×';
+ var expandoClosed = true;
+
+ function toggleExpando() {
+ var expandoEl = document.getElementById('title-box-expando');
+ var toggleButton = document.getElementById('title-box-toggle-button');
+ toggleButton.classList.toggle('open');
+ expandoEl.classList.toggle('open');
+ expandoClosed = !expandoClosed;
+ if (expandoClosed)
+ toggleButton.textContent = expandoClosedMsg;
+ else
+ toggleButton.textContent = expandoOpenMsg;
+ }
+ </script>
</head>
<body>
<section>
- <div class="intro">
- <div>
- <h1 class="bottom-line">Bullet Physics<br>in Portable Native Client</h1>
- </div>
-
- <div class="controls bottom-line">
- <div id="controls-header">Scenes
- <span id="controls-header-button">+</span>
- </div>
- <div id="controls-buttons" style="display: none">
+ <div id="title-box">
+ <h1>Bullet Physics in Portable Native Client</h1>
+ <span id="title-box-toggle-button" onclick="toggleExpando()"></span>
+ <script type="text/javascript">
+ var toggleButton = document.getElementById('title-box-toggle-button');
+ toggleButton.textContent = expandoClosedMsg;
+ </script>
+ <div id="title-box-expando">
+ <p>
+ <a href="http://bulletphysics.org/wordpress">Bullet Physics</a> is an
+ open-source real-time phsyics simulation.
+ </p>
+ <p>
+ <a href="https://developers.google.com/native-client/dev/">Native
+ Client</a> is a sandbox for running compiled C and C++ code in the
+ browser efficiently and securely.
+ </p>
+ <h2>Scenes</h2>
+ <div>
<div><button type="button" id="jenga10">Block Tower (10 blocks)</button></div>
<div><button type="button" id="jenga20">Block Tower (20 blocks)</button></div>
<div><button type="button" id="randomCube250">Random Cubes (250)</button></div>
<div><button type="button" id="randomShapes">Random Shapes</button></div>
<div><button type="button" id="reload">Reload Scene</button></div>
</div>
- </div>
-
- <div>
- Curious about Native Client?<br>
- Get Started <a href="https://developers.google.com/native_client/dev">here</a>.
- </div>
-
- <div class="small" style="display: none">
- Simulation Time: <span id="simulationTime">0</span>μs
- <br>
- FPS: <span id="fps">0</span>
+ <p class="small">
+ Simulation Time: <span id="simulationTime">0</span>μs
+ <br>
+ FPS: <span id="fps">0</span>
+ </p>
</div>
</div>
projects / platform / framework / web / crosswalk.git / blobdiff