Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <title>Interstellar - Interactive wormhole & black hole</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <style> | |
| body { | |
| background:#000; | |
| color: #eee; | |
| text-shadow: 0 1px 0 #000; | |
| padding:0; | |
| margin:0; | |
| font-weight:bold; | |
| overflow: hidden; | |
| height: 120vh; | |
| font-family: Monospace; | |
| font-size: 12px; | |
| } | |
| #webgl-error { | |
| display: none; | |
| text-align: center; | |
| position: fixed; | |
| left: 50%; | |
| top: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| z-index: 1; | |
| } | |
| #webgl-error a { | |
| color: orange | |
| } | |
| #info, #resolution, #version { | |
| -webkit-transition: -webkit-transform 0.2s ease; | |
| transition: transform 0.2s ease; | |
| } | |
| #info { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| padding: 5px; | |
| text-align: center; | |
| z-index: 10; | |
| } | |
| .no-pointer-events { | |
| pointer-events: none; | |
| } | |
| .no-ui #info { | |
| -webkit-transform: translateY(-100%); | |
| transform: translateY(-100%); | |
| } | |
| #resolution { | |
| position: fixed; | |
| bottom: 0; | |
| right: 0; | |
| padding: 5px; | |
| z-index: 10; | |
| } | |
| .no-ui #resolution { | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| } | |
| #resolution > label { | |
| display: block; | |
| } | |
| .ui-toggle { | |
| position: fixed; | |
| bottom: 5px; | |
| left: 5px; | |
| z-index: 10; | |
| transition: opacity 0.2s ease; | |
| } | |
| .ui-toggle input, .ui-toggle label { | |
| cursor: pointer; | |
| } | |
| .no-ui .ui-toggle:hover { | |
| opacity: 1; | |
| } | |
| .no-ui .ui-toggle { | |
| opacity: 0; | |
| } | |
| h3 { | |
| margin: 0; | |
| font-size: 1em; | |
| } | |
| a { | |
| color: #0080ff; | |
| } | |
| kbd, #teleport { color: orange } | |
| #container { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| } | |
| #loading { | |
| text-align: center; | |
| position: fixed; | |
| left: 50%; | |
| top: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| } | |
| .no-ui #loading { display: none; } | |
| button { | |
| color: orange; | |
| font: inherit; | |
| text-shadow: inherit; | |
| border: 1px solid; | |
| background: rgba(0,0,0,0.5); | |
| line-height: 1.5; | |
| } | |
| #keyboard-controls { display: block; } | |
| #mobile-device-controls { display: none; } | |
| .mobile-device #keyboard-controls { display: none; } | |
| .mobile-device #mobile-device-controls { display: block; } | |
| #permit-motion-controls { | |
| display: none; | |
| } | |
| .no-motion-controls #permit-motion-controls { | |
| display: inline-block; | |
| } | |
| .no-motion-controls .motion-description { | |
| display: none; | |
| } | |
| canvas { display: block; } | |
| #version { | |
| position: fixed; | |
| font-size: 0.9em; | |
| top: 5px; | |
| right: 0; | |
| padding-right: 5px; | |
| z-index: 100; | |
| } | |
| .no-ui #version { | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="webgl-error"> | |
| Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a><br> | |
| Find out how to get it <a href="http://get.webgl.org/">here</a> | |
| </div> | |
| <div id="info"> | |
| <h3 class="no-pointer-events">Controls:</h3> | |
| <div id="keyboard-controls" class="no-pointer-events"> | |
| <kbd>WASD</kbd> move, | |
| <kbd>R|F</kbd> up | down, | |
| <kbd>Q|E</kbd> roll, | |
| <kbd>up|down</kbd> pitch, | |
| <kbd>left|right</kbd> yaw | |
| <kbd>shift</kbd> speed up<br> | |
| <kbd>space/esc</kbd> toggle mouse controls<br> | |
| <kbd>T</kbd> Teleport to next object<br> | |
| Scroll to increase/decrease your field of view. | |
| </div> | |
| <div id="mobile-device-controls"> | |
| <div class="no-pointer-events"> | |
| <span class="motion-description">Point your device around you to look around.</span> | |
| Touch the screen to move forwards. Use two fingers to go faster. | |
| </div> | |
| <button id="permit-motion-controls">Click here to enable looking around</button> | |
| <button id="teleport">Teleport to next object</button> | |
| </div> | |
| </div> | |
| <div id="resolution"> | |
| <h3>Resolution</h3> | |
| <label><input type="radio" name="resolution" value="4"> low</label> | |
| <label><input type="radio" name="resolution" value="2"> medium</label> | |
| <label><input type="radio" name="resolution" value="1"> high</label> | |
| </div> | |
| <div id="version"> | |
| <a target="_blank" href="https://github.com/sirxemic/Interstellar">version 2.0.1</a> | |
| </div> | |
| <div class="ui-toggle"> | |
| <label><input type="checkbox"> Hide UI</label> | |
| </div> | |
| <div id="container"></div> | |
| <div id="loading">Loading...</div> | |
| <script src="dist/build.js"></script> | |
| </body> | |
| </html> | |