Move DIFF button and output upper

k0kubun · k0kubun · commit 0bb61806668b · 2019-11-12T00:04:28.000-08:00
because it's hard to find the output when it's appended to the bottom of
the page.
diff --git a/index.html b/index.html
@@ -20,7 +20,6 @@
         background: #eee;
         color: #000;
         padding: 20px;
-        margin-bottom: 20px;
         width: 100%;
       }
       pre {
@@ -38,39 +37,48 @@
       a:hover {
         color: IndianRed;
       }
+      h4.schema-header {
+        margin-bottom: 0.7em;
+      }
     </style>
   </head>
   <body>
     <h1>sqldef</h1>
     <img src="https://github.com/k0kubun/sqldef/raw/master/demo.gif" alt="screen capture" />
+
     <h2>What is it?</h2>
     <p>sqldef is a <a href="https://github.com/k0kubun/sqldef">CLI tool</a>, <a href="https://github.com/sqldef/sqldef.github.io">webasm library</a>, and <a href="https://github.com/sqldef/node-sqldef">nodejs tool/library</a> for diffing SQL schema. You can use it to manage migration of PostgreSQL and MySQL databases, using regular SQL DDL.</p>
+
     <h2>Demo</h2>
-    <p>You can diff these 2 schemas:</p>
-<pre id="error"></pre>
+    <p>You can generate DDLs to update the DB schema:</p>
+
+    <div>
+      <select id="dbType">
+        <option value="mysql">MySQL</option>
+        <option value="postgres">PostgreSQL</option>
+      </select>
+      <button id="buttonDiff">DIFF</button>
+    </div>
+
+    <pre id="output"></pre>
+    <pre id="error"></pre>
+
+<h4 class="schema-header">Current schema</h4>
 <textarea id="inputA" rows="10">
 CREATE TABLE user (
   id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
   name VARCHAR(128) DEFAULT 'konsumer'
 ) Engine=InnoDB DEFAULT CHARSET=utf8mb4;
 </textarea>
 
+<h4 class="schema-header">New schema</h4>
 <textarea id="inputB" rows="10">
 CREATE TABLE user (
   id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
   name VARCHAR(128) DEFAULT 'konsumer',
   created_at DATETIME NOT NULL
 ) Engine=InnoDB DEFAULT CHARSET=utf8mb4;
 </textarea>
-    <div>
-      <select id="dbType">
-        <option value="mysql">MySQL</option>
-        <option value="postgres">PostgreSQL</option>
-      </select>
-      <button id="buttonDiff">DIFF</button>
-    </div>
-    <pre id="output"></pre>
-  </body>
 
 <script>
 const button = document.getElementById('buttonDiff')
@@ -93,4 +101,5 @@ <h2>Demo</h2>
 })
 </script>
 
-</html>
+  </body>
+</html>
