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>Product Details</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #212121; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top bars */18 .statusbar {19 height: 120px;20 background: #000;21 }22 .appbar {23 height: 140px;24 display: flex;25 align-items: center;26 padding: 0 36px;27 border-bottom: 1px solid #EEEEEE;28 background: #fff;29 }30 .appbar .left,31 .appbar .right {32 display: flex;33 align-items: center;34 }35 .appbar .left { gap: 24px; }36 .appbar .title {37 font-size: 44px;38 font-weight: 600;39 }40 .icon-btn {41 width: 84px; height: 84px;42 display: inline-flex; align-items: center; justify-content: center;43 }44 .spacer { flex: 1; }45 46 /* Content */47 .content {48 padding: 36px 40px 280px; /* leave room for bottom bar */49 }50 .label-lg {51 font-weight: 700;52 font-size: 36px;53 margin-bottom: 22px;54 }55 .pincode-box {56 height: 120px;57 border: 1px solid #E0E0E0;58 border-radius: 16px;59 display: flex;60 align-items: center;61 padding: 0 30px;62 justify-content: space-between;63 background: #fff;64 }65 .pincode-placeholder {66 color: #9E9E9E;67 font-size: 38px;68 }69 .check-btn {70 color: #E79F2B;71 font-weight: 700;72 font-size: 36px;73 }74 .divider {75 height: 2px;76 background: #EEEEEE;77 margin: 36px 0;78 }79 .soldby {80 font-size: 34px;81 }82 .soldby b { font-weight: 700; }83 .nav-row {84 height: 120px;85 display: flex; align-items: center;86 font-size: 40px;87 color: #424242;88 }89 .nav-row .spacer { flex: 1; }90 .nav-row + .divider { margin-top: 0; }91 92 .section-title {93 font-size: 48px;94 font-weight: 800;95 margin: 24px 0 28px;96 }97 98 /* Product cards */99 .product-cards {100 display: grid;101 grid-template-columns: 1fr 1fr 1fr;102 gap: 28px;103 }104 .card {105 background: #fff;106 }107 .thumb {108 height: 560px;109 background: #E0E0E0;110 border: 1px solid #BDBDBD;111 border-radius: 12px;112 display: flex; align-items: center; justify-content: center;113 color: #757575;114 font-size: 30px;115 position: relative;116 }117 .fav-chip {118 position: absolute; top: 18px; right: 18px;119 width: 92px; height: 92px; border-radius: 50%;120 background: #fff; border: 1px solid #E0E0E0;121 display: flex; align-items: center; justify-content: center;122 box-shadow: 0 1px 2px rgba(0,0,0,0.06);123 }124 .price {125 margin-top: 18px;126 font-size: 44px;127 font-weight: 800;128 }129 .price.red { color: #D32F2F; }130 .price .mrp {131 font-size: 30px;132 color: #9E9E9E;133 text-decoration: line-through;134 margin-left: 12px;135 font-weight: 500;136 }137 .title {138 font-size: 34px;139 color: #424242;140 margin-top: 8px;141 line-height: 1.25;142 }143 144 /* Bottom sticky bar */145 .bottom-bar {146 position: absolute; left: 0; right: 0; bottom: 0;147 height: 260px;148 background: #fff;149 border-top: 1px solid #EAEAEA;150 display: flex; align-items: center;151 padding: 24px 32px 30px;152 box-sizing: border-box;153 }154 .price-summary {155 display: flex; flex-direction: column;156 gap: 10px;157 }158 .strike-small {159 color: #9E9E9E;160 font-size: 30px;161 text-decoration: line-through;162 }163 .save-text {164 color: #2E7D32;165 font-weight: 700;166 font-size: 30px;167 margin-left: 12px;168 }169 .final-price {170 color: #D32F2F;171 font-size: 56px;172 font-weight: 800;173 }174 .tax-note {175 color: #757575;176 font-size: 28px;177 }178 .cta {179 margin-left: auto;180 background: #F0A535;181 color: #fff;182 font-weight: 800;183 font-size: 38px;184 border-radius: 14px;185 padding: 34px 56px;186 }187 188 /* Home indicator */189 .home-indicator {190 position: absolute;191 left: 50%;192 transform: translateX(-50%);193 bottom: 10px;194 width: 260px;195 height: 10px;196 background: #000;197 border-radius: 6px;198 opacity: 0.85;199 }200 201 /* Simple utility */202 .row { display: flex; align-items: center; }203</style>204</head>205<body>206 <div id="render-target">207 <div class="statusbar"></div>208 <div class="appbar">209 <div class="left row">210 <div class="icon-btn" aria-label="Back">211 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">212 <path d="M15 18l-6-6 6-6"/>213 </svg>214 </div>215 <div class="title">Product Details</div>216 </div>217 <div class="spacer"></div>218 <div class="right">219 <div class="icon-btn" aria-label="Search">220 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2">221 <circle cx="11" cy="11" r="7"></circle>222 <path d="M21 21l-4.3-4.3"></path>223 </svg>224 </div>225 <div class="icon-btn" aria-label="Wishlist">226 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2">227 <path d="M20.8 6.6a5 5 0 0 0-7.1 0L12 8.3l-1.7-1.7a5 5 0 0 0-7.1 7.1L12 22l8.8-8.3a5 5 0 0 0 0-7.1z"/>228 </svg>229 </div>230 <div class="icon-btn" aria-label="Bag">231 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">232 <path d="M6 7h12l-1 13H7L6 7z"></path>233 <path d="M9 7V5a3 3 0 0 1 6 0v2"></path>234 </svg>235 </div>236 </div>237 </div>238 239 <div class="content">240 <div class="label-lg">When will you receive your order?</div>241 <div class="pincode-box">242 <div class="pincode-placeholder">Enter Pincode</div>243 <div class="check-btn">Check</div>244 </div>245 246 <div class="divider"></div>247 248 <div class="soldby"><b>Sold by:</b> Landmark Online India Pvt Ltd</div>249 250 <div class="divider"></div>251 252 <div class="nav-row">253 <div>Overview</div>254 <div class="spacer"></div>255 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">256 <path d="M9 18l6-6-6-6"/>257 </svg>258 </div>259 <div class="divider"></div>260 <div class="nav-row">261 <div>Reviews</div>262 <div class="spacer"></div>263 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">264 <path d="M9 18l6-6-6-6"/>265 </svg>266 </div>267 268 <div class="divider" style="margin-top: 30px;"></div>269 270 <div class="section-title">You May Also Like</div>271 272 <div class="product-cards">273 <!-- Left (partially visible in screenshot; still rendered as full card) -->274 <div class="card">275 <div class="thumb">[IMG: Men's Full Sleeve Shirt - Blue]276 <div class="fav-chip" aria-hidden="true">277 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2">278 <path d="M20.8 6.6a5 5 0 0 0-7.1 0L12 8.3l-1.7-1.7a5 5 0 0 0-7.1 7.1L12 22l8.8-8.3a5 5 0 0 0 0-7.1z"/>279 </svg>280 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2" style="position:absolute; right:22px; top:22px;">281 <path d="M12 5v14M5 12h14"/>282 </svg>283 </div>284 </div>285 <div class="price">₹ 1,999</div>286 <div class="title">Printed Slim Fit Casual Shirt</div>287 </div>288 289 <!-- Middle -->290 <div class="card">291 <div class="thumb">[IMG: Men Checked Slim Fit Casual Shirt]292 <div class="fav-chip" aria-hidden="true">293 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2">294 <path d="M20.8 6.6a5 5 0 0 0-7.1 0L12 8.3l-1.7-1.7a5 5 0 0 0-7.1 7.1L12 22l8.8-8.3a5 5 0 0 0 0-7.1z"/>295 </svg>296 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2" style="position:absolute; right:22px; top:22px;">297 <path d="M12 5v14M5 12h14"/>298 </svg>299 </div>300 </div>301 <div class="price">₹ 3,999</div>302 <div class="title">CELIO Men Checked Slim Fit Casual Shirt</div>303 </div>304 305 <!-- Right -->306 <div class="card">307 <div class="thumb">[IMG: Men Checked Regular Fit Casual Shirt]308 <div class="fav-chip" aria-hidden="true">309 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2">310 <path d="M20.8 6.6a5 5 0 0 0-7.1 0L12 8.3l-1.7-1.7a5 5 0 0 0-7.1 7.1L12 22l8.8-8.3a5 5 0 0 0 0-7.1z"/>311 </svg>312 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2" style="position:absolute; right:22px; top:22px;">313 <path d="M12 5v14M5 12h14"/>314 </svg>315 </div>316 </div>317 <div class="price red">₹ 899 <span class="mrp">₹ 1,799</span></div>318 <div class="title">FORCA Men Checked Regular Fit Casual Shirt</div>319 </div>320 </div>321 </div>322 323 <!-- Bottom sticky checkout area -->324 <div class="bottom-bar">325 <div class="price-summary">326 <div><span class="strike-small">MRP ₹ 3,499</span> <span class="save-text">SAVE ₹ 700 (20%)</span></div>327 <div class="final-price">₹ 2,799</div>328 <div class="tax-note">Inclusive of all taxes</div>329 </div>330 <div class="cta">ADD TO BASKET</div>331 </div>332 333 <div class="home-indicator"></div>334 </div>335</body>336</html>