Embed

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>課程選單 - Tony Online English</title>
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg-dark: #0a0a0d; /* Even darker background */
      --text-light: #e0e0e0; /* Lighter text for contrast */
      --accent-glow-strength: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.2);
      --button-gap: 28px;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%; /* Ensure full height for centering */
      font-family: 'Space Grotesk', sans-serif; /* Modern, clean font */
      background: var(--bg-dark); /* Dark futuristic background */
      color: var(--text-light);
      overflow-x: hidden;
      width: 100%; /* Ensure full width */
      margin: 0; /* Remove any default margins */
    }
    body {
      padding: 40px 0; /* Remove horizontal padding to eliminate black areas */
      flex-direction: column; /* Stack items vertically */
      width: 100%; /* Ensure body takes full width */
      display: block; /* Change to block to avoid centering issues */
    }
    /* Subtle background pattern/texture */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at center, rgba(30, 30, 40, 0.5) 0%, rgba(10, 10, 13, 1) 70%);
      opacity: 0.8;
      z-index: -1;
    }
    .button-group {
      display: flex;
      flex-direction: column;
      gap: var(--button-gap);
      padding: 0;
      width: 100%; /* Ensure full width */
      align-items: center; /* Center buttons within the group */
      position: relative;
      z-index: 1; /* Ensure content is above pseudo-elements */
    }
    @keyframes fadeUp {
      0% {
        opacity: 0;
        transform: translateY(40px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    a.slide-button {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      color: white; /* Default color for button text */
      border-radius: 999px;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      padding: 24px 48px;
      font-size: 1.1rem; /* Slightly larger base font */
      width: 90%; /* Adjusted to leave some margin */
      max-width: 800px; /* Limit max width for readability */
      margin: 0 auto; /* Center the button */
      transition: background 0.4s ease, transform 0.3s ease, box-shadow 0.4s ease;
      animation: fadeUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      opacity: 0;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Initial subtle shadow */
      font-family: 'Orbitron', sans-serif; /* Futuristic font for buttons */
      letter-spacing: 1px;
    }
    /* Animation delays for staggered appearance */
    a.slide-button:nth-child(1) { animation-delay: 0.1s; }
    a.slide-button:nth-child(2) { animation-delay: 0.2s; }
    a.slide-button:nth-child(3) { animation-delay: 0.3s; }
    a.slide-button:nth-child(4) { animation-delay: 0.4s; }
    /* Inner border/glow on hover using pseudo-element */
    a.slide-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 999px;
      border: 3px solid transparent;
      opacity: 0;
      transition: opacity 0.3s ease, border-color 0.3s ease;
      z-index: -1; /* Behind the button content */
    }
    a.slide-button:hover {
      transform: scale(1.03) translateY(-3px); /* More pronounced lift */
      filter: brightness(1.1); /* Slightly brighter */
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* Deeper shadow on hover */
    }
    a.slide-button:hover::before {
      opacity: 1;
      border-color: rgba(255, 255, 255, 0.5); /* White glow border */
    }
    a.slide-button:active {
      transform: scale(0.98);
      filter: brightness(0.9);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    a.slide-button .icon {
      font-size: 2.4em; /* Slightly larger icons */
      margin-right: 20px;
      line-height: 1;
      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); /* Subtle glow for emoji icons */
    }
    a.slide-button .icon-img {
      height: 2.4em; /* Match emoji icon size */
      margin-right: 20px;
      vertical-align: middle;
      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); /* Subtle glow for image icons */
      object-fit: contain; /* Ensure images fit without cropping */
      max-width: 40px; /* 設置圖片最大寬度 */
      max-height: 40px; /* 設置圖片最大高度 */
    }
    /* Gradient Backgrounds - Enhanced with more vibrant stops */
    a.green {
      background: linear-gradient(135deg, #1abc9c, #16a085); /* More vibrant green */
      box-shadow: 0 0 20px rgba(26, 188, 156, 0.5); /* Green specific glow */
    }
    a.green:hover {
      box-shadow: 0 0 30px rgba(26, 188, 156, 0.8), 0 0 50px rgba(26, 188, 156, 0.4);
    }
    a.green::before { border-color: rgba(26, 188, 156, 0.7); }
    a.red {
      background: linear-gradient(135deg, #e74c3c, #c0392b); /* More vibrant red */
      box-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
    }
    a.red:hover {
      box-shadow: 0 0 30px rgba(231, 76, 60, 0.8), 0 0 50px rgba(231, 76, 60, 0.4);
    }
    a.red::before { border-color: rgba(231, 76, 60, 0.7); }
    a.purple {
      background: linear-gradient(135deg, #9b59b6, #8e44ad); /* More vibrant purple */
      box-shadow: 0 0 20px rgba(155, 89, 182, 0.5);
    }
    a.purple:hover {
      box-shadow: 0 0 30px rgba(155, 89, 182, 0.8), 0 0 50px rgba(155, 89, 182, 0.4);
    }
    a.purple::before { border-color: rgba(155, 89, 182, 0.7); }
    a.custom-orange {
      background: linear-gradient(135deg, #f1c40f, #f39c12); /* More vibrant orange */
      color: var(--bg-dark); /* Darker text for orange contrast */
      box-shadow: 0 0 20px rgba(241, 196, 15, 0.5);
    }
    a.custom-orange:hover {
      box-shadow: 0 0 30px rgba(241, 196, 15, 0.8), 0 0 50px rgba(241, 196, 15, 0.4);
    }
    a.custom-orange::before { border-color: rgba(241, 196, 15, 0.7); }
    /* Responsive adjustments */
    @media (min-width: 1025px) {
      a.slide-button {
        font-size: 3rem; /* Slightly reduced large font size for sleekness */
        padding: 30px 60px;
        width: 90%; /* Adjusted to leave some margin */
        max-width: 800px; /* Limit max width for readability */
      }
      a.slide-button .icon-img {
        height: 3.6rem;
        margin-right: 30px;
        max-width: 60px;
        max-height: 60px;
      }
      .button-group {
        gap: 36px; /* Increased gap for larger screens */
      }
    }
    @media (min-width: 481px) and (max-width: 1024px) {
      a.slide-button {
        font-size: 2.5rem;
        padding: 28px 24px;
        width: 90%; /* Adjusted to leave some margin */
        max-width: 800px; /* Limit max width for readability */
      }
      a.slide-button .icon-img {
        height: 3.0rem;
        margin-right: 26px;
        max-width: 50px;
        max-height: 50px;
      }
      body {
        padding: 40px 0; /* Remove horizontal padding for full width */
      }
      .button-group {
        width: 100%; /* Ensure full width */
        padding: 0; /* Remove padding to avoid black areas */
      }
    }
    .subtitle {
      margin-top: 50px; /* Increased margin for better separation */
      font-size: 3.8rem; /* Larger, more impactful subtitle */
      color: #72aeff; /* A futuristic blue accent color */
      font-weight: 700;
      text-align: center;
      font-family: 'Orbitron', sans-serif; /* Futuristic font */
      letter-spacing: 2px; /* Add letter spacing for futuristic feel */
      user-select: none;
      animation: fadeIn 1s ease forwards; /* Use fadeIn for subtitle */
      opacity: 0;
      animation-delay: 0.8s; /* Delayed appearance */
      text-shadow: 0 0 15px rgba(114, 174, 255, 0.7), 0 0 30px rgba(114, 174, 255, 0.4); /* Blue glow */
      line-height: 1.2; /* Better line spacing */
      white-space: nowrap; /* Keep the subtitle on a single line by default */
    }
    @media (max-width: 480px) {
      a.slide-button {
        font-size: 1.8rem; /* Adjusted for better fit on small screens */
        padding: 20px 32px;
        width: 90vw; /* Slightly less wide */
      }
      a.slide-button .icon-img {
        height: 2.2rem;
        margin-right: 18px;
        max-width: 35px;
        max-height: 35px;
      }
      body {
        padding: 20px 10px; /* Reduced overall padding on small screens */
      }
      .button-group {
        gap: 20px; /* Reduced gap for smaller screens */
      }
      .subtitle {
        font-size: 1.8rem; /* Further adjusted for small screens to fit on one line */
        margin-top: 30px;
        padding: 0 10px;
        letter-spacing: 1px;
        white-space: nowrap; /* Ensure it stays on one line */
        overflow: hidden; /* Hide overflowing text */
        text-overflow: ellipsis; /* Add ellipsis if text overflows */
      }
    }
  </style>
</head>
<body>
  <div class="button-group">
    <a class="slide-button green" href="https://tonyonlineenglish.mydurable.com/gept" target="_blank" rel="noopener noreferrer">
      <img class="icon-img" src="https://ik.imagekit.io/lql1uveoc/Front%20Page/GEPT_logo.svg.png?updatedAt=1756611596300" alt="全民英檢GEPT Icon">全民英檢GEPT
    </a>
    <a class="slide-button red" href="https://tonyonlineenglish.mydurable.com/toeic" target="_blank" rel="noopener noreferrer">
      <img class="icon-img" src="https://ik.imagekit.io/lql1uveoc/Front%20Page/71-636x434.jpg?updatedAt=1756611513122" alt="多益TOEIC Icon">多益TOEIC
    </a>
    <a class="slide-button purple" href="https://tonyonlineenglish.mydurable.com/ielts" target="_blank" rel="noopener noreferrer">
      <img class="icon-img" src="https://ik.imagekit.io/lql1uveoc/%E6%AA%A2%E5%AE%9A%E8%80%83%E8%A9%A6%E7%B6%B2%E7%AB%99/%E6%88%AA%E5%9C%96%202025-09-05%20%E5%87%8C%E6%99%A81.43.58.png?updatedAt=1757007847078" alt="雅思IELTS Icon">雅思IELTS
    </a>
    <a class="slide-button custom-orange" href="https://tonyonlineenglish.mydurable.com/linguaskill" target="_blank" rel="noopener noreferrer">
      <img class="icon-img" src="https://ik.imagekit.io/lql1uveoc/def6e10ece563983eda53901c98c6dfe.webp?updatedAt=1749752404746" alt="Linguaskill Icon">
      領思Linguaskill
    </a>
    <div class="subtitle">❖ 聽說讀寫 ❖ 各級數</div>
  </div>
</body>
</html>

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