From b088e936bc088be0799ca3a8de24f5ced1545f8c Mon Sep 17 00:00:00 2001
From: Rethabile <220455430@mycput.ac.za>
Date: Fri, 28 Mar 2025 14:41:06 +0200
Subject: [PATCH] Update index.html

Modernized UI:

Improved spacing and padding for better readability.

Added hover effects for buttons.

Enhanced text contrast for readability.

Enhanced Buttons:

Increased size for better accessibility.

Added smooth hover effects.

Optimized Input Field:

Improved padding and border for a cleaner look.
---
 public/index.html | 98 ++++++++++++++++++-----------------------------
 1 file changed, 38 insertions(+), 60 deletions(-)
diff --git a/public/index.html b/public/index.html
index 0c2b9ae..3d8c7c4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,58 +1,37 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="js/houndify.js"></script>
     <link
-      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
+      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
       rel="stylesheet"
     />
     <script
       src="https://kit.fontawesome.com/364c1db764.js"
       crossorigin="anonymous"
     ></script>
+    <title>Houndify Demo</title>
   </head>
-
-  <body class="bg-gray-100 min-h-screen">
-    <div class="m-auto max-w-3xl bg-white py-12 px-6">
-      <h2 class="text-3xl font-bold mb-6">Houndify JavaScript SDK Demo</h2>
-      <p class="pb-2">
+  <body class="bg-gray-100 min-h-screen flex items-center justify-center p-6">
+    <div class="max-w-3xl w-full bg-white shadow-lg rounded-lg p-8">
+      <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">
+        Houndify JavaScript SDK Demo
+      </h2>
+      <p class="text-gray-700 mb-4">
         This example demonstrates how to query the Houndify SDK using text and
-        voice requests. The example is built in vanilla JavaScript and can be
-        ported to other JavaScript frameworks.
-      </p>
-
-      <h2 class="text-lg font-bold mt-6">Setup</h2>
-      <p class="pb-2">
-        To setup this example, you need to add your Houndify Client ID into the
-        HTML file. You can get your free Client ID by creating an account on
-        <a class="text-blue-500" href="https://houndify.com">www.houndify.com</a
-        >. Refer to the
-        <a
-          class="text-blue-500"
-          href="https://github.com/soundhound/hound-sdk-web-example/blob/master/README.md"
-          >README.md</a
-        >
-        for more information.
+        voice requests.
       </p>
-      <p class="pb-2">
-        Once you have entered in your Client ID, click on the microphone to make
-        a voice query (ex: <i>"What's the weather in Toronto"</i>), or type it
-        into the input box and click on the search button. You'll see a JSON
-        response in the <strong>Response JSON</strong> box below.
-      </p>
-
-      <div id="status" class="bg-blue-100 text-blue-700 p-4 my-4 rounded">
-        <div class="text-xs font-bold text-blue-700">Status</div>
-        <p class="text-sm">
-          Click on the Mic and say a voice query, or type in the text query into
-          the input box.
-        </p>
+      <div class="bg-blue-100 text-blue-700 p-4 rounded-md mb-6">
+        <p class="font-semibold">Status:</p>
+        <p id="status" class="text-sm">Ready to receive input.</p>
       </div>
-
-      <form id="form" action="javascript:void(0);">
-        <div class="p-6 bg-gray-200 my-12 shadow-xl rounded">
+      <form id="form" class="space-y-4" action="javascript:void(0);">
+        <div class="flex items-center space-x-4 bg-gray-200 p-4 rounded-lg">
           <button
             id="voiceIcon"
-            class="text-lg bg-gray-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-12 h-12"
+            class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full focus:outline-none focus:ring"
             onclick="onMicrophoneClick()"
           >
             <i class="fas fa-microphone"></i>
@@ -60,52 +39,51 @@ <h2 class="text-lg font-bold mt-6">Setup</h2>
           <input
             id="query"
             type="text"
-            placeholder="Click on a microphone icon or type in your query..."
-            class="text-xl appearance-none border rounded p-2 w-3/4 text-gray-700 h-12 focus:outline-none focus:shadow-outline"
+            placeholder="Type or use the mic..."
+            class="flex-1 border rounded-lg p-2 text-gray-700 focus:ring focus:ring-blue-300"
           />
           <button
             id="textSearchButton"
-            class="text-lg bg-gray-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-12 h-12"
+            class="bg-green-600 hover:bg-green-700 text-white p-3 rounded-full focus:outline-none focus:ring"
             onclick="initTextRequest()"
           >
             <i class="fas fa-search"></i>
           </button>
         </div>
-
         <div>
-          <h3 class="text-lg font-bold">Audio upload</h3>
-          <label class="ui label block" for="file"
-            >Upload a recorded voice query from a file.</label
+          <label class="block text-gray-700 font-semibold mb-2"
+            >Upload Audio Query:</label
           >
           <input
             type="file"
             id="file"
-            name="file"
+            class="w-full p-2 border rounded-lg focus:ring focus:ring-blue-300"
             onchange="onFileUpload()"
-            class="bg-gray-200 hover:bg-gray-400 py-2 px-4 rounded block my-4"
           />
         </div>
-
-        <div class="flex mb-4">
-          <div class="w-1/2 h-12">
-            <h5>Response JSON</h5>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <h3 class="text-lg font-bold text-gray-800 mb-2">Response JSON</h3>
             <textarea
               id="responseJSON"
-              class="w-full h-48 font-mono text-xs"
-              placeholder="Make a query to view the response JSON here."
+              class="w-full h-48 p-2 text-xs border rounded-lg bg-gray-50"
+              placeholder="Response JSON will appear here..."
             ></textarea>
           </div>
-          <div class="w-1/2 h-12">
-            <h5>Search info object</h5>
+          <div>
+            <h3 class="text-lg font-bold text-gray-800 mb-2">Search Info</h3>
             <textarea
               id="infoJSON"
-              class="w-full h-48 font-mono text-xs"
-              placeholder="Make a query to view the search information JSON object here."
+              class="w-full h-48 p-2 text-xs border rounded-lg bg-gray-50"
+              placeholder="Search info JSON will appear here..."
             ></textarea>
           </div>
         </div>
       </form>
     </div>
+  </body>
+</html>
+
 
     <script>
       //HTML ELEMENTS FOR DISPLAYING RESPONSE AND INFO JSON's
@@ -117,7 +95,7 @@ <h5>Search info object</h5>
 
       // UPDATE YOUR CLIENT ID HERE TO YOUR HOUNDIFY.COM CLIENT ID.
       // > [INSERT CLIENT ID BELOW]
-      const clientID = "YOUR_CLIENT_ID";
+      const clientID = "r6edXhzRuwacGcf--kqqkA==";
       let conversationState = null;
       let voiceRequest = null;
 
