From 874c18985e847e3af985c66b2db4fb6aab91c418 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E5=A4=952077?= <274166795@qq.com>
Date: Tue, 8 Jul 2025 12:57:00 +0800
Subject: [PATCH] Update head-end.html

---
 layouts/partials/custom/head-end.html | 146 +++++++++++++++-----------
 1 file changed, 85 insertions(+), 61 deletions(-)

diff --git a/layouts/partials/custom/head-end.html b/layouts/partials/custom/head-end.html
index c398e10..c221dfb 100644
--- a/layouts/partials/custom/head-end.html
+++ b/layouts/partials/custom/head-end.html
@@ -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>