rework webtry css with compass and bootstrap

experimental/webtry/templates/content.html

Index: experimental/webtry/templates/content.html
diff --git a/experimental/webtry/templates/content.html b/experimental/webtry/templates/content.html
index 70803a05491afee8481c01f124e9279a3b7f8e98..9e8b5f8da83f3254594e8e3e8a1bde8d2fe2ff42 100644
--- a/experimental/webtry/templates/content.html
+++ b/experimental/webtry/templates/content.html
@@ -1,33 +1,56 @@
 
 <section id=content>
 
-  <template id=sourcesTemplate>
+  <template id="sourcesTemplate">
       <button id="" class=source><img width=64 height=64 src=''></button>
   </template>
-  <input type="checkbox" id="enableSource" data-id="{{.Source}}"> Use an input bitmap.
-  <br>
+
+  <div id="inputBitmapEnable">
+    <input type="checkbox" id="enableSource" data-id="{{.Source}}">
+    <label for="enableSource">Use an input bitmap</label>
+  </div>
+
   <button id="selectedSource"></button>
+
   <pre id="sourceCode">SkBitmap source;</pre>
-  <div id="chooseSource">
-    Choose an image below or upload a new one to use as an input bitmap.
-    <div id="chooseList">
+
+  <div class="well" id="chooseSource">
+    <div class="panel panel-primary">
+      <div class="panel-heading">
+        <h3 class="panel-title">
+          Choose an existing image to use as an input bitmap, or upload a new one below.
+        </h3>
+      </div>
+      <div class="panel-body" id="chooseList">
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <div class="panel-title">
+          Upload a new image
+        </div>
+      </div>
+      <div class="panel-body">
+        <form action="/sources/" method="post" accept-charset="utf-8" enctype="multipart/form-data">
+          <div class="form-group">
+            <label for="upload">File input</label>
+            <input type="file" accept="image/*" name="upload" value="" id="upload">
+          </div>
+          <button class="btn btn-default" type="submit">Upload Image</button>
+        </form>
+      </div>
     </div>
-    <form action="/sources/" method="post" accept-charset="utf-8" enctype="multipart/form-data">
-      <input type="file" accept="image/*" name="upload" value="" id="upload">
-      <input type="submit" value="Add Image">
-    </form>
   </div>
 
-  <pre>
-    <textarea spellcheck=false name='code' id='code' rows='15' cols='100'>{{.Code}}</textarea>
-  </pre>
+  <textarea spellcheck=false name='code' id='code' rows='15' cols='100'>{{.Code}}</textarea>
 
-  <input type='button' value='Run' id='run'>
-  <a href='{{if .Hash}}/c/{{.Hash}}{{end}}' target=_blank id=permalink>Share</a>
+  <div class="action-buttons">
+    <button class="btn btn-primary btn-lg" id='run'>Run</button>
+    <a class="btn btn-default btn-lg" href='{{if .Hash}}/c/{{.Hash}}{{end}}' {{if not .Hash}}style="display: none;"{{end}} target=_blank id="permalink">Share</a>
 
-  <input type='button' value='Embed' id='embedButton' disabled/>
-  <input type="text" value="" id="embed" readonly style="display:none;">
-  <br>
+    <button class="btn btn-default btn-lg" id='embedButton' {{if not .Hash}}style="display:none;"{{end}}/>Embed</button>
+    <input type="text" value="" id="embed" readonly style="display:none;">
+  </div>
 
   <p>
   <img  touch-action='none' class='zoom' id='img' src='{{if .Hash}}/i/{{.Hash}}.png{{end}}'/>
@@ -35,8 +58,8 @@
   <p id='zoomHex'></p>
 
   <h2>Warnings and Errors</h2>
-  <pre><code id='output'></code></pre>
+  <pre class="fiddle-output"><code id='output'></code></pre>
   <h2>Runtime output</h2>
-  <pre id='stdout'></pre>
+  <pre class="fiddle-output" id='stdout'></pre>
 
 </section>