Update index.html

2 months ago · 5887b47a30
parent 91706b8913
commit 5887b47a30
1 changed files with 87 additions and 29 deletions
--- 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>
+    <script src="app.js"></script>
+  </body>
+</html>