GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>New Balance Shoes - Mobile UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 border-radius: 32px;14 box-shadow: 0 10px 30px rgba(0,0,0,0.12);15 color: #111;16 }17 18 /* Top status bar */19 .status-bar {20 height: 90px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 font-size: 40px;25 color: #333;26 }27 .status-icons {28 margin-left: 20px;29 display: flex;30 gap: 24px;31 align-items: center;32 }33 .status-icons .dot {34 width: 26px;35 height: 26px;36 background: #555;37 border-radius: 50%;38 }39 40 /* Header */41 .header {42 height: 140px;43 padding: 0 28px;44 display: flex;45 align-items: center;46 border-bottom: 1px solid #eee;47 }48 .back-btn {49 width: 88px;50 height: 88px;51 display: flex;52 align-items: center;53 justify-content: center;54 margin-right: 10px;55 }56 .back-btn svg { width: 52px; height: 52px; }57 .title {58 font-weight: 700;59 font-size: 52px;60 white-space: nowrap;61 overflow: hidden;62 text-overflow: ellipsis;63 flex: 1;64 }65 .search-btn {66 width: 92px;67 height: 92px;68 border-radius: 46px;69 background: #f5f5f5;70 border: 1px solid #ddd;71 display: flex;72 align-items: center;73 justify-content: center;74 margin-left: 16px;75 }76 .search-btn svg { width: 46px; height: 46px; }77 .profile-placeholder {78 width: 160px;79 height: 120px;80 border-radius: 18px;81 margin-left: 16px;82 background: #f2f2f2;83 border: 1px solid #e0e0e0;84 }85 86 /* Save/Sort row */87 .action-row {88 height: 100px;89 padding: 0 36px;90 display: flex;91 align-items: center;92 justify-content: space-between;93 color: #1a1a1a;94 font-size: 42px;95 }96 .save-search, .sort-btn {97 display: flex;98 gap: 16px;99 align-items: center;100 }101 .save-search svg, .sort-btn svg { width: 44px; height: 44px; }102 103 /* List section */104 .results {105 padding: 20px 36px 0 36px;106 }107 .card {108 display: grid;109 grid-template-columns: 280px 1fr;110 gap: 28px;111 padding: 26px 0;112 border-bottom: 1px solid #eaeaea;113 }114 .img-wrap {115 position: relative;116 width: 280px;117 height: 280px;118 border-radius: 22px;119 overflow: hidden;120 }121 .img {122 width: 100%;123 height: 100%;124 background: #E0E0E0;125 border: 1px solid #BDBDBD;126 display: flex;127 align-items: center;128 justify-content: center;129 color: #757575;130 font-size: 32px;131 text-align: center;132 padding: 10px;133 box-sizing: border-box;134 }135 .fav-badge {136 position: absolute;137 right: -10px;138 top: -10px;139 width: 96px;140 height: 96px;141 border-radius: 48px;142 background: #ffffff;143 border: 1px solid #e3e3e3;144 box-shadow: 0 4px 10px rgba(0,0,0,0.08);145 display: flex;146 align-items: center;147 justify-content: center;148 }149 .fav-badge svg { width: 52px; height: 52px; stroke: #222; }150 151 .info .title {152 font-size: 44px;153 font-weight: 700;154 line-height: 1.2;155 margin-bottom: 8px;156 }157 .condition {158 font-size: 36px;159 color: #777;160 margin: 8px 0 16px 0;161 }162 .price {163 font-size: 58px;164 font-weight: 800;165 letter-spacing: -0.5px;166 margin: 8px 0;167 }168 .best-offer {169 font-size: 36px;170 color: #444;171 margin-top: 6px;172 }173 .shipping {174 font-size: 36px;175 color: #666;176 margin-top: 6px;177 }178 .sponsored {179 margin-top: 18px;180 font-size: 36px;181 color: #7b7b7b;182 }183 184 /* Bottom info and nav */185 .results-count {186 height: 100px;187 display: flex;188 align-items: center;189 justify-content: center;190 font-size: 44px;191 color: #333;192 }193 .bottom-nav {194 position: absolute;195 bottom: 0;196 left: 0;197 width: 100%;198 height: 200px;199 border-top: 1px solid #e5e5e5;200 background: #fafafa;201 display: flex;202 }203 .nav-item {204 flex: 1;205 display: flex;206 flex-direction: column;207 align-items: center;208 justify-content: center;209 gap: 14px;210 color: #222;211 font-size: 32px;212 }213 .nav-item svg { width: 60px; height: 60px; }214 .nav-item.active .icon-circle {215 width: 120px;216 height: 120px;217 border-radius: 60px;218 background: #e6f0ff;219 display: flex;220 align-items: center;221 justify-content: center;222 }223 .nav-item.active svg { width: 64px; height: 64px; stroke: #3b7cff; }224 .nav-item .label { font-size: 34px; color: #222; }225</style>226</head>227<body>228<div id="render-target">229 230 <!-- Status bar -->231 <div class="status-bar">232 <div>8:31</div>233 <div class="status-icons">234 <div class="dot"></div>235 <div class="dot"></div>236 <div class="dot"></div>237 </div>238 </div>239 240 <!-- Header -->241 <div class="header">242 <div class="back-btn" aria-label="Back">243 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">244 <path d="M15 18l-6-6 6-6"></path>245 </svg>246 </div>247 <div class="title">New Balance Shoe...</div>248 <div class="search-btn" aria-label="Search">249 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">250 <circle cx="11" cy="11" r="7"></circle>251 <path d="M21 21l-4.3-4.3"></path>252 </svg>253 </div>254 <div class="profile-placeholder"></div>255 </div>256 257 <!-- Save/Search and Sort -->258 <div class="action-row">259 <div class="save-search">260 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">261 <path d="M12 21s-7-4.6-9-8.2C1.2 9.7 3.5 7 6.6 7c1.9 0 3.2 1 3.4 1.2.3-.2 1.6-1.2 3.4-1.2 3.1 0 5.4 2.7 3.6 5.8C19 16.4 12 21 12 21z"></path>262 </svg>263 <span>Save this search</span>264 </div>265 <div class="sort-btn">266 <span>Sort</span>267 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">268 <path d="M6 4v16M6 4l-3 3M6 4l3 3"></path>269 <path d="M18 20V4M18 20l-3-3M18 20l3-3"></path>270 </svg>271 </div>272 </div>273 274 <!-- Results List -->275 <div class="results">276 277 <!-- Card 1 -->278 <div class="card">279 <div class="img-wrap">280 <div class="img">[IMG: Hand holding New Balance shoe]</div>281 <div class="fav-badge" aria-label="Favorite">282 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">283 <path d="M12 21s-7-4.6-9-8.2C1.2 9.7 3.5 7 6.6 7c1.9 0 3.2 1 3.4 1.2.3-.2 1.6-1.2 3.4-1.2 3.1 0 5.4 2.7 3.6 5.8C19 16.4 12 21 12 21z" stroke="#222"></path>284 </svg>285 </div>286 </div>287 <div class="info">288 <div class="title">New Balance Women's Shoes For Crews 510v3 Shoes Teal WID510L3 Size US 9</div>289 <div class="condition">Pre-Owned</div>290 <div class="price">£44.49</div>291 <div class="best-offer">or Best Offer</div>292 <div class="shipping">+£34.71 shipping<br>from United States</div>293 <div class="sponsored">Sponsored</div>294 </div>295 </div>296 297 <!-- Card 2 -->298 <div class="card">299 <div class="img-wrap">300 <div class="img">[IMG: Pair of blue/pink New Balance shoes]</div>301 <div class="fav-badge" aria-label="Favorite">302 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">303 <path d="M12 21s-7-4.6-9-8.2C1.2 9.7 3.5 7 6.6 7c1.9 0 3.2 1 3.4 1.2.3-.2 1.6-1.2 3.4-1.2 3.1 0 5.4 2.7 3.6 5.8C19 16.4 12 21 12 21z" stroke="#222"></path>304 </svg>305 </div>306 </div>307 <div class="info">308 <div class="title">New Balance 510 v3 Women's All Terrain Shoes for Crews Athletic Sneaker Size 9B</div>309 <div class="condition">Pre-Owned</div>310 <div class="price">£27.46</div>311 <div class="shipping">+£34.48 shipping<br>from United States</div>312 </div>313 </div>314 315 <!-- Card 3 -->316 <div class="card">317 <div class="img-wrap">318 <div class="img">[IMG: New Balance shoes on leopard-print fabric]</div>319 <div class="fav-badge" aria-label="Favorite">320 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">321 <path d="M12 21s-7-4.6-9-8.2C1.2 9.7 3.5 7 6.6 7c1.9 0 3.2 1 3.4 1.2.3-.2 1.6-1.2 3.4-1.2 3.1 0 5.4 2.7 3.6 5.8C19 16.4 12 21 12 21z" stroke="#222"></path>322 </svg>323 </div>324 </div>325 <div class="info">326 <div class="title">New Balance Women's Shoes For Crews 510v3 Shoes JQ2 Teal Size US 9 comfy</div>327 <div class="condition">Pre-Owned</div>328 <div class="price">£29.67</div>329 <div class="best-offer">or Best Offer</div>330 <div class="shipping">+£36.74 shipping<br>from United States</div>331 </div>332 </div>333 334 </div>335 336 <!-- Results count -->337 <div class="results-count">3 results</div>338 339 <!-- Bottom navigation -->340 <div class="bottom-nav">341 <div class="nav-item">342 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">343 <path d="M3 11l9-7 9 7"></path>344 <path d="M5 10v10h14V10"></path>345 </svg>346 <div class="label">Home</div>347 </div>348 <div class="nav-item">349 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">350 <circle cx="12" cy="8" r="4"></circle>351 <path d="M4 21c2-4 6-6 8-6s6 2 8 6"></path>352 </svg>353 <div class="label">My eBay</div>354 </div>355 <div class="nav-item active">356 <div class="icon-circle">357 <svg viewBox="0 0 24 24" fill="none" stroke="#3b7cff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">358 <circle cx="11" cy="11" r="7"></circle>359 <path d="M21 21l-4.3-4.3"></path>360 </svg>361 </div>362 <div class="label">Search</div>363 </div>364 <div class="nav-item">365 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">366 <path d="M12 22a4 4 0 0 0 4-4H8a4 4 0 0 0 4 4z"></path>367 <path d="M18 8a6 6 0 1 0-12 0c0 3-2 5-2 5h16s-2-2-2-5z"></path>368 </svg>369 <div class="label">Inbox</div>370 </div>371 <div class="nav-item">372 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">373 <path d="M20 6l-8 8"></path>374 <path d="M20 6a3 3 0 1 0-6 0v12a3 3 0 1 0 6 0V6z"></path>375 </svg>376 <div class="label">Selling</div>377 </div>378 </div>379 380</div>381</body>382</html>