diff --git a/client/js/main.js b/client/js/main.js
index cfec8c6..773ec6b 100644
--- a/client/js/main.js
+++ b/client/js/main.js
@@ -76,7 +76,8 @@ import { renderUserList, // 渲染用户列表 / Render user list
setupTabs, // 设置页面标签切换 / Setup tab switching
autofillRoomPwd, // 自动填充房间密码 / Autofill room password
generateLoginForm, // 生成登录表单HTML / Generate login form HTML
- initLoginForm // 初始化登录表单 / Initialize login form
+ initLoginForm, // 初始化登录表单 / Initialize login form
+ initFlipCard // 初始化翻转卡片功能 / Initialize flip card functionality
} from './ui.js';
// 设置全局配置参数
@@ -125,12 +126,15 @@ window.addEventListener('DOMContentLoaded', () => {
if (joinBtn) {
joinBtn.onclick = openLoginModal; // 点击打开登录窗口 / Click to open login modal
}
-
// 阻止用户输入用户名、房间名和密码时输入空格
// Prevent space input for username, room name, and password fields
preventSpaceInput($id('userName'));
preventSpaceInput($id('roomName'));
preventSpaceInput($id('password'));
+
+ // 初始化翻转卡片功能 / Initialize flip card functionality
+ initFlipCard();
+
// 初始化辅助功能和界面设置
// Initialize autofill, input placeholders, and menus
autofillRoomPwd(); setupInputPlaceholder();
diff --git a/client/js/room.js b/client/js/room.js
index e66d125..e5afe9f 100644
--- a/client/js/room.js
+++ b/client/js/room.js
@@ -113,15 +113,16 @@ export function joinRoom(userName, roomName, password, modal = null, onResult) {
closed = true;
onResult(false)
}
- },
- onServerSecured: () => {
+ }, onServerSecured: () => {
setStatus('Secure connection to node');
if (modal) modal.remove();
else {
const loginContainer = $id('login-container');
if (loginContainer) loginContainer.style.display = 'none';
const chatContainer = $id('chat-container');
- if (chatContainer) chatContainer.style.display = ''
+ if (chatContainer) chatContainer.style.display = '';
+
+
}
if (onResult && !closed) {
closed = true;
diff --git a/client/js/ui.js b/client/js/ui.js
index facfb87..258ea71 100644
--- a/client/js/ui.js
+++ b/client/js/ui.js
@@ -557,6 +557,10 @@ export function initLoginForm() {
// Only initialize if login form is empty
loginFormContainer.innerHTML = generateLoginForm(false);
}
+
+ // 为登录页面添加class，用于手机适配
+ // Add class to login page for mobile adaptation
+ document.body.classList.add('login-page');
}
// Listen for language change events to refresh UI
@@ -577,4 +581,76 @@ window.addEventListener('regenerateLoginForm', () => {
if (loginFormContainer) {
loginFormContainer.innerHTML = generateLoginForm(false);
}
-});
\ No newline at end of file
+});
+
+// 初始化翻转卡片功能
+// Initialize flip card functionality
+export function initFlipCard() {
+ const flipCard = document.getElementById('flip-card');
+ const helpBtn = document.getElementById('help-btn');
+ const backBtn = document.getElementById('back-btn');
+
+ if (!flipCard || !helpBtn || !backBtn) return;
+ // 检测是否为触摸设备 / Detect touch device
+ // 更准确的触摸设备检测方法
+ const isTouchDevice = window.matchMedia('(hover: none) and (pointer: coarse)').matches;
+
+ // 翻转到帮助页面 / Flip to help page
+ function flipToHelp() {
+ flipCard.classList.add('flipped');
+ }
+
+ // 翻转回登录页面 / Flip back to login page
+ function flipToLogin() {
+ flipCard.classList.remove('flipped');
+ }
+
+ if (isTouchDevice) {
+ // 移动端：点击切换 / Mobile: click to toggle
+ helpBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ flipToHelp();
+ });
+
+ backBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ flipToLogin();
+ });
+ } else {
+ // 桌面端：鼠标悬停切换 / Desktop: hover to toggle
+ let hoverTimeout;
+
+ helpBtn.addEventListener('mouseenter', () => {
+ clearTimeout(hoverTimeout);
+ hoverTimeout = setTimeout(() => {
+ flipToHelp();
+ }, 30); // 30ms延迟，避免误触
+ });
+
+ helpBtn.addEventListener('mouseleave', () => {
+ clearTimeout(hoverTimeout);
+ });
+
+ // 鼠标离开卡片时返回登录页面
+ flipCard.addEventListener('mouseleave', () => {
+ clearTimeout(hoverTimeout);
+ hoverTimeout = setTimeout(() => {
+ flipToLogin();
+ }, 30); // 30ms延迟，给用户时间查看内容
+ });
+
+ // 鼠标进入卡片时取消返回
+ flipCard.addEventListener('mouseenter', () => {
+ clearTimeout(hoverTimeout);
+ });
+
+ // 返回按钮点击事件（桌面端也可以点击）
+ backBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ flipToLogin();
+ });
+ }
+}
\ No newline at end of file