GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mens Training Shorts - Grid</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: Arial, Helvetica, sans-serif;15 color: #111;16 }17 18 /* Status bar */19 .status-bar {20 height: 70px;21 padding: 0 28px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #222;26 font-size: 30px;27 }28 .status-icons {29 display: flex;30 align-items: center;31 gap: 18px;32 color: #777;33 }34 .dot { width: 8px; height: 8px; background: #777; border-radius: 50%; display: inline-block; }35 36 /* Header */37 .header {38 position: relative;39 padding: 28px 32px 16px;40 border-bottom: 1px solid #eee;41 text-align: center;42 }43 .header .back, .header .search {44 position: absolute;45 top: 26px;46 width: 56px; height: 56px;47 display: flex; align-items: center; justify-content: center;48 cursor: default;49 }50 .header .back { left: 18px; }51 .header .search { right: 18px; }52 .title {53 font-size: 34px;54 font-weight: 800;55 letter-spacing: 4px;56 }57 .subtitle {58 margin-top: 10px;59 font-size: 24px;60 color: #777;61 letter-spacing: 1px;62 }63 64 /* Filter chips row */65 .chip-row {66 display: flex;67 align-items: center;68 gap: 24px;69 padding: 22px 24px;70 border-top: 1px solid #eee;71 border-bottom: 1px solid #eee;72 background: #fff;73 }74 .chip {75 border: 2px solid #dcdcdc;76 background: #f8f8f8;77 border-radius: 6px;78 color: #b3b3b3;79 padding: 14px 24px;80 font-size: 24px;81 font-weight: 700;82 letter-spacing: 1px;83 }84 .filter-icon {85 width: 56px; height: 56px;86 border: 2px solid #dcdcdc;87 border-radius: 6px;88 display: flex; align-items: center; justify-content: center;89 background: #fff;90 }91 92 /* Grid */93 .grid-wrap {94 position: absolute;95 left: 0; right: 0;96 top: 270px; /* status(70) + header(90) + chips(110) approx */97 bottom: 140px; /* space for bottom nav */98 overflow-y: auto;99 background: #f2f3f5;100 border-top: 1px solid #eee;101 }102 .product-grid {103 display: grid;104 grid-template-columns: 1fr 1fr;105 background: #f2f3f5;106 }107 .product {108 background: #f2f3f5;109 border-bottom: 1px solid #e6e6e6;110 position: relative;111 padding-bottom: 22px;112 }113 .product:nth-child(odd) {114 border-right: 1px solid #e6e6e6;115 }116 .img {117 height: 540px;118 margin: 0;119 background: #E0E0E0;120 border: 1px solid #BDBDBD;121 display: flex; align-items: center; justify-content: center;122 color: #757575;123 font-size: 26px;124 }125 .wishlist {126 position: absolute;127 right: 22px;128 top: 18px;129 width: 64px; height: 56px;130 display: flex; align-items: center; justify-content: center;131 background: rgba(255,255,255,0.9);132 border: 1px solid #d9d9d9;133 border-radius: 6px;134 }135 .pad {136 padding: 16px 22px 0;137 }138 .price-row {139 display: flex; align-items: center; gap: 14px;140 margin: 12px 0 8px;141 }142 .sale {143 color: #d9342b;144 font-weight: 800;145 background: #fff;146 border: 1px solid #eee;147 padding: 6px 12px;148 font-size: 26px;149 }150 .old {151 color: #777;152 text-decoration: line-through;153 background: #fff;154 border: 1px solid #eee;155 padding: 6px 12px;156 font-size: 24px;157 }158 .best-tag {159 display: inline-block;160 font-size: 20px;161 letter-spacing: 3px;162 color: #111;163 background: #fff;164 border: 1px solid #dcdcdc;165 padding: 8px 14px;166 margin-top: 10px;167 font-weight: 700;168 }169 .now {170 display: inline-block;171 color: #111;172 background: #fff;173 border: 1px solid #eee;174 padding: 6px 12px;175 font-size: 24px;176 margin-top: 8px;177 }178 .name {179 font-size: 30px;180 line-height: 38px;181 font-weight: 800;182 margin: 8px 0;183 }184 .sub {185 font-size: 24px;186 color: #666;187 }188 .color-row {189 margin-top: 6px;190 display: flex; align-items: center; gap: 8px;191 color: #666;192 font-size: 22px;193 }194 .dot-sm { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }195 .d-blue { background:#4170ff; }196 .d-yellow { background:#f5c635; }197 .d-red { background:#e64a4a; }198 199 /* Bottom navigation */200 .bottom-nav {201 position: absolute;202 left: 0; right: 0; bottom: 0;203 height: 130px;204 background: #ffffff;205 border-top: 1px solid #e6e6e6;206 display: flex;207 align-items: center;208 justify-content: space-around;209 padding-bottom: 14px;210 }211 .bottom-item { width: 120px; height: 80px; display: flex; align-items: center; justify-content: center; color:#9a9a9a; }212 .gesture {213 position: absolute;214 bottom: 8px; left: 50%;215 transform: translateX(-50%);216 width: 280px; height: 10px;217 background: #c9c9c9;218 border-radius: 6px;219 opacity: 0.8;220 }221 /* Helpers */222 .muted { color:#9a9a9a; }223</style>224</head>225<body>226<div id="render-target">227 <!-- Status bar -->228 <div class="status-bar">229 <div>9:20</div>230 <div class="status-icons">231 <span class="dot"></span>232 <span class="dot"></span>233 <span class="dot"></span>234 <span class="muted">100%</span>235 </div>236 </div>237 238 <!-- Header -->239 <div class="header">240 <div class="back">241 <svg width="36" height="36" viewBox="0 0 24 24">242 <path d="M14 4 L6 12 L14 20" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>243 </svg>244 </div>245 <div class="search">246 <svg width="36" height="36" viewBox="0 0 24 24">247 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.2" fill="none"/>248 <path d="M16.5 16.5 L21 21" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>249 </svg>250 </div>251 <div class="title">MENS TRAINING SHORTS</div>252 <div class="subtitle">125 RESULTS</div>253 </div>254 255 <!-- Filters -->256 <div class="chip-row">257 <div class="filter-icon">258 <svg width="26" height="26" viewBox="0 0 24 24">259 <path d="M4 6 H20" stroke="#444" stroke-width="2" stroke-linecap="round"/>260 <circle cx="9" cy="6" r="2" fill="#444"/>261 <path d="M4 12 H20" stroke="#444" stroke-width="2" stroke-linecap="round"/>262 <circle cx="15" cy="12" r="2" fill="#444"/>263 <path d="M4 18 H20" stroke="#444" stroke-width="2" stroke-linecap="round"/>264 <circle cx="7" cy="18" r="2" fill="#444"/>265 </svg>266 </div>267 <div class="chip">CLIMA</div>268 <div class="chip">DESIGNED 4 TRAINING</div>269 <div class="chip">RDY</div>270 <div class="chip">DESIGNED 2 MOVE</div>271 </div>272 273 <!-- Product grid -->274 <div class="grid-wrap">275 <div class="product-grid">276 277 <!-- Card 1 -->278 <div class="product">279 <div class="wishlist">280 <svg width="26" height="24" viewBox="0 0 24 24">281 <path d="M12 21 L5 14 C2 11.5 3 7 7 7 c2 0 3 1 5 3 c2-2 3-3 5-3 c4 0 5 4.5 2 7 L12 21 Z" fill="none" stroke="#111" stroke-width="1.5"/>282 </svg>283 </div>284 <div class="img">[IMG: Black Shorts]</div>285 <div class="pad">286 <div class="price-row">287 <div class="sale">$21.00</div>288 <div class="old">$35.00</div>289 </div>290 <div class="name">AEROREADY Designed for Movement Shorts</div>291 <div class="sub">Men's Performance</div>292 <div class="color-row">293 <span>+1</span>294 <span class="dot-sm d-blue"></span>295 <span class="dot-sm d-yellow"></span>296 <span class="dot-sm d-red"></span>297 </div>298 </div>299 </div>300 301 <!-- Card 2 -->302 <div class="product">303 <div class="wishlist">304 <svg width="26" height="24" viewBox="0 0 24 24">305 <path d="M12 21 L5 14 C2 11.5 3 7 7 7 c2 0 3 1 5 3 c2-2 3-3 5-3 c4 0 5 4.5 2 7 L12 21 Z" fill="none" stroke="#111" stroke-width="1.5"/>306 </svg>307 </div>308 <div class="img">[IMG: Black Shorts 3-Stripes]</div>309 <div class="pad">310 <div class="best-tag">BEST SELLER</div>311 <div class="now">$35.00</div>312 <div class="name">Own the Run Shorts</div>313 <div class="sub">Men's Performance</div>314 <div class="color-row">315 <span>+8</span>316 <span class="dot-sm d-blue"></span>317 <span class="dot-sm d-yellow"></span>318 <span class="dot-sm d-red"></span>319 </div>320 </div>321 </div>322 323 <!-- Card 3 -->324 <div class="product">325 <div class="wishlist">326 <svg width="26" height="24" viewBox="0 0 24 24">327 <path d="M12 21 L5 14 C2 11.5 3 7 7 7 c2 0 3 1 5 3 c2-2 3-3 5-3 c4 0 5 4.5 2 7 L12 21 Z" fill="none" stroke="#111" stroke-width="1.5"/>328 </svg>329 </div>330 <div class="img">[IMG: Navy Shorts]</div>331 <div class="pad">332 <div class="price-row">333 <div class="sale">$25.00</div>334 <div class="old">$35.00</div>335 </div>336 <div class="name">AEROREADY Designed for Movement Shorts</div>337 <div class="sub">Men's Performance</div>338 <div class="color-row">339 <span>+1</span>340 <span class="dot-sm d-blue"></span>341 <span class="dot-sm d-yellow"></span>342 <span class="dot-sm d-red"></span>343 </div>344 </div>345 </div>346 347 <!-- Card 4 -->348 <div class="product">349 <div class="wishlist">350 <svg width="26" height="24" viewBox="0 0 24 24">351 <path d="M12 21 L5 14 C2 11.5 3 7 7 7 c2 0 3 1 5 3 c2-2 3-3 5-3 c4 0 5 4.5 2 7 L12 21 Z" fill="none" stroke="#111" stroke-width="1.5"/>352 </svg>353 </div>354 <div class="img">[IMG: Black 3-Stripes Shorts]</div>355 <div class="pad">356 <div class="price-row">357 <div class="sale">$15.00</div>358 <div class="old">$30.00</div>359 </div>360 <div class="name">adidas Designed 2 Move 3-Stripes Primeblue Shorts</div>361 <div class="sub">Men's Performance</div>362 <div class="color-row">363 <span>+2</span>364 <span class="dot-sm d-blue"></span>365 <span class="dot-sm d-yellow"></span>366 <span class="dot-sm d-red"></span>367 </div>368 </div>369 </div>370 371 <!-- More placeholders to extend scroll (optional for realism) -->372 <div class="product">373 <div class="wishlist">374 <svg width="26" height="24" viewBox="0 0 24 24">375 <path d="M12 21 L5 14 C2 11.5 3 7 7 7 c2 0 3 1 5 3 c2-2 3-3 5-3 c4 0 5 4.5 2 7 L12 21 Z" fill="none" stroke="#111" stroke-width="1.5"/>376 </svg>377 </div>378 <div class="img">[IMG: Black Shorts]</div>379 <div class="pad">380 <div class="price-row">381 <div class="sale">$28.00</div>382 <div class="old">$40.00</div>383 </div>384 <div class="name">AEROREADY 3-Stripes Shorts</div>385 <div class="sub">Men's Performance</div>386 <div class="color-row">387 <span>+3</span>388 <span class="dot-sm d-blue"></span>389 <span class="dot-sm d-yellow"></span>390 <span class="dot-sm d-red"></span>391 </div>392 </div>393 </div>394 395 <div class="product">396 <div class="wishlist">397 <svg width="26" height="24" viewBox="0 0 24 24">398 <path d="M12 21 L5 14 C2 11.5 3 7 7 7 c2 0 3 1 5 3 c2-2 3-3 5-3 c4 0 5 4.5 2 7 L12 21 Z" fill="none" stroke="#111" stroke-width="1.5"/>399 </svg>400 </div>401 <div class="img">[IMG: Model Wearing Shorts]</div>402 <div class="pad">403 <div class="now">$35.00</div>404 <div class="name">Run Icon Shorts</div>405 <div class="sub">Men's Performance</div>406 <div class="color-row">407 <span>+4</span>408 <span class="dot-sm d-blue"></span>409 <span class="dot-sm d-yellow"></span>410 <span class="dot-sm d-red"></span>411 </div>412 </div>413 </div>414 415 </div>416 </div>417 418 <!-- Bottom navigation -->419 <div class="bottom-nav">420 <div class="bottom-item">421 <svg width="36" height="36" viewBox="0 0 24 24">422 <path d="M12 3 C9 7 14 8 12 13 C10 10 7 10 7 14 c0 3 2 5 5 5 s5-2 5-5 c0-3-2-4-3-6" fill="none" stroke="#9a9a9a" stroke-width="1.8" stroke-linecap="round"/>423 </svg>424 </div>425 <div class="bottom-item">426 <svg width="36" height="36" viewBox="0 0 24 24">427 <circle cx="11" cy="11" r="7" stroke="#9a9a9a" stroke-width="2" fill="none"/>428 <path d="M16.5 16.5 L21 21" stroke="#9a9a9a" stroke-width="2" stroke-linecap="round"/>429 </svg>430 </div>431 <div class="bottom-item">432 <svg width="36" height="36" viewBox="0 0 24 24">433 <path d="M12 21 L5 14 C2 11.5 3 7 7 7 c2 0 3 1 5 3 c2-2 3-3 5-3 c4 0 5 4.5 2 7 L12 21 Z" fill="none" stroke="#9a9a9a" stroke-width="1.8"/>434 </svg>435 </div>436 <div class="bottom-item">437 <svg width="36" height="36" viewBox="0 0 24 24">438 <path d="M6 7 h12 l-1 12 H7 Z" fill="none" stroke="#9a9a9a" stroke-width="1.8"/>439 <path d="M8 7 c0-2 2-4 4-4 s4 2 4 4" fill="none" stroke="#9a9a9a" stroke-width="1.8"/>440 </svg>441 </div>442 <div class="bottom-item">443 <svg width="36" height="36" viewBox="0 0 24 24">444 <circle cx="12" cy="12" r="8" fill="none" stroke="#9a9a9a" stroke-width="1.8"/>445 <path d="M9 9 c3-2 6 2 3 4 s0 4 3 2" fill="none" stroke="#9a9a9a" stroke-width="1.8" stroke-linecap="round"/>446 </svg>447 </div>448 <div class="gesture"></div>449 </div>450</div>451</body>452</html>