feat: polished UI for websat (#54)

# Description Detail improvements to the websat UI: - More consistent color schemes - Transparent default logo and favicon - Change font - Adjust button and text box sizing - Color highlights on focus for buttons and text boxes - Switch to Tailwind.css for base CSS ![image](https://github.com/NeonGeckoCom/neon-iris/assets/30268971/1a9aa5c9-f8a7-4f29-a0d0-1a8e83273e9e) # Issues N/A --------- Co-authored-by: mikejgray <[email protected]>
NeonGeckoCom · Jan 29, 2024 · 30ee867 · 30ee867
1 parent a062295
commit 30ee867
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 192 deletions.
diff --git a/.gitignore b/.gitignore
@@ -127,3 +127,5 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+.DS_Store
diff --git a/README.md b/README.md
@@ -141,7 +141,7 @@ The websat web UI reads in the following items from `neon_iris/static/custom`:
 - `error.mp3` - Used for error responses
 - `wake.mp3` - Used for wake word responses
 - `favicon.ico` - The favicon for the web UI
-- `logo.webp` - The logo for the web UI
+- `logo.svg` - The logo for the web UI
 
 To customize these items, you can replace them in the `neon_iris/static/custom` folder and rebuild the image.
 

diff --git a/neon_iris/static/custom/favicon.ico b/neon_iris/static/custom/favicon.ico
diff --git a/neon_iris/static/custom/logo.svg b/neon_iris/static/custom/logo.svg
diff --git a/neon_iris/static/custom/logo.webp b/neon_iris/static/custom/logo.webp
diff --git a/neon_iris/static/scripts/audio.js b/neon_iris/static/scripts/audio.js
@@ -102,8 +102,10 @@ startButton.addEventListener("click", function () {
   // Update the button's text and class based on the recording state
   if (AudioHandler.isRecording()) {
     startButton.classList.add("listening");
+    startButton.classList.toggle("bg-blue-500");
     startButton.textContent = "Listening...";
   } else {
+    startButton.classList.toggle("bg-blue-500");
     startButton.classList.remove("listening");
     startButton.textContent = "Start Listening";
   }

diff --git a/neon_iris/static/styles.css b/neon_iris/static/styles.css
@@ -1,135 +1,5 @@
-body,
-html {
-  text-align: center;
-  font-family: "Roboto", sans-serif;
-  background-color: #f4f4f4;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-img.logo {
-  width: 40px;
-  height: 40px;
-}
-a {
-  text-decoration: none;
-}
-a:link {
-  color: #fff;
-  border-bottom: 1px solid #ff0000;
-}
-a:visited {
-  color: #e600e6;
-  border-bottom: 1px solid #b3b3b3;
-}
-a:hover {
-  color: black;
-  border-bottom: 1px solid #000099;
-}
-.button-container {
-  display: flex;
-  justify-content: center; /* This centers the button in the container */
-  padding: 20px;
-  background-color: #333; /* Match the header background */
-}
-#startButton {
-  padding: 15px 30px;
-  font-size: 18px;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  cursor: pointer;
-  outline: none;
-  margin-bottom: 10px;
-  margin-top: 10px;
-  transition: background-color 0.3s;
-  background-color: #4caf50;
-  max-width: 50%;
-  align-content: center;
-  align-self: center;
-}
 #startButton.listening {
-  background-color: #03a9f4;
-}
-.content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px;
-  background-color: #333;
-  margin: 0;
-}
-.chat-header {
-  padding: 20px;
-  background-color: #333;
-  color: #fff;
-  text-align: center;
-  font-size: 2em;
-  text-shadow: 2px 2px 4px #000000;
-  transition: transform 0.3s ease;
-}
-.chat-header:hover {
-  transform: scale(
-    1.05
-  ); /* Slight increase in size on hover for dynamic effect */
-}
-.chat-window {
-  display: flex;
-  flex-direction: column;
-  padding: 20px;
-  overflow: auto;
-}
-#chatHistory {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start; /* Align items to the start by default */
-  height: 100%;
-  overflow-y: auto; /* Allows scrolling if content overflows */
-  background-color: #1a1a1a; /* Dark background for the chat container */
-}
-.input-area {
-  display: flex;
-  padding: 20px;
-}
-.input-area input {
-  flex: 1;
-  padding: 10px;
-  margin-right: 10px;
-  font-size: 16px;
-}
-.input-area button {
-  padding: 10px 20px;
-  background-color: #f90;
-  border: none;
-  font-size: 16px;
-  cursor: pointer;
-}
-.input-area button:hover {
-  background-color: #e80;
-}
-.input-field {
-  flex-grow: 1;
-  padding: 10px;
-  font-size: 16px;
-  margin-right: 10px; /* Spacing between input field and submit button */
-}
-#download-area {
-  padding: 20px;
-  background-color: #333;
-  color: #fff;
-  text-align: center;
-  font-size: 1.5em;
-}
-.download-button {
-  display: inline-block;
-  padding: 10px 20px;
-  margin: 10px 0;
-  background-color: #03a9f4;
-  color: #ffffff;
-  text-align: center;
-  text-decoration: none;
-  border-radius: 5px;
-  transition: background-color 0.3s;
+  background-color: var(--color-neon-green);
 }
 
 /* Style for user messages */
