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 Detail - Bright Grey Boots</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 /* Render target as the mobile screen */10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: #ffffff;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17 color: #222;18 }19 20 .hero {21 width: 100%;22 height: 420px;23 background: #E0E0E0;24 border-bottom: 1px solid #ddd;25 display: flex;26 align-items: flex-end;27 justify-content: center;28 color: #666;29 letter-spacing: .3px;30 font-size: 30px;31 }32 .hero-inner {33 width: 100%;34 height: 100%;35 border: 1px solid #BDBDBD;36 box-sizing: border-box;37 display: flex;38 align-items: flex-end;39 justify-content: center;40 }41 42 .content {43 padding: 48px 56px 24px 56px;44 box-sizing: border-box;45 }46 47 h1 {48 margin: 8px 0 16px 0;49 font-size: 72px;50 line-height: 1.15;51 font-weight: 800;52 letter-spacing: -0.5px;53 }54 55 .price {56 font-size: 60px;57 font-weight: 700;58 margin: 8px 0;59 }60 .subtle {61 color: #8a8a8a;62 font-size: 34px;63 margin: 8px 0 40px 0;64 }65 66 .section-title {67 font-size: 46px;68 font-weight: 700;69 margin: 28px 0 18px 0;70 }71 .label-caps {72 font-size: 30px;73 letter-spacing: 1.4px;74 color: #666;75 font-weight: 700;76 margin-bottom: 18px;77 }78 79 .thumb-row {80 display: flex;81 gap: 28px;82 margin-bottom: 36px;83 }84 .thumb {85 width: 220px;86 height: 180px;87 background: #F5F5F5;88 border: 1px solid #DFDFDF;89 border-radius: 16px;90 display: flex;91 align-items: center;92 justify-content: center;93 color: #757575;94 font-size: 26px;95 box-sizing: border-box;96 }97 .thumb.selected {98 border: 4px solid #2E7D32;99 background: #ffffff;100 }101 102 .divider {103 height: 1px;104 background: #E5E5E5;105 margin: 8px 0 32px 0;106 }107 108 .size-header {109 display: flex;110 align-items: center;111 justify-content: space-between;112 margin-bottom: 18px;113 }114 .guide {115 color: #2E7D32;116 font-weight: 700;117 font-size: 32px;118 letter-spacing: 1px;119 }120 121 .size-grid {122 display: flex;123 flex-wrap: wrap;124 gap: 28px;125 margin-bottom: 28px;126 }127 .size {128 width: 220px;129 height: 130px;130 border: 2px solid #BDBDBD;131 border-radius: 14px;132 display: flex;133 align-items: center;134 justify-content: center;135 font-size: 44px;136 font-weight: 700;137 color: #333;138 position: relative;139 box-sizing: border-box;140 background: #fff;141 }142 .size.sold {143 color: #d36a6a;144 border-color: #f1b6b6;145 background: linear-gradient(135deg, #ffe9ea 0%, #ffe9ea 45%, #f5c9ce 46%, #ffe9ea 47%, #ffe9ea 100%);146 }147 .size .sold-text {148 position: absolute;149 bottom: 8px;150 left: 0;151 width: 100%;152 text-align: center;153 font-size: 26px;154 color: #8a8a8a;155 font-weight: 600;156 }157 158 .delivery-title {159 font-size: 46px;160 font-weight: 800;161 margin: 8px 0 10px 0;162 }163 .delivery-sub {164 font-size: 34px;165 color: #606060;166 margin-bottom: 22px;167 }168 169 .pincode-row {170 display: flex;171 align-items: stretch;172 gap: 0;173 border-radius: 16px;174 overflow: hidden;175 border: 1px solid #E2E2E2;176 background: #F3F3F3;177 height: 110px;178 margin-bottom: 40px;179 }180 .pincode-row input {181 flex: 1;182 border: none;183 background: transparent;184 padding: 0 28px;185 font-size: 36px;186 outline: none;187 color: #222;188 }189 .pincode-row .check {190 width: 200px;191 background: #F3F3F3;192 border-left: 1px solid #E2E2E2;193 display: flex;194 align-items: center;195 justify-content: center;196 color: #2E7D32;197 font-weight: 800;198 font-size: 34px;199 }200 201 .action-row {202 display: grid;203 grid-template-columns: 220px 1fr 120px;204 gap: 24px;205 align-items: center;206 }207 .qty {208 height: 120px;209 background: #F3F3F3;210 border: 1px solid #E0E0E0;211 border-radius: 12px;212 display: flex;213 align-items: center;214 justify-content: center;215 gap: 12px;216 font-size: 34px;217 color: #333;218 font-weight: 700;219 }220 .qty .arrow {221 width: 0; height: 0;222 border-left: 10px solid transparent;223 border-right: 10px solid transparent;224 border-top: 14px solid #666;225 margin-left: 6px;226 }227 228 .add-btn {229 height: 120px;230 background: #2E7D32;231 border-radius: 12px;232 color: #fff;233 display: flex;234 align-items: center;235 justify-content: center;236 gap: 22px;237 font-size: 40px;238 font-weight: 800;239 letter-spacing: .3px;240 }241 .add-btn svg { width: 46px; height: 46px; fill: #fff; }242 243 .wish {244 height: 120px;245 background: #ffffff;246 border: 1px solid #E0E0E0;247 border-radius: 12px;248 display: flex;249 align-items: center;250 justify-content: center;251 }252 .wish svg { width: 40px; height: 40px; fill: #444; }253 254 /* Helper to keep everything in view */255 .spacer-bottom { height: 28px; }256</style>257</head>258<body>259<div id="render-target">260 <div class="hero">261 <div class="hero-inner">262 <div style="margin-bottom: 14px; color:#777; font-size:32px;">[IMG: Boot Close-up Banner]</div>263 </div>264 </div>265 266 <div class="content">267 <h1>Bright Grey Boots For Women</h1>268 269 <div class="price">₹5 995</div>270 <div class="subtle">Prices include taxes</div>271 272 <div class="section-title">Color</div>273 <div class="label-caps">BRIGHT GREY</div>274 275 <div class="thumb-row">276 <div class="thumb selected">[IMG: Grey Boot]</div>277 <div class="thumb">[IMG: Beige Boot]</div>278 <div class="thumb">[IMG: Tan Boot]</div>279 <div class="thumb">[IMG: Mint Boot]</div>280 </div>281 282 <div class="divider"></div>283 284 <div class="size-header">285 <div class="section-title" style="margin:0;">Size</div>286 <div class="guide">SIZE GUIDE</div>287 </div>288 289 <div class="size-grid">290 <div class="size sold">291 35292 <div class="sold-text">Sold out</div>293 </div>294 <div class="size">36</div>295 <div class="size">37</div>296 <div class="size">38</div>297 <div class="size">39</div>298 <div class="size">40</div>299 <div class="size">41</div>300 </div>301 302 <div class="divider"></div>303 304 <div class="delivery-title">Free Delivery</div>305 <div class="delivery-sub">For orders above ₹1000. Delivery in 3–7 working days.</div>306 307 <div class="pincode-row">308 <input type="text" placeholder="Enter Pincode">309 <div class="check">Check</div>310 </div>311 312 <div class="action-row">313 <div class="qty">314 Qty 1 <span class="arrow"></span>315 </div>316 317 <div class="add-btn">318 <svg viewBox="0 0 24 24" aria-hidden="true">319 <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 320 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.2 14l.8-2h8.7c.75 0 1.41-.41 321 1.75-1.03l3.45-6.24A1 1 0 0 0 21 3H6.21L5.27 1H1v2h3l3.6 7.59L6.25 14c-.45.78-.18 322 1.8.6 2.25.25.15.53.23.82.23H19v-2H7.42c-.14 0-.25-.11-.25-.25z"/>323 </svg>324 ADD TO CART325 </div>326 327 <div class="wish" title="Add to wishlist">328 <svg viewBox="0 0 24 24" aria-hidden="true">329 <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41 1.01 330 4.22 2.53C11.09 5.01 12.76 4 14.5 4 17 4 19 6 19 8.5c0 3.78-3.4 6.86-8.55 331 11.54L12 21.35z"/>332 </svg>333 </div>334 </div>335 <div class="spacer-bottom"></div>336 </div>337</div>338</body>339</html>