GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Shopping - Sort By</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #ffffff;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; width: 1080px; height: 120px;16 background: #ffffff;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 40px; box-sizing: border-box;19 border-bottom: 1px solid #eee;20 }21 .status-left { font-weight: 600; color: #333; font-size: 34px; }22 .status-icons { display: flex; gap: 26px; align-items: center; }23 .icon {24 width: 40px; height: 40px;25 }26 .icon svg { width: 100%; height: 100%; }27 28 /* Top search area */29 .top-area {30 position: absolute; top: 120px; left: 0; width: 1080px; height: 140px;31 background: #ffffff;32 display: flex; align-items: center; padding: 0 30px; box-sizing: border-box;33 }34 .back-btn {35 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;36 }37 .search-pill {38 flex: 1; height: 96px; border: 1px solid #ddd; border-radius: 48px;39 display: flex; align-items: center; padding: 0 26px; box-sizing: border-box;40 margin: 0 10px;41 background: #f8f8f8;42 }43 .search-text { color: #333; font-size: 34px; flex: 1; }44 .top-actions { display: flex; gap: 18px; align-items: center; }45 .action-icon {46 width: 68px; height: 68px; border-radius: 34px; display: flex; align-items: center; justify-content: center;47 background: #ffffff; border: 1px solid #ddd;48 }49 .cart-icon { margin-left: 12px; }50 51 /* Filter chips row */52 .chips-row {53 position: absolute; top: 260px; left: 0; width: 1080px; height: 120px;54 display: flex; align-items: center; gap: 18px; padding: 0 28px; box-sizing: border-box;55 background: #ffffff;56 }57 .chip {58 padding: 24px 28px; border: 1px solid #ddd; border-radius: 36px; color: #333;59 font-size: 30px; display: inline-flex; align-items: center; gap: 12px;60 background: #fafafa;61 }62 .chip .caret {63 width: 22px; height: 22px;64 border: solid #666; border-width: 0 3px 3px 0; display: inline-block; transform: rotate(45deg);65 margin-left: 6px;66 }67 68 /* Secondary feature chips */69 .secondary-chips {70 position: absolute; top: 360px; left: 0; width: 1080px; height: 120px;71 display: flex; align-items: center; gap: 18px; padding: 0 28px; box-sizing: border-box;72 }73 .s-chip {74 padding: 24px 26px; border: 1px solid #ddd; border-radius: 26px; color: #333;75 font-size: 28px; background: #fff; display: inline-flex; align-items: center; gap: 12px;76 }77 .badge {78 width: 42px; height: 42px; border-radius: 21px; background: #ffefc2; border: 1px solid #e0c88e;79 display: inline-flex; align-items: center; justify-content: center; color: #c59b2c; font-size: 24px; font-weight: 700;80 }81 .new-badge {82 width: 48px; height: 48px; border-radius: 24px; background: #e6f0ff; border: 1px solid #bcd2ff;83 color: #4a73db; font-size: 24px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;84 }85 86 /* Results header */87 .results-header {88 position: absolute; top: 500px; left: 28px; right: 28px; height: 120px;89 }90 .results-header .line1 {91 font-size: 42px; color: #333; font-weight: 700;92 }93 .results-header .highlight { color: #1a57e7; }94 .results-header .line2 {95 margin-top: 10px; font-size: 34px; color: #666;96 }97 .results-header .line2 .highlight { color: #1a57e7; text-decoration: underline; }98 99 /* Ad banner */100 .ad-banner {101 position: absolute; top: 630px; left: 28px; width: 1024px; height: 420px;102 background: #E0E0E0; border: 1px solid #BDBDBD;103 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; font-weight: 600;104 border-radius: 12px;105 }106 .ad-caption {107 position: absolute; top: 1050px; left: 28px; width: 1024px; height: 90px;108 border: 1px solid #ddd; border-radius: 16px; display: flex; align-items: center; padding: 0 26px;109 box-sizing: border-box; font-size: 34px; color: #333; justify-content: space-between;110 }111 .arrow-right {112 width: 28px; height: 28px; border: solid #666; border-width: 0 3px 3px 0; transform: rotate(-45deg);113 }114 115 /* Product grid */116 .grid {117 position: absolute; top: 1160px; left: 28px; width: 1024px;118 display: grid; grid-template-columns: 1fr 1fr; gap: 28px;119 }120 .product-card {121 background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 18px; box-sizing: border-box;122 position: relative; height: 500px;123 }124 .product-img {125 width: 100%; height: 380px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;126 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; font-weight: 600;127 }128 .heart {129 position: absolute; top: 22px; right: 22px; width: 60px; height: 60px; border-radius: 30px; border: 1px solid #ddd;130 display: flex; align-items: center; justify-content: center; background: #fff;131 color: #999; font-size: 28px;132 }133 .product-title { margin-top: 16px; font-size: 28px; color: #333; }134 135 /* Scrim and bottom sheet */136 .scrim {137 position: absolute; top: 0; left: 0; width: 1080px; height: 2400px;138 background: rgba(0,0,0,0.45);139 }140 .bottom-sheet {141 position: absolute; left: 0; bottom: 0; width: 1080px; height: 950px; background: #ffffff;142 border-top-left-radius: 28px; border-top-right-radius: 28px; box-shadow: 0 -8px 24px rgba(0,0,0,0.2);143 padding: 30px; box-sizing: border-box;144 }145 .sheet-title {146 font-size: 36px; color: #777; letter-spacing: 1px;147 }148 .option {149 margin-top: 36px; height: 100px; display: flex; align-items: center; justify-content: space-between;150 border-bottom: 1px solid #eee;151 }152 .option:last-child { border-bottom: none; }153 .option-label { font-size: 40px; color: #222; }154 .radio {155 width: 54px; height: 54px; border-radius: 27px; border: 3px solid #9aa0a6; display: flex; align-items: center; justify-content: center;156 }157 .radio.active { border-color: #356AE6; }158 .radio-dot {159 width: 26px; height: 26px; border-radius: 13px; background: #356AE6;160 }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Status bar -->167 <div class="status-bar">168 <div class="status-left">8:26</div>169 <div class="status-icons">170 <div class="icon">171 <!-- message icon -->172 <svg viewBox="0 0 24 24">173 <path d="M4 4h16v12H7l-3 3V4z" fill="#777"></path>174 </svg>175 </div>176 <div class="icon">177 <!-- mail icon -->178 <svg viewBox="0 0 24 24">179 <path d="M2 5h20v14H2z" fill="#999"></path>180 <path d="M2 5l10 7 10-7" fill="none" stroke="#777" stroke-width="2"></path>181 </svg>182 </div>183 <div class="icon">184 <!-- signal icon -->185 <svg viewBox="0 0 24 24">186 <rect x="3" y="15" width="3" height="6" fill="#777"></rect>187 <rect x="9" y="12" width="3" height="9" fill="#777"></rect>188 <rect x="15" y="9" width="3" height="12" fill="#777"></rect>189 <rect x="21" y="6" width="3" height="15" fill="#777"></rect>190 </svg>191 </div>192 <div class="icon">193 <!-- cloud icon -->194 <svg viewBox="0 0 24 24">195 <path d="M6 14a6 6 0 0 1 12-2 4 4 0 0 1 0 8H7a4 4 0 0 1-1-6z" fill="#777"></path>196 </svg>197 </div>198 <div class="icon">199 <!-- wifi/battery icon -->200 <svg viewBox="0 0 24 24">201 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="#777"></rect>202 <rect x="5" y="8" width="10" height="8" fill="#fff"></rect>203 </svg>204 </div>205 </div>206 </div>207 208 <!-- Top search area -->209 <div class="top-area">210 <div class="back-btn">211 <svg class="icon" viewBox="0 0 24 24">212 <path d="M15 5l-7 7 7 7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>213 </svg>214 </div>215 <div class="search-pill">216 <div class="search-text">men k swiss tennis shoes</div>217 <div class="top-actions">218 <div class="action-icon">219 <!-- mic icon -->220 <svg viewBox="0 0 24 24">221 <rect x="9" y="4" width="6" height="10" rx="3" fill="#666"></rect>222 <path d="M6 11a6 6 0 0 0 12 0" stroke="#666" stroke-width="2" fill="none"></path>223 <path d="M12 21v-4" stroke="#666" stroke-width="2"></path>224 </svg>225 </div>226 <div class="action-icon">227 <!-- camera icon -->228 <svg viewBox="0 0 24 24">229 <rect x="3" y="7" width="18" height="12" rx="2" fill="#666"></rect>230 <circle cx="12" cy="13" r="4" fill="#fff"></circle>231 <rect x="8" y="4" width="8" height="3" fill="#666"></rect>232 </svg>233 </div>234 </div>235 </div>236 <div class="cart-icon action-icon">237 <!-- cart -->238 <svg viewBox="0 0 24 24">239 <path d="M6 6h15l-2 10H8L6 6z" fill="#666"></path>240 <circle cx="9" cy="20" r="2" fill="#666"></circle>241 <circle cx="18" cy="20" r="2" fill="#666"></circle>242 </svg>243 </div>244 </div>245 246 <!-- Filter chips row -->247 <div class="chips-row">248 <div class="chip">Sort By <span class="caret"></span></div>249 <div class="chip">Filter</div>250 <div class="chip">Brand <span class="caret"></span></div>251 <div class="chip">Price <span class="caret"></span></div>252 <div class="chip">Discount</div>253 </div>254 255 <!-- Feature chips -->256 <div class="secondary-chips">257 <div class="s-chip"><span class="badge">★</span> Premium Brands</div>258 <div class="s-chip"><span class="new-badge">NEW</span> New Arrivals</div>259 <div class="s-chip"><span class="badge">☎</span> Spoyl</div>260 <div class="s-chip"><span class="badge">+</span> Exclusive Styles</div>261 </div>262 263 <!-- Results header -->264 <div class="results-header">265 <div class="line1">Showing results for <span class="highlight">men k tennis shoes</span></div>266 <div class="line2">Search instead for <span class="highlight">men k swiss tennis shoes</span></div>267 </div>268 269 <!-- Banner -->270 <div class="ad-banner">[IMG: Campus Shoes - Ad Banner]</div>271 <div class="ad-caption">272 <div>Up to 50% Off on Best Sellers</div>273 <div class="arrow-right"></div>274 </div>275 276 <!-- Product Grid -->277 <div class="grid">278 <div class="product-card">279 <div class="heart">♡</div>280 <div class="product-img">[IMG: Black Running Shoe]</div>281 <div class="product-title">Black Mesh Sneakers</div>282 </div>283 <div class="product-card">284 <div class="heart">♡</div>285 <div class="product-img">[IMG: Blue Casual Sneaker]</div>286 <div class="product-title">Blue Comfort Sneakers</div>287 </div>288 </div>289 290 <!-- Dim background and bottom sheet -->291 <div class="scrim"></div>292 <div class="bottom-sheet">293 <div class="sheet-title">SORT BY</div>294 295 <div class="option">296 <div class="option-label">Relevance</div>297 <div class="radio active"><div class="radio-dot"></div></div>298 </div>299 300 <div class="option">301 <div class="option-label">Popularity</div>302 <div class="radio"></div>303 </div>304 305 <div class="option">306 <div class="option-label">Price -- Low to High</div>307 <div class="radio"></div>308 </div>309 310 <div class="option">311 <div class="option-label">Price -- High to Low</div>312 <div class="radio"></div>313 </div>314 315 <div class="option">316 <div class="option-label">Newest First</div>317 <div class="radio"></div>318 </div>319 </div>320 321</div>322</body>323</html>