dartpad

<!DOCTYPE html>
<link rel="import" href="http://kasperpeulen.github.io/PolymerElements/imports.html">
<link rel="import" href="http://kasperpeulen.github.io/PolymerElements/theme/blue-grey.html">
<link rel="import" href="style.html">

<body class="fullbleed vertical layout" unresolved>
  <template is="dom-bind">
    <iron-pages selected="0" id="pages">
      <paper-drawer-panel force-narrow>
        <paper-header-panel mode="waterfall" drawer>
          <paper-toolbar>
            <span id="title">Menu</span>
          </paper-toolbar>
        </paper-header-panel>
        <paper-header-panel main>
          <paper-toolbar style="height:100px">
            <paper-icon-button on-tap="openDrawer" icon="menu"></paper-icon-button>
            <div title>DartPad</div>
            <!-- <paper-icon-button icon="more-vert"></paper-icon-button> -->
            <paper-tabs class="bottom fit" style="top:inherit;" selected="{{selectedTab}}">
              <paper-tab>Dart</paper-tab>
              <paper-tab>HTML</paper-tab>
              <paper-tab>CSS</paper-tab>
            </paper-tabs>
            <paper-progress id="run-progress" indeterminate hidden class="bottom fit"></paper-progress>
          </paper-toolbar>
          <paper-fab id="run-button" on-tap="openResult" icon="av:play-arrow" 
      style="position: absolute; bottom: 16px; right: 16px;"></paper-fab>
          <iron-pages id="editpanel" selected="{{selectedTab}}">
            <marked-element>
              <script type="text/markdown">
```
import 'dart:html';

void main() {
  var count = querySelector('#count');

  for (int i = 0; i < 4; i++) {
    count.text = '${i}';
    print('hello ${i}');
  }
}
```
              </script>
            </marked-element>
            <marked-element>
              <script type="text/markdown">
```
<h2>Hello world</h2>

<p>Hello world <span id="count"></span>!</p>
```
              </script>
            </marked-element>
            <marked-element>
              <script type="text/markdown">
```
p {
  color: #888;
}
```
              </script>
            </marked-element>
           </iron-pages>
        </paper-header-panel>
      </paper-drawer-panel>
      <paper-header-panel class="fit">
        <paper-toolbar>
          <paper-fab icon="arrow-back" on-tap="openEditor" class="back-button" mini></paper-fab>
          <span title>DartPad</span>
          <paper-toggle-button on-change="toggleConsole" checked></paper-toggle-button>
          <paper-icon-button on-tap="refresh" icon="refresh"></paper-icon-button>
          <paper-progress id="refresh-progress" indeterminate hidden class="bottom fit"></paper-progress>
        </paper-toolbar>
          <div class="layout vertical fit">
            <div id="frame-container" class="flex-2">
              <h2>Hello world</h2>
              <p>Hello world <span id="count">3</span>!</p>
            </div>
            <div id="console" class="flex-1">
              <div class="title">Console output</div>
              <span class="normal">hello 0</span><br>
              <span class="normal">hello 1</span><br>
              <span class="normal">hello 2</span><br>
              <span class="normal">hello 3</span><br>
            </div>
         </div>
      </paper-header-panel>
    </iron-pages>
  </template>
  <script>
    function $(selector) {
      return document.querySelector(selector);
    }
    var scope = $('template[is=dom-bind]');
    scope.selectedTab = "0";
    scope.openDrawer = function(e) {
      $("paper-drawer-panel").openDrawer();
    };
    scope.openResult = function(e) {
      $('#run-progress').toggleAttribute('hidden');
      setTimeout(function(){ $("#pages").selectNext(); }, 1000);
    };
    scope.openEditor = function(e) {
      $('#run-progress').toggleAttribute('hidden');
      $("#pages").selectNext();
      e.stopPropagation();
    };
    scope.toggleConsole = function(e) {
      $("#console").hidden = !$("#console").hidden;
    }
    scope.refresh = function(e) {
      $('#refresh-progress').toggleAttribute('hidden');
      setTimeout(function(){ $('#refresh-progress').toggleAttribute('hidden'); }, 1000);
    }
  </script>
</body>

<style is="custom-style">
  :root {
    --primary-background-color: #333;
    --accent-color: var(--red-accent-color);
    --paper-fab-background: var(--red-accent-color);
    --paper-tabs-selection-bar-color: var(--light-primary-color);
    --paper-tab-ink: var(--light-primary-color);
  }
  body,
  paper-header-panel {
    background: var(--primary-background-color);
  }
  code {
    font-family: 'Inconsolata', monospace;
    color: #ddd;
    font-size: 12pt;
  }
  #editpanel {
    margin: 0 15px;
  }
  paper-tabs {
    height: 32px;
  }
  paper-tab {
    font-weight: 400;
    max-width: 220px;
  }
  paper-progress {
    top: inherit;
    width: inherit;
  }
  paper-menu {
    --paper-menu-color: #c6c6c6;
  }
  paper-fab {
    z-index: 100;
  }
  #console {
    font-family: 'Inconsolata', monospace;
    font-size: 12pt;
    line-height: 20px;
    min-height: 50px;
    overflow-y: auto;
    margin: 8px;
    padding: 8px;
    background-color: var(--secondary-text-color);
  }
  #console .normal {
    color: #fff;
  }
  #console .title {
    opacity: 0.75;
  }
  #frame-container {
    margin: 16px;
    color: #ddd;
    font-family: 'Roboto', sans-serif;
    font-size: 12pt;
  }
  #frame-container p {
    color: #888;
  }
</style>