Embed

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全民英檢中級寫作課程</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: #f0f2f5;
      margin: 0;
      padding: 20px;
    }
    .page-content-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 40px auto;
      max-width: fit-content;
    }
    .product-widget {
      max-width: 400px;
      background-color: white;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      flex-shrink: 1;
    }
    .product-widget img { width: 100%; display: block; }
    .product-info { padding: 24px; }
    .product-info h1 { font-size: 24px; color: #333; margin: 0 0 20px 0; }
    .quantity-selector { display: flex; align-items: center; margin-bottom: 20px; }
    .quantity-selector label { font-size: 16px; color: #555; margin-right: 15px; }
    .quantity-selector select { font-size: 16px; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; flex-grow: 1; }
    #add-to-cart-btn { width: 100%; background-color: #3b414a; color: white; border: none; padding: 15px 20px; font-size: 18px; font-weight: bold; border-radius: 6px; cursor: pointer; transition: background-color 0.3s ease; }
    #add-to-cart-btn:hover { background-color: #2c3138; }

    .cart-icon-wrapper { position: relative; font-size: 32px; cursor: pointer; color: #333; margin-left: 25px; }
    .cart-count { position: absolute; top: -5px; right: -10px; background-color: red; color: white; border-radius: 50%; width: 22px; height: 22px; font-size: 14px; font-weight: bold; display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease; transform: scale(0); }
    .cart-count.visible { transform: scale(1); }

    .cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; }

    .cart-panel {
      position: fixed;
      top: 0;
      right: -100%;
      width: 90%;
      max-width: 800px;
      height: 100%;
      background-color: #f9f9f9;
      box-shadow: -5px 0 15px rgba(0,0,0,0.1);
      z-index: 1001;
      transition: right 0.5s ease-in-out;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .cart-panel.open { right: 0; }
    .cart-body { display: flex; flex-grow: 1; padding: 0 20px 20px 20px; gap: 40px; overflow-y: auto; }
    .cart-left, .cart-right { flex-basis: 50%; background-color: white; padding: 20px; border-radius: 8px; border: 1px solid #e0e0e0; }
    .cart-left h3 { margin-top: 0; }

    .cart-item {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
      flex-wrap: wrap;
    }
    .cart-item-thumbnail { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
    .cart-item-info {
      flex-grow: 1;
      flex-basis: calc(100% - 80px - 15px);
    }

    .cart-item-name { font-weight: bold; margin-bottom: 10px; }

    .cart-item-actions {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-top: 8px;
      flex-wrap: nowrap;
    }

    .cart-item-actions select {
      padding: 5px;
      border-radius: 4px;
      border: 1px solid #ccc;
      z-index: 10;
      position: relative;
      background-color: white;
      -webkit-appearance: menulist-button;
      touch-action: manipulation;
    }

    select, select:focus, select:active {
      -webkit-appearance: menulist;
    }

    .remove-item-btn {
      background: none;
      border: none;
      color: #999;
      cursor: pointer;
      font-size: 14px;
      text-decoration: underline;
      padding: 0;
      white-space: nowrap;
    }

    .cart-item-price {
      font-weight: bold;
      white-space: nowrap;
      flex-basis: 100%;
      text-align: right;
      margin-top: 10px;
    }

    .cart-total { margin-top: 20px; padding-top: 20px; border-top: 2px solid #333; }
    .cart-total .total-row { display: flex; justify-content: space-between; font-size: 22px; font-weight: bold; }
    .cart-total small { display: block; text-align: right; color: #888; }
    .cart-right h3 { margin-top: 0; }

    #checkout-form p { color: #555; }
    #checkout-form input[type="email"] {
      width: 100%; padding: 12px; font-size: 16px;
      border: 1px solid #ccc; border-radius: 4px; margin-bottom: 15px;
      box-sizing: border-box;
    }
    #checkout-form button {
      width: 100%;
      background-color: #3b414a;
      color: white;
      border: none;
      padding: 15px;
      font-size: 18px;
      font-weight: bold;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    #checkout-form button:hover { background-color: #2c3138; }
    .tls-info { text-align: center; color: #888; font-size: 12px; margin-top: 15px; }

    @media (max-width: 820px) {
      .page-content-wrapper { width: 100%; padding: 0 15px; box-sizing: border-box; }
      .cart-icon-wrapper { margin-left: 15px; }
      .product-info h1 { font-size: 22px; }
      .cart-panel { width: 100%; max-width: 100%; }
      .cart-body { flex-direction: column; gap: 20px; padding: 0 15px 15px 15px; }
      .cart-left, .cart-right { flex-basis: auto; }
      .cart-total .total-row { font-size: 20px; }
      #checkout-form p { font-size: 15px; }
    }
  </style>
</head>
<body>

  <div class="page-content-wrapper">
    <div class="product-widget">
      <img src="https://ik.imagekit.io/lql1uveoc/Beginning-intermediate%20level/IMG_2348.jpeg?updatedAt=1752385158320" alt="全民英檢中級寫作影片課程">
      <div class="product-info">
        <h1>全民英檢中級寫作影片課程</h1>
        <div class="quantity-selector">
          <label for="quantity">數量</label>
          <select id="quantity">
            ${[...Array(10)].map((_, i) => `<option value="${i+1}">${i+1}</option>`).join("")}
          </select>
        </div>
        <button id="add-to-cart-btn">NT$6,600 | 立即購買</button>
      </div>
    </div>
    <div id="cart-icon" class="cart-icon-wrapper">🛒<span id="cart-count" class="cart-count">0</span></div>
  </div>

  <div id="cart-overlay" class="cart-overlay"></div>
  <div id="cart-panel" class="cart-panel">
    <div class="cart-body">
      <div class="cart-left">
        <h3>購物車 <button class="close-btn" id="close-cart-btn-main">×</button></h3>
        <div id="cart-items-container"></div>
        <div class="cart-total">
          <div class="total-row"><span>總計</span><span id="total-price">NT$0</span></div>
          <small>價格包括 稅金(NT$0)</small>
        </div>
      </div>
      <div class="cart-right">
        <h3>結帳</h3>
        <form id="checkout-form">
          <p>請輸入您的電子信箱。本信箱將用於向您發送訂單狀態最新消息。</p>
          <input type="email" id="email" placeholder="tonyonlineenglish@gmail.com" required>
          <p style="font-weight: bold; color: #c0392b; text-align: center; margin-bottom: 15px;">請加入Line: Myavalon</p>
          <button type="submit">結帳</button>
          <p class="tls-info">所有數據都透過安全 TLS 連線進行加密傳輸</p>
        </form>
      </div>
    </div>
  </div>

  <script>
    const product = {
      id: "gept-intermediate-writing",
      name: "全民英檢中級寫作影片課程",
      price: 6600,
      imageUrl: "https://ik.imagekit.io/lql1uveoc/Beginning-intermediate%20level/IMG_2348.jpeg?updatedAt=1752385158320"
    };

    let cart = {};
    const addToCartBtn = document.getElementById("add-to-cart-btn");
    const quantitySelect = document.getElementById("quantity");
    const cartIcon = document.getElementById("cart-icon");
    const cartCountSpan = document.getElementById("cart-count");
    const cartOverlay = document.getElementById("cart-overlay");
    const cartPanel = document.getElementById("cart-panel");
    const closeCartBtn = document.getElementById("close-cart-btn-main");
    const cartItemsContainer = document.getElementById("cart-items-container");
    const totalPriceSpan = document.getElementById("total-price");
    const checkoutForm = document.getElementById("checkout-form");
    const emailInput = document.getElementById("email");

    function updateCartDisplay() {
      let qty = 0, total = 0;
      cartItemsContainer.innerHTML = "";

      if (cart[product.id] && cart[product.id].quantity > 0) {
        const item = cart[product.id];
        qty = item.quantity;
        total = item.price * item.quantity;
        let options = "";
        for (let i = 1; i <= 10; i++) {
          options += `<option value="${i}" ${i === item.quantity ? "selected" : ""}>${i}</option>`;
        }

        cartItemsContainer.innerHTML = `
          <div class="cart-item" data-product-id="${product.id}">
            <img src="${item.imageUrl}" alt="${item.name}" class="cart-item-thumbnail">
            <div class="cart-item-info">
              <div class="cart-item-name">${item.name}</div>
              <div class="cart-item-actions">
                <label for="cart-quantity-${product.id}">數量：</label>
                <select id="cart-quantity-${product.id}" class="cart-item-quantity-select">
                  ${options}
                </select>
                <button class="remove-item-btn">移除</button>
              </div>
            </div>
            <div class="cart-item-price">NT$ ${total.toLocaleString()}</div>
          </div>
        `;
      } else {
        cartItemsContainer.innerHTML = "<p>您的購物車是空的。</p>";
      }

      cartCountSpan.innerText = qty;
      cartCountSpan.classList.toggle("visible", qty > 0);
      totalPriceSpan.innerText = `NT$ ${total.toLocaleString()}`;
    }

    function toggleCartPanel() {
      cartOverlay.classList.toggle("open");
      cartPanel.classList.toggle("open");
    }

    function handleAddToCart() {
      const qty = parseInt(quantitySelect.value, 10);
      cart[product.id] = {
        ...product,
        quantity: (cart[product.id]?.quantity || 0) + qty
      };
      updateCartDisplay();
      toggleCartPanel();
    }

    function handleCartInteraction(e) {
      const target = e.target;
      const item = target.closest(".cart-item");
      if (!item) return;
      const pid = item.dataset.productId;

      if (target.classList.contains("cart-item-quantity-select")) {
        const val = parseInt(target.value, 10);
        if (cart[pid]) {
          cart[pid].quantity = val;
          updateCartDisplay();
        }
      }

      if (target.classList.contains("remove-item-btn")) {
        delete cart[pid];
        updateCartDisplay();
      }
    }

    addToCartBtn.addEventListener("click", handleAddToCart);
    cartIcon.addEventListener("click", toggleCartPanel);
    closeCartBtn.addEventListener("click", toggleCartPanel);
    cartOverlay.addEventListener("click", toggleCartPanel);
    cartItemsContainer.addEventListener("change", handleCartInteraction);
    cartItemsContainer.addEventListener("click", handleCartInteraction);
    updateCartDisplay();
  </script>

</body>
</html>


<!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>
        /*
         *  CSS Styles for Fully Responsive Collapsible Accordion Bars
        */

        body {
            font-family: 'Helvetica Neue', Arial, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
            background-color: #f4f7f6;
            margin: 0;
            padding: 20px 15px;
        }

        .course-container {
            max-width: 950px;
            margin: 20px auto;
        }

        @keyframes slideAndFadeIn {
            from { opacity: 0; transform: translateX(-50px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .episode-group {
            margin-bottom: 10px;
            opacity: 0;
            animation: slideAndFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            animation-delay: var(--animation-delay, 0.1s);
        }

        /* --- Base Styles (Mobile First) --- */
        .episode-toggle {
            background-color: #ffffff;
            color: #333;
            cursor: pointer;
            padding: 15px;
            width: 100%;
            border: none;
            border-radius: 10px;
            text-align: left;
            outline: none;
            font-size: 1.1rem; /* Base size for mobile */
            font-weight: bold;
            transition: all 0.3s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 3px 8px rgba(0,0,0,0.05);
        }

        .episode-toggle::after {
            content: '+';
            font-size: 1.8rem;
            color: #0d6efd;
            font-weight: 300;
            transition: transform 0.3s ease-out;
        }

        .link-panel {
            padding: 0 15px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.05);
        }

        .link-bar {
            display: flex;
            align-items: center;
            text-decoration: none;
            padding: 12px 18px;
            margin: 10px 0;
            border-radius: 50px;
            font-size: 1rem; /* Base size for mobile */
            font-weight: 600;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .link-icon {
            font-size: 1.2rem;
            margin-right: 12px;
        }
        
        /* --- ✨ KEY CHANGE HERE: Tablet & Small Desktop Styles --- */
        /* Lowered breakpoint and increased sizes for a more noticeable change */
        @media (min-width: 700px) {
            body {
                padding: 30px;
            }
            .episode-toggle {
                padding: 22px 25px; /* More padding */
                font-size: 1.5rem;   /* Noticeably larger font */
            }
            .link-panel {
                padding: 0 25px;
            }
            .link-bar {
                padding: 18px 25px; /* More padding */
                font-size: 1.2rem;   /* Noticeably larger font */
                margin: 15px 0;
            }
            .link-icon {
                font-size: 1.4rem;
                margin-right: 18px;
            }
        }
        
        /* --- Large Desktop Styles (Unchanged) --- */
        @media (min-width: 1200px) {
            .episode-toggle {
                padding: 25px 30px;
                font-size: 1.7rem;
            }
            .link-bar {
                font-size: 1.25rem;
            }
        }

        /* --- Unchanged Styles --- */
        .episode-toggle:hover { background-color: #f8f8f8; }
        .episode-toggle.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
        .episode-toggle.active::after { transform: rotate(45deg); }
        .link-bar:first-child { margin-top: 20px; }
        .link-bar:last-child { margin-bottom: 20px; }
        .link-bar:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.12); }

        .bar-grey {
            background: linear-gradient(180deg, #d8dde3, #b8c0c8);
            color: #212529;
            border: 1px solid #a9b1b8;
        }
        .bar-grey:hover {
            background: linear-gradient(180deg, #ced4da, #abb3bb);
            border-color: #98a0a6;
        }
        .bar-homework { 
            background: linear-gradient(45deg, #6a11cb, #a97bff); 
            color: white;
        }
        .bar-playlist { 
            background: linear-gradient(45deg, #11998e, #38ef7d); 
            color: white;
        }
    </style>
</head>
<body>

<div class="course-container">
    <div class="episode-group" style="--animation-delay: 0.1s;">
        <button class="episode-toggle">第一集</button>
        <div class="link-panel">
            <a href="https://youtu.be/caVBN-X9Ffg" target="_blank" rel="noopener noreferrer" class="link-bar bar-grey">
                <span class="link-icon">🎥</span> 上課影片
            </a>
            <a href="https://drive.google.com/drive/folders/1KkhOT9djhOnNwr7_zl9gY2Tk6EQS7R7w?usp=drive_link" target="_blank" rel="noopener noreferrer" class="link-bar bar-grey">
                <span class="link-icon">📂</span> 上課檔案下載
            </a>
        </div>
    </div>

    <div class="episode-group" style="--animation-delay: 0.2s;">
        <button class="episode-toggle">第二集</button>
        <div class="link-panel">
            <a href="https://youtu.be/YFVLLezWUR0" target="_blank" rel="noopener noreferrer" class="link-bar bar-grey">
                <span class="link-icon">🎥</span> 上課影片
            </a>
            <a href="https://drive.google.com/drive/folders/1AmTN_23Uvn0be5ENVKHbrphQTP1WTu9p?usp=drive_link" target="_blank" rel="noopener noreferrer" class="link-bar bar-grey">
                <span class="link-icon">📂</span> 上課檔案下載
            </a>
        </div>
    </div>
    
    <div class="episode-group" style="--animation-delay: 0.3s;">
        <button class="episode-toggle">第三集</button>
        <div class="link-panel">
            <a href="https://youtu.be/7UEmpBSMrxE" target="_blank" rel="noopener noreferrer" class="link-bar bar-grey">
                <span class="link-icon">🎥</span> 上課影片
            </a>
            <a href="https://drive.google.com/drive/folders/1q6H_6S_oHNqIMAdRpfhA56ER2Y-dNmlB?usp=drive_link" target="_blank" rel="noopener noreferrer" class="link-bar bar-grey">
                <span class="link-icon">📂</span> 上課檔案下載
            </a>
        </div>
    </div>

    <div class="episode-group" style="--animation-delay: 0.4s;">
        <button class="episode-toggle">第四集</button>
        <div class="link-panel">
            <a href="https://youtu.be/TOd_FuRaLMg" target="_blank" rel="noopener noreferrer" class="link-bar bar-grey">
                <span class="link-icon">🎥</span> 上課影片
            </a>
            <a href="https://drive.google.com/drive/folders/1kW2ESIp5jkJkR_y3BNiEanPtzpvvl-TA?usp=drive_link" target="_blank" rel="noopener noreferrer" class="link-bar bar-grey">
                <span class="link-icon">📂</span> 上課檔案下載
            </a>
            <a href="https://drive.google.com/file/d/1SgN_j1tvVC-pefe3uQ9hkc4eaY1VBaGQ/view?usp=share_link" target="_blank" rel="noopener noreferrer" class="link-bar bar-homework">
                <span class="link-icon">✍️</span> 作業寫作第一回批改題目
            </a>
        </div>
    </div>

    <div class="episode-group" style="--animation-delay: 0.5s;">
        <button class="episode-toggle">完整課程</button>
        <div class="link-panel">
            <a href="https://youtube.com/playlist?list=PLYY0gyFHODrOfZP0pziLR5JWwVwNSH5AF&si=ZvAvOt2qMwylzRBK" target="_blank" rel="noopener noreferrer" class="link-bar bar-playlist">
                <span class="link-icon">▶️</span> YouTube 完整播放清單
            </a>
        </div>
    </div>
</div>

<script>
    const accordions = document.querySelectorAll(".episode-toggle");
    accordions.forEach(accordion => {
        accordion.addEventListener("click", function() {
            this.classList.toggle("active");
            const panel = this.nextElementSibling;
            if (panel.style.maxHeight) {
                panel.style.maxHeight = null;
            } else {
                panel.style.maxHeight = panel.scrollHeight + "px";
            }
        });
    });
</script>

</body>
</html>

<script data-cartloom-pid="211883">
 if (typeof Cartloom === "undefined") {
	var Cartloom = {};
	(function(){
	 var script = document.createElement("script"); 
	script.src = "https://tonyonlineenglish.cartloom.com/v5/cart.js";
	 document.body.appendChild(script);
	})();
 }
</script>
<noscript>
	<a href="https://tonyonlineenglish.cartloom.com/v5/cart/quickbuy/211883" target="_blank">Buy Now</a>
</noscript>

Instagram

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <title>iPhone Chat Interface</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body {
      margin: 0;
      background-color: #d2d5da;
      font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    }

    .chat-wrapper {
      max-width: 430px;
      margin: 30px auto;
      padding: 20px;
      background-color: #f2f2f7;
      border-radius: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      height: 600px;
      overflow-y: auto;
    }

    .chat-line {
      display: flex;
      align-items: flex-end;
      margin-bottom: 15px;
    }

    .chat-line.right {
      justify-content: flex-end;
    }

    .profile-pic {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid #ccc;
    }

    .profile-left {
      margin-right: 8px;
    }

    .profile-right {
      margin-left: 8px;
    }

    .message-group {
      display: flex;
      flex-direction: column;
      max-width: 75%;
    }

    .chat-bubble-container {
      position: relative;
      display: inline-block;
      padding-top: 28px;
    }

    .chat-bubble {
      padding: 12px 16px;
      border-radius: 22px;
      line-height: 1.5;
      font-size: 16px;
      white-space: pre-wrap;
      word-break: break-word;
      opacity: 0;
      background-color: #007aff;
      color: white;
      border-bottom-right-radius: 4px;
      max-width: 100%;
    }

    .sender {
      background-color: #e5e5ea;
      color: black;
      border-bottom-left-radius: 4px;
    }

    .name-label-right {
      position: absolute;
      top: 0;
      right: 8px;
      font-size: 13px;
      color: black;
      font-weight: 600;
      user-select: none;
      pointer-events: none;
      white-space: nowrap;
    }

    .name-label-left {
      font-size: 13px;
      color: #888;
      margin: 0 10px 2px 10px;
      user-select: none;
    }

    .bubble-cn {
      color: white;
      font-family: inherit;
    }

    .bubble-en {
      color: #fff9c4;
      font-family: Georgia, 'Times New Roman', serif;
      margin-top: 12px;
      display: block;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="chat-wrapper" id="chatBox"></div>

  <script>
    const messages = [
      {
        sender: "jj",
        name: "J.J",
        cnText: "老師：我想要上全民英檢初級寫作影片課程, 請問有教材可以先參考嗎？Thank You ^^",
        enText: "",
        img: "https://ik.imagekit.io/lql1uveoc/%E6%88%AA%E5%9C%96%202025-07-05%20%E5%87%8C%E6%99%A812.13.03.png?updatedAt=1751645606134"
      },
      {
        sender: "tony",
        name: "Tony 線上美語家教",
        cnText: "您好, 歡迎詢問全民英檢『初級』寫作 影片課程。請點選底下連結：https://shorturl.at/UynCB",
        enText: "Thanks.\nBest regards,\nTony",
        img: "https://ik.imagekit.io/lql1uveoc/IMG_09A0004238E3-1.jpeg?updatedAt=1751447767489"
      }
    ];

    const chatBox = document.getElementById("chatBox");
    let messageIndex = 0;

    function typeWriterEffect(targetEl, text, speed, i = 0, callback) {
      if (i < text.length) {
        targetEl.innerHTML += text.charAt(i);
        chatBox.scrollTop = chatBox.scrollHeight;
        setTimeout(() => {
          typeWriterEffect(targetEl, text, speed, i + 1, callback);
        }, speed);
      } else {
        callback();
      }
    }

    function showNextMessage() {
      if (messageIndex >= messages.length) return;

      const msg = messages[messageIndex];
      const isReceiver = msg.sender === "tony";

      const chatLine = document.createElement("div");
      chatLine.className = "chat-line" + (isReceiver ? " right" : "");

      const img = document.createElement("img");
      img.src = msg.img;
      img.alt = msg.name;
      img.className = "profile-pic " + (isReceiver ? "profile-right" : "profile-left");

      const messageGroup = document.createElement("div");
      messageGroup.className = "message-group";

      if (!isReceiver) {
        const nameLeft = document.createElement("div");
        nameLeft.className = "name-label-left";
        nameLeft.textContent = msg.name;
        messageGroup.appendChild(nameLeft);
      }

      const bubbleContainer = document.createElement("div");
      bubbleContainer.className = "chat-bubble-container";

      const bubble = document.createElement("div");
      bubble.className = "chat-bubble " + (isReceiver ? "" : "sender");

      bubbleContainer.appendChild(bubble);

      if (isReceiver) {
        const nameRight = document.createElement("div");
        nameRight.className = "name-label-right";
        nameRight.textContent = msg.name;
        bubbleContainer.appendChild(nameRight);
      }

      messageGroup.appendChild(bubbleContainer);

      if (isReceiver) {
        chatLine.appendChild(messageGroup);
        chatLine.appendChild(img);
      } else {
        chatLine.appendChild(img);
        chatLine.appendChild(messageGroup);
      }

      chatBox.appendChild(chatLine);
      chatBox.scrollTop = chatBox.scrollHeight;
      bubble.style.opacity = 1;

      // Combine typewriter for both parts
      typeWriterEffect(bubble, msg.cnText, 30, 0, () => {
        if (msg.enText) {
          const enSpan = document.createElement("span");
          enSpan.className = "bubble-en";
          bubble.appendChild(document.createElement("br")); // spacing
          bubble.appendChild(enSpan);
          typeWriterEffect(enSpan, msg.enText, 20, 0, () => {
            messageIndex++;
            setTimeout(showNextMessage, 1000);
          });
        } else {
          messageIndex++;
          setTimeout(showNextMessage, 1000);
        }
      });
    }

    showNextMessage();
  </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>iPhone-Style Photo Gallery</title>
  <style>
    body {
      background: #f3f3f3;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .gallery {
      position: relative;
      width: 600px;
      height: 600px;
      perspective: 1000px;
      cursor: pointer;
    }

    .photo {
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      transition: transform 0.6s ease, top 0.6s ease, left 0.6s ease;
      overflow: hidden;
      background-color: #fff;
    }

    .photo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background-color: #f9f9f9;
      border-radius: 16px;
      display: block;
    }

    /* Stacked style: all photos overlap at center with custom rotation */
    .stacked .photo:nth-child(1) { top: 160px; left: 160px; transform: rotate(-10deg); }
    .stacked .photo:nth-child(2) { top: 160px; left: 160px; transform: rotate(8deg); }
    .stacked .photo:nth-child(3) { top: 160px; left: 160px; transform: rotate(-5deg); }
    .stacked .photo:nth-child(4) { top: 160px; left: 160px; transform: rotate(10deg); }
    .stacked .photo:nth-child(5) { top: 160px; left: 160px; transform: rotate(-3deg); }

    /* Spread style: photos arranged around container */
    .spread .photo:nth-child(1) { top: 0; left: 0; transform: rotate(-4deg); }
    .spread .photo:nth-child(2) { top: 0; left: 320px; transform: rotate(4deg); }
    .spread .photo:nth-child(3) { top: 160px; left: 160px; transform: rotate(0deg); }
    .spread .photo:nth-child(4) { top: 320px; left: 0; transform: rotate(-3deg); }
    .spread .photo:nth-child(5) { top: 320px; left: 320px; transform: rotate(3deg); }

    @media (max-width: 768px) {
      .gallery {
        width: 100vw;
        height: 600px;
      }
      .photo {
        width: 40vw;
        height: 40vw;
      }
      .stacked .photo:nth-child(1),
      .stacked .photo:nth-child(2),
      .stacked .photo:nth-child(3),
      .stacked .photo:nth-child(4),
      .stacked .photo:nth-child(5) {
        top: 30vw; left: 30vw; /* stacked center */
      }
      .stacked .photo:nth-child(1) { transform: rotate(-10deg); }
      .stacked .photo:nth-child(2) { transform: rotate(8deg); }
      .stacked .photo:nth-child(3) { transform: rotate(-5deg); }
      .stacked .photo:nth-child(4) { transform: rotate(10deg); }
      .stacked .photo:nth-child(5) { transform: rotate(-3deg); }

      .spread .photo:nth-child(1) { top: 0; left: 5vw; transform: rotate(-4deg); }
      .spread .photo:nth-child(2) { top: 0; left: 55vw; transform: rotate(4deg); }
      .spread .photo:nth-child(3) { top: 30vw; left: 30vw; transform: rotate(0deg); }
      .spread .photo:nth-child(4) { top: 60vw; left: 5vw; transform: rotate(-3deg); }
      .spread .photo:nth-child(5) { top: 60vw; left: 55vw; transform: rotate(3deg); }
    }
  </style>
</head>
<body>
  <div class="gallery stacked" id="photoGallery" title="Click to toggle spread/shuffle">
    <div class="photo"><img src="https://ik.imagekit.io/lql1uveoc/messageImage_1751539166371.jpg?updatedAt=1751539303944" alt="photo1"></div>
    <div class="photo"><img src="https://ik.imagekit.io/lql1uveoc/messageImage_1751539213570.jpg?updatedAt=1751539303903" alt="photo2"></div>
    <div class="photo"><img src="https://ik.imagekit.io/lql1uveoc/messageImage_1751539138906.jpg?updatedAt=1751539303850" alt="photo3"></div>
    <div class="photo"><img src="https://ik.imagekit.io/lql1uveoc/messageImage_1751539106417.jpg?updatedAt=1751539303897" alt="photo4"></div>
    <div class="photo"><img src="https://ik.imagekit.io/lql1uveoc/messageImage_1751539187280.jpg?updatedAt=1751539303861" alt="photo5"></div>
  </div>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const gallery = document.getElementById('photoGallery');
      const photos = Array.from(gallery.children);

      // Positions for spread layout (must match CSS)
      const spreadPositions = [
        { top: '0px', left: '0px', rotate: '-4deg' },
        { top: '0px', left: '320px', rotate: '4deg' },
        { top: '160px', left: '160px', rotate: '0deg' },
        { top: '320px', left: '0px', rotate: '-3deg' },
        { top: '320px', left: '320px', rotate: '3deg' }
      ];

      let currentPositions = [...spreadPositions];

      function applyPositions(positions) {
        photos.forEach((photo, i) => {
          photo.style.top = positions[i].top;
          photo.style.left = positions[i].left;
          photo.style.transform = `rotate(${positions[i].rotate})`;
        });
      }

      // Shuffle positions clockwise
      function rotatePositionsClockwise() {
        currentPositions.unshift(currentPositions.pop());
        applyPositions(currentPositions);
      }

      // Initially stacked - no manual style needed (CSS class controls it)

      // After 1.5 seconds, spread out and start continuous shuffle every 3 seconds
      setTimeout(() => {
        gallery.classList.remove('stacked');
        gallery.classList.add('spread');

        // Apply initial spread positions explicitly to sync JS with CSS
        applyPositions(currentPositions);

        setInterval(() => {
          rotatePositionsClockwise();
        }, 3000);
      }, 1500);

      // Optional: toggle on click between stacked/spread (manual override)
      gallery.addEventListener('click', () => {
        if (gallery.classList.contains('stacked')) {
          gallery.classList.remove('stacked');
          gallery.classList.add('spread');
          applyPositions(currentPositions);
        } else {
          gallery.classList.remove('spread');
          gallery.classList.add('stacked');
          // Clear inline styles for stacked, let CSS handle it
          photos.forEach(photo => {
            photo.style.top = '';
            photo.style.left = '';
            photo.style.transform = '';
          });
        }
      });
    });
  </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>iPhone-Style Photo Gallery</title>
  <style>
    body {
      background: #f3f3f3;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .gallery {
      position: relative;
      width: 600px;
      height: 600px;
      cursor: pointer;
      perspective: 1000px;
    }
    .photo {
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      transition: transform 0.6s ease, top 0.6s ease, left 0.6s ease;
      overflow: hidden;
      background-color: #fff;
    }
    .photo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background-color: #f9f9f9;
      border-radius: 16px;
      display: block;
    }
    .stacked .photo {
      top: 160px;
      left: 160px;
      transform: rotate(var(--rotate));
    }
    .spread .photo:nth-child(1) {
      top: 0;
      left: 0;
      transform: rotate(-4deg);
    }
    .spread .photo:nth-child(2) {
      top: 0;
      left: 320px;
      transform: rotate(4deg);
    }
    .spread .photo:nth-child(3) {
      top: 160px;
      left: 160px;
      transform: rotate(0deg);
    }
    .spread .photo:nth-child(4) {
      top: 320px;
      left: 0;
      transform: rotate(-3deg);
    }
    .spread .photo:nth-child(5) {
      top: 320px;
      left: 320px;
      transform: rotate(3deg);
    }

    @media (max-width: 768px) {
      body {
        align-items: flex-start;
        padding: 20px 0;
      }
      .gallery {
        width: 100vw;
        height: 600px;
      }
      .photo {
        width: 40vw;
        height: 40vw;
      }
      .stacked .photo {
        top: 30vw;
        left: 30vw;
        transform: rotate(var(--rotate));
      }
      .spread .photo:nth-child(1) {
        top: 0;
        left: 5vw;
        transform: rotate(-4deg);
      }
      .spread .photo:nth-child(2) {
        top: 0;
        left: 55vw;
        transform: rotate(4deg);
      }
      .spread .photo:nth-child(3) {
        top: 30vw;
        left: 30vw;
        transform: rotate(0deg);
      }
      .spread .photo:nth-child(4) {
        top: 60vw;
        left: 5vw;
        transform: rotate(-3deg);
      }
      .spread .photo:nth-child(5) {
        top: 60vw;
        left: 55vw;
        transform: rotate(3deg);
      }
    }
  </style>
</head>
<body>
  <div class="gallery stacked" onclick="toggleGallery(this)">
    <div class="photo" style="--rotate: -10deg"><img src="https://ik.imagekit.io/lql1uveoc/messageImage_1751539166371.jpg?updatedAt=1751539303944" alt="photo1"></div>
    <div class="photo" style="--rotate: 8deg"><img src="https://ik.imagekit.io/lql1uveoc/messageImage_1751539213570.jpg?updatedAt=1751539303903" alt="photo2"></div>
    <div class="photo" style="--rotate: -5deg"><img src="https://ik.imagekit.io/lql1uveoc/messageImage_1751539138906.jpg?updatedAt=1751539303850" alt="photo3"></div>
    <div class="photo" style="--rotate: 10deg"><img src="https://ik.imagekit.io/lql1uveoc/messageImage_1751539106417.jpg?updatedAt=1751539303897" alt="photo4"></div>
    <div class="photo" style="--rotate: -3deg"><img src="https://ik.imagekit.io/lql1uveoc/messageImage_1751539187280.jpg?updatedAt=1751539303861" alt="photo5"></div>
  </div>

  <script>
    function toggleGallery(gallery) {
      gallery.classList.toggle('stacked');
      gallery.classList.toggle('spread');
    }
  </script>
</body>
</html>

Text + image

<h2 style="white-space:pre-line">Empowering Language Learners in Taiwan Tony線上美語家教</h2>Tony線上美語家教 is dedicated to providing high-quality virtual English language tutoring to students across Taiwan. Our experienced tutors tailor lessons to meet individual learning goals, ensuring engaging and effective instruction from the comfort of your home. With a focus on personalized education, we equip learners with the skills needed to communicate confidently in English, preparing them for global opportunities.

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <title>iPhone Chat Interface</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body {
      margin: 0;
      background-color: #d2d5da;
      font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    }

    .chat-wrapper {
      max-width: 430px;
      margin: 30px auto;
      padding: 20px;
      background-color: #f2f2f7;
      border-radius: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      height: 600px;
      overflow-y: auto;
    }

    .chat-line {
      display: flex;
      align-items: flex-end;
      margin-bottom: 15px;
    }

    .chat-line.right {
      justify-content: flex-end;
    }

    .profile-pic {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid #ccc;
    }

    .profile-left {
      margin-right: 8px;
    }

    .profile-right {
      margin-left: 8px;
    }

    .message-group {
      display: flex;
      flex-direction: column;
      max-width: 75%;
    }

    .chat-bubble-container {
      position: relative;
      display: inline-block;
      padding-top: 28px; /* 增加間距避免重疊 */
    }

    .chat-bubble {
      padding: 12px 16px;
      border-radius: 22px;
      line-height: 1.5;
      font-size: 16px;
      white-space: pre-wrap;
      word-break: break-word;
      opacity: 0;
      background-color: #007aff;
      color: white;
      border-bottom-right-radius: 4px;
      max-width: 100%;
    }

    .name-label-right {
      position: absolute;
      top: 0;
      right: 8px;
      font-size: 13px;
      color: black;
      font-weight: 600;
      user-select: none;
      pointer-events: none;
      white-space: nowrap;
    }

    .sender {
      background-color: #e5e5ea;
      color: black;
      border-bottom-left-radius: 4px;
    }

    .name-label-left {
      font-size: 13px;
      color: #888;
      margin: 0 10px 2px 10px;
      user-select: none;
    }

    .bubble-cn {
      color: white;
      font-family: inherit;
    }

    .bubble-en {
      color: #fff9c4;
      font-family: Georgia, 'Times New Roman', serif;
      margin-top: 12px;
      display: block;
      line-height: 1.6;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
    }
  </style>
</head>
<body>
  <div class="chat-wrapper" id="chatBox"></div>

  <script>
    const messages = [
      {
        sender: "jay",
        name: "Jay",
        text: "我剛購買中級英檢寫作課程，請問什麼時候可以開始使用？訂單號碼：#YP5ZQ",
        img: "https://ik.imagekit.io/lql1uveoc/%E6%88%AA%E5%9C%96%202025-07-02%20%E4%B8%8B%E5%8D%885.14.01.png?updatedAt=1751447648341"
      },
      {
        sender: "tony",
        name: "Tony 線上美語家教",
        rawText: `您好, 已經收到您的訂單：訂單號碼：#YP5ZQ
『全民英檢中級影片課程』 隨時都可開始，請先填寫學習需求調查表。

Dear Jay, we’ve received your order (#YP5ZQ).
To unlock your access to the GEPT Intermediate Writing Course, you must first complete the mandatory Learning Needs Form.
Best regards,
Tony`,
        formattedText: `<span class="bubble-cn">您好, 已經收到您的訂單：訂單號碼：#YP5ZQ<br>
全民英檢中級影片課程』 隨時都可開始，請先填寫學習需求調查表。</span>

<span class="bubble-en">
We’ve received your order (#YP5ZQ). You can start the GEPT Intermediate Writing Course anytime. Please fill out the Learning Needs Form first.<br><br>
Best regards,<br>
Tony
</span>`,
        img: "https://ik.imagekit.io/lql1uveoc/IMG_09A0004238E3-1.jpeg?updatedAt=1751447767489"
      }
    ];

    const chatBox = document.getElementById("chatBox");
    let messageIndex = 0;

    function typeWriterEffect(targetEl, text, speed, i = 0, callback) {
      if (i < text.length) {
        targetEl.innerHTML += text.charAt(i);
        chatBox.scrollTop = chatBox.scrollHeight;  // 自動滾動到底部
        setTimeout(() => {
          typeWriterEffect(targetEl, text, speed, i + 1, callback);
        }, speed);
      } else {
        callback();
      }
    }

    function showNextMessage() {
      if (messageIndex >= messages.length) return;

      const msg = messages[messageIndex];
      const isReceiver = msg.sender === "tony";

      const chatLine = document.createElement("div");
      chatLine.className = "chat-line" + (isReceiver ? " right" : "");

      const img = document.createElement("img");
      img.src = msg.img;
      img.alt = msg.name;
      img.className = "profile-pic " + (isReceiver ? "profile-right" : "profile-left");

      const messageGroup = document.createElement("div");
      messageGroup.className = "message-group";

      if (!isReceiver) {
        const nameLeft = document.createElement("div");
        nameLeft.className = "name-label-left";
        nameLeft.textContent = msg.name;
        messageGroup.appendChild(nameLeft);
      }

      const bubbleContainer = document.createElement("div");
      bubbleContainer.className = "chat-bubble-container";

      const bubble = document.createElement("div");
      bubble.className = "chat-bubble " + (isReceiver ? "receiver" : "sender");

      bubbleContainer.appendChild(bubble);

      if (isReceiver) {
        const nameRight = document.createElement("div");
        nameRight.className = "name-label-right";
        nameRight.textContent = msg.name;
        bubbleContainer.appendChild(nameRight);
      }

      messageGroup.appendChild(bubbleContainer);

      if (isReceiver) {
        chatLine.appendChild(messageGroup);
        chatLine.appendChild(img);
      } else {
        chatLine.appendChild(img);
        chatLine.appendChild(messageGroup);
      }

      chatBox.appendChild(chatLine);
      chatBox.scrollTop = chatBox.scrollHeight;

      bubble.style.opacity = 1;

      const speed = msg.sender === "jay" ? 36 : 30;

      if (msg.rawText && msg.formattedText) {
        typeWriterEffect(bubble, "", speed, 0, () => {});
        typeWriterEffect(bubble, msg.rawText, speed, 0, () => {
          bubble.innerHTML = msg.formattedText;
          messageIndex++;
          setTimeout(showNextMessage, 1000);
        });
      } else {
        typeWriterEffect(bubble, msg.text, speed, 0, () => {
          messageIndex++;
          setTimeout(showNextMessage, 800);
        });
      }
    }

    showNextMessage();
  </script>
</body>
</html>


全民英檢中級寫作影片課程

購物車 ×

結帳

Empowering Language Learners in Taiwan Tony線上美語家教

購物車