ghstedpixel/app.py
0
1<!DOCTYPE html>2<html>3<head>4 <title>Tarz Price Scout</title>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">7 <link rel="preconnect" href="https://fonts.googleapis.com">8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>9 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">10 <style>11 :root {12 --bg-main: #0a0c14; --card-bg: #131622; --input-bg: #1b1f32; --border-color: rgba(255, 255, 255, 0.08);13 --text-main: #f3f4f6; --text-muted: #9ca3af; --accent-blue: #3b82f6; --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);14 --accent-green: #10b981; --glow-green: rgba(16, 185, 129, 0.2); --accent-gold: #f59e0b;15 --accent-red: #ef4444;16 }17 * { box-sizing: border-box; }18 body { 19 font-family: 'Inter', -apple-system, sans-serif; 20 padding: 40px 20px; 21 background: radial-gradient(circle at 50% 0%, #16192b 0%, #08090f 100%); 22 background-attachment: fixed; 23 color: var(--text-main); 24 max-width: 850px; 25 margin: auto; 26 line-height: 1.5; 27 -webkit-text-size-adjust: 100%;28 }29 h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 4px; color: #ffffff; display: flex; align-items: center; gap: 12px; }30 h3 { font-size: 18px; font-weight: 600; color: #ffffff; margin-top: 0; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }31 .status-line { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 30px; background: rgba(255,255,255,0.02); padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border-color); }32 .status-pill { width: 8px; height: 8px; background: {{ status_color }}; border-radius: 50%; box-shadow: 0 0 12px {{ status_color }}; }33 34 .tabs-nav { display: flex; gap: 8px; margin-bottom: 32px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; }35 .tab-btn { background: none; border: none; box-shadow: none; color: var(--text-muted); font-size: 14px; font-weight: 600; padding: 10px 18px; width: auto; cursor: pointer; border-radius: 8px; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; }36 .tab-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.04); }37 .tab-btn.active { color: #ffffff; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.25); }38 .tab-content { display: none; }39 .tab-content.active { display: block; }40 41 .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 24px; background: rgba(255,255,255,0.02); padding: 16px; border-radius: 12px; border: 1px solid var(--border-color); width: 100%; }42 .filter-item-box { display: flex; flex-direction: column; gap: 6px; }43 .filter-select-mini { width: 180px !important; height: 38px !important; padding: 6px 12px !important; font-size: 13px !important; background-color: var(--input-bg) !important; color: white !important; border-radius: 6px; border: 1px solid var(--border-color); }44 .filter-input-mini { width: 180px !important; height: 38px !important; padding: 6px 12px !important; font-size: 13px !important; background-color: var(--input-bg) !important; color: white !important; border-radius: 6px; border: 1px solid var(--border-color); font-family: inherit; }45 46 .card { background: var(--card-bg); padding: 24px; border-radius: 16px; border: 1px solid var(--border-color); margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }47 48 .search-card {49 background: #181c2e; border: 1px solid rgba(255, 255, 255, 0.12); transform: translateY(-6px);50 box-shadow: 0 20px 38px rgba(0, 0, 0, 0.55), 0 15px 12px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(255, 255, 255, 0.05) inset;51 transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;52 }53 .search-card:focus-within {54 transform: translateY(-9px); border-color: rgba(59, 130, 246, 0.35);55 box-shadow: 0 28px 50px rgba(0, 0, 0, 0.65), 0 20px 20px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(59, 130, 246, 0.15), 0 1px 3px rgba(255, 255, 255, 0.08) inset;56 }57 58 .input-flex { display: flex; gap: 16px; margin-bottom: 20px; align-items: flex-end; }59 .input-group { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }60 .input-group.size-group { flex-grow: 0; width: 140px; }61 .input-group.gender-group { flex-grow: 0; width: 105px; }62 .input-group.mode-group { flex-grow: 0; width: 175px; }63 label { min-height: 32px; display: flex; align-items: flex-end; margin-bottom: 8px; font-weight: 500; color: var(--text-muted); font-size: 13px; line-height: 1.2; }64 input[type="text"], select { background: var(--input-bg); border: 1px solid var(--border-color); color: white; padding: 14px 16px; border-radius: 10px; font-size: 15px; transition: all 0.3s ease; font-family: inherit; width: 100%; height: 50px; }65 .input-group.gender-group select { padding: 14px 22px 14px 12px; font-size: 14px; background-position: right 6px center; }66 select { cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }67 input[type="text"]:focus, select:focus { border-color: var(--accent-blue); outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }68 button { background: var(--accent-gradient); color: white; border: none; padding: 14px 24px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 15px; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); font-family: inherit; }69 button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3); }70 ul { list-style-type: none; padding: 0; margin: 0; }71 li { background: rgba(255, 255, 255, 0.02); padding: 14px 18px; border-radius: 12px; margin-bottom: 12px; border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; transition: all 0.2s ease; }72 li:hover { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.04); }73 .deal-item-header { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; }74 .deal-item { border-left: 4px solid var(--accent-green); background: #161c2a; overflow: hidden; }75 76 .product-img { width: 54px; height: 54px; min-width: 54px; border-radius: 6px; object-fit: contain; aspect-ratio: 1 / 1; background: #ffffff !important; border: 1px solid var(--border-color); padding: 4px; }77 78 .deal-info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }79 .item-title { font-weight: 600; color: #ffffff; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }80 .meta-container { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; margin-top: 2px; }81 .domain-badge { background: rgba(255, 255, 255, 0.05); color: #e5e7eb; font-size: 11px; font-weight: 500; padding: 2px 6px; border-radius: 4px; text-transform: lowercase; border: 1px solid var(--border-color); white-space: nowrap; }82 .size-badge { background: rgba(59, 130, 246, 0.1); color: #60a5fa; font-size: 11px; font-weight: 500; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(59, 130, 246, 0.15); white-space: nowrap; }83 .rating-badge { background: rgba(245, 158, 11, 0.1); color: #fbbf24; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(245, 158, 11, 0.2); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }84 85 .shield-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }86 .shield-badge.oem { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }87 .shield-badge.marketplace { background: rgba(156, 163, 175, 0.1); color: #9ca3af; border: 1px solid rgba(156, 163, 175, 0.2); }88 89 .glitch-gauge { background: rgba(239, 68, 68, 0.15); color: #f87171; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; border: 1px solid rgba(239, 68, 68, 0.3); box-shadow: 0 0 10px rgba(239, 68, 68, 0.15); letter-spacing: 0.01em; animation: pulse-border 2s infinite ease-in-out; }90 @keyframes pulse-border { 0%, 100% { border-color: rgba(239, 68, 68, 0.3); } 50% { border-color: rgba(239, 68, 68, 0.7); } }91 92 .value-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }93 .value-badge.best-value { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); box-shadow: 0 0 8px rgba(16, 185, 129, 0.1); }94 .value-badge.verified-retailer { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }95 96 /* Updated small-link row block parameters */97 .small-link { color: #60a5fa; text-decoration: none; font-size: 12px; white-space: normal; word-break: break-all; max-width: 100%; display: block; opacity: 0.8; margin-top: 4px; }98 .small-link:hover { text-decoration: underline; color: #3b82f6; opacity: 1; }99 100 .price-tag { background: var(--accent-green); color: white; border-radius: 8px; font-weight: 700; font-size: 16px; text-align: center; white-space: nowrap; min-width: 80px; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.15); padding: 0; transition: transform 0.2s ease; }101 .price-tag:hover { transform: scale(1.03); background: #059669; }102 .price-tag a { display: block; color: white; text-decoration: none; padding: 8px 14px; width: 100%; height: 100%; }103 104 .trend-indicator { font-size: 11px; font-weight: 700; font-family: monospace; margin-top: 4px; text-align: right; white-space: nowrap; }105 .trend-indicator.down { color: var(--accent-red); }106 .trend-indicator.up { color: var(--accent-green); }107 108 .error { color: #ef4444; background: rgba(239, 68, 68, 0.08); padding: 14px; border-radius: 10px; margin-bottom: 20px; border: 1px solid rgba(239, 68, 68, 0.2); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }109 .inline-coupon { background: rgba(245, 158, 11, 0.05); border: 1px dashed rgba(245, 158, 11, 0.3); padding: 8px 12px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; width: fit-content; margin-top: 4px; }110 111 details summary::-webkit-details-marker { display: none; }112 details summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); padding: 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #ffffff; cursor: pointer; transition: all 0.2s ease; margin-top: 15px; }113 details summary:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }114 .loader-box { display: none; margin-top: 20px; }115 .skeleton { background: linear-gradient(90deg, #1b1f32 25%, #252b47 50%, #1b1f32 75%); background-size: 200% 100%; animation: loading-shimmer 1.4s infinite linear; border-radius: 8px; }116 @keyframes loading-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }117 svg.icon { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }118 @media (max-width: 700px) {119 body { padding: 20px 12px; }120 h2 { font-size: 22px; }121 .card { padding: 16px; border-radius: 12px; margin-bottom: 16px; }122 .search-card { transform: translateY(-4px); }123 .search-card:focus-within { transform: translateY(-6px); }124 .input-flex { flex-direction: column; gap: 12px; margin-bottom: 16px; align-items: stretch; }125 .input-group.size-group, .input-group.gender-group, .input-group.mode-group { width: 100%; }126 label { min-height: auto; }127 .deal-item-header { flex-direction: column; align-items: flex-start; gap: 12px; }128 .product-img { width: 48px; height: 48px; min-width: 48px; }129 .deal-info { width: 100%; }130 .item-title { white-space: normal; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }131 .small-link { max-width: 100%; display: block; overflow: hidden; margin-top: 4px; }132 .price-tag { width: 100%; text-align: center; }133 button { padding: 12px 16px; font-size: 14px; }134 }135 </style>136 <script>137 function triggerLoadingState() {138 document.getElementById("submit-btn").style.display = "none";139 document.getElementById("loader-zone").style.display = "block";140 }141 142 function switchViewTab(targetTabId) {143 document.querySelectorAll('.tab-content').forEach(element => element.classList.remove('active'));144 document.querySelectorAll('.tab-btn').forEach(element => element.classList.remove('active'));145 146 document.getElementById(targetTabId + '-view').classList.add('active');147 event.currentTarget.classList.add('active');148 }149 150 // Fixed Attribute-Driven Multi-Layer Filter Engine Router151 function executeCategoryFilter() {152 const selectedCategory = document.getElementById('type-filter').value;153 const sizeKeyword = document.getElementById('size-filter').value.trim().toLowerCase();154 const selectedGender = document.getElementById('gender-filter').value;155 156 const mainVisibleList = document.getElementById('popular-deals-list');157 const hiddenExtraList = document.getElementById('popular-deals-extra-list');158 const extraDrawerContainer = document.getElementById('popular-extra-details');159 const extraCounterText = document.getElementById('popular-extra-count');160 const placeholderContainer = document.getElementById('popular-empty-state');161 const storagePool = document.getElementById('popular-master-pool');162 163 // Re-route active DOM nodes back to primary master storage pool safely164 while (mainVisibleList.firstChild) { storagePool.appendChild(mainVisibleList.firstChild); }165 while (hiddenExtraList.firstChild) { storagePool.appendChild(hiddenExtraList.firstChild); }166 167 let matchedCount = 0;168 const poolItems = Array.from(storagePool.children);169 170 poolItems.forEach(item => {171 const itemCategory = item.getAttribute('data-type');172 const itemGender = item.getAttribute('data-gender');173 const itemTitle = item.getAttribute('data-title').toLowerCase();174 const itemSize = item.getAttribute('data-size').toLowerCase();175 176 const matchesCategory = (selectedCategory === 'all' || itemCategory === selectedCategory);177 const matchesGender = (selectedGender === 'all' || itemGender === selectedGender || itemGender === 'unisex');178 const matchesSize = (!sizeKeyword || itemTitle.includes(sizeKeyword) || itemSize.includes(sizeKeyword));179 180 if (matchesCategory && matchesGender && matchesSize) {181 matchedCount++;182 // Strict 10 + 10 ceiling allocation bounds183 if (matchedCount <= 10) {184 mainVisibleList.appendChild(item);185 } else if (matchedCount <= 20) {186 hiddenExtraList.appendChild(item);187 }188 }189 });190 191 // Adjust folder parameters and placeholder visibilities dynamically192 if (matchedCount > 10) {193 extraDrawerContainer.style.display = 'block';194 extraCounterText.textContent = Math.min(matchedCount - 10, 10);195 } else {196 extraDrawerContainer.style.display = 'none';197 }198 199 if (matchedCount === 0) {200 placeholderContainer.style.display = 'block';201 } else {202 placeholderContainer.style.display = 'none';203 }204 }205 206 document.addEventListener("DOMContentLoaded", function() {207 const filterDropdown = document.getElementById('type-filter');208 if (filterDropdown) {209 const targetCategories = ["Clothes", "Footwear", "Fragrances", "Electronics"];210 targetCategories.forEach(category => {211 const optElement = document.createElement('option');212 optElement.value = category;213 optElement.textContent = category;214 filterDropdown.appendChild(optElement);215 });216 }217 // Fire initial run routing allocations218 executeCategoryFilter();219 });220 </script>221</head>222<body>223 224 {% macro render_deal_row(deal, idx, target_item, coupons, is_ref_url) %}225 <li class="deal-item">226 <div class="deal-item-header">227 <img src="{{ deal.image if deal.image else 'https://placehold.co/100x100/1a1c28/9fa4b4?text=IMG' }}" class="product-img" onerror="this.src='https://placehold.co/100x100/1a1c28/9fa4b4?text=IMG'" />228 <div class="deal-info">229 <span class="item-title">{{ deal.title if deal.title else target_item }}</span>230 <div class="meta-container">231 <span class="domain-badge">{{ deal.source_domain }}</span>232 <span class="size-badge">{{ deal.size if deal.size else 'Standard' }}</span>233 234 {% if deal.is_third_party %}235 <span class="shield-badge marketplace">⚠️ Third-Party Merchant</span>236 {% else %}237 <span class="shield-badge oem">🛡️ Direct OEM</span>238 {% endif %}239 240 {% if deal.anomaly_prob and deal.anomaly_prob > 45 %}241 <span class="glitch-gauge">🔥 {{ deal.anomaly_prob }}% Glitch Probability</span>242 {% endif %}243 244 {% if deal.rating %}245 <span class="rating-badge">246 <svg class="icon" style="width:11px; height:11px; color:var(--accent-gold); fill:currentColor;" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>247 {{ deal.rating }}{% if deal.reviews %} ({{ deal.reviews|int }}){% endif %}248 </span>249 {% endif %}250 251 {% if idx == 0 %}252 <span class="value-badge best-value">253 <svg class="icon" style="width:12px; height:12px;" viewBox="0 0 24 24"><path d="M12 23l-1.45-1.32C5.4 16.25 2 13.17 2 9.5 2 6.5 4.5 4 7.5 4c1.74 0 3.41.81 4.5 2.09C13.09 4.81 14.76 4 16.5 4 19.5 4 22 6.5 22 9.5c0 3.67-3.4 6.75-8.55 12.18L12 23z"/></svg>254 Best Value255 </span>256 {% endif %}257 258 {% if deal.source %}259 <span class="value-badge verified-retailer">260 <svg class="icon" style="width:12px; height:12px;" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>261 Verified262 </span>263 {% endif %}264 265 {% if is_ref_url and deal.url == is_ref_url %}266 <span class="size-badge" style="background:rgba(59,130,246,0.1); color:#60a5fa; border-color:rgba(59,130,246,0.2)">⭐ Ref Target</span>267 {% endif %}268 </div>269 <a href="{{ deal.url }}" target="_blank" class="small-link">{{ deal.url }}</a>270 </div>271 <div style="display: flex; flex-direction: column; align-items: flex-end;">272 <span class="price-tag">273 <a href="{{ deal.url }}" target="_blank">${{ "%.2f"|format(deal.price) }}</a>274 </span>275 {% if idx == 0 and deal.price_delta and deal.price_delta != 0.0 %}276 {% if deal.price_delta < 0 %}277 <span class="trend-indicator down">- $ {{ deal.price_delta|abs }}</span>278 {% else %}279 <span class="trend-indicator up">+ $ {{ deal.price_delta }}</span>280 {% endif %}281 {% endif %}282 </div>283 </div>284 285 {% if deal.badge and deal.badge != 'BEST PRICE' %}286 <div class="inline-coupon" style="color: var(--accent-gold); font-weight: 600; letter-spacing: 0.02em;">287 {{ deal.badge }}288 </div>289 {% endif %}290 </li>291 {% endmacro %}292 293 <h2>294 <svg class="icon" style="width:28px; height:28px; color:var(--accent-blue);" viewBox="0 0 24 24"><path d="M12 2L2 22h20L12 2zm0 3.99L19.53 19H4.47L12 5.99zM13 16h-2v2h2v-2zm0-6h-2v4h2v-4z"/></svg>295 Tarz Price Scout296 </h2>297 <div class="status-line">298 <div class="status-pill"></div>299 <span>{{ status_text }}</span>300 </div>301 302 {% if error_msg %}303 <div class="error">{{ error_msg }}</div>304 {% endif %}305 306 <div class="tabs-nav">307 <button class="tab-btn {% if active_tab == 'scan' %}active{% endif %}" onclick="switchViewTab('scan')">308 <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>309 On-Demand Engine310 </button>311 <button class="tab-btn {% if active_tab == 'popular' %}active{% endif %}" onclick="switchViewTab('popular')">312 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2l3.09 6.3 6.91 1-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.17 2 9.3l6.91-1L12 2z"/></svg>313 Most Popular Deals314 </button>315 </div>316 317 <div id="scan-view" class="tab-content {% if active_tab == 'scan' %}active{% endif %}">318 <div class="card search-card">319 <h3>320 <svg class="icon" style="color:var(--accent-blue);" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>321 Run On-Demand Scan322 </h3>323 <p style="font-size: 12px; color: var(--text-muted); margin-top: -10px; margin-bottom: 15px;">💡 Append an asterisk to force an engine refresh (e.g. <i>nike shorts *</i>)</p>324 <form action="/search" method="post" onsubmit="triggerLoadingState()">325 <div class="input-flex">326 <div class="input-group">327 <label>Enter Product Details OR Paste Product Link</label>328 <input type="text" name="product_name" value="{{ prev_name }}" placeholder="e.g., Creed Green Irish Tweed OR https://www.store.com/item" autocomplete="off" required>329 </div>330 <div class="input-group size-group">331 <label>Size / Variant</label>332 <input type="text" name="product_size" value="{{ prev_size }}" placeholder="e.g., 3.4 oz, XL, 10.5" autocomplete="off">333 </div>334 <div class="input-group gender-group">335 <label>Gender</label>336 <select name="product_gender">337 <option value="unisex" {% if prev_gender == "unisex" %}selected{% endif %}>All</option>338 <option value="mens" {% if prev_gender == "mens" %}selected{% endif %}>Men's</option>339 <option value="womens" {% if prev_gender == "womens" %}selected{% endif %}>Women's</option>340 <option value="kids" {% if prev_gender == "kids" %}selected{% endif %}>Kids'</option>341 </select>342 </div>343 <div class="input-group mode-group">344 <label>Search Strategy</label>345 <select name="search_mode">346 <option value="broad" {% if prev_mode == "broad" %}selected{% endif %}>Broad Exploration</option>347 <option value="balanced" {% if prev_mode == "balanced" %}selected{% endif %}>Standard Balanced</option>348 <option value="exact" {% if prev_mode == "exact" %}selected{% endif %}>Precision Match</option>349 </select>350 </div>351 </div>352 <button type="submit" id="submit-btn">353 <svg class="icon" viewBox="0 0 24 24"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>354 Execute Price Scout Sweep355 </button>356 <div id="loader-zone" class="loader-box">357 <p style="color: var(--text-muted); font-size: 14px; margin-bottom: 15px; text-align: center;">⚡ Price Scout is assembling structural pricing matrices across real-time storage nodes...</p>358 <div style="height: 64px; width: 100%; margin-bottom: 12px;" class="skeleton"></div>359 <div style="height: 64px; width: 100%; margin-bottom: 12px;" class="skeleton"></div>360 <div style="height: 64px; width: 100%;" class="skeleton"></div>361 </div>362 </form>363 </div>364 365 {% if show_results %}366 <div class="card" style="border-color: var(--accent-green);">367 <h3>Results Matrix for: <span style="color: var(--accent-blue); margin-left: 4px;"><b>{{ target_item }}{{ size_header }}</b></span></h3>368 369 {% if deals %}370 <p style="color:var(--accent-green); font-weight:600; margin-top:-10px; font-size:15px; margin-bottom: 20px;">🏆 Lowest verified online price: ${{ "%.2f"|format(deals[0].price) }}</p>371 372 <ul style="margin-top: 15px;">373 {% for deal in deals[:10] %}374 {{ render_deal_row(deal, loop.index0, target_item, coupons, is_ref_url) }}375 {% endfor %}376 </ul>377 378 {% if deals|length > 10 %}379 <details>380 <summary>381 <svg class="icon" viewBox="0 0 24 24" style="width:14px; height:14px;"><path d="M7 10l5 5 5-5z"/></svg>382 View Additional Pricing Options (+{{ deals|length - 10 }} more variants found)383 </summary>384 <ul style="margin-top: 15px;">385 {% for deal in deals[10:20] %}386 {{ render_deal_row(deal, loop.index0 + 10, target_item, coupons, is_ref_url) }}387 {% endfor %}388 </ul>389 </details>390 {% endif %}391 392 {% else %}393 <p style="color: var(--text-muted); margin: 0;">⚠️ No verifiable pricing matrices were found matching this selection criteria.</p>394 {% endif %}395 </div>396 {% endif %}397 </div>398 399 <div id="popular-view" class="tab-content {% if active_tab == 'popular' %}active{% endif %}">400 <div class="card" style="border-color: rgba(245, 158, 11, 0.45);">401 <h3>402 <svg class="icon" style="color:var(--accent-gold);" viewBox="0 0 24 24"><path d="M12 2l3.09 6.3 6.91 1-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.17 2 9.3l6.91-1L12 2z"/></svg>403 Trending Daily Volume Leaders404 </h3>405 <p style="font-size: 12px; color: var(--text-muted); margin-top: -10px; margin-bottom: 15px;">Verified global high-velocity price drops index monitored over the last 24 hours.</p>406 407 <div class="filter-bar">408 <div class="filter-item-box">409 <span style="font-size: 12px; font-weight: 600; color: var(--text-muted);">Product Category</span>410 <select id="type-filter" class="filter-select-mini" onchange="executeCategoryFilter()">411 <option value="all">Show All Categories</option>412 </select>413 </div>414 415 <div class="filter-item-box">416 <span style="font-size: 12px; font-weight: 600; color: var(--text-muted);">Size / Variant</span>417 <input type="text" id="size-filter" class="filter-input-mini" placeholder="e.g. 3.4 oz, XL, 10.5" oninput="executeCategoryFilter()" autocomplete="off">418 </div>419 420 <div class="filter-item-box">421 <span style="font-size: 12px; font-weight: 600; color: var(--text-muted);">Gender Selection</span>422 <select id="gender-filter" class="filter-select-mini" onchange="executeCategoryFilter()">423 <option value="all">All Genders</option>424 <option value="mens">Men's</option>425 <option value="womens">Women's</option>426 <option value="kids">Kids'</option>427 </select>428 </div>429 </div>430 431 <div id="popular-empty-state" style="display: none; padding: 20px 0;">432 <p style="color: var(--text-muted); font-size: 14px; margin: 0;">⚡ Syncing live market nodes. No matching products found in the current live feed window.</p>433 </div>434 435 <ul id="popular-deals-list" style="margin-top: 15px;"></ul>436 437 <details id="popular-extra-details" style="margin-top: 15px; display: none;">438 <summary>439 <svg class="icon" viewBox="0 0 24 24" style="width:14px; height:14px;"><path d="M7 10l5 5 5-5z"/></svg>440 View Additional Trending Options (+<span id="popular-extra-count">0</span> more variants found)441 </summary>442 <ul id="popular-deals-extra-list" style="margin-top: 15px;"></ul>443 </details>444 445 <ul id="popular-master-pool" style="display: none;">446 {% for deal in popular_deals %}447 <li class="deal-item popular-deal-item" data-type="{{ deal.product_type }}" data-gender="{{ deal.gender }}" data-title="{{ deal.title }}" data-size="{{ deal.size }}">448 <div class="deal-item-header">449 <img src="{{ deal.image }}" class="product-img" onerror="this.src='https://placehold.co/100x100/ffffff/000000?text=RETAIL'" />450 <div class="deal-info">451 <span class="item-title">{{ deal.title }}</span>452 <div class="meta-container">453 <span class="domain-badge">{{ deal.source_domain }}</span>454 <span class="size-badge">{{ deal.size }}</span>455 <span class="size-badge" style="background: rgba(245, 158, 11, 0.1); color: var(--accent-gold); border-color: rgba(245, 158, 11, 0.2);">{{ deal.product_type }}</span>456 457 {% if deal.is_third_party %}458 <span class="shield-badge marketplace">⚠️ Third-Party</span>459 {% else %}460 <span class="shield-badge oem">🛡️ Direct OEM</span>461 {% endif %}462 463 <span class="rating-badge">464 <svg class="icon" style="width:11px; height:11px; color:var(--accent-gold); fill:currentColor;" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>465 {{ deal.rating }} ({{ deal.reviews }})466 </span>467 </div>468 <a href="{{ deal.url }}" target="_blank" class="small-link">{{ deal.url }}</a>469 </div>470 <div style="display: flex; flex-direction: column; align-items: flex-end;">471 <span class="price-tag" style="background: var(--accent-gold);">472 <a href="{{ deal.url }}" target="_blank">${{ "%.2f"|format(deal.price) }}</a>473 </span>474 <span class="trend-indicator down" style="color: var(--text-muted); text-decoration: line-through; font-weight: 500; font-size: 12px; margin-top: 4px;">475 ${{ "%.2f"|format(deal.original_price) }}476 </span>477 </div>478 </div>479 {% if deal.badge %}480 <div class="inline-coupon" style="color: var(--accent-gold); font-weight: 600; letter-spacing: 0.02em;">481 {{ deal.badge }}482 </div>483 {% endif %}484 </li>485 {% endfor %}486 </ul>487 488 </div>489 </div>490</body>491</html>