mirror of
https://github.com/Coldsmiles/infstarweb.git
synced 2026-04-23 02:30:41 +08:00
feat: Add modal for sponsorship with QR code and call-to-action button
This commit is contained in:
zhangyuheng
223
sponsor.html
223
sponsor.html
@@ -192,6 +192,149 @@
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.controls-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
background-color: var(--text-primary);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 99px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.cta-button.outline {
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.cta-button.outline:hover {
|
||||
border-color: var(--text-primary);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
backdrop-filter: blur(5px);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: flex; /* Flex to center */
|
||||
opacity: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
margin: auto;
|
||||
padding: 40px;
|
||||
border-radius: 24px;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
position: relative;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal.show .modal-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
color: #aaa;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #f5f5f7;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.close-modal:hover {
|
||||
color: #000;
|
||||
background: #e5e5e7;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.qr-placeholder {
|
||||
background: #f9f9f9;
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.qr-img {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alipay-btn {
|
||||
background: #1677FF;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -422,7 +565,13 @@
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="controls-section">
|
||||
<h2 class="section-title">❤️ 赞助列表</h2>
|
||||
<div class="controls-header">
|
||||
<h2 class="section-title" style="margin-bottom: 0; text-align: left;">❤️ 赞助列表</h2>
|
||||
<button class="cta-button outline" id="open-sponsor-modal">
|
||||
<i class="fas fa-heart"></i> 我要支持
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<i class="fas fa-search"></i>
|
||||
<input type="text" id="sponsor-search" placeholder="搜索赞助者姓名...">
|
||||
@@ -445,11 +594,36 @@
|
||||
|
||||
</div>
|
||||
|
||||
<footer style="text-align: center; padding: 40px; color: var(--text-secondary); font-size: 12px; border-top: 1px solid rgba(0,0,0,0.05); margin-top: 60px;">
|
||||
<p>© 2026 白鹿原 Minecraft 服务器. All rights reserved.</p>
|
||||
</footer>
|
||||
<!-- Sponsor Modal -->
|
||||
<div id="sponsor-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-modal">×</span>
|
||||
<div style="width: 50px; height: 50px; background: rgba(52, 199, 89, 0.1); border-radius: 50%; color: var(--brand-green); display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 20px;">
|
||||
<i class="fas fa-gift"></i>
|
||||
</div>
|
||||
<h3 class="modal-title">支持白鹿原服务器</h3>
|
||||
<p class="modal-subtitle">您的每一次支持，都将帮助我们提升服务器性能，维持更长久的运营。</p>
|
||||
|
||||
<!-- Desktop QR -->
|
||||
<div class="desktop-only-block" id="desktop-qr-view">
|
||||
<div class="qr-placeholder">
|
||||
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https%3A%2F%2Fqr.alipay.com%2F2cz0344fnaulnbybhp04" alt="支付宝二维码" class="qr-img">
|
||||
</div>
|
||||
<p style="font-size: 13px; color: #999;">推荐使用支付宝扫码</p>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Button (will be shown via CSS media query logic in JS or CSS) -->
|
||||
<div class="mobile-only-block" id="mobile-btn-view" style="display: none;">
|
||||
<a href="https://qr.alipay.com/2cz0344fnaulnbybhp04" class="alipay-btn" target="_blank">
|
||||
<i class="fab fa-alipay"></i> 打开支付宝赞助
|
||||
</a>
|
||||
<p style="font-size: 12px; color: #999; margin-top: 16px;">点击按钮将直接跳转至支付宝转账页面</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="sponsor_script.js"></script>
|
||||
|
||||
<script>
|
||||
// Inline script for mobile menu toggling (copied from script.js)
|
||||
// Since we are not using the full script.js which might have index-specific logic
|
||||
@@ -476,6 +650,47 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Modal Logic
|
||||
const modal = document.getElementById('sponsor-modal');
|
||||
const btn = document.getElementById('open-sponsor-modal');
|
||||
const span = document.getElementsByClassName('close-modal')[0];
|
||||
const desktopView = document.getElementById('desktop-qr-view');
|
||||
const mobileView = document.getElementById('mobile-btn-view');
|
||||
|
||||
// Detect Mobile
|
||||
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768;
|
||||
|
||||
if (isMobile) {
|
||||
if(desktopView) desktopView.style.display = 'none';
|
||||
if(mobileView) mobileView.style.display = 'block';
|
||||
} else {
|
||||
if(desktopView) desktopView.style.display = 'block';
|
||||
if(mobileView) mobileView.style.display = 'none';
|
||||
}
|
||||
|
||||
btn.onclick = function() {
|
||||
modal.style.display = "flex";
|
||||
// Trigger reflow
|
||||
void modal.offsetWidth;
|
||||
modal.classList.add('show');
|
||||
}
|
||||
|
||||
span.onclick = function() {
|
||||
modal.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
modal.style.display = "none";
|
||||
}, 300);
|
||||
}
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
modal.style.display = "none";
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user