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>New Balance Shoe Search</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, Arial, sans-serif;16 color: #111;17 }18 .screen {19 position: absolute;20 inset: 0;21 overflow-y: hidden;22 }23 .status-bar {24 height: 96px;25 padding: 22px 28px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #2E2E2E;30 font-size: 38px;31 }32 .status-icons {33 display: flex;34 gap: 24px;35 align-items: center;36 }37 .header {38 padding: 18px 28px 10px 28px;39 }40 .title-row {41 display: flex;42 align-items: center;43 gap: 24px;44 }45 .title-text {46 font-size: 56px;47 font-weight: 700;48 letter-spacing: 0.2px;49 white-space: nowrap;50 overflow: hidden;51 text-overflow: ellipsis;52 max-width: 780px;53 }54 .circle-btn {55 width: 88px;56 height: 88px;57 border-radius: 44px;58 background: #f0f0f0;59 display: flex;60 align-items: center;61 justify-content: center;62 }63 .utility-row {64 display: flex;65 justify-content: space-between;66 padding: 14px 28px 0 28px;67 color: #3665F3;68 font-size: 42px;69 }70 .utility-item {71 display: inline-flex;72 align-items: center;73 gap: 14px;74 }75 .list {76 padding: 24px 0 0 0;77 height: 1650px;78 overflow-y: auto;79 }80 .card {81 padding: 28px;82 }83 .separator {84 height: 2px;85 background: #E6E6E6;86 margin: 0 28px;87 }88 .card-inner {89 display: flex;90 gap: 28px;91 }92 .img-wrap {93 position: relative;94 width: 280px;95 height: 220px;96 background: #F2F2F2;97 border-radius: 28px;98 border: 1px solid #E0E0E0;99 display: flex;100 align-items: center;101 justify-content: center;102 color: #757575;103 font-size: 28px;104 text-align: center;105 line-height: 1.2;106 }107 .fav-pill {108 position: absolute;109 top: 16px;110 right: 16px;111 width: 72px;112 height: 72px;113 border-radius: 36px;114 background: #ffffff;115 box-shadow: 0 2px 6px rgba(0,0,0,0.12);116 display: flex;117 align-items: center;118 justify-content: center;119 }120 .details {121 flex: 1;122 padding-top: 4px;123 }124 .title {125 font-size: 44px;126 font-weight: 600;127 line-height: 1.25;128 margin-bottom: 6px;129 }130 .sub {131 font-size: 34px;132 color: #777;133 margin-bottom: 12px;134 }135 .price {136 font-size: 56px;137 font-weight: 800;138 margin-bottom: 8px;139 }140 .shipping {141 font-size: 34px;142 color: #666;143 margin-bottom: 12px;144 }145 .sponsored {146 font-size: 32px;147 color: #9A9A9A;148 margin-top: 8px;149 }150 .results-count {151 text-align: center;152 font-size: 40px;153 color: #444;154 padding: 28px 0;155 }156 .tabbar {157 position: absolute;158 bottom: 0;159 left: 0;160 right: 0;161 height: 220px;162 border-top: 1px solid #E6E6E6;163 background: #ffffff;164 display: flex;165 justify-content: space-around;166 align-items: center;167 }168 .tab {169 width: 180px;170 display: flex;171 flex-direction: column;172 align-items: center;173 gap: 16px;174 color: #333;175 font-size: 32px;176 }177 .tab.active {178 color: #3665F3;179 }180 .gesture {181 position: absolute;182 bottom: 16px;183 left: 50%;184 transform: translateX(-50%);185 width: 240px;186 height: 12px;187 background: #D5D5D5;188 border-radius: 8px;189 }190 /* Simple icon sizes */191 svg { display: block; }192 .icon-32 { width: 56px; height: 56px; }193 .icon-40 { width: 72px; height: 72px; }194 .icon-48 { width: 84px; height: 84px; }195</style>196</head>197<body>198<div id="render-target">199 <div class="screen">200 <!-- Top status bar -->201 <div class="status-bar">202 <div>2:24</div>203 <div class="status-icons">204 <!-- mail icon -->205 <svg class="icon-32" viewBox="0 0 24 24">206 <path d="M3 5h18v14H3V5zm2 2v10h14V7l-7 5-7-5z" fill="#606060"/>207 </svg>208 <!-- gear icon -->209 <svg class="icon-32" viewBox="0 0 24 24">210 <path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm8.5 4a6.7 6.7 0 0 0-.3-1.6l2-1.5-2-3.5-2.4 1a6.9 6.9 0 0 0-2.6-1.5L12 2 9.8 3a7 7 0 0 0-2.6 1.5l-2.4-1-2 3.5 2 1.5a7 7 0 0 0-.3 1.6c0 .6.1 1.1.3 1.6l-2 1.5 2 3.5 2.4-1a7 7 0 0 0 2.6 1.5l2.2 1 2.2-1a7 7 0 0 0 2.6-1.5l2.4 1 2-3.5-2-1.5c.2-.5.3-1 .3-1.6z" fill="#606060"/>211 </svg>212 </div>213 </div>214 215 <!-- Header -->216 <div class="header">217 <div class="title-row">218 <!-- back arrow -->219 <svg class="icon-48" viewBox="0 0 24 24">220 <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 <div class="title-text">New Balance Shoe...</div>223 <div class="circle-btn">224 <!-- search icon -->225 <svg viewBox="0 0 24 24" width="44" height="44">226 <path d="M10 3a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm8.7 14.3-3.4-3.4" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round"/>227 </svg>228 </div>229 </div>230 </div>231 232 <!-- Utility Row -->233 <div class="utility-row">234 <div class="utility-item">235 <svg viewBox="0 0 24 24" width="40" height="40">236 <path d="M12 21s7-4.7 7-10a7 7 0 0 0-14 0c0 5.3 7 10 7 10z" fill="none" stroke="#3665F3" stroke-width="2.2"/>237 </svg>238 <span>Save this search</span>239 </div>240 <div class="utility-item">241 <span>Sort</span>242 </div>243 </div>244 245 <!-- List -->246 <div class="list">247 <!-- Card 1 -->248 <div class="card">249 <div class="card-inner">250 <div class="img-wrap">251 [IMG: New Balance Sports Shoes]252 <div class="fav-pill">253 <svg viewBox="0 0 24 24" width="40" height="40">254 <path d="M12 21s7-4.7 7-10a5 5 0 0 0-9.1-3.2A5 5 0 0 0 5 11c0 5.3 7 10 7 10z" fill="none" stroke="#111" stroke-width="2"/>255 </svg>256 </div>257 </div>258 <div class="details">259 <div class="title">New Balance Sports Shoes For Women Size 5.5 Brand New</div>260 <div class="sub">New (Other)</div>261 <div class="price">£45.00</div>262 <div class="shipping">+£2.87 shipping</div>263 <div class="sponsored">Sponsored</div>264 </div>265 </div>266 </div>267 <div class="separator"></div>268 269 <!-- Card 2 -->270 <div class="card">271 <div class="card-inner">272 <div class="img-wrap">273 [IMG: New Balance Women's Shoes Teal 510v3]274 <div class="fav-pill">275 <svg viewBox="0 0 24 24" width="40" height="40">276 <path d="M12 21s7-4.7 7-10a5 5 0 0 0-9.1-3.2A5 5 0 0 0 5 11c0 5.3 7 10 7 10z" fill="none" stroke="#111" stroke-width="2"/>277 </svg>278 </div>279 </div>280 <div class="details">281 <div class="title">New Balance Women's Shoes For Crews 510v3 Shoes Teal WID510L3 Size US 9</div>282 <div class="sub">Pre-Owned</div>283 <div class="price">£44.49</div>284 <div class="shipping">or Best Offer<br>+£34.71 shipping<br>from United States</div>285 <div class="sponsored">Sponsored</div>286 </div>287 </div>288 </div>289 <div class="separator"></div>290 291 <!-- Card 3 -->292 <div class="card">293 <div class="card-inner">294 <div class="img-wrap">295 [IMG: Women's 7.5 New Balance 510v3 Slip-Resistant]296 <div class="fav-pill">297 <svg viewBox="0 0 24 24" width="40" height="40">298 <path d="M12 21s7-4.7 7-10a5 5 0 0 0-9.1-3.2A5 5 0 0 0 5 11c0 5.3 7 10 7 10z" fill="none" stroke="#111" stroke-width="2"/>299 </svg>300 </div>301 </div>302 <div class="details">303 <div class="title">Women's 7.5 B M New Balance Shoes For Crews Slip-Resistant 510v3 Shoes Sneakers</div>304 <div class="sub">Pre-Owned</div>305 <div class="price">£38.57</div>306 <div class="shipping">or Best Offer<br>+£32.58 shipping<br>from United States</div>307 <div class="sponsored">Sponsored</div>308 </div>309 </div>310 </div>311 312 <div class="results-count">276 results</div>313 </div>314 315 <!-- Bottom Tab Bar -->316 <div class="tabbar">317 <div class="tab">318 <svg class="icon-40" viewBox="0 0 24 24">319 <path d="M3 11l9-7 9 7v9H3v-9z" fill="none" stroke="#333" stroke-width="2"/>320 </svg>321 <div>Home</div>322 </div>323 <div class="tab">324 <svg class="icon-40" viewBox="0 0 24 24">325 <circle cx="12" cy="8" r="4" fill="none" stroke="#333" stroke-width="2"/>326 <path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" fill="none" stroke="#333" stroke-width="2"/>327 </svg>328 <div>My eBay</div>329 </div>330 <div class="tab active">331 <svg class="icon-40" viewBox="0 0 24 24">332 <path d="M10 3a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm8.7 14.3-3.4-3.4" stroke="#3665F3" stroke-width="2.2" fill="none" stroke-linecap="round"/>333 </svg>334 <div>Search</div>335 </div>336 <div class="tab">337 <svg class="icon-40" viewBox="0 0 24 24">338 <path d="M12 22a2 2 0 0 0 2-2v-4a2 2 0 0 0-4 0v4a2 2 0 0 0 2 2zm0-12a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="none" stroke="#333" stroke-width="2"/>339 </svg>340 <div>Inbox</div>341 </div>342 <div class="tab">343 <svg class="icon-40" viewBox="0 0 24 24">344 <path d="M4 4h14l2 4-8 12H6L4 4zm4 2v4h4" fill="none" stroke="#333" stroke-width="2"/>345 </svg>346 <div>Selling</div>347 </div>348 <div class="gesture"></div>349 </div>350 </div>351</div>352</body>353</html>