添加使用说明和安全特性，调整样式以提升用户体验

Author: shuaiplus

client/css/body.css

@@ -32,10 +32,9 @@ body {
 	top: 0;
 	left: 0;
 	width: 100%;
-	height: 100%;
 	backface-visibility: hidden;
 	border-radius: 14px;
-	padding: 32px 24px 24px 24px;
+	padding: 39px 15px 20px 15px;
 	box-shadow: 0 2px 16px rgba(60, 80, 100, 0.09);
 	background: #fff;
 	box-sizing: border-box;
@@ -45,7 +44,6 @@ body {
 
 .flip-card-back {
 	transform: rotateX(180deg);
-	padding-top: 30px;
 }
 
 /* 帮助按钮样式 / Help Button Styles */
@@ -78,74 +76,72 @@ body {
 	transform: scale(0.95);
 }
 
-.help-btn.back-btn {
-	background: #f8f9fa;
-	border-color: #dee2e6;
+/* 帮助内容样式 / Help Content Styles */
+.help-content {
+	text-align: left;
+	max-height: 400px;
+	overflow-y: auto;
+	padding: 0 20px 20px 20px;
+	color: #333;
+	line-height: 1.6;
 }
 
-.help-btn.back-btn:hover {
-	background: #e9ecef;
-	border-color: #adb5bd;
-	color: #495057;
+.help-section {
+	margin-bottom: 24px;
 }
 
-/* 使用说明内容样式 / Help Content Styles */
-.help-content {
-	text-align: left;
-	margin-top: 20px;
-	padding: 0 20px;
+.help-section h3 {
+	font-size: 1.1rem;
+	color: #4A5568;
+	margin-bottom: 12px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	gap: 8px;
 }
 
-.flip-card-back h2 {
-	font-size: 1.8rem;
-	font-weight: 600;
-	margin-bottom: 24px;
-	color: #30a8f7;
+.help-section p {
+	font-size: 0.95rem;
+	color: #666;
+	margin-bottom: 12px;
+	line-height: 1.5;
 }
 
-.flip-card-back p {
+.help-section ol,
+.help-section ul {
+	font-size: 0.9rem;
 	color: #666;
-	line-height: 1.6;
-	font-size: 1rem;
+	margin-left: 16px;
+	margin-bottom: 12px;
+}
+
+.help-section li {
+	margin-bottom: 8px;
+	line-height: 1.4;
+}
+
+.help-section li strong {
+	color: #2D3748;
+	font-weight: 600;
+}
+
+/* 滚动条样式 */
+.help-content::-webkit-scrollbar {
+	width: 6px;
+}
+
+.help-content::-webkit-scrollbar-track {
+	background: #f1f1f1;
+	border-radius: 3px;
+}
+
+.help-content::-webkit-scrollbar-thumb {
+	background: #c1c1c1;
+	border-radius: 3px;
 }
 
-/* 移动端适配 / Mobile Adaptation */
-@media (max-width: 768px) {
-	.flip-card {
-		
-		width: 95%;
-	}
-	
-	.flip-card-front,
-	.flip-card-back {
-		padding: 24px 16px 16px 16px;
-	}
-	
-	.flip-card-back {
-		padding-top: 30px;
-	}
-	
-	
-	
-	.flip-card-back h2 {
-		font-size: 1.5rem;
-		margin-bottom: 20px;
-	}
-	
-	.help-content {
-		padding: 0 10px;
-	}
-}
-
-/* 触摸设备优化 / Touch Device Optimization */
-@media (hover: none) and (pointer: coarse) {
-	.help-btn:hover {
-		transform: none;
-	}
-	
-	.help-btn:active {
-		transform: scale(0.95);
-	}
+.help-content::-webkit-scrollbar-thumb:hover {
+	background: #a8a8a8;
 }
 
 .login-container {
@@ -165,7 +161,6 @@ body {
 .login-container h1 {
 	font-size: 2.2rem;
 	font-weight: 700;
-	margin-bottom: 40px;
 }
 
 .subtips {

client/css/phone.css

@@ -157,7 +157,9 @@
 		left: 2vw !important;
 	}
 
-	/* Settings sidebar mobile styles - removed duplicate rules since they are above */
+	.flip-card {
+	width: 95%;
+}
 }
 
 .member.private-chat-active {

client/css/style.css

@@ -1849,3 +1849,6 @@ flex-direction: column;
 }
 
 
+h2{
+	margin: 0%;
+}

client/index.html

@@ -57,8 +57,32 @@ <h1 id="login-title"></h1>
 						<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 							<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 						</svg>
-					</button>
-					<h2>使用说明</h2>
+					</button>					<h2>使用说明</h2>
+					<div class="help-content">
+						<div class="help-section">
+							<h3>🔐 什么是 NodeCrypt？</h3>
+							<p>NodeCrypt 是一个开源的端到端加密聊天系统，采用无数据库架构设计。所有消息在您的设备上本地加密，服务器和中间人无法解密您的任何聊天内容。</p>
+						</div>
+						
+						<div class="help-section">
+							<h3>🚀 如何开始？</h3>
+							<ol>
+								<li><strong>输入用户名</strong>：选择一个昵称</li>
+								<li><strong>输入节点名</strong>：创建或加入现有房间</li>
+								<li><strong>设置节点密码</strong>：用于排除巧合性</li>
+								<li><strong>点击"加入房间"</strong>：开始安全聊天</li>
+							</ol>
+						</div>
+						
+						<div class="help-section">
+							<h3>🔑 安全特性</h3>
+							<ul>
+								<li><strong>端到端加密</strong>：消息仅您和接收者可解密</li>
+								<li><strong>无历史记录</strong>：新用户无法看到历史消息</li>
+								<li><strong>密码保护</strong>：房间密码参与加密过程</li>
+								<li><strong>匿名通信</strong>：无需注册真实身份</li>
+							</ul>
+						</div>
 					</div>
 				</div>
 			</div>