diff --git a/hugo.toml b/hugo.toml index ae00df32..e6de93db 100644 --- a/hugo.toml +++ b/hugo.toml @@ -206,6 +206,14 @@ hasCJKLanguage = true + # ---------------------------------------------------------------------------- + # 打赏配置 (Reward Configuration) + # ---------------------------------------------------------------------------- + [params.reward] + enable = true + wechat = "/image/reward/wechat.jpg" + alipay = "/image/reward/alipay.jpg" + # ---------------------------------------------------------------------------- # 样式定制 (Style Customization) # ---------------------------------------------------------------------------- diff --git a/themes/Ying/assets/css/main.css b/themes/Ying/assets/css/main.css index 9744de18..6e11c663 100644 --- a/themes/Ying/assets/css/main.css +++ b/themes/Ying/assets/css/main.css @@ -4720,3 +4720,219 @@ html[data-theme="light"] .atk-loading-spinner svg circle { } + +/* Reward System */ +.reward-container { + text-align: center; + margin: 0px auto; + position: relative; + z-index: 10; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + clear: both; +} + +.reward-btn { + background: transparent; + color: #444; + border: 1px solid #ccc; + padding: 2px 20px; + border-radius: 50px; + font-size: 1rem; + cursor: pointer; + transition: all 0.3s ease; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + box-shadow: none; + font-weight: 500; + margin-left: 0; +} + +.reward-btn:hover { + border-color: #000; + color: #000; + background: rgba(0,0,0,0.03); + transform: translateY(-1px); +} + +[data-theme='dark'] .reward-btn { + border-color: rgba(255,255,255,0.3); + color: #ccc; +} + +[data-theme='dark'] .reward-btn:hover { + border-color: #fff; + color: #fff; + background: rgba(255,255,255,0.08); +} + +.reward-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.6); + z-index: 9999; + display: flex; + justify-content: center; + align-items: center; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; +} + +.reward-modal.show { + opacity: 1; + visibility: visible; +} + +.reward-content { + background: #ffffff; + padding: 48px 40px; + border-radius: 24px; + position: relative; + max-width: 90%; + width: 480px; + transform: scale(0.95) translateY(10px); + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + text-align: center; + border: none; +} + +.reward-modal.show .reward-content { + transform: scale(1) translateY(0); +} + +[data-theme='dark'] .reward-content { + background: #1a1a1a; + color: #fff; + border: 1px solid #333; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); +} + +.reward-close { + position: absolute; + top: 15px; + right: 15px; + font-size: 24px; + cursor: pointer; + color: #999; + transition: all 0.2s; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: rgba(0,0,0,0.05); +} + +.reward-close:hover { + background: rgba(0,0,0,0.1); + color: #333; + transform: rotate(90deg); +} + +[data-theme='dark'] .reward-close { + background: rgba(255,255,255,0.1); +} + +[data-theme='dark'] .reward-close:hover { + background: rgba(255,255,255,0.2); + color: #fff; +} + +.reward-title { + text-align: center; + margin-top: 0; + margin-bottom: 30px; + font-size: 1.25rem; + font-weight: 600; + color: #333; + letter-spacing: 1px; +} + +[data-theme='dark'] .reward-title { + color: #fff; +} + +.reward-qr-group { + display: flex; + justify-content: center; + gap: 30px; + flex-wrap: wrap; +} + +.reward-qr-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} + +.reward-qr-img-wrapper { + width: 160px; + height: 160px; + background: rgba(255,255,255,0.5); + border-radius: 16px; + overflow: hidden; + padding: 10px; + border: 1px solid rgba(0,0,0,0.05); + transition: transform 0.3s ease; +} + +.reward-qr-img-wrapper:hover { + transform: translateY(-5px); +} + +[data-theme='dark'] .reward-qr-img-wrapper { + background: rgba(255,255,255,0.05); + border-color: rgba(255,255,255,0.1); +} + +.reward-qr-item img { + width: 100%; + height: 100%; + object-fit: contain; + display: block; + border-radius: 8px; +} + +.reward-qr-item span { + font-size: 0.9rem; + color: #666; + font-weight: 500; +} + +[data-theme='dark'] .reward-qr-item span { + color: #aaa; +} + +@media (max-width: 600px) { + .reward-content { + padding: 30px 20px; + width: 90%; + border-radius: 16px; + } + + .reward-qr-group { + gap: 15px; + } + + .reward-qr-img-wrapper { + width: 120px; + height: 120px; + } + + .reward-title { + font-size: 1.1rem; + margin-bottom: 20px; + } +} + diff --git a/themes/Ying/assets/js/modules/reward.js b/themes/Ying/assets/js/modules/reward.js new file mode 100644 index 00000000..2b9a6642 --- /dev/null +++ b/themes/Ying/assets/js/modules/reward.js @@ -0,0 +1,64 @@ +/** + * Reward System Module + */ +(function() { + function initReward() { + const btn = document.getElementById('reward-btn'); + const modal = document.getElementById('reward-modal'); + const close = document.getElementById('reward-close'); + + if (!btn || !modal) return; + + // Helper to show modal + const showModal = (e) => { + if(e) { + e.preventDefault(); + e.stopPropagation(); + } + modal.classList.add('show'); + document.body.style.overflow = 'hidden'; // Prevent scrolling + }; + + // Helper to hide modal + const hideModal = () => { + modal.classList.remove('show'); + document.body.style.overflow = ''; + }; + + // Button click + btn.addEventListener('click', showModal); + + // Close button click + if (close) { + close.addEventListener('click', hideModal); + } + + // Click outside modal content + modal.addEventListener('click', (e) => { + if (e.target === modal) { + hideModal(); + } + }); + + // Escape key to close + if (!window.rewardKeyHandlerAttached) { + document.addEventListener('keydown', function(e) { + const activeModal = document.getElementById('reward-modal'); + if (e.key === 'Escape' && activeModal && activeModal.classList.contains('show')) { + activeModal.classList.remove('show'); + document.body.style.overflow = ''; + } + }); + window.rewardKeyHandlerAttached = true; + } + } + + // Initialize on load + document.addEventListener('DOMContentLoaded', initReward); + + // Initialize on Pjax complete + document.addEventListener('pjax:complete', initReward); + + // Export + window.initReward = initReward; +})(); diff --git a/themes/Ying/layouts/_default/single.html b/themes/Ying/layouts/_default/single.html index a58b6368..bd0e98fc 100644 --- a/themes/Ying/layouts/_default/single.html +++ b/themes/Ying/layouts/_default/single.html @@ -21,15 +21,46 @@