@@ -161,36 +31,6 @@ a:hover {
   flex-direction: column;
   height: 100%;
   background-color: #1a1a1a;
-}
-
-/* Responsive design adjustments */
-@media (max-width: 768px) {
-  .content {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .button-container,
-  .input-area {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .input-field,
-  .submit-button,
-  #startButton {
-    width: 100%; /* Full width on smaller screens */
-    margin: 10px 0; /* Add vertical spacing */
-  }
-
-  .chat-header {
-    font-size: 1.5em; /* Smaller text size for smaller screens */
-  }
-}
-
-/* Further responsive adjustments for even smaller screens */
-@media (max-width: 480px) {
-  .chat-header {
-    font-size: 1.2em;
-  }
+  overflow: auto;
+  max-height: calc(100vh - 20vh);
 }
diff --git a/neon_iris/templates/index.html b/neon_iris/templates/index.html
@@ -1,42 +1,84 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
-    <link rel="icon" href="/static/custom/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="static/custom/favicon.ico" type="image/x-icon" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ title }}</title>
-    <link rel="stylesheet" href="/static/styles.css" />
-    <link rel="stylesheet" href="/static/sprite.css" />
+    <link rel="stylesheet" href="static/styles.css" />
+    <link rel="stylesheet" href="static/sprite.css" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      :root {
+        --color-neon-green: #2b7b2b;
+        --color-neon-orange: #ffa764;
+        --color-neon-beige: #ebd4b3;
+        --color-neon-gray: #fefefe;
+      }
+    </style>
   </head>
-  <body>
-    <div class="chat-container">
-      <div class="chat-header">
-        {{ description }} <img src="/static/custom/logo.webp" class="logo" />
+
+  <body class="font-roboto text-center bg-gray-900 text-white">
+    <div class="chat-container flex flex-col min-h-screen">
+      <div class="chat-header text-4xl font-bold p-6 bg-gray-800 shadow-md">
+        {{ description }}
+        <img
+          src="static/custom/logo.svg"
+          class="logo w-10 h-10 ml-2 inline-block"
+        />
       </div>
-      <button id="startButton">Start Recording</button>
-      <div class="chat-window" id="chatWindow">
-        <div id="chatHistory">
+      <button
+        id="startButton"
+        class="btn mx-auto my-6 px-6 py-3 rounded shadow-lg text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-700 bg-blue-500"
+      >
+        Start Recording
+      </button>
+      <div
+        class="chat-window flex flex-col flex-grow max-h-full overflow-hidden md:max-h-3/4"
+      >
+        <div
+          id="chatHistory"
+          class="flex flex-col items-start space-y-2 overflow-y-auto p-4"
+        >
           <!-- Chat messages will appear here -->
         </div>
       </div>
-      <div id="download-area"></div>
-      <div class="input-area">
-        <input type="text" id="chatInput" placeholder="{{ placeholder }}" />
-        <button onclick="submitMessage()">Submit</button>
+      <div id="download-area" class="p-4 bg-gray-800 hidden">
+        <!-- Downloadable content or hidden if not needed -->
+      </div>
+      <div
+        class="input-area flex justify-between items-center p-4 space-x-4 bg-gray-800"
+      >
+        <input
+          type="text"
+          id="chatInput"
+          placeholder="{{ placeholder }}"
+          class="flex-grow px-4 py-3 rounded bg-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-green-700"
+        />
+        <button
+          onclick="submitMessage()"
+          class="px-6 py-3 rounded shadow-lg text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-orange-700 dark:bg-neon-orange"
+          style="background-color: var(--color-neon-orange)"
+        >
+          Submit
+        </button>
         <div class="sprite" />
       </div>
     </div>
+    <!-- Silero VAD -->
+    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@ricky0123/[email protected]/dist/bundle.min.js"></script>
+    <!-- Config -->
+    <script>
+      const WS_URL = "{{ ws_url }}";
+    </script>
+    <!-- AI Code -->
+    <script src="static/scripts/websocket.js"></script>
+    <script src="static/scripts/audio.js"></script>
+    <script src="static/scripts/ui.js"></script>
+    <script src="static/scripts/sprite.js"></script>
   </body>
-  <!-- Silero VAD -->
-  <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@ricky0123/[email protected]/dist/bundle.min.js"></script>
-  <!-- Config -->
-  <script>
-    const WS_URL = "{{ ws_url }}";
-  </script>
-  <!-- AI Code -->
-  <script src="/static/scripts/websocket.js"></script>
-  <script src="/static/scripts/audio.js"></script>
-  <script src="/static/scripts/ui.js"></script>
-  <script src="/static/scripts/sprite.js"></script>
 </html>
diff --git a/neon_iris/version.py b/neon_iris/version.py
@@ -27,4 +27,4 @@
 # NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 # SOFTWARE,  EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-__version__ = "0.1.1a2"
+__version__ = "0.1.1a3"