Ó³ÐǽÌÓý/snippet-3-interview.php

@@ -308,13 +308,9 @@
            <div class="im-iv-section">
                <h2>Interview Questions</h2>
                <div class="im-iv-notice" style="line-height:1.8">
                    <p style="margin:0 0 8px">Please answer all questions in a single video, following the order below. Only
                        one video upload is allowed, so please include all your responses in one recording.</p>
                    <p style="margin:0 0 8px">Clearly explain your thinking process as if you are teaching a student.</p>
                    <p style="margin:0 0 8px">There is no strict time limit, but most candidates spend around 5 to 10
                        minutes on each question.</p>
                    <p style="margin:0">There is no need for perfect answers. We are primarily interested in how you explain
                        your thinking and teaching approach.</p>
                    <p style="margin:0 0 8px">Please answer all questions in one video, in order. Only one upload is allowed.</p>
                    <p style="margin:0 0 8px;color:#ef4444;font-weight:700">Please record your responses in English.</p>
                    <p style="margin:0 0 8px">Walk us through your thinking as if you’re teaching a student â€” we’d love to see how you explain and communicate your ideas. Most candidates spend around 5–10 minutes per question, but there’s no strict time limit. Don’t worry about having perfect answers â€” we’re much more interested in how you think and how you teach.</p>
                </div>
                <?= $q_html ?>
            </div>

 Ó³ÐǽÌÓý/snippet-5-training.php

