舰R百科是靠无数志愿编辑者持续地建设更新完善的。编辑非常简单,无需代码知识,请勇于更新页面!
编辑入门 | 资助百科 | 留言讨论页 | 微博@舰R百科 | 百科编辑讨论Q群:366818861

微件:Donation:修订间差异

舰R百科,玩家自由编辑的战舰少女R百科
跳转到导航 跳转到搜索
无编辑摘要
无编辑摘要
第22行: 第22行:
     border: 1px solid #f5c6cb;
     border: 1px solid #f5c6cb;
     color: #491217;
     color: #491217;
    /* Increased right padding to prevent QR code from overlapping close button */
     padding: 15px 20px;
     padding: 15px 45px 15px 20px;
     border-radius: 4px;
     border-radius: 4px;
     position: relative;
     position: relative;
第82行: 第81行:
.jr-banner-close {
.jr-banner-close {
     position: absolute;
     position: absolute;
     top: 8px;
     top: 5px;
     right: 12px;
     right: 10px;
     font-size: 26px; /* Made button bigger */
     font-size: 18px;
     font-weight: bold;
     font-weight: bold;
     cursor: pointer;
     cursor: pointer;
第90行: 第89行:
     line-height: 1;
     line-height: 1;
     z-index: 2;
     z-index: 2;
    padding: 4px; /* Adds a little click area buffer */
}
}


第102行: 第100行:
         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;
     }
     }
}
}
第130行: 第123行:
             <div class="jr-banner-body">
             <div class="jr-banner-body">
                 舰R百科不仅是舰R内容的集合,更是一项持续消耗算力的云端服务。<br><br>
                 舰R百科不仅是舰R内容的集合,更是一项持续消耗算力的云端服务。<br><br>
                 为了保障流畅体验,需要高质量的云计算服务资源。如果您从R百中获取了价值,或者希望这项服务保持稳定在线,请考虑分担这一成本。
                 为了保障流畅体验,高质量信息的维护需要资源。如果您从R百中获取了价值,或者希望这项服务保持稳定在线,请考虑分担这一成本。
             </div>
             </div><br><br>
             <div class="jr-banner-footer">
             <div class="jr-banner-footer">
                 您的支持将直接用于云计算续费。
                 您的支持将直接用于云计算续费。
第159行: 第152行:


     if (!isClosed) {
     if (!isClosed) {
         // Show the banner using vanilla JS
         // Show the banner
         if (banner) {
         $(banner).fadeIn(); // Use jQuery for smooth fade if available, or just banner.style.display = 'block';
            banner.style.display = 'block';
        }
     }
     }


     // 2. Handle Close Click
     // 2. Handle Close Click
     if (closeBtn) {
     closeBtn.addEventListener('click', function() {
        closeBtn.addEventListener('click', function() {
        // Hide visually
            // Hide visually using vanilla JS
        $(banner).slideUp();  
            if (banner) {
       
                banner.style.display = 'none';
        // Save to storage
            }
        localStorage.setItem(storageKey, 'true');
           
    });
            // Save to storage
            localStorage.setItem(storageKey, 'true');
        });
    }
})();
})();
</script>
</script>
</includeonly>
</includeonly>

2025年12月8日 (一) 20:50的版本

   Donation Banner Widget
Use this code in MediaWiki:Sitenotice to display the banner: