GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search Results - Jockey Black Vest for Men</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #212121;17 }18 19 /* Status bar */20 .status-bar {21 height: 92px;22 padding: 0 32px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-size: 34px;27 color: #000;28 }29 .status-right { display: flex; align-items: center; gap: 22px; }30 .status-icon { width: 36px; height: 36px; opacity: 0.7; }31 32 /* Top search row */33 .top-search {34 height: 120px;35 display: flex;36 align-items: center;37 gap: 20px;38 padding: 0 24px;39 border-bottom: 1px solid #E0E0E0;40 }41 .icon-btn {42 width: 72px;43 height: 72px;44 display: flex;45 align-items: center;46 justify-content: center;47 }48 .search-field {49 flex: 1;50 height: 86px;51 background: #F1F3F4;52 border-radius: 44px;53 display: flex;54 align-items: center;55 padding: 0 26px;56 gap: 18px;57 font-size: 34px;58 color: #1F1F1F;59 }60 .search-placeholder { color: #1F1F1F; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }61 .top-actions { display: flex; align-items: center; gap: 16px; }62 63 /* Result info */64 .results-info {65 font-size: 30px;66 color: #5F6368;67 padding: 18px 28px;68 }69 .results-info .query { color: #1A73E8; }70 71 /* Pincode banner */72 .pincode-banner {73 margin: 10px 24px 0 24px;74 background: #FFF6E5;75 border: 1px solid #F9E1B7;76 border-radius: 18px;77 padding: 22px 24px;78 display: flex;79 align-items: center;80 justify-content: space-between;81 }82 .pincode-left { display: flex; align-items: center; gap: 18px; font-size: 32px; color: #3C4043; }83 .pincode-cta { color: #A0A0A0; }84 85 /* Color filter section */86 .color-filter {87 margin-top: 18px;88 background: #E9F0FF;89 padding: 26px 24px 30px 24px;90 border-top: 1px solid #E0E0E0;91 border-bottom: 1px solid #E0E0E0;92 }93 .filter-title { font-weight: 600; font-size: 34px; margin-bottom: 18px; }94 .chips {95 display: flex;96 gap: 20px;97 flex-wrap: nowrap;98 overflow: hidden;99 }100 .chip {101 display: inline-flex;102 align-items: center;103 gap: 16px;104 padding: 16px 26px;105 border: 2px solid #DADCE0;106 background: #FFF;107 border-radius: 999px;108 font-size: 30px;109 color: #3C4043;110 box-shadow: 0 1px 0 rgba(0,0,0,0.02);111 }112 .chip .dot {113 width: 36px;114 height: 36px;115 border-radius: 50%;116 border: 2px solid #C7C7C7;117 background: #FFF;118 }119 .chip.black .dot { background: #000; border-color: #000; }120 .chip.blue .dot { background: #2962FF; border-color: #2962FF; }121 .chip.grey .dot { background: #9E9E9E; border-color: #9E9E9E; }122 123 /* Product grid */124 .content {125 padding: 18px 18px 210px 18px; /* bottom space for bottom bar + gesture */126 }127 .grid {128 display: grid;129 grid-template-columns: 1fr 1fr;130 gap: 22px;131 }132 .card {133 background: #FFF;134 border: 1px solid #E0E0E0;135 border-radius: 12px;136 overflow: hidden;137 }138 .card-img {139 width: 100%;140 height: 520px;141 background: #E0E0E0;142 border-bottom: 1px solid #BDBDBD;143 display: flex;144 align-items: center;145 justify-content: center;146 color: #757575;147 font-size: 30px;148 text-align: center;149 padding: 0 16px;150 }151 .card-body {152 padding: 20px 18px 22px 18px;153 }154 .card-title {155 font-size: 30px;156 color: #3C4043;157 line-height: 1.25;158 height: 72px;159 overflow: hidden;160 text-overflow: ellipsis;161 }162 .card-price {163 margin-top: 8px;164 font-size: 36px;165 font-weight: 700;166 }167 168 /* Bottom actions */169 .bottom-actions {170 position: absolute;171 left: 0;172 right: 0;173 bottom: 72px;174 height: 130px;175 background: #fff;176 border-top: 1px solid #E0E0E0;177 display: flex;178 align-items: center;179 justify-content: space-between;180 padding: 0 60px;181 }182 .ba-item {183 display: flex;184 align-items: center;185 gap: 18px;186 font-size: 34px;187 color: #202124;188 }189 190 /* Gesture bar */191 .gesture {192 position: absolute;193 left: 50%;194 transform: translateX(-50%);195 bottom: 20px;196 width: 356px;197 height: 14px;198 border-radius: 10px;199 background: #000;200 opacity: 0.7;201 }202 203 /* Utility: SVG sizing */204 svg { display: block; }205</style>206</head>207<body>208<div id="render-target">209 <!-- Status bar -->210 <div class="status-bar">211 <div class="status-left">9:52</div>212 <div class="status-right">213 <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="#777" d="M6 19c-1.7 0-3-1.3-3-3 0-1.3.8-2.4 2-2.8V13c0-3.3 2.7-6 6-6 2.6 0 4.9 1.7 5.7 4.1 1.9.4 3.3 2.1 3.3 4 0 2.2-1.8 4-4 4H6z"/></svg>214 <svg class="status-icon" viewBox="0 0 24 24"><path fill="#777" d="M16 4H8v1h8V4zm4 5H4v2h16V9zm-3 6H7v1h10v-1z"/></svg>215 <svg class="status-icon" viewBox="0 0 24 24"><path fill="#777" d="M20.3 7.8c.8 1.1 1.2 2.5 1.2 3.8 0 3.9-3.1 7-7 7H6l1.8-1.8c.2-.2.2-.5 0-.7L4 12l-.3-.3c-.2-.2-.5-.2-.7 0L1 13V7c0-3.3 2.7-6 6-6h3.5c1.9 0 3.6.9 4.7 2.3 1 .3 1.9.8 2.6 1.5l.5.5z"/></svg>216 <div style="display:flex; align-items:center; gap:6px;">217 <svg width="54" height="24" viewBox="0 0 24 24"><path fill="#777" d="M3 9h18v6H3z"/><path fill="#fff" d="M4 10h16v4H4z"/><path fill="#777" d="M4 8V7h16v1H4z"/><path fill="#777" d="M17 9v6c1.7 0 3-1.3 3-3s-1.3-3-3-3z"/></svg>218 <span style="font-size:28px;color:#000;">100%</span>219 </div>220 </div>221 </div>222 223 <!-- Search bar with back and actions -->224 <div class="top-search">225 <div class="icon-btn" aria-label="Back">226 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#1F1F1F" d="M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12l4.6-4.6z"/></svg>227 </div>228 <div class="search-field">229 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#5F6368" d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>230 <div class="search-placeholder">jockey black vest for men</div>231 </div>232 <div class="top-actions">233 <div class="icon-btn" aria-label="Home">234 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#1F1F1F" d="M12 3 2 12h3v8h6v-5h2v5h6v-8h3z"/></svg>235 </div>236 <div class="icon-btn" aria-label="Cart">237 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#1F1F1F" d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 2c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zM7.2 14h9.9c.8 0 1.6-.5 1.9-1.3L22 7H6.2L5.3 4H2v2h2l3.6 9z"/></svg>238 </div>239 <div class="icon-btn" aria-label="Chat">240 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#1F1F1F" d="M20 2H4C2.9 2 2 2.9 2 4v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>241 </div>242 </div>243 </div>244 245 <!-- Results info -->246 <div class="results-info">247 Showing 1000+ results for <span class="query">jockey black vest for men</span>248 </div>249 250 <!-- Pincode banner -->251 <div class="pincode-banner">252 <div class="pincode-left">253 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#D93025" d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5 14.5 7.6 14.5 9 13.4 11.5 12 11.5z"/></svg>254 <span>Enter your Pincode</span>255 </div>256 <div class="pincode-cta">257 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#A0A0A0" d="M10 17l5-5-5-5-1.4 1.4L12.2 12l-3.6 3.6z"/></svg>258 </div>259 </div>260 261 <!-- Color filter chips -->262 <div class="color-filter">263 <div class="filter-title">Filter by Color</div>264 <div class="chips">265 <div class="chip"><span class="dot"></span> White</div>266 <div class="chip black"><span class="dot"></span> Black</div>267 <div class="chip blue"><span class="dot"></span> Blue</div>268 <div class="chip grey"><span class="dot"></span> Grey</div>269 </div>270 </div>271 272 <!-- Product grid -->273 <div class="content">274 <div class="grid">275 <!-- Card 1 -->276 <div class="card">277 <div class="card-img">[IMG: Pack of 4 white cotton vests]</div>278 <div class="card-body">279 <div class="card-title">Jockey - White Cotton Men's Vest (Pack)</div>280 <div class="card-price">₹657</div>281 </div>282 </div>283 <!-- Card 2 -->284 <div class="card">285 <div class="card-img">[IMG: Pack of 5 white cotton vests]</div>286 <div class="card-body">287 <div class="card-title">Jockey - White Cotton Men's Vest (Pack)</div>288 <div class="card-price">₹876</div>289 </div>290 </div>291 <!-- Card 3 -->292 <div class="card">293 <div class="card-img">[IMG: Single white vest on gray background]</div>294 <div class="card-body">295 <div class="card-title">Jockey - White Cotton Men's Vest</div>296 <div class="card-price">₹—</div>297 </div>298 </div>299 <!-- Card 4 -->300 <div class="card">301 <div class="card-img">[IMG: Pack of 3 black sleeveless vests]</div>302 <div class="card-body">303 <div class="card-title">Jockey Black Sleeveless Vests Pack</div>304 <div class="card-price">₹—</div>305 </div>306 </div>307 </div>308 </div>309 310 <!-- Bottom actions -->311 <div class="bottom-actions">312 <div class="ba-item">313 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#202124" d="M11 5V2H9v3H6v2h3v7h2V7h3V5h-3zM17 10v7h-3v2h8v-2h-3v-7h-2z"/></svg>314 <span>Sort</span>315 </div>316 <div class="ba-item">317 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#202124" d="M3 7h10v2H3V7zm0 5h14v2H3v-2zm0 5h8v2H3v-2zM21 6h-6v2h6V6zm-2 5h-4v2h4v-2zm-2 5h-2v2h2v-2z"/></svg>318 <span>Filter</span>319 </div>320 </div>321 322 <!-- Gesture bar -->323 <div class="gesture"></div>324</div>325</body>326</html>