编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>生鲜优选</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root { --primary: #07c160; --bg-gray: #f5f5f5; --text-dark: #333; --text-light: #999; --border: #eee; --white: #fff; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", Arial, sans-serif; background: var(--bg-gray); max-width: 430px; margin: 0 auto; color: var(--text-dark); }
        
        /* 顶部导航 */
        .header { background: var(--primary); color: white; padding: 15px; text-align: center; position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
        .header h1 { font-size: 18px; font-weight: 600; flex: 1; }
        .back-btn { width: 30px; font-size: 20px; cursor: pointer; }
        
        /* 定位栏 */
        .location-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; background: var(--white); font-size: 14px; cursor: pointer; }
        .location-bar .location { display: flex; align-items: center; gap: 5px; }
        
        /* 搜索框 */
        .search-bar { padding: 10px 15px; background: var(--white); cursor: pointer; }
        .search-input { width: 100%; padding: 10px 15px; border: none; border-radius: 20px; background: var(--bg-gray); font-size: 14px; outline: none; }
        
        /* Banner */
        .banner { background: linear-gradient(135deg, var(--primary), #5cb85c); color: white; padding: 20px; text-align: center; margin: 10px 15px; border-radius: 12px; cursor: pointer; }
        .banner h2 { font-size: 20px; margin-bottom: 8px; }
        .banner p { font-size: 13px; opacity: 0.9; }
        
        /* 分类导航 */
        .category-nav { display: flex; justify-content: space-around; padding: 20px 10px; background: var(--white); margin: 10px 0; }
        .category-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
        .category-icon { width: 50px; height: 50px; background: var(--bg-gray); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .category-icon img { width: 100%; height: 100%; object-fit: cover; }
        .category-item span { font-size: 13px; color: var(--text-dark); }
        
        /* 区块标题 */
        .section-title { display: flex; justify-content: space-between; align-items: center; padding: 15px; font-size: 16px; font-weight: 600; cursor: pointer; }
        .section-title a { font-size: 13px; color: var(--text-light); text-decoration: none; }
        
        /* 商品列表 */
        .product-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 15px 80px; }
        .product-card { background: var(--white); border-radius: 12px; overflow: hidden; cursor: pointer; }
        .product-img { width: 100%; height: 140px; background: linear-gradient(135deg, #e8f5e9, #c8e6c9); overflow: hidden; display: flex; align-items: center; justify-content: center; }
        .product-img img { width: 100%; height: 100%; object-fit: cover; }
        .product-info { padding: 12px; }
        .product-name { font-size: 14px; color: var(--text-dark); margin-bottom: 8px; line-height: 1.4; }
        .product-tags { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
        .tag { font-size: 10px; padding: 2px 6px; background: #fff3e0; color: #ff9800; border-radius: 4px; }
        .product-bottom { display: flex; justify-content: space-between; align-items: center; }
        .product-price { color: #ff4d4f; font-size: 16px; font-weight: 600; }
        .product-price small { font-size: 12px; }
        .add-btn { width: 28px; height: 28px; background: var(--primary); border-radius: 50%; color: white; border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        
        /* 底部导航 */
        .tab-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--white); display: flex; justify-content: space-around; padding: 8px 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 100; }
        .tab-item { display: flex; flex-direction: column; align-items: center; font-size: 13px; color: var(--text-light); cursor: pointer; padding: 5px 20px; position: relative; }
        .tab-item.active { color: var(--primary); font-weight: 500; }
        .tab-item .badge { position: absolute; top: -2px; right: 12px; background: #ff4d4f; color: white; font-size: 10px; padding: 1px 5px; border-radius: 10px; min-width: 16px; text-align: center; }
        
        /* 页面切换 */
        .page { display: none; padding-bottom: 70px; }
        .page.active { display: block; }
        
        /* 用户中心 */
        .user-header { background: linear-gradient(135deg, var(--primary), #5cb85c); padding: 30px 20px; color: white; }
        .user-info { display: flex; align-items: center; gap: 15px; }
        .avatar { width: 60px; height: 60px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 30px; }
        .avatar img { width: 100%; height: 100%; object-fit: cover; }
        .user-details h3 { font-size: 18px; margin-bottom: 5px; }
        .user-details p { font-size: 12px; opacity: 0.8; }
        .user-stats { display: flex; justify-content: space-around; margin-top: 20px; text-align: center; }
        .stat-item { display: flex; flex-direction: column; cursor: pointer; }
        .stat-item .num { font-size: 18px; font-weight: 600; }
        .stat-item .label { font-size: 12px; opacity: 0.8; margin-top: 4px; }
        
        /* 订单入口 */
        .order-section { background: var(--white); padding: 15px; margin: 10px; border-radius: 12px; }
        .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 14px; cursor: pointer; }
        .order-header a { color: var(--text-light); text-decoration: none; }
        .order-tabs { display: flex; justify-content: space-around; }
        .order-tab { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dark); position: relative; cursor: pointer; }
        .order-tab .icon { width: 40px; height: 40px; background: var(--bg-gray); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .order-tab .count { position: absolute; top: -5px; right: 5px; background: #ff4d4f; color: white; font-size: 10px; padding: 1px 5px; border-radius: 10px; }
        
        /* 功能菜单 */
        .menu-section { background: var(--white); margin: 10px; border-radius: 12px; overflow: hidden; }
        .menu-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid var(--border); cursor: pointer; }
        .menu-item:last-child { border-bottom: none; }
        .menu-text { flex: 1; font-size: 14px; }
        .menu-arrow { color: var(--text-light); font-size: 14px; }
        
        /* 分类页 */
        .category-layout { display: flex; height: calc(100vh - 60px - 50px); }
        .category-sidebar { width: 80px; background: var(--bg-gray); overflow-y: auto; flex-shrink: 0; }
        .category-sidebar-item { padding: 15px 10px; text-align: center; font-size: 13px; color: var(--text-dark); cursor: pointer; border-bottom: 1px solid var(--border); transition: all 0.2s; }
        .category-sidebar-item.active { background: var(--white); color: var(--primary); font-weight: 600; border-left: 3px solid var(--primary); }
        .category-content { flex: 1; overflow-y: auto; padding: 10px; background: var(--white); }
        .category-title { font-size: 14px; font-weight: 600; padding: 10px 0; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
        .category-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding-bottom: 20px; }
        
        /* 购物车 */
        .cart-list { padding: 15px; }
        .cart-item { display: flex; background: var(--white); border-radius: 12px; padding: 15px; margin-bottom: 10px; align-items: center; }
        .cart-item .check { width: 22px; height: 22px; border: 2px solid #ddd; border-radius: 50%; margin-right: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
        .cart-item .check.active { background: var(--primary); border-color: var(--primary); }
        .cart-item .check.active::after { content: '✓'; color: white; font-size: 12px; }
        .cart-item .product-img { width: 70px; height: 70px; border-radius: 8px; overflow: hidden; margin-right: 12px; flex-shrink: 0; background: linear-gradient(135deg, #e8f5e9, #c8e6c9); display: flex; align-items: center; justify-content: center; }
        .cart-item .product-img img { width: 100%; height: 100%; object-fit: cover; }
        .cart-item .info { flex: 1; min-width: 0; }
        .cart-item .name { font-size: 14px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .cart-item .price { color: #ff4d4f; font-size: 16px; font-weight: 600; }
        .cart-item .num-control { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
        .cart-item .num-control button { width: 24px; height: 24px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .cart-item .num-control span { min-width: 20px; text-align: center; font-size: 14px; }
        .cart-footer { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--white); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 99; }
        .cart-footer .total-info { display: flex; flex-direction: column; }
        .cart-footer .total-price { color: #ff4d4f; font-size: 18px; font-weight: 600; }
        .cart-footer .total-desc { font-size: 12px; color: var(--text-light); }
        .checkout-btn { background: var(--primary); color: white; padding: 10px 30px; border-radius: 20px; border: none; font-size: 14px; cursor: pointer; }
        .empty-cart { text-align: center; padding: 60px 20px; background: var(--white); margin: 10px; border-radius: 12px; }
        .empty-cart .icon { font-size: 60px; margin-bottom: 20px; }
        .empty-cart h3 { font-size: 16px; margin-bottom: 10px; }
        .empty-cart p { color: var(--text-light); font-size: 14px; }
        .shop-btn { display: inline-block; margin-top: 20px; padding: 10px 30px; background: var(--primary); color: white; border-radius: 20px; font-size: 14px; cursor: pointer; }
        
        /* Toast */
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: white; padding: 15px 30px; border-radius: 8px; font-size: 14px; z-index: 1001; display: none; }
        .toast.show { display: block; animation: fadeIn 0.3s; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        
        /* 商品详情页 */
        .detail-header { position: relative; }
        .detail-img { width: 100%; height: 300px; background: linear-gradient(135deg, #e8f5e9, #c8e6c9); display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .detail-img img { width: 100%; height: 100%; object-fit: cover; }
        .detail-back { position: absolute; top: 15px; left: 15px; width: 36px; height: 36px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; }
        .detail-content { padding: 20px; background: var(--white); margin: 10px; border-radius: 12px; }
        .detail-name { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
        .detail-desc { font-size: 14px; color: var(--text-light); margin-bottom: 15px; line-height: 1.5; }
        .detail-price { color: #ff4d4f; font-size: 24px; font-weight: 600; margin-bottom: 20px; }
        .detail-price small { font-size: 14px; }
        .detail-info-row { display: flex; padding: 10px 0; border-bottom: 1px solid var(--border); }
        .detail-info-row:last-child { border-bottom: none; }
        .detail-info-label { width: 80px; color: var(--text-light); font-size: 13px; }
        .detail-info-value { flex: 1; font-size: 13px; }
        .detail-footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--white); padding: 10px 15px; display: flex; gap: 10px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 99; }
        .detail-footer button { flex: 1; padding: 12px; border-radius: 25px; border: none; font-size: 15px; cursor: pointer; }
        .detail-footer .add-cart { background: #ff9800; color: white; }
        .detail-footer .buy-now { background: var(--primary); color: white; }
        
        /* 订单列表页 */
        .order-list { padding: 15px; }
        .order-card { background: var(--white); border-radius: 12px; padding: 15px; margin-bottom: 10px; }
        .order-card-header { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
        .order-card-header .order-id { font-size: 12px; color: var(--text-light); }
        .order-card-header .order-status { font-size: 13px; color: var(--primary); }
        .order-card-products { display: flex; gap: 10px; margin-bottom: 10px; }
        .order-product-item { width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #e8f5e9, #c8e6c9); display: flex; align-items: center; justify-content: center; }
        .order-product-item img { width: 100%; height: 100%; object-fit: cover; }
        .order-card-footer { display: flex; justify-content: space-between; align-items: center; }
        .order-card-total { font-size: 14px; }
        .order-card-total span { color: #ff4d4f; font-weight: 600; }
        .order-action-btn { padding: 6px 16px; border: 1px solid var(--primary); color: var(--primary); border-radius: 15px; font-size: 12px; cursor: pointer; background: white; }
        
        /* 地址页 */
        .address-list { padding: 15px; }
        .address-card { background: var(--white); border-radius: 12px; padding: 15px; margin-bottom: 10px; cursor: pointer; }
        .address-card-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
        .address-card-header .name { font-size: 16px; font-weight: 600; }
        .address-card-header .phone { font-size: 14px; color: var(--text-dark); }
        .address-card-header .default-tag { background: var(--primary); color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 10px; }
        .address-card-content { font-size: 14px; color: var(--text-light); margin-bottom: 10px; }
        .address-card-footer { display: flex; justify-content: flex-end; gap: 15px; }
        .address-card-footer span { font-size: 13px; color: var(--text-light); cursor: pointer; }
        
        /* 确认订单页 */
        .confirm-section { background: var(--white); margin: 10px; border-radius: 12px; overflow: hidden; }
        .confirm-address { display: flex; align-items: center; padding: 15px; cursor: pointer; }
        .confirm-address .icon { width: 40px; height: 40px; background: var(--bg-gray); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 18px; }
        .confirm-address .info { flex: 1; }
        .confirm-address .name { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
        .confirm-address .detail { font-size: 13px; color: var(--text-light); }
        .confirm-address .arrow { color: var(--text-light); }
        .confirm-products { padding: 15px; }
        .confirm-product { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
        .confirm-product:last-child { border-bottom: none; }
        .confirm-product-img { width: 60px; height: 60px; border-radius: 8px; overflow: hidden; margin-right: 12px; background: linear-gradient(135deg, #e8f5e9, #c8e6c9); display: flex; align-items: center; justify-content: center; }
        .confirm-product-img img { width: 100%; height: 100%; object-fit: cover; }
        .confirm-product-info { flex: 1; }
        .confirm-product-name { font-size: 14px; margin-bottom: 5px; }
        .confirm-product-price { font-size: 14px; color: #ff4d4f; }
        .confirm-product-num { font-size: 12px; color: var(--text-light); margin-left: 10px; }
        .confirm-footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--white); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 99; }
        .confirm-footer .total { font-size: 14px; }
        .confirm-footer .total span { color: #ff4d4f; font-size: 20px; font-weight: 600; }
        .confirm-footer .submit-btn { background: var(--primary); color: white; padding: 12px 30px; border-radius: 25px; border: none; font-size: 15px; cursor: pointer; }
        
        /* 钱包页 */
        .wallet-balance { background: linear-gradient(135deg, var(--primary), #5cb85c); color: white; padding: 30px 20px; text-align: center; }
        .wallet-balance .label { font-size: 14px; opacity: 0.8; margin-bottom: 10px; }
        .wallet-balance .amount { font-size: 36px; font-weight: 600; }
        .wallet-balance .amount small { font-size: 18px; }
        .wallet-card { background: var(--white); margin: 10px; border-radius: 12px; padding: 20px; }
        .wallet-card-title { font-size: 14px; font-weight: 600; margin-bottom: 15px; }
        .wallet-card-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
        .wallet-card-item:last-child { border-bottom: none; }
        .wallet-card-item .label { font-size: 14px; }
        .wallet-card-item .value { font-size: 14px; color: var(--text-light); }
    </style>
</head>
<body>
    <!-- 首页 -->
    <div class="page active" id="page-home">
        <div class="header"><h1>生鲜优选</h1></div>
        <div class="location-bar" onclick="goPage('addressList')">
            <div class="location">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#07c160"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
                <span>上海市浦东新区</span>
            </div>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="#999"><path d="M7 10l5 5 5-5z"/></svg>
        </div>
        <div class="search-bar" onclick="goPage('search')">
            <div class="search-input">搜索商品...</div>
        </div>
        <div class="banner" onclick="switchTab('category')">
            <h2>新鲜直供 品质保障</h2>
            <p>精选优质生鲜 冷链配送到家</p>
        </div>
        <div class="category-nav">
            <div class="category-item" onclick="goCategory('水果')"><div class="category-icon"><img src="https://images.unsplash.com/photo-1464965911861-746a04b4bca6?w=100&h=100&fit=crop" alt="水果"></div><span>时令水果</span></div>
            <div class="category-item" onclick="goCategory('蔬菜')"><div class="category-icon"><img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?w=100&h=100&fit=crop" alt="蔬菜"></div><span>新鲜蔬菜</span></div>
            <div class="category-item" onclick="goCategory('肉禽')"><div class="category-icon"><img src="https://images.unsplash.com/photo-1607623814075-e51df1bdc82f?w=100&h=100&fit=crop" alt="肉禽"></div><span>肉禽蛋</span></div>
            <div class="category-item" onclick="goCategory('水产')"><div class="category-icon"><img src="https://images.unsplash.com/photo-1534740807137-808163f31415?w=100&h=100&fit=crop" alt="水产"></div><span>鲜活水产</span></div>
            <div class="category-item" onclick="goCategory('奶品')"><div class="category-icon"><img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?w=100&h=100&fit=crop" alt="奶品"></div><span>奶品面食</span></div>
        </div>
        <div class="section-title" onclick="switchTab('category')"><span>今日推荐</span><a>查看更多 ></a></div>
        <div class="product-list" id="homeProductList"></div>
    </div>
    
    <!-- 分类页 -->
    <div class="page" id="page-category">
        <div class="header"><span class="back-btn" onclick="switchTab('home')">←</span><h1>商品分类</h1></div>
        <div class="category-layout">
            <div class="category-sidebar" id="categorySidebar"></div>
            <div class="category-content" id="categoryContent"></div>
        </div>
    </div>
    
    <!-- 购物车页 -->
    <div class="page" id="page-cart">
        <div class="header"><span class="back-btn" onclick="switchTab('home')">←</span><h1>购物车</h1></div>
        <div class="cart-list" id="cartList"></div>
        <div class="cart-footer" id="cartFooter" style="display:none;">
            <div class="total-info"><span class="total-price" id="totalPrice">¥0</span><span class="total-desc" id="totalDesc">共0件</span></div>
            <button class="checkout-btn" onclick="goConfirmOrder()">去结算</button>
        </div>
    </div>
    
    <!-- 我的页 -->
    <div class="page" id="page-user">
        <div class="header"><h1>我的</h1></div>
        <div class="user-header">
            <div class="user-info">
                <div class="avatar"><img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" alt="头像"></div>
                <div class="user-details"><h3>张三</h3><p>ID: 88888888</p></div>
            </div>
            <div class="user-stats">
                <div class="stat-item" onclick="showToast('收藏功能开发中')"><span class="num">128</span><span class="label">收藏</span></div>
                <div class="stat-item" onclick="showToast('关注功能开发中')"><span class="num">56</span><span class="label">关注</span></div>
                <div class="stat-item" onclick="goPage('history')"><span class="num">3</span><span class="label">足迹</span></div>
            </div>
        </div>
        <div class="order-section">
            <div class="order-header" onclick="goPage('orderList')"><span>我的订单</span><a>查看全部 ></a></div>
            <div class="order-tabs">
                <div class="order-tab" onclick="goPage('orderList')"><div class="icon">⏰</div><span>待付款</span><span class="count">2</span></div>
                <div class="order-tab" onclick="goPage('orderList')"><div class="icon">📦</div><span>待发货</span><span class="count">1</span></div>
                <div class="order-tab" onclick="goPage('orderList')"><div class="icon">🚚</div><span>待收货</span><span class="count">3</span></div>
                <div class="order-tab" onclick="goPage('orderList')"><div class="icon">⭐</div><span>待评价</span></div>
            </div>
        </div>
        <div class="menu-section">
            <div class="menu-item" onclick="goPage('addressList')"><span class="menu-text">收货地址</span><span class="menu-arrow">></span></div>
            <div class="menu-item" onclick="goPage('wallet')"><span class="menu-text">我的钱包</span><span class="menu-arrow">></span></div>
            <div class="menu-item" onclick="showToast('收藏功能开发中')"><span class="menu-text">我的收藏</span><span class="menu-arrow">></span></div>
            <div class="menu-item" onclick="goPage('history')"><span class="menu-text">浏览历史</span><span class="menu-arrow">></span></div>
            <div class="menu-item" onclick="goPage('help')"><span class="menu-text">帮助中心</span><span class="menu-arrow">></span></div>
            <div class="menu-item" onclick="goPage('about')"><span class="menu-text">关于我们</span><span class="menu-arrow">></span></div>
            <div class="menu-item" onclick="goPage('settings')"><span class="menu-text">设置</span><span class="menu-arrow">></span></div>
        </div>
    </div>
    
    <!-- 商品详情页 -->
    <div class="page" id="page-detail">
        <div class="detail-header">
            <div class="detail-img" id="detailImg"></div>
            <span class="detail-back" onclick="goBack()">←</span>
        </div>
        <div class="detail-content">
            <div class="detail-name" id="detailName">商品名称</div>
            <div class="detail-desc" id="detailDesc">商品描述内容</div>
            <div class="detail-price" id="detailPrice"><small>¥</small>0</div>
            <div class="detail-info-row"><span class="detail-info-label">配送</span><span class="detail-info-value">冷链配送，预计30分钟内送达</span></div>
            <div class="detail-info-row"><span class="detail-info-label">承诺</span><span class="detail-info-value">7天无理由退换</span></div>
        </div>
        <div class="detail-footer">
            <button class="add-cart" onclick="addToCartFromDetail()">加入购物车</button>
            <button class="buy-now" onclick="buyNowFromDetail()">立即购买</button>
        </div>
    </div>
    
    <!-- 订单列表页 -->
    <div class="page" id="page-orderList">
        <div class="header"><span class="back-btn" onclick="goBack()">←</span><h1>我的订单</h1></div>
        <div class="order-list" id="orderList"></div>
    </div>
    
    <!-- 地址列表页 -->
    <div class="page" id="page-addressList">
        <div class="header"><span class="back-btn" onclick="goBack()">←</span><h1>收货地址</h1></div>
        <div class="address-list" id="addressList"></div>
    </div>
    
    <!-- 确认订单页 -->
    <div class="page" id="page-confirmOrder">
        <div class="header"><span class="back-btn" onclick="goBack()">←</span><h1>确认订单</h1></div>
        <div class="confirm-section">
            <div class="confirm-address" onclick="goPage('addressList')">
                <div class="icon">📍</div>
                <div class="info"><div class="name">张三 <span style="font-weight:normal;font-size:14px;">138****8888</span></div><div class="detail">上海市浦东新区陆家嘴街道</div></div>
                <span class="arrow">></span>
            </div>
        </div>
        <div class="confirm-section">
            <div class="confirm-products" id="confirmProducts"></div>
        </div>
        <div class="confirm-footer">
            <div class="total">合计: <span id="confirmTotal">¥0</span></div>
            <button class="submit-btn" onclick="submitOrder()">提交订单</button>
        </div>
    </div>
    
    <!-- 钱包页 -->
    <div class="page" id="page-wallet">
        <div class="header"><span class="back-btn" onclick="goBack()">←</span><h1>我的钱包</h1></div>
        <div class="wallet-balance">
            <div class="label">账户余额</div>
            <div class="amount"><small>¥</small>1,280.00</div>
        </div>
        <div class="wallet-card">
            <div class="wallet-card-title">账单明细</div>
            <div class="wallet-card-item"><span class="label">本月支出</span><span class="value">-¥356.00</span></div>
            <div class="wallet-card-item"><span class="label">本月收入</span><span class="value">+¥2,000.00</span></div>
            <div class="wallet-card-item"><span class="label">优惠券</span><span class="value">3张可用</span></div>
            <div class="wallet-card-item"><span class="label">积分</span><span class="value">1,280</span></div>
        </div>
    </div>
    
    <!-- 浏览历史页 -->
    <div class="page" id="page-history">
        <div class="header"><span class="back-btn" onclick="goBack()">←</span><h1>浏览历史</h1></div>
        <div class="product-list" id="historyList"></div>
    </div>
    
    <!-- 帮助中心页 -->
    <div class="page" id="page-help">
        <div class="header"><span class="back-btn" onclick="goBack()">←</span><h1>帮助中心</h1></div>
        <div class="menu-section" style="margin:10px;">
            <div class="menu-item" onclick="showToast('配送说明')"><span class="menu-text">配送说明</span><span class="menu-arrow">></span></div>
            <div class="menu-item" onclick="showToast('退换货政策')"><span class="menu-text">退换货政策</span><span class="menu-arrow">></span></div>
            <div class="menu-item" onclick="showToast('支付问题')"><span class="menu-text">支付问题</span><span class="menu-arrow">></span></div>
            <div class="menu-item" onclick="showToast('联系客服')"><span class="menu-text">联系客服</span><span class="menu-arrow">></span></div>
        </div>
    </div>
    
    <!-- 关于我们页 -->
    <div class="page" id="page-about">
        <div class="header"><span class="back-btn" onclick="goBack()">←</span><h1>关于我们</h1></div>
        <div style="padding:20px;text-align:center;">
            <h2 style="margin-bottom:15px;">生鲜优选</h2>
            <p style="color:#666;line-height:1.8;">生鲜优选致力于为用户提供最新鲜、最优质的生鲜产品。我们与优质农场合作，确保每一件商品都符合严格的品质标准。</p>
            <p style="color:#666;margin-top:20px;">版本: 1.0.0</p>
        </div>
    </div>
    
    <!-- 设置页 -->
    <div class="page" id="page-settings">
        <div class="header"><span class="back-btn" onclick="goBack()">←</span><h1>设置</h1></div>
        <div class="menu-section" style="margin:10px;">
            <div class="menu-item" onclick="showToast('账号设置')"><span class="menu-text">账号设置</span><span class="menu-arrow">></span></div>
            <div class="menu-item" onclick="showToast('消息通知')"><span class="menu-text">消息通知</span><span class="menu-arrow">></span></div>
            <div class="menu-item" onclick="showToast('隐私设置')"><span class="menu-text">隐私设置</span><span class="menu-arrow">></span></div>
            <div class="menu-item" onclick="showToast('清除缓存')"><span class="menu-text">清除缓存</span><span class="menu-arrow">></span></div>
        </div>
    </div>
    
    <!-- 搜索页 -->
    <div class="page" id="page-search">
        <div class="header"><span class="back-btn" onclick="goBack()">←</span><h1>搜索</h1></div>
        <div class="search-bar" style="padding:10px 15px;">
            <input type="text" class="search-input" placeholder="搜索商品..." id="searchInput">
        </div>
        <div style="padding:15px;">
            <div style="color:#999;margin-bottom:10px;">搜索历史</div>
            <div style="display:flex;flex-wrap:wrap;gap:10px;">
                <span onclick="showToast('搜索: 草莓')" style="background:#fff;padding:8px 15px;border-radius:15px;font-size:13px;cursor:pointer;">草莓</span>
                <span onclick="showToast('搜索: 牛肉')" style="background:#fff;padding:8px 15px;border-radius:15px;font-size:13px;cursor:pointer;">牛肉</span>
                <span onclick="showToast('搜索: 牛奶')" style="background:#fff;padding:8px 15px;border-radius:15px;font-size:13px;cursor:pointer;">牛奶</span>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="tab-bar">
        <div class="tab-item active" data-tab="home" onclick="switchTab('home')">首页</div>
        <div class="tab-item" data-tab="category" onclick="switchTab('category')">分类</div>
        <div class="tab-item" data-tab="cart" onclick="switchTab('cart')" style="position:relative;">购物车<span class="badge" id="cartBadge" style="display:none;">0</span></div>
        <div class="tab-item" data-tab="user" onclick="switchTab('user')">我的</div>
    </div>
    
    <!-- Toast -->
    <div class="toast" id="toast">提示</div>
    
    <script>
        // 使用可靠的 Unsplash 图片源
        const products = {
            '水果': [
                { id: 1, name: '新鲜草莓 500g/盒', price: 29.9, img: 'https://images.unsplash.com/photo-1464965911861-746a04b4bca6?w=400&h=400&fit=crop', tags: ['当日达', '有机'], desc: '精选优质草莓，个大饱满，香甜多汁，新鲜直达' },
                { id: 2, name: '智利进口车厘子 500g', price: 68.0, img: 'https://images.unsplash.com/photo-1528821128474-27f963b062bf?w=400&h=400&fit=crop', tags: ['进口', '新鲜'], desc: '智利进口车厘子，果肉饱满，口感脆甜' },
                { id: 3, name: '阳光玫瑰青提 500g', price: 45.0, img: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop', tags: ['当季', '甜'], desc: '阳光玫瑰青提，玫瑰香味浓郁，颗颗饱满' },
                { id: 4, name: '新疆哈密瓜 1个', price: 35.0, img: 'https://images.unsplash.com/photo-1596131736453-0311c8b92898?w=400&h=400&fit=crop', tags: ['当季', '甜'], desc: '新疆产地直供，瓜肉清脆，甜度高' },
                { id: 5, name: '泰国山竹 500g', price: 38.0, img: 'https://images.unsplash.com/photo-1528821128474-27f963b062bf?w=400&h=400&fit=crop', tags: ['进口', '新鲜'], desc: '泰国进口山竹，果肉白嫩，口感清甜' },
                { id: 6, name: '红富士苹果 6个装', price: 28.0, img: 'https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=400&h=400&fit=crop', tags: ['当季'], desc: '山东红富士苹果，脆甜多汁，自然成熟' }
            ],
            '蔬菜': [
                { id: 7, name: '有机青菜 300g', price: 8.8, img: 'https://images.unsplash.com/photo-1540420773420-3366772f4999?w=400&h=400&fit=crop', tags: ['当日达', '有机'], desc: '有机认证青菜，新鲜嫩绿，无农药残留' },
                { id: 8, name: '西红柿 500g', price: 9.9, img: 'https://images.unsplash.com/photo-1546470427-227c7369a9b6?w=400&h=400&fit=crop', tags: ['当日达'], desc: '自然成熟西红柿，酸甜可口，色泽红润' },
                { id: 9, name: '西兰花 1颗', price: 12.0, img: 'https://images.unsplash.com/photo-1459411552884-841db9b3cc2a?w=400&h=400&fit=crop', tags: ['新鲜'], desc: '新鲜西兰花，营养丰富，口感脆嫩' },
                { id: 10, name: '胡萝卜 500g', price: 7.5, img: 'https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=400&h=400&fit=crop', tags: ['新鲜'], desc: '新鲜胡萝卜，脆甜营养，适合凉拌或炒食' }
            ],
            '肉禽': [
                { id: 11, name: '澳洲进口牛排 200g', price: 68.0, img: 'https://images.unsplash.com/photo-1607623814075-e51df1bdc82f?w=400&h=400&fit=crop', tags: ['冷链配送'], desc: '澳洲进口原切牛排，肉质鲜嫩，纹理清晰' },
                { id: 12, name: '土鸡蛋 30枚', price: 38.0, img: 'https://images.unsplash.com/photo-1582722872445-44dc5f7e3c8f?w=400&h=400&fit=crop', tags: ['散养', '新鲜'], desc: '农家散养土鸡蛋，蛋黄橙黄，营养丰富' },
                { id: 13, name: '鲜鸡胸肉 300g', price: 22.0, img: 'https://images.unsplash.com/photo-1604503468506-a8da13d82791?w=400&h=400&fit=crop', tags: ['当日达'], desc: '新鲜鸡胸肉，低脂高蛋白，肉质细嫩' },
                { id: 14, name: '五花肉 500g', price: 35.0, img: 'https://images.unsplash.com/photo-1607623814075-e51df1bdc82f?w=400&h=400&fit=crop', tags: ['新鲜'], desc: '新鲜五花肉，肥瘦相间，适合多种烹饪方式' }
            ],
            '水产': [
                { id: 15, name: '鲜活鲈鱼 约500g', price: 38.0, img: 'https://images.unsplash.com/photo-1534740807137-808163f31415?w=400&h=400&fit=crop', tags: ['当日达', '鲜活'], desc: '鲜活鲈鱼，现捕现发，肉质鲜美' },
                { id: 16, name: '大闸蟹 4只装', price: 128.0, img: 'https://images.unsplash.com/photo-1519708227418-c8fd9a32b7a2?w=400&h=400&fit=crop', tags: ['鲜活', '当季'], desc: '阳澄湖大闸蟹，蟹黄饱满，蟹肉鲜嫩' },
                { id: 17, name: '厄瓜多尔白虾 500g', price: 48.0, img: 'https://images.unsplash.com/photo-1565680018434-9a21a4dc2ddf?w=400&h=400&fit=crop', tags: ['进口', '冰鲜'], desc: '厄瓜多尔白虾，个大饱满，口感Q弹' },
                { id: 18, name: '黄花鱼 2条装', price: 45.0, img: 'https://images.unsplash.com/photo-1534740807137-808163f31415?w=400&h=400&fit=crop', tags: ['新鲜'], desc: '新鲜黄花鱼，肉质细嫩，刺少味美' }
            ],
            '奶品': [
                { id: 19, name: '有机纯牛奶 1L', price: 18.0, img: 'https://images.unsplash.com/photo-1550583724-b2692b85b150?w=400&h=400&fit=crop', tags: ['有机'], desc: '有机认证纯牛奶，奶香浓郁，营养丰富' },
                { id: 20, name: '新鲜酸奶 200g*4', price: 25.0, img: 'https://images.unsplash.com/photo-1488477181946-6428a0291777?w=400&h=400&fit=crop', tags: ['当日达'], desc: '手工酸奶，口感醇厚，益生菌丰富' },
                { id: 21, name: '全麦面包 500g', price: 15.0, img: 'https://images.unsplash.com/photo-1509440159596-0249088772ff?w=400&h=400&fit=crop', tags: ['新鲜'], desc: '全麦面包，健康无添加，早餐首选' },
                { id: 22, name: '奶酪棒 10支装', price: 32.0, img: 'https://images.unsplash.com/photo-1486297678162-eb2a19b0a32d?w=400&h=400&fit=crop', tags: ['儿童'], desc: '儿童奶酪棒，高钙低钠，营养美味' }
            ]
        };
        
        const categories = ['水果', '蔬菜', '肉禽', '水产', '奶品'];
        let cart = [];
        let currentProduct = null;
        let pageStack = ['home'];
        
        function init() {
            renderHomeProducts();
            renderCategoryPage();
            renderOrderList();
            renderAddressList();
            renderHistory();
        }
        
        function renderHomeProducts() {
            const container = document.getElementById('homeProductList');
            let html = '';
            categories.forEach(cat => {
                products[cat].slice(0, 1).forEach(p => { html += createProductCard(p); });
            });
            container.innerHTML = html;
        }
        
        function createProductCard(p) {
            return `<div class="product-card" onclick="showProductDetail(${p.id})">
                <div class="product-img"><img src="${p.img}" alt="${p.name}" onerror="this.style.display='none'"></div>
                <div class="product-info">
                    <div class="product-name">${p.name}</div>
                    <div class="product-tags">${p.tags.map(t => `<span class="tag">${t}</span>`).join('')}</div>
                    <div class="product-bottom">
                        <span class="product-price"><small>¥</small>${p.price.toFixed(1)}</span>
                        <button class="add-btn" onclick="event.stopPropagation();addToCart('${p.name}', ${p.price}, '${p.img}')">+</button>
                    </div>
                </div>
            </div>`;
        }
        
        function renderCategoryPage() {
            const sidebar = document.getElementById('categorySidebar');
            let html = '';
            categories.forEach((cat, i) => { html += `<div class="category-sidebar-item ${i===0?'active':''}" onclick="selectCategory('${cat}', this)">${cat}</div>`; });
            sidebar.innerHTML = html;
            selectCategory('水果', sidebar.firstChild);
        }
        
        function selectCategory(cat, el) {
            document.querySelectorAll('.category-sidebar-item').forEach(item => item.classList.remove('active'));
            el.classList.add('active');
            const content = document.getElementById('categoryContent');
            let html = `<div class="category-title">${cat}</div><div class="category-products">`;
            products[cat].forEach(p => { html += `<div class="product-card" onclick="showProductDetail(${p.id})">
                <div class="product-img"><img src="${p.img}" alt="${p.name}" onerror="this.style.display='none'"></div>
                <div class="product-info"><div class="product-name">${p.name}</div>
                <div class="product-tags">${p.tags.map(t => `<span class="tag">${t}</span>`).join('')}</div>
                <div class="product-bottom"><span class="product-price"><small>¥</small>${p.price.toFixed(1)}</span>
                <button class="add-btn" onclick="event.stopPropagation();addToCart('${p.name}', ${p.price}, '${p.img}')">+</button></div></div></div>`; });
            html += '</div>';
            content.innerHTML = html;
        }
        
        function goCategory(cat) { switchTab('category'); setTimeout(() => { document.querySelectorAll('.category-sidebar-item').forEach(item => { if(item.textContent === cat) selectCategory(cat, item); }); }, 100); }
        
        function showProductDetail(id) {
            let product = null;
            for (let cat in products) { const found = products[cat].find(p => p.id === id); if (found) { product = found; break; } }
            if (!product) return;
            currentProduct = product;
            document.getElementById('detailImg').innerHTML = `<img src="${product.img}" alt="${product.name}" onerror="this.style.display='none'">`;
            document.getElementById('detailName').textContent = product.name;
            document.getElementById('detailDesc').textContent = product.desc;
            document.getElementById('detailPrice').innerHTML = `<small>¥</small>${product.price.toFixed(1)}`;
            goPage('detail');
        }
        
        function goPage(page) {
            pageStack.push(page);
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById('page-' + page).classList.add('active');
            document.querySelector('.tab-bar').style.display = ['home', 'category', 'cart', 'user'].includes(page) ? 'flex' : 'none';
        }
        
        function goBack() {
            if (pageStack.length > 1) {
                pageStack.pop();
                const prev = pageStack[pageStack.length - 1];
                document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
                document.getElementById('page-' + prev).classList.add('active');
                document.querySelector('.tab-bar').style.display = ['home', 'category', 'cart', 'user'].includes(prev) ? 'flex' : 'none';
            }
        }
        
        function switchTab(tab) {
            pageStack = [tab];
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
            document.getElementById('page-' + tab).classList.add('active');
            document.querySelector(`.tab-item[data-tab="${tab}"]`).classList.add('active');
            document.querySelector('.tab-bar').style.display = 'flex';
            if (tab === 'cart') renderCart();
        }
        
        function addToCart(name, price, img) {
            const existing = cart.find(item => item.name === name);
            if (existing) existing.num++; else cart.push({ name, price, img, num: 1 });
            updateCartBadge();
            showToast('已加入购物车');
        }
        
        function addToCartFromDetail() { if (currentProduct) { addToCart(currentProduct.name, currentProduct.price, currentProduct.img); goBack(); } }
        
        function buyNowFromDetail() { 
            if (currentProduct) { 
                addToCart(currentProduct.name, currentProduct.price, currentProduct.img);
                // 直接跳转到确认订单页
                const html = `<div class="confirm-product">
                    <div class="confirm-product-img"><img src="${currentProduct.img}" alt="${currentProduct.name}" onerror="this.style.display='none'"></div>
                    <div class="confirm-product-info"><div class="confirm-product-name">${currentProduct.name}</div><div class="confirm-product-price">¥${currentProduct.price.toFixed(1)}</div></div>
                    <span class="confirm-product-num">x1</span>
                </div>`;
                document.getElementById('confirmProducts').innerHTML = html;
                document.getElementById('confirmTotal').textContent = '¥' + currentProduct.price.toFixed(1);
                pageStack = ['user'];
                goPage('confirmOrder');
            } 
        }
        
        function updateCartBadge() {
            const badge = document.getElementById('cartBadge');
            const total = cart.reduce((sum, item) => sum + item.num, 0);
            badge.style.display = total > 0 ? 'block' : 'none';
            badge.textContent = total;
        }
        
        function renderCart() {
            const list = document.getElementById('cartList');
            const footer = document.getElementById('cartFooter');
            if (cart.length === 0) {
                list.innerHTML = `<div class="empty-cart"><div class="icon">🛒</div><h3>购物车是空的</h3><p>快去挑选心仪的商品吧</p><span class="shop-btn" onclick="switchTab('home')">去首页逛逛</span></div>`;
                footer.style.display = 'none';
                return;
            }
            list.innerHTML = cart.map((item, i) => `<div class="cart-item">
                <div class="check active"></div>
                <div class="product-img"><img src="${item.img}" alt="${item.name}" onerror="this.style.display='none'"></div>
                <div class="info"><div class="name">${item.name}</div><div class="price">¥${item.price.toFixed(1)}</div></div>
                <div class="num-control"><button onclick="changeNum(${i}, -1)">-</button><span>${item.num}</span><button onclick="changeNum(${i}, 1)">+</button></div>
            </div>`).join('');
            const total = cart.reduce((sum, item) => sum + item.price * item.num, 0);
            const totalNum = cart.reduce((sum, item) => sum + item.num, 0);
            footer.style.display = 'flex';
            document.getElementById('totalPrice').textContent = '¥' + total.toFixed(1);
            document.getElementById('totalDesc').textContent = '共' + totalNum + '件';
        }
        
        function changeNum(i, delta) { cart[i].num += delta; if (cart[i].num <= 0) cart.splice(i, 1); updateCartBadge(); renderCart(); }
        
        function goConfirmOrder() {
            if (cart.length === 0) { showToast('购物车是空的'); return; }
            const html = cart.map(item => `<div class="confirm-product">
                <div class="confirm-product-img"><img src="${item.img}" alt="${item.name}" onerror="this.style.display='none'"></div>
                <div class="confirm-product-info"><div class="confirm-product-name">${item.name}</div><div class="confirm-product-price">¥${item.price.toFixed(1)}</div></div>
                <span class="confirm-product-num">x${item.num}</span>
            </div>`).join('');
            document.getElementById('confirmProducts').innerHTML = html;
            const total = cart.reduce((sum, item) => sum + item.price * item.num, 0);
            document.getElementById('confirmTotal').textContent = '¥' + total.toFixed(1);
            goPage('confirmOrder');
        }
        
        function submitOrder() { cart = []; updateCartBadge(); showToast('订单提交成功'); switchTab('user'); }
        
        function renderOrderList() {
            const orders = [
                { id: 'DD20240512001', status: '待付款', total: 96.9, products: [{ img: products['水果'][0].img, name: '新鲜草莓' }, { img: products['肉禽'][0].img, name: '澳洲牛排' }] },
                { id: 'DD20240511002', status: '待发货', total: 38.0, products: [{ img: products['水产'][0].img, name: '鲜活鲈鱼' }] },
                { id: 'DD20240510003', status: '待收货', total: 128.0, products: [{ img: products['水产'][1].img, name: '大闸蟹' }] }
            ];
            document.getElementById('orderList').innerHTML = orders.map(o => `<div class="order-card">
                <div class="order-card-header"><span class="order-id">订单号: ${o.id}</span><span class="order-status">${o.status}</span></div>
                <div class="order-card-products">${o.products.map(p => `<div class="order-product-item"><img src="${p.img}" onerror="this.style.display='none'"></div>`).join('')}</div>
                <div class="order-card-footer"><div class="order-card-total">共${o.products.length}件商品，合计: <span>¥${o.total.toFixed(1)}</span></div>
                <button class="order-action-btn">${o.status === '待付款' ? '去付款' : o.status === '待收货' ? '确认收货' : '查看详情'}</button>
            </div>`).join('');
        }
        
        function renderAddressList() {
            const addresses = [
                { name: '张三', phone: '138****8888', addr: '上海市浦东新区陆家嘴街道', isDefault: true },
                { name: '李四', phone: '139****6666', addr: '上海市静安区南京西路', isDefault: false }
            ];
            document.getElementById('addressList').innerHTML = addresses.map(a => `<div class="address-card">
                <div class="address-card-header"><span class="name">${a.name}</span><span class="phone">${a.phone}</span>${a.isDefault ? '<span class="default-tag">默认</span>' : ''}</div>
                <div class="address-card-content">${a.addr}</div>
                <div class="address-card-footer"><span onclick="showToast('编辑地址')">编辑</span><span onclick="showToast('删除地址')">删除</span></div>
            </div>`).join('');
        }
        
        function renderHistory() {
            const historyProducts = [products['水果'][0], products['蔬菜'][1], products['水产'][0]];
            document.getElementById('historyList').innerHTML = historyProducts.map(p => createProductCard(p)).join('');
        }
        
        function showToast(msg) { const toast = document.getElementById('toast'); toast.textContent = msg; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2000); }
        
        init();
    </script>

<style>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.inland-security-footer {
  position: fixed;
  z-index: 10;
  bottom: 0;
  right: 0;
  width: fit-content;
  display: flex;
  justify-content: flex-end;
}

.tooltip-container {
  position: relative;
}

.trigger-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background-color: transparent;
  border-radius: 8px;
  cursor: pointer;
}

.minimax-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 300;
  color: #adadad;
  text-decoration: none;
}

.minimax-link:visited {
  color: #adadad;
}

.minimax-link:hover {
  color: #666666;
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  right: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  padding-bottom: 16px; /* 8px 内容间距 + 8px 用于鼠标移动的透明区域 */
  font-size: 12px;
  line-height: 17px;
  background-color: #fafafa;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #171717;
}

/* 创建透明的连接区域，让鼠标可以平滑移动到 tooltip */
.tooltip-content::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 16px;
}

.tooltip-container:hover .tooltip-content {
  display: flex;
}

.info-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.beian-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #171717;
}

.beian-icon {
  width: 14px;
  height: 14px;
  margin-right: 2px;
}

.underline-text {
  color: #171717;
  text-decoration: underline;
}

.underline-text:hover {
  color: #000000;
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .trigger-content {
    background-color: transparent;
  }

  .minimax-link,
  .minimax-link:visited {
    color: #666666;
  }

  .minimax-link:hover {
    color: #adadad;
  }

  .tooltip-content {
    background-color: #262626;
    color: #ededed;
  }

  .beian-link,
  .underline-text {
    color: #ededed;
  }

  .underline-text:hover {
    color: #ffffff;
  }
}

</style>
<div class="inland-security-footer">
  <div class="tooltip-container">
    <div class="trigger-content">
      <a href="https://www.minimaxi.com/" target="_blank" rel="noreferrer" class="minimax-link">
        <span>© 2026 MiniMax</span>
      </a>
    </div>
    <div class="tooltip-content">
      <section class="info-section">
        <span>上海稀宇科技有限公司</span>
      </section>

      <section class="info-section">
        <a class="beian-link" href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402010179" target="_blank" rel="noreferrer">
          <img alt="hailuo-beian-icon" src="https://cdn.hailuoai.com/hailuo-video-web/public_assets/223037d3-79fd-4db0-a456-749f38a6a14b.png" class="beian-icon">
          <span class="underline-text">沪公网安备31010402010179号</span>
        </a>
        <a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer" class="underline-text">
          沪ICP备2023003282号-38
        </a>
      </section>

      <section class="info-section">
        <span>模型名称：MiniMax</span>
        <span>备案号：Shanghai-MiniMax-202505230046</span>
      </section>

      <section class="info-section">
        <a href="https://agent.minimaxi.com/doc/zh/terms-of-service.html" target="_blank" rel="noreferrer" class="underline-text">
          用户协议
        </a>
        <a href="https://agent.minimaxi.com/doc/zh/privacy-policy.html" target="_blank" rel="noreferrer" class="underline-text">
          隐私政策
        </a>
      </section>
    </div>
  </div>
</div>


<script>
/**
 * Iframe 元素高亮注入脚本
 * 需要在目标网站中引入此脚本来支持跨域 iframe 高亮功能
 *
 * 使用方法：
 * 1. 将此脚本添加到目标网站的 HTML 中
 * 2. 或通过浏览器扩展、用户脚本等方式注入
 */

(function () {
  "use strict";

  // 检查是否在 iframe 中
  if (window.self === window.top) {
    return; // 不在 iframe 中，不执行
  }

  // 检查是否已经初始化过
  if (window.__iframeHighlightInitialized) {
    return;
  }
  window.__iframeHighlightInitialized = true;
  console.log("Iframe 高亮脚本已加载");

  // 创建高亮覆盖层
  var overlay = document.createElement("div");
  overlay.id = "iframe-highlight-overlay";
  overlay.style.cssText = "\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    pointer-events: none;\n    z-index: 999999;\n    overflow: hidden;\n  ";

  // 创建悬停高亮框（虚线边框）
  var highlightBox = document.createElement("div");
  highlightBox.id = "iframe-highlight-box";
  highlightBox.style.cssText = "\n    position: absolute;\n    border: 2px dashed #007AFF;\n    background: rgba(0, 122, 255, 0.08);\n    pointer-events: none;\n    display: none;\n    transition: all 0.1s ease;\n    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);\n    border-radius: 2px;\n  ";

  // 创建选中节点的常驻高亮框（实线边框）
  var selectedBox = document.createElement("div");
  selectedBox.id = "iframe-selected-box";
  selectedBox.style.cssText = "\n    position: absolute;\n    border: 2px solid #007AFF;\n    pointer-events: none;\n    display: none;\n    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 107, 53, 0.4);\n    border-radius: 2px;\n    z-index: 1000000;\n  ";

  // 创建悬停标签显示
  var tagLabel = document.createElement("div");
  tagLabel.id = "iframe-tag-label";
  tagLabel.style.cssText = "\n    position: absolute;\n    background: #007AFF;\n    color: white;\n    padding: 2px 6px;\n    font-size: 11px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    border-radius: 2px;\n    pointer-events: none;\n    display: none;\n    white-space: nowrap;\n    z-index: 1000001;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n    font-weight: 500;\n  ";

  // 创建选中节点标签
  var selectedLabel = document.createElement("div");
  selectedLabel.id = "iframe-selected-label";
  selectedLabel.style.cssText = "\n    position: absolute;\n    background: #007AFF;\n    color: white;\n    padding: 3px 8px;\n    font-size: 11px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    border-radius: 3px;\n    pointer-events: none;\n    display: none;\n    white-space: nowrap;\n    z-index: 1000002;\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n    font-weight: 600;\n  ";
  overlay.appendChild(highlightBox);
  overlay.appendChild(selectedBox);
  overlay.appendChild(tagLabel);
  overlay.appendChild(selectedLabel);
  document.body.appendChild(overlay);

  // 存储当前选中的元素
  var selectedElement = null;
  var highlightEnabled = false;

  // 更新选中元素的高亮显示
  function updateSelectedHighlight(element) {
    console.log("updateSelectedHighlight called with:", element);
    if (!element) {
      selectedBox.style.display = "none";
      selectedLabel.style.display = "none";
      selectedElement = null;
      console.log("Cleared selected highlight");
      return;
    }
    selectedElement = element;
    var rect = element.getBoundingClientRect();
    console.log("Selected element rect:", rect);

    // 更新选中高亮框位置
    selectedBox.style.display = "block";
    selectedBox.style.left = "".concat(rect.left - 2, "px");
    selectedBox.style.top = "".concat(rect.top - 2, "px");
    selectedBox.style.width = "".concat(rect.width + 4, "px");
    selectedBox.style.height = "".concat(rect.height + 4, "px");

    // 更新选中标签位置和内容
    selectedLabel.style.display = "block";
    selectedLabel.textContent = "\u2713 <".concat(element.tagName.toLowerCase(), ">");

    // 计算标签位置，确保不超出视窗
    var labelTop = rect.top - 28;
    var labelLeft = rect.left;

    // 如果标签会超出顶部，显示在元素下方
    if (labelTop < 5) {
      labelTop = rect.bottom + 5;
    }

    // 如果标签会超出右侧，向左调整
    var labelWidth = selectedLabel.offsetWidth || 100; // 预估宽度
    if (labelLeft + labelWidth > window.innerWidth - 10) {
      labelLeft = window.innerWidth - labelWidth - 10;
    }
    selectedLabel.style.left = "".concat(Math.max(5, labelLeft), "px");
    selectedLabel.style.top = "".concat(labelTop, "px");
    console.log("Selected highlight positioned at:", {
      left: selectedBox.style.left,
      top: selectedBox.style.top,
      width: selectedBox.style.width,
      height: selectedBox.style.height
    });
  }
  function getElementSelector(element) {
    if (!(element instanceof Element)) throw new Error('Argument must be a DOM element');
    var segments = [];
    var current = element;
    while (current !== document.documentElement) {
      var selector = '';
      // 优先检查唯一ID
      if (current.id && document.querySelectorAll("#".concat(current.id)).length === 1) {
        segments.unshift("#".concat(current.id));
        break; // ID唯一，无需继续向上
      }

      // 生成类名选择器（取第一个有效类名）
      var classes = Array.from(current.classList).filter(function (c) {
        return !c.startsWith('js-');
      });
      var className = classes.length > 0 ? ".".concat(classes[0]) : '';

      // 生成位置索引（nth-child）
      var tag = current.tagName.toLowerCase();
      if (!className) {
        var siblings = Array.from(current.parentNode.children);
        var index = siblings.findIndex(function (el) {
          return el === current;
        }) + 1;
        selector = "".concat(tag, ":nth-child(").concat(index, ")");
      } else {
        selector = className;
      }
      segments.unshift(selector);
      current = current.parentElement;
    }

    // 处理根元素
    if (current === document.documentElement) {
      segments.unshift('html');
    }
    return segments.join(' > ');
  }

  // 获取元素文本内容
  function getElementText(element) {
    var _element$textContent;
    if (element.tagName === "INPUT") {
      return element.value || element.placeholder || "";
    }
    if (element.tagName === "TEXTAREA") {
      return element.value || element.placeholder || "";
    }
    var text = ((_element$textContent = element.textContent) === null || _element$textContent === void 0 ? void 0 : _element$textContent.trim()) || "";
    return text.length > 50 ? text.substring(0, 50) + "..." : text;
  }

  // 获取元素属性信息
  function getElementAttributes(element) {
    var attrs = {};
    for (var i = 0; i < element.attributes.length; i++) {
      var attr = element.attributes[i];
      attrs[attr.name] = attr.value;
    }
    return attrs;
  }

  // 鼠标悬停事件处理
  function handleMouseOver(e) {
    if (!highlightEnabled) return;
    var target = e.target;
    if (!target || target === overlay || target === highlightBox || target === tagLabel || target === selectedBox || target === selectedLabel) {
      return;
    }

    // 避免高亮 html 和 body 元素
    if (target === document.documentElement || target === document.body) {
      return;
    }

    // 如果是已选中的元素，不显示悬停高亮
    if (target === selectedElement) {
      highlightBox.style.display = "none";
      tagLabel.style.display = "none";
      return;
    }
    var rect = target.getBoundingClientRect();
    var selector = getElementSelector(target);
    var text = getElementText(target);
    var attributes = getElementAttributes(target);

    // 更新悬停高亮框位置
    highlightBox.style.display = "block";
    highlightBox.style.left = "".concat(rect.left - 2, "px");
    highlightBox.style.top = "".concat(rect.top - 2, "px");
    highlightBox.style.width = "".concat(rect.width + 4, "px");
    highlightBox.style.height = "".concat(rect.height + 4, "px");

    // 更新标签位置和内容
    tagLabel.style.display = "block";
    tagLabel.textContent = "<".concat(target.tagName.toLowerCase(), ">");

    // 计算标签位置，确保不超出视窗
    var labelTop = rect.top - 22;
    var labelLeft = rect.left;

    // 如果标签会超出顶部，显示在元素下方
    if (labelTop < 0) {
      labelTop = rect.bottom + 5;
    }

    // 如果标签会超出右侧，向左调整
    if (labelLeft + tagLabel.offsetWidth > window.innerWidth) {
      labelLeft = window.innerWidth - tagLabel.offsetWidth - 5;
    }
    tagLabel.style.left = "".concat(Math.max(0, labelLeft), "px");
    tagLabel.style.top = "".concat(labelTop, "px");

    // 发送消息到父窗口
    var elementInfo = {
      tagName: target.tagName.toLowerCase(),
      rect: {
        left: rect.left,
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        width: rect.width,
        height: rect.height,
        x: rect.x,
        y: rect.y
      },
      selector: selector,
      text: text,
      attributes: attributes,
      url: window.location.href,
      path: window.location.pathname,
      timestamp: Date.now()
    };
    try {
      window.parent.postMessage({
        type: "iframe-element-hover",
        data: elementInfo,
        source: "iframe-highlight-injector"
      }, "*");
    } catch (error) {
      console.warn("无法发送消息到父窗口:", error);
    }
  }

  // 鼠标离开事件处理
  function handleMouseOut(e) {
    if (!highlightEnabled) return;
    var relatedTarget = e.relatedTarget;

    // 如果鼠标移动到高亮相关元素上，不隐藏高亮
    if (relatedTarget && (relatedTarget === highlightBox || relatedTarget === tagLabel || relatedTarget === overlay || relatedTarget === selectedBox || relatedTarget === selectedLabel)) {
      return;
    }
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    try {
      window.parent.postMessage({
        type: "iframe-element-hover",
        data: null,
        source: "iframe-highlight-injector"
      }, "*");
    } catch (error) {
      console.warn("无法发送消息到父窗口:", error);
    }
  }

  // 点击事件处理
  function handleClick(e) {
    var target = e.target;
    if (!target || target === overlay || target === highlightBox || target === tagLabel || target === selectedBox || target === selectedLabel) {
      return;
    }

    // 避免处理 html 和 body 元素
    if (target === document.documentElement || target === document.body) {
      return;
    }

    // 检查是否是交互元素，这些元素需要保留默认行为
    var isInteractiveElement = ['input', 'textarea', 'select', 'button', 'a'].includes(target.tagName.toLowerCase());

    // 如果高亮功能启用，对于非交互元素阻止默认行为和事件传播
    if (highlightEnabled) {
      e.preventDefault();
      e.stopPropagation();
    }
    var rect = target.getBoundingClientRect();
    var selector = getElementSelector(target);
    var text = getElementText(target);
    var attributes = getElementAttributes(target);
    console.log("Element clicked:", {
      tagName: target.tagName,
      selector: selector,
      rect: rect
    });

    // 立即更新选中高亮
    updateSelectedHighlight(target);

    // 隐藏悬停高亮，因为现在是选中状态
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    var elementInfo = {
      tagName: target.tagName.toLowerCase(),
      rect: {
        left: rect.left,
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        width: rect.width,
        height: rect.height,
        x: rect.x,
        y: rect.y
      },
      selector: selector,
      text: text,
      attributes: attributes,
      url: window.location.href,
      path: window.location.pathname,
      timestamp: Date.now()
    };
    try {
      window.parent.postMessage({
        type: "iframe-element-click",
        data: elementInfo,
        source: "iframe-highlight-injector"
      }, "*");
    } catch (error) {
      console.warn("无法发送消息到父窗口:", error);
    }
  }

  // 监听来自父窗口的消息
  function handleParentMessage(event) {
    console.log("Received message from parent:", event.data);
    if (event.data.type === "iframe-highlight-toggle") {
      var enabled = event.data.enabled;
      console.log("Highlight toggle:", enabled);
      if (enabled) {
        enableHighlight();
      } else {
        disableHighlight();
      }
    } else if (event.data.type === "enable-iframe-highlight") {
      console.log("Enable iframe highlight");
      enableHighlight();
    } else if (event.data.type === "disable-iframe-highlight") {
      console.log("Disable iframe highlight");
      disableHighlight();
    } else if (event.data.type === "toggle-iframe-highlight") {
      var _enabled = event.data.enabled !== undefined ? event.data.enabled : !highlightEnabled;
      console.log("Toggle iframe highlight to:", _enabled);
      if (_enabled) {
        enableHighlight();
      } else {
        disableHighlight();
      }
    } else if (event.data.type === "update-selected-element") {
      var selector = event.data.selector;
      console.log("Update selected element with selector:", selector);
      if (selector) {
        try {
          var element = document.querySelector(selector);
          console.log("Found element by selector:", element);
          updateSelectedHighlight(element);
        } catch (error) {
          console.warn("Failed to select element:", error);
          updateSelectedHighlight(null);
        }
      } else {
        updateSelectedHighlight(null);
      }
    } else if (event.data.type === "clear-selected-element") {
      console.log("Clear selected element");
      updateSelectedHighlight(null);
    }
  }

  // 启用高亮功能
  function enableHighlight() {
    console.log("Enabling highlight");
    document.addEventListener("mouseover", handleMouseOver, true);
    document.addEventListener("mouseout", handleMouseOut, true);
    document.addEventListener("click", handleClick, true);
    highlightEnabled = true;
    overlay.style.display = "block";
  }

  // 禁用高亮功能
  function disableHighlight() {
    console.log("Disabling highlight");
    highlightEnabled = false;
    // 保持事件监听器，但通过 highlightEnabled 变量控制行为
    // 这样可以保留选中状态的显示
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    // 不隐藏 selectedBox 和 selectedLabel，保留选中状态
  }

  // 完全禁用高亮功能（移除所有监听器）
  function fullyDisableHighlight() {
    console.log("Fully disabling highlight");
    highlightEnabled = false;
    document.removeEventListener("mouseover", handleMouseOver, true);
    document.removeEventListener("mouseout", handleMouseOut, true);
    document.removeEventListener("click", handleClick, true);
    overlay.style.display = "none";
    highlightBox.style.display = "none";
    tagLabel.style.display = "none";
    selectedBox.style.display = "none";
    selectedLabel.style.display = "none";
  }

  // 添加事件监听
  enableHighlight();
  window.addEventListener("message", handleParentMessage);

  // 暴露全局函数供外部调用
  window.__iframeHighlightControl = {
    enable: enableHighlight,
    disable: disableHighlight,
    fullyDisable: fullyDisableHighlight,
    isEnabled: function isEnabled() {
      return highlightEnabled;
    },
    getSelectedElement: function getSelectedElement() {
      return selectedElement;
    },
    updateSelected: updateSelectedHighlight,
    // 通过消息发送开关控制
    sendToggleMessage: function sendToggleMessage(enabled) {
      window.parent.postMessage({
        type: 'iframe-highlight-status',
        enabled: enabled || highlightEnabled,
        source: 'iframe-highlight-injector'
      }, '*');
    }
  };

  // 通知父窗口脚本已加载
  try {
    window.parent.postMessage({
      type: "iframe-highlight-ready",
      data: {
        url: window.location.href,
        userAgent: navigator.userAgent,
        timestamp: Date.now()
      },
      source: "iframe-highlight-injector"
    }, "*");
  } catch (error) {
    console.warn("无法发送就绪消息到父窗口:", error);
  }

  // 清理函数
  window.__iframeHighlightCleanup = function () {
    fullyDisableHighlight();
    window.removeEventListener("message", handleParentMessage);
    if (overlay.parentElement) {
      overlay.parentElement.removeChild(overlay);
    }
    delete window.__iframeHighlightInitialized;
    delete window.__iframeHighlightCleanup;
  };
})();

</script>
<style>
#minimax-floating-ball {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 12px;
  background: #222222;
  border-radius: 12px;
  display: flex;
  align-items: center;
  color: #F8F8F8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  z-index: 9999;
  transition: all 0.3s ease;
  overflow: hidden;
  cursor: pointer;
}

#minimax-floating-ball:hover {
  transform: translateY(-2px);
  background: #383838;
}
.minimax-ball-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.minimax-logo-wave {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%27none%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20overflow%3D%27visible%27%20style%3D%27display%3A%20block%3B%27%20viewBox%3D%270%200%20170.136%20138.225%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cg%20id%3D%27Frame%202116748449%27%3E%3Cpath%20id%3D%27Subtract%27%20d%3D%27M170%20101.783C170%20105.144%20168.49%20108.327%20165.886%20110.453L134.963%20135.702C132.964%20137.334%20130.463%20138.225%20127.883%20138.225H10.4938C4.69824%20138.225%200%20133.527%200%20127.732V39.2289C0%2035.8597%201.51758%2032.6698%204.13162%2030.5442L38.5402%202.56547C40.536%200.942662%2043.0298%200.0567377%2045.602%200.0567377H159.506C165.302%200.0567377%20170%204.75498%20170%2010.5506V101.783Z%27%20fill%3D%27black%27%20style%3D%27fill%3Ablack%3Bfill-opacity%3A1%3B%27/%3E%3Cpath%20id%3D%27Subtract_2%27%20d%3D%27M149.011%2094.4632C149.011%2096.1471%20148.253%2097.7415%20146.946%2098.8043L125.893%20115.936C124.895%20116.748%20123.648%20117.191%20122.361%20117.191H24.6479C22.716%20117.191%2021.15%20115.625%2021.15%20113.693V46.1166C21.15%2044.4267%2021.9135%2042.8274%2023.2274%2041.7648L47.367%2022.2437C48.3638%2021.4376%2049.607%2020.9982%2050.8888%2020.9988L145.514%2021.0427C147.446%2021.0436%20149.011%2022.6094%20149.011%2024.5406V94.4632Z%27%20fill%3D%27white%27%20style%3D%27fill%3Awhite%3Bfill-opacity%3A1%3B%27/%3E%3Cpath%20id%3D%27Rectangle%20111142564%27%20d%3D%27M42.111%2080.8025C42.111%2077.7115%2044.6167%2075.2057%2047.7077%2075.2057H60.9999C64.0908%2075.2057%2066.5966%2077.7115%2066.5966%2080.8025V121.029H42.111V80.8025Z%27%20fill%3D%27black%27%20style%3D%27fill%3Ablack%3Bfill-opacity%3A1%3B%27/%3E%3Cpath%20id%3D%27Rectangle%20111142567%27%20d%3D%27M79.1894%2080.8025C79.1894%2077.7115%2081.6952%2075.2057%2084.7861%2075.2057H98.0783C101.169%2075.2057%20103.675%2077.7115%20103.675%2080.8025V121.029H79.1894V80.8025Z%27%20fill%3D%27black%27%20style%3D%27fill%3Ablack%3Bfill-opacity%3A1%3B%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 11px;
  background-color: #8FD1FF;
  border-radius: 4px;
}

.minimax-ball-text {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.minimax-close-icon {
  margin-left: 8px;
  font-size: 16px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.minimax-close-icon:hover {
  opacity: 1;
}
</style>
<div id="minimax-floating-ball">
  <div class="minimax-ball-content">
    <div class="minimax-logo-wave"></div>
    <span class="minimax-ball-text">Created by MiniMax Agent</span>
  </div>
  <div class="minimax-close-icon">×</div>
</div>
<script>
// Initialize floating ball functionality
function initFloatingBall() {
  const ball = document.getElementById('minimax-floating-ball');
  if (!ball) return;

  // Initial animation
  ball.style.opacity = '0';
  ball.style.transform = 'translateY(20px)';

  setTimeout(() => {
    ball.style.opacity = '1';
    ball.style.transform = 'translateY(0)';
  }, 500);

  // Handle logo click
  const ballContent = ball.querySelector('.minimax-ball-content');
  ballContent.addEventListener('click', function (e) {
    e.stopPropagation();
    window.open('https://agent.minimaxi.com/', '_blank');
    ball.style.transform = 'scale(0.95)';
    setTimeout(() => {
      ball.style.transform = 'scale(1)';
    }, 100);
  });

  // Handle close button click
  const closeIcon = ball.querySelector('.minimax-close-icon');
  closeIcon.addEventListener('click', function (e) {
    e.stopPropagation();
    ball.style.opacity = '0';
    ball.style.transform = 'translateY(20px)';

    setTimeout(() => {
      ball.style.display = 'none';
    }, 300);
  });
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', initFloatingBall); 
</script>
</body>
</html>