From 5887b47a30c40e2137a0393d52b1377d2f44fa4d Mon Sep 17 00:00:00 2001
From: "MR.NOBODY" <126796695+TacticalReader@users.noreply.github.com>
Date: Mon, 22 Sep 2025 16:51:29 +0530
Subject: [PATCH] Update index.html

---
 9-chat-project/solution/frontend/index.html | 116 +++++++++++++++-----
 1 file changed, 87 insertions(+), 29 deletions(-)
diff --git a/9-chat-project/solution/frontend/index.html b/9-chat-project/solution/frontend/index.html
index e0091e09..80cc16fb 100644
--- a/9-chat-project/solution/frontend/index.html
+++ b/9-chat-project/solution/frontend/index.html
@@ -1,35 +1,93 @@
+<!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>Stellar AI Chat</title>
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="styles.css">
-    </head>
-    <body>
-      <div class="app">
-        <header class="header">
-          <div style="display:flex;align-items:center;gap:12px;">
-            <div class="logo">🤖</div>
-            <div>
-              <h1>My company</h1>
-              <p class="subtitle">Dark-mode chat UI — powered by the backend AI</p>
-            </div>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="dark light" />
+    <title>Stellar AI Chat</title>
+
+    <!-- Fonts: Inter variable -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300..900&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Icons: Font Awesome 6 -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      referrerpolicy="no-referrer"
+    />
+
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="app" id="app" data-theme="dark">
+      <header class="header">
+        <div class="brand">
+          <div class="logo" aria-hidden="true">
+            <i class="fa-solid fa-robot"></i>
+          </div>
+          <div>
+            <h1 class="title">My company</h1>
+            <p class="subtitle">Dark‑mode chat UI — powered by the backend AI</p>
           </div>
-        </header>
+        </div>
 
-        <main class="chat" id="chat">
-          <div class="messages" id="messages" aria-live="polite"></div>
+        <nav class="actions" aria-label="Header actions">
+          <button class="icon-btn" id="themeToggle" aria-label="Toggle theme">
+            <i class="fa-solid fa-moon"></i>
+          </button>
+          <button class="icon-btn" id="clearChat" aria-label="Clear chat">
+            <i class="fa-solid fa-trash"></i>
+          </button>
+          <button class="icon-btn" id="settings" aria-label="Settings">
+            <i class="fa-solid fa-gear"></i>
+          </button>
+        </nav>
+      </header>
 
-          <form id="composer" class="composer" action="#">
-            <textarea id="input" placeholder="Say hello — press Enter to send (Shift+Enter for newline)" rows="2"></textarea>
-            <button id="send" type="submit">Send</button>
-          </form>
-        </main>
+      <main class="chat" id="chat">
+        <div class="messages" id="messages" aria-live="polite" aria-label="Chat messages"></div>
+
+        <form id="composer" class="composer" action="#">
+          <button class="icon-left" type="button" id="attachBtn" aria-label="Attach">
+            <i class="fa-solid fa-paperclip"></i>
+          </button>
+
+          <textarea
+            id="input"
+            class="input"
+            placeholder="Say hello — Enter to send, Shift+Enter for newline"
+            rows="1"
+            spellcheck="true"
+            autocomplete="off"
+            aria-label="Message input"
+          ></textarea>
+
+          <div class="composer-actions">
+            <button class="icon-btn" type="button" id="micBtn" aria-label="Voice">
+              <i class="fa-solid fa-microphone"></i>
+            </button>
+            <button id="send" class="send-btn" type="submit" aria-label="Send">
+              <span>Send</span>
+              <i class="fa-solid fa-paper-plane"></i>
+            </button>
+          </div>
+        </form>
+      </main>
 
-        <footer class="footer">Running with backend at <code>http://127.0.0.1:5000/hello</code></footer>
-      </div>
+      <footer class="footer">
+        <div class="status">
+          <span class="dot" id="statusDot" aria-hidden="true"></span>
+          <span>Backend:</span>
+          <code>http://127.0.0.1:5000/hello</code>
+        </div>
+      </footer>
+    </div>
 
-      <script src="app.js"></script>
-    </body>
-</html>
\ No newline at end of file
+    <script src="app.js"></script>
+  </body>
+</html>
