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>Denim Jeans for Men</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #222;17 }18 19 /* Status bar */20 .status {21 height: 120px;22 padding: 0 40px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #757575;27 font-size: 40px;28 }29 .brandbar {30 height: 120px;31 background: #F7C62A;32 }33 34 /* Toolbar */35 .toolbar {36 height: 150px;37 padding: 0 36px;38 display: flex;39 align-items: center;40 justify-content: space-between;41 background: #fff;42 border-bottom: 1px solid #eee;43 }44 .left-actions {45 display: flex;46 align-items: center;47 gap: 24px;48 }49 .title-block {50 flex: 1;51 padding-left: 12px;52 }53 .title-block .title {54 font-weight: 700;55 letter-spacing: 3px;56 font-size: 44px;57 }58 .title-block .subtitle {59 margin-top: 6px;60 font-size: 30px;61 color: #666;62 }63 .right-actions {64 display: flex;65 align-items: center;66 gap: 28px;67 }68 .icon-btn {69 width: 84px;70 height: 84px;71 border-radius: 42px;72 display: flex;73 align-items: center;74 justify-content: center;75 }76 .icon {77 width: 50px;78 height: 50px;79 }80 81 /* Address ribbon */82 .hello-strip {83 height: 76px;84 background: #FFF3B0;85 display: flex;86 align-items: center;87 justify-content: space-between;88 padding: 0 28px;89 font-size: 36px;90 color: #2b2b2b;91 }92 .hello-strip .hi { font-style: italic; }93 94 /* Product grid */95 .content {96 position: absolute;97 left: 0; right: 0;98 top: 446px; /* 120 + 150 + 76 + brandbar 120 = 466; adjust to fit */99 /* corrected to precise stacking: status(120) + brand(120) + toolbar(150) + strip(76) = 466 */100 top: 466px;101 bottom: 220px; /* space for bottom bar */102 overflow-y: auto;103 }104 .grid {105 display: grid;106 grid-template-columns: 1fr 1fr;107 gap: 28px;108 padding: 24px;109 }110 .card {111 background: #fff;112 border: 1px solid #eee;113 border-radius: 22px;114 overflow: hidden;115 position: relative;116 }117 .product-img {118 height: 780px;119 background: #E0E0E0;120 border-bottom: 1px solid #BDBDBD;121 display: flex;122 align-items: center;123 justify-content: center;124 color: #757575;125 font-size: 36px;126 text-align: center;127 }128 .ribbon {129 position: absolute;130 top: 170px;131 left: 18px;132 background: #F3C13A;133 color: #2f2f2f;134 padding: 10px 0;135 border-radius: 10px;136 width: 54px;137 text-align: center;138 font-weight: 600;139 letter-spacing: 1px;140 font-size: 26px;141 writing-mode: vertical-rl;142 transform: rotate(180deg);143 box-shadow: 0 2px 4px rgba(0,0,0,0.1);144 }145 .wish {146 position: absolute;147 right: 28px;148 bottom: 300px;149 width: 88px;150 height: 88px;151 border-radius: 50%;152 border: 4px solid #18B7AE;153 background: #fff;154 display: flex;155 align-items: center;156 justify-content: center;157 }158 .info {159 padding: 24px 26px 30px;160 }161 .brand {162 letter-spacing: 4px;163 font-weight: 700;164 font-size: 32px;165 }166 .desc {167 color: #555;168 font-size: 30px;169 margin-top: 8px;170 line-height: 1.25;171 height: 76px;172 overflow: hidden;173 }174 .price-row {175 margin-top: 14px;176 display: flex;177 align-items: baseline;178 gap: 14px;179 flex-wrap: wrap;180 }181 .price-now {182 font-size: 42px;183 font-weight: 800;184 }185 .price-old {186 font-size: 34px;187 color: #9e9e9e;188 text-decoration: line-through;189 }190 .discount {191 font-size: 32px;192 color: #A3831E;193 font-style: italic;194 letter-spacing: 2px;195 }196 197 /* Bottom action bar */198 .bottom-bar {199 position: absolute;200 left: 0; right: 0; bottom: 70px;201 height: 170px;202 background: #ffffff;203 border-top: 8px solid #20B4AC;204 display: flex;205 align-items: center;206 justify-content: space-evenly;207 }208 .bottom-btn {209 display: flex;210 align-items: center;211 gap: 18px;212 color: #222;213 font-size: 34px;214 font-weight: 600;215 }216 .bottom-btn .icon {217 width: 64px;218 height: 64px;219 color: #333;220 }221 222 /* Gesture pill */223 .home-pill {224 position: absolute;225 left: 50%;226 transform: translateX(-50%);227 bottom: 18px;228 width: 360px;229 height: 12px;230 background: #000;231 opacity: 0.85;232 border-radius: 10px;233 }234</style>235</head>236<body>237<div id="render-target">238 239 <!-- Status bar (mock) -->240 <div class="status">241 <div>9:44</div>242 <div>End</div>243 </div>244 245 <!-- Brand color bar -->246 <div class="brandbar"></div>247 248 <!-- Toolbar with back, title and actions -->249 <div class="toolbar">250 <div class="left-actions">251 <div class="icon-btn" aria-label="Back">252 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">253 <path d="M14 5l-7 7 7 7"></path>254 </svg>255 </div>256 <div class="title-block">257 <div class="title">DENIM JEANS FOR MEN</div>258 <div class="subtitle">313 Products</div>259 </div>260 </div>261 <div class="right-actions">262 <div class="icon-btn" aria-label="Search">263 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">264 <circle cx="11" cy="11" r="7"></circle>265 <path d="M21 21l-4.3-4.3"></path>266 </svg>267 </div>268 <div class="icon-btn" aria-label="Notifications">269 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">270 <path d="M18 16v-5a6 6 0 10-12 0v5l-2 2h16l-2-2z"></path>271 <path d="M13.73 21a2 2 0 01-3.46 0"></path>272 </svg>273 </div>274 <div class="icon-btn" aria-label="Wishlist">275 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">276 <path d="M20.8 6.6a5 5 0 00-7.1 0L12 8.3l-1.7-1.7a5 5 0 10-7.1 7.1L12 22l8.8-8.3a5 5 0 000-7.1z"></path>277 </svg>278 </div>279 <div class="icon-btn" aria-label="Share">280 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">281 <path d="M4 12v7a1 1 0 001 1h14a1 1 0 001-1v-7"></path>282 <path d="M16 6l-4-4-4 4"></path>283 <path d="M12 2v14"></path>284 </svg>285 </div>286 </div>287 </div>288 289 <!-- Hello / Deliver to strip -->290 <div class="hello-strip">291 <div class="hi">Hi,</div>292 <div>Deliver to</div>293 </div>294 295 <!-- Scrollable content with product grid -->296 <div class="content">297 <div class="grid">298 <!-- Card 1 -->299 <div class="card">300 <div class="product-img">[IMG: Grey Jeans on Pink Background]</div>301 <div class="ribbon">Best Seller</div>302 <div class="wish" aria-hidden="true">303 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#18B7AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">304 <path d="M20.8 6.6a5 5 0 00-7.1 0L12 8.3l-1.7-1.7a5 5 0 10-7.1 7.1L12 22l8.8-8.3a5 5 0 000-7.1z"></path>305 </svg>306 </div>307 <div class="info">308 <div class="brand">BARE DENIM</div>309 <div class="desc">Bare Denim Grey Solid Full Length Jeans</div>310 <div class="price-row">311 <div class="price-now">₹839</div>312 <div class="price-old">₹1399</div>313 <div class="discount">40% OFF</div>314 </div>315 </div>316 </div>317 318 <!-- Card 2 -->319 <div class="card">320 <div class="product-img">[IMG: Black Jeans on Peach Background]</div>321 <div class="ribbon">Best Seller</div>322 <div class="wish" aria-hidden="true">323 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#18B7AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">324 <path d="M20.8 6.6a5 5 0 00-7.1 0L12 8.3l-1.7-1.7a5 5 0 10-7.1 7.1L12 22l8.8-8.3a5 5 0 000-7.1z"></path>325 </svg>326 </div>327 <div class="info">328 <div class="brand">BARE DENIM</div>329 <div class="desc">Bare Denim Black Solid Full Length Jeans</div>330 <div class="price-row">331 <div class="price-now">₹999</div>332 <div class="price-old">₹1699</div>333 <div class="discount">41% OFF</div>334 </div>335 </div>336 </div>337 338 <!-- Card 3 -->339 <div class="card">340 <div class="product-img">[IMG: Navy Jeans with Chair Prop]</div>341 <div class="wish" aria-hidden="true">342 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#18B7AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">343 <path d="M20.8 6.6a5 5 0 00-7.1 0L12 8.3l-1.7-1.7a5 5 0 10-7.1 7.1L12 22l8.8-8.3a5 5 0 000-7.1z"></path>344 </svg>345 </div>346 <div class="info">347 <div class="brand">BARE DENIM</div>348 <div class="desc">Bare Denim Navy Blue Solid Jeans</div>349 <div class="price-row">350 <div class="price-now">₹899</div>351 <div class="price-old">₹1499</div>352 <div class="discount">40% OFF</div>353 </div>354 </div>355 </div>356 357 <!-- Card 4 -->358 <div class="card">359 <div class="product-img">[IMG: Light Blue Washed Jeans]</div>360 <div class="wish" aria-hidden="true">361 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#18B7AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">362 <path d="M20.8 6.6a5 5 0 00-7.1 0L12 8.3l-1.7-1.7a5 5 0 10-7.1 7.1L12 22l8.8-8.3a5 5 0 000-7.1z"></path>363 </svg>364 </div>365 <div class="info">366 <div class="brand">BARE DENIM</div>367 <div class="desc">Bare Denim Light Blue Solid Jeans</div>368 <div class="price-row">369 <div class="price-now">₹999</div>370 <div class="price-old">₹1699</div>371 <div class="discount">41% OFF</div>372 </div>373 </div>374 </div>375 </div>376 </div>377 378 <!-- Bottom bar -->379 <div class="bottom-bar">380 <div class="bottom-btn">381 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round">382 <path d="M4 7h12"></path>383 <path d="M4 12h8"></path>384 <path d="M4 17h16"></path>385 </svg>386 <span>SORT</span>387 </div>388 <div class="bottom-btn">389 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">390 <path d="M4 6h16"></path>391 <circle cx="8" cy="6" r="2"></circle>392 <path d="M4 12h16"></path>393 <circle cx="16" cy="12" r="2"></circle>394 <path d="M4 18h16"></path>395 <circle cx="10" cy="18" r="2"></circle>396 </svg>397 <span>FILTER</span>398 </div>399 </div>400 401 <!-- Gesture pill -->402 <div class="home-pill"></div>403 404</div>405</body>406</html>