Embed

<style>
    .aaron-video-box {
        width: 100%;
        max-width: 850px;
        background: #ffffff; 
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        padding: 2.5rem 2rem; /* 電腦版的舒適大邊距 */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        text-align: center;
        margin: 0 auto;
        color: #111111; 
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
        box-sizing: border-box;
    }

    .aaron-class-info {
        border-bottom: 2px solid #111111; 
        padding-bottom: 1.2rem;
        margin-bottom: 2rem;
        text-align: left; 
    }

    .aaron-class-info h1 { 
        margin: 0 0 8px 0; 
        font-size: 1.6rem; 
        font-weight: 700;
        color: #111111; 
        letter-spacing: 0.5px;
    }
    
    .aaron-class-info p { 
        margin: 0; 
        color: #666666; 
        font-size: 0.95rem; 
    }

    /* 16:9 影片外框 */
    .aaron-player-wrapper {
        position: relative;
        width: 100%;
        padding-top: 56.25%; 
        background: #000000;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    }

    #aaronVideoIframe {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        border: none;
        display: none; 
    }

    .aaron-lock-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #f5f5f5; 
        padding: 30px;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
    }

    .aaron-lock-icon { 
        font-size: 2.5rem; 
        margin-bottom: 15px; 
        color: #111111;
    }
    
    .aaron-lock-title { 
        font-size: 1.2rem; 
        font-weight: 600; 
        color: #111111;
        margin-bottom: 15px; 
        line-height: 1.6; 
        max-width: 80%;
    }
    
    .aaron-countdown-timer {
        font-size: 1.6rem;
        color: #ffffff;
        background: #111111;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        padding: 10px 28px;
        border-radius: 4px;
        margin-top: 10px;
        letter-spacing: 1px;
    }

    .aaron-key-btn {
        margin-top: 15px;
        padding: 12px 32px;
        font-size: 1rem;
        cursor: pointer;
        font-weight: 600;
        border-radius: 4px;
        border: 1px solid #111111;
        background: #111111;
        color: #ffffff;
        transition: all 0.2s ease;
        letter-spacing: 0.5px;
    }
    
    .aaron-key-btn:hover { 
        background: #333333; 
        border-color: #333333;
    }

    /* =======================================================
       📱 這裡是新增的手機版專屬優化 (當螢幕寬度小於 768px 時自動啟用)
       ======================================================= */
    @media (max-width: 768px) {
        .aaron-video-box {
            padding: 1.2rem 1rem; /* 縮小外部卡片的內距，把寬度留給影片 */
            border-radius: 8px;   /* 稍微調小弧度，貼合手機螢幕 */
        }

        .aaron-class-info {
            margin-bottom: 1.2rem; /* 縮小與影片之間的間距 */
            padding-bottom: 0.8rem;
        }

        .aaron-class-info h1 {
            font-size: 1.3rem; /* 手機上標題變小，避免換行太難看 */
        }

        .aaron-class-info p {
            font-size: 0.85rem; /* 提示字體微調 */
        }

        .aaron-lock-title {
            font-size: 1rem;    /* 鎖定文字縮小，適應手機螢幕 */
            max-width: 95%;
        }

        .aaron-countdown-timer {
            font-size: 1.3rem;  /* 倒數計時數字縮小 */
            padding: 8px 20px;
        }

        .aaron-key-btn {
            font-size: 0.95rem; /* 按鈕稍微變小，更方便手指點擊 */
            padding: 10px 24px;
            width: 100%;        /* 在手機上按鈕變成全寬，更好按 */
        }
    }
</style>

<div class="aaron-video-box">
    <div class="aaron-class-info">
        <h1 id="aaronLessonTitle">載入課程中...</h1>
        <p>⏱️ 固定上課時間：每週校正時間上課</p>
    </div>
    
    <div class="aaron-player-wrapper">
        <iframe id="aaronVideoIframe" src="" allowfullscreen></iframe>
        
        <div id="aaronLockOverlay" class="aaron-lock-overlay">
            <div class="aaron-lock-icon" id="aaronLockIcon">🔒</div>
            <div class="aaron-lock-title" id="aaronLockMessage">正在檢查課堂開放時間...</div>
            <div class="aaron-countdown-timer" id="aaronTimerDisplay" style="display: none;">00:00:00</div>
            <div id="aaronKeyActionArea" style="display: none;">
                <button class="aaron-key-btn" onclick="askForClassKey()">輸入密碼開始上課</button>
            </div>
        </div>
    </div>
</div>

<script>
    const classConfig = {
        title: "【DSE 歷史】REGULAR 9 L05",
        videoUrl: "https://www.youtube.com/embed/OvvvXhEWjOU?si=KTrmWnQXlaIuEahK",
 
        startTime: "2026-01-01T00:00:00", 
        endTime: "2026-12-31T23:59:59",   
        secretKey: "aaron666" 
    };

    document.getElementById('aaronLessonTitle').textContent = classConfig.title;
    let studentHasAccess = false;

    function refreshClassState() {
        const nowTime = new Date().getTime();
        const startTime = new Date(classConfig.startTime).getTime();
        const endTime = new Date(classConfig.endTime).getTime();

        const iframe = document.getElementById('aaronVideoIframe');
        const overlay = document.getElementById('aaronLockOverlay');
        const msg = document.getElementById('aaronLockMessage');
        const icon = document.getElementById('aaronLockIcon');
        const timer = document.getElementById('aaronTimerDisplay');
        const btnArea = document.getElementById('aaronKeyActionArea');

        if (nowTime < startTime) {
            iframe.style.display = 'none'; overlay.style.display = 'flex'; btnArea.style.display = 'none';
            icon.textContent = "⏳"; msg.textContent = "距離本週 Video 班開課還有："; timer.style.display = 'block';
            const distance = startTime - nowTime;
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            timer.textContent = `${hours.toString().padStart(2,'0')}:${minutes.toString().padStart(2,'0')}:${seconds.toString().padStart(2,'0')}`;
        } 
        else if (nowTime >= startTime && nowTime <= endTime) {
            timer.style.display = 'none';
            if (!studentHasAccess) {
                iframe.style.display = 'none'; overlay.style.display = 'flex';
                icon.textContent = "🔑"; msg.textContent = "本週課堂已開放！請輸入 Aaron Chung 發放的密碼開始上課。";
                btnArea.style.display = 'block';
            } else {
                overlay.style.display = 'none';
                if (iframe.src !== classConfig.videoUrl) { iframe.src = classConfig.videoUrl; iframe.style.display = 'block'; }
            }
        } 
        else {
            iframe.src = ""; iframe.style.display = 'none'; overlay.style.display = 'flex'; btnArea.style.display = 'none'; timer.style.display = 'none';
            icon.textContent = "🚫"; msg.textContent = "是次 Video 課程已完成上課！";
        }
    }

    function askForClassKey() {
        const userInput = prompt("請輸入是次VIDEO 班上課密碼：");
        if (userInput === classConfig.secretKey) {
            studentHasAccess = true;
            alert("驗證成功！祝你上課愉快！");
            refreshClassState();
        } else if (userInput !== null) {
            alert("密碼錯誤！請重新確認。");
        }
    }

    setInterval(refreshClassState, 1000);
    refreshClassState();
</script>