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>Van Heusen - Product Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; color: #222;13 }14 15 /* Top status bar */16 .status-bar {17 height: 90px;18 padding: 0 36px;19 display: flex; align-items: center; justify-content: space-between;20 font-size: 32px; color: #333;21 }22 .status-left { display: flex; align-items: center; gap: 24px; }23 .status-right { display: flex; align-items: center; gap: 24px; }24 .icon-24 { width: 48px; height: 48px; }25 26 /* App bar */27 .app-bar {28 height: 130px;29 padding: 0 24px;30 display: flex; align-items: center; justify-content: space-between;31 border-bottom: 1px solid #E6E6E6;32 }33 .app-left { display: flex; align-items: center; gap: 24px; }34 .brand-logo {35 width: 72px; height: 72px; border-radius: 18px;36 background: linear-gradient(135deg, #FF6E7F, #FFD56E);37 display: flex; align-items: center; justify-content: center;38 color: #fff; font-weight: 800; font-size: 36px;39 }40 .app-title { font-size: 44px; font-weight: 700; color: #2D2D2D; }41 .app-actions { display: flex; align-items: center; gap: 36px; }42 43 /* Small top cards (partial row) */44 .top-cards {45 display: flex; gap: 24px;46 padding: 24px;47 }48 .small-card {49 width: 330px; border: 1px solid #E5E5E5; border-radius: 12px; overflow: hidden; background: #fff;50 }51 .small-card .img {52 width: 100%; height: 150px;53 background: #E0E0E0; border-bottom: 1px solid #BDBDBD;54 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;55 }56 .small-card .info { padding: 16px; }57 .small-card .title { font-size: 32px; font-weight: 700; }58 .small-card .price { font-size: 32px; font-weight: 700; margin-top: 8px; }59 .small-card .sub { font-size: 26px; color: #6F6F6F; margin-top: 8px; }60 61 /* Sponsored section */62 .section-header {63 display: flex; align-items: center; justify-content: space-between;64 padding: 18px 36px 0 36px; margin-top: 12px;65 }66 .section-title { font-size: 42px; font-weight: 800; color: #2E3135; }67 .ad-pill {68 border: 1px solid #CFCFCF; color: #606060; font-size: 26px;69 padding: 6px 12px; border-radius: 12px;70 }71 .product-grid {72 display: grid; grid-template-columns: repeat(3, 1fr);73 gap: 24px; padding: 24px 36px;74 }75 .product-card {76 border: 1px solid #E5E5E5; border-radius: 12px; overflow: hidden; background: #fff;77 box-shadow: 0 2px 0 rgba(0,0,0,0.02);78 }79 .product-card .img {80 width: 100%; height: 360px;81 background: #E0E0E0; border-bottom: 1px solid #BDBDBD;82 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; position: relative;83 }84 .rating-pill {85 position: absolute; bottom: 12px; left: 12px;86 background: #ffffff; border-radius: 32px; padding: 8px 16px;87 border: 1px solid #E5E5E5; display: flex; align-items: center; gap: 8px;88 font-size: 28px; font-weight: 700; color: #2E3135;89 }90 .rating-star { width: 28px; height: 28px; }91 .product-card .content { padding: 18px; }92 .product-card .brand { font-size: 36px; font-weight: 800; color: #2E3135; }93 .price-row { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }94 .mrp { font-size: 26px; color: #9B9B9B; text-decoration: line-through; }95 .price { font-size: 34px; font-weight: 800; color: #2E3135; }96 .off { font-size: 26px; color: #F26C2F; font-weight: 700; }97 .desc { margin-top: 8px; font-size: 28px; color: #6F6F6F; }98 99 /* Divider area */100 .soft-divider {101 height: 18px; background: #F5F5F7; margin: 12px 0 0 0; border-top: 1px solid #EEEEEE;102 }103 104 /* Ratings & Reviews */105 .ratings-section { padding: 24px 36px; }106 .verified-row { display: flex; align-items: center; gap: 12px; color: #2E7D6F; font-size: 30px; font-weight: 700; margin-top: 6px; }107 .check-icon { width: 28px; height: 28px; }108 .ratings-grid {109 display: grid; grid-template-columns: 360px 1fr; gap: 24px; margin-top: 24px; align-items: center;110 }111 .big-rating {112 display: flex; flex-direction: column; align-items: center; justify-content: center;113 height: 260px; border-right: 1px solid #EEEEEE;114 }115 .big-rating .value { font-size: 96px; font-weight: 800; color: #2E3135; line-height: 1; }116 .big-rating .sub { display: flex; align-items: center; gap: 8px; color: #6F6F6F; font-size: 28px; margin-top: 8px; }117 .dist { display: flex; flex-direction: column; gap: 22px; padding-right: 36px; }118 .dist-row { display: grid; grid-template-columns: 60px 1fr 80px 40px; align-items: center; gap: 16px; }119 .star-label { font-size: 30px; color: #2E3135; }120 .bar { height: 18px; background: #E9E9EC; border-radius: 10px; overflow: hidden; }121 .bar-fill { height: 100%; background: #2E7D6F; border-radius: 10px; }122 .bar-fill.gray { background: #6CC1B0; }123 .bar-fill.light { background: #9AD8CE; }124 .bar-fill.warn { background: #F4B000; }125 .bar-fill.error { background: #E66565; }126 .count { font-size: 28px; color: #6F6F6F; text-align: right; }127 .chev { width: 28px; height: 28px; }128 129 /* Customer Questions */130 .questions { padding: 18px 36px 120px 36px; }131 .questions .title { font-size: 40px; font-weight: 800; color: #2E3135; }132 .questions .sub { font-size: 30px; color: #6F6F6F; margin-top: 8px; }133 134 /* Bottom gesture bar */135 .gesture {136 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);137 width: 300px; height: 10px; background: #D9D9D9; border-radius: 8px;138 }139</style>140</head>141<body>142<div id="render-target">143 <!-- Status Bar -->144 <div class="status-bar">145 <div class="status-left">146 <span>10:16</span>147 <svg class="icon-24" viewBox="0 0 24 24">148 <circle cx="11" cy="11" r="9" fill="none" stroke="#555" stroke-width="2"/>149 <path d="M11 5v6l4 2" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round"/>150 </svg>151 <svg class="icon-24" viewBox="0 0 24 24">152 <circle cx="12" cy="12" r="9" fill="none" stroke="#555" stroke-width="2"/>153 <path d="M7 13l3 3 7-7" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round"/>154 </svg>155 <svg class="icon-24" viewBox="0 0 24 24">156 <path d="M12 2l3 6 7 1-5 4 2 7-7-3-7 3 2-7-5-4 7-1z" fill="#777"/>157 </svg>158 <span style="font-size:36px; color:#777;">•</span>159 </div>160 <div class="status-right">161 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#777" stroke-width="2"/><path d="M8 12h8" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>162 <svg class="icon-24" viewBox="0 0 24 24"><path d="M3 12c3-4 6-6 9-6s6 2 9 6-6 6-9 6-6-2-9-6z" fill="none" stroke="#777" stroke-width="2"/><circle cx="12" cy="12" r="2" fill="#777"/></svg>163 <svg class="icon-24" viewBox="0 0 24 24"><path d="M6 8h12v10H6z" fill="none" stroke="#777" stroke-width="2"/><path d="M9 8V6h6v2" fill="none" stroke="#777" stroke-width="2"/></svg>164 </div>165 </div>166 167 <!-- App Bar -->168 <div class="app-bar">169 <div class="app-left">170 <svg class="icon-24" viewBox="0 0 24 24">171 <path d="M15 6L9 12l6 6" fill="none" stroke="#2D2D2D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>172 </svg>173 <div class="brand-logo">M</div>174 <div class="app-title">Van Heusen</div>175 </div>176 <div class="app-actions">177 <svg class="icon-24" viewBox="0 0 24 24">178 <circle cx="18" cy="5" r="3" fill="#2E3135"/>179 <path d="M15 7l-7 4-5 8 8-5 4-7" fill="none" stroke="#2E3135" stroke-width="2" stroke-linecap="round"/>180 </svg>181 <svg class="icon-24" viewBox="0 0 24 24">182 <path d="M12 21s-7-4.5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-7 10-11 10z" fill="none" stroke="#2E3135" stroke-width="2"/>183 </svg>184 <svg class="icon-24" viewBox="0 0 24 24">185 <path d="M6 8h12l-1 11H7L6 8z" fill="none" stroke="#2E3135" stroke-width="2"/>186 <path d="M10 8V6h4v2" fill="none" stroke="#2E3135" stroke-width="2"/>187 </svg>188 </div>189 </div>190 191 <!-- Small top cards (preview row) -->192 <div class="top-cards">193 <div class="small-card">194 <div class="img">[IMG: White formal shirt product]</div>195 <div class="info">196 <div class="title">Van Heusen</div>197 <div class="price">₹2,599</div>198 <div class="sub">Pure Cotton Custom Shirt</div>199 </div>200 </div>201 <div class="small-card">202 <div class="img">[IMG: Men in casual shirt]</div>203 <div class="info">204 <div class="title">Allen Solly</div>205 <div class="price"><span class="mrp">₹2,499</span> ₹1,874 <span class="off">25% OFF</span></div>206 <div class="sub">Men Slim Fit Casual Shirt</div>207 </div>208 </div>209 <div class="small-card">210 <div class="img">[IMG: Formal shirt product]</div>211 <div class="info">212 <div class="title">Louis Philippe</div>213 <div class="price">₹2,999</div>214 <div class="sub">Men Formal Shirt</div>215 </div>216 </div>217 </div>218 219 <!-- Sponsored Products -->220 <div class="section-header">221 <div class="section-title">Sponsored Products</div>222 <div class="ad-pill">AD</div>223 </div>224 <div class="product-grid">225 <div class="product-card">226 <div class="img">227 [IMG: Model wearing navy formal shirt]228 <div class="rating-pill">229 <span>4.1</span>230 <svg class="rating-star" viewBox="0 0 24 24">231 <path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.7 5.8 21l1.2-6.9-5-4.8 6.9-1z" fill="#2E7D6F"/>232 </svg>233 </div>234 </div>235 <div class="content">236 <div class="brand">Van Heusen</div>237 <div class="price-row"><span class="mrp">₹2,999</span> <span class="price">₹2,249</span> <span class="off">25% OFF</span></div>238 <div class="desc">Slim Fit Formal Shirt</div>239 </div>240 </div>241 242 <div class="product-card">243 <div class="img">244 [IMG: Model wearing dark teal shirt]245 <div class="rating-pill">246 <span>4.5</span>247 <svg class="rating-star" viewBox="0 0 24 24">248 <path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.7 5.8 21l1.2-6.9-5-4.8 6.9-1z" fill="#2E7D6F"/>249 </svg>250 </div>251 </div>252 <div class="content">253 <div class="brand">Van Heusen</div>254 <div class="price-row"><span class="price">₹2,299</span></div>255 <div class="desc">Slim Fit Cotton Formal Shirt</div>256 </div>257 </div>258 259 <div class="product-card">260 <div class="img">261 [IMG: Model wearing black shirt]262 </div>263 <div class="content">264 <div class="brand">Louis Philippe</div>265 <div class="price-row"><span class="mrp">₹2,599</span> <span class="price">₹1,999</span></div>266 <div class="desc">Spread Collar Formal Shirt</div>267 </div>268 </div>269 </div>270 271 <div class="soft-divider"></div>272 273 <!-- Ratings & Reviews -->274 <div class="ratings-section">275 <div class="section-title">Rating & Reviews</div>276 <div class="verified-row">277 <svg class="check-icon" viewBox="0 0 24 24">278 <circle cx="12" cy="12" r="10" fill="none" stroke="#2E7D6F" stroke-width="2"/>279 <path d="M7 12l3 3 7-7" fill="none" stroke="#2E7D6F" stroke-width="2" stroke-linecap="round"/>280 </svg>281 <span>By Verified Buyers Only</span>282 </div>283 284 <div class="ratings-grid">285 <div class="big-rating">286 <div class="value">4.4</div>287 <div class="sub">288 <svg class="rating-star" viewBox="0 0 24 24">289 <path d="M12 2l3.1 6.3 6.9 1-5 4.8L18.2 21 12 17.7 5.8 21l1.2-6.9-5-4.8 6.9-1z" fill="#2E7D6F"/>290 </svg>291 <span>49 Verified Buyers</span>292 </div>293 </div>294 295 <div class="dist">296 <div class="dist-row">297 <div class="star-label">5 ★</div>298 <div class="bar"><div class="bar-fill" style="width:67%;"></div></div>299 <div class="count">33</div>300 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round"/></svg>301 </div>302 <div class="dist-row">303 <div class="star-label">4 ★</div>304 <div class="bar"><div class="bar-fill gray" style="width:18%;"></div></div>305 <div class="count">9</div>306 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round"/></svg>307 </div>308 <div class="dist-row">309 <div class="star-label">3 ★</div>310 <div class="bar"><div class="bar-fill light" style="width:6%;"></div></div>311 <div class="count">3</div>312 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round"/></svg>313 </div>314 <div class="dist-row">315 <div class="star-label">2 ★</div>316 <div class="bar"><div class="bar-fill warn" style="width:4%;"></div></div>317 <div class="count">2</div>318 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round"/></svg>319 </div>320 <div class="dist-row">321 <div class="star-label">1 ★</div>322 <div class="bar"><div class="bar-fill error" style="width:4%;"></div></div>323 <div class="count">2</div>324 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round"/></svg>325 </div>326 </div>327 </div>328 </div>329 330 <div class="soft-divider"></div>331 332 <!-- Customer Questions -->333 <div class="questions">334 <div class="title">Customer Questions</div>335 <div class="sub">Answered by people who bought this and verified sellers</div>336 </div>337 338 <!-- Bottom gesture bar -->339 <div class="gesture"></div>340</div>341</body>342</html>