網站遷移公告

:::

網站遷移公告

套件名稱：網站遷移公告 1

作者 : Yaoh

模組網站 :

網站遷移公告更新說明

正式釋出（感謝大橋國中鄭登元老師）

「網站遷移公告」簡介

若有建立新網站了，在舊網站可以安裝此區塊，提醒訪客到訪新網站。

請到1. 快速設定區 (Quick Settings)修改 noticeConfig 三個設定值為正確的值，例如：

const noticeConfig = {
schoolName: "大橋國中",
schoolNameEn: "Daqiao Junior High School",
newWebsiteUrl: "https://www.dcjh.tn.edu.tw",

網站遷移公告螢幕截圖

下載：YrreoJCJeb.png
1) YrreoJCJeb.png

安裝方式

到區塊管理，新增一個自訂區塊。

將底下內容貼到自訂區塊中

<script>
    // ==========================================
    // 1. 快速設定區 (Quick Settings)
    // ==========================================
    const noticeConfig = {
        schoolName: "大橋國中",
        schoolNameEn: "Daqiao Junior High School",
        newWebsiteUrl: "https://www.dcjh.tn.edu.tw",
        
        // 中文文字
        titleZh: "網站遷移公告",
        descZh: "本校官方網站已遷移，本站僅做舊資料備份使用。閱覽最新公告請至新站。",
        btnGoZh: "前往新版官網",
        btnCloseZh: "我知道了",
        checkboxZh: "今日不再提示",

        // 英文文字 (English Text)
        titleEn: "Website Migration Notice",
        descEn: "Our official website has moved. This site is for archival purposes only. Please visit the new site for latest updates.",
        btnGoEn: "Go to New Site",
        btnCloseEn: "Got it",
        checkboxEn: "Don't show again today"
    };
</script>

