html: use svg buttons rather than text

1 files changed, 22 insertions, 3 deletions

diff --git a/site/index.html b/site/index.html
index 702bc96..67ce13d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -17,8 +17,27 @@
 
         <div class='controls'>
           <!-- <button id='bench'>bench</button> -->
-          <button id='tick'>tick</button>
-          <button id='blinken'>blinken</button>
+          <button id='tick'>
+            <svg version='1.1' width='30' height='20' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
+              <title>tick</title>
+              <g class='step' stroke='black' stroke-width='2' fill='red'>
+                <polyline points='0 0 0 100 55 50 0 0'/>
+                <rect x='60' y='0' width='30' height='100'/>
+              </g>
+            </svg>
+          </button>
+          <button id='run' class='halten'>
+            <svg version='1.1' width='30' height='20' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
+              <title>blinken</title>
+              <g class='play' stroke='black' stroke-width='2' fill='red'>
+                <polyline points='0 0 0 100 100 50 0 0'/>
+              </g>
+              <g class='pause' stroke='black' stroke-width='2' fill='red'>
+                <rect x='0' y='0' width='40' height='100'/>
+                <rect x='60' y='0' width='40' height='100'/>
+              </g>
+            </svg>
+          </button>
           <label for='tick-rate-select'>tps:</label>
           <select id='tick-rate-select'>
             <option>5</option>
@@ -29,7 +48,7 @@
             <option>60</option>
           </select>
         </div> <!-- controls -->
-        <label for='fps'>fps: </label><span id='fps'>0</span>
+        <label for='fps'>fps: </label><span id='fps'>n/a</span>
       </section> <!-- arena -->
 
       <section id='robview'>