@@ -48,8 +48,10 @@
.im-tr-section h2 .im-tr-step{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:linear-gradient(135deg,#009dff,#3de1fe);color:#fff;border-radius:50%;font-size:14px;font-weight:700;flex-shrink:0}
.im-tr-video-wrap{position:relative;width:100%;padding-bottom:56.25%;border-radius:10px;overflow:hidden;background:#0f172a;margin-bottom:20px}
.im-tr-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
.im-tr-dl-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#009dff,#3de1fe,#53eee0);color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:700;transition:all .3s;border:none;cursor:pointer;font-family:inherit}
.im-tr-dl-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,157,255,.3);color:#fff}
.im-tr-dl-section{display:block}
.im-tr-dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#009dff,#3de1fe,#53eee0);color:#fff;padding:18px 36px;border-radius:12px;text-decoration:none;font-size:18px;font-weight:700;min-height:56px;box-shadow:0 4px 14px rgba(0,157,255,.35);transition:all .3s;border:none;cursor:pointer;font-family:inherit;max-width:100%;box-sizing:border-box;word-break:break-word;text-align:center}
.im-tr-dl-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,157,255,.45);color:#fff}
.im-tr-dl-btn svg{flex-shrink:0}
.im-tr-quiz{margin-top:28px;border-top:2px solid #e5e7eb;padding-top:24px}
.im-tr-quiz-title{font-size:16px;font-weight:700;color:#009dff;margin:0 0 20px;display:flex;align-items:center;gap:8px}
.im-tr-q{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:20px 24px;margin-bottom:16px;transition:border-color .3s}
@@ -88,7 +90,7 @@
.im-tr-center h1{font-size:24px;margin:0 0 12px}
.im-tr-center p{color:#6b7280;font-size:15px;margin-bottom:5px;}
.im-tr-notice{background:#e6f9ff;border-left:4px solid #009dff;padding:12px 16px;border-radius:0 8px 8px 0;color:#007acc;font-size:14px;margin-bottom:20px}
@media(max-width:600px){.im-tr-header,.im-tr-section{padding:24px 20px}.im-tr-q{padding:16px 18px}}
@media(max-width:600px){.im-tr-header,.im-tr-section{padding:24px 20px}.im-tr-q{padding:16px 18px}.im-tr-dl-section{width:100%}.im-tr-dl-btn{width:100%;padding:15px 18px;font-size:16px;min-height:52px;gap:10px;line-height:1.35}.im-tr-dl-btn svg{width:22px;height:22px}}
@keyframes imTrFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.im-tr-fade-in{animation:imTrFadeIn .5s ease}
@keyframes imTrSpin{to{transform:rotate(360deg)}}
@@ -268,7 +270,7 @@
                    <?php if ($td['download_url']): ?>
                        <div class="im-tr-dl-section im-tr-hidden" id="im-tr-dl-<?= $idx ?>">
                            <a href="<?= esc_url($td['download_url']) ?>" target="_blank" class="im-tr-dl-btn">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
                                </svg>
                                <?= esc_html($td['download_btn_text']) ?>

 Ó³ÐǽÌÓý/Ô¤¼ÓÔض¯»­

New file
@@ -0,0 +1,177 @@
<link rel="preload" href="/wp-content/uploads/2026/03/YSBTH.ttf" as="font" type="font/ttf" crossorigin="anonymous">

<style>
    /* 2. å•ç‹¬å¼•å…¥å­—体，确保预加载动画能第一时间读取，不干等 Elementor */
    @font-face {
        font-family: '优设标题黑';
        /* ã€æ³¨æ„ï¼šè¯·æŠŠ url é‡Œçš„链接也替换成你真实的 ttf å­—体链接，和上面保持一致】 */
        src: url('/wp-content/uploads/2026/03/YSBTH.ttf') format('truetype');
        font-display: swap; 
    }

    /* æ·»åŠ äº† ys_edu_ å‰ç¼€ä»¥é˜²æ­¢ä¸Ž WordPress ä¸»é¢˜å†²çª */
    #ys_edu_custom-preloader {
        position: fixed;
        top: 0; 
        left: 0; 
        width: 100vw; 
        height: 100vh;
        background: linear-gradient(to right, #00d1fe, #a5fed9);
        z-index: 999999;
        display: none; /* â† æ”¹ä¸º none */
        justify-content: center;
        align-items: center;
        transition: opacity 0.6s ease;
    }

    .ys_edu_preloader-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ys_edu_img1 {
        height: 120px; 
        display: block;
    }

    /* åˆå§‹çŠ¶æ€ï¼šå›¾ç‰‡ç¼©æ”¾ä¸º0 */
    .ys_edu_img1-container {
        transform: scale(0);
        margin-top: -20px;
    }

    /* åˆå§‹çŠ¶æ€ï¼šæŠ½å±‰å®½åº¦ä¸º0 */
    .ys_edu_text-container {
        width: 0;
        overflow: hidden;
        margin-left: 0;
        display: flex;
        align-items: center;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
    }

    /* åˆå§‹çŠ¶æ€ï¼šå­—符透明、偏移、模糊 */
    .ys_edu_char {
        font-size: 80px; 
        font-weight: 400; 
        /* å·²ç»ä¿®æ”¹ä¸ºè°ƒç”¨ä¸Šæ–¹å£°æ˜Žçš„优设标题黑 */
        font-family: '优设标题黑', 'YouSheBiaoTiHei', sans-serif; 
        color: #ffffff; 
        display: inline-block; 
        opacity: 0;
        transform: translateX(40px); 
        filter: blur(12px); 
    }

    /* ========================================= */
    /* å‘令枪：当 JS æ·»åŠ  ys_edu_start-anim ç±»ååŽåŠ¨ç”»å¼€å§‹ */
    /* ========================================= */

    /* 1. è§¦å‘图片放大 */
    .ys_edu_start-anim .ys_edu_img1-container {
        animation: ys_edu_zoomIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    /* 2. è§¦å‘抽屉拉出 */
    .ys_edu_start-anim .ys_edu_text-container {
        animation: ys_edu_slideTextDrawer 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards; 
    }

    /* 3. è§¦å‘逐字显现 */
    .ys_edu_start-anim .ys_edu_char {
        animation: ys_edu_charFadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        animation-delay: calc(1s + var(--i) * 0.1s); 
    }

    @keyframes ys_edu_zoomIn {
        0% { transform: scale(0); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }

    @keyframes ys_edu_slideTextDrawer {
        0% { width: 0; margin-left: 0; }
        100% { width: 480px; margin-left: 20px; }
    }

    @keyframes ys_edu_charFadeIn {
        0% { opacity: 0; transform: translateX(40px); filter: blur(12px); }
        100% { opacity: 1; transform: translateX(0); filter: blur(0px); }
    }
</style>

<div id="ys_edu_custom-preloader">
    <div class="ys_edu_preloader-wrapper">
        <div class="ys_edu_img1-container">
            <img id="ys_edu_preloader-logo" src="" alt="YStar Edu Logo" class="ys_edu_img1">
        </div>

        <div class="ys_edu_text-container">
            <span class="ys_edu_char" style="--i:1">Y</span>
            <span class="ys_edu_char" style="--i:2">S</span>
            <span class="ys_edu_char" style="--i:3">t</span>
            <span class="ys_edu_char" style="--i:4">a</span>
            <span class="ys_edu_char" style="--i:5">r</span>
            <span class="ys_edu_char" style="--i:6">&nbsp;</span>
            <span class="ys_edu_char" style="--i:7">E</span>
            <span class="ys_edu_char" style="--i:8">d</span>
            <span class="ys_edu_char" style="--i:9">u</span>
        </div>
    </div>
</div>

<script>
    // ç«‹å³æ‰§è¡Œï¼šåˆ¤æ–­æœ¬åœ°æ˜¯å¦å·²ç»è®°å½•è¿‡æ’­æ”¾çŠ¶æ€
    (function() {
        if (!localStorage.getItem('ys_edu_preloader_shown')) {
            var preloader = document.getElementById('ys_edu_custom-preloader');
            if (preloader) preloader.style.display = 'flex';
        }
    })();
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const preloader = document.getElementById('ys_edu_custom-preloader');

        // å†æ¬¡ç¡®è®¤ï¼šå¦‚果已经播放过，直接跳过后续的 JS åŠ¨ç”»é€»è¾‘
        if (localStorage.getItem('ys_edu_preloader_shown')) {
            return; 
        }

        const logoUrl = "/wp-content/uploads/2026/03/preload-logo.webp";
        const img = new Image();
        img.src = logoUrl;

        img.onload = function() {
            const logoElement = document.getElementById('ys_edu_preloader-logo');
            if (preloader && logoElement) {
                logoElement.src = logoUrl;
                preloader.classList.add('ys_edu_start-anim');
                const animStartTime = Date.now();

                window.addEventListener('load', function() {
                    const minTime = 3000;
                    const checkInterval = setInterval(function() {
                        if (Date.now() - animStartTime >= minTime) {
                            clearInterval(checkInterval);
                            preloader.style.opacity = '0';
                            setTimeout(function() {
                                preloader.style.display = 'none';
                                // åŠ¨ç”»ç»“束，将状态永久写入用户的浏览器本地存储
                                localStorage.setItem('ys_edu_preloader_shown', 'true');
                            }, 600);
                        }
                    }, 100);
                });
            }
        };

        img.onerror = function() {
            if (preloader) preloader.style.display = 'none';
            // å³ä½¿å›¾ç‰‡åŠ è½½å¤±è´¥ï¼Œä¹Ÿæ ‡è®°ä¸ºå·²æ’­æ”¾ï¼Œé¿å…æ¯æ¬¡åˆ·æ–°éƒ½å¡æ­»
            localStorage.setItem('ys_edu_preloader_shown', 'true');
        };
    });
</script>