Embed

<!DOCTYPE html>
<html>
<head>
  <title>課程預約</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .slide-button {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      color: white;
      border-radius: 999px;
      white-space: nowrap;
      overflow: hidden;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeIn 1s forwards;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
      text-decoration: none;
      margin-bottom: 28px;
      padding: 24px 48px;
      min-width: 400px;
      font-size: 1rem;
      max-width: 95vw;
      transition: background 0.5s ease, transform 0.3s ease;
      z-index: 0;
    }

    .slide-button::before {
      content: "";
      position: absolute;
      top: -4px; left: -4px; right: -4px; bottom: -4px;
      border-radius: 999px;
      z-index: -1;
    }
    
    /* --- ADJUSTMENT: Blue & Green Gradient --- */

    /* New animated background with blue and green */
    .btn-50 {
      background: linear-gradient(135deg, #021B79, #0575E6, #69F0AE, #021B79);
      background-size: 400% 400%;
      animation: futuristicFlow 15s ease infinite, fadeIn 1s forwards;
    }

    /* New glow effect to match the green and blue theme */
    .btn-50::before {
      background: linear-gradient(270deg, #69F0AE, #0575E6, #69F0AE);
      background-size: 200% 200%;
      animation: glowFuturistic 6s linear infinite;
      color: #69F0AE; /* This color is used by the drop-shadow filter */
    }

    /* --- END ADJUSTMENT --- */

    .btn-25::before {
      background: linear-gradient(270deg, #CC4B00, #FF8000, #CC4B00);
      background-size: 200% 200%;
      animation: glowOrange 5s linear infinite;
      color: #FF8000;
    }

    .btn-rules::before {
      background: linear-gradient(270deg, #8a63e7, #a45fff, #8a63e7);
      background-size: 200% 200%;
      animation: glowPurple 5s linear infinite;
      color: #a45fff;
    }

    /* New style for the fourth bar: R74 G74 B246 */
    .btn-schedule::before {
      background: linear-gradient(270deg, rgb(74, 74, 246), rgb(120, 120, 255), rgb(74, 74, 246));
      background-size: 200% 200%;
      animation: glowSchedule 5s linear infinite; /* Define a new glow animation */
      color: rgb(74, 74, 246);
    }
    
    /* New "New" tag for the schedule button */
    .btn-schedule::after {
      content: 'New';
      position: absolute;
      top: 10px; /* Adjust vertical position */
      right: 15px; /* Adjust horizontal position */
      background-color: #4CAF50; /* Green background */
      color: white;
      padding: 4px 10px;
      border-radius: 5px;
      font-size: 0.7em;
      font-weight: bold;
      transform: rotate(15deg); /* Slightly rotated */
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      z-index: 1;
    }


    .btn-25 { background: linear-gradient(90deg, #FF7A00, #FFA931); }
    .btn-rules { background: linear-gradient(90deg, #6f42c1, #9d50bb); }
    /* Background for the new schedule button */
    .btn-schedule { background: linear-gradient(90deg, rgb(74, 74, 246), rgb(100, 100, 255)); }


    .slide-button:nth-child(1) { animation-delay: 0.1s; }
    .slide-button:nth-child(2) { animation-delay: 0.4s; }
    .slide-button:nth-child(3) { animation-delay: 0.7s; }
    .slide-button:nth-child(4) { animation-delay: 1.0s; } /* Animation delay for the fourth button */

    .slide-button:hover {
      transform: scale(1.05);
      filter: brightness(1.1);
    }

    .slide-button:active {
      transform: scale(0.97);
      filter: brightness(0.9);
    }

    @keyframes fadeIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes futuristicFlow {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }

    @keyframes glowFuturistic {
      0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 8px currentColor);
      }
      50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 16px currentColor);
      }
    }

    @keyframes glowOrange {
      0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 8px currentColor);
      }
      50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 14px currentColor);
      }
    }

    @keyframes glowPurple {
      0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 10px currentColor);
      }
      50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 16px currentColor);
      }
    }

    /* New glow animation for the schedule button */
    @keyframes glowSchedule {
      0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 8px currentColor);
      }
      50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 14px currentColor);
      }
    }


    @media (min-width: 1025px) {
      .slide-button {
        font-size: 2.25rem;
        min-width: 780px;
        padding: 30px 60px;
      }
      /* Adjust tag position for larger screens */
      .btn-schedule::after {
        top: 15px;
        right: 25px;
        padding: 6px 14px;
        font-size: 0.8em;
      }
    }

    @media (min-width: 481px) and (max-width: 1024px) {
      .slide-button {
        font-size: 2.2rem;
        min-width: 620px;
        padding: 28px 56px;
      }
      /* Adjust tag position for medium screens */
      .btn-schedule::after {
        top: 12px;
        right: 20px;
        padding: 5px 12px;
        font-size: 0.75em;
      }
    }

    @media (max-width: 480px) {
      .slide-button {
        font-size: 1.7rem;
        padding: 24px 20px;
        width: 92vw;
        max-width: none;
        min-width: unset;
      }

      .slide-button img {
        width: 45px !important;
        height: 45px !important;
      }
      /* Adjust tag position for small screens */
      .btn-schedule::after {
        top: 8px;
        right: 10px;
        padding: 3px 8px;
        font-size: 0.6em;
      }
    }
  </style>
