From fde6b43d6e0b93746b309eafb93c6aebbc0a2a3a Mon Sep 17 00:00:00 2001 From: Spectrollay <2819288472@qq.com> Date: Tue, 5 Mar 2024 20:29:18 +0800 Subject: [PATCH] 2024030502 --- javascript/advanced.js | 78 -------------------- javascript/public_define.js | 2 +- javascript/public_script.js | 78 ++++++++++++++++++++ stylesheet/advanced.css | 73 ------------------ stylesheet/public_style.css | 142 ++++++++++++++++++++++++++++++++++++ updatelog/index.html | 71 ------------------ 6 files changed, 221 insertions(+), 223 deletions(-) diff --git a/javascript/advanced.js b/javascript/advanced.js index 2302f90..ccc0b2e 100644 --- a/javascript/advanced.js +++ b/javascript/advanced.js @@ -379,81 +379,3 @@ for (let i = 0; i < sliderContent.length; i++) { } }); } - -// Expandable Card函数 -const expandableCardGroup = document.getElementsByClassName('expandable_card_group'); - -for (let i = 0; i < expandableCardGroup.length; i++) { - const expandableCardArea = expandableCardGroup[i].querySelectorAll('.expandable_card_area'); - for (let j = 0; j < expandableCardArea.length; j++) { - - const expandableCardId = document.getElementById(expandableCardArea[j].id); - const expandableCard = expandableCardId.querySelector('.expandable_card'); - const expandableContent = expandableCardId.querySelector('.expandable_card_down_area'); - const cardImage = expandableCard.querySelector('.expandable_card_image'); - const cardDown = expandableContent.querySelector('.expandable_card_down'); - - let isExpanded = expandableCard.classList.contains("expanded"); - - if (isExpanded) { - cardImage.src = '../images/arrowUp_white.png'; - expandableContent.classList.add('expanded'); - - setTimeout(function () { - const initialHeight = cardDown.scrollHeight; - expandableContent.style.height = initialHeight + 'px'; - }, 400); - - } else { - cardImage.src = '../images/arrowDown_white.png'; - expandableContent.classList.add('no_expanded'); - expandableContent.style.height = '0'; - } - - expandableCard.addEventListener('click', () => { - isExpanded = expandableCard.classList.contains("expanded"); - if (isExpanded) { - // 折叠当前卡片 - expandableCard.classList.add('no_expanded'); - expandableCard.classList.remove('expanded'); - expandableContent.classList.add('no_expanded'); - expandableContent.classList.remove('expanded'); - expandableContent.style.height = '0'; - cardImage.src = '../images/arrowDown_white.png'; - } else { - for (let k = 0; k < expandableCardArea.length; k++) { - if (k !== j) { - const otherCard = expandableCardArea[k].querySelector('.expandable_card'); - const otherContent = expandableCardArea[k].querySelector('.expandable_card_down_area'); - const otherCardImage = otherCard.querySelector('.expandable_card_image'); - - otherCard.classList.add('no_expanded'); - otherCard.classList.remove('expanded'); - otherContent.classList.add('no_expanded'); - otherContent.classList.remove('expanded'); - otherContent.style.height = '0'; - otherCardImage.src = '../images/arrowDown_white.png'; - } - } - // 展开当前卡片 - expandableCard.classList.add('expanded'); - expandableCard.classList.remove('no_expanded'); - expandableContent.classList.add('expanded'); - expandableContent.classList.remove('no_expanded'); - expandableContent.style.height = cardDown.scrollHeight + 'px'; - cardImage.src = '../images/arrowUp_white.png'; - } - isExpanded = !isExpanded; - }); - - window.addEventListener('resize', function () { - if (isExpanded) { - expandableContent.style.transition = 'height 0ms'; - expandableContent.style.height = cardDown.scrollHeight + 'px'; - setTimeout(function () { - expandableContent.style.transition = 'height 600ms'; - }, 0); - } - }); - } -} diff --git a/javascript/public_define.js b/javascript/public_define.js index 9abc258..1a5c3aa 100644 --- a/javascript/public_define.js +++ b/javascript/public_define.js @@ -5,7 +5,7 @@ const texts = { preview_btn1: "开发日志", preview_btn2: "\"\"/提出反馈", page_info_title1: "INFORMATION", - page_info_detail1: "Version: 4.6.1.4.Canary
Server Version: 4.0
Updated: 2024-03-05-01", + page_info_detail1: "Version: 4.6.1.4.Canary
Server Version: 4.0
Updated: 2024-03-05-02", page_info_title2: "ABOUT US", page_info_detail2: "Developer: @Spectrollay
Maintainer: @Spectrollay
Chat Group: [Telegram] [QQ] [云湖]", page_info_title3: "MADE WITH ❤️ IN CHINA", diff --git a/javascript/public_script.js b/javascript/public_script.js index 172fccf..a4fe55c 100644 --- a/javascript/public_script.js +++ b/javascript/public_script.js @@ -364,3 +364,81 @@ function scrollToTop() { }); console.log("成功执行回到顶部操作"); } + +// Expandable Card函数 +const expandableCardGroup = document.getElementsByClassName('expandable_card_group'); + +for (let i = 0; i < expandableCardGroup.length; i++) { + const expandableCardArea = expandableCardGroup[i].querySelectorAll('.expandable_card_area'); + for (let j = 0; j < expandableCardArea.length; j++) { + + const expandableCardId = document.getElementById(expandableCardArea[j].id); + const expandableCard = expandableCardId.querySelector('.expandable_card'); + const expandableContent = expandableCardId.querySelector('.expandable_card_down_area'); + const cardImage = expandableCard.querySelector('.expandable_card_image'); + const cardDown = expandableContent.querySelector('.expandable_card_down'); + + let isExpanded = expandableCard.classList.contains("expanded"); + + if (isExpanded) { + cardImage.src = '../images/arrowUp_white.png'; + expandableContent.classList.add('expanded'); + + setTimeout(function () { + const initialHeight = cardDown.scrollHeight; + expandableContent.style.height = initialHeight + 'px'; + }, 400); + + } else { + cardImage.src = '../images/arrowDown_white.png'; + expandableContent.classList.add('no_expanded'); + expandableContent.style.height = '0'; + } + + expandableCard.addEventListener('click', () => { + isExpanded = expandableCard.classList.contains("expanded"); + if (isExpanded) { + // 折叠当前卡片 + expandableCard.classList.add('no_expanded'); + expandableCard.classList.remove('expanded'); + expandableContent.classList.add('no_expanded'); + expandableContent.classList.remove('expanded'); + expandableContent.style.height = '0'; + cardImage.src = '../images/arrowDown_white.png'; + } else { + for (let k = 0; k < expandableCardArea.length; k++) { + if (k !== j) { + const otherCard = expandableCardArea[k].querySelector('.expandable_card'); + const otherContent = expandableCardArea[k].querySelector('.expandable_card_down_area'); + const otherCardImage = otherCard.querySelector('.expandable_card_image'); + + otherCard.classList.add('no_expanded'); + otherCard.classList.remove('expanded'); + otherContent.classList.add('no_expanded'); + otherContent.classList.remove('expanded'); + otherContent.style.height = '0'; + otherCardImage.src = '../images/arrowDown_white.png'; + } + } + // 展开当前卡片 + expandableCard.classList.add('expanded'); + expandableCard.classList.remove('no_expanded'); + expandableContent.classList.add('expanded'); + expandableContent.classList.remove('no_expanded'); + expandableContent.style.height = cardDown.scrollHeight + 'px'; + cardImage.src = '../images/arrowUp_white.png'; + } + isExpanded = !isExpanded; + }); + + window.addEventListener('resize', function () { + if (isExpanded) { + expandableContent.style.transition = 'height 0ms'; + expandableContent.style.height = cardDown.scrollHeight + 'px'; + setTimeout(function () { + expandableContent.style.transition = 'height 600ms'; + }, 0); + } + }); + } +} diff --git a/stylesheet/advanced.css b/stylesheet/advanced.css index 06478d9..0c061e9 100644 --- a/stylesheet/advanced.css +++ b/stylesheet/advanced.css @@ -205,76 +205,3 @@ main { top: 50%; /* 分段线垂直居中 */ transform: translateY(-50%); /* 分段线垂直居中 */ } - -/* Expandable Card */ - -.expandable_card { - text-align: center; - align-items: center; - overflow: hidden; - display: flex; - position: relative; - border-top: 2px solid #5A5B5C; - border-bottom: 2px solid #333334; - border-left: 2px solid #333334; - border-right: 2px solid #333334; - color: #FFFFFF; -} - -.expandable_card:hover { - background-color: #58585A; -} - -.expandable_card:active { - border: 2px solid #333334; - background-color: #3D3E3F; -} - -.expandable_card_text_area { - height: 56px; - display: flex; - align-items: center; - justify-content: center; - flex: 1; -} - -.expandable_card_text { - font-size: 23px; - font-family: "Minecraft Seven", sans-serif; -} - -.expandable_card_text_title { -} - -.expandable_card_image_area { - height: 56px; - width: 56px; - right: 0; - display: flex; - align-items: center; - justify-content: center; -} - -.expandable_card_image { - width: 32px; -} - -.expandable_card_down_area { - background-color: #313233; - overflow: hidden; - transition: height 600ms; -} - -.expandable_card_down { - padding: 1px; -} - -.expandable_card_down_br { - margin: 1px 0; - height: 2px; - background-color: #48494A; -} - -.expandable_card_down_content { - margin: 10px 20px; -} \ No newline at end of file diff --git a/stylesheet/public_style.css b/stylesheet/public_style.css index 0f8756b..6d84b93 100644 --- a/stylesheet/public_style.css +++ b/stylesheet/public_style.css @@ -844,4 +844,146 @@ td { background-color: rgba(0, 0, 0, 0.7); z-index: 1; display: none; +} + +/* Expandable Card */ +.expandable_card { + text-align: center; + align-items: center; + overflow: hidden; + display: flex; + position: relative; + border-top: 2px solid #5A5B5C; + border-bottom: 2px solid #333334; + border-left: 2px solid #333334; + border-right: 2px solid #333334; + color: #FFFFFF; +} + +.expandable_card:hover { + background-color: #58585A; +} + +.expandable_card:active { + border: 2px solid #333334; + background-color: #3D3E3F; +} + +.expandable_card_text_area { + height: 56px; + display: flex; + align-items: center; + justify-content: center; + flex: 1; +} + +.expandable_card_text { + font-size: 23px; + font-family: "Minecraft Seven", sans-serif; +} + +.expandable_card_text_title { +} + +.expandable_card_image_area { + height: 56px; + width: 56px; + right: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.expandable_card_image { + width: 32px; +} + +.expandable_card_down_area { + background-color: #313233; + overflow: hidden; + transition: height 600ms; +} + +.expandable_card_down { + padding: 1px; +} + +.expandable_card_down_br { + margin: 1px 0; + height: 2px; + background-color: #48494A; +} + +.expandable_card_down_content { + margin: 10px 20px; +} + +/* 开发日志 */ +.log_block { + text-align: center; +} + +.release_date { + margin-bottom: 10px; + width: 100%; +} + +.release_log_note { + border-left: 6px solid #2E6BE5; + padding-left: 10px; + margin: 6px 0; +} + +.release_log_item { + position: relative; + padding-left: 16px; + margin: 10px 0; +} + +.release_log_item:before { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 6px; + height: 6px; + background-color: #FFFFFF; + border-radius: 50%; +} + +.release_log_item.child { + position: relative; + padding-left: 32px; + margin: 10px 0; +} + +.release_log_item.child:before { + content: ""; + position: absolute; + left: 16px; + top: 50%; + transform: translateY(-50%); + width: 6px; + height: 6px; + background-color: #FFFFFF; + border-radius: 50%; +} + +.release_log_item.grandchild { + position: relative; + padding-left: 48px; + margin: 10px 0; +} + +.release_log_item.grandchild:before { + content: ""; + position: absolute; + left: 32px; + top: 50%; + transform: translateY(-50%); + width: 6px; + height: 6px; + background-color: #FFFFFF; + border-radius: 50%; } \ No newline at end of file diff --git a/updatelog/index.html b/updatelog/index.html index 64cdca3..3c4b3c7 100644 --- a/updatelog/index.html +++ b/updatelog/index.html @@ -5,7 +5,6 @@ - @@ -1559,7 +1558,6 @@ }, 600); }); -