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 - Allbirds Shoes</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #000000;15 border-radius: 36px;16 color: #ffffff;17 }18 19 /* Status bar */20 .statusbar {21 position: absolute;22 top: 12px;23 left: 24px;24 right: 24px;25 height: 48px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #fafafa;30 font-weight: 600;31 font-size: 32px;32 opacity: 0.85;33 }34 .status-icons {35 display: flex;36 gap: 18px;37 align-items: center;38 }39 .status-dot {40 width: 10px; height: 10px; background: #cfcfcf; border-radius: 50%;41 }42 43 /* Header */44 .header {45 position: absolute;46 top: 96px;47 left: 24px;48 right: 24px;49 }50 .title-row {51 display: flex;52 align-items: center;53 justify-content: space-between;54 }55 .title-left {56 display: flex;57 align-items: center;58 gap: 16px;59 }60 .back-btn {61 width: 56px; height: 56px; border-radius: 28px; background: transparent; border: 2px solid #2a2a2a; display: flex; align-items: center; justify-content: center;62 }63 .back-btn svg { width: 28px; height: 28px; fill: none; stroke: #ffffff; stroke-width: 4; }64 .page-title { font-size: 64px; font-weight: 800; letter-spacing: 0.5px; }65 66 .title-actions {67 display: flex;68 gap: 18px;69 align-items: center;70 }71 .circle-btn {72 width: 96px; height: 96px; border-radius: 48px; background: #1a1a1a; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(255,255,255,0.06) inset;73 }74 .circle-btn svg { width: 42px; height: 42px; fill: none; stroke: #e0e0e0; stroke-width: 3.5; }75 76 /* Secondary row */77 .secondary {78 margin-top: 28px;79 display: flex;80 align-items: center;81 justify-content: space-between;82 padding-right: 12px;83 }84 .save-search {85 display: flex;86 align-items: center;87 gap: 12px;88 color: #5aa7ff;89 font-size: 36px;90 font-weight: 600;91 }92 .save-search svg { width: 34px; height: 34px; stroke: #5aa7ff; fill: none; stroke-width: 3.5; }93 .filters {94 display: flex;95 gap: 32px;96 align-items: center;97 }98 .filter-item {99 display: flex;100 align-items: center;101 gap: 10px;102 color: #b9c7ff;103 font-size: 32px;104 font-weight: 600;105 }106 .filter-item svg { width: 30px; height: 30px; stroke: #b9c7ff; fill: none; stroke-width: 3.5; }107 108 /* List */109 .list-area {110 position: absolute;111 top: 340px;112 left: 24px;113 right: 24px;114 bottom: 250px;115 overflow: hidden;116 }117 .card {118 display: flex;119 gap: 24px;120 padding: 24px 0;121 border-top: 1px solid #222;122 }123 .card:first-child { border-top: none; }124 .image-wrap {125 position: relative;126 width: 420px;127 height: 320px;128 border-radius: 32px;129 overflow: hidden;130 }131 .image-holder {132 width: 100%; height: 100%;133 background: #E0E0E0;134 border: 1px solid #BDBDBD;135 display: flex; align-items: center; justify-content: center;136 color: #757575; font-weight: 600; font-size: 28px; text-align: center;137 border-radius: 32px;138 }139 .fav-circle {140 position: absolute;141 top: 14px; right: 14px;142 width: 80px; height: 80px; border-radius: 40px; background: rgba(28,28,28,0.9);143 border: 2px solid #2a2a2a;144 display: flex; align-items: center; justify-content: center;145 }146 .fav-circle svg { width: 40px; height: 40px; fill: none; stroke: #ffffff; stroke-width: 3.5; }147 148 .details {149 flex: 1;150 }151 .title {152 font-size: 38px;153 font-weight: 700;154 line-height: 1.2;155 margin-bottom: 10px;156 }157 .meta {158 color: #9e9e9e;159 font-size: 28px;160 margin-bottom: 10px;161 }162 .price {163 font-size: 64px;164 font-weight: 800;165 margin: 8px 0;166 }167 .subline {168 color: #cccccc;169 font-size: 28px;170 line-height: 1.4;171 }172 .promo {173 color: #ff5fa0;174 font-size: 30px;175 font-weight: 700;176 margin-top: 8px;177 }178 .sponsored {179 color: #848484;180 font-size: 28px;181 margin: 10px 0 4px 6px;182 }183 184 /* Results count */185 .results-count {186 position: absolute;187 left: 0; right: 0;188 bottom: 210px;189 text-align: center;190 color: #e0e0e0;191 font-size: 34px;192 font-weight: 600;193 }194 195 /* Bottom nav */196 .bottom-nav {197 position: absolute;198 left: 0; right: 0; bottom: 0;199 height: 180px;200 background: #111111;201 border-top: 1px solid #222;202 display: flex;203 align-items: center;204 justify-content: space-around;205 padding: 10px 0 20px;206 }207 .nav-item {208 display: flex;209 flex-direction: column;210 align-items: center;211 gap: 12px;212 color: #cfcfcf;213 font-size: 26px;214 font-weight: 600;215 }216 .nav-item svg { width: 44px; height: 44px; stroke: #cfcfcf; fill: none; stroke-width: 3.5; }217 .nav-item.active .icon-ring {218 width: 72px; height: 72px; border-radius: 36px; border: 4px solid #2b7cff; display: flex; align-items: center; justify-content: center;219 }220 .nav-item.active svg { stroke: #2b7cff; }221 .home-spacer { height: 6px; }222</style>223</head>224<body>225<div id="render-target">226 227 <!-- Status bar -->228 <div class="statusbar">229 <div>8:36</div>230 <div class="status-icons">231 <div class="status-dot"></div>232 <div class="status-dot"></div>233 <div class="status-dot"></div>234 </div>235 </div>236 237 <!-- Header -->238 <div class="header">239 <div class="title-row">240 <div class="title-left">241 <div class="back-btn" aria-label="Back">242 <svg viewBox="0 0 24 24"><path d="M15 6 L9 12 L15 18" /></svg>243 </div>244 <div class="page-title">allbird shoes</div>245 </div>246 <div class="title-actions">247 <div class="circle-btn" aria-label="Search">248 <svg viewBox="0 0 24 24">249 <circle cx="11" cy="11" r="6"></circle>250 <line x1="16" y1="16" x2="21" y2="21"></line>251 </svg>252 </div>253 <div class="circle-btn" aria-label="Camera">254 <svg viewBox="0 0 24 24">255 <rect x="4.5" y="7" width="15" height="11" rx="2"></rect>256 <circle cx="12" cy="12.5" r="3.5"></circle>257 <path d="M8 7 L10 4 L14 4 L16 7"></path>258 </svg>259 </div>260 <div class="circle-btn" aria-label="Cart">261 <svg viewBox="0 0 24 24">262 <path d="M3 6 L5 6 L6 18 L18 18 L20 8 L8 8"></path>263 <circle cx="9" cy="21" r="2"></circle>264 <circle cx="17" cy="21" r="2"></circle>265 </svg>266 </div>267 </div>268 </div>269 270 <div class="secondary">271 <div class="save-search">272 <svg viewBox="0 0 24 24"><path d="M12 21 C5 15, 3 12, 5.5 9.5 C7.5 7.5, 10 8, 12 10 C14 8, 16.5 7.5, 18.5 9.5 C21 12, 19 15, 12 21 Z"></path></svg>273 <span>Save this search</span>274 </div>275 <div class="filters">276 <div class="filter-item">277 <span>Sort</span>278 <svg viewBox="0 0 24 24"><path d="M7 7 L17 7"></path><path d="M9 12 L15 12"></path><path d="M11 17 L13 17"></path></svg>279 </div>280 <div class="filter-item">281 <span>Filter</span>282 <svg viewBox="0 0 24 24"><path d="M3 5 H21 L14 12 V18 L10 20 V12 Z"></path></svg>283 </div>284 </div>285 </div>286 </div>287 288 <!-- List -->289 <div class="list-area">290 291 <div class="card">292 <div class="image-wrap">293 <div class="image-holder">[IMG: Blue Allbirds Wool Runners]</div>294 <div class="fav-circle">295 <svg viewBox="0 0 24 24"><path d="M12 21 C5 15, 3 12, 5.5 9.5 C7.5 7.5, 10 8, 12 10 C14 8, 16.5 7.5, 18.5 9.5 C21 12, 19 15, 12 21 Z"></path></svg>296 </div>297 </div>298 <div class="details">299 <div class="title">Allbirds Shoes Mens 10 Blue Athletic Wool Runners Sams Club</div>300 <div class="meta">Pre-Owned • Allbirds</div>301 <div class="price">$38.00</div>302 <div class="subline">or Best Offer<br>+$28.05 shipping<br>from United States</div>303 <div class="promo">Extra 10% off with coupon</div>304 </div>305 </div>306 307 <div class="sponsored">Sponsored</div>308 <div class="card">309 <div class="image-wrap">310 <div class="image-holder">[IMG: Black Allbirds Tree Dasher]</div>311 <div class="fav-circle">312 <svg viewBox="0 0 24 24"><path d="M12 21 C5 15, 3 12, 5.5 9.5 C7.5 7.5, 10 8, 12 10 C14 8, 16.5 7.5, 18.5 9.5 C21 12, 19 15, 12 21 Z"></path></svg>313 </div>314 </div>315 <div class="details">316 <div class="title">Allbirds TD Tree Dasher Running Casual Shoes Womens Black Size 9.5 US</div>317 <div class="meta">Pre-Owned • Allbirds</div>318 <div class="price">$10.00</div>319 <div class="subline">or Best Offer<br>+$28.05 shipping<br>from United States</div>320 </div>321 </div>322 323 <div class="sponsored">Sponsored</div>324 <div class="card">325 <div class="image-wrap">326 <div class="image-holder">[IMG: Black Allbirds Tree Runners with Yellow Sole]</div>327 <div class="fav-circle">328 <svg viewBox="0 0 24 24"><path d="M12 21 C5 15, 3 12, 5.5 9.5 C7.5 7.5, 10 8, 12 10 C14 8, 16.5 7.5, 18.5 9.5 C21 12, 19 15, 12 21 Z"></path></svg>329 </div>330 </div>331 <div class="details">332 <div class="title">All Birds Tree Runners Womens Size 10 Black Athletic Running Shoes Sneakers</div>333 <div class="meta">Pre-Owned • Allbirds</div>334 <div class="price">$34.99</div>335 <div class="subline">or Best Offer<br>+$84.79 shipping</div>336 </div>337 </div>338 339 </div>340 341 <div class="results-count">11,000+ results</div>342 343 <!-- Bottom navigation -->344 <div class="bottom-nav">345 <div class="nav-item">346 <svg viewBox="0 0 24 24"><path d="M3 11 L12 4 L21 11"></path><path d="M6 10 V20 H18 V10"></path></svg>347 <div>Home</div>348 </div>349 <div class="nav-item">350 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 20 C4 15, 20 15, 20 20"></path></svg>351 <div>My eBay</div>352 </div>353 <div class="nav-item active">354 <div class="icon-ring">355 <svg viewBox="0 0 24 24">356 <circle cx="11" cy="11" r="6"></circle>357 <line x1="16" y1="16" x2="21" y2="21"></line>358 </svg>359 </div>360 <div>Search</div>361 </div>362 <div class="nav-item">363 <svg viewBox="0 0 24 24"><path d="M12 22 C10 22, 9 21, 9 19 V12 C9 10, 10 9, 12 9 C14 9, 15 10, 15 12 V19 C15 21, 14 22, 12 22 Z"></path><path d="M12 6 L12 5"></path></svg>364 <div>Inbox</div>365 </div>366 <div class="nav-item">367 <svg viewBox="0 0 24 24"><path d="M6 7 L18 7 L15 15 L9 15 Z"></path><path d="M6 7 L6 20"></path></svg>368 <div>Selling</div>369 </div>370 </div>371 372</div>373</body>374</html>