From ee60bb172b3b2aa421bd30c89a209bbf29c20055 Mon Sep 17 00:00:00 2001
From: Drew Bednar <drew@runcible.io>
Date: Fri, 9 Aug 2024 07:31:53 -0400
Subject: [PATCH] Better layout

---
 Makefile   | 10 +++++++++-
 index.html | 21 ++++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/Makefile b/Makefile
index e228cc0..2b114b7 100644
--- a/Makefile
+++ b/Makefile
@@ -4,4 +4,12 @@ serve:
 
 build:
 	echo "Not implemented yet..."
-.PHONY: build
\ No newline at end of file
+.PHONY: build
+
+image:
+	docker build -t androiddrew/webserial:latest .
+.PHONY: build
+
+push:
+	docker push androiddrew/webserial:latest
+.PHONY: push
\ No newline at end of file
diff --git a/index.html b/index.html
index d70cddf..b088702 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
     <div class="flex flex-col h-3/4" id="container">
       <div class="p-5" id="top-half">
         <h1 class="italic text-3xl font-bold mb-4">Web Serial Console</h1>
+        <hr class="mb-6">
         <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 space-y-4 md:space-y-0">
           <div class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-4">
             <div class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-4">
@@ -18,14 +19,15 @@
                 <option value="">Add a device...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
               </select>
               <button id="add-port" class="ml-2 p-1 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                </svg>                
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 size-6"  fill="none" viewBox="0 0 24 24" stroke-width="2.0" stroke="currentColor" >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                </svg>    
               </button>
               <button id="refresh-ports" class="ml-2 p-1 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="7" >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.0" stroke="currentColor" class="h-5 w-5 text-gray-600 size-6">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
                 </svg>
+                
               </button>
               <label for="baud" class="text-sm font-medium leading-6 text-gray-900">Baud:</label>
               <select id="baud" name="baud" class="font-medium bg-white block w-full md:w-auto rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-500 sm:text-sm sm:leading-6">
@@ -53,6 +55,15 @@
       </div>
       <div class="font-mono rounded-md bg-white shadow-xl h-[calc(75vh-70px)] overflow-y-auto border border-gray-300 p-2.5 bg-gray-200 mx-5 mb-5" id="scrollable-element"></div>
     </div>
+    <footer>
+      <div class="mx-auto max-w-7xl overflow-hidden py-12 px-4 sm:px-6 lg:px-8">
+        <div class="mt-8 flex justify-center space-x-6">
+        </div>
+        <p class="mt-8 text-center text-base text-gray-400">
+          © <script>document.write( new Date().getFullYear())</script> <a class="" href="https://androiddrew.github.io">Drew Bednar.</a> All rights reserved.
+        </p>
+      </div>
+    </footer>
     <script src="script.js"></script>
   </body>
 </html>