shen/Hextra-AI-Insight-Daily
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update head-end.html

Browse Source
This commit is contained in:
何夕2077
2025-07-08 12:57:00 +08:00
committed by GitHub
parent c4b031ea13
commit 874c18985e
1 changed files with 85 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
layouts/partials/custom/head-end.html
View File

@@ -13,90 +13,114 @@
<script type="text/javascript">
if (typeof(killads) == 'undefined') {
// 创建一个函数来显示美化后的广告屏蔽提示
// Creates a theme-aware ad blocker notice by injecting HTML and CSS.
function createEnhancedAdBlockNotice() {
// 如果弹窗已存在，则不再创建
if (document.getElementById('adblock-overlay-enhanced')) {
// If the pop-up already exists, do nothing.
if (document.getElementById('adblock-overlay')) {
return;
}
// 为弹窗添加一个柔和的入场动画 (通过动态创建<style>标签)
var css = `
@keyframes fadeIn {
// --- 1. Define CSS and HTML Structure ---
// All styles are now in this CSS block.
const css = `
@keyframes adblock-fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
#adblock-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.8); z-index: 9999;
display: flex; justify-content: center; align-items: center;
backdrop-filter: blur(4px);
}
#adblock-modal {
max-width: 460px; width: 90%; padding: 40px; border-radius: 16px;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
animation: adblock-fadeIn 0.3s ease-out;
}
#adblock-modal h2 { margin: 15px 0 40px; font-size: 24px; font-weight: 600; text-align: center; }
#adblock-modal p { font-size: 16px; line-height: 1.8; margin-bottom: 15px; }
#adblock-modal p:last-of-type { margin-bottom: 25px; }
#adblock-modal .adblock-notice p { margin-bottom: 0; }
.adblock-notice { padding: 15px 20px; border-radius: 8px; border-left: 4px solid; }
.adblock-notice p { margin: 0; font-size: 16px; line-height: 1.6; text-align: center; }
.adblock-button-container { text-align: center; margin-top: 30px; }
#adblock-close-button {
padding: 12px 25px; border-radius: 8px; cursor: pointer; font-size: 15px;
font-weight: 500; border-style: solid; transition: background-color 0.2s, transform 0.1s;
}
#adblock-close-button:active { transform: scale(0.98); }
/* Light Theme (Default) */
#adblock-modal { background-color: #fff; box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
#adblock-modal h2 { color: #333; }
#adblock-modal p { color: #555; }
#adblock-modal strong { color: #111827; }
.adblock-notice { background-color: #E8F5E9; border-left-color: #4CAF50; }
.adblock-notice p, .adblock-notice strong { color: #2E7D32; }
#adblock-close-button { background-color: #f1f1f1; color: #666; border-width: 0; }
#adblock-close-button:hover { background-color: #e0e0e0; }
/* Dark Theme Overrides */
.adblock-dark-theme #adblock-modal { background-color: #2a2a2a; box-shadow: 0 15px 30px rgba(0,0,0,0.4); border: 1px solid #444; }
.adblock-dark-theme #adblock-modal h2 { color: #f0f0f0; }
.adblock-dark-theme #adblock-modal p { color: #ccc; }
.adblock-dark-theme #adblock-modal strong { color: #ff9900; }
.adblock-dark-theme .adblock-notice { background-color: rgba(76,175,80,0.15); border-left-color: #4CAF50; }
.adblock-dark-theme .adblock-notice p, .adblock-dark-theme .adblock-notice strong { color: #a5d6a7; }
.adblock-dark-theme #adblock-close-button { background-color: #444; color: #eee; border: 1px solid #555; }
.adblock-dark-theme #adblock-close-button:hover { background-color: #555; }
`;
var style = document.createElement('style');
const modalHTML = `
<div id="adblock-modal">
<h2>一份小小的请求</h2>
<p>我们发现您可能正在使用<strong>广告屏蔽器</strong></p>
<p>广告是支持本站 <strong>持续运营</strong> 与 <strong>免费分享</strong> 的动力来源。如果本站对您有帮助，恳请将我们加入 <strong>白名单</strong>。您的这份善意，是对我们 <strong>最大的支持</strong>！</p>
<div class="adblock-notice">
<p><strong>操作很简单：</strong>在插件中将本站设为白名单，然后 <strong>刷新页面</strong> 即可。</p>
</div>
<div class="adblock-button-container">
<button id="adblock-close-button">我明白了，继续浏览</button>
</div>
</div>
`;
// --- 2. Inject Elements into the DOM ---
// Inject the CSS into the page's head.
const style = document.createElement('style');
style.id = 'adblock-notice-styles';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
// 1. 创建遮罩层 (背景)
var overlay = document.createElement('div');
overlay.id = 'adblock-overlay-enhanced';
overlay.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.8); z-index:9999; display:flex; justify-content:center; align-items:center; backdrop-filter:blur(4px);';
// 2. 创建弹窗容器 (主面板)
var modal = document.createElement('div');
modal.id = 'adblock-modal-enhanced';
modal.style.cssText = 'background-color:#fff; padding:40px; border-radius:16px; max-width:460px; width:90%; box-shadow:0 15px 30px rgba(0,0,0,0.2); font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; animation: fadeIn 0.3s ease-out;';
// Create the background overlay and set its HTML.
const overlay = document.createElement('div');
overlay.id = 'adblock-overlay';
overlay.innerHTML = modalHTML;
// 3. 设置弹窗内的HTML内容 (包含SVG图标、美化文案和按钮)
modal.innerHTML = `
<div style="text-align: center; margin-bottom: 20px;">
<h2 style="margin: 15px 0 10px; color: #333; font-size: 24px; font-weight: 600;">
一份小小的请求
</h2>
</div>
// --- 3. Apply Theme and Activate ---
<p style="color: #555; font-size: 16px; line-height: 1.8; margin-bottom: 15px;">
我们发现您可能正在使用广告屏蔽器。
</p>
<p style="color: #555; font-size: 16px; line-height: 1.8; margin-bottom: 25px;">
广告是支持本站 <strong>持续运营</strong> 与 <strong>免费分享</strong> 的动力来源。如果本站对您有帮助，恳请将我们加入 <strong>白名单</strong>。您的这份善意，是对我们 <strong>最大的支持</strong>！
</p>
// Check for dark mode and apply the theme class if needed.
if (document.documentElement.classList.contains('dark')) {
overlay.classList.add('adblock-dark-theme');
}
<div style="background-color: #E8F5E9; border-left: 4px solid #4CAF50; padding: 15px 20px; border-radius: 8px;">
<p style="margin: 0; color: #2E7D32; font-size: 16px; line-height: 1.6; text-align: center;">
<strong>操作很简单：</strong>在插件中将本站设为白名单，然后 <strong>刷新页面</strong> 即可。
</p>
</div>
<div style="text-align: center; margin-top: 30px;">
<button id="close-adblock-notice-enhanced" style="background-color: #f1f1f1; color: #666; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 500; transition: background-color 0.2s, transform 0.1s;">
我明白了，继续浏览
</button>
</div>
`;
// 4. 组合并添加到页面
overlay.appendChild(modal);
// Add the fully-formed pop-up to the page.
document.body.appendChild(overlay);
document.body.style.overflow = 'hidden';
// 5. 为关闭按钮添加功能和交互效果
var closeButton = document.getElementById('close-adblock-notice-enhanced');
closeButton.addEventListener('click', function() {
// Add the click event listener to the close button.
document.getElementById('adblock-close-button').addEventListener('click', function() {
document.body.removeChild(overlay);
document.head.removeChild(style); // 顺便移除添加的样式
document.head.removeChild(style); // Clean up the added style tag.
document.body.style.overflow = 'auto';
});
// 为按钮添加更丰富的悬停效果
closeButton.onmouseover = function() { this.style.backgroundColor = '#e0e0e0'; };
closeButton.onmouseout = function() { this.style.backgroundColor = '#f1f1f1'; };
closeButton.onmousedown = function() { this.style.transform = 'scale(0.98)'; };
closeButton.onmouseup = function() { this.style.transform = 'scale(1)'; };
}
// 确保在页面DOM加载完毕后，再执行脚本
// Run the function after the page content has loaded.
window.addEventListener('DOMContentLoaded', createEnhancedAdBlockNotice);
}
</script>