請按以下需求修改:
針對手機展示，兌換劵圖片應該展示於詳情的左方，而非上方
加入搜尋功能允許用戶輸入商店名字作搜尋，加入搜尋建議功能。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8" />
    <title>優惠券列表 - 分組顯示 (修改版)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        body {
            font-family: Arial, "微軟正黑體", sans-serif;
            margin: 0; padding: 20px; background: #f5f5f5;
            max-width: 960px; margin-left: auto; margin-right: auto;
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
        }

        /* 大分類區塊 */
        .redeemlist-category {
            background: white;
            margin-bottom: 25px;
            border-radius: 8px;
            box-shadow: 0 0 7px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .redeemlist-category-header {
            background: #007bff;
            color: white;
            padding: 12px 20px;
            font-size: 20px;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .redeemlist-category-header span {
            font-weight: bold;
        }
        .redeemlist-category-header .toggle-icon {
            font-weight: bold;
            font-size: 20px;
            line-height: 1;
            user-select: none;
            transition: transform 0.3s ease;
        }
        .redeemlist-category.collapsed .redeemlist-category-header .toggle-icon {
            transform: rotate(-90deg);
        }

        /* 賣家群組 */
        .redeemlist-seller-group {
            padding: 10px 20px 20px 20px;
            border-top: 1px solid #ddd;
        }
        .redeemlist-seller-name {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 12px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 6px;
            color: #333;
            display: flex;
            align-items: center;
        }
        .redeemlist-seller-logo {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            object-fit: contain;
            margin-right: 12px;
            border: 1px solid #ddd;
            background: white;
            flex-shrink: 0;
        }

        /* 單筆兌換券列表樣式 */
        .redeemlist-item {
            display: flex;
            align-items: center;
            background: #fff;
            box-shadow: 0 0 3px rgba(0,0,0,0.05);
            margin-bottom: 15px;
            border-radius: 6px;
            padding: 10px 15px;
            max-height: 100px;
        }
        /* 兌換券圖片 */
        .redeemlist-coupon-img {
            width: 90px;
            height: 90px;
            border-radius: 6px;
            object-fit: cover;
            margin-right: 15px;
            flex-shrink: 0;
            border: 1px solid #ddd;
            background: #fafafa;
        }

        /* 文字內容（中間區塊） */
        .redeemlist-text-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0; /* 避免寬度溢出 */
        }
        .redeemlist-name {
            font-weight: 600;
            font-size: 17px;
            color: #222;
            margin-bottom: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .redeemlist-desc {
            color: #555;
            font-size: 14px;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 2px;
        }

        /* 右側狀態或按鈕區 */
        .redeemlist-status-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 120px;
            padding-left: 15px;
            border-left: 2px solid #ddd;
        }
        .redeemlist-remaining {
            font-size: 13px;
            color: #888;
            margin-bottom: 6px;
        }
        .redeemlist-btn-use {
            background: #007bff;
            border: none;
            color: white;
            padding: 8px 15px;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.25s ease;
        }
        .redeemlist-btn-use:hover {
            background: #0056b3;
        }
        .redeemlist-status-text {
            font-weight: bold;
            font-size: 15px;
            color: #c00;
            white-space: nowrap;
        }


        /* 手機響應，改縱向排列 */
        @media screen and (max-width: 600px) {
            .redeemlist-item {
                flex-direction: column;
                max-height: none;
                height:auto;
                padding: 12px 10px;
            }
            .redeemlist-coupon-img {
                width: 100%;
                height: auto;
                margin-bottom: 10px;
            }
            .redeemlist-text-content {
                margin-bottom: 10px;
            }
            .redeemlist-status-area {
                border-left: none;
                border-top: 2px solid #ddd;
                padding-left: 0;
                padding-top: 10px;
                min-width: auto;
                width: 100%;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
            .redeemlist-remaining {
                margin-bottom: 0;
            }
            .redeemlist-btn-use {
                width: auto;
                padding: 8px 18px;
                white-space: nowrap;
            }
        }
    </style>
</head>
<body>
    <h1>我的優惠券列表</h1>

    <!-- 可使用 -->
    <section class="redeemlist-category" id="redeemlist-category-available">
        <div class="redeemlist-category-header" onclick="toggleCategory('redeemlist-category-available')">
            <span>可使用的優惠券</span>
            <span class="toggle-icon">▼</span>
        </div>
        <div class="redeemlist-category-content">
            <!-- 賣家A -->
            <div class="redeemlist-seller-group">
                <div class="redeemlist-seller-name">
                    <img class="redeemlist-seller-logo" src="https://via.placeholder.com/40x40?text=冰淇淋" alt="幸福冰淇淋店 Logo" />
                    幸福冰淇淋店
                </div>

                <div class="redeemlist-item">
                    <img class="redeemlist-coupon-img" src="https://via.placeholder.com/90?text=冰淇淋券" alt="冰淇淋券圖片" />
                    <div class="redeemlist-text-content">
                        <div class="redeemlist-name">夏季限定冰淇淋折扣</div>
                        <div class="redeemlist-desc">使用期限：2024-07-31</div>
                    </div>
                    <div class="redeemlist-status-area">
                        <div class="redeemlist-remaining">剩餘次數：3 次</div>
                        <button class="redeemlist-btn-use" onclick="alert('開始使用此優惠券')">使用</button>
                    </div>
                </div>

                <div class="redeemlist-item">
                    <img class="redeemlist-coupon-img" src="https://via.placeholder.com/90?text=新口味券" alt="新口味券圖片" />
                    <div class="redeemlist-text-content">
                        <div class="redeemlist-name">冰淇淋新品體驗券</div>
                        <div class="redeemlist-desc">使用期限：2024-08-15</div>
                    </div>
                    <div class="redeemlist-status-area">
                        <div class="redeemlist-remaining">剩餘次數：1 次</div>
                        <button class="redeemlist-btn-use" onclick="alert('開始使用此優惠券')">使用</button>
                    </div>
                </div>
            </div>

            <!-- 賣家B -->
            <div class="redeemlist-seller-group">
                <div class="redeemlist-seller-name">
                    <img class="redeemlist-seller-logo" src="https://via.placeholder.com/40x40?text=咖啡館" alt="城市咖啡館 Logo" />
                    城市咖啡館
                </div>

                <div class="redeemlist-item">
                    <img class="redeemlist-coupon-img" src="https://via.placeholder.com/90?text=咖啡券" alt="咖啡券圖片" />
                    <div class="redeemlist-text-content">
                        <div class="redeemlist-name">無限次咖啡兌換券</div>
                        <div class="redeemlist-desc">使用期限：2024-12-31</div>
                    </div>
                    <div class="redeemlist-status-area">
                        <div class="redeemlist-remaining">剩餘次數：無限</div>
                        <button class="redeemlist-btn-use" onclick="alert('開始使用此優惠券')">使用</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 已使用 -->
    <section class="redeemlist-category redeemlist-collapsed" id="redeemlist-category-used">
        <div class="redeemlist-category-header" onclick="toggleCategory('redeemlist-category-used')">
            <span>已使用的優惠券</span>
            <span class="toggle-icon">▼</span>
        </div>
        <div class="redeemlist-category-content" style="display:none;">
            <div class="redeemlist-seller-group">
                <div class="redeemlist-seller-name">
                    <img class="redeemlist-seller-logo" src="https://via.placeholder.com/40x40?text=冰淇淋" alt="幸福冰淇淋店 Logo" />
                    幸福冰淇淋店
                </div>

                <div class="redeemlist-item">
                    <img class="redeemlist-coupon-img" src="https://via.placeholder.com/90?text=冰淇淋券" alt="冰淇淋券圖片" />
                    <div class="redeemlist-text-content">
                        <div class="redeemlist-name">冬季優惠冰淇淋折扣</div>
                        <div class="redeemlist-desc">使用日期：2024-05-01</div>
                    </div>
                    <div class="redeemlist-status-area">
                        <div class="redeemlist-status-text">已使用</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 已過期 -->
    <section class="redeemlist-category redeemlist-collapsed" id="redeemlist-category-expired">
        <div class="redeemlist-category-header" onclick="toggleCategory('redeemlist-category-expired')">
            <span>已過期的優惠券</span>
            <span class="toggle-icon">▼</span>
        </div>
        <div class="redeemlist-category-content" style="display:none;">
            <div class="redeemlist-seller-group">
                <div class="redeemlist-seller-name">
                    <img class="redeemlist-seller-logo" src="https://via.placeholder.com/40x40?text=商城" alt="超值購物商城 Logo" />
                    超值購物商城
                </div>

                <div class="redeemlist-item">
                    <img class="redeemlist-coupon-img" src="https://via.placeholder.com/90?text=折扣券" alt="折扣券圖片" />
                    <div class="redeemlist-text-content">
                        <div class="redeemlist-name">購物折扣100元</div>
                        <div class="redeemlist-desc">使用期限：2023-12-31</div>
                    </div>
                    <div class="redeemlist-status-area">
                        <div class="redeemlist-status-text">已過期</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<script>
    // 切換分類區塊收展
    function toggleCategory(id) {
        const category = document.getElementById(id);
        if (!category) return;

        const content = category.querySelector('.redeemlist-category-content');
        const icon = category.querySelector('.toggle-icon');
        if (content.style.display === "none" || content.style.display === "") {
            content.style.display = "block";
            category.classList.remove('redeemlist-collapsed');
            icon.style.transform = 'rotate(0deg)';
        } else {
            content.style.display = "none";
            category.classList.add('redeemlist-collapsed');
            icon.style.transform = 'rotate(-90deg)';
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        const availableSection = document.getElementById('redeemlist-category-available');
        if (availableSection) {
            const content = availableSection.querySelector('.redeemlist-category-content');
            const icon = availableSection.querySelector('.toggle-icon');
            content.style.display = 'block';
            icon.style.transform = 'rotate(0deg)';
            availableSection.classList.remove('redeemlist-collapsed');
        }
    });
</script>

</body>
</html>

並將以上使用優惠劵的功能與以下HTML連接:
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8" />
    <title>優惠碼使用頁面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        body {
            font-family: "微軟正黑體", Arial, sans-serif;
            padding: 20px;
            background: #fff;
            max-width: 700px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            margin-bottom: 15px;
        }
        .redeempage-detail {
            border: 1px solid #ddd;
            padding: 20px 25px;
            border-radius: 10px;
            box-sizing: border-box;
        }
        .redeempage-info-group {
            display: flex;
            align-items: center;
            margin-bottom: 18px;
        }
        .redeempage-seller-logo {
            width: 80px;
            height: 80px;
            object-fit: contain;
            border: 1px solid #ddd;
            border-radius: 6px;
            background: white;
            margin-right: 15px;
            flex-shrink: 0;
        }
        .redeempage-text-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: 1.4;
            overflow-wrap: break-word;
        }
        .redeempage-text-row {
            display: flex;
            align-items: center;
            margin-bottom: 6px;
        }
        .redeempage-text-label {
            font-weight: bold;
            width: 100px;
            flex-shrink: 0;
        }
        .redeempage-text-value {
            word-break: break-word;
        }
        #redeempage-qrcode {
            margin: 20px auto 15px;
            width: 200px;
            height: 200px;
            display: block;
        }
        .redeempage-checkcode-text {
            font-size: 24px;
            letter-spacing: 4px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
            user-select: all;
            word-break: break-word;
        }
        .redeempage-countdown {
            font-size: 18px;
            text-align: center;
            color: #c00;
            font-weight: bold;
        }

        @media screen and (max-width: 767px) {
            body {
                padding: 15px 10px;
                max-width: 100%;
            }
            .redeempage-detail {
                padding: 15px;
                border-radius: 6px;
            }
            .redeempage-info-group {
                flex-direction: row;
                margin-bottom: 15px;
            }
            .redeempage-seller-logo {
                width: 65px;
                height: 65px;
                margin-right: 12px;
            }
            .redeempage-text-label {
                width: 90px;
                font-size: 14px;
            }
            .redeempage-text-value {
                font-size: 14px;
            }
            .redeempage-checkcode-text {
                font-size: 20px;
                margin-bottom: 12px;
            }
            .redeempage-countdown {
                font-size: 16px;
            }
            #redeempage-qrcode {
                width: 160px;
                height: 160px;
                margin-bottom: 12px;
            }
        }

        @media screen and (max-width: 480px) {
            .redeempage-info-group {
                flex-direction: row;
                margin-bottom: 12px;
            }
            .redeempage-seller-logo {
                width: 55px;
                height: 55px;
                margin-right: 10px;
            }
            .redeempage-text-label {
                width: 80px;
                font-size: 13px;
            }
            .redeempage-text-value {
                font-size: 13px;
            }
            .redeempage-checkcode-text {
                font-size: 18px;
                margin-bottom: 10px;
                letter-spacing: 3px;
            }
            .redeempage-countdown {
                font-size: 14px;
            }
            #redeempage-qrcode {
                width: 130px;
                height: 130px;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <h1>優惠碼詳情</h1>
    <div class="redeempage-detail">

        <div class="redeempage-info-group">
            <img class="redeempage-seller-logo" src="https://picsum.photos/80" alt="賣家 Logo" />
            <div class="redeempage-text-content">
                <div class="redeempage-text-row">
                    <div class="redeempage-text-label">商品名稱：</div>
                    <div class="redeempage-text-value" id="redeempage-prodName">夏季限定冰淇淋折扣</div>
                </div>
                <div class="redeempage-text-row">
                    <div class="redeempage-text-label">賣家名稱：</div>
                    <div class="redeempage-text-value" id="redeempage-sellerName">幸福冰淇淋店</div>
                </div>
            </div>
        </div>

        <canvas id="redeempage-qrcode"></canvas>
        <div class="redeempage-checkcode-text" id="redeempage-checkcodeText">AB12-CD34-EF56-78GH</div>
        <div class="redeempage-countdown">有效期限剩餘：<span id="redeempage-timer">15:00</span></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
    <script>
        const checkcode = 'AB12-CD34-EF56-78GH';
        const expireSeconds = 15 * 60;
        let remainingSeconds = expireSeconds;

        const qrcodeContainer = document.getElementById('redeempage-qrcode');
        QRCode.toCanvas(qrcodeContainer, checkcode, { width: 200, margin: 2 }, function (error) {
            if (error) console.error(error);
        });

        const timerElem = document.getElementById('redeempage-timer');
        function updateTimer() {
            if (remainingSeconds <= 0) {
                timerElem.textContent = '已過期';
                clearInterval(timerInterval);
                alert('優惠碼已過期，請重新產生。');
                return;
            }
            const min = Math.floor(remainingSeconds / 60).toString().padStart(2, '0');
            const sec = (remainingSeconds % 60).toString().padStart(2, '0');
            timerElem.textContent = `${min}:${sec}`;
            remainingSeconds--;
        }
        updateTimer();
        const timerInterval = setInterval(updateTimer, 1000);
    </script>
</body>
</html>