更新动画效果

2026-05-18 21:34:01 +08:00
parent 5c22d3f59d
commit afc019b1fd
6 changed files with 193 additions and 26 deletions
--- a/index.html
+++ b/index.html
@@ -233,22 +233,22 @@
                <h3 data-i18n="social_media_h3">社交媒体</h3>
                <div class="website-links">
                    <a href="https://github.com/dellevin" target="_blank" data-i18n="social_link1"
-                        data-i18n-attr="href">GitHub</a>
+                        data-i18n-attr="href" onclick="return confirmLink(this.href)">GitHub</a>
                    <a href="https://weibo.com/u/6094785109999999999" target="_blank" data-i18n="social_link2"
-                        data-i18n-attr="href">微博</a>
+                        data-i18n-attr="href" onclick="return confirmLink(this.href)">微博</a>
                    <a href="https://www.zhihu.com/people/bing-xue-chen-xi-59" target="_blank" data-i18n="social_link3"
-                        data-i18n-attr="href">知乎</a>
+                        data-i18n-attr="href" onclick="return confirmLink(this.href)">知乎</a>
                    <a href="https://space.bilibili.com/403551212" target="_blank" data-i18n="social_link4"
-                        data-i18n-attr="href">B站</a>
+                        data-i18n-attr="href" onclick="return confirmLink(this.href)">B站</a>
                    <a href="https://www.xiaohongshu.com/user/profile/65aabb99000000000e0271f1" target="_blank" 
                        data-i18n="social_link6"
-                        data-i18n-attr="href">小红书</a>
+                        data-i18n-attr="href" onclick="return confirmLink(this.href)">小红书</a>
                    <a href="https://www.52pojie.cn/home.php?mod=space&uid=2059006" target="_blank"
-                        data-i18n="social_link5" data-i18n-attr="href">52pojie</a>
+                        data-i18n="social_link5" data-i18n-attr="href" onclick="return confirmLink(this.href)">52pojie</a>
                </div>
                <h3 data-i18n="leave_message_h3">留言</h3>
                <p data-i18n="leave_message_p"><a href="https://blog.iletter.top/401.html" target="_blank"
-                        data-i18n="leave_message_link" data-i18n-attr="href">点击此链接</a>去我的博客下面给我留言！</p>
+                        data-i18n="leave_message_link" data-i18n-attr="href" onclick="return confirmLink(this.href)">点击此链接</a>去我的博客下面给我留言！</p>
            </div>
        </div>

@@ -274,6 +274,17 @@
            </div>
        </div>

+        <!-- 自定义确认弹窗 -->
+        <div id="custom-confirm-modal" class="custom-confirm-modal">
+            <div class="custom-confirm-content">
+                <div class="custom-confirm-message"></div>
+                <div class="custom-confirm-buttons">
+                    <button class="confirm-btn-cancel">取消</button>
+                    <button class="confirm-btn-ok">确定</button>
+                </div>
+            </div>
+        </div>
+
        <!-- MookNote 作品详情弹窗 -->
        <div id="mooknote-modal" class="guestbook-full-modal">
            <div class="full-modal-content solid-modal mooknote-modal-content">
@@ -306,7 +317,7 @@
                        <p>目前笔记还处于基础功能的版本，希望各位能多给我提提建议，我也会在其中做一些取舍，能与不能我都会一一记录下来的。在此，希望大家能多多帮助我这一个不知名的小开发者。</p>
                        <p class="mooknote-thanks">最后的最后，感谢阿里千问的通义灵码，让我一个小小的java开发者接触到Android开发，帮了我的大忙，帮了我最纯真的梦想。</p>
                        <div class="mooknote-download">
-                            <a href="https://mooknote.iletter.top/" target="_blank" class="download-btn">前往下载 / 了解更多</a>
+                            <a href="https://mooknote.iletter.top/" target="_blank" class="download-btn" onclick="return confirmLink(this.href)">前往下载 / 了解更多</a>
                        </div>
                    </div>
                </div>
@@ -314,7 +325,7 @@
        </div>

        <!-- MookNote 全屏图片预览 -->
-        <div id="mooknote-lightbox" class="photo-lightbox">
+        <div id="mooknote-lightbox" class="photo-lightbox mooknote-lightbox">
            <button class="lightbox-close" onclick="closeMooknoteLightbox()">&times;</button>
            <button class="lightbox-nav lightbox-prev" onclick="prevLightboxImage()">&#10094;</button>
            <button class="lightbox-nav lightbox-next" onclick="nextLightboxImage()">&#10095;</button>
@@ -377,7 +388,7 @@
            </div>
        </div>
        <div class="copyright" style="margin-top: 15px;"><a href="http://beian.miit.gov.cn"
-                target="_blank">冀ICP备2025122609号</a> &copy;<span>2024 - 2026</span> <span>Power BY</span> <span>Del
+                target="_blank" onclick="return confirmLink(this.href)">冀ICP备2025122609号</a> &copy;<span>2024 - 2026</span> <span>Power BY</span> <span>Del
                Levin </span>
        </div>
    </div>
