Pricing Table

多益課程TOEIC -600分/訂閱制/ 2025.07.02  

For Iris Liu Only 劉雅芳

Lady sitting at desk, using computer and waving to webcam

Embed

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>滑入式提示條 - 多色邊框</title>
  <style>
    :root {
      --gold-gradient: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
      --neon-blue-gradient: linear-gradient(135deg, #00f0ff, #0099ff, #00f0ff);
    }

    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background: #f5f5f5;
    }

    .bar-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
      padding: 2rem 1rem;
    }

    .bar {
      position: relative;
      width: 100%;
      max-width: 1000px;
      border-radius: 50px;
      padding: 1.5rem 2rem;
      font-style: italic;
      font-weight: bold;
      font-size: clamp(1.5rem, 5vw, 2.5rem);
      animation: slideIn 1.2s ease forwards;
      opacity: 0;
      background: #444;
      color: white;
      z-index: 0;
      overflow: hidden;
    }

    .bar::before {
      content: "";
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      border-radius: 60px;
      z-index: -1;
      background-size: 200% 200%;
      animation: spin 4s linear infinite;
    }

    .bar::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      right: 3px;
      bottom: 3px;
      background: inherit;
      border-radius: 50px;
      z-index: -1;
    }

    .bar1::before {
      background: var(--gold-gradient);
      filter: drop-shadow(0 0 8px #ffdb4d);
    }

    .bar2::before {
      background: var(--neon-blue-gradient);
      filter:
        drop-shadow(0 0 5px #00f0ff)
        drop-shadow(0 0 10px #00f0ff)
        drop-shadow(0 0 15px #00ccff);
    }

    .bar3::before {
      background: none;
      animation: none;
      filter: none;
    }

    .bar1 {
      background: linear-gradient(90deg, #6ecf68, #f9d976, #f26a4b);
      animation-delay: 0s;
    }

    .bar2 {
      background: linear-gradient(90deg, #5dade2, #a569bd, #e74c3c);
      animation-delay: 0.5s;
    }

    .bar3 {
      background-color: #0d1038;
      color: white;
      animation-delay: 1s;
    }

    .symbol {
      color: white;
      font-size: 1.5em;
      display: inline-block;
      animation: zoomPop 1s ease-out;
      white-space: nowrap;
    }

    .rule-icon-img {
      height: 1.5em;
      width: auto;
      vertical-align: middle;
      display: inline-block;
      animation: zoomPop 1s ease-out;
    }

    .number {
      color: black;
      font-size: 1.5em;
      display: inline-block;
      animation: zoomPop 1s ease-out;
      font-style: italic;
      white-space: nowrap;
    }

    .italic-black {
      color: black;
      font-style: italic;
      display: inline-block;
      white-space: nowrap;
    }

    .pulse {
      animation: pulse 1.5s infinite;
      display: inline-block;
      color: #ffdd00;
      font-weight: bold;
    }

    @keyframes slideIn {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes zoomPop {
      0% { transform: scale(1); }
      30% { transform: scale(1.5); }
      100% { transform: scale(1); }
    }

    @keyframes pulse {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.15); opacity: 0.8; }
      100% { transform: scale(1); opacity: 1; }
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @media (max-width: 600px) {
      .bar {
        padding: 1rem 1.25rem;
        border-radius: 30px;
      }
    }

    @media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
      .bar::before {
        animation: none !important;
        filter: none !important;
      }
      .bar1::before {
        background: var(--gold-gradient);
      }
      .bar2::before {
        background: var(--neon-blue-gradient);
      }
      .bar3::before {
        background: none !important;
      }

      .bar {
        padding: 1.25rem 3rem;
        font-size: 2rem;
        white-space: nowrap;
        overflow-x: auto;
      }

      .bar::-webkit-scrollbar {
        display: none;
      }
    }

    @media (min-width: 769px) {
      .bar3 {
        line-height: 1.8;
      }
    }

    @media (min-width: 1025px) {
      .bar3 {
        line-height: 1.8;
      }
    }
  </style>
</head>
<body>

  <div class="bar-container">
    <div class="bar bar1">
      <img class="rule-icon-img" src="https://ik.imagekit.io/lql1uveoc/rules.png?updatedAt=1748531353399" alt="rule icon"><span class="number">24</span>小時內提出請假或調課,
      <span class="italic-black">扣除</span><span class="number">0.5</span><span class="italic-black"> 堂</span>
    </div>

    <div class="bar bar2">
      <img class="rule-icon-img" src="https://ik.imagekit.io/lql1uveoc/rules.png?updatedAt=1748531353399" alt="rule icon"><span class="number">12</span>小時內提出請假或調課,
      <span class="italic-black">扣除</span><span class="number">1</span><span class="italic-black"> 堂</span>
    </div>

  <div class="bar bar3">
  上述規範適用上課時段<br>
   <span class="symbol">❖</span>週一～週五, 10:00 am~10:00 pm <span class="pulse"></span><br>
  <span class="symbol">❖</span>週六 10:00 am~5:00 pm
  <span style="font-size: 0.75rem; color: #ffaaaa; font-weight: normal;">（請假/缺席頻繁，取消該時段課程。）</span>
</div>

<!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>