diff --git a/public/images/parade-gallery/10699176.png b/public/images/parade-gallery/10699176.png
new file mode 100644
index 0000000..bd96599
Binary files /dev/null and b/public/images/parade-gallery/10699176.png differ
diff --git a/public/images/parade-gallery/10699177.png b/public/images/parade-gallery/10699177.png
new file mode 100644
index 0000000..0f20632
Binary files /dev/null and b/public/images/parade-gallery/10699177.png differ
diff --git a/public/images/parade-gallery/10699178.png b/public/images/parade-gallery/10699178.png
new file mode 100644
index 0000000..7b3ca08
Binary files /dev/null and b/public/images/parade-gallery/10699178.png differ
diff --git a/public/images/parade-gallery/10699179.png b/public/images/parade-gallery/10699179.png
new file mode 100644
index 0000000..619de48
Binary files /dev/null and b/public/images/parade-gallery/10699179.png differ
diff --git a/public/images/parade-gallery/10699180.png b/public/images/parade-gallery/10699180.png
new file mode 100644
index 0000000..ec95074
Binary files /dev/null and b/public/images/parade-gallery/10699180.png differ
diff --git a/public/images/parade-gallery/10699181.png b/public/images/parade-gallery/10699181.png
new file mode 100644
index 0000000..12e485e
Binary files /dev/null and b/public/images/parade-gallery/10699181.png differ
diff --git a/public/images/parade-gallery/10699182.png b/public/images/parade-gallery/10699182.png
new file mode 100644
index 0000000..f9e3565
Binary files /dev/null and b/public/images/parade-gallery/10699182.png differ
diff --git a/public/images/parade-gallery/10699183.png b/public/images/parade-gallery/10699183.png
new file mode 100644
index 0000000..12472be
Binary files /dev/null and b/public/images/parade-gallery/10699183.png differ
diff --git a/public/images/parade-gallery/10699184.png b/public/images/parade-gallery/10699184.png
new file mode 100644
index 0000000..1b4e9e8
Binary files /dev/null and b/public/images/parade-gallery/10699184.png differ
diff --git a/public/images/parade-gallery/10699185.png b/public/images/parade-gallery/10699185.png
new file mode 100644
index 0000000..6d91cac
Binary files /dev/null and b/public/images/parade-gallery/10699185.png differ
diff --git a/public/images/parade-gallery/10699186.png b/public/images/parade-gallery/10699186.png
new file mode 100644
index 0000000..a5f28c9
Binary files /dev/null and b/public/images/parade-gallery/10699186.png differ
diff --git a/public/images/parade-gallery/10699187.png b/public/images/parade-gallery/10699187.png
new file mode 100644
index 0000000..747b92e
Binary files /dev/null and b/public/images/parade-gallery/10699187.png differ
diff --git a/public/images/parade-gallery/10699188.png b/public/images/parade-gallery/10699188.png
new file mode 100644
index 0000000..982a69c
Binary files /dev/null and b/public/images/parade-gallery/10699188.png differ
diff --git a/public/images/parade-gallery/10699189.png b/public/images/parade-gallery/10699189.png
new file mode 100644
index 0000000..6ac050e
Binary files /dev/null and b/public/images/parade-gallery/10699189.png differ
diff --git a/public/images/parade-gallery/10699190.png b/public/images/parade-gallery/10699190.png
new file mode 100644
index 0000000..25b3b87
Binary files /dev/null and b/public/images/parade-gallery/10699190.png differ
diff --git a/public/images/parade-gallery/10699191.jpg b/public/images/parade-gallery/10699191.jpg
new file mode 100644
index 0000000..89c867c
Binary files /dev/null and b/public/images/parade-gallery/10699191.jpg differ
diff --git a/public/images/parade-gallery/10699192.png b/public/images/parade-gallery/10699192.png
new file mode 100644
index 0000000..b3ea99b
Binary files /dev/null and b/public/images/parade-gallery/10699192.png differ
diff --git a/public/images/parade-gallery/10699193.png b/public/images/parade-gallery/10699193.png
new file mode 100644
index 0000000..caa6da7
Binary files /dev/null and b/public/images/parade-gallery/10699193.png differ
diff --git a/public/images/parade-gallery/10699194.png b/public/images/parade-gallery/10699194.png
new file mode 100644
index 0000000..d7e27ce
Binary files /dev/null and b/public/images/parade-gallery/10699194.png differ
diff --git a/public/images/parade-gallery/10699195.png b/public/images/parade-gallery/10699195.png
new file mode 100644
index 0000000..f67545f
Binary files /dev/null and b/public/images/parade-gallery/10699195.png differ
diff --git a/public/images/parade-gallery/10699196.png b/public/images/parade-gallery/10699196.png
new file mode 100644
index 0000000..c2e2141
Binary files /dev/null and b/public/images/parade-gallery/10699196.png differ
diff --git a/public/images/parade-gallery/10699197.png b/public/images/parade-gallery/10699197.png
new file mode 100644
index 0000000..ceda7e6
Binary files /dev/null and b/public/images/parade-gallery/10699197.png differ
diff --git a/public/images/parade-gallery/10699198.png b/public/images/parade-gallery/10699198.png
new file mode 100644
index 0000000..4aaee99
Binary files /dev/null and b/public/images/parade-gallery/10699198.png differ
diff --git a/public/images/parade-gallery/10699199.png b/public/images/parade-gallery/10699199.png
new file mode 100644
index 0000000..57a7144
Binary files /dev/null and b/public/images/parade-gallery/10699199.png differ
diff --git a/public/images/parade-gallery/10699200.png b/public/images/parade-gallery/10699200.png
new file mode 100644
index 0000000..fed0f95
Binary files /dev/null and b/public/images/parade-gallery/10699200.png differ
diff --git a/public/images/parade-gallery/10699201.png b/public/images/parade-gallery/10699201.png
new file mode 100644
index 0000000..06fd358
Binary files /dev/null and b/public/images/parade-gallery/10699201.png differ
diff --git a/public/images/parade-gallery/10699202.png b/public/images/parade-gallery/10699202.png
new file mode 100644
index 0000000..e60e562
Binary files /dev/null and b/public/images/parade-gallery/10699202.png differ
diff --git a/public/images/parade-gallery/10699203.png b/public/images/parade-gallery/10699203.png
new file mode 100644
index 0000000..ac99d29
Binary files /dev/null and b/public/images/parade-gallery/10699203.png differ
diff --git a/public/images/parade-gallery/10699204.png b/public/images/parade-gallery/10699204.png
new file mode 100644
index 0000000..9e1117e
Binary files /dev/null and b/public/images/parade-gallery/10699204.png differ
diff --git a/public/images/parade-gallery/10699205.png b/public/images/parade-gallery/10699205.png
new file mode 100644
index 0000000..8c0668a
Binary files /dev/null and b/public/images/parade-gallery/10699205.png differ
diff --git a/public/images/parade-gallery/10699206.png b/public/images/parade-gallery/10699206.png
new file mode 100644
index 0000000..4b0a1dc
Binary files /dev/null and b/public/images/parade-gallery/10699206.png differ
diff --git a/public/images/parade-gallery/10699207.png b/public/images/parade-gallery/10699207.png
new file mode 100644
index 0000000..c126b0f
Binary files /dev/null and b/public/images/parade-gallery/10699207.png differ
diff --git a/public/images/parade-gallery/10699208.png b/public/images/parade-gallery/10699208.png
new file mode 100644
index 0000000..19e3590
Binary files /dev/null and b/public/images/parade-gallery/10699208.png differ
diff --git a/public/images/parade-gallery/10699209.png b/public/images/parade-gallery/10699209.png
new file mode 100644
index 0000000..49d2583
Binary files /dev/null and b/public/images/parade-gallery/10699209.png differ
diff --git a/public/images/parade-gallery/10699210.png b/public/images/parade-gallery/10699210.png
new file mode 100644
index 0000000..e08c89d
Binary files /dev/null and b/public/images/parade-gallery/10699210.png differ
diff --git a/public/images/parade-gallery/10699211.jpg b/public/images/parade-gallery/10699211.jpg
new file mode 100644
index 0000000..4a0f1d2
Binary files /dev/null and b/public/images/parade-gallery/10699211.jpg differ
diff --git a/public/images/parade-gallery/10699212.png b/public/images/parade-gallery/10699212.png
new file mode 100644
index 0000000..a7d6cbd
Binary files /dev/null and b/public/images/parade-gallery/10699212.png differ
diff --git a/public/images/parade-gallery/10699213.png b/public/images/parade-gallery/10699213.png
new file mode 100644
index 0000000..79a17de
Binary files /dev/null and b/public/images/parade-gallery/10699213.png differ
diff --git a/public/images/parade-gallery/10699214.png b/public/images/parade-gallery/10699214.png
new file mode 100644
index 0000000..7595085
Binary files /dev/null and b/public/images/parade-gallery/10699214.png differ
diff --git a/public/images/parade-gallery/10699215.png b/public/images/parade-gallery/10699215.png
new file mode 100644
index 0000000..f62ccb8
Binary files /dev/null and b/public/images/parade-gallery/10699215.png differ
diff --git a/public/images/parade-gallery/10699216.png b/public/images/parade-gallery/10699216.png
new file mode 100644
index 0000000..794332f
Binary files /dev/null and b/public/images/parade-gallery/10699216.png differ
diff --git a/public/images/parade-gallery/10699217.png b/public/images/parade-gallery/10699217.png
new file mode 100644
index 0000000..fdd8ec7
Binary files /dev/null and b/public/images/parade-gallery/10699217.png differ
diff --git a/public/images/parade-gallery/10699218.png b/public/images/parade-gallery/10699218.png
new file mode 100644
index 0000000..073cc9c
Binary files /dev/null and b/public/images/parade-gallery/10699218.png differ
diff --git a/public/images/parade-gallery/10699219.png b/public/images/parade-gallery/10699219.png
new file mode 100644
index 0000000..2db9185
Binary files /dev/null and b/public/images/parade-gallery/10699219.png differ
diff --git a/public/images/parade-gallery/10699220.png b/public/images/parade-gallery/10699220.png
new file mode 100644
index 0000000..347b44e
Binary files /dev/null and b/public/images/parade-gallery/10699220.png differ
diff --git a/public/images/parade-gallery/10699221.png b/public/images/parade-gallery/10699221.png
new file mode 100644
index 0000000..5b0a6d8
Binary files /dev/null and b/public/images/parade-gallery/10699221.png differ
diff --git a/public/images/parade-gallery/10699222.png b/public/images/parade-gallery/10699222.png
new file mode 100644
index 0000000..78b7adb
Binary files /dev/null and b/public/images/parade-gallery/10699222.png differ
diff --git a/public/images/parade-gallery/10699223.png b/public/images/parade-gallery/10699223.png
new file mode 100644
index 0000000..a8e8e7e
Binary files /dev/null and b/public/images/parade-gallery/10699223.png differ
diff --git a/public/images/parade-gallery/10699224.png b/public/images/parade-gallery/10699224.png
new file mode 100644
index 0000000..09feb80
Binary files /dev/null and b/public/images/parade-gallery/10699224.png differ
diff --git a/public/images/parade-gallery/10699225.png b/public/images/parade-gallery/10699225.png
new file mode 100644
index 0000000..651337b
Binary files /dev/null and b/public/images/parade-gallery/10699225.png differ
diff --git a/public/images/parade-gallery/10699226.png b/public/images/parade-gallery/10699226.png
new file mode 100644
index 0000000..290c227
Binary files /dev/null and b/public/images/parade-gallery/10699226.png differ
diff --git a/public/images/veteran-hero.jpg b/public/images/veteran-hero.jpg
new file mode 100644
index 0000000..8be7225
Binary files /dev/null and b/public/images/veteran-hero.jpg differ
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 65586c6..0adc8b1 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -1,503 +1,1024 @@
 {{--
-    文件功能：聊天室登录/注册首页（复刻原版 DEFAULT.asp 风格）
-    包含房间选择、性别选择，登录后弹出独立窗口直接进入聊天
+    文件功能：和平聊吧登录首页（全屏军旅版）
+    说明：展示军旅海报主视觉、战友登录表单与房间选择，并保留原有登录交互逻辑
 --}}
