GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Men's Boots - Mock UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #000000;13 color: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 height: 70px;19 padding: 0 32px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 font-size: 30px;24 color: #EAEAEA;25 letter-spacing: 1px;26 }27 .status-icons {28 display: flex;29 align-items: center;30 gap: 18px;31 }32 .battery {33 width: 46px;34 height: 22px;35 border: 2px solid #EAEAEA;36 border-radius: 4px;37 position: relative;38 }39 .battery::after {40 content: '';41 position: absolute;42 right: -6px;43 top: 6px;44 width: 6px; height: 10px;45 background: #EAEAEA;46 border-radius: 2px;47 }48 .battery .level {49 position: absolute;50 left: 2px; top: 2px; bottom: 2px; right: 2px;51 background: #EAEAEA;52 border-radius: 2px;53 }54 55 /* Header */56 .header {57 height: 110px;58 display: flex;59 align-items: center;60 padding: 0 28px;61 box-sizing: border-box;62 }63 .header-title {64 font-size: 46px;65 font-weight: 700;66 margin-left: 18px;67 }68 .header-actions {69 margin-left: auto;70 display: flex;71 align-items: center;72 gap: 22px;73 }74 .circle-icon {75 width: 82px;76 height: 82px;77 background: #1E1E1E;78 border-radius: 50%;79 display: flex; align-items: center; justify-content: center;80 border: 1px solid #2c2c2c;81 }82 .icon-btn svg { fill: #EAEAEA; }83 84 .filter-link {85 position: absolute;86 top: 208px;87 right: 34px;88 color: #3EA0FF;89 font-size: 36px;90 text-decoration: none;91 }92 93 /* Content area */94 .content {95 position: absolute;96 left: 0; right: 0;97 top: 180px;98 bottom: 170px;99 overflow-y: auto;100 padding: 10px 0 200px 0;101 }102 .section {103 padding: 22px 32px;104 }105 106 .subtle {107 color: #B5B5B5;108 font-size: 28px;109 margin-bottom: 8px;110 }111 .section h2 {112 font-size: 44px;113 margin: 0 0 16px 0;114 }115 116 /* horizontal scrollers */117 .h-scroll {118 display: flex;119 gap: 26px;120 overflow-x: auto;121 padding-bottom: 6px;122 }123 124 /* Brand cards */125 .brand-card {126 width: 320px;127 height: 260px;128 background: #2B2B2B;129 border-radius: 18px;130 box-sizing: border-box;131 padding: 18px;132 display: flex;133 flex-direction: column;134 justify-content: space-between;135 }136 .img-ph {137 width: 100%;138 height: 150px;139 background: #E0E0E0;140 border: 1px solid #BDBDBD;141 border-radius: 10px;142 color: #757575;143 display: flex; align-items: center; justify-content: center;144 font-size: 24px;145 text-align: center;146 }147 .brand-name {148 font-size: 36px;149 font-weight: 600;150 text-align: center;151 margin-top: 6px;152 }153 154 .row-title {155 display: flex;156 align-items: center;157 justify-content: space-between;158 }159 .row-title h2 { margin: 0; }160 161 /* Product cards */162 .product-card {163 width: 320px;164 background: #111111;165 border-radius: 18px;166 border: 1px solid #1f1f1f;167 overflow: hidden;168 }169 .product-card .p-img {170 width: 100%;171 height: 360px;172 background: #E0E0E0;173 border-bottom: 1px solid #BDBDBD;174 color: #757575;175 display: flex; align-items: center; justify-content: center;176 font-size: 26px; text-align: center;177 }178 .p-body {179 padding: 18px;180 }181 .p-title {182 font-size: 34px;183 line-height: 40px;184 color: #F0F0F0;185 height: 120px;186 overflow: hidden;187 }188 .p-price {189 font-size: 42px;190 font-weight: 800;191 margin-top: 10px;192 }193 .p-strike {194 margin-top: 6px;195 font-size: 26px;196 color: #aaaaaa;197 }198 199 /* Bottom nav */200 .bottom-nav {201 position: absolute;202 bottom: 0; left: 0; right: 0;203 height: 160px;204 background: #0b0b0b;205 border-top: 1px solid #1c1c1c;206 display: flex;207 align-items: center;208 justify-content: space-around;209 padding-bottom: 10px;210 }211 .nav-item {212 display: flex;213 flex-direction: column;214 align-items: center;215 gap: 12px;216 color: #d6d6d6;217 font-size: 28px;218 }219 .nav-item.active .nav-icon {220 background: #1F2B3A;221 border: 1px solid #2b3c51;222 }223 .nav-icon {224 width: 92px; height: 92px;225 border-radius: 50%;226 background: #171717;227 display: flex; align-items: center; justify-content: center;228 border: 1px solid #242424;229 }230</style>231</head>232<body>233<div id="render-target">234 235 <!-- Status Bar -->236 <div class="status-bar">237 <div>10:53</div>238 <div class="status-icons">239 <div style="width:18px;height:18px;border-radius:50%;background:#EAEAEA;"></div>240 <div class="battery"><div class="level"></div></div>241 <div style="font-size:28px">100%</div>242 </div>243 </div>244 245 <!-- Header -->246 <div class="header">247 <div class="icon-btn" aria-label="Back">248 <svg width="46" height="46" viewBox="0 0 48 48">249 <path d="M28 6 L14 20 L28 34" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>250 </svg>251 </div>252 <div class="header-title">Men's Boots</div>253 254 <div class="header-actions">255 <div class="circle-icon">256 <svg width="36" height="36" viewBox="0 0 24 24">257 <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm11 19-6-6" stroke="#EAEAEA" stroke-width="2" fill="none" stroke-linecap="round"></path>258 </svg>259 </div>260 <div class="circle-icon">261 <svg width="36" height="36" viewBox="0 0 24 24">262 <path d="M4 7h3l2-3h6l2 3h3v12H4z" stroke="#EAEAEA" stroke-width="2" fill="none" stroke-linejoin="round"></path>263 <rect x="7" y="10" width="10" height="7" fill="#EAEAEA"></rect>264 </svg>265 </div>266 <div class="circle-icon">267 <svg width="36" height="36" viewBox="0 0 24 24">268 <path d="M6 7h14l-2 10H7L6 7z" stroke="#EAEAEA" stroke-width="2" fill="none"></path>269 <circle cx="9" cy="20" r="1.5" fill="#EAEAEA"></circle>270 <circle cx="17" cy="20" r="1.5" fill="#EAEAEA"></circle>271 </svg>272 </div>273 </div>274 </div>275 276 <a class="filter-link" href="#">Filter</a>277 278 <!-- Scrollable Content -->279 <div class="content">280 <!-- Shop by Brand -->281 <div class="section">282 <div class="subtle">Shop by</div>283 <h2>Brand</h2>284 <div class="h-scroll">285 <div class="brand-card">286 <div class="img-ph">[IMG: Timberland Boot]</div>287 <div class="brand-name">Timberland</div>288 </div>289 <div class="brand-card">290 <div class="img-ph">[IMG: Lucchese Cowboy Boot]</div>291 <div class="brand-name">Lucchese</div>292 </div>293 <div class="brand-card">294 <div class="img-ph">[IMG: Ariat Boot]</div>295 <div class="brand-name">Ariat</div>296 </div>297 </div>298 </div>299 300 <!-- Shop by US Shoe Size -->301 <div class="section">302 <div class="subtle">Shop by</div>303 <div class="row-title">304 <h2>US Shoe Size</h2>305 <svg width="40" height="40" viewBox="0 0 24 24">306 <path d="M6 9l6 6 6-6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>307 </svg>308 </div>309 </div>310 311 <!-- Limited Time Deals -->312 <div class="section">313 <h2>Limited Time Deals</h2>314 <div class="h-scroll">315 <div class="product-card">316 <div class="p-img">[IMG: Under Armour Men's Micro G Valsetz Boot]</div>317 <div class="p-body">318 <div class="p-title">Under Armour Men's Micro G Valsetz Zip Mid...</div>319 <div class="p-price">US $89.99</div>320 </div>321 </div>322 <div class="product-card">323 <div class="p-img">[IMG: Wolverine Tremor DuraShocks 8" Boot]</div>324 <div class="p-body">325 <div class="p-title">Wolverine Tremor Durashocks 8" W043...</div>326 <div class="p-price">US $82.99</div>327 <div class="p-strike">US $150.00 | 45% OFF</div>328 </div>329 </div>330 <div class="product-card">331 <div class="p-img">[IMG: Wolverine Durashocks Brown Boot]</div>332 <div class="p-body">333 <div class="p-title">Wolverine Durashocks...</div>334 <div class="p-price">US $76.99</div>335 <div class="p-strike">US $150.00</div>336 </div>337 </div>338 </div>339 </div>340 </div>341 342 <!-- Bottom Navigation -->343 <div class="bottom-nav">344 <div class="nav-item">345 <div class="nav-icon">346 <svg width="44" height="44" viewBox="0 0 24 24">347 <path d="M3 11l9-7 9 7v8a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-8z" fill="#d6d6d6"></path>348 </svg>349 </div>350 <div>Home</div>351 </div>352 <div class="nav-item">353 <div class="nav-icon">354 <svg width="44" height="44" viewBox="0 0 24 24">355 <circle cx="12" cy="8" r="4" fill="#d6d6d6"></circle>356 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#d6d6d6" stroke-width="2" fill="none"></path>357 </svg>358 </div>359 <div>My eBay</div>360 </div>361 <div class="nav-item active">362 <div class="nav-icon">363 <svg width="44" height="44" viewBox="0 0 24 24">364 <circle cx="10" cy="10" r="7" stroke="#9cc3ff" stroke-width="2" fill="none"></circle>365 <path d="M15 15l6 6" stroke="#9cc3ff" stroke-width="2"></path>366 </svg>367 </div>368 <div>Search</div>369 </div>370 <div class="nav-item">371 <div class="nav-icon">372 <svg width="44" height="44" viewBox="0 0 24 24">373 <path d="M2 6h20v12H2z" stroke="#d6d6d6" stroke-width="2" fill="none"></path>374 <path d="M6 6v-3h12v3" stroke="#d6d6d6" stroke-width="2" fill="none"></path>375 </svg>376 </div>377 <div>Inbox</div>378 </div>379 <div class="nav-item">380 <div class="nav-icon">381 <svg width="44" height="44" viewBox="0 0 24 24">382 <path d="M4 4h16v10H4z" stroke="#d6d6d6" stroke-width="2" fill="none"></path>383 <path d="M2 18h20" stroke="#d6d6d6" stroke-width="2"></path>384 </svg>385 </div>386 <div>Selling</div>387 </div>388 </div>389 390</div>391</body>392</html>