GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Results - Walking Shoes</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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: #000000;15 color: #FFFFFF;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;17 }18 19 /* Top status bar */20 .status-bar {21 height: 110px;22 padding: 0 40px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #fff;27 font-size: 34px;28 }29 .status-icons {30 display: flex;31 gap: 24px;32 align-items: center;33 }34 .dot { width: 12px; height: 12px; background: #888; border-radius: 50%; display: inline-block; }35 36 /* Header */37 .header {38 height: 170px;39 border-bottom: 2px solid #2C2C2C;40 display: flex;41 align-items: center;42 padding: 0 24px;43 }44 .back-btn {45 width: 90px;46 height: 90px;47 border-radius: 45px;48 display: flex;49 align-items: center;50 justify-content: center;51 margin-right: 18px;52 }53 .header-title {54 font-size: 48px;55 font-weight: 700;56 white-space: nowrap;57 overflow: hidden;58 text-overflow: ellipsis;59 flex: 1;60 }61 .header-actions {62 display: flex;63 gap: 22px;64 }65 .action-circle {66 width: 92px;67 height: 92px;68 border-radius: 46px;69 background: #1C1C1E;70 display: flex;71 align-items: center;72 justify-content: center;73 }74 .action-circle svg { width: 50px; height: 50px; fill: none; stroke: #fff; stroke-width: 4; }75 76 /* List */77 .results {78 padding: 22px 30px 0 30px;79 }80 .item {81 display: flex;82 gap: 30px;83 padding: 26px 0;84 border-bottom: 2px solid #2C2C2C;85 }86 .img-wrap {87 position: relative;88 width: 300px;89 height: 260px;90 border-radius: 32px;91 overflow: hidden;92 }93 .img-ph {94 width: 100%;95 height: 100%;96 background: #E0E0E0;97 border: 1px solid #BDBDBD;98 display: flex;99 align-items: center;100 justify-content: center;101 color: #757575;102 font-size: 26px;103 text-align: center;104 }105 .fav {106 position: absolute;107 right: 12px;108 top: 12px;109 width: 78px;110 height: 78px;111 border-radius: 39px;112 background: rgba(28,28,30,0.9);113 display: flex;114 align-items: center;115 justify-content: center;116 }117 .fav svg { width: 40px; height: 40px; stroke: #fff; fill: none; stroke-width: 5; }118 119 .item-info {120 flex: 1;121 }122 .title {123 font-size: 36px;124 line-height: 48px;125 font-weight: 700;126 margin-bottom: 8px;127 }128 .meta {129 color: #A9A9A9;130 font-size: 26px;131 margin-bottom: 12px;132 }133 .rating {134 display: flex;135 align-items: center;136 gap: 8px;137 margin: 6px 0 10px 0;138 }139 .rating svg { width: 34px; height: 34px; fill: #FFD54F; stroke: none; }140 .price {141 font-size: 44px;142 font-weight: 800;143 margin: 8px 0;144 }145 .ship {146 color: #CFCFCF;147 font-size: 26px;148 line-height: 34px;149 }150 151 /* Floating sort/filter pill */152 .sort-filter {153 position: absolute;154 left: 100px;155 bottom: 310px;156 width: 880px;157 height: 130px;158 background: #6F8DFF;159 border-radius: 65px;160 display: flex;161 align-items: center;162 justify-content: space-around;163 box-shadow: 0 8px 20px rgba(0,0,0,0.35);164 }165 .sf-section {166 display: flex;167 align-items: center;168 gap: 18px;169 color: #fff;170 font-size: 36px;171 font-weight: 700;172 }173 .sf-ico { width: 44px; height: 44px; }174 .divider {175 width: 2px;176 height: 70px;177 background: rgba(255,255,255,0.4);178 }179 180 /* Bottom nav */181 .bottom-nav {182 position: absolute;183 bottom: 0;184 left: 0;185 width: 1080px;186 height: 210px;187 background: #101014;188 border-top: 2px solid #2C2C2C;189 display: flex;190 align-items: center;191 justify-content: space-around;192 padding-bottom: 18px;193 }194 .nav-item {195 display: flex;196 flex-direction: column;197 align-items: center;198 gap: 18px;199 color: #C9C9C9;200 font-size: 28px;201 }202 .nav-item .icon {203 width: 70px;204 height: 70px;205 }206 .nav-item svg { width: 100%; height: 100%; stroke: #C9C9C9; fill: none; stroke-width: 5; }207 .nav-item.active svg { stroke: #1E6BFF; }208 .nav-item.active .label { color: #FFFFFF; }209 .search-highlight {210 width: 90px;211 height: 90px;212 border-radius: 45px;213 background: rgba(30,107,255,0.18);214 display: flex;215 align-items: center;216 justify-content: center;217 }218 .badge {219 position: absolute;220 top: -3px;221 right: -3px;222 background: #FF3B30;223 color: #fff;224 font-size: 24px;225 border-radius: 20px;226 padding: 4px 10px;227 }228 229 /* Home bar indicator */230 .home-indicator {231 position: absolute;232 bottom: 12px;233 left: 50%;234 transform: translateX(-50%);235 width: 280px;236 height: 10px;237 background: #EDEDED;238 border-radius: 6px;239 opacity: 0.7;240 }241</style>242</head>243<body>244<div id="render-target">245 246 <!-- Status bar -->247 <div class="status-bar">248 <div>7:32</div>249 <div class="status-icons">250 <span class="dot"></span>251 <span class="dot"></span>252 <span class="dot"></span>253 <span class="dot"></span>254 <span class="dot"></span>255 <svg width="40" height="40" viewBox="0 0 24 24" style="stroke:#fff;fill:none;stroke-width:2">256 <path d="M2 8h20v8H2z"></path><path d="M18 8v-2a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v2"></path>257 </svg>258 </div>259 </div>260 261 <!-- Header -->262 <div class="header">263 <div class="back-btn">264 <svg width="56" height="56" viewBox="0 0 24 24" style="stroke:#fff;fill:none;stroke-width:3">265 <path d="M15 18l-6-6 6-6"></path>266 </svg>267 </div>268 <div class="header-title">walking shoes for...</div>269 <div class="header-actions">270 <div class="action-circle">271 <svg viewBox="0 0 24 24">272 <circle cx="10" cy="10" r="6"></circle>273 <path d="M21 21l-5-5"></path>274 </svg>275 </div>276 <div class="action-circle">277 <svg viewBox="0 0 24 24">278 <rect x="3" y="6" width="18" height="14" rx="2"></rect>279 <circle cx="12" cy="13" r="4"></circle>280 </svg>281 </div>282 <div class="action-circle">283 <svg viewBox="0 0 24 24">284 <path d="M6 6h15l-2 10H7L6 6z"></path>285 <circle cx="9" cy="20" r="1.7"></circle>286 <circle cx="18" cy="20" r="1.7"></circle>287 </svg>288 </div>289 </div>290 </div>291 292 <!-- Results list -->293 <div class="results">294 295 <!-- Item 1 -->296 <div class="item">297 <div class="img-wrap">298 <div class="img-ph">[IMG: Grey Women's Running Shoes]</div>299 <div class="fav">300 <svg viewBox="0 0 24 24">301 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.9A4.5 4.5 0 0 1 19 11c0 5.5-7 10-7 10z"></path>302 </svg>303 </div>304 </div>305 <div class="item-info">306 <div class="title">Women's Running Sports Shoes Women's Sports Shoes One Step Walking Gym Comfortab</div>307 <div class="meta">Brand New</div>308 <div class="price">$10.99</div>309 <div class="ship">+$3.00 shipping<br>from China</div>310 </div>311 </div>312 313 <!-- Item 2 -->314 <div class="item">315 <div class="img-wrap">316 <div class="img-ph">[IMG: Black Skechers Slip-on]</div>317 <div class="fav">318 <svg viewBox="0 0 24 24">319 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.9A4.5 4.5 0 0 1 19 11c0 5.5-7 10-7 10z"></path>320 </svg>321 </div>322 </div>323 <div class="item-info">324 <div class="title">Skechers Women's Arch Comfort Sneaker Walking Shoes Ladies Comfortable Shoe</div>325 <div class="meta">Brand New</div>326 <div class="rating">327 <svg viewBox="0 0 20 20"><polygon points="10,1 12,7 18,7 13,11 15,17 10,13 5,17 7,11 2,7 8,7"></polygon></svg>328 <svg viewBox="0 0 20 20"><polygon points="10,1 12,7 18,7 13,11 15,17 10,13 5,17 7,11 2,7 8,7"></polygon></svg>329 <svg viewBox="0 0 20 20"><polygon points="10,1 12,7 18,7 13,11 15,17 10,13 5,17 7,11 2,7 8,7"></polygon></svg>330 <svg viewBox="0 0 20 20"><polygon points="10,1 12,7 18,7 13,11 15,17 10,13 5,17 7,11 2,7 8,7"></polygon></svg>331 <svg viewBox="0 0 20 20"><polygon points="10,1 12,7 18,7 13,11 15,17 10,13 5,17 7,11 2,7 8,7"></polygon></svg>332 <div style="color:#CFCFCF; font-size:26px;">(1)</div>333 </div>334 <div class="price">$37.99</div>335 <div class="ship">+$74.34 shipping<br>from United States<br>29+ sold</div>336 </div>337 </div>338 339 <!-- Item 3 -->340 <div class="item">341 <div class="img-wrap">342 <div class="img-ph">[IMG: White Reebok Classic]</div>343 <div class="fav">344 <svg viewBox="0 0 24 24">345 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.9A4.5 4.5 0 0 1 19 11c0 5.5-7 10-7 10z"></path>346 </svg>347 </div>348 </div>349 <div class="item-info">350 <div class="title">Reebok Classic Princess Women's Sneaker Athletic Shoes White Trainers #475 #101</div>351 <div class="meta">Brand New</div>352 <div class="price">$49.95</div>353 <div class="ship">+$74.63 shipping<br>from United States<br>68+ sold</div>354 </div>355 </div>356 357 <!-- Item 4 -->358 <div class="item">359 <div class="img-wrap">360 <div class="img-ph">[IMG: Assorted Women's Running Shoes]</div>361 <div class="fav">362 <svg viewBox="0 0 24 24">363 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.9A4.5 4.5 0 0 1 19 11c0 5.5-7 10-7 10z"></path>364 </svg>365 </div>366 </div>367 <div class="item-info">368 <div class="title">Avia Women's Arch Support Athletic Walking Lace-up</div>369 <div class="meta">Brand New</div>370 <div class="price">$26.99</div>371 <div class="ship">+$9.99 shipping</div>372 </div>373 </div>374 375 </div>376 377 <!-- Sort / Filter floating pill -->378 <div class="sort-filter">379 <div class="sf-section">380 <svg class="sf-ico" viewBox="0 0 24 24" style="stroke:#fff;fill:none;stroke-width:3">381 <path d="M7 4v16M4 7l3-3 3 3M17 20V4M14 17l3 3 3-3"></path>382 </svg>383 <div>Sort</div>384 </div>385 <div class="divider"></div>386 <div class="sf-section">387 <svg class="sf-ico" viewBox="0 0 24 24" style="stroke:#fff;fill:none;stroke-width:3">388 <path d="M3 6h18M6 12h12M10 18h4"></path>389 </svg>390 <div>Filter</div>391 </div>392 </div>393 394 <!-- Bottom navigation -->395 <div class="bottom-nav">396 <div class="nav-item">397 <div class="icon">398 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9H3z"></path></svg>399 </div>400 <div class="label">Home</div>401 </div>402 <div class="nav-item">403 <div class="icon">404 <svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="4"></circle><path d="M4 21c0-4 4-7 8-7s8 3 8 7"></path></svg>405 </div>406 <div class="label">My eBay</div>407 </div>408 <div class="nav-item active">409 <div class="search-highlight">410 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><path d="M21 21l-5-5"></path></svg>411 </div>412 <div class="label">Search</div>413 </div>414 <div class="nav-item" style="position:relative;">415 <div class="icon">416 <svg viewBox="0 0 24 24"><path d="M12 21c4.4 0 8-3.6 8-8s-3.6-8-8-8-8 3.6-8 8"></path><path d="M12 8v5l3 2"></path></svg>417 </div>418 <div class="badge">1</div>419 <div class="label">Inbox</div>420 </div>421 <div class="nav-item">422 <div class="icon">423 <svg viewBox="0 0 24 24"><path d="M3 5h18M6 9h12M9 13h6M6 19l3-6h6l3 6z"></path></svg>424 </div>425 <div class="label">Selling</div>426 </div>427 </div>428 429 <div class="home-indicator"></div>430</div>431</body>432</html>