From d2c9ce4b91cb6a122d30792f9135e8357e6feff6 Mon Sep 17 00:00:00 2001
From: zhangyuheng <zhangyuheng@lunadeer.cn>
Date: Mon, 2 Mar 2026 17:40:34 +0800
Subject: [PATCH] style: Enhance mobile responsiveness and layout adjustments
 in join.css and join_script.js

---
 css/pages/join.css | 151 ++++++++++++++++++++++++++++++++++++++++++---
 js/join_script.js  |  21 +++++--
 2 files changed, 159 insertions(+), 13 deletions(-)

diff --git a/css/pages/join.css b/css/pages/join.css
index 31fd574..d9432e3 100644
--- a/css/pages/join.css
+++ b/css/pages/join.css
@@ -434,26 +434,51 @@ body {
 }
 
 @media (max-width: 800px) {
+    .join-header-minimal {
+        padding: 80px 20px 20px;
+    }
+    
+    .join-header-minimal h1 {
+        font-size: 2rem;
+    }
+
     .wizard-container-modern {
         flex-direction: column;
-        margin: 20px;
+        margin: 0 10px 40px;
+        min-height: auto;
+        border-radius: 16px;
     }
     .wizard-sidebar {
         width: 100%;
-        padding: 20px;
+        padding: 16px;
         flex-direction: row;
         overflow-x: auto;
         border-right: none;
         border-bottom: 1px solid rgba(0,0,0,0.05);
-        gap: 20px;
+        gap: 0;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none; /* Firefox */
     }
+    .wizard-sidebar::-webkit-scrollbar {
+        display: none; /* Chrome/Safari */
+    }
+    
     .wizard-progress-vertical {
         flex-direction: row;
-        width: 100%;
-        gap: 30px;
+        width: auto;
+        gap: 24px;
+        flex-wrap: nowrap;
+        padding-right: 20px; /* End padding for scroll */
     }
     .progress-step {
         padding-left: 0; 
+        white-space: nowrap;
+        opacity: 0.5;
+        flex-shrink: 0;
+    }
+    .progress-step.active {
+        opacity: 1;
+        color: #0071e3;
     }
     .progress-step::before {
         display: none;
@@ -461,31 +486,143 @@ body {
     .step-sub { display: none; }
     
     .wizard-content-area {
-        padding: 30px;
+        padding: 24px 20px;
     }
     
     .device-selection-grid, .playstyle-grid {
         grid-template-columns: 1fr;
+        gap: 16px;
     }
     
     .step-footer {
         flex-direction: column-reverse;
-        gap: 20px;
+        gap: 16px;
+        padding-top: 30px;
     }
     
     .btn-clean {
         width: 100%;
         justify-content: center;
+        padding: 12px;
     }
     
     .step-action-group {
         width: 100%;
         flex-direction: column;
+        gap: 12px;
+    }
+    
+    .step-action-group .final-actions {
+        width: 100%;
+        flex-direction: column;
     }
     
     .btn-primary-large {
         width: 100%;
         justify-content: center;
+        padding: 16px;
+    }
+
+    /* Adjust specific card layouts for mobile */
+    .device-card {
+        padding: 24px 16px;
+        display: flex;
+        align-items: center;
+        text-align: left;
+        gap: 20px;
+    }
+    
+    .icon-circle {
+        margin: 0; /* Reset auto margin */
+        width: 48px;
+        height: 48px;
+        font-size: 20px;
+    }
+    
+    .device-info {
+        flex: 1;
+    }
+    
+    .check-mark {
+        position: static;
+        transform: scale(0.8);
+        opacity: 0;
+        width: 24px;
+    }
+    
+    .device-card.selected .check-mark {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    /* Launcher cards */
+    .launcher-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .launcher-card {
+        padding: 16px;
+    }
+    
+    .launcher-icon {
+        width: 44px;
+        height: 44px;
+        font-size: 20px;
+        margin-right: 16px;
+    }
+    
+    /* Playstyle cards adjustment */
+    .playstyle-card {
+        padding: 16px;
+    }
+    
+    .playstyle-visual {
+        width: 48px;
+        height: 48px;
+        font-size: 20px;
+    }
+
+    /* Modal/Details tweaks */
+    .detail-grid-row {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .details-card {
+        padding: 20px;
+    }
+    
+    .details-header h3 {
+        font-size: 1.25rem;
+    }
+
+    /* Tutorial Step tweaks */
+    .tutorial-step {
+        padding: 16px;
+        gap: 12px;
+    }
+    .step-badge {
+        width: 28px;
+        height: 28px;
+        font-size: 0.9rem;
+    }
+
+    /* Server address box responsiveness */
+    .server-address-box {
+        width: 100%;
+        box-sizing: border-box;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+    
+    .server-address-box code {
+        word-break: break-all;
+    }
+    
+    .btn-copy {
+        width: 100%;
+        justify-content: center;
     }
 }
 
diff --git a/js/join_script.js b/js/join_script.js
index 2459a2d..d9eae8a 100644
--- a/js/join_script.js
+++ b/js/join_script.js
@@ -88,6 +88,15 @@ document.addEventListener('DOMContentLoaded', () => {
             if (step === currentStep) {
                 indicator.classList.add('active');
                 indicator.classList.remove('completed');
+                
+                // Scroll into view on mobile
+                if (window.innerWidth <= 800) {
+                    indicator.scrollIntoView({ 
+                        behavior: 'smooth', 
+                        block: 'nearest', 
+                        inline: 'center' 
+                    });
+                }
             } else if (step < currentStep) {
                 indicator.classList.add('completed');
                 indicator.classList.remove('active');
@@ -303,14 +312,14 @@ document.addEventListener('DOMContentLoaded', () => {
                 title: '加入服务器',
                 desc: `点击“多人游戏” -> “添加服务器”。<br>
                        服务器名称：<span class="highlight-text">白鹿原</span><br>
-                       服务器地址：
+                       输入以下服务器地址，点击“完成”并双击服务器即可加入。
                        <div class="server-address-box">
                            <code id="server-address">mcpure.lunadeer.cn</code>
                            <button class="btn-copy" onclick="navigator.clipboard.writeText('mcpure.lunadeer.cn').then(() => { this.innerHTML = '<i class=\\'fas fa-check\\'></i> 已复制'; setTimeout(() => this.innerHTML = '<i class=\\'fas fa-copy\\'></i> 复制', 2000); })">
                                <i class="fas fa-copy"></i> 复制
                            </button>
                        </div>
-                       点击“完成”并双击服务器即可加入。`
+                       `
             }
         ],
         ios: [
@@ -329,14 +338,14 @@ document.addEventListener('DOMContentLoaded', () => {
             {
                 title: '加入服务器',
                 desc: `进入主界面后，选择 Multiplayer（多人游戏） -> Add Server（添加服务器）。<br>
-                       Address（地址）：
+                       Address（地址）填写以下内容，点击 Done 并加入。
                        <div class="server-address-box">
                            <code id="server-address-ios">mcpure.lunadeer.cn</code>
                            <button class="btn-copy" onclick="navigator.clipboard.writeText('mcpure.lunadeer.cn').then(() => { this.innerHTML = '<i class=\\'fas fa-check\\'></i> 已复制'; setTimeout(() => this.innerHTML = '<i class=\\'fas fa-copy\\'></i> 复制', 2000); })">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
-                       点击 Done 并加入。`
+                       `
             }
         ],
         android: [
@@ -355,14 +364,14 @@ document.addEventListener('DOMContentLoaded', () => {
             {
                 title: '加入服务器',
                 desc: `启动游戏后，点击 Multiplayer（多人游戏） -> Add Server（添加服务器）。<br>
-                       Address（地址）：
+                       Address（地址）填写以下内容，点击 Done 并加入。
                        <div class="server-address-box">
                            <code id="server-address-android">mcpure.lunadeer.cn</code>
                            <button class="btn-copy" onclick="navigator.clipboard.writeText('mcpure.lunadeer.cn').then(() => { this.innerHTML = '<i class=\\'fas fa-check\\'></i> 已复制'; setTimeout(() => this.innerHTML = '<i class=\\'fas fa-copy\\'></i> 复制', 2000); })">
                                <i class="fas fa-copy"></i> 复制
                            </button>
                        </div>
-                       点击 Done 并加入。`
+                       `
             }
         ]
     };