update styling

Author: brandonmwest

index.html

@@ -14,24 +14,24 @@
         <h1>
             Real-time Audio Transcription
         </h1>
-        Using the <a href="https://aws.amazon.com/transcribe/">Amazon Transcribe</a> WebSocket API
-        <hr />
+        <p class="small-caps">
+            Using the <a href="https://aws.amazon.com/transcribe/">Amazon Transcribe</a> WebSocket API
+        </p>
+        <hr/>
         <p>
             Create an <a href="https://aws.amazon.com/free/">AWS Account</a>, attach the necessary <a
-                href="policy.json"> IAM policy</a>, and enter your Access Id and Secret Key below 
+                href="policy.json"> IAM policy</a>, and enter your Access Id and Secret Key below
         </p>
 
         <div id="error" class="isa_error"></div>
 
-
         <div class="row">
             <div class="col">
                 <label>Access ID:</label>
                 <input type="password" id="access_id" placeholder="ACCESS ID" value="" />
 
                 <label>Secret Key:</label>
                 <input type="password" id="secret_key" placeholder="SECRET KEY" value="" />
-
             </div>
             <div class="col">
                 <label>Language: </label>
@@ -61,16 +61,21 @@ <h1>
 
             </div>
         </div>
-        <br />
-        <div class="text-center">
-            <button id="start-button" class="button-xl" title="Start Transcription"><i class="fa fa-microphone"></i>
-                Start</button>
-            <button id="stop-button" class="button-xl" title="Stop Transcription" disabled="true"><i
-                    class="fa fa-stop-circle"></i>
-                Stop</button>
-            <textarea id="transcript" placeholder="Press Start and speak into your mic" rows="8"
-                readonly="readonly"></textarea>
-
+        <textarea id="transcript" placeholder="Press Start and speak into your mic" rows="5"
+            readonly="readonly"></textarea>
+        <div class="row">
+            <div class="col">
+                <button id="start-button" class="button-xl" title="Start Transcription"><i class="fa fa-microphone"></i>
+                    Start</button>
+                <button id="stop-button" class="button-xl" title="Stop Transcription" disabled="true"><i
+                        class="fa fa-stop-circle"></i>
+                    Stop</button>
+            </div>
+            <div class="col">
+                <a class="float-right" href="https://aws.amazon.com/free/" aria-label="Amazon Web Services">
+                    <img id="logo" src="AWS_logo_RGB.png" alt="AWS Logo" />
+                </a>
+            </div>
         </div>
     </div>
 
@@ -83,13 +88,8 @@ <h1>
             <path
                 d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
                 fill="currentColor" class="octo-body"></path>
-        </svg></a>
-
-    <div class="text-center">
-        <a href="https://aws.amazon.com/free/" aria-label="Amazon Web Services">
-            <img id="logo" src="AWS_logo_RGB.png" alt="AWS Logo" />
-        </a>
-    </div>
+        </svg>
+    </a>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="dist/main.js"></script>

lib/main.js

@@ -207,7 +207,7 @@ function getAudioEventMessage(buffer) {
 }
 
 function createPresignedUrl() {
-    let endpoint = "transcribestreaming" + region + ".amazonaws.com";
+    let endpoint = "transcribestreaming." + region + ".amazonaws.com";
 
     // get a preauthenticated URL that we can use to establish our WebSocket
     return v4.createPresignedURL(

styles.css

@@ -30,7 +30,7 @@ body {
 }
 
 #logo {
-    height: 80px;
+    height: 52px;
 }
 
 #github {
@@ -40,4 +40,8 @@ body {
     top: 0;
     border: 0;
     right: 0;
+}
+
+.small-caps {
+    font-variant: small-caps;
 }