webtry/templates/content.html

<section id="content">

  {{if not .Embedded}}

  <template id="sourcesTemplate">
    <button id="" class=source><img width=64 height=64 src=""></button>
  </template>

  <section id="input-image">
    <section class="input-image-toggle">
      <div center horizontal layout>
        <div flex>use an input bitmap</div>
        <paper-toggle-button id="enableSource" data-id="{{.Source}}"></paper-toggle-button>
      </div>
    </section>

    <button id="selected-source"></button>

    <pre id="source-code">SkBitmap source;</pre>

    <paper-shadow z="1" id="choose-source">
      <h3>Choose an existing image to use as an input bitmap, or upload a new one below.</h3>
      <div id="choose-list"></div>

      <paper-shadow z="1" id="image-upload">
        <h3>Upload a new image</h3>
        <form action="/sources/" method="post" accept-charset="utf-8" enctype="multipart/form-data">
          <input type="file" accept="image/*" name="upload" value="" id="upload">
          <button class="btn btn-default" type="submit">Upload Image</button>
        </form>
      </paper-shadow>
    </paper-shadow>
  </section>

  {{end}}

  <textarea spellcheck=false name='code' id='code' rows='15' cols='100'>{{.Code}}</textarea>

  <div class="action-buttons">
    <paper-button id='run'>
      <core-icon icon="av:play-arrow"></core-icon><span id="run-text">Run</span></paper-button>

    {{if not .Embedded}}
      <toggle-display-sk target="#fiddle-options"><core-icon icon="settings"></core-icon>Options</toggle-display-sk>
      <toggle-display-sk id="embed-button" target="#embed-code"><core-icon icon="social:share"></core-icon>Embed</toggle-display-sk>
      <paper-shadow z="1" id="fiddle-options">
        <h3>Fiddle Options</h3>
        <paper-input-decorator floatinglabel label="Width">
          <input id="image-width" value="{{.Width}}">
        </paper-input-decorator>
        <paper-input-decorator floatinglabel label="Height">
          <input id="image-height" value="{{.Height}}">
        </paper-input-decorator>
        <section class="config-toggles">
          <div center horizontal layout>
            <div flex>Raster</div>
            <paper-toggle-button checked id="use-raster"></paper-toggle-button>
          </div>
          <div center horizontal layout>
            <div flex>Ganesh</div>
            <paper-toggle-button id="use-gpu"></paper-toggle-button>
          </div>
          <div center horizontal layout>
            <div flex>PDF</div>
            <paper-toggle-button id="use-pdf"></paper-toggle-button>
          </div>
        </section>
      </paper-shadow>

      <paper-shadow z="1" id="embed-code">
        <h4>To embed as an iframe, use:</h4>
        <span id="embed"></span>
      </paper-shadow>
      {{if .Permalink}}
      <a id="permalink" href="/c/{{.Hash}}">
        <paper-button><core-icon icon="link"></core-icon>Permalink</paper-button>
      </a>
      {{end}}
      <a id="bugreport" {{if .Hash}}class="display" {{end}}href="{{.BugURL}}">
        <paper-button><core-icon icon="bug-report"></core-icon>Report Bug</paper-button>
      </a>
    {{end}}
  </div>

  <fiddle-output-sk image {{if .RasterURL}}class="display" src="{{.RasterURL}}" modTime="{{.RasterMod}}"{{end}} id="raster-output">
    <div heading>Raster Output</div>
  </fiddle-output-sk>

  {{if not .Embedded}}

  <fiddle-output-sk image {{if .GPUURL}}class="display" src="{{.GPUURL}}" modTime="{{.GPUMod}}"{{end}} id="gpu-output">
    <div heading>Ganesh Output</div>
  </fiddle-output-sk>

  <fiddle-output-sk link {{if .PDFURL}}class="display" src="{{.PDFURL}}" modTime="{{.PDFMod}}"{{end}} id="pdf-output">
    <div heading>PDF Output</div>
  </fiddle-output-sk>

  {{end}}

  <p id='zoomHex'></p>

  <div id="output-wrapper">
    <h2>Build Issues (click errors to jump to that line)</h2>
    <pre id="output"></pre>
  </div>
  
</section>