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; }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, Helvetica, Arial, sans-serif;16 color: #111;17 }18 19 /* Status bar */20 .status-bar {21 height: 80px;22 padding: 0 32px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #222;27 font-weight: 600;28 font-size: 32px;29 }30 .status-left { display: flex; align-items: center; gap: 18px; }31 .status-icon { width: 32px; height: 32px; }32 33 /* Header */34 .header {35 height: 160px;36 display: flex;37 align-items: center;38 padding: 0 32px;39 gap: 24px;40 }41 .back-btn, .search-btn {42 width: 72px; height: 72px;43 display: flex; align-items: center; justify-content: center;44 }45 .title {46 font-size: 52px;47 font-weight: 700;48 letter-spacing: -0.5px;49 flex: 1;50 }51 52 /* Action row */53 .action-row {54 display: flex;55 align-items: center;56 justify-content: space-between;57 padding: 8px 32px 16px 32px;58 }59 .save-search {60 display: inline-flex;61 align-items: center;62 gap: 16px;63 color: #1a73e8;64 font-size: 32px;65 font-weight: 600;66 }67 .sort-link {68 color: #6b6b6b;69 font-size: 30px;70 font-weight: 600;71 }72 73 /* List */74 .list {75 padding: 0 32px;76 }77 .item {78 display: grid;79 grid-template-columns: 300px 1fr;80 gap: 32px;81 padding: 24px 0;82 align-items: start;83 }84 .item + .item { border-top: 2px solid #e9e9e9; }85 .img-wrap {86 position: relative;87 width: 300px;88 height: 300px;89 border-radius: 24px;90 overflow: hidden;91 }92 .img-ph {93 width: 100%; height: 100%;94 background: #E0E0E0;95 border: 1px solid #BDBDBD;96 display: flex; align-items: center; justify-content: center;97 color: #757575;98 font-size: 28px;99 text-align: center;100 }101 .fav-btn {102 position: absolute;103 right: 16px; top: 16px;104 width: 72px; height: 72px;105 border-radius: 36px;106 background: #fff;107 box-shadow: 0 2px 8px rgba(0,0,0,0.12);108 display: flex; align-items: center; justify-content: center;109 }110 111 .info .title {112 font-size: 36px;113 font-weight: 700;114 line-height: 1.25;115 margin: 6px 0 8px 0;116 }117 .meta {118 color: #777;119 font-size: 28px;120 margin-bottom: 16px;121 }122 .price {123 font-size: 44px;124 font-weight: 800;125 margin: 8px 0;126 }127 .subtext {128 color: #6b6b6b;129 font-size: 26px;130 line-height: 1.35;131 }132 133 .results-count {134 margin: 24px 0 12px 0;135 text-align: center;136 font-size: 32px;137 color: #333;138 font-weight: 600;139 }140 141 /* Bottom nav */142 .bottom-nav {143 position: absolute;144 left: 0; right: 0; bottom: 0;145 height: 180px;146 border-top: 2px solid #e9e9e9;147 background: #fff;148 display: flex;149 align-items: center;150 justify-content: space-around;151 padding: 0 12px;152 }153 .nav-item {154 display: flex;155 flex-direction: column;156 align-items: center;157 gap: 16px;158 color: #555;159 font-size: 26px;160 font-weight: 600;161 width: 180px;162 }163 .nav-item.active { color: #1a73e8; }164 .nav-icon {165 width: 72px; height: 72px;166 display: flex; align-items: center; justify-content: center;167 }168 169 /* bell badge */170 .badge {171 position: absolute;172 top: -6px;173 right: -6px;174 width: 32px; height: 32px;175 background: #e53935;176 color: #fff;177 border-radius: 16px;178 font-size: 22px;179 display: flex; align-items: center; justify-content: center;180 font-weight: 700;181 }182 .bell-wrap { position: relative; }183 184 /* Footer spacer to keep content above nav */185 .content-spacer { height: 200px; }186</style>187</head>188<body>189<div id="render-target">190 191 <!-- Status Bar -->192 <div class="status-bar">193 <div class="status-left">194 <div>5:15</div>195 <svg class="status-icon" viewBox="0 0 24 24">196 <circle cx="12" cy="12" r="4" fill="#777"></circle>197 <g stroke="#777" stroke-width="2">198 <line x1="12" y1="1" x2="12" y2="5"></line>199 <line x1="12" y1="19" x2="12" y2="23"></line>200 <line x1="1" y1="12" x2="5" y2="12"></line>201 <line x1="19" y1="12" x2="23" y2="12"></line>202 <line x1="4.2" y1="4.2" x2="6.9" y2="6.9"></line>203 <line x1="17.1" y1="17.1" x2="19.8" y2="19.8"></line>204 <line x1="4.2" y1="19.8" x2="6.9" y2="17.1"></line>205 <line x1="17.1" y1="6.9" x2="19.8" y2="4.2"></line>206 </g>207 </svg>208 </div>209 <div></div>210 </div>211 212 <!-- Header -->213 <div class="header">214 <div class="back-btn">215 <svg viewBox="0 0 24 24" width="48" height="48">216 <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>217 </svg>218 </div>219 <div class="title">hiking boots for w...</div>220 <div class="search-btn">221 <svg viewBox="0 0 24 24" width="48" height="48">222 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.5" fill="none"></circle>223 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#111" stroke-width="2.5" stroke-linecap="round"></line>224 </svg>225 </div>226 </div>227 228 <!-- Actions -->229 <div class="action-row">230 <div class="save-search">231 <svg viewBox="0 0 24 24" width="36" height="36">232 <path d="M12 21s-6-4.35-9-7.35C-1 7.82 3.34 3 7.5 5.2 9.46 6.25 12 9 12 9s2.54-2.75 4.5-3.8C20.66 3 25 7.82 21 13.65 18 16.65 12 21 12 21z" fill="none" stroke="#1a73e8" stroke-width="2"></path>233 </svg>234 <span>Save this search</span>235 </div>236 <div class="sort-link">Sort</div>237 </div>238 239 <!-- List -->240 <div class="list">241 242 <!-- Item 1 -->243 <div class="item">244 <div class="img-wrap">245 <div class="img-ph">[IMG: Hiking Boots Placeholder]</div>246 <div class="fav-btn">247 <svg viewBox="0 0 24 24" width="36" height="36">248 <path d="M12 21s-6-4.35-9-7.35C-1 7.82 3.34 3 7.5 5.2 9.46 6.25 12 9 12 9s2.54-2.75 4.5-3.8C20.66 3 25 7.82 21 13.65 18 16.65 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"></path>249 </svg>250 </div>251 </div>252 <div class="info">253 <div class="title">Danner Women's Mountain 600 4.5 Inch Waterproof Hiking Boots Rich Brown Size 9M</div>254 <div class="meta">Brand New · Danner</div>255 <div class="price">$80.00</div>256 <div class="subtext">2 bids · 1d 4h · or Buy It Now<br>+$78.65 shipping<br>from United States</div>257 </div>258 </div>259 260 <!-- Item 2 -->261 <div class="item">262 <div class="img-wrap">263 <div class="img-ph">[IMG: Hiking Boots Placeholder]</div>264 <div class="fav-btn">265 <svg viewBox="0 0 24 24" width="36" height="36">266 <path d="M12 21s-6-4.35-9-7.35C-1 7.82 3.34 3 7.5 5.2 9.46 6.25 12 9 12 9s2.54-2.75 4.5-3.8C20.66 3 25 7.82 21 13.65 18 16.65 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"></path>267 </svg>268 </div>269 </div>270 <div class="info">271 <div class="title">Maurice’s Riley Brown Outdoor Hiking Boots Women’s Size 9 New</div>272 <div class="meta">New (Other) · Maurices · Bootie</div>273 <div class="price">$25.00</div>274 <div class="subtext">+$83.27 shipping<br>from United States</div>275 </div>276 </div>277 278 <!-- Item 3 -->279 <div class="item">280 <div class="img-wrap">281 <div class="img-ph">[IMG: Brown Hiking Boot]</div>282 <div class="fav-btn">283 <svg viewBox="0 0 24 24" width="36" height="36">284 <path d="M12 21s-6-4.35-9-7.35C-1 7.82 3.34 3 7.5 5.2 9.46 6.25 12 9 12 9s2.54-2.75 4.5-3.8C20.66 3 25 7.82 21 13.65 18 16.65 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"></path>285 </svg>286 </div>287 </div>288 <div class="info">289 <div class="title">NWT Denali Outback Women's Hiking Boots - Brown Combo - Size 9</div>290 <div class="meta">New (Other) · Denali</div>291 <div class="price">$23.99</div>292 <div class="subtext">or Best Offer<br>+$72.20 shipping<br>from United States<br>Last one</div>293 </div>294 </div>295 296 <div class="results-count">5,300+ results</div>297 298 <div class="content-spacer"></div>299 </div>300 301 <!-- Bottom Navigation -->302 <div class="bottom-nav">303 <div class="nav-item">304 <div class="nav-icon">305 <svg viewBox="0 0 24 24" width="48" height="48">306 <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-9z" fill="none" stroke="#555" stroke-width="2"></path>307 </svg>308 </div>309 <div>Home</div>310 </div>311 <div class="nav-item">312 <div class="nav-icon">313 <svg viewBox="0 0 24 24" width="48" height="48">314 <circle cx="12" cy="8" r="4" fill="none" stroke="#555" stroke-width="2"></circle>315 <path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8" fill="none" stroke="#555" stroke-width="2"></path>316 </svg>317 </div>318 <div>My eBay</div>319 </div>320 <div class="nav-item active">321 <div class="nav-icon">322 <svg viewBox="0 0 24 24" width="48" height="48">323 <circle cx="11" cy="11" r="7" stroke="#1a73e8" stroke-width="2.5" fill="none"></circle>324 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#1a73e8" stroke-width="2.5" stroke-linecap="round"></line>325 </svg>326 </div>327 <div>Search</div>328 </div>329 <div class="nav-item">330 <div class="nav-icon bell-wrap">331 <svg viewBox="0 0 24 24" width="48" height="48">332 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-12 0v5L4 18v2h16v-2l-2-2z" fill="none" stroke="#555" stroke-width="2"></path>333 </svg>334 <div class="badge">1</div>335 </div>336 <div>Inbox</div>337 </div>338 <div class="nav-item">339 <div class="nav-icon">340 <svg viewBox="0 0 24 24" width="48" height="48">341 <path d="M20 6l-4-4-12 12v4h4L20 6z" fill="none" stroke="#555" stroke-width="2"></path>342 <circle cx="18" cy="6" r="2" fill="#555"></circle>343 </svg>344 </div>345 <div>Selling</div>346 </div>347 </div>348 349</div>350</body>351</html>