info_outline
<style>
.tab-container {
display: flex;
background: #ffffff;
border-bottom: 2px solid #e0e0e0;
gap: 5px;
}
.tab-button {
flex: 1;
padding: 12px 18px;
cursor: pointer;
background: transparent;
border: none;
outline: none;
font-size: 16px;
font-weight: 600;
color: #444;
transition: all 0.3s ease-in-out;
position: relative;
}
.tab-button::after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 3px;
background: #007bff;
transition: all 0.3s ease-in-out;
transform: translateX(-50%);
}
.tab-button:hover {
color: #0056b3;
}
.tab-button.active {
color: #007bff;
}
.tab-button.active::after {
width: 100%;
}
.tab-content {
display: none;
padding: 20px;
background: white;
border-radius: 6px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
animation: fadeIn 0.2s ease-in-out;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
<br>
<p>用了兩天做的雛型，有時間的話在慢慢更新。</p>
<div class="tab-container">
<button class="tab-button active" onclick="openTab(event, 'story')">🔹 作者簡介</button>
<button class="tab-button" onclick="openTab(event, 'updates')">🔸 更新內容</button>
<button class="tab-button" onclick="openTab(event, 'resources')">📦 素材來源</button>
</div>
<div id="story" class="tab-content active">
<br>
<div style="display: flex; justify-content: center; align-items: center; gap: 20px;">
<div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" onclick="toggleMessage('message1', this)">
<img src="https://gamelet.online/gassets/svr/user/icon/1guu/674436dd4ff08.gif"
alt="世界ヘいわ"
style="width: 30px; height: 30px; border-radius: 50%; vertical-align: middle; margin-bottom: 5px;">
<strong>世界ヘいわ</strong>
<!-- 這裡放置指示器 -->
<div class="indicator" style="height: 2px; background-color: #007bff; width: 100%; margin-top: 5px; transition: width 0.3s;"></div>
</div>
</div>
<div id="message1" style="display: block; padding: 15px; margin-top: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;">
<strong>世界ヘいわ：</strong> 如果在操作過程中有任何問題或建議，還請大家多多指教，我會努力改進。
<br><br>
<div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
<a href="https://gamelet.online/user/XMoiswnX_Official" target="_blank" style="text-decoration: none; display: flex; align-items: center; color: blue;">
<img src="https://gamelet.online/clients/assets/v1/img/gamelet_icon.png" alt="Gamelet Icon" style="width: 25px; height: 25px; margin-right: 5px; object-fit: contain;">
<span>Gamelet</span>
</a>
<span>|</span>
<a href="https://code.gamelet.com/profile/XMoiswnX_Official" target="_blank" style="text-decoration: none; display: flex; align-items: center; color: blue;">
<img src="https://code.gamelet.com/img/logo_v1_100.png" alt="Code Gamelet Icon" style="width: 25px; height: 25px; margin-right: 5px; object-fit: contain;">
<span>Code Gamelet</span>
</a>
<span>|</span>
<a href="https://discordapp.com/users/1053704613620109402" target="_blank" style="text-decoration: none; display: flex; align-items: center; color: blue;">
<img src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0a69f118df70ad7828d4_icon_clyde_blurple_RGB.svg" alt="Discord" style="width: 25px; height: 25px; margin-right: 5px; border-radius: 0; object-fit: contain;">
<span>Discord</span>
</a>
</div>
</div>
<div id="message2" style="display: none; padding: 15px; margin-top: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;">
<strong>哥布林聖騎士：</strong> 一位不入流的小說家。目前擔任繫命之繩的文案、角色、場景和戰鬥策劃，每一個設計都希望能為大家帶來些許觸動。還請大家多多指教。
<br><br>
<div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
<a href="https://gamelet.online/user/108888193787212947819@google" target="_blank" style="text-decoration: none; display: flex; align-items: center; color: blue;">
<img src="https://gamelet.online/clients/assets/v1/img/gamelet_icon.png" alt="Gamelet Icon" style="width: 25px; height: 25px; margin-right: 5px; object-fit: contain;">
<span>Gamelet</span>
</a>
<span>|</span>
<a href="https://code.gamelet.com/profile/Getter.II" target="_blank" style="text-decoration: none; display: flex; align-items: center; color: blue;">
<img src="https://code.gamelet.com/img/logo_v1_100.png" alt="Code Gamelet Icon" style="width: 25px; height: 25px; margin-right: 5px; object-fit: contain;">
<span>Code Gamelet</span>
</a>
<span>|</span>
<a href="https://discordapp.com/users/536543716777918474" target="_blank" style="text-decoration: none; display: flex; align-items: center; color: blue;">
<img src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0a69f118df70ad7828d4_icon_clyde_blurple_RGB.svg" alt="Discord" style="width: 25px; height: 25px; margin-right: 5px; border-radius: 0; object-fit: contain;">
<span>Discord</span>
</a>
</div>
</div>
<script>
function toggleMessage(messageId, button) {
const allMessages = document.querySelectorAll('[id^="message"]');
allMessages.forEach(msg => {
msg.style.display = "none";
msg.style.opacity = "0";
msg.style.transform = "translateY(-10px)";
});
const messageElement = document.getElementById(messageId);
messageElement.style.display = "block";
setTimeout(() => {
messageElement.style.opacity = "1";
messageElement.style.transform = "translateY(0)";
}, 10);
const allIndicators = document.querySelectorAll('.indicator');
allIndicators.forEach(indicator => {
indicator.style.width = '0%';
});
const indicators = button.querySelectorAll('.indicator');
indicators.forEach(indicator => {
indicator.style.width = '100%';
});
}
</script>
</div>
<div id="resources" class="tab-content">
<br>
<summary><strong>🛠️ 模組</strong></summary>
<ul>
<li><a href="https://code.gamelet.com/view/React" target="_blank"><strong>React</strong></a>／Haskasu</li>
<li><a href="https://code.gamelet.com/view/TwilightWarsLib" target="_blank"><strong>TwilightWarsLib</strong></a>／Haskasu</li>
<li><a href="https://code.gamelet.com/view/TwilightWarsEventsExp" target="_blank"><strong>TwilightWarsEventsExp</strong></a>／cook1470</li>
<li><a href="https://code.gamelet.com/view/FairyEvents" target="_blank"><strong>FairyEvents</strong></a>／LoliPrincessNina</li>
</ul>
<summary><strong>🅰️ 字型</strong></summary>
<ul>
<li><a href="https://fonts.google.com/" target="_blank"><strong>Google Fonts</strong></a></li>
<li><a href="https://code.gamelet.com/" target="_blank"><strong>Code Gamelet</strong></a></li>
</ul>
</div>
<div id="updates" class="tab-content">
<br>
<ul>
<li><strong>v0.1.12 (2025-03-03 00:48)</strong>
<ul>
<li>新增「武器圖鑑」播放武器音效功能。</li>
</ul>
<li><strong>v0.1.8 (2025-03-02 01:10)</strong>
<ul>
<li>複製資訊框功能調整位置與樣式。</li>
</ul>
<li><strong>v0.1.5 (2025-03-02 00:50)</strong>
<ul>
<li>調整武器圖鑑版面設計，新增技能圖鑑的版面設計。</li>
</ul>
<li><strong>v0.1.4 (2025-03-01 23:10)</strong>
<ul>
<li>新增武器傷害、武器重量、武器切換時間、武器音效等資訊。</li>
</ul>
<li><strong>v0.1.3 (2025-03-01 19:15)</strong>
<ul>
<li>版面重設。</li>
</ul>
<li><strong>v0.1.2 (2025-03-01 16:50)</strong>
<ul>
<li>新增複製資訊框內容功能。</li>
</ul>
<li><strong>v0.1.1 (2025-03-01 15:30)</strong>
<ul>
<li>新增盟劍名稱與 ID。</li>
</ul>
</li>
<li><strong>v0.1.0 (2025-03-01 02:00)</strong>
<ul>
<li>測試版發布。</li>
</ul>
</li>
</ul>
</div>
<div id="issue" class="tab-content">
<br>
<li>不要有 BUG、不要有 BUG、不要有 BUG。</li>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tabbuttons;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tabbuttons = document.getElementsByClassName("tab-button");
for (i = 0; i < tabbuttons.length; i++) {
tabbuttons[i].className = tabbuttons[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
XMoiswnX_Official 
cook1470 
SharkQ 
An_Yeeeeen 
panpan911219 
qwer4 
Djj_Zhang 
machi 
UANlab 
enya11037 
LoliPrincessNina 
bsfXO 
WagashiFish 
Ryuyan 
CumCat