<!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>
