|
|
<!doctype html>
|
|
|
<html lang="en">
|
|
|
<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>
|
|
|
</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>
|
|
|
|
|
|
<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">
|
|
|
<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>
|
