improve responsive

public/index.html

@@ -18,20 +18,22 @@
       x-transition:leave="transition ease-in duration-200"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0 -translate-y-8"
-      class="fixed w-full z-20 py-4 px-6 top-0 font-mono text-white flex items-center justify-between space-x-1 bg-black bg-opacity-60"
+      class="fixed w-full z-20 py-4 px-6 top-0 font-mono text-white flex flex-col lg:flex-row items-center justify-between space-x-1 bg-black bg-opacity-60"
       style="text-shadow: 0px 0px 3px #000000">
       
       <div class="flex text-xl space-x-2">
         <div class="text-xl">🤗 AI WebTV</div>
-        <div class="text-md">👉 Pick a stream:</div>
+        <div class="text-md">👉 Change channel:</div>
         <template x-for="chan in channels">
           <div
             class="text-xl mr-2"
             :class="chan.id === channel.id
             ? 'font-bold'
             : 'hover:underline opacity-60 hover:opacity-80 cursor-pointer'"
-            x-on:click="window.location = `${window.location.origin}/?channel=${chan.id}&beta=true`"
-            x-text="chan.label"></div>
+            x-on:click="window.location = `${window.location.origin}/?channel=${chan.id}`"
+            x-text="chan.label">
+            <div class="animate-ping absolute inline-flex h-4 w-4 rounded-full bg-red-400 opacity-75"></div>
+          </div>
         </template>
       </div>
 
@@ -42,6 +44,7 @@
             <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 640 512"><path fill="currentColor" d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2h61.4C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z"/></svg>
           </div>
           <div x-text="channel.audience"></div>
+          <div x-text="channel.audience > 1 ? 'viewers' : 'viewer'"></div>
         </div>
 
         <div class="text-sm">(<a