微件:Donation：修订间差异
舰R百科，玩家自由编辑的战舰少女R百科
更多操作
无编辑摘要 |
无编辑摘要 |
||
| （未显示同一用户的20个中间版本） | |||
| 第14行： | 第14行： | ||
font-family: sans-serif; | font-family: sans-serif; | ||
margin-bottom: 1em; | margin-bottom: 1em; | ||
text-align: left !important; | |||
/* Determine if you want it fixed width or fluid. Fluid is safer for Sitenotice */ | /* Determine if you want it fixed width or fluid. Fluid is safer for Sitenotice */ | ||
width: 100%; | width: 100%; | ||
| 第22行： | 第23行： | ||
border: 1px solid #f5c6cb; | border: 1px solid #f5c6cb; | ||
color: #491217; | color: #491217; | ||
padding: 15px 20px; | /* Increased right padding to prevent QR code from overlapping close button */ | ||
padding: 15px 45px 15px 20px; | |||
border-radius: 4px; | border-radius: 4px; | ||
position: relative; | position: relative; | ||
| 第52行： | 第54行： | ||
.jr-banner-footer { | .jr-banner-footer { | ||
font-weight: bold; | font-weight: bold; | ||
color: # | color: #257098; | ||
font-size: 0.95em; | font-size: 0.95em; | ||
} | } | ||
| 第73行： | 第75行： | ||
.jr-qr-caption { | .jr-qr-caption { | ||
font-size: | font-size: 1em; | ||
color: #666; | color: #666; | ||
margin-top: 4px; | margin-top: 4px; | ||
text-decoration: underline; | |||
} | } | ||
| 第81行： | 第84行： | ||
.jr-banner-close { | .jr-banner-close { | ||
position: absolute; | position: absolute; | ||
top: | top: 8px; | ||
right: | right: 12px; | ||
font-size: | font-size: 26px; /* Made button bigger */ | ||
font-weight: bold; | font-weight: bold; | ||
cursor: pointer; | cursor: pointer; | ||
color: # | color: #919191; | ||
line-height: 1; | line-height: 1; | ||
z-index: 2; | z-index: 2; | ||
padding: 4px; /* Adds a little click area buffer */ | |||
} | } | ||
| 第100行： | 第104行： | ||
flex-direction: column; | flex-direction: column; | ||
text-align: left; | text-align: left; | ||
padding: 15px 20px; /* Reset padding for mobile layout */ | |||
} | } | ||
.jr-banner-qr { | .jr-banner-qr { | ||
margin-top: 15px; | margin-top: 15px; | ||
align-self: center; /* Center the QR code on mobile */ | align-self: center; /* Center the QR code on mobile */ | ||
} | |||
.jr-banner-close { | |||
top: 5px; | |||
right: 10px; | |||
} | } | ||
} | } | ||
| 第123行： | 第132行： | ||
<div class="jr-banner-body"> | <div class="jr-banner-body"> | ||
舰R百科不仅是舰R内容的集合，更是一项持续消耗算力的云端服务。<br><br> | 舰R百科不仅是舰R内容的集合，更是一项持续消耗算力的云端服务。<br><br> | ||
为了保障流畅体验，百科需要高质量的云计算资源。如果您从百科中获取了价值，希望这项服务保持无广告稳定在线，请考虑继续支持我们的服务。 | |||
</div> | </div> | ||
<div class="jr-banner-footer"> | <div class="jr-banner-footer"><br> | ||
您的支持将直接用于云计算续费OvO。 | |||
</div> | </div> | ||
</div> | </div> | ||
| 第135行： | 第144行： | ||
<!-- We use Special:FilePath to get the raw image URL dynamically --> | <!-- We use Special:FilePath to get the raw image URL dynamically --> | ||
<img src="https://0v0.zjsnrwiki.com/images/c/c9/Afdian_qr_small.png" alt="Donation QR Code"> | <img src="https://0v0.zjsnrwiki.com/images/c/c9/Afdian_qr_small.png" alt="Donation QR Code"> | ||
<div class="jr-qr-caption"> | <div class="jr-qr-caption"><a href="https://afdian.com/a/zjsnrwiki">扫码/点击支持</a></div> | ||
</div> | </div> | ||
| 第152行： | 第161行： | ||
if (!isClosed) { | if (!isClosed) { | ||
// Show the banner | // Show the banner using vanilla JS | ||
if (banner) { | |||
banner.style.display = 'block'; | |||
} | |||
} | } | ||
// 2. Handle Close Click | // 2. Handle Close Click | ||
closeBtn.addEventListener('click', function() { | if (closeBtn) { | ||
closeBtn.addEventListener('click', function() { | |||
// Hide visually using vanilla JS | |||
if (banner) { | |||
banner.style.display = 'none'; | |||
} | |||
// Save to storage | |||
localStorage.setItem(storageKey, 'true'); | |||
}); | |||
} | |||
})(); | })(); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||