+@php
+    $systemName = \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '和平聊吧';
+    $systemNotice = \App\Models\SysParam::where('alias', 'sys_notice')->value('body') ?? '欢迎归队，第一次登录即为注册，请妥善保管密码。';
+    $smtpEnabled = \App\Models\SysParam::where('alias', 'smtp_enabled')->value('body') === '1';
+    $roomCount = count($rooms);
+    $defaultRoom = $rooms[0] ?? null;
+    $heroImage = asset('images/veteran-hero.jpg');
+@endphp
 <!DOCTYPE html>
 <html lang="zh-CN">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '飘落的流星在线聊天' }}</title>
+    <title>{{ $systemName }}</title>
     <meta name="csrf-token" content="{{ csrf_token() }}">
+    <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=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@700;900&family=Oswald:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
+        :root {
+            --bg: #0d0f0d;
+            --panel: #ded3bd;
+            --panel-soft: #ece3d1;
+            --text: #1b1a15;
+            --text-soft: #5f5b4f;
+            --border: rgba(71, 58, 36, 0.22);
+            --red: #7d231c;
+            --red-deep: #57140f;
+            --gold: #c6a35b;
+            --khaki: #5c654f;
+            --line: rgba(255, 255, 255, 0.08);
+            --success: #34553e;
+            --danger: #8f2e27;
+        }
+
         * {
+            box-sizing: border-box;
             margin: 0;
             padding: 0;
-            box-sizing: border-box;
+        }
+
+        html,
+        body {
+            height: 100%;
         }
 
         body {
-            font-family: "宋体", SimSun, "Microsoft YaHei", sans-serif;
-            font-size: 12px;
-            background: #c0d8ef;
-            color: #333;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-        }
-
-        /* 居中卡片 */
-        .login-card {
-            width: 720px;
-            border: 1px solid #8aaccf;
-            border-radius: 5px;
+            font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
+            background:
+                radial-gradient(circle at 10% 16%, rgba(198, 163, 91, 0.13), transparent 24%),
+                radial-gradient(circle at 90% 86%, rgba(125, 35, 28, 0.14), transparent 22%),
+                linear-gradient(145deg, #090b09, #161915 46%, #0c0d0c 100%);
+            color: var(--text);
+            padding: 16px;
             overflow: hidden;
-            box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.18);
         }
 
-        /* 标题栏 */
-        .card-header {
-            background: linear-gradient(180deg, #3a6fa0, #2a5580);
-            color: #fff;
-            text-align: center;
-            padding: 12px 0 10px;
-            font-size: 18px;
-            font-weight: bold;
-            letter-spacing: 3px;
-            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+        body::before {
+            content: "";
+            position: fixed;
+            inset: 0;
+            background-image:
+                linear-gradient(var(--line) 1px, transparent 1px),
+                linear-gradient(90deg, var(--line) 1px, transparent 1px);
+            background-size: 26px 26px;
+            pointer-events: none;
         }
 
-        /* 公告条 */
-        .notice-bar {
-            background: #fffde0;
-            border-bottom: 1px solid #e8d88e;
-            padding: 4px 10px;
-            font-size: 12px;
-            color: #996600;
-            text-align: center;
+        .shell {
+            width: min(1440px, 100%);
+            height: min(920px, calc(100svh - 32px));
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: minmax(0, 1.28fr) minmax(420px, 0.72fr);
+            border: 1px solid rgba(198, 163, 91, 0.28);
+            background: rgba(7, 8, 7, 0.92);
+            box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4);
+            overflow: hidden;
+            position: relative;
         }
 
-        /* 内容区：左右分栏 */
-        .card-body {
+        .shell::before {
+            content: "";
+            position: absolute;
+            inset: 8px;
+            border: 1px solid rgba(198, 163, 91, 0.14);
+            pointer-events: none;
+        }
+
+        .poster {
+            position: relative;
+            padding: 26px 30px 24px;
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+            overflow: hidden;
+            color: #f7f1e1;
+            background:
+                linear-gradient(90deg, rgba(4, 5, 4, 0.92) 0%, rgba(4, 5, 4, 0.78) 26%, rgba(6, 7, 6, 0.42) 58%, rgba(73, 18, 15, 0.3) 100%),
+                linear-gradient(180deg, rgba(9, 10, 8, 0.1), rgba(9, 10, 8, 0.76)),
+                linear-gradient(135deg, rgba(198, 163, 91, 0.12), transparent 30%),
+                linear-gradient(220deg, rgba(125, 35, 28, 0.18), transparent 30%),
+                url('{{ $heroImage }}') center center / cover no-repeat,
+                #060707;
+        }
+
+        .poster::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background:
+                radial-gradient(circle at center, rgba(198, 163, 91, 0.08), transparent 42%),
+                repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 96px);
+            pointer-events: none;
+        }
+
+        .poster::after {
+            content: "93";
+            position: absolute;
+            right: 18px;
+            bottom: -10px;
+            font-family: "Oswald", sans-serif;
+            font-size: clamp(150px, 18vw, 250px);
+            line-height: 0.85;
+            color: rgba(198, 163, 91, 0.08);
+            pointer-events: none;
+        }
+
+        .poster > * {
+            position: relative;
+            z-index: 1;
+        }
+
+        .poster-top {
             display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: 16px;
         }
 
-        /* 左侧：登录表单 */
-        .login-left {
-            flex: 1;
-            background: #eef5ff;
-            padding: 24px 30px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
-
-        .section-title {
-            font-size: 13px;
-            font-weight: bold;
-            color: #2a5580;
-            border-bottom: 1px solid #b8d0e8;
-            padding-bottom: 6px;
-            margin-bottom: 14px;
-        }
-
-        .form-row {
-            display: flex;
+        .poster-badge {
+            display: inline-flex;
             align-items: center;
-            margin-bottom: 12px;
+            gap: 10px;
+            padding: 10px 14px;
+            border: 1px solid rgba(255, 241, 210, 0.24);
+            background: rgba(0, 0, 0, 0.34);
+            font-size: 12px;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
         }
 
-        .form-label {
-            width: 50px;
-            text-align: right;
-            font-size: 12px;
-            color: #336699;
-            font-weight: bold;
-            padding-right: 8px;
+        .poster-badge svg {
+            width: 18px;
+            height: 18px;
+            color: var(--gold);
             flex-shrink: 0;
         }
 
-        .form-input {
-            flex: 1;
-            padding: 5px 8px;
-            height: 32px;
-            border: 1px solid #aaa;
-            border-radius: 3px;
+        .poster-code {
+            text-align: right;
+            font-family: "Oswald", sans-serif;
             font-size: 12px;
-            color: #333;
-            background: #fff;
-            max-width: 200px;
+            line-height: 1.55;
+            letter-spacing: 0.16em;
+            color: rgba(247, 241, 225, 0.72);
         }
 
-        .form-input:focus {
-            border-color: #336699;
-            outline: none;
-            box-shadow: 0 0 3px rgba(51, 102, 153, 0.3);
-        }
-
-        .gender-row {
+        .poster-main {
+            position: relative;
             display: flex;
             align-items: center;
-            gap: 20px;
-            margin: 6px 0 14px;
-            padding-left: 58px;
+            max-width: 650px;
+        }
+
+        .poster-stamp {
+            position: absolute;
+            top: 18px;
+            right: -26px;
+            border: 1px solid rgba(198, 163, 91, 0.42);
+            color: rgba(198, 163, 91, 0.96);
+            padding: 8px 14px;
+            transform: rotate(12deg);
+            font-family: "Oswald", sans-serif;
+            font-size: 13px;
+            letter-spacing: 0.14em;
+            background: rgba(0, 0, 0, 0.28);
+        }
+
+        .poster-copy {
+            max-width: 560px;
+        }
+
+        .poster-kicker {
+            display: inline-block;
+            padding: 8px 14px;
+            background: linear-gradient(90deg, var(--red), rgba(125, 35, 28, 0.6));
+            border-left: 4px solid var(--gold);
             font-size: 12px;
+            letter-spacing: 0.18em;
+            text-transform: uppercase;
         }
 
-        .gender-row label {
-            cursor: pointer;
-            color: #336699;
-            display: flex;
-            align-items: center;
-            gap: 3px;
+        .poster-title {
+            margin-top: 18px;
+            font-family: "Noto Serif SC", serif;
+            font-size: clamp(56px, 6vw, 88px);
+            line-height: 1.02;
+            letter-spacing: 0.04em;
+            text-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
         }
 
-        .captcha-wrap {
-            display: flex;
-            align-items: center;
-            flex: 1;
-            gap: 6px;
-        }
-
-        .captcha-wrap input {
-            width: 80px;
-            flex: none;
-            height: 32px;
-        }
-
-        .captcha-wrap img {
-            height: 32px;
-            cursor: pointer;
-            border: 1px solid #aaa;
-            border-radius: 3px;
-        }
-
-        .btn-row {
-            display: flex;
-            justify-content: center;
-            gap: 10px;
+        .poster-lead {
             margin-top: 16px;
+            font-size: clamp(18px, 2vw, 28px);
+            line-height: 1.5;
+            color: rgba(247, 241, 225, 0.95);
         }
 
-        .btn {
-            padding: 6px 24px;
-            border: 1px solid #999;
-            border-radius: 3px;
-            background: linear-gradient(180deg, #f8f8f8, #e0e0e0);
-            color: #333;
-            font-size: 12px;
-            cursor: pointer;
+        .poster-story {
+            margin-top: 18px;
+            max-width: 520px;
+            padding-left: 16px;
+            border-left: 3px solid rgba(198, 163, 91, 0.7);
+            font-size: 15px;
+            line-height: 1.9;
+            color: rgba(247, 241, 225, 0.8);
         }
 
-        .btn:hover {
-            background: linear-gradient(180deg, #e8e8e8, #d0d0d0);
+        .poster-points {
+            margin-top: 22px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
         }
 
-        .btn-primary {
-            background: linear-gradient(180deg, #4a8cc5, #336699);
-            color: #fff;
-            border-color: #2a5580;
-            font-weight: bold;
+        .poster-point {
+            padding: 10px 14px;
+            border: 1px solid rgba(255, 241, 210, 0.16);
+            background: rgba(12, 14, 12, 0.48);
+            font-size: 13px;
+            line-height: 1.4;
+            color: rgba(247, 241, 225, 0.88);
         }
 
-        .btn-primary:hover {
-            background: linear-gradient(180deg, #3a7cb5, #2a5a88);
+        .poster-bottom {
+            display: grid;
+            gap: 12px;
+            align-self: end;
         }
 
-        .btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
+        .poster-notice {
+            width: min(100%, 700px);
+            padding: 12px 14px;
+            border-left: 4px solid var(--gold);
+            background: linear-gradient(90deg, rgba(17, 14, 12, 0.88), rgba(17, 14, 12, 0.36));
+            font-size: 13px;
+            line-height: 1.8;
+            color: rgba(247, 241, 225, 0.88);
         }
 
-        .link-row {
-            text-align: center;
-            margin-top: 10px;
+        .poster-meta {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            width: min(100%, 700px);
             font-size: 11px;
-            color: #999;
+            line-height: 1.6;
+            color: rgba(247, 241, 225, 0.66);
         }
 
-        .alert {
+        .poster-meta a {
+            color: rgba(245, 217, 159, 0.96);
+            text-decoration: none;
+        }
+
+        .poster-meta a:hover {
+            text-decoration: underline;
+        }
+
+        .panel {
+            position: relative;
+            display: grid;
+            grid-template-rows: auto auto 1fr auto;
+            gap: 14px;
+            padding: 24px 24px 18px;
+            background:
+                linear-gradient(180deg, rgba(18, 18, 17, 0.96), rgba(33, 25, 20, 0.96)),
+                radial-gradient(circle at 8% 12%, rgba(198, 163, 91, 0.08), transparent 28%),
+                repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 32px);
+            color: #f2eadc;
+            overflow: hidden;
+            border-left: 1px solid rgba(198, 163, 91, 0.16);
+        }
+
+        .panel::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 6px;
+            background: linear-gradient(90deg, var(--red-deep), var(--gold), var(--khaki));
+        }
+
+        .panel-header {
+            border-bottom: 1px solid rgba(198, 163, 91, 0.18);
+            padding-bottom: 14px;
+        }
+
+        .panel-header small {
+            display: block;
+            font-family: "Oswald", sans-serif;
+            font-size: 11px;
+            letter-spacing: 0.2em;
+            color: rgba(198, 163, 91, 0.74);
+        }
+
+        .panel-header h2 {
+            margin-top: 6px;
+            font-family: "Noto Serif SC", serif;
+            font-size: clamp(34px, 4vw, 48px);
+            line-height: 1.08;
+            color: #f6efe2;
+        }
+
+        .panel-header p {
+            margin-top: 10px;
+            font-size: 13px;
+            line-height: 1.7;
+            color: rgba(242, 234, 220, 0.68);
+        }
+
+        #alert-box {
             display: none;
-            padding: 6px 10px;
-            margin-bottom: 10px;
-            border-radius: 3px;
-            font-size: 12px;
-            text-align: center;
+            padding: 10px 12px;
+            border-left: 4px solid transparent;
+            font-size: 13px;
+            line-height: 1.6;
         }
 
         .alert-error {
-            background: #fde8e8;
-            color: #cc0000;
-            border: 1px solid #f5c0c0;
+            background: rgba(143, 46, 39, 0.08);
+            border-color: var(--danger);
+            color: var(--danger);
         }
 
         .alert-success {
-            background: #e8fde8;
-            color: #006600;
-            border: 1px solid #c0f5c0;
+            background: rgba(52, 85, 62, 0.08);
+            border-color: var(--success);
+            color: var(--success);
         }
 
-        /* 右侧：房间列表 */
-        .login-right {
-            width: 250px;
-            background: #f0f6ff;
-            border-left: 1px solid #b8d0e8;
-            display: flex;
-            flex-direction: column;
+        .login-form {
+            display: grid;
+            grid-template-rows: auto auto auto auto auto auto;
+            gap: 12px;
+            min-height: 0;
+            align-content: start;
         }
 
-        .room-header {
-            background: #d8e8f5;
-            color: #336699;
-            font-size: 12px;
-            font-weight: bold;
-            padding: 7px 10px;
-            text-align: center;
-            border-bottom: 1px solid #b8d0e8;
+        .field-grid {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 10px;
         }
 
-        .room-list {
-            flex: 1;
-            overflow-y: auto;
-        }
-
-        .room-item {
+        .field-block label,
+        .field-title {
             display: flex;
             align-items: center;
-            padding: 6px 10px;
-            cursor: pointer;
-            border-bottom: 1px solid #e0ecf7;
+            gap: 8px;
+            margin-bottom: 6px;
+            font-size: 13px;
+            font-weight: 700;
+            color: rgba(246, 239, 226, 0.94);
+        }
+
+        .field-index {
+            min-width: 24px;
+            font-family: "Oswald", sans-serif;
             font-size: 12px;
-            transition: background 0.15s;
+            letter-spacing: 0.12em;
+            color: rgba(198, 163, 91, 0.74);
         }
 
-        .room-item:hover {
-            background: #dde8ff;
+        .field-input,
+        .field-select {
+            width: 100%;
+            height: 48px;
+            padding: 0 14px;
+            border: 1px solid rgba(198, 163, 91, 0.24);
+            background: rgba(255, 248, 236, 0.06);
+            color: #f5eee0;
+            font-size: 14px;
+            transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
         }
 
-        .room-item.selected {
-            background: #d0e4f5;
-            color: #1a4a70;
+        .field-select {
+            appearance: none;
+            background-image:
+                linear-gradient(45deg, transparent 50%, #b6a27c 50%),
+                linear-gradient(135deg, #b6a27c 50%, transparent 50%);
+            background-position:
+                calc(100% - 20px) 21px,
+                calc(100% - 14px) 21px;
+            background-size: 6px 6px, 6px 6px;
+            background-repeat: no-repeat;
+            padding-right: 38px;
         }
 
-        .room-item input[type="radio"] {
-            margin-right: 8px;
-            flex-shrink: 0;
+        .field-input::placeholder {
+            color: rgba(242, 234, 220, 0.42);
         }
 
-        .room-info {
-            flex: 1;
-            min-width: 0;
+        .field-input:focus,
+        .field-select:focus {
+            outline: none;
+            border-color: rgba(198, 163, 91, 0.56);
+            background: rgba(255, 248, 236, 0.1);
+            box-shadow: 0 0 0 3px rgba(198, 163, 91, 0.08);
         }
 
-        .room-name {
-            font-weight: bold;
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+        .captcha-row {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) 150px;
+            gap: 10px;
         }
 
-        .room-owner {
-            font-size: 11px;
-            color: #8aaccf;
-            display: block;
+        .captcha-image {
+            width: 100%;
+            height: 48px;
+            border: 1px solid rgba(198, 163, 91, 0.24);
+            background: rgba(255, 248, 236, 0.96);
+            object-fit: cover;
+            cursor: pointer;
         }
 
-        .room-item.selected .room-owner {
-            color: #b8d0e8;
+        .gender-row {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 10px;
         }
 
-        .room-footer {
-            background: #e0ecf7;
-            padding: 5px 10px;
-            font-size: 11px;
-            color: #666;
-            text-align: center;
-            border-top: 1px solid #b8d0e8;
+        .gender-option {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            height: 48px;
+            padding: 0 14px;
+            border: 1px solid rgba(198, 163, 91, 0.24);
+            background: rgba(255, 248, 236, 0.06);
+            cursor: pointer;
+            transition: border-color 0.2s ease, background-color 0.2s ease;
         }
 
-        /* 底部版权 */
-        .card-footer {
-            text-align: center;
-            padding: 6px;
-            font-size: 11px;
-            color: #7a9fc0;
-            background: #e0ecf7;
-            border-top: 1px solid #b8d0e8;
+        .gender-option:hover {
+            border-color: rgba(198, 163, 91, 0.52);
+            background: rgba(255, 248, 236, 0.1);
+        }
+
+        .gender-option.selected {
+            border-color: rgba(198, 163, 91, 0.62);
+            background: linear-gradient(90deg, rgba(125, 35, 28, 0.18), rgba(255, 248, 236, 0.08));
+        }
+
+        .gender-option input {
+            accent-color: var(--red);
+        }
+
+        .room-hint {
+            margin-top: 6px;
+            font-size: 12px;
+            line-height: 1.6;
+            color: rgba(242, 234, 220, 0.54);
+        }
+
+        .action-row {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) 136px;
+            gap: 10px;
+        }
+
+        .btn {
+            height: 52px;
+            border: 1px solid transparent;
+            font-size: 16px;
+            font-weight: 700;
+            letter-spacing: 0.04em;
+            cursor: pointer;
+            transition: filter 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
+        }
+
+        .btn:focus-visible {
+            outline: 2px solid rgba(125, 35, 28, 0.58);
+            outline-offset: 2px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(90deg, var(--red-deep), var(--red), #8d342d);
+            color: #f6eddc;
+            border-top: 2px solid rgba(234, 212, 170, 0.46);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-1px);
+            filter: brightness(1.04);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 248, 236, 0.05);
+            border-color: rgba(198, 163, 91, 0.24);
+            color: rgba(246, 239, 226, 0.88);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255, 248, 236, 0.09);
+        }
+
+        .btn:disabled {
+            opacity: 0.65;
+            cursor: not-allowed;
+            transform: none;
+            filter: none;
+        }
+
+        .panel-footer {
+            display: grid;
+            gap: 6px;
+            align-self: end;
+            font-size: 12px;
+            line-height: 1.6;
+            color: rgba(242, 234, 220, 0.6);
+        }
+
+        .panel-footer a {
+            color: rgba(222, 109, 96, 0.98);
+            text-decoration: none;
+        }
+
+        .panel-footer a:hover {
+            text-decoration: underline;
+        }
+
+        .site-credit {
+            font-family: "Oswald", sans-serif;
+            font-size: 13px;
+            letter-spacing: 0.08em;
+            color: rgba(198, 163, 91, 0.6);
+        }
+
+        @media (max-width: 1180px) {
+            .shell {
+                height: calc(100svh - 32px);
+                grid-template-columns: 1fr;
+                grid-template-rows: minmax(280px, 34svh) 1fr;
+            }
+
+            .poster {
+                min-height: 0;
+            }
+
+            .panel {
+                grid-template-rows: auto auto auto auto;
+                min-height: 0;
+            }
+        }
+
+        @media (max-width: 760px) {
+            body {
+                padding: 10px;
+            }
+
+            .shell {
+                height: calc(100svh - 20px);
+                grid-template-rows: minmax(250px, 31svh) 1fr;
+            }
+
+            .poster {
+                padding: 18px 18px 16px;
+            }
+
+            .poster::after {
+                font-size: 118px;
+                right: 10px;
+                bottom: -6px;
+            }
+
+            .poster-top {
+                gap: 10px;
+            }
+
+            .poster-badge {
+                padding: 8px 10px;
+                font-size: 11px;
+                letter-spacing: 0.08em;
+            }
+
+            .poster-code {
+                font-size: 10px;
+            }
+
+            .poster-stamp {
+                top: auto;
+                right: 0;
+                bottom: 6px;
+                transform: rotate(0deg);
+                font-size: 11px;
+                padding: 6px 10px;
+            }
+
+            .poster-title {
+                margin-top: 12px;
+                font-size: clamp(40px, 14vw, 58px);
+            }
+
+            .poster-lead {
+                margin-top: 10px;
+                font-size: 16px;
+                line-height: 1.45;
+            }
+
+            .poster-story {
+                margin-top: 10px;
+                font-size: 13px;
+                line-height: 1.7;
+                max-width: 100%;
+            }
+
+            .poster-points {
+                margin-top: 12px;
+                gap: 8px;
+            }
+
+            .poster-point {
+                padding: 8px 10px;
+                font-size: 12px;
+            }
+
+            .poster-notice,
+            .poster-meta {
+                width: 100%;
+            }
+
+            .poster-notice {
+                padding: 10px 12px;
+                font-size: 12px;
+                line-height: 1.7;
+            }
+
+            .poster-meta {
+                font-size: 10px;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 4px;
+            }
+
+            .panel {
+                padding: 16px 16px 14px;
+                gap: 10px;
+            }
+
+            .panel-header {
+                padding-bottom: 10px;
+            }
+
+            .panel-header p {
+                margin-top: 8px;
+                font-size: 12px;
+                line-height: 1.55;
+            }
+
+            .field-grid,
+            .gender-row {
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
+
+            .login-form {
+                gap: 10px;
+            }
+
+            .field-block label,
+            .field-title {
+                margin-bottom: 5px;
+                font-size: 12px;
+            }
+
+            .field-input,
+            .field-select,
+            .captcha-image,
+            .gender-option,
+            .btn {
+                height: 44px;
+                font-size: 14px;
+            }
+
+            .captcha-row {
+                grid-template-columns: minmax(0, 1fr) 124px;
+            }
+
+            .action-row {
+                grid-template-columns: minmax(0, 1fr) 110px;
+            }
+
+            .panel-footer {
+                gap: 4px;
+                font-size: 11px;
+                line-height: 1.5;
+            }
+
+            .site-credit {
+                font-size: 12px;
+            }
+        }
+
+        @media (max-height: 820px) and (min-width: 761px) {
+            .poster {
+                padding: 22px 24px 18px;
+            }
+
+            .poster-title {
+                font-size: clamp(46px, 5vw, 72px);
+            }
+
+            .poster-lead {
+                font-size: 18px;
+            }
+
+            .poster-story {
+                margin-top: 14px;
+                font-size: 14px;
+                line-height: 1.75;
+            }
+
+            .poster-points {
+                margin-top: 16px;
+            }
+
+            .panel {
+                padding: 18px 18px 14px;
+                gap: 10px;
+            }
+
+            .panel-header h2 {
+                font-size: 36px;
+            }
+
+            .field-input,
+            .field-select,
+            .captcha-image,
+            .gender-option,
+            .btn {
+                height: 44px;
+            }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            *,
+            *::before,
+            *::after {
+                animation: none !important;
+                transition: none !important;
+                scroll-behavior: auto !important;
+            }
         }
     </style>
 </head>
 
 <body>
-    <div class="login-card">
-        {{-- 标题 --}}
-        <div class="card-header">
-            {{ \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '飘落的流星在线聊天' }}
-        </div>
-
-        {{-- 公告 --}}
-        <div class="notice-bar">
-            {{ \App\Models\SysParam::where('alias', 'sys_notice')->value('body') ?? '欢迎来到聊天室！第一次登录即为注册，请记住您的密码。' }}
-        </div>
-
-        {{-- 内容区 --}}
-        <form id="login-form">
-            <div class="card-body">
-                {{-- 左侧：登录表单 --}}
-                <div class="login-left">
-                    <div class="section-title">🔑 用户登录</div>
-                    <div id="alert-box" class="alert"></div>
-
-                    <div class="form-row">
-                        <span class="form-label">昵称:</span>
-                        <input type="text" id="username" name="username" class="form-input" maxlength="10"
-                            placeholder="中英文、数字、下划线" required>
-                    </div>
-
-                    <div class="form-row">
-                        <span class="form-label">密码:</span>
-                        <input type="password" id="password" name="password" class="form-input" maxlength="20"
-                            placeholder="请输入密码" required>
-                    </div>
-
-                    <div class="form-row">
-                        <span class="form-label">验证:</span>
-                        <div class="captcha-wrap">
-                            <input type="text" id="captcha" name="captcha" class="form-input" maxlength="10"
-                                placeholder="输入验证码" required>
-                            <img src="/captcha/default?{{ mt_rand() }}" alt="验证码" id="captcha-img"
-                                onclick="refreshCaptcha()" title="点击刷新">
-                        </div>
-                    </div>
-
-                    <div class="gender-row">
-                        <label><input type="radio" name="bSex" value="1" checked> 男</label>
-                        <label><input type="radio" name="bSex" value="2"> 女</label>
-                    </div>
-
-                    <div class="btn-row">
-                        <button type="submit" id="submit-btn" class="btn btn-primary">进入聊天</button>
-                        <button type="reset" class="btn">重填</button>
-                    </div>
-
-                    <div class="link-row">
-                        第一次登录即为注册，请记住您的密码
-                        @if (\App\Models\SysParam::where('alias', 'smtp_enabled')->value('body') === '1')
-                            <div style="margin-top: 8px;">
-                                <a href="javascript:alert('邮箱找回密码业务即将上线...');"
-                                    style="color: #336699; text-decoration: none;">忘了密码？点击通过邮箱找回</a>
-                            </div>
-                        @endif
-                    </div>
-
-                    {{-- 推荐浏览器提示 --}}
-                    <div style="margin-top: 10px; font-size: 11px; color: #888; text-align: center;">
-                        🌐 推荐
-                        <a href="https://www.microsoft.com/zh-cn/edge/download" target="_blank"
-                            style="color: #1565c0; text-decoration: none;">Edge</a>
-                        /
-                        <a href="https://www.google.com/chrome/" target="_blank"
-                            style="color: #c0392b; text-decoration: none;">Chrome</a>
-                        浏览器，IE 等旧版不支持聊天室
-                    </div>
+    <main class="shell">
+        <section class="poster">
+            <div class="poster-top">
+                <div class="poster-badge">
+                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                        <path d="M12 3L14.6 8.27L20.42 9.11L16.21 13.22L17.21 19L12 16.26L6.79 19L7.79 13.22L3.58 9.11L9.4 8.27L12 3Z" fill="currentColor" />
+                    </svg>
+                    Veteran Reunion Channel
                 </div>
-
-                {{-- 右侧：房间列表 --}}
-                <div class="login-right">
-                    <div class="room-header">📋 选择房间</div>
-                    <div class="room-list">
-                        @forelse ($rooms as $room)
-                            <label class="room-item {{ $loop->first ? 'selected' : '' }}">
-                                <input type="radio" name="room_id" value="{{ $room->id }}"
-                                    {{ $loop->first ? 'checked' : '' }}>
-                                <div class="room-info">
-                                    <span class="room-name">{{ $room->name }}</span>
-                                    @if ($room->master)
-                                        <span class="room-owner">房主：{{ $room->master }}</span>
-                                    @endif
-                                </div>
-                            </label>
-                        @empty
-                            <div style="padding: 20px; text-align: center; color: #999;">暂无房间</div>
-                        @endforelse
-                    </div>
-                    <div class="room-footer">共 {{ count($rooms) }} 个房间</div>
+                <div class="poster-code">
+                    <div>FILE NO. HC-093</div>
+                    <div>RETURN TO CHANNEL</div>
                 </div>
             </div>
-        </form>
 
-        {{-- 底部 --}}
-        <div class="card-footer">Powered by 流星 &copy; {{ date('Y') }}</div>
-    </div>
+            <div class="poster-main">
+                <div class="poster-copy">
+                    <div class="poster-kicker">退伍不褪色 · 离队不离心</div>
+                    <h1 class="poster-title">{{ $systemName }}</h1>
+                    <p class="poster-lead">这是一个给复原老兵的聊天室，不追求花哨，只留下熟悉的劲头和说话方式。</p>
+                    <p class="poster-story">
+                        从军营里建立，到回地方后重新用 PHP 写回来。战友进来，不是游客，是归队。
+                    </p>
+                    <div class="poster-points">
+                        <span class="poster-point">军旅记忆</span>
+                        <span class="poster-point">战友情义</span>
+                        <span class="poster-point">老兵归队</span>
+                    </div>
+                </div>
+                <div class="poster-stamp">AUTHORIZED VETERAN</div>
+            </div>
+
+            <div class="poster-bottom">
+                <div class="poster-notice">{{ $systemNotice }}</div>
+                <div class="poster-meta">
+                    <span>左侧主视觉已固定为你提供的图片，并做了轻度清晰度增强处理。</span>
+                    <span>首页当前只使用这一张图。</span>
+                </div>
+            </div>
+        </section>
+
+        <section class="panel">
+            <div class="panel-header">
+                <small>VETERAN ACCESS FORM</small>
+                <h2>战友登录</h2>
+                <p>主视觉已固定，验证通过后直接进入房间。</p>
+            </div>
+
+            <div id="alert-box" aria-live="polite"></div>
+
+            <form id="login-form" class="login-form">
+                <div class="field-grid">
+                    <div class="field-block">
+                        <label for="username"><span class="field-index">01</span>昵称</label>
+                        <input class="field-input" type="text" id="username" name="username" maxlength="10" placeholder="中英文、数字、下划线" required>
+                    </div>
+                    <div class="field-block">
+                        <label for="password"><span class="field-index">02</span>密码</label>
+                        <input class="field-input" type="password" id="password" name="password" maxlength="20" placeholder="请输入密码" required>
+                    </div>
+                </div>
+
+                <div class="field-block">
+                    <label for="captcha"><span class="field-index">03</span>验证码</label>
+                    <div class="captcha-row">
+                        <input class="field-input" type="text" id="captcha" name="captcha" maxlength="10" placeholder="输入验证码" required>
+                        <img src="/captcha/default?{{ mt_rand() }}" alt="验证码" id="captcha-img" class="captcha-image" onclick="refreshCaptcha()" title="点击刷新验证码">
+                    </div>
+                </div>
+
+                <div class="field-block">
+                    <div class="field-title"><span class="field-index">04</span>性别</div>
+                    <div class="gender-row">
+                        <label class="gender-option selected">
+                            <input type="radio" name="bSex" value="1" checked>
+                            男
+                        </label>
+                        <label class="gender-option">
+                            <input type="radio" name="bSex" value="2">
+                            女
+                        </label>
+                    </div>
+                </div>
+
+                <div class="field-block">
+                    <label for="room_id"><span class="field-index">05</span>选择房间</label>
+                    <select class="field-select" id="room_id" name="room_id" {{ $roomCount === 0 ? 'disabled' : '' }}>
+                        @forelse ($rooms as $room)
+                            <option value="{{ $room->id }}" data-room-name="{{ $room->name }}" data-room-owner="{{ $room->master ?: '未设置' }}" {{ $loop->first ? 'selected' : '' }}>
+                                {{ $room->name }}
+                            </option>
+                        @empty
+                            <option value="">暂无可用房间</option>
+                        @endforelse
+                    </select>
+                    <div id="room-hint" class="room-hint">
+                        @if ($defaultRoom)
+                            当前房间：{{ $defaultRoom->name }} / 房主：{{ $defaultRoom->master ?: '未设置' }}
+                        @else
+                            当前暂无可用房间，请联系管理员。
+                        @endif
+                    </div>
+                </div>
+
+                <div class="action-row">
+                    <button type="submit" id="submit-btn" class="btn btn-primary" {{ $roomCount === 0 ? 'disabled' : '' }}>进入和平聊吧</button>
+                    <button type="reset" class="btn btn-secondary">重填</button>
+                </div>
+            </form>
+
+            <div class="panel-footer">
+                <div>第一次登录即为注册，请妥善保管密码。当前共 {{ $roomCount }} 个房间。</div>
+                @if ($smtpEnabled)
+                    <div><a href="javascript:alert('邮箱找回密码业务即将上线...');">忘了密码？点击通过邮箱找回</a></div>
+                @endif
+                <div>
+                    推荐浏览器：
+                    <a href="https://www.microsoft.com/zh-cn/edge/download" target="_blank" rel="noopener noreferrer">Edge</a>
+                    /
+                    <a href="https://www.google.com/chrome/" target="_blank" rel="noopener noreferrer">Chrome</a>
+                </div>
+                <div class="site-credit">POWERED BY 流星 · {{ date('Y') }}</div>
+            </div>
+        </section>
+    </main>
 
     <script>
         function refreshCaptcha() {
             document.getElementById('captcha-img').src = '/captcha/default?' + Math.random();
         }
 
-        document.querySelectorAll('.room-item').forEach(item => {
-            item.addEventListener('click', function() {
-                document.querySelectorAll('.room-item').forEach(i => i.classList.remove('selected'));
-                this.classList.add('selected');
+        function syncSelectedState() {
+            document.querySelectorAll('.gender-option').forEach(function(option) {
+                const input = option.querySelector('input[type="radio"]');
+                option.classList.toggle('selected', Boolean(input && input.checked));
             });
+        }
+
+        function updateRoomHint() {
+            const roomSelect = document.getElementById('room_id');
+            const hint = document.getElementById('room-hint');
+
+            if (!roomSelect || !hint || roomSelect.selectedIndex < 0) {
+                return;
+            }
+
+            const selectedOption = roomSelect.options[roomSelect.selectedIndex];
+            const roomName = selectedOption.getAttribute('data-room-name') || selectedOption.text;
+            const roomOwner = selectedOption.getAttribute('data-room-owner') || '未设置';
+
+            hint.textContent = '当前房间：' + roomName + ' / 房主：' + roomOwner;
+        }
+
+        document.querySelectorAll('.gender-option input[type="radio"]').forEach(function(input) {
+            input.addEventListener('change', syncSelectedState);
         });
 
-        document.getElementById('login-form').addEventListener('submit', function(e) {
-            e.preventDefault();
-            const btn = document.getElementById('submit-btn');
-            const alertBox = document.getElementById('alert-box');
-            btn.disabled = true;
-            btn.innerText = '正在进入...';
-            alertBox.style.display = 'none';
+        const roomSelect = document.getElementById('room_id');
+        if (roomSelect) {
+            roomSelect.addEventListener('change', updateRoomHint);
+        }
 
+        syncSelectedState();
+        updateRoomHint();
+
+        document.getElementById('login-form').addEventListener('submit', function(event) {
+            event.preventDefault();
+
+            const button = document.getElementById('submit-btn');
             const formData = new FormData(this);
             const data = Object.fromEntries(formData.entries());
             const roomId = data.room_id || '1';
 
+            button.disabled = true;
+            button.innerText = '正在进入...';
+            showAlert('', 'error', false);
+
             fetch('{{ route('login.post') }}', {
-                    method: 'POST',
-                    credentials: 'same-origin',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
-                        'Accept': 'application/json'
-                    },
-                    body: JSON.stringify(data)
+                method: 'POST',
+                credentials: 'same-origin',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+                    'Accept': 'application/json',
+                },
+                body: JSON.stringify(data),
+            })
+                .then(function(response) {
+                    return response.json().then(function(body) {
+                        return {
+                            status: response.status,
+                            body: body,
+                        };
+                    });
                 })
-                .then(response => response.json().then(body => ({
-                    status: response.status,
-                    body
-                })))
-                .then(result => {
+                .then(function(result) {
                     if (result.status === 419 || (result.body && result.body.message === 'CSRF token mismatch.')) {
-                        showAlert('安全令牌已过期，正在自动刷新...', 'error');
-                        setTimeout(() => {
+                        showAlert('安全令牌已过期，正在刷新页面...', 'error', true);
+                        setTimeout(function() {
                             window.location.reload();
                         }, 1500);
                         return;
                     }
 
                     if (result.status === 200 && result.body.status === 'success') {
-                        showAlert(result.body.message, 'success');
+                        showAlert(result.body.message, 'success', true);
                         const chatUrl = '/room/' + roomId;
-                        const chatWin = window.open(chatUrl, 'chatroom',
+                        const chatWindow = window.open(
+                            chatUrl,
+                            'chatroom',
                             'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
                         );
-                        if (chatWin) {
-                            chatWin.moveTo(0, 0);
-                            chatWin.resizeTo(screen.availWidth, screen.availHeight);
-                            chatWin.focus();
+
+                        if (chatWindow) {
+                            chatWindow.moveTo(0, 0);
+                            chatWindow.resizeTo(screen.availWidth, screen.availHeight);
+                            chatWindow.focus();
                         }
-                        setTimeout(() => {
+
+                        setTimeout(function() {
                             window.location.href = '/rooms';
                         }, 1500);
                     } else {
-                        const errorMsg = result.body.message ||
-                            (result.body.errors ? Object.values(result.body.errors)[0][0] : '登录失败');
-                        showAlert(errorMsg, 'error');
+                        const errorMessage =
+                            result.body.message ||
+                            (result.body.errors ? Object.values(result.body.errors)[0][0] : '登录失败，请稍后再试。');
+                        showAlert(errorMessage, 'error', true);
                         refreshCaptcha();
                         document.getElementById('captcha').value = '';
-                        btn.disabled = false;
-                        btn.innerText = '进入聊天';
+                        button.disabled = false;
+                        button.innerText = '进入和平聊吧';
                     }
                 })
-                .catch(error => {
-                    console.error('Error:', error);
-                    showAlert('网络或服务器错误，请稍后再试。', 'error');
+                .catch(function() {
+                    showAlert('网络或服务器异常，请稍后再试。', 'error', true);
                     refreshCaptcha();
-                    btn.disabled = false;
-                    btn.innerText = '进入聊天';
+                    button.disabled = false;
+                    button.innerText = '进入和平聊吧';
                 });
         });
 
-        function showAlert(message, type) {
-            const box = document.getElementById('alert-box');
-            box.innerText = message;
-            box.className = 'alert ' + (type === 'error' ? 'alert-error' : 'alert-success');
-            box.style.display = 'block';
+        function showAlert(message, type, visible) {
+            const alertBox = document.getElementById('alert-box');
+            alertBox.textContent = message;
+            alertBox.className = type === 'success' ? 'alert-success' : 'alert-error';
+            alertBox.id = 'alert-box';
+            alertBox.style.display = visible ? 'block' : 'none';
         }
     </script>
 </body>