</head>
<body>
  <div style="display: flex; flex-direction: column; align-items: center;">
    
    <a id="booking-link-50" class="slide-button btn-50" href="#" style="display: flex; align-items: center; gap: 12px;">
      預約50分鐘課程
      <img src="https://ik.imagekit.io/lql1uveoc/external-link.png?updatedAt=1754911187731" alt="external link icon" width="40" height="40" />
    </a>

    <a class="slide-button btn-25" href="https://koalendar.com/e/TonyOnlineEnglish/" target="_blank" style="display: flex; align-items: center; gap: 12px;">
      預約25分鐘課程 
      <img src="https://ik.imagekit.io/lql1uveoc/external-link.png?updatedAt=1754911187731" alt="external link icon" width="40" height="40" />
    </a>

    <a class="slide-button btn-rules" href="https://tonyonlineenglish.mydurable.com/regulations" target="_blank" style="display: flex; align-items: center; gap: 12px;">
      學生請假調課規範
      <img src="https://ik.imagekit.io/lql1uveoc/external-link.png?updatedAt=1754911187731" alt="external link icon" width="40" height="40" />
    </a>

    
    <a class="slide-button btn-schedule" href="https://tonyonlineenglish.mydurable.com/ycs" target="_blank" style="display: flex; align-items: center; gap: 12px;">
      查詢你的課表
      <img src="https://ik.imagekit.io/lql1uveoc/external-link.png?updatedAt=1754911187731" alt="external link icon" width="40" height="40" />
    </a>

  </div>

  <script>
    // --- CHANGE 1: Added the new URL to the list ---
    const urls = [
      'https://appt.link/meet-with-tony-w5vuHAPR/TonyOnlineEnglish50',
      'https://appt.link/meet-with-tony-lin-jsqoaDPU/TonyOnlineEnglish',
      'https://appt.link/TonyOnlineEnglishTutoring3/web-conference/'
    ];

    const bookingLink = document.getElementById('booking-link-50');

    bookingLink.addEventListener('click', function(event) {
      event.preventDefault();
      let clickCount = parseInt(localStorage.getItem('bookingLinkClickCount') || '0');
      
      // --- CHANGE 2: Changed from % 2 to % 3 to cycle through three links ---
      const targetUrl = urls[clickCount % 3];
      
      clickCount++;
      localStorage.setItem('bookingLinkClickCount', clickCount);
      window.location.href = targetUrl;
    });
  </script>

</body>
</html>

navy blue gradient Blank pink for product display background design product advertising backdrop

Text

<h3 style="text-align:center"><strong><em><span style="color:#f42ac6">↓↓↓↓↓↓↓</span></em></strong><br /> <span style="color:#e67e23"> <strong style="font-style:italic">25分鐘時段有條件限制 </strong></span><span style="color:#e67e23"><br /><span style="color:#000000">若無法選取想上課時段或是有特殊要求請與我們Line聯繫！我們會盡力符合您的需求。 </span></span></h3>
<p class="large" style="text-align:center"><span style="color:#526df4"><em><strong>Tony 線上美語家教<br />擁有調整課程安排的權利</strong></em></span></p>
<p style="text-align:center"><em><strong> </strong>完成預約後，Tony線上美語家教將透過<span style="color:#000000">LINE和Email 發送通知，確認課程已成功安排。惟為確保教學品質與資源調度，Tony 線上美語家教保留取消或調整任何預約課程的權利。如有變更，我們將即時聯繫學員，並提供相關協助與處理方案，感謝您的理解與配合。</span></em></p>

Text + image

<h2 style="white-space:pre-line"><span style="color:#e03e2d">更改時區：Change Your Time Zone.</span></h2>
<h3><em><strong>假如你的所在區不是在GMT+8 (Taipei)</strong></em></h3>
<h3><em><strong>有可能需要更動預約網站上的時區！請找到底下的按鈕，<span style="color:#2dc26b">按下Change.</span> 找尋你的所在時區。</strong></em></h3>
<h3><em><strong>If your current location is not in the GMT+8 (Taipei) time zone, you may need to adjust the time zone settings on the appointment scheduling website. Please locate the “<span style="color:#2dc26b">Change</span>” button below and select your current time zone accordingly.</strong></em></h3>

↓↓↓↓↓↓↓
25分鐘時段有條件限制
若無法選取想上課時段或是有特殊要求請與我們Line聯繫！我們會盡力符合您的需求。

更改時區：Change Your Time Zone.

假如你的所在區不是在GMT+8 (Taipei)

有可能需要更動預約網站上的時區！請找到底下的按鈕，按下Change. 找尋你的所在時區。

If your current location is not in the GMT+8 (Taipei) time zone, you may need to adjust the time zone settings on the appointment scheduling website. Please locate the “Change” button below and select your current time zone accordingly.

↓↓↓↓↓↓↓ 25分鐘時段有條件限制 若無法選取想上課時段或是有特殊要求請與我們Line聯繫！我們會盡力符合您的需求。

更改時區：Change Your Time Zone.

假如你的所在區不是在GMT+8 (Taipei)

有可能需要更動預約網站上的時區！請找到底下的按鈕，按下Change. 找尋你的所在時區。

If your current location is not in the GMT+8 (Taipei) time zone, you may need to adjust the time zone settings on the appointment scheduling website. Please locate the “Change” button below and select your current time zone accordingly.

↓↓↓↓↓↓↓
25分鐘時段有條件限制
若無法選取想上課時段或是有特殊要求請與我們Line聯繫！我們會盡力符合您的需求。