halo-theme-pix/embed-code/page/navigator.html

<div id="my-links-widget" style="max-width: 1200px; margin: 20px auto; padding: 0 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
    <div id="link-container" class="link-container" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
        <a href="/notice" target="_self" data-is-notice="true">
            <div id="notice-card" class="link-card-default">
                <div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
                <div style="position: relative; z-index: 1;">
                    <div class="icon-box" style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <i class="ri-megaphone-line ri-icon" style="font-size: 30px;"></i>
                    </div>
                    <h4 class="notice-title" style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">通知书</h4>
                    <p class="notice-desc" style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">最新通知与提醒</p>
                </div>
            </div>
        </a>

        <a href="/about" target="_self">
            <div class="link-card-default">
                <div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
                <div style="position: relative; z-index: 1;">
                    <div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <i class="ri-mail-line ri-icon" style="font-size: 30px;"></i>
                    </div>
                    <h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">告知信</h4>
                    <p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">翻阅日记前的须知</p>
                </div>
            </div>
        </a>

        <a href="/content" target="_self">
            <div class="link-card-default">
                <div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
                <div style="position: relative; z-index: 1;">
                    <div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <i class="ri-plant-line ri-icon" style="font-size: 30px;"></i>
                    </div>
                    <h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">自命题</h4>
                    <p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">不同的分类与标签</p>
                </div>
            </div>
        </a>

        <a href="/photos" target="_self">
            <div class="link-card-default">
                <div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
                <div style="position: relative; z-index: 1;">
                    <div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <i class="ri-folder-image-line ri-icon" style="font-size: 30px;"></i>
                    </div>
                    <h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">小插曲</h4>
                    <p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">值得的图片与视频</p>
                </div>
            </div>
        </a>

        <a href="/address" target="_self">
            <div class="link-card-default">
                <div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
                <div style="position: relative; z-index: 1;">
                    <div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <i class="ri-contacts-line ri-icon" style="font-size: 30px;"></i>
                    </div>
                    <h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">通讯录</h4>
                    <p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">猜猜看会有谁呢</p>
                </div>
            </div>
        </a>

        <a href="/friends" target="_self">
            <div class="link-card-default">
                <div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
                <div style="position: relative; z-index: 1;">
                    <div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <i class="ri-message-3-line ri-icon" style="font-size: 30px;"></i>
                    </div>
                    <h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">朋友圈</h4>
                    <p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">大家都在干什么</p>
                </div>
            </div>
        </a>

        <a href="/store" target="_self">
            <div class="link-card-default">
                <div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
                <div style="position: relative; z-index: 1;">
                    <div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <i class="ri-building-4-line ri-icon" style="font-size: 30px;"></i>
                    </div>
                    <h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">储物柜</h4>
                    <p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">左边翻翻右边找找</p>
                </div>
            </div>
        </a>

        <a href="/qiyu" target="_self">
            <div class="link-card-default">
                <div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
                <div style="position: relative; z-index: 1;">
                    <div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <i class="ri-book-3-line ri-icon" style="font-size: 30px;"></i>
                    </div>
                    <h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">奇遇书</h4>
                    <p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">每天都值得记录</p>
                </div>
            </div>
        </a>

        <a href="/news-2026" target="_self">
            <div class="link-card-default">
                <div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
                <div style="position: relative; z-index: 1;">
                    <div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <i class="ri-file-list-3-line ri-icon" style="font-size: 30px;"></i>
                    </div>
                    <h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">每日报</h4>
                    <p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">运筹帷幄之中</p>
                </div>
            </div>
        </a>

        <a href="https://git.anian.cc/explore/repos" target="_blank">
            <div class="link-card-default">
                <div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
                <div style="position: relative; z-index: 1;">
                    <div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <i class="ri-git-pull-request-line ri-icon" style="font-size: 30px;"></i>
                    </div>
                    <h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">代码库</h4>
                    <p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">如何实现的呢</p>
                </div>
            </div>
        </a>

        <a href="#" target="_self">
            <div class="link-card-default">
                <div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
                <div style="position: relative; z-index: 1;">
                    <div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <i class="ri-door-open-line ri-icon" style="font-size: 30px;"></i>
                    </div>
                    <h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">课外书</h4>
                    <p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">敬请期待</p>
                </div>
            </div>
        </a>

        <a href="#" target="_self">
            <div class="link-card-default">
                <div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
                <div style="position: relative; z-index: 1;">
                    <div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
                        <i class="ri-git-repository-line ri-icon" style="font-size: 30px;"></i>
                    </div>
                    <h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">笔记本</h4>
                    <p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">敬请期待</p>
                </div>
            </div>
        </a>
        

    </div>

    <style>
        @media (max-width: 767px) {
            #my-links-widget { margin-top: 40px !important; }
        }
        @media (min-width: 768px) {
            .link-container { grid-template-columns: repeat(4, 1fr) !important; }
        }
        .ri-icon { color: white !important; fill: white !important; }
        .link-container>a { display: flex !important; flex-direction: column !important; height: 100% !important; text-decoration: none !important; }
        .link-container>a>div { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; border-radius: 12px !important; padding: 25px 15px !important; text-align: center !important; position: relative !important; overflow: hidden !important; transition: all 0.3s ease !important; border: 2px solid #e2e8f0; }
        .link-card-default { background: #f0f7f4 !important; }
        
        .notice-unread { 
            background: #fffbeb !important; 
            border-color: #fce788 !important; 
        }
        .notice-unread .icon-box { background: #d69e2e !important; }
        .notice-unread .notice-title { color: #b7791f !important; }
        .notice-unread .notice-desc { color: #d69e2e !important; font-weight: 500 !important; }
        
        .link-card-hover { transform: translateY(-5px) !important; box-shadow: 0 10px 20px rgba(72, 187, 120, 0.15) !important; border-color: #74c69d !important; }
        .notice-unread-hover { transform: translateY(-5px) !important; box-shadow: 0 10px 20px rgba(214, 158, 46, 0.15) !important; border-color: #ecc94b !important; }
    </style>

    <script>
    (function() {
        const widget = document.getElementById('my-links-widget');
        if (!widget) return;

        async function initNoticeStatus() {
            const noticeCard = document.getElementById('notice-card');
            if (!noticeCard || typeof getAllLatestNoticeDatesFromRSS !== 'function') return;

            const combinedDateStr = await getAllLatestNoticeDatesFromRSS();
            const decorCircle = noticeCard.querySelector('.decor-circle');
            
            const isUnread = combinedDateStr && (!getCookie('latest_notice_date') || getCookie('latest_notice_date') !== combinedDateStr);

            if (isUnread) {
                typeof initNoticeTip === 'function' && initNoticeTip();
                $('.footer_menu a[href="/navigator"]').css('color', '#ecc94b').find('i').css('color', '#ecc94b');
                noticeCard.querySelector('.notice-title').textContent = '通知书';
                noticeCard.querySelector('.notice-desc').textContent = '有新通知待查看';
                noticeCard.classList.add('notice-unread');
                if(decorCircle) decorCircle.style.background = '#fef3c7';

                const noticeLink = noticeCard.closest('a');
                noticeLink.onclick = function() {
                    $.cookie('latest_notice_date', combinedDateStr, { path: '/', domain: 'anian.cc', expires: 365 });
                    typeof markAsRead === 'function' && markAsRead(combinedDateStr);
                };
            }
        }

        function initCardHover() {
            document.querySelectorAll('.link-container > a').forEach(card => {
                const cardDiv = card.querySelector('div');
                const decorCircle = cardDiv.querySelector('.decor-circle');

                card.onmouseenter = () => {
                    if (cardDiv.classList.contains('notice-unread')) {
                        cardDiv.classList.add('notice-unread-hover');
                    } else {
                        cardDiv.classList.add('link-card-hover');
                    }
                    if(decorCircle) decorCircle.style.transform = 'scale(1.5)';
                };

                card.onmouseleave = () => {
                    cardDiv.classList.remove('link-card-hover', 'notice-unread-hover');
                    if(decorCircle) decorCircle.style.transform = 'scale(1)';
                };
            });
        }

        function initAll() {
            if (!document.getElementById('my-links-widget')) return;
            initCardHover();
            initNoticeStatus();
        }

        if (document.readyState === 'loading') {
            document.addEventListener("DOMContentLoaded", initAll);
        } else {
            initAll();
        }
    })();
    </script>
</div>