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>Track Pants Search - Mock</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: #000;15 color: #fff;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17 }18 .topbar {19 display: flex;20 align-items: center;21 justify-content: space-between;22 padding: 54px 36px 10px 24px;23 }24 .top-left {25 display: flex;26 align-items: center;27 gap: 18px;28 }29 .back-btn {30 width: 72px;31 height: 72px;32 border-radius: 36px;33 display: flex;34 align-items: center;35 justify-content: center;36 }37 .title {38 font-size: 64px;39 font-weight: 800;40 letter-spacing: -0.5px;41 }42 .top-actions {43 display: flex;44 align-items: center;45 gap: 18px;46 }47 .circle-icon {48 width: 96px;49 height: 96px;50 border-radius: 48px;51 background: #1a1a1a;52 display: flex;53 align-items: center;54 justify-content: center;55 }56 .row {57 display: flex;58 align-items: center;59 padding: 6px 36px 0 36px;60 justify-content: space-between;61 }62 .link {63 color: #4C97FF;64 font-size: 38px;65 display: flex;66 align-items: center;67 gap: 12px;68 }69 .right-links {70 display: flex;71 gap: 42px;72 align-items: center;73 }74 .right-links .link {75 font-size: 38px;76 }77 .section {78 padding: 36px;79 }80 .section h3 {81 margin: 0 0 24px 0;82 font-size: 52px;83 }84 .chips {85 display: flex;86 flex-wrap: wrap;87 gap: 18px;88 }89 .chip {90 padding: 18px 34px;91 background: #141414;92 border: 2px solid #4a4a4a;93 color: #eaeaea;94 border-radius: 40px;95 font-size: 36px;96 }97 .divider {98 height: 2px;99 background: #2a2a2a;100 margin: 12px 36px 24px;101 }102 .card {103 display: flex;104 gap: 28px;105 padding: 24px 36px;106 }107 .thumb {108 width: 320px;109 height: 320px;110 background: #E0E0E0;111 border: 1px solid #BDBDBD;112 color: #757575;113 border-radius: 36px;114 display: flex;115 align-items: center;116 justify-content: center;117 font-size: 32px;118 position: relative;119 overflow: hidden;120 }121 .heart-badge {122 position: absolute;123 right: 16px;124 top: 16px;125 width: 88px;126 height: 88px;127 background: rgba(0,0,0,0.55);128 border-radius: 44px;129 display: flex;130 align-items: center;131 justify-content: center;132 }133 .info {134 flex: 1;135 padding-top: 4px;136 }137 .title2 {138 font-size: 44px;139 line-height: 1.22;140 margin: 0 0 10px 0;141 font-weight: 700;142 color: #eee;143 }144 .subtitle {145 color: #bdbdbd;146 font-size: 34px;147 margin-top: 6px;148 }149 .price {150 font-size: 56px;151 font-weight: 800;152 margin: 12px 0 8px;153 }154 .strike {155 color: #bdbdbd;156 text-decoration: line-through;157 margin-right: 10px;158 }159 .percent {160 color: #bdbdbd;161 font-size: 34px;162 }163 .meta {164 color: #bdbdbd;165 font-size: 34px;166 margin-top: 6px;167 line-height: 1.35;168 }169 .sponsored {170 color: #8a8a8a;171 font-size: 34px;172 padding: 12px 36px 18px 36px;173 }174 .results-count {175 text-align: center;176 color: #ddd;177 font-size: 40px;178 padding: 18px 0 18px;179 }180 .bottom-nav {181 position: absolute;182 left: 0;183 right: 0;184 bottom: 0;185 height: 240px;186 background: #121212;187 border-top: 2px solid #2a2a2a;188 padding-top: 18px;189 }190 .nav-items {191 display: flex;192 justify-content: space-around;193 padding: 0 24px;194 }195 .nav-item {196 display: flex;197 flex-direction: column;198 align-items: center;199 gap: 10px;200 color: #cfcfcf;201 font-size: 28px;202 }203 .nav-item .ico {204 width: 88px;205 height: 88px;206 border-radius: 44px;207 background: #1a1a1a;208 display: flex;209 align-items: center;210 justify-content: center;211 }212 .nav-item.active .ico {213 background: #0d3b66;214 box-shadow: inset 0 0 0 4px #2e6ef7;215 }216 .home-indicator {217 position: absolute;218 bottom: 24px;219 left: 50%;220 transform: translateX(-50%);221 width: 320px;222 height: 12px;223 border-radius: 6px;224 background: #fff;225 opacity: 0.9;226 }227 /* small svg tint helpers */228 svg { display: block; }229</style>230</head>231<body>232<div id="render-target">233 234 <div class="topbar">235 <div class="top-left">236 <div class="back-btn">237 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">238 <path d="M15 18L9 12l6-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>239 </svg>240 </div>241 <div class="title">track pants</div>242 </div>243 <div class="top-actions">244 <div class="circle-icon">245 <!-- search -->246 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">247 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/>248 <path d="M20 20l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>249 </svg>250 </div>251 <div class="circle-icon">252 <!-- camera -->253 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">254 <rect x="3" y="7" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"/>255 <path d="M9 7l1.5-2h3L15 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>256 <circle cx="12" cy="13" r="3.5" stroke="#fff" stroke-width="2"/>257 </svg>258 </div>259 <div class="circle-icon">260 <!-- cart -->261 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">262 <path d="M6 6h14l-2 8H8L6 4H3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>263 <circle cx="9" cy="20" r="1.8" fill="#fff"/>264 <circle cx="18" cy="20" r="1.8" fill="#fff"/>265 </svg>266 </div>267 </div>268 </div>269 270 <div class="row">271 <div class="link">272 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">273 <path d="M12 21s-7-4.4-7-10a4.1 4.1 0 018-1 4.1 4.1 0 018 1c0 5.6-7 10-7 10z" stroke="#4C97FF" stroke-width="2"/>274 </svg>275 <span>Save this search</span>276 </div>277 <div class="right-links">278 <div class="link">279 <span>Sort</span>280 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">281 <path d="M7 6h10M7 12h6M7 18h2" stroke="#4C97FF" stroke-width="2" stroke-linecap="round"/>282 </svg>283 </div>284 <div class="link">285 <span>Filter</span>286 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">287 <path d="M3 5h18l-7 8v5l-4 2v-7L3 5z" stroke="#4C97FF" stroke-width="2" stroke-linejoin="round"/>288 </svg>289 </div>290 </div>291 </div>292 293 <div class="section">294 <h3>Shop by Color</h3>295 <div class="chips">296 <div class="chip">Black</div>297 <div class="chip">Blue</div>298 <div class="chip">Gray</div>299 <div class="chip">Green</div>300 <div class="chip">Yellow</div>301 <div class="chip">White</div>302 </div>303 </div>304 305 <div class="divider"></div>306 307 <!-- Product 1 -->308 <div class="card">309 <div class="thumb">310 [IMG: Track pants collage]311 <div class="heart-badge">312 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">313 <path d="M12 21s-7-4.4-7-10a4.1 4.1 0 018-1 4.1 4.1 0 018 1c0 5.6-7 10-7 10z" stroke="#fff" stroke-width="2"/>314 </svg>315 </div>316 </div>317 <div class="info">318 <div class="title2">Mens Fleece Sweat Track Pants w Pockets Jogger Sports Casual Trackies Cuffed Hem</div>319 <div class="subtitle">Brand New</div>320 <div class="price">$10.73</div>321 <div class="percent"><span class="strike">$22.16</span>· 52% off</div>322 <div class="meta">+$8.87 shipping from Australia<br>33+ sold</div>323 </div>324 </div>325 326 <div class="sponsored">Sponsored</div>327 328 <div class="divider"></div>329 330 <!-- Product 2 -->331 <div class="card">332 <div class="thumb">333 [IMG: Adidas tricot jogger pants]334 <div class="heart-badge">335 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">336 <path d="M12 21s-7-4.4-7-10a4.1 4.1 0 018-1 4.1 4.1 0 018 1c0 5.6-7 10-7 10z" stroke="#fff" stroke-width="2"/>337 </svg>338 </div>339 </div>340 <div class="info">341 <div class="title2">NWT Adidas Tricot JOGGER Pant Mens Training Track Pants 3 Stripe Black Grey Gray</div>342 <div class="subtitle">Brand New</div>343 <div class="price">$38.99 to $40.99</div>344 <div class="meta">+$25.30 shipping from United States<br>8+ sold</div>345 </div>346 </div>347 348 <div class="sponsored">Sponsored</div>349 350 <div class="divider"></div>351 352 <div class="results-count">57,000+ results</div>353 354 <!-- Bottom Navigation -->355 <div class="bottom-nav">356 <div class="nav-items">357 <div class="nav-item">358 <div class="ico">359 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">360 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-8z" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>361 </svg>362 </div>363 <div>Home</div>364 </div>365 <div class="nav-item">366 <div class="ico">367 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">368 <circle cx="12" cy="8" r="4" stroke="#fff" stroke-width="2"/>369 <path d="M4 20c1.5-4 6.5-4 8-4s6.5 0 8 4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>370 </svg>371 </div>372 <div>My eBay</div>373 </div>374 <div class="nav-item active">375 <div class="ico">376 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">377 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/>378 <path d="M20 20l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>379 </svg>380 </div>381 <div>Search</div>382 </div>383 <div class="nav-item">384 <div class="ico">385 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">386 <path d="M18 8a6 6 0 11-12 0 6 6 0 0112 0z" stroke="#fff" stroke-width="2"/>387 <path d="M21 21l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>388 </svg>389 </div>390 <div>Inbox</div>391 </div>392 <div class="nav-item">393 <div class="ico">394 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">395 <path d="M3 7l9-4 9 4v5c0 5-4 9-9 9S3 17 3 12V7z" stroke="#fff" stroke-width="2"/>396 <path d="M12 9v8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>397 </svg>398 </div>399 <div>Selling</div>400 </div>401 </div>402 <div class="home-indicator"></div>403 </div>404 405</div>406</body>407</html>