@@ -443,6 +454,51 @@
            switchButton.addEventListener('click', switchLanguage);
        });
    </script>
+
+    <!-- 自定义确认弹窗逻辑 -->
+    <script>
+        // 链接跳转确认函数
+        function confirmLink(url) {
+            showCustomConfirm(`确定要打开网站吗？\n${url}`, () => {
+                window.open(url, '_blank');
+            });
+            return false; // 阻止默认跳转行为
+        }
+
+        // 自定义确认弹窗
+        let confirmCallback = null;
+        const customConfirmModal = document.getElementById('custom-confirm-modal');
+        const confirmMessage = customConfirmModal.querySelector('.custom-confirm-message');
+        const confirmBtnOk = customConfirmModal.querySelector('.confirm-btn-ok');
+        const confirmBtnCancel = customConfirmModal.querySelector('.confirm-btn-cancel');
+
+        function showCustomConfirm(message, onConfirm) {
+            confirmMessage.textContent = message;
+            confirmCallback = onConfirm;
+            customConfirmModal.classList.add('active');
+        }
+
+        function hideCustomConfirm() {
+            customConfirmModal.classList.remove('active');
+            confirmCallback = null;
+        }
+
+        confirmBtnOk.addEventListener('click', () => {
+            if (confirmCallback) {
+                confirmCallback();
+            }
+            hideCustomConfirm();
+        });
+
+        confirmBtnCancel.addEventListener('click', hideCustomConfirm);
+
+        // 点击背景关闭
+        customConfirmModal.addEventListener('click', (e) => {
+            if (e.target === customConfirmModal) {
+                hideCustomConfirm();
+            }
+        });
+    </script>
    <script src="./static/js/anypage.js"></script>
    <script src="./static/js/game_my.js"></script>
    <script src="./static/js/tools_my.js"></script>
--- a/static/css/guestbook.css
+++ b/static/css/guestbook.css
@@ -20,6 +20,9 @@
    top: 210px;
    right: 80px;
    z-index: 999;
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
 }

 /* 透明桥梁：向左延伸覆盖预览面板区域，确保鼠标滑入时 hover 不中断 */
@@ -76,13 +79,15 @@
    width: 80px;
    height: 80px;
    cursor: pointer;
-    display: flex;
+    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    visibility: visible !important;
+    opacity: 1 !important;
 }

 .btn-label {
@@ -114,6 +119,102 @@
    stroke: #333;
 }

