Embed

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tony 線上美語家教</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Pacifico&display=swap');

        :root {
            /* Existing and new gradients */
            --grad-1: linear-gradient(to right, #4b65ff, #7382ff);
            --grad-2: linear-gradient(to right, #ff912c, #ffae45);
            --grad-3: linear-gradient(to right, #00c6a7, #1de9b6);
            --grad-4: linear-gradient(to right, #f0077b, #fd509e);
            --grad-5: linear-gradient(to right, #8e2de2, #4a00e0); /* New Purple Gradient */
            --grad-6: linear-gradient(to right, #00b09b, #96c93d); /* New Green Gradient */
        }

        body {
            margin: 0;
            font-family: 'Noto Sans TC', sans-serif;
            background-color: #f7f7f7;
            color: #343a40;
            min-height: 100vh;
            padding-top: 40px;
            box-sizing: border-box;
            overflow-x: hidden;
        }

        .pricing-container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
            box-sizing: border-box;
        }

        .main-header {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 40px;
            text-align: center;
        }

        .title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #212529;
            margin: 0;
        }

        .script-font {
            font-family: 'Pacifico', cursive;
            font-weight: 400;
            margin-right: 8px;
            color: #5865f2;
        }

        /* --- GRADIENT CLASSES --- */
        .plan-1-grad { background: var(--grad-1); }
        .plan-2-grad { background: var(--grad-2); }
        .plan-3-grad { background: var(--grad-3); }
        .plan-4-grad { background: var(--grad-4); }
        .plan-5-grad { background: var(--grad-5); }
        .plan-6-grad { background: var(--grad-6); }

        /* --- SHARED STYLES (for expanded content) --- */
        .card-body-common { padding: 25px; display: flex; flex-direction: column; align-items: center; flex-grow: 1; background-color: #fff; }
        .card-top-content-common { position: relative; width: 100%; padding-bottom: 25px; margin-bottom: 25px; }
        .card-top-content-common::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; height: 1px; background-color: #e9ecef; }
        .price-common { font-size: 3.5rem; font-weight: 700; color: #212529; line-height: 1.1; white-space: nowrap; }
        .currency-common { display: block; font-size: 1.1rem; font-weight: 500; color: #6c757d; margin-bottom: 5px; }
        .icon-container-common { display: flex; justify-content: center; align-items: center; min-height: 84px; }
        .medal-icon-common { width: 80px; height: auto; }
        .features-common { list-style: none; padding: 0; margin: 0 0 30px 0; text-align: left; width: fit-content; color: #495057; font-size: 1rem; }
        .features-common li { margin-bottom: 15px; display: flex; align-items: center; }
        .checkmark-common { display: inline-flex; justify-content: center; align-items: center; width: 22px; height: 22px; min-width: 22px; border-radius: 50%; background-color: #f1f3f5; color: #495057; font-weight: bold; margin-right: 12px; font-size: 0.9rem; }
        
        .details-button-common {
            border: none;
            color: #fff;
            padding: 12px 28px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            margin-top: auto;
            display: inline-block;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        /* --- MOBILE VIEW (ACCORDION BARS) --- */
        .mobile-view { display: block; max-width: 900px; margin: 0 auto; }
        .desktop-view { display: none; }

        .accordion-container { display: flex; flex-direction: column; gap: 16px; }
        .accordion-item {
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(100, 100, 100, 0.15);
            transition: box-shadow 0.3s ease;
        }
        .accordion-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 25px;
            cursor: pointer;
            color: #ffffff;
            font-size: 1.1rem;
            font-weight: 700;
        }
        .accordion-header .title-text { flex-grow: 1; }
        .accordion-header .arrow-icon {
            width: 24px;
            height: 24px;
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            margin-left: 20px;
        }
        .accordion-item.active .arrow-icon { transform: rotate(180deg); }
        .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
        
        .content-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }
        
        .force-single-line { white-space: nowrap; }

        /* --- DESKTOP VIEW (CARDS) --- */
        .card-link { text-decoration: none; color: inherit; display: flex; }
        .pricing-card {
            background-color: #ffffff;
            border-radius: 20px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.05);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            width: 100%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #e9ecef;
        }
        .card-link:hover .pricing-card { transform: translateY(-8px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08); }
        .card-header { color: #ffffff; font-size: 1.1rem; font-weight: 700; padding: 15px 20px; }
        .desktop-view .card-body-common { padding: 30px; }
        .desktop-view .details-button-common:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }


        /* --- RESPONSIVE BREAKPOINTS --- */
        @media (max-width: 767px) {
            .title { font-size: 2.1rem; }
        }

        @media (min-width: 768px) {
            .mobile-view { display: none; }
            .desktop-view { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
            .title { font-size: 2.4rem; }
        }
        
        @media (min-width: 992px) {
            /* Updated to a 3-column grid for 6 items */
            .desktop-view { grid-template-columns: repeat(3, 1fr); gap: 25px; }
        }
    </style>
</head>
<body>
    <div class="pricing-container">
        <header class="main-header">
            <h1 class="title">
                <span class="script-font">Tony</span>線上美語家教
            </h1>
        </header>

        
        <main class="mobile-view">
            <div class="accordion-container" id="accordion-container">
                
            </div>
        </main>

        
        <main class="desktop-view">
            
            <a href="https://tonyonlineenglish.mydurable.com/450" target="_blank" class="card-link">
                <div class="pricing-card">
                    <div class="card-header plan-1-grad">每週固定兩堂（會員訂閱）</div>
                    <div class="card-body-common">
                        <div class="card-top-content-common">
                            <div class="price-common"><span class="currency-common">NT</span>$13,500</div>
                        </div>
                        <ul class="features-common"><li><span class="checkmark-common">✔</span>每堂450點起</li><li><span class="checkmark-common">✔</span>每週固定扣除900點</li><li><span class="checkmark-common">✔</span>特殊時段優惠</li></ul>
                        <div class="details-button-common plan-1-grad">詳情請點選</div>
                    </div>
                </div>
            </a>
            
            <a href="https://tonyonlineenglish.mydurable.com/500" target="_blank" class="card-link">
                <div class="pricing-card">
                    <div class="card-header plan-2-grad">每週固定一堂（會員訂閱）</div>
                    <div class="card-body-common">
                        <div class="card-top-content-common">
                            <div class="price-common"><span class="currency-common">NT</span>$15,000</div>
                        </div>
                        <ul class="features-common"><li><span class="checkmark-common">✔</span>每堂500點起</li><li><span class="checkmark-common">✔</span>每週固定扣除500點</li><li><span class="checkmark-common">✔</span>特殊時段優惠</li></ul>
                        <div class="details-button-common plan-2-grad">詳情請點選</div>
                    </div>
                </div>
            </a>
            
            <a href="https://tonyonlineenglish.mydurable.com/experience" target="_blank" class="card-link">
                <div class="pricing-card">
                    <div class="card-header plan-3-grad">6/10/16/20/30堂(會員）</div>
                    <div class="card-body-common">
                        <div class="card-top-content-common">
                            <div class="icon-container-common"><img src="https://ik.imagekit.io/lql1uveoc/medal.png?updatedAt=1753979006982" alt="Medal Icon" class="medal-icon-common" /></div>
                        </div>
                        <ul class="features-common"><li><span class="checkmark-common">✔</span>自由時段上課</li><li><span class="checkmark-common">✔</span>固定時段上課</li><li><span class="checkmark-common">✔</span>預約時段上課</li></ul>
                        <div class="details-button-common plan-3-grad">詳情請點選</div>
                    </div>
                </div>
            </a>
            
            <a href="https://tonyonlineenglish.mydurable.com/geptwritingall/geptwriting2" target="_blank" class="card-link">
                <div class="pricing-card">
                    <div class="card-header plan-4-grad">全民英檢中級寫作影片課程</div>
                    <div class="card-body-common">
                        <div class="card-top-content-common">
                            <div class="price-common"><span class="currency-common">NT</span>$6,600</div>
                        </div>
                        <ul class="features-common"><li><span class="checkmark-common">✔</span>六回完整寫作線上影片課程</li><li><span class="checkmark-common">✔</span>贈送四回寫作+翻譯修改</li><li><span class="checkmark-common">✔</span>贈送兩堂線上真人美語家教</li></ul>
                        <div class="details-button-common plan-4-grad">詳情請點選</div>
                    </div>
                </div>
            </a>
            
            <a href="https://tonyonlineenglish.mydurable.com/geptwritingall/geptwriting" target="_blank" class="card-link">
                <div class="pricing-card">
                    <div class="card-header plan-5-grad">全民英檢初級寫作影片課程</div>
                    <div class="card-body-common">
                        <div class="card-top-content-common">
                             <div class="icon-container-common"><img src="https://ik.imagekit.io/lql1uveoc/medal.png?updatedAt=1753979006982" alt="Medal Icon" class="medal-icon-common" /></div>
                        </div>
                        <ul class="features-common">
                            <li><span class="checkmark-common">✔</span>六回完整寫作線上影片課程</li>
                            <li><span class="checkmark-common">✔</span>贈送四回課後寫作更改</li>
                            <li><span class="checkmark-common">✔</span>贈送兩堂線上真人美語家教</li>
                        </ul>
                        <div class="details-button-common plan-5-grad">詳情請點選</div>
                    </div>
                </div>
            </a>
            
            <a href="https://tonyonlineenglish.mydurable.com/geptwritingall/geptbsp" target="_blank" class="card-link">
                <div class="pricing-card">
                    <div class="card-header plan-6-grad">全民英檢初級口說影片課程</div>
                    <div class="card-body-common">
                        <div class="card-top-content-common">
                            <div class="icon-container-common"><img src="https://ik.imagekit.io/lql1uveoc/medal.png?updatedAt=1753979006982" alt="Medal Icon" class="medal-icon-common" /></div>
                        </div>
                        <ul class="features-common">
                            <li><span class="checkmark-common">✔</span>六回完整口說線上影片課程</li>
                            <li><span class="checkmark-common">✔</span>贈送四回課後口說評分＋修改</li>
                            <li><span class="checkmark-common">✔</span>贈送兩堂線上真人美語家教</li>
                        </ul>
                        <div class="details-button-common plan-6-grad">詳情請點選</div>
                    </div>
                </div>
            </a>
        </main>
    </div>

    <script>
    // This script is ONLY for the mobile accordion view.
    const cardData = [
        { id: '450', header: '每週固定兩堂（每堂450點）', planClass: 'plan-1-grad', price: '$13,500', features: ['每堂450點起', '每週固定扣除900點', '特殊時段優惠'] },
        { id: '500', header: '每週固定一堂 (每堂500點）', planClass: 'plan-2-grad', price: '$15,000', features: ['每堂500點起', '每週固定扣除500點', '特殊時段優惠'] },
        { id: 'experience', header: '6/10/16/20/30堂(自由度高）', planClass: 'plan-3-grad', icon: 'https://ik.imagekit.io/lql1uveoc/medal.png?updatedAt=1753979006982', features: ['自由時段上課', '固定時段上課', '預約時段上課'] },
        { 
            id: 'geptwriting-intermediate', 
            header: '全民英檢中級寫作影片課程', 
            planClass: 'plan-4-grad', 
            price: '$6,600', 
            features: ['六回完整寫作線上影片課程', '贈送四回寫作+翻譯修改', '贈送兩堂線上真人美語家教'], 
            url: 'https://tonyonlineenglish.mydurable.com/geptwritingall/geptwriting2' 
        },
        // NEW ITEM 5 with corrected text
        { 
            id: 'geptwriting-elementary', 
            header: '全民英檢初級寫作影片課程', 
            planClass: 'plan-5-grad', 
            icon: 'https://ik.imagekit.io/lql1uveoc/medal.png?updatedAt=1753979006982', 
            features: ['六回完整寫作線上影片課程', '贈送四回課後寫作更改', '贈送兩堂線上真人美語家教'], 
            url: 'https://tonyonlineenglish.mydurable.com/geptwritingall/geptwriting' 
        },
        // NEW ITEM 6 with corrected text
        { 
            id: 'geptspeaking-elementary', 
            header: '全民英檢初級口說影片課程', 
            planClass: 'plan-6-grad', 
            icon: 'https://ik.imagekit.io/lql1uveoc/medal.png?updatedAt=1753979006982', 
            features: ['六回完整口說線上影片課程', '贈送四回課後口說評分＋修改', '贈送兩堂線上真人美語家教'], 
            url: 'https://tonyonlineenglish.mydurable.com/geptwritingall/geptbsp' 
        }
    ];

    const accordionContainer = document.getElementById('accordion-container');

    if (accordionContainer) {
        cardData.forEach(data => {
            const item = document.createElement('div');
            item.className = 'accordion-item';

            const featuresHTML = data.features.map(f => `<li class="force-single-line"><span class="checkmark-common">✔</span>${f}</li>`).join('');
            
            const topContentHTML = data.price
                ? `<div class="price-common"><span class="currency-common">NT</span>${data.price}</div>`
                : `<div class="icon-container-common"><img src="${data.icon}" alt="Icon" class="medal-icon-common" /></div>`;

            const linkHref = data.url ? data.url : `https://tonyonlineenglish.mydurable.com/${data.id}`;

            item.innerHTML = `
                <div class="accordion-header ${data.planClass}">
                    <span class="title-text">${data.header}</span>
                    <svg class="arrow-icon" fill="none" stroke="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path></svg>
                </div>
                <div class="accordion-content">
                    <a href="${linkHref}" target="_blank" class="content-link">
                        <div class="card-body-common">
                            <div class="card-top-content-common">${topContentHTML}</div>
                            <ul class="features-common">${featuresHTML}</ul>
                            <div class="details-button-common ${data.planClass}">詳情請點選</div>
                        </div>
                    </a>
                </div>
            `;
            accordionContainer.appendChild(item);
        });

        const accordionItems = document.querySelectorAll('.accordion-item');
        accordionItems.forEach(item => {
            const header = item.querySelector('.accordion-header');
            const content = item.querySelector('.accordion-content');

            header.addEventListener('click', () => {
                const isActive = item.classList.contains('active');
                
                accordionItems.forEach(otherItem => {
                    if (otherItem !== item) {
                        otherItem.classList.remove('active');
                        otherItem.querySelector('.accordion-content').style.maxHeight = null;
                    }
                });

                if (isActive) {
                    item.classList.remove('active');
                    content.style.maxHeight = null;
                } else {
                    item.classList.add('active');
                    content.style.maxHeight = content.scrollHeight + 50 + "px";
                }
            });
        });
    }
    </script>
</body>
</html>