frontend/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Search - for Shoplazza</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="page-container">
        <!-- Header -->
        <header class="top-header">
            <div class="header-left">
                <span class="logo">Product</span>
                <span class="product-count" id="productCount">0 products found</span>
            </div>
            <div class="header-right">
                <button class="fold-btn" onclick="toggleFilters()">Fold</button>
            </div>
        </header>
        <!-- Search Bar -->
        <div class="search-bar">
            <div class="tenant-input-wrapper">
                <label for="tenantInput">tenant ID:</label>
                <input type="text" id="tenantInput" placeholder="请输入租户ID" value="1">
            </div>
            <input type="text" id="searchInput" placeholder="输入搜索关键词... (支持中文、英文、俄文)"
                   onkeypress="handleKeyPress(event)">
            <button onclick="performSearch()" class="search-btn">Search</button>
        </div>
        <!-- Filter Section -->
        <div class="filter-section" id="filterSection">
            <!-- Category Filter (一级分类) -->
            <div class="filter-row">
                <div class="filter-label">Category:</div>
                <div class="filter-tags" id="category1Tags"></div>
            </div>
            <!-- Color Filter -->
            <div class="filter-row">
                <div class="filter-label">Color:</div>
                <div class="filter-tags" id="colorTags"></div>
            </div>
            <!-- Size Filter -->
            <div class="filter-row">
                <div class="filter-label">Size:</div>
                <div class="filter-tags" id="sizeTags"></div>
            </div>
            <!-- Material Filter -->
            <div class="filter-row">
                <div class="filter-label">Material:</div>
                <div class="filter-tags" id="materialTags"></div>
            </div>
            <!-- Dropdown Filters -->
            <div class="filter-row">
                <div class="filter-label">Others:</div>
                <div class="filter-dropdowns">
                    <select id="priceFilter" onchange="handlePriceFilter(this.value)">
                        <option value="">Price</option>
                        <option value="0-50">0-50</option>
                        <option value="50-100">50-100</option>
                        <option value="100-200">100-200</option>
                        <option value="200+">200+</option>
                    </select>
                    <select id="timeFilter" onchange="handleTimeFilter(this.value)">
                        <option value="">Listing Time</option>
                        <option value="today">Today</option>
                        <option value="week">This Week</option>
                        <option value="month">This Month</option>
                        <option value="3months">Last 3 Months</option>
                        <option value="6months">Last 6 Months</option>
                    </select>
                    <button class="clear-filters-btn" onclick="clearAllFilters()" style="display: none;" id="clearFiltersBtn">Clear Filters</button>
                </div>
            </div>
        </div>
        <!-- Sort Section -->
        <div class="sort-section">
            <button class="sort-btn active" data-sort="" onclick="setSortByDefault()">By default</button>
            <button class="sort-btn" data-sort="create_time">
                By New Products
                <span class="sort-arrows">
                    <span class="arrow-up" data-field="create_time" data-order="desc" onclick="sortByField('create_time', 'desc')">▲</span>
                    <span class="arrow-down" data-field="create_time" data-order="asc" onclick="sortByField('create_time', 'asc')">▼</span>
                </span>
            </button>
            <button class="sort-btn" data-sort="min_price">
                By Price
                <span class="sort-arrows">
                    <span class="arrow-up" data-field="min_price" data-order="asc" onclick="sortByField('min_price', 'asc')">▲</span>
                    <span class="arrow-down" data-field="min_price" data-order="desc" onclick="sortByField('min_price', 'desc')">▼</span>
                </span>
            </button>
            
            <div class="sort-right">
                <select id="resultSize" onchange="performSearch()">
                    <option value="20">20 per page</option>
                    <option value="50" selected>50 per page</option>
                    <option value="100">50 per page</option>
                    <option value="200">50 per page</option>
                </select>
            </div>
        </div>
        <!-- Loading -->
        <div id="loading" class="loading" style="display: none;">
            <div class="spinner"></div>
            <p>Loading...</p>
        </div>
        <!-- Product Grid -->
        <div class="product-grid" id="productGrid"></div>
        <!-- Pagination -->
        <div class="pagination" id="pagination" style="display: none;"></div>
        <!-- Debug Info -->
        <details class="debug-info">
            <summary>调试信息</summary>
            <div id="debugInfo"></div>
        </details>
    </div>
    <footer>
        <p>SearchEngine © 2025 | API: <span id="apiUrl">Loading...</span></p>
    </footer>
    <script src="/static/js/app.js?v=3.2"></script>
</body>
</html>