1 files changed, 63 insertions, 16 deletions
diff --git a/js/inknswitch/index.html b/js/inknswitch/index.html
index 0371a18..3f4fbda 100644
--- a/js/inknswitch/index.html
+++ b/js/inknswitch/index.html
@@ -11,15 +11,21 @@
             font-weight: normal;
             font-style: normal;
         }
+        @font-face {
+            font-family: 'ChicagoFLF';
+            src: url('./ChicagoFLF.ttf') format('truetype');
+            font-weight: normal;
+            font-style: normal;
+        }
         body {
             margin: 0;
             padding: 0;
-            font-family: 'Shantell Sans', cursive;
+            font-family: 'Shantell Sans', sans-serif;
         }
         textarea {
-            font-family: 'Shantell Sans', cursive;
+            font-family: 'Shantell Sans', sans-serif;
             font-size: 1.75em;
-            padding: 1em;
+            padding: 2em 1em;
             border: 0;
             outline: 0;
             width: 100%;
@@ -32,25 +38,66 @@
             margin: 0 auto;
             display: block;
         }
-        /*
-        #toggleButton {
-            border: 1px solid black;
-            background-color: transparent;
-            padding: 0.5em 1em;
-            position: fixed;
-            top: 10px;
-            right: 10px;
-            z-index: 1000;
+        #toolBar {
+            font-family: 'ChicagoFLF', sans-serif;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 9999;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 2em;
+            background-color: white;
+            color: black;
+            font-size: 1.25em;
+            padding: 0 0.5em;
+            box-sizing: border-box;
+            border-bottom: 1px solid black;
         }
-        #toggleButton:hover {
+        select {
+            appearance: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            background: transparent;
+            border: none;
+            outline: none;
+            box-shadow: none;
+            padding: 0;
+            margin: 0;
+            font-family: inherit;
+            color: inherit;
+            font-size: inherit;
+        }
+        select, button {
+            font-family: 'ChicagoFLF', sans-serif;
+            background-color: transparent;
+            border: 0;
+            outline: 0;
+            padding: 0.5em;
+            font-size: 1em;
             cursor: pointer;
+            color: black;
         }
-        */
     </style>
 </head>
 <body>
-    <!-- <button id="toggleButton">Toggle</button> -->
-    <textarea id="noteArea" rows="10" cols="30" placeholder="This is a modal note taking tool. With it, you can type text that'll be saved to the browser, and you can draw pictures that'll also be saved to the browser. You are in typing mode right now. To toggle between modes tap either cmd + d, ctrl + d or cmd + 1, or ctrl + 1. When in drawing mode, tap c to clear the canvas, tap s to save the contents of the canvas to a png."></textarea>
+    <div id="toolBar">
+        <p>mode: <span id="mode">typing</span></p>
+        <div>
+            <select name="menu" id="menu">
+                <option value="null">menu</option>
+                <option value="clear">clear</option>
+                <option value="save">save</option>
+                <option value="help">help</option>
+            </select>
+            <button id="toggle">switch!</button>
+        </div>
+    </div>
+    <textarea id="noteArea" rows="10" cols="30" placeholder="Type text here."></textarea>
     <canvas id="drawingArea" width="500" height="500" tabindex="0"></canvas>
     <script src="ink.js"></script>
 </body>