msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

Update index.html

Browse Source
pull/1516/head
MR.NOBODY 12 months ago committed by GitHub
parent 91706b8913
commit 5887b47a30
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 87 additions and 29 deletions
Show Stats Download Patch File Download Diff File

80
9-chat-project/solution/frontend/index.html
Unescape View File

@ -1,33 +1,91 @@
<!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="dark light" />
<title>Stellar AI Chat</title> <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"> <!-- 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> </head>
<body> <body>
<div class="app"> <div class="app" id="app" data-theme="dark">
<header class="header"> <header class="header">
<div style="display:flex;align-items:center;gap:12px;"> <div class="brand">
<div class="logo">🤖</div> <div class="logo" aria-hidden="true">
<i class="fa-solid fa-robot"></i>
</div>
<div> <div>
<h1>My company</h1> <h1 class="title">My company</h1>
<p class="subtitle">Dark-mode chat UI — powered by the backend AI</p> <p class="subtitle">Dark‑mode chat UI — powered by the backend AI</p>
</div> </div>
</div> </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> </header>
<main class="chat" id="chat"> <main class="chat" id="chat">
<div class="messages" id="messages" aria-live="polite"></div> <div class="messages" id="messages" aria-live="polite" aria-label="Chat messages"></div>
<form id="composer" class="composer" action="#"> <form id="composer" class="composer" action="#">
<textarea id="input" placeholder="Say hello — press Enter to send (Shift+Enter for newline)" rows="2"></textarea> <button class="icon-left" type="button" id="attachBtn" aria-label="Attach">
<button id="send" type="submit">Send</button> <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> </form>
</main> </main>
<footer class="footer">Running with backend at <code>http://127.0.0.1:5000/hello</code></footer> <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> </div>
<script src="app.js"></script> <script src="app.js"></script>

Write Preview
Loading…
Cancel
Save