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", Roboto, Helvetica, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 display: flex;21 align-items: center;22 padding: 0 40px;23 color: #2c2c2c;24 font-size: 42px;25 }26 .status-right {27 margin-left: auto;28 display: flex;29 align-items: center;30 gap: 24px;31 }32 33 /* Header / search */34 .header {35 display: flex;36 align-items: center;37 padding: 10px 36px 0 36px;38 height: 150px;39 }40 .icon-btn {41 width: 78px;42 height: 78px;43 display: flex;44 align-items: center;45 justify-content: center;46 }47 .search-title {48 font-size: 60px;49 font-weight: 700;50 margin-left: 16px;51 letter-spacing: -0.5px;52 white-space: nowrap;53 overflow: hidden;54 text-overflow: ellipsis;55 max-width: 800px;56 }57 .header .search-icon {58 margin-left: auto;59 width: 78px;60 height: 78px;61 display: flex;62 align-items: center;63 justify-content: center;64 }65 66 /* Save search & sort */67 .actions-row {68 display: flex;69 align-items: center;70 padding: 6px 40px 16px 40px;71 }72 .save-search {73 display: flex;74 align-items: center;75 gap: 16px;76 color: #4A6BFF;77 font-size: 40px;78 }79 .sort-link {80 margin-left: auto;81 font-size: 36px;82 color: #7a7a7a;83 }84 85 /* Result list */86 .divider {87 height: 2px;88 background: #e6e6e6;89 margin: 20px 40px;90 }91 .result {92 display: flex;93 gap: 34px;94 padding: 28px 40px;95 position: relative;96 }97 .result-img {98 width: 300px;99 height: 230px;100 background: #E0E0E0;101 border: 1px solid #BDBDBD;102 border-radius: 28px;103 display: flex;104 align-items: center;105 justify-content: center;106 color: #757575;107 font-size: 30px;108 text-align: center;109 line-height: 1.2;110 padding: 10px;111 }112 .result-info {113 flex: 1;114 min-width: 0;115 }116 .item-title {117 font-size: 44px;118 font-weight: 700;119 line-height: 1.25;120 margin-bottom: 8px;121 }122 .item-sub {123 font-size: 34px;124 color: #808080;125 }126 .price {127 font-size: 52px;128 font-weight: 800;129 margin-top: 14px;130 }131 .item-meta {132 font-size: 32px;133 color: #666;134 margin-top: 10px;135 line-height: 1.45;136 }137 .wish-circle {138 position: absolute;139 top: 34px;140 right: 40px;141 width: 74px;142 height: 74px;143 border-radius: 50%;144 border: 1px solid #d9d9d9;145 background: #fff;146 display: flex;147 align-items: center;148 justify-content: center;149 }150 151 /* Results count */152 .results-count {153 text-align: center;154 font-size: 38px;155 color: #333;156 padding: 22px 0 0 0;157 }158 159 /* Bottom nav */160 .bottom-nav {161 position: absolute;162 left: 0;163 right: 0;164 bottom: 0;165 height: 220px;166 border-top: 1px solid #e8e8e8;167 background: #fff;168 display: flex;169 align-items: center;170 justify-content: space-around;171 padding-bottom: 30px; /* room for home indicator */172 }173 .nav-item {174 display: flex;175 flex-direction: column;176 align-items: center;177 gap: 12px;178 }179 .nav-item span {180 font-size: 30px;181 color: #666;182 }183 .nav-item.active span {184 color: #4A6BFF;185 font-weight: 700;186 }187 .badge {188 position: absolute;189 top: -6px;190 right: -6px;191 background: #ff3b30;192 color: #fff;193 font-size: 24px;194 width: 34px;195 height: 34px;196 border-radius: 17px;197 display: flex;198 align-items: center;199 justify-content: center;200 font-weight: 700;201 box-shadow: 0 0 0 2px #fff;202 }203 .home-indicator {204 position: absolute;205 bottom: 16px;206 left: 50%;207 transform: translateX(-50%);208 width: 360px;209 height: 12px;210 background: #b5b5b5;211 border-radius: 8px;212 }213</style>214</head>215<body>216<div id="render-target">217 218 <!-- Status bar -->219 <div class="status-bar">220 <div>5:16</div>221 <div class="status-right">222 <svg width="50" height="50" viewBox="0 0 100 100">223 <circle cx="50" cy="50" r="20" fill="#FDB813"></circle>224 <g stroke="#FDB813" stroke-width="6">225 <line x1="50" y1="5" x2="50" y2="25"></line>226 <line x1="50" y1="75" x2="50" y2="95"></line>227 <line x1="5" y1="50" x2="25" y2="50"></line>228 <line x1="75" y1="50" x2="95" y2="50"></line>229 <line x1="20" y1="20" x2="32" y2="32"></line>230 <line x1="68" y1="68" x2="80" y2="80"></line>231 <line x1="20" y1="80" x2="32" y2="68"></line>232 <line x1="68" y1="32" x2="80" y2="20"></line>233 </g>234 </svg>235 </div>236 </div>237 238 <!-- Header -->239 <div class="header">240 <div class="icon-btn">241 <svg width="60" height="60" viewBox="0 0 100 100">242 <path d="M65 20 L35 50 L65 80" fill="none" stroke="#000" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"></path>243 </svg>244 </div>245 <div class="search-title">hiking boots for w...</div>246 <div class="search-icon">247 <svg width="64" height="64" viewBox="0 0 100 100">248 <circle cx="42" cy="42" r="26" fill="none" stroke="#000" stroke-width="8"></circle>249 <line x1="62" y1="62" x2="88" y2="88" stroke="#000" stroke-width="8" stroke-linecap="round"></line>250 </svg>251 </div>252 </div>253 254 <!-- Actions row -->255 <div class="actions-row">256 <div class="save-search">257 <svg width="44" height="44" viewBox="0 0 100 100">258 <path d="M50 82 C30 66 18 56 18 40 C18 28 28 20 40 20 C46 20 52 24 55 29 C58 24 64 20 70 20 C82 20 92 28 92 40 C92 56 80 66 60 82 C56 86 54 86 50 82 Z" fill="none" stroke="#4A6BFF" stroke-width="8"></path>259 </svg>260 <span>Save this search</span>261 </div>262 <div class="sort-link">Sort</div>263 </div>264 265 <!-- Result 1 -->266 <div class="result">267 <div class="result-img">[IMG: Danner brown hiking boot close-up]</div>268 <div class="result-info">269 <div class="item-title">Danner Women's Mountain 600 4.5 Inch Waterproof Hiking Boots Rich Brown Size 9M</div>270 <div class="item-sub">Brand New · Danner</div>271 <div class="price">$80.00</div>272 <div class="item-meta">2 bids · 1d 4h · or Buy It Now<br>+$78.65 shipping · from United States</div>273 </div>274 <div class="wish-circle">275 <svg width="40" height="40" viewBox="0 0 100 100">276 <path d="M50 82 C30 66 18 56 18 40 C18 28 28 20 40 20 C46 20 52 24 55 29 C58 24 64 20 70 20 C82 20 92 28 92 40 C92 56 80 66 60 82 C56 86 54 86 50 82 Z" fill="none" stroke="#333" stroke-width="7"></path>277 </svg>278 </div>279 </div>280 <div class="divider"></div>281 282 <!-- Result 2 -->283 <div class="result">284 <div class="result-img">[IMG: Brown women's hiking boots on table]</div>285 <div class="result-info">286 <div class="item-title">Maurice’s Riley Brown Outdoor Hiking Boots Women’s Size 9 New</div>287 <div class="item-sub">New (Other) · Maurices · Bootie</div>288 <div class="price">$25.00</div>289 <div class="item-meta">+$83.27 shipping · from United States</div>290 </div>291 <div class="wish-circle">292 <svg width="40" height="40" viewBox="0 0 100 100">293 <path d="M50 82 C30 66 18 56 18 40 C18 28 28 20 40 20 C46 20 52 24 55 29 C58 24 64 20 70 20 C82 20 92 28 92 40 C92 56 80 66 60 82 C56 86 54 86 50 82 Z" fill="none" stroke="#333" stroke-width="7"></path>294 </svg>295 </div>296 </div>297 <div class="divider"></div>298 299 <!-- Result 3 -->300 <div class="result">301 <div class="result-img">[IMG: Brown hiking boot product photo]</div>302 <div class="result-info">303 <div class="item-title">NWT Denali Outback Women's Hiking Boots - Brown Combo - Size 9</div>304 <div class="item-sub">New (Other) · Denali</div>305 <div class="price">$23.99</div>306 <div class="item-meta">or Best Offer<br>+$72.20 shipping · from United States · Last one</div>307 </div>308 <div class="wish-circle">309 <svg width="40" height="40" viewBox="0 0 100 100">310 <path d="M50 82 C30 66 18 56 18 40 C18 28 28 20 40 20 C46 20 52 24 55 29 C58 24 64 20 70 20 C82 20 92 28 92 40 C92 56 80 66 60 82 C56 86 54 86 50 82 Z" fill="none" stroke="#333" stroke-width="7"></path>311 </svg>312 </div>313 </div>314 315 <div class="divider" style="margin-top: 16px;"></div>316 <div class="results-count">5,300+ results</div>317 318 <!-- Bottom navigation -->319 <div class="bottom-nav">320 <div class="nav-item">321 <svg width="64" height="64" viewBox="0 0 100 100">322 <path d="M15 45 L50 18 L85 45 V85 H60 V62 H40 V85 H15 Z" fill="none" stroke="#666" stroke-width="6" stroke-linejoin="round"></path>323 </svg>324 <span>Home</span>325 </div>326 <div class="nav-item">327 <svg width="64" height="64" viewBox="0 0 100 100">328 <circle cx="50" cy="32" r="16" fill="none" stroke="#666" stroke-width="6"></circle>329 <path d="M20 84 C22 64 36 56 50 56 C64 56 78 64 80 84" fill="none" stroke="#666" stroke-width="6" stroke-linecap="round"></path>330 </svg>331 <span>My eBay</span>332 </div>333 <div class="nav-item active">334 <svg width="64" height="64" viewBox="0 0 100 100">335 <circle cx="44" cy="44" r="26" fill="none" stroke="#4A6BFF" stroke-width="8"></circle>336 <line x1="64" y1="64" x2="88" y2="88" stroke="#4A6BFF" stroke-width="8" stroke-linecap="round"></line>337 </svg>338 <span>Search</span>339 </div>340 <div class="nav-item" style="position: relative;">341 <svg width="64" height="64" viewBox="0 0 100 100">342 <path d="M50 18 C62 18 70 26 70 38 V54 C76 58 80 64 80 70 H20 C20 64 24 58 30 54 V38 C30 26 38 18 50 18 Z" fill="none" stroke="#666" stroke-width="6" stroke-linejoin="round"></path>343 <circle cx="50" cy="78" r="4" fill="#666"></circle>344 </svg>345 <span>Inbox</span>346 <div class="badge">1</div>347 </div>348 <div class="nav-item">349 <svg width="64" height="64" viewBox="0 0 100 100">350 <path d="M18 52 L56 14 L86 44 L48 82 L18 82 Z" fill="none" stroke="#666" stroke-width="6" stroke-linejoin="round"></path>351 <circle cx="64" cy="36" r="6" fill="#666"></circle>352 </svg>353 <span>Selling</span>354 </div>355 <div class="home-indicator"></div>356 </div>357 358</div>359</body>360</html>