feat(ui): add persian rtl chat interface

2026-06-16 14:17:59 +03:30
parent 5d8eab071e
commit 6d8f2dacb7
4 changed files with 577 additions and 0 deletions
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="fa" dir="rtl">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>چت‌روم WebSocket</title>
+  <link rel="stylesheet" href="/static/style.css" />
+</head>
+<body>
+  <main class="shell">
+    <header class="header">
+      <div>
+        <p class="eyebrow">پروژه مهندسی اینترنت</p>
+        <h1>چت‌روم ساده با WebSocket</h1>
+        <p class="subtitle">یک نمونه آموزشی برای ارسال و دریافت پیام هم‌زمان بین چند کاربر.</p>
+      </div>
+      <div class="status-pill" id="connectionStatus">قطع</div>
+    </header>
+
+    <section class="layout">
+      <aside class="panel setup-panel">
+        <h2>ورود به اتاق</h2>
+        <label for="username">نام شما</label>
+        <input id="username" placeholder="مثلا علی" maxlength="24" />
+
+        <label for="room">نام اتاق</label>
+        <input id="room" placeholder="مثلا عمومی" maxlength="30" />
+
+        <div class="button-row">
+          <button id="connectBtn">اتصال</button>
+          <button id="disconnectBtn" class="secondary" disabled>قطع اتصال</button>
+        </div>
+
+        <div class="online-box">
+          <h3>کاربران آنلاین</h3>
+          <ul id="usersList">
+            <li class="muted">هنوز اتاقی فعال نیست</li>
+          </ul>
+        </div>
+      </aside>
+
+      <section class="panel chat-panel">
+        <div class="chat-header">
+          <div>
+            <h2 id="roomTitle">اتاقی انتخاب نشده است</h2>
+            <p id="roomSubtitle">برای شروع گفتگو متصل شوید.</p>
+          </div>
+          <button id="clearBtn" class="ghost">پاک کردن</button>
+        </div>
+
+        <div id="messages" class="messages" aria-live="polite"></div>
+
+        <form id="messageForm" class="message-form">
+          <input id="messageInput" placeholder="پیام خود را بنویسید..." autocomplete="off" disabled />
+          <button id="sendBtn" type="submit" disabled>ارسال</button>
+        </form>
+      </section>
+    </section>
+  </main>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>