<style>
    /* --- 外顯常駐區塊 (Static Bar) --- */
    .static-notice-bar {
        background: #fff;
        border-radius: 12px;
        padding: 25px;
        margin: 20px 0;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border: 1px solid #eee;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
    }

    .static-notice-bar::before {
        content: '';
        position: absolute;
        top: -2px; left: -2px; right: -2px; bottom: -2px;
        background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
        z-index: -1;
        background-size: 400%;
        animation: neonSteam 20s linear infinite;
        filter: blur(5px);
        opacity: 0.8;
        border-radius: 13px;
    }

    @keyframes neonSteam {
        0% { background-position: 0 0; }
        50% { background-position: 400% 0; }
        100% { background-position: 0 0; }
    }

    /* --- 彈出卡片 (Popup Card) --- */
    #announcement-overlay {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.75);
        display: none; 
        justify-content: center;
        align-items: center;
        z-index: 999999;
        font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
        backdrop-filter: blur(10px);
    }

    .announcement-card {
        background: white;
        padding: 40px;
        border-radius: 24px;
        box-shadow: 0 25px 60px rgba(0,0,0,0.6);
        max-width: 500px;
        width: 90%;
        text-align: center;
        animation: cardPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes cardPopIn {
        from { transform: scale(0.85); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    .btn-group { display: flex; gap: 12px; justify-content: center; margin-top: 25px; flex-wrap: wrap; }
    
    .btn {
        padding: 12px 28px;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        font-weight: bold;
        transition: 0.3s;
        font-size: 15px;
        text-decoration: none;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.2;
    }

    .btn small { font-size: 11px; font-weight: normal; opacity: 0.9; }

    .btn-primary {
        background: linear-gradient(135deg, #e67e22, #d35400);
        color: white !important;
    }

    .btn-secondary { background: #f2f4f4; color: #7f8c8d; }
    
    .checkbox-wrap {
        margin-top: 20px;
        font-size: 13px;
        color: #bdc3c7;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
    }
</style>

<div class="static-notice-bar">
    <h3 style="color: #d35400; margin: 0 0 10px 0; font-size: 22px;">
        ? <span id="js-static-title-zh"></span><br>
        <span id="js-static-title-en" style="font-size: 16px; opacity: 0.8;"></span>
    </h3>
    <p style="color: #2c3e50; margin: 0 0 20px 0;">
        <span id="js-static-desc-zh"></span><br>
        <small id="js-static-desc-en" style="color: #7f8c8d;"></small>
    </p>
    <a href="#" id="js-static-link" class="btn btn-primary">
        <span id="js-btn-go-zh"></span>
        <small id="js-btn-go-en"></small>
    </a>
</div>

<div id="announcement-overlay">
    <div class="announcement-card">
        <div style="font-size: 50px; margin-bottom: 15px;">?</div>
        <h2 style="color: #2c3e50; margin-bottom: 5px;" id="js-popup-school-zh"></h2>
        <h4 style="color: #95a5a6; margin: 0 0 20px 0; font-weight: normal;" id="js-popup-school-en"></h4>
        
        <p style="color: #34495e; font-size: 16px; line-height: 1.6;">
            <strong id="js-popup-desc-zh"></strong><br>
            <span id="js-popup-desc-en" style="font-size: 14px; color: #7f8c8d;"></span>
        </p>
        
        <label class="checkbox-wrap">
            <input type="checkbox" id="noShowCheck"> 
            <span id="js-checkbox-text"></span>
        </label>

        <div class="btn-group">
            <button class="btn btn-secondary" onclick="closeNotice()">
                <span id="js-btn-close-zh"></span>
                <small id="js-btn-close-en"></small>
            </button>
            <a href="#" class="btn btn-primary" id="js-popup-link">
                <span id="js-btn-jump-zh">前往新站</span>
                <small id="js-btn-jump-en">Go to New Site</small>
            </a>
        </div>
    </div>
</div>

<script>
    (function() {
        // 自動填充內容 (Data Binding)
        document.getElementById('js-static-title-zh').innerText = noticeConfig.schoolName + noticeConfig.titleZh;
        document.getElementById('js-static-title-en').innerText = noticeConfig.titleEn;
        document.getElementById('js-static-desc-zh').innerText = noticeConfig.descZh;
        document.getElementById('js-static-desc-en').innerText = noticeConfig.descEn;
        document.getElementById('js-btn-go-zh').innerText = noticeConfig.btnGoZh;
        document.getElementById('js-btn-go-en').innerText = noticeConfig.btnGoEn;

        document.getElementById('js-popup-school-zh').innerText = noticeConfig.schoolName + "首頁更新";
        document.getElementById('js-popup-school-en').innerText = noticeConfig.schoolNameEn;
        document.getElementById('js-popup-desc-zh').innerText = noticeConfig.descZh;
        document.getElementById('js-popup-desc-en').innerText = noticeConfig.descEn;
        document.getElementById('js-checkbox-text').innerText = noticeConfig.checkboxZh + " / " + noticeConfig.checkboxEn;
        document.getElementById('js-btn-close-zh').innerText = noticeConfig.btnCloseZh;
        document.getElementById('js-btn-close-en').innerText = noticeConfig.btnCloseEn;

        const links = [document.getElementById('js-static-link'), document.getElementById('js-popup-link')];
        links.forEach(link => link.href = noticeConfig.newWebsiteUrl);

        // 顯示邏輯
        const overlay = document.getElementById('announcement-overlay');
        const checkbox = document.getElementById('noShowCheck');
        const KEY = 'dqjh_notice_date_v2';
        const today = new Date().toLocaleDateString();

        if (localStorage.getItem(KEY) !== today) {
            overlay.style.display = 'flex';
        }

        window.closeNotice = function() {
            if (checkbox.checked) {
                localStorage.setItem(KEY, today);
            }
            overlay.style.opacity = '0';
            overlay.style.transition = 'opacity 0.4s ease';
            setTimeout(() => overlay.style.display = 'none', 400);
        };
    })();
</script>