GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Van Heusen Shirts</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 * { box-sizing: border-box; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 24px;16 box-shadow: 0 10px 30px rgba(0,0,0,0.12);17 color: #1f1f1f;18 }19 20 /* Status bar */21 .status-bar {22 height: 72px;23 padding: 0 28px;24 display: flex;25 align-items: center;26 font-size: 30px;27 color: #2b2b2b;28 }29 .status-spacer { flex: 1; }30 .status-icons { display: flex; gap: 26px; align-items: center; }31 32 /* Top app bar */33 .app-bar {34 height: 80px;35 display: flex;36 align-items: center;37 padding: 0 24px;38 }39 .icon-btn {40 width: 60px;41 height: 60px;42 border-radius: 30px;43 display: grid;44 place-items: center;45 }46 .app-actions {47 margin-left: auto;48 display: flex;49 gap: 26px;50 }51 .app-title {52 padding: 8px 24px 0 24px;53 font-weight: 700;54 font-size: 44px;55 line-height: 1.25;56 }57 .sub-title {58 padding: 8px 24px 16px 24px;59 font-size: 30px;60 color: #666;61 }62 63 /* Grid */64 .grid {65 display: flex;66 flex-wrap: wrap;67 padding: 0 24px;68 gap: 24px;69 }70 .card {71 width: calc(50% - 12px);72 border-radius: 24px;73 background: #fff;74 box-shadow: 0 6px 20px rgba(0,0,0,0.06);75 overflow: hidden;76 }77 .img-wrap {78 position: relative;79 width: 100%;80 height: 640px;81 background: #E0E0E0;82 border-bottom: 1px solid #BDBDBD;83 display: flex;84 justify-content: center;85 align-items: center;86 color: #757575;87 font-size: 30px;88 text-align: center;89 padding: 20px;90 }91 .pill-icon {92 position: absolute;93 bottom: 20px;94 left: 20px;95 width: 56px; height: 56px;96 border-radius: 28px;97 background: #fff;98 box-shadow: 0 4px 10px rgba(0,0,0,0.15);99 display: grid; place-items: center;100 }101 .pill-icon.right { left: auto; right: 20px; }102 103 .card-body {104 padding: 22px;105 }106 .brand {107 font-weight: 700;108 font-size: 30px;109 letter-spacing: 0.3px;110 }111 .prod-title {112 margin-top: 8px;113 font-size: 30px;114 color: #333;115 line-height: 1.3;116 }117 .price-row {118 display: flex;119 align-items: baseline;120 gap: 16px;121 margin-top: 18px;122 }123 .price {124 font-size: 34px;125 font-weight: 800;126 }127 .old-price {128 font-size: 30px;129 color: #999;130 text-decoration: line-through;131 }132 .discount {133 font-size: 30px;134 color: #0f9d58;135 font-weight: 700;136 margin-left: auto;137 }138 .offer-row {139 display: flex;140 align-items: center;141 gap: 12px;142 margin-top: 14px;143 color: #0f9d58;144 font-size: 30px;145 font-weight: 700;146 }147 .percent-pill {148 width: 36px; height: 36px; border-radius: 18px;149 background: #e7f6ec;150 display: grid; place-items: center;151 color: #0f9d58; font-size: 24px; font-weight: 800;152 }153 154 /* Bottom bar */155 .bottom-bar {156 position: absolute;157 bottom: 0;158 left: 0; right: 0;159 height: 160px;160 background: #0b0b0b;161 display: flex;162 padding: 20px 24px 24px 24px;163 gap: 24px;164 }165 .bottom-item {166 flex: 1;167 background: transparent;168 color: #fff;169 border-radius: 16px;170 display: flex;171 flex-direction: column;172 justify-content: center;173 padding: 8px 16px;174 gap: 8px;175 }176 .bottom-label {177 display: flex;178 align-items: center;179 gap: 16px;180 font-size: 30px;181 font-weight: 700;182 text-transform: uppercase;183 letter-spacing: 0.5px;184 }185 .bottom-sub {186 font-size: 26px;187 color: #cfcfcf;188 }189 190 /* Simple divider above bottom bar imitation */191 .bottom-shadow {192 position: absolute;193 bottom: 160px;194 left: 0; right: 0;195 height: 8px;196 background: linear-gradient(to top, rgba(0,0,0,0.12), rgba(0,0,0,0));197 }198</style>199</head>200<body>201<div id="render-target">202 203 <!-- Status bar -->204 <div class="status-bar">205 <div>1:33</div>206 <div class="status-spacer"></div>207 <div class="status-icons">208 <!-- signal -->209 <svg width="28" height="28" viewBox="0 0 24 24">210 <path d="M3 17h2v3H3v-3zm4-4h2v7H7v-7zm4-4h2v11h-2V9zm4-4h2v15h-2V5z" fill="#4a4a4a"/>211 </svg>212 <!-- wifi -->213 <svg width="28" height="28" viewBox="0 0 24 24">214 <path d="M12 18.5l-1.5-1.5a2 2 0 013 0L12 18.5zm6-5a7 7 0 00-12 0l-1.5-1.5a9 9 0 0115 0L18 13.5zm3-4.5A12 12 0 003 9l-1.5-1.5a14 14 0 0121 0L21 9z" fill="#4a4a4a"/>215 </svg>216 <!-- battery -->217 <svg width="32" height="28" viewBox="0 0 28 20">218 <rect x="1" y="3" width="22" height="14" rx="3" ry="3" fill="none" stroke="#4a4a4a" stroke-width="2"/>219 <rect x="3" y="5" width="18" height="10" fill="#4a4a4a"/>220 <rect x="24" y="7" width="3" height="6" rx="1" fill="#4a4a4a"/>221 </svg>222 </div>223 </div>224 225 <!-- App bar -->226 <div class="app-bar">227 <div class="icon-btn">228 <svg width="40" height="40" viewBox="0 0 24 24">229 <path d="M15.5 5l-7 7 7 7" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>230 </svg>231 </div>232 <div class="app-actions">233 <!-- search -->234 <div class="icon-btn">235 <svg width="40" height="40" viewBox="0 0 24 24">236 <circle cx="11" cy="11" r="7" fill="none" stroke="#222" stroke-width="2"/>237 <path d="M20 20l-4-4" stroke="#222" stroke-width="2" stroke-linecap="round"/>238 </svg>239 </div>240 <!-- wishlist -->241 <div class="icon-btn">242 <svg width="40" height="40" viewBox="0 0 24 24">243 <path d="M12 21s-6.5-4.35-8.5-7.5C2 10.5 3.5 8 6 8c1.7 0 3 .9 4 2 1-1.1 2.3-2 4-2 2.5 0 4 2.5 2.5 5.5C18.5 16.65 12 21 12 21z" fill="none" stroke="#222" stroke-width="2" stroke-linejoin="round"/>244 </svg>245 </div>246 <!-- bag -->247 <div class="icon-btn">248 <svg width="40" height="40" viewBox="0 0 24 24">249 <path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#222" stroke-width="2"/>250 <path d="M9 8a3 3 0 016 0" fill="none" stroke="#222" stroke-width="2"/>251 </svg>252 </div>253 </div>254 </div>255 256 <!-- Title -->257 <div class="app-title">M size Black Van Heusen shirt for men</div>258 <div class="sub-title">635 Products</div>259 260 <!-- Product grid -->261 <div class="grid">262 263 <!-- Card 1 -->264 <div class="card">265 <div class="img-wrap">266 [IMG: Black Slim Fit Shirt on model]267 <div class="pill-icon">268 <!-- compare icon -->269 <svg width="26" height="26" viewBox="0 0 24 24">270 <path d="M7 6h10M7 12h10M7 18h10" stroke="#333" stroke-width="2" stroke-linecap="round"/>271 </svg>272 </div>273 <div class="pill-icon right">274 <!-- heart -->275 <svg width="26" height="26" viewBox="0 0 24 24">276 <path d="M12 21s-6-4-8-7c-2-3 0-6 3-6 1.8 0 3.2.9 4 2 0.8-1.1 2.2-2 4-2 3 0 5 3 3 6-2 3-8 7-8 7z" fill="none" stroke="#333" stroke-width="2"/>277 </svg>278 </div>279 </div>280 <div class="card-body">281 <div class="brand">VAN HEUSEN</div>282 <div class="prod-title">Men Slim Fit Shirt with Patch Pocket</div>283 <div class="price-row">284 <div class="price">₹1415</div>285 <div class="old-price">₹2399</div>286 <div class="discount">41% off</div>287 </div>288 <div class="offer-row">289 <div class="percent-pill">%</div>290 <div>Offer Price ₹1,118</div>291 </div>292 </div>293 </div>294 295 <!-- Card 2 -->296 <div class="card">297 <div class="img-wrap">298 [IMG: Black Slim Fit Shirt]299 <div class="pill-icon">300 <svg width="26" height="26" viewBox="0 0 24 24">301 <path d="M7 6h10M7 12h10M7 18h10" stroke="#333" stroke-width="2" stroke-linecap="round"/>302 </svg>303 </div>304 <div class="pill-icon right">305 <svg width="26" height="26" viewBox="0 0 24 24">306 <path d="M12 21s-6-4-8-7c-2-3 0-6 3-6 1.8 0 3.2.9 4 2 0.8-1.1 2.2-2 4-2 3 0 5 3 3 6-2 3-8 7-8 7z" fill="none" stroke="#333" stroke-width="2"/>307 </svg>308 </div>309 </div>310 <div class="card-body">311 <div class="brand">VAN HEUSEN</div>312 <div class="prod-title">Men Slim Fit Shirt</div>313 <div class="price-row">314 <div class="price">₹1533</div>315 <div class="old-price">₹2599</div>316 <div class="discount">41% off</div>317 </div>318 <div class="offer-row">319 <div class="percent-pill">%</div>320 <div>Offer Price ₹1,211</div>321 </div>322 </div>323 </div>324 325 <!-- Card 3 -->326 <div class="card">327 <div class="img-wrap">328 [IMG: Black Striped Shirt]329 <div class="pill-icon">330 <svg width="26" height="26" viewBox="0 0 24 24">331 <path d="M7 6h10M7 12h10M7 18h10" stroke="#333" stroke-width="2" stroke-linecap="round"/>332 </svg>333 </div>334 <div class="pill-icon right">335 <svg width="26" height="26" viewBox="0 0 24 24">336 <path d="M12 21s-6-4-8-7c-2-3 0-6 3-6 1.8 0 3.2.9 4 2 0.8-1.1 2.2-2 4-2 3 0 5 3 3 6-2 3-8 7-8 7z" fill="none" stroke="#333" stroke-width="2"/>337 </svg>338 </div>339 </div>340 <div class="card-body">341 <div class="brand">VAN HEUSEN</div>342 <div class="prod-title">Striped Shirt with Patch Pocket</div>343 </div>344 </div>345 346 <!-- Card 4 -->347 <div class="card">348 <div class="img-wrap">349 [IMG: Black Cotton Slim Fit Shirt with Band Collar]350 <div class="pill-icon">351 <svg width="26" height="26" viewBox="0 0 24 24">352 <path d="M7 6h10M7 12h10M7 18h10" stroke="#333" stroke-width="2" stroke-linecap="round"/>353 </svg>354 </div>355 <div class="pill-icon right">356 <svg width="26" height="26" viewBox="0 0 24 24">357 <path d="M12 21s-6-4-8-7c-2-3 0-6 3-6 1.8 0 3.2.9 4 2 0.8-1.1 2.2-2 4-2 3 0 5 3 3 6-2 3-8 7-8 7z" fill="none" stroke="#333" stroke-width="2"/>358 </svg>359 </div>360 </div>361 <div class="card-body">362 <div class="brand">VAN HEUSEN</div>363 <div class="prod-title">Men Cotton Slim Fit Shirt with Band Collar</div>364 </div>365 </div>366 367 </div>368 369 <!-- Bottom shadow & bar -->370 <div class="bottom-shadow"></div>371 <div class="bottom-bar">372 <div class="bottom-item">373 <div class="bottom-label">374 <svg width="34" height="34" viewBox="0 0 24 24">375 <path d="M6 15l-3 3m0 0l3 3m-3-3h9" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>376 </svg>377 SORT BY378 </div>379 <div class="bottom-sub">Relevance</div>380 </div>381 <div class="bottom-item">382 <div class="bottom-label">383 <svg width="34" height="34" viewBox="0 0 24 24">384 <path d="M4 6h16M4 12h12M4 18h8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>385 </svg>386 CATEGORY387 </div>388 </div>389 <div class="bottom-item">390 <div class="bottom-label">391 <svg width="34" height="34" viewBox="0 0 24 24">392 <path d="M5 7h14M8 12h8M10 17h4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>393 </svg>394 FILTERS395 </div>396 </div>397 </div>398 399</div>400</body>401</html>