Add Real-Time Chat Functionality with Socket.io

index.html

@@ -20,11 +20,11 @@
       http-equiv="Content-Security-Policy"
       content="
       default-src 'self';
-      script-src 'self' https://cdn.jsdelivr.net;
+      script-src 'self' https://cdn.jsdelivr.net https://cdn.socket.io;
       style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com;
       font-src 'self' https://cdn.jsdelivr.net https://fonts.gstatic.com data:;
       img-src 'self' data: https:;
-      connect-src 'self';
+      connect-src 'self' ws: wss: http://localhost:* ws://localhost:* https://cdn.jsdelivr.net;
       object-src 'none';
       base-uri 'self';
       frame-ancestors 'none';
@@ -340,19 +340,70 @@ <h2 class="h5 mb-3">Popular Tags</h2>
       </div>
     </section>
 
-  </main>
+        <!-- Stream Grid -->
+        <div
+          id="streamGrid"
+          class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4"
+        >
+          <div id="loadingState" class="text-center py-5">
+            <div class="spinner-border text-primary" role="status"></div>
+            <p class="mt-3 text-muted">Loading live streams...</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Popular Tags -->
+      <section class="mt-5">
+        <h2 class="h5 mb-3">Popular Tags</h2>
+        <div id="popularTags" class="d-flex flex-wrap gap-2">
+          <span class="badge bg-primary tag-filter">JavaScript</span>
+          <span class="badge bg-primary tag-filter">Python</span>
+          <span class="badge bg-primary tag-filter">Rust</span>
+          <span class="badge bg-success tag-filter">English</span>
+          <span class="badge bg-light text-dark border tag-filter">Linux</span>
+        </div>
+      </section>
 
-  <!-- ================= FOOTER ================= -->
-  <footer class="text-center py-4 mt-5 border-top bg-light">
-    <p class="mb-0 text-muted">&copy; 2025 DevStream. All rights reserved.</p>
-  </footer>
+      <!-- Chat Container -->
+      <section class="mt-5">
+        <h2 class="h5 mb-3">Live Chat</h2>
+        <div class="chat-container">
+          <div
+            id="chatMessages"
+            class="p-3 overflow-auto"
+            style="height: 300px"
+          ></div>
+          <div class="input-group p-2 border-top">
+            <input
+              type="text"
+              id="chatInput"
+              class="form-control"
+              placeholder="Send a message..."
+              autocomplete="off"
+            />
+            <button id="sendBtn" class="btn btn-primary" type="button">
+              <i class="fas fa-paper-plane me-1"></i>Send
+            </button>
+          </div>
+        </div>
+      </section>
+    </main>
 
+    <!-- ================= FOOTER ================= -->
+    <footer class="text-center py-4 mt-5 border-top bg-light">
+      <p class="mb-0 text-muted">&copy; 2025 DevStream. All rights reserved.</p>
+    </footer>
   <!-- ================= SCRIPTS ================= -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
     crossorigin="anonymous"></script>
 
-  <script type="module" src="/src/js/main.js"></script>
+    <!-- ================= SCRIPTS ================= -->
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+      crossorigin="anonymous"
+    ></script>
 
+    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
 </body>
 
 </html>