diff --git a/css/pages/join.css b/css/pages/join.css index d9432e3..f49fe1f 100644 --- a/css/pages/join.css +++ b/css/pages/join.css @@ -1023,3 +1023,48 @@ body { margin-top: 40px; margin-bottom: 20px; } + +/* Edition Selector */ +.edition-selector { + margin-top: 24px; + text-align: center; +} + +.edition-toggle { + display: inline-flex; + background: #f5f5f7; + border-radius: 12px; + padding: 4px; + gap: 4px; +} + +.edition-btn { + padding: 10px 28px; + border: none; + background: transparent; + border-radius: 10px; + cursor: pointer; + font-size: 0.95rem; + font-weight: 500; + color: #86868b; + transition: all 0.3s ease; + display: inline-flex; + align-items: center; + gap: 8px; +} + +.edition-btn.active { + background: #fff; + color: #1d1d1f; + box-shadow: 0 2px 8px rgba(0,0,0,0.08); +} + +.edition-btn:hover:not(.active) { + color: #1d1d1f; +} + +.server-address-box span { + color: #86868b; + font-size: 0.9rem; + white-space: nowrap; +} diff --git a/join.html b/join.html index 94e373c..df4c804 100644 --- a/join.html +++ b/join.html @@ -180,6 +180,17 @@ +
+ diff --git a/js/join_script.js b/js/join_script.js index d9eae8a..c2bf3a8 100644 --- a/js/join_script.js +++ b/js/join_script.js @@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', () => { // State let currentStep = 1; let selectedDevice = null; + let selectedEdition = 'java'; const totalSteps = 4; // Elements @@ -24,6 +25,8 @@ document.addEventListener('DOMContentLoaded', () => { const tutorialContent = document.getElementById('tutorial-content'); const step4Buttons = document.getElementById('step4-buttons'); const mainWizardActions = document.querySelector('.wizard-actions'); + const editionSelector = document.getElementById('edition-selector'); + const editionBtns = document.querySelectorAll('.edition-btn'); console.log('DOM Elements loaded. Step contents found:', stepContents.length); @@ -237,6 +240,48 @@ document.addEventListener('DOMContentLoaded', () => { } }; + const bedrockDeviceData = { + pc: { + title: "电脑版 (Bedrock Edition)", + recommendations: [ + { + name: "Minecraft 基岩版", + icon: "fas fa-cube", + desc: "从 Microsoft Store 获取 Minecraft(需 Windows 10/11)", + url: "https://www.xbox.com/games/store/minecraft/9NBLGGH2JHXJ", + primary: true + } + ], + note: "基岩版通过 Microsoft Store 购买,使用 Xbox / Microsoft 账号登录即可游玩。" + }, + ios: { + title: "iOS 基岩版", + recommendations: [ + { + name: "Minecraft", + icon: "fas fa-cube", + desc: "从 App Store 购买并下载 Minecraft", + url: "https://apps.apple.com/app/minecraft/id479516143", + primary: true + } + ], + note: "基岩版是 iOS 上的原生 Minecraft,性能最佳、操作体验最好。" + }, + android: { + title: "安卓基岩版", + recommendations: [ + { + name: "Minecraft", + icon: "fas fa-cube", + desc: "从 Google Play 购买并下载 Minecraft", + url: "https://play.google.com/store/apps/details?id=com.mojang.minecraftpe", + primary: true + } + ], + note: "基岩版是安卓上的原生 Minecraft,性能最佳、操作体验最好。" + } + }; + deviceCards.forEach(card => { card.addEventListener('click', () => { // UI Update @@ -244,8 +289,17 @@ document.addEventListener('DOMContentLoaded', () => { card.classList.add('selected'); const deviceType = card.dataset.device; - selectedDevice = deviceType; // Correctly update state - + selectedDevice = deviceType; + selectedEdition = 'java'; + + // Show edition selector and reset to Java + if (editionSelector) { + editionSelector.classList.remove('hidden'); + editionBtns.forEach(btn => { + btn.classList.toggle('active', btn.dataset.edition === 'java'); + }); + } + // Show Recommendation showRecommendation(deviceType); @@ -254,8 +308,20 @@ document.addEventListener('DOMContentLoaded', () => { }); }); + // Edition toggle handlers + editionBtns.forEach(btn => { + btn.addEventListener('click', () => { + editionBtns.forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + selectedEdition = btn.dataset.edition; + if (selectedDevice) { + showRecommendation(selectedDevice); + } + }); + }); + function showRecommendation(device) { - const data = deviceData[device]; + const data = selectedEdition === 'bedrock' ? bedrockDeviceData[device] : deviceData[device]; if (!data) return; if (recommendationSection) { @@ -376,9 +442,104 @@ document.addEventListener('DOMContentLoaded', () => { ] }; + const bedrockTutorials = { + pc: [ + { + title: '获取游戏', + desc: '从 Microsoft Store 购买并下载 Minecraft(基岩版/Bedrock Edition),需要 Windows 10 或 Windows 11。' + }, + { + title: '登录账号', + desc: '打开 Minecraft,使用 Microsoft / Xbox 账号登录。' + }, + { + title: '加入服务器', + desc: `点击"游戏" → 切换到"服务器"标签页 → 滚动到底部点击"添加服务器"。mcbe.lunadeer.cn
+
+ 15337
+
+ mcbe.lunadeer.cn
+
+ 15337
+
+ mcbe.lunadeer.cn
+
+ 15337
+
+