text: <!doctype html>
  <html>
    <head>
      <meta charset='UTF-8' />
      <title>XVIZ Playground</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
      <style>
  body { margin: 0; font-family: Helvetica, Arial, sans-serif;}
  #container { position: fixed; display: flex; width: 100vw; height: 100vh; overflow: hidden; }
  
  .panel { background: #fff; width: 480px; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; border-right: solid 1px #ccc; }
  .panel.hidden { display: none; }
  .panel#streams { padding: 20px; }
  .panel#edit .editor { flex-grow: 1; transition: flex-grow 300ms; }
  .panel#edit .editor.active { flex-grow: 2; }
  .panel#edit #json-editor { border-top: solid 1px #ccc; }
  .panel#edit .push-btn { padding: 8px 12px; background: #0b6; color: #fff; text-align: center; cursor: pointer; font-size: 14px; }
  .panel#edit .push-btn:hover { background: #084; white-space: nowrap; }
  .panel#edit .push-btn.error { background: #c00 !important; cursor: default; }
  .panel#edit .tabs { background: #d8d8d8; color: #333; display: flex; font-size: 12px; justify-content: flex-end; padding: 8px 8px 0; }
  .panel#edit .tabs.disabled { background: #2f3129; color: #aaa; }
  .panel#edit .tab { padding: 6px 8px; margin: 0 1px; border: solid 1px rgba(128, 128, 128, 0.3); cursor: pointer; border-bottom: none; opacity: 0.7; }
  .panel#edit .tab:hover { opacity: 1; }
  .panel#edit .tabs .tab.active { background: #fff; }
  .panel#edit .tabs.disabled .tab.active { background: #1D1F21; }
  .panel#edit .tab.active { opacity: 1; }
  
  #map-view { flex-grow: 1; position: relative; }
  #timeline { box-sizing: border-box; position: absolute; width: 100%; bottom: 0; padding: 20px; background: #fff; }
  .frame-marker { position: absolute; cursor: pointer; margin: -3px; width: 6px; height: 6px; border-radius: 50%; background: #c80; }
  .frame-marker:hover { background: #fc0; padding: 2px; margin: -5px;}
  #panel-selectors { position: absolute; top: 12px; left: 4px; }
  #panel-selectors .btn { font-family: 'Material Icons'; width: 36px; height: 36px; background: #fff; color: #666; border: solid 1px #eee; border-radius: 50%; text-align: center; line-height: 36px; font-size: 20px; margin: 8px; cursor: pointer;}
  #panel-selectors .btn.active { color: #000; box-shadow: 0 0 12px rgba(0,0,0,0.25);}
  
      </style>
    </head>
    <body>
      <div id="app"></div>
      <script src='bundle.js'></script>
    </body>
  </html>
  