From 28f85a9b4dcb8089ac3a9846fda8db1052c54740 Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Fri, 6 Jun 2025 03:59:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BD=BF=E7=94=A8=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E=E5=92=8C=E5=AE=89=E5=85=A8=E7=89=B9=E6=80=A7=EF=BC=8C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F=E4=BB=A5=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/css/body.css  | 125 +++++++++++++++++++++----------------------
 client/css/phone.css |   4 +-
 client/css/style.css |   3 ++
 client/index.html    |  28 +++++++++-
 4 files changed, 92 insertions(+), 68 deletions(-)

diff --git a/client/css/body.css b/client/css/body.css
index f1e5d1f..2baea6e 100644
--- a/client/css/body.css
+++ b/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-btn.back-btn:hover {
-	background: #e9ecef;
-	border-color: #adb5bd;
-	color: #495057;
-}
-
-/* 使用说明内容样式 / Help Content Styles */
+/* 帮助内容样式 / Help Content Styles */
 .help-content {
 	text-align: left;
-	margin-top: 20px;
-	padding: 0 20px;
-}
-
-.flip-card-back h2 {
-	font-size: 1.8rem;
-	font-weight: 600;
-	margin-bottom: 24px;
-	color: #30a8f7;
-}
-
-.flip-card-back p {
-	color: #666;
+	max-height: 400px;
+	overflow-y: auto;
+	padding: 0 20px 20px 20px;
+	color: #333;
 	line-height: 1.6;
-	font-size: 1rem;
 }
 
-/* 移动端适配 / 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;
-	}
+.help-section {
+	margin-bottom: 24px;
 }
 
-/* 触摸设备优化 / Touch Device Optimization */
-@media (hover: none) and (pointer: coarse) {
-	.help-btn:hover {
-		transform: none;
-	}
-	
-	.help-btn:active {
-		transform: scale(0.95);
-	}
+.help-section h3 {
+	font-size: 1.1rem;
+	color: #4A5568;
+	margin-bottom: 12px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.help-section p {
+	font-size: 0.95rem;
+	color: #666;
+	margin-bottom: 12px;
+	line-height: 1.5;
+}
+
+.help-section ol,
+.help-section ul {
+	font-size: 0.9rem;
+	color: #666;
+	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;
+}
+
+.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 {
diff --git a/client/css/phone.css b/client/css/phone.css
index 1801151..0060988 100644
--- a/client/css/phone.css
+++ b/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 {
diff --git a/client/css/style.css b/client/css/style.css
index af8d7ba..4bda2d0 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1849,3 +1849,6 @@ flex-direction: column;
 }
 
 
+h2{
+	margin: 0%;
+}
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
index 94c1f15..4b44d3e 100644
--- a/client/index.html
+++ b/client/index.html
@@ -57,8 +57,32 @@
 						<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>