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 - Hiking Boots</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 height: 64px;21 padding: 0 28px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #6b6b6b;26 font-size: 30px;27 }28 .status-icons {29 display: flex;30 gap: 18px;31 align-items: center;32 }33 .status-dot {34 width: 26px; height: 26px; background:#9E9E9E; border-radius:50%;35 }36 .status-battery {37 width: 40px; height: 24px; border:2px solid #8a8a8a; border-radius:4px; position: relative;38 }39 .status-battery::after {40 content:""; position:absolute; right:-6px; top:6px; width:4px; height:10px; background:#8a8a8a; border-radius:1px;41 }42 .status-battery .level { width:28px; height:16px; background:#8a8a8a; margin:3px; }43 44 /* Header */45 .header {46 height: 120px;47 display: flex;48 align-items: center;49 padding: 0 24px;50 gap: 24px;51 border-bottom: 1px solid #E0E0E0;52 }53 .header .title {54 font-size: 44px;55 font-weight: 700;56 color: #222;57 flex: 1;58 white-space: nowrap;59 overflow: hidden;60 text-overflow: ellipsis;61 }62 .header .actions {63 display: flex;64 gap: 26px;65 align-items: center;66 }67 .icon {68 width: 48px; height: 48px; color: #222;69 }70 .icon.small { width: 42px; height: 42px; }71 .icon.gray { color:#6b6b6b; }72 73 /* List */74 .list {75 position: absolute;76 top: 184px; /* status (64) + header (120) */77 bottom: 220px; /* space for nav; list is clipped by container */78 left: 0; right: 0;79 overflow: hidden;80 padding-bottom: 40px;81 }82 .item {83 padding: 32px 28px;84 display: flex;85 gap: 28px;86 position: relative;87 }88 .item + .item { border-top: 1px solid #EAEAEA; }89 .thumb {90 width: 300px; height: 230px;91 background: #E0E0E0;92 border: 1px solid #BDBDBD;93 display: flex; justify-content: center; align-items: center;94 color: #757575; font-size: 28px; text-align: center;95 border-radius: 12px;96 position: relative;97 overflow: hidden;98 }99 .thumb.rounded { border-radius: 28px; }100 .fav {101 position: absolute;102 top: -8px; right: -8px;103 width: 80px; height: 80px; background: #ffffff;104 border-radius: 50%;105 display: flex; align-items: center; justify-content: center;106 box-shadow: 0 2px 6px rgba(0,0,0,0.1);107 }108 .content {109 flex: 1;110 padding-top: 6px;111 }112 .title-line {113 font-size: 36px;114 line-height: 1.22;115 font-weight: 700;116 color: #222;117 margin-bottom: 8px;118 }119 .meta {120 color: #777;121 font-size: 30px;122 margin-bottom: 12px;123 }124 .price {125 font-size: 48px;126 font-weight: 800;127 margin: 6px 0;128 }129 .subtext {130 color: #8a8a8a;131 font-size: 28px;132 line-height: 1.3;133 }134 135 /* Floating controls */136 .float-controls {137 position: absolute;138 left: 150px; right: 150px;139 bottom: 320px;140 height: 120px;141 background: #2F56F9;142 border-radius: 60px;143 display: flex;144 align-items: center;145 justify-content: center;146 gap: 60px;147 box-shadow: 0 8px 24px rgba(47,86,249,0.35);148 color: #fff;149 font-weight: 700;150 z-index: 5;151 }152 .chip {153 display: flex; align-items: center; gap: 16px;154 font-size: 34px;155 }156 .chip svg { width: 42px; height: 42px; color:#fff; }157 158 /* Bottom nav */159 .bottom-nav {160 position: absolute;161 bottom: 56px;162 left: 0; right: 0;163 height: 160px;164 border-top: 1px solid #E5E5E5;165 background: #fff;166 display: flex;167 justify-content: space-around;168 align-items: center;169 z-index: 2;170 }171 .nav-item {172 display: flex; flex-direction: column; align-items: center; gap: 10px;173 color: #8a8a8a; font-size: 26px;174 }175 .nav-item.active { color: #2F56F9; }176 .nav-item .icon { width: 50px; height: 50px; }177 .badge {178 position: absolute;179 top: -6px; right: -10px;180 background: #E53935; color: #fff;181 font-size: 22px; font-weight: 700;182 width: 34px; height: 34px; border-radius: 50%;183 display: flex; align-items: center; justify-content: center;184 }185 .nav-icon-wrap { position: relative; }186 187 /* Home indicator */188 .home-indicator {189 position: absolute;190 bottom: 16px; left: 50%; transform: translateX(-50%);191 width: 260px; height: 14px; background: #BDBDBD; border-radius: 8px;192 opacity: 0.9;193 }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Status Bar -->200 <div class="status-bar">201 <div>5:16</div>202 <div class="status-icons">203 <div class="status-dot"></div>204 <div class="status-battery"><div class="level"></div></div>205 </div>206 </div>207 208 <!-- Header -->209 <div class="header">210 <svg class="icon" viewBox="0 0 24 24"><path d="M14.5 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>211 <div class="title">hiking boots for w...</div>212 <div class="actions">213 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>214 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" fill="none"/></svg>215 <svg class="icon" viewBox="0 0 24 24"><path d="M6 6h15l-2 8H7L6 6z" stroke="currentColor" stroke-width="2" fill="none"/><circle cx="9" cy="19" r="1.8" fill="currentColor"/><circle cx="17" cy="19" r="1.8" fill="currentColor"/></svg>216 </div>217 </div>218 219 <!-- List -->220 <div class="list">221 <!-- Item 1 -->222 <div class="item">223 <div class="thumb">224 [IMG: Brown Women's Hiking Boot product]225 <div class="fav">226 <svg class="icon small gray" viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-9.4C5 8 6.7 6.3 8.8 6.3c1.4 0 2.7.8 3.2 2 0.5-1.2 1.8-2 3.2-2C17.3 6.3 19 8 19 10.6 19 15.6 12 20 12 20z" fill="none" stroke="currentColor" stroke-width="2"/></svg>227 </div>228 </div>229 <div class="content">230 <div class="title-line">NWT Denali Outback Women's Hiking Boots - Brown Combo - Size 9</div>231 <div class="meta">New (Other) · Denali</div>232 <div class="price">$23.99</div>233 <div class="subtext">or Best Offer<br>+ $72.20 shipping<br>from United States<br>Last one</div>234 </div>235 </div>236 237 <!-- Item 2 -->238 <div class="item">239 <div class="thumb rounded">240 [IMG: Purple Columbia hiking boots pair]241 <div class="fav">242 <svg class="icon small gray" viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-9.4C5 8 6.7 6.3 8.8 6.3c1.4 0 2.7.8 3.2 2 0.5-1.2 1.8-2 3.2-2C17.3 6.3 19 8 19 10.6 19 15.6 12 20 12 20z" fill="none" stroke="currentColor" stroke-width="2"/></svg>243 </div>244 </div>245 <div class="content">246 <div class="title-line">Columbia Newton Ridge Plus Women's Size 9 Waterproof Purple Hiking Boots New</div>247 <div class="meta">New (Other) · Columbia · Bootie</div>248 <div class="price">$59.95</div>249 <div class="subtext">or Best Offer<br>+ $77.43 shipping<br>from United States</div>250 </div>251 </div>252 253 <!-- Item 3 -->254 <div class="item">255 <div class="thumb rounded">256 [IMG: Olive leather hiking boots side view]257 <div class="fav">258 <svg class="icon small gray" viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-9.4C5 8 6.7 6.3 8.8 6.3c1.4 0 2.7.8 3.2 2 0.5-1.2 1.8-2 3.2-2C17.3 6.3 19 8 19 10.6 19 15.6 12 20 12 20z" fill="none" stroke="currentColor" stroke-width="2"/></svg>259 </div>260 </div>261 <div class="content">262 <div class="title-line">Forsake Women’s Lucie Mid Waterproof Hiking Boots Size 9 Olive Leather Upper</div>263 <div class="meta">Pre-Owned</div>264 <div class="price">$35.00</div>265 <div class="subtext">or Best Offer<br>+ $76.57 shipping<br>from United States<br>10 watchers</div>266 </div>267 </div>268 269 <!-- Item 4 (partially visible behind floating controls) -->270 <div class="item">271 <div class="thumb">272 [IMG: Timberland wheat leather hiking shoes]273 <div class="fav">274 <svg class="icon small gray" viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-9.4C5 8 6.7 6.3 8.8 6.3c1.4 0 2.7.8 3.2 2 0.5-1.2 1.8-2 3.2-2C17.3 6.3 19 8 19 10.6 19 15.6 12 20 12 20z" fill="none" stroke="currentColor" stroke-width="2"/></svg>275 </div>276 </div>277 <div class="content">278 <div class="title-line">WOMANS TIMBERLAND HIKING EURO SPRINT WHEAT LEATHER</div>279 <div class="meta">Pre-Owned · Timberland</div>280 <div class="price">$29.99</div>281 <div class="subtext">or Best Offer · Shipping extra</div>282 </div>283 </div>284 </div>285 286 <!-- Floating Sort/Filter pill -->287 <div class="float-controls">288 <div class="chip">289 <svg viewBox="0 0 24 24"><path d="M8 4v12M8 4l-2 2M8 4l2 2M16 20V8M16 20l-2-2M16 20l2-2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>290 <span>Sort</span>291 </div>292 <div class="chip">293 <svg viewBox="0 0 24 24"><path d="M4 6h16l-6 7v5l-4-2v-3L4 6z" stroke="currentColor" stroke-width="2" fill="none" stroke-linejoin="round" stroke-linecap="round"/></svg>294 <span>Filter</span>295 </div>296 </div>297 298 <!-- Bottom Navigation -->299 <div class="bottom-nav">300 <div class="nav-item">301 <svg class="icon" viewBox="0 0 24 24"><path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2h-4v-6H10v6H6a2 2 0 0 1-2-2v-8z" fill="none" stroke="currentColor" stroke-width="2"/></svg>302 <div>Home</div>303 </div>304 <div class="nav-item">305 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2" fill="none"/><path d="M4 20c1.5-4 6-5 8-5s6.5 1 8 5" stroke="currentColor" stroke-width="2" fill="none"/></svg>306 <div>My eBay</div>307 </div>308 <div class="nav-item active">309 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>310 <div>Search</div>311 </div>312 <div class="nav-item">313 <div class="nav-icon-wrap">314 <svg class="icon" viewBox="0 0 24 24"><path d="M12 22c4 0 7-3 7-7V8a7 7 0 1 0-14 0v7c0 4 3 7 7 7z" fill="none" stroke="currentColor" stroke-width="2"/><path d="M9 8a3 3 0 0 1 6 0" stroke="currentColor" stroke-width="2" fill="none"/></svg>315 <div class="badge">1</div>316 </div>317 <div>Inbox</div>318 </div>319 <div class="nav-item">320 <svg class="icon" viewBox="0 0 24 24"><path d="M20 12l-8 8-8-8 8-8 8 8z" fill="none" stroke="currentColor" stroke-width="2"/><path d="M6 12l8-8" stroke="currentColor" stroke-width="2"/></svg>321 <div>Selling</div>322 </div>323 </div>324 325 <!-- Home Indicator -->326 <div class="home-indicator"></div>327 328</div>329</body>330</html>