+/* 自定义确认弹窗样式 */
+.custom-confirm-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 99999;
+    justify-content: center;
+    align-items: center;
+    animation: fadeIn 0.2s ease;
+}
+
+.custom-confirm-modal.active {
+    display: flex;
+}
+
+.custom-confirm-content {
+    background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.95) 0%,
+        rgba(255, 255, 255, 0.9) 100%
+    );
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    border-radius: 16px;
+    padding: 24px;
+    max-width: 400px;
+    width: 90%;
+    box-shadow: 
+        0 20px 60px rgba(0, 0, 0, 0.3),
+        0 0 0 1px rgba(255, 255, 255, 0.4) inset;
+    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.custom-confirm-message {
+    font-size: 15px;
+    color: #333;
+    line-height: 1.6;
+    margin-bottom: 20px;
+    word-break: break-word;
+}
+
+.custom-confirm-buttons {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+}
+
+.confirm-btn-cancel,
+.confirm-btn-ok {
+    padding: 8px 20px;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-weight: 500;
+}
+
+.confirm-btn-cancel {
+    background: rgba(0, 0, 0, 0.05);
+    color: #666;
+}
+
+.confirm-btn-cancel:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.confirm-btn-ok {
+    background: #1a73e8;
+    color: #fff;
+}
+
+.confirm-btn-ok:hover {
+    background: #1557b0;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
 /* Hover 浮动预览面板 */
 .guestbook-preview,
 .blog-posts-preview,
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -653,6 +653,7 @@ body {
 .mooknote-download {
    text-align: center;
    margin-top: 30px;
+    margin-bottom: 60px;
    padding-top: 20px;
    border-top: 1px dashed #eee;
 }
@@ -695,8 +696,7 @@ body {

 .tool-item:hover,
 .game-item:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+    border-color: #000;
 }

 .tool-name,
--- a/static/js/blog_posts.js
+++ b/static/js/blog_posts.js
@@ -213,7 +213,7 @@
        const category = post.categories && post.categories.length > 0 ? post.categories[0].name : '未分类';
        const digest = post.digest || '';
        
-        let html = `<div class="blog-post-item" onclick="window.open('${post.permalink}', '_blank')">`;
+        let html = `<div class="blog-post-item" onclick="showCustomConfirm('确定要打开网站吗？\\n${post.permalink}', () => window.open('${post.permalink}', '_blank'))">`;
        html += `<div class="blog-post-title">${escapeHtml(post.title)}</div>`;
        if (digest) {
            html += `<div class="blog-post-digest">${escapeHtml(digest)}</div>`;
--- a/static/js/photo_album.js
+++ b/static/js/photo_album.js
@@ -168,11 +168,11 @@
    window.openPhotoLightbox = function(photoIndex) {
        currentPhotoIndex = photoIndex;
        
-        // 检查是否已经存在 lightbox
-        let lightbox = document.querySelector('.photo-lightbox');
+        // 检查是否已经存在 lightbox（使用特定的类名避免与MookNote冲突）
+        let lightbox = document.querySelector('.photo-album-lightbox');
        if (!lightbox) {
            lightbox = document.createElement('div');
-            lightbox.className = 'photo-lightbox';
+            lightbox.className = 'photo-lightbox photo-album-lightbox'; // 同时保留两个类名以兼容CSS
            lightbox.innerHTML = `
                <span class="photo-lightbox-close">&times;</span>
                <span class="photo-lightbox-nav photo-lightbox-prev">&#10094;</span>
@@ -208,7 +208,7 @@

    // 更新 Lightbox 图片
    function updateLightboxImage() {
-        const lightbox = document.querySelector('.photo-lightbox');
+        const lightbox = document.querySelector('.photo-album-lightbox');
        if (!lightbox || !allPhotos[currentPhotoIndex]) return;

        const img = lightbox.querySelector('img');
@@ -255,6 +255,10 @@

    // 处理键盘事件
    function handleLightboxKeydown(e) {
+        // 只在旅途剪影的lightbox激活时处理
+        const albumLightbox = document.querySelector('.photo-album-lightbox');
+        if (!albumLightbox || !albumLightbox.classList.contains('active')) return;
+        
        if (e.key === 'ArrowLeft') {
            showPreviousPhoto();
        } else if (e.key === 'ArrowRight') {
@@ -266,7 +270,7 @@

    // 关闭照片放大查看器
    function closePhotoLightbox() {
-        const lightbox = document.querySelector('.photo-lightbox');
+        const lightbox = document.querySelector('.photo-album-lightbox');
        if (lightbox) {
            lightbox.classList.remove('active');
            
--- a/static/js/websites_my.js
+++ b/static/js/websites_my.js
@@ -100,7 +100,9 @@ function renderWebsites(websitesArray) {
                } else {
                    linkElement.onclick = (e) => {
                        e.preventDefault();
-                        window.open(item.url, '_blank');
+                        showCustomConfirm(`确定要打开网站吗？\n${item.url}`, () => {
+                            window.open(item.url, '_blank');
+                        });
                    };
                }
                
@@ -126,7 +128,11 @@ function renderWebsites(websitesArray) {
                if (item.url === 'https://mooknote.iletter.top/#/') {
                    card.onclick = () => openMookNoteModal();
                } else {
-                    card.onclick = () => window.open(item.url, '_blank');
+                    card.onclick = () => {
+                        showCustomConfirm(`确定要打开网站吗？\n${item.url}`, () => {
+                            window.open(item.url, '_blank');
+                        });
+                    };
                }
                
                const title = currentLang === 'en' ? item.linkText_en : item.linkText_zh;
@@ -220,7 +226,7 @@ window.nextMooknoteImage = function() {
 // 全屏预览功能
 window.openMooknoteLightbox = function(index) {
    lightboxImageIndex = index;
-    const lightbox = document.getElementById('mooknote-lightbox');
+    const lightbox = document.querySelector('.mooknote-lightbox');
    const img = lightbox.querySelector('.lightbox-img');
    const counter = lightbox.querySelector('.lightbox-counter');
    
@@ -230,7 +236,7 @@ window.openMooknoteLightbox = function(index) {
 };

 window.closeMooknoteLightbox = function() {
-    const lightbox = document.getElementById('mooknote-lightbox');
+    const lightbox = document.querySelector('.mooknote-lightbox');
    lightbox.classList.remove('active');
 };

@@ -245,7 +251,7 @@ window.nextLightboxImage = function() {
 };

 function updateLightboxImage() {
-    const lightbox = document.getElementById('mooknote-lightbox');
+    const lightbox = document.querySelector('.mooknote-lightbox');
    const img = lightbox.querySelector('.lightbox-img');
    const counter = lightbox.querySelector('.lightbox-counter');
    
@@ -255,8 +261,8 @@ function updateLightboxImage() {

 // 键盘事件支持
 document.addEventListener('keydown', (e) => {
-    const lightbox = document.getElementById('mooknote-lightbox');
-    if (!lightbox.classList.contains('active')) return;
+    const lightbox = document.querySelector('.mooknote-lightbox');
+    if (!lightbox || !lightbox.classList.contains('active')) return;
    
    if (e.key === 'Escape') {
        closeMooknoteLightbox();