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 Page - Dior Perfume</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f2a36; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top app bar */18 .topbar {19 height: 120px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 border-bottom: 1px solid #ececec;25 }26 .topbar .left,27 .topbar .right {28 display: flex;29 align-items: center;30 gap: 40px;31 }32 .icon-btn {33 width: 68px;34 height: 68px;35 display: inline-flex;36 align-items: center;37 justify-content: center;38 color: #233043;39 }40 .icon-btn svg { width: 44px; height: 44px; stroke: currentColor; }41 42 /* Brand strip */43 .brand-strip {44 height: 60px;45 background: #0c0c0c;46 color: #fff;47 margin: 24px 24px 0;48 display: flex;49 align-items: center;50 justify-content: center;51 letter-spacing: 6px;52 font-weight: 600;53 font-size: 32px;54 }55 56 .ribbon {57 position: absolute;58 right: 120px;59 top: 270px;60 background: #f4a6b8;61 color: #fff;62 padding: 16px 28px;63 border-radius: 8px;64 font-weight: 700;65 letter-spacing: 2px;66 }67 68 .content {69 padding: 0 48px 220px;70 }71 72 /* Image placeholder */73 .img-wrap {74 margin: 40px auto 12px;75 width: 760px;76 height: 620px;77 background: #E0E0E0;78 border: 1px solid #BDBDBD;79 display: flex;80 align-items: center;81 justify-content: center;82 color: #757575;83 border-radius: 8px;84 text-align: center;85 font-size: 30px;86 }87 88 .chips-row {89 display: flex;90 align-items: center;91 justify-content: space-between;92 margin: 18px 0 8px;93 }94 .view-similar {95 border: 2px solid #d8d8d8;96 color: #5a6473;97 padding: 18px 28px;98 border-radius: 40px;99 font-size: 34px;100 background: #fff;101 }102 .dots {103 display: flex; gap: 16px;104 justify-content: center; align-items: center;105 }106 .dot {107 width: 18px; height: 18px; border-radius: 50%;108 background: #c9c9c9;109 }110 .dot.active { background: #ff4b86; }111 .dot.mid { background: #bdbdbd; }112 113 /* Title and actions */114 .title-row {115 display: flex;116 align-items: flex-start;117 justify-content: space-between;118 margin-top: 18px;119 }120 .title {121 font-size: 44px;122 line-height: 58px;123 font-weight: 700;124 color: #2a3443;125 max-width: 860px;126 }127 .share-btn {128 width: 72px; height: 72px; border-radius: 50%;129 display: flex; align-items: center; justify-content: center;130 color: #2a3b49;131 }132 133 /* Ratings */134 .rating {135 display: flex; align-items: center; gap: 18px;136 margin: 18px 0;137 }138 .rating svg { width: 42px; height: 42px; }139 .rating .score { font-size: 34px; color: #4b5563; }140 .rating .count { color: #9aa3ae; }141 142 /* Price */143 .price {144 font-size: 56px; font-weight: 800; margin: 10px 0 6px; color: #1b2431;145 }146 .tax {147 color: #9aa3ae; font-size: 30px;148 }149 .divider { height: 1px; background: #ededed; margin: 30px 0; }150 151 /* Sizes */152 .section-label { color: #6b7280; font-size: 32px; margin-bottom: 18px; }153 .sizes { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }154 .size-chip {155 padding: 22px 38px; border: 2px solid #e2e6ea; border-radius: 44px;156 font-size: 34px; color: #6b7785; background: #fff;157 }158 .size-chip.active {159 border-color: #ff2b7b; color: #ff2b7b; font-weight: 700;160 }161 .low-stock {162 background: #ff7a00; color: #fff; font-weight: 700;163 padding: 10px 24px; border-radius: 14px; font-size: 30px; margin-top: 14px;164 display: inline-block;165 }166 167 .sold-by { margin: 26px 0 16px; color: #6b7280; font-size: 32px; }168 .sold-by b { color: #374151; }169 170 /* Bottom sticky bar */171 .bottom-bar {172 position: absolute;173 left: 0; right: 0; bottom: 0;174 background: #ffffff;175 border-top: 1px solid #ececec;176 padding: 24px 36px 34px;177 }178 .bar-content { display: flex; align-items: center; gap: 24px; }179 .wish {180 width: 140px; height: 120px; border: 2px solid #e9e9e9;181 border-radius: 24px; display: flex; align-items: center; justify-content: center;182 color: #ff2b7b;183 }184 .cta {185 flex: 1;186 height: 120px;187 background: #ff2b7b;188 border-radius: 26px;189 display: flex; align-items: center; justify-content: center;190 gap: 18px; color: #fff; font-size: 40px; font-weight: 800;191 box-shadow: 0 8px 18px rgba(255, 43, 123, 0.35);192 }193 .cta svg { width: 46px; height: 46px; }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Top App Bar -->200 <div class="topbar">201 <div class="left">202 <div class="icon-btn" title="Back">203 <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2">204 <path d="M15 19l-7-7 7-7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>205 </svg>206 </div>207 </div>208 <div class="right">209 <div class="icon-btn" title="Search">210 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">211 <circle cx="11" cy="11" r="7" stroke="currentColor"/>212 <path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-linecap="round"/>213 </svg>214 </div>215 <div class="icon-btn" title="Wishlist">216 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">217 <path d="M12 21s-6-3.6-8.4-6.2c-1.8-2-1.6-5.2.6-6.8 1.9-1.3 4.5-.8 5.8.9L12 10l2-2.1c1.3-1.7 3.9-2.2 5.8-.9 2.2 1.6 2.4 4.8.6 6.8C18 17.4 12 21 12 21z" stroke="currentColor" fill="none"/>218 </svg>219 </div>220 <div class="icon-btn" title="Bag">221 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">222 <path d="M6 8h12l-1 12H7L6 8z" stroke="currentColor"/>223 <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="currentColor"/>224 </svg>225 </div>226 </div>227 </div>228 229 <!-- Brand strip and ribbon -->230 <div class="brand-strip">DIOR</div>231 <div class="ribbon">WOMEN</div>232 233 <div class="content">234 235 <!-- Product image -->236 <div class="img-wrap">[IMG: Pink perfume bottle - Miss Dior]</div>237 238 <!-- View similar & dots -->239 <div class="chips-row">240 <div class="view-similar">View Similar</div>241 <div class="dots">242 <div class="dot active"></div>243 <div class="dot mid"></div>244 <div class="dot mid"></div>245 <div class="dot mid"></div>246 </div>247 </div>248 249 <!-- Title and share -->250 <div class="title-row">251 <div class="title">DIOR Miss Dior Eau De Parfum | 50ml</div>252 <div class="share-btn" title="Share">253 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">254 <circle cx="18" cy="5" r="3" stroke="currentColor"/>255 <circle cx="6" cy="12" r="3" stroke="currentColor"/>256 <circle cx="18" cy="19" r="3" stroke="currentColor"/>257 <path d="M8.8 11l6.4-4" stroke="currentColor"/>258 <path d="M8.8 13l6.4 4" stroke="currentColor"/>259 </svg>260 </div>261 </div>262 263 <!-- Ratings -->264 <div class="rating">265 <!-- 4 filled stars -->266 <svg viewBox="0 0 24 24" fill="#0f2a3d"><path d="M12 2l2.8 6.2 6.7.6-5 4.5 1.5 6.6L12 17l-6 3.9 1.5-6.6-5-4.5 6.7-.6z"/></svg>267 <svg viewBox="0 0 24 24" fill="#0f2a3d"><path d="M12 2l2.8 6.2 6.7.6-5 4.5 1.5 6.6L12 17l-6 3.9 1.5-6.6-5-4.5 6.7-.6z"/></svg>268 <svg viewBox="0 0 24 24" fill="#0f2a3d"><path d="M12 2l2.8 6.2 6.7.6-5 4.5 1.5 6.6L12 17l-6 3.9 1.5-6.6-5-4.5 6.7-.6z"/></svg>269 <svg viewBox="0 0 24 24" fill="#0f2a3d"><path d="M12 2l2.8 6.2 6.7.6-5 4.5 1.5 6.6L12 17l-6 pipeline3.9 1. sop"/></svg>270 </div>271 272 </div>273 274 <!-- Fixing corrupted line above by re-adding rating block cleanly -->275 <div class="content" style="padding-top:0;">276 <div class="rating" style="margin-top:-12px;">277 <svg viewBox="0 0 24 24" fill="#0f2a3d"><path d="M12 2l2.8 6.2 6.7.6-5 4.5 1.5 6.6L12 17l-6 3.9 1.5-6.6-5-4.5 6.7-.6z"/></svg>278 <svg viewBox="0 0 24 24" fill="#0f2a3d"><path d="M12 2l2.8 6.2 6.7.6-5 4.5 1.5 6.6L12 17l-6 3.9 1.5-6.6-5-4.5 6.7-.6z"/></svg>279 <svg viewBox="0 0 24 24" fill="#0f2a3d"><path d="M12 2l2.8 6.2 6.7.6-5 4.5 1.5 6.6L12 17l-6 3.9 1.5-6.6-5-4.5 6.7-.6z"/></svg>280 <svg viewBox="0 0 24 24" fill="#0f2a3d"><path d="M12 2l2.8 6.2 6.7.6-5 4.5 1.5 6.6L12 17l-6 3.9 1.5-6.6-5-4.5 6.7-.6z"/></svg>281 <!-- half/outline star -->282 <svg viewBox="0 0 24 24" fill="none" stroke="#0f2a3d" stroke-width="2">283 <path d="M12 2l2.8 6.2 6.7.6-5 4.5 1.5 6.6L12 17l-6 3.9 1.5-6.6-5-4.5 6.7-.6z"/>284 </svg>285 <div class="score">4.5/5 <span class="count">(45)</span></div>286 </div>287 288 <div class="price">₹10900</div>289 <div class="tax">Inclusive of all taxes</div>290 291 <div class="divider"></div>292 293 <div class="section-label">Selected Size - <b style="color:#2a3443">50ml</b></div>294 <div class="sizes">295 <div class="size-chip">150ml</div>296 <div class="size-chip">100ml</div>297 <div class="size-chip active">50ml</div>298 </div>299 <span class="low-stock">9 left!</span>300 301 <div class="divider" style="margin-top: 28px;"></div>302 303 <div class="sold-by">Sold by : <b>Nykaa E retail private limited</b></div>304 </div>305 306 <!-- Bottom sticky add-to-bag -->307 <div class="bottom-bar">308 <div class="bar-content">309 <div class="wish" title="Add to wishlist">310 <svg viewBox="0 0 24 24" fill="none" stroke="#ff2b7b" stroke-width="2.2">311 <path d="M12 21s-6-3.6-8.4-6.2c-1.8-2-1.6-5.2.6-6.8 1.9-1.3 4.5-.8 5.8.9L12 10l2-2.1c1.3-1.7 3.9-2.2 5.8-.9 2.2 1.6 2.4 4.8.6 6.8C18 17.4 12 21 12 21z"/>312 </svg>313 </div>314 <div class="cta">315 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">316 <path d="M6 8h12l-1 12H7L6 8z"/>317 <path d="M9 8V6a3 3 0 0 1 6 0v2"/>318 </svg>319 <span>Add to Bag</span>320 </div>321 </div>322 </div>323 324</div>325</body>326</html>