GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Product Detail Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 color: #222;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #ffffff;21 }22 23 /* Header / status */24 .header {25 height: 300px;26 background: linear-gradient(90deg, #79d7cf, #b7ebe6);27 position: relative;28 box-sizing: border-box;29 padding-top: 24px;30 }31 .status-bar {32 height: 40px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 padding: 0 32px;37 color: #0f1111;38 font-weight: 600;39 font-size: 32px;40 opacity: 0.9;41 }42 .status-right {43 display: flex;44 align-items: center;45 gap: 24px;46 }47 .status-icon {48 width: 30px; height: 30px;49 }50 51 .search-row {52 position: absolute;53 left: 24px;54 right: 24px;55 top: 96px;56 display: flex;57 align-items: center;58 gap: 24px;59 }60 .icon-btn {61 width: 72px;62 height: 72px;63 border-radius: 36px;64 display: flex;65 align-items: center;66 justify-content: center;67 background: transparent;68 }69 .icon {70 width: 44px;71 height: 44px;72 fill: #0f1111;73 }74 .search-pill {75 flex: 1;76 height: 96px;77 background: #ffffff;78 border-radius: 24px;79 box-shadow: 0 8px 16px rgba(0,0,0,0.12);80 display: flex;81 align-items: center;82 padding: 0 28px;83 gap: 20px;84 }85 .search-text {86 flex: 1;87 font-size: 40px;88 color: #333;89 }90 .scan-btn {91 width: 64px; height: 64px;92 border-radius: 16px;93 background: #f7f7f7;94 display: flex; align-items: center; justify-content: center;95 }96 97 /* Product image area */98 .image-area {99 width: 100%;100 height: 620px;101 background: #ffffff;102 display: flex;103 align-items: center;104 justify-content: center;105 padding: 0 24px;106 box-sizing: border-box;107 }108 .img-placeholder {109 width: 100%;110 height: 100%;111 background: #E0E0E0;112 border: 1px solid #BDBDBD;113 border-radius: 8px;114 display: flex; align-items: center; justify-content: center;115 color: #757575;116 font-size: 40px;117 }118 .carousel {119 height: 120px;120 display: flex;121 align-items: center;122 justify-content: center;123 flex-direction: column;124 color: #555;125 }126 .dots {127 display: flex;128 gap: 18px;129 margin-bottom: 16px;130 }131 .dot, .dot-active {132 width: 20px; height: 20px; border-radius: 10px; border: 3px solid #c9c9c9;133 }134 .dot-active { background: #666; border-color: #666; }135 .viewed {136 font-size: 34px; color: #666;137 }138 .divider {139 height: 16px; background: #f1f1f1; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;140 }141 142 /* Content */143 .content {144 padding: 40px 40px 220px 40px;145 box-sizing: border-box;146 }147 .line {148 font-size: 44px;149 margin-bottom: 20px;150 }151 .line b { font-weight: 700; }152 .size-title {153 font-size: 44px;154 margin-top: 24px;155 margin-bottom: 24px;156 }157 .size-grid {158 display: grid;159 grid-template-columns: repeat(4, 1fr);160 gap: 28px;161 margin-bottom: 40px;162 }163 .size-card {164 border: 2px solid #cfcfcf;165 border-radius: 18px;166 padding: 22px;167 box-sizing: border-box;168 height: 200px;169 display: flex;170 flex-direction: column;171 align-items: center;172 justify-content: center;173 gap: 8px;174 text-align: center;175 }176 .size-card.selected { border-color: #111; box-shadow: inset 0 0 0 2px #111; }177 .size-label { font-size: 46px; font-weight: 700; }178 .price { font-size: 36px; }179 .strike { font-size: 32px; color: #9a9a9a; text-decoration: line-through; }180 181 .price-row {182 display: flex; align-items: baseline; gap: 24px; margin: 24px 0 12px 0;183 }184 .discount { font-size: 104px; color: #e0203b; font-weight: 700; }185 .final-price { font-size: 96px; font-weight: 700; }186 .mrp { font-size: 36px; color: #888; margin-bottom: 16px; }187 .tax { font-size: 38px; color: #333; margin-bottom: 24px; }188 .hr {189 height: 2px; background: #e5e5e5; margin: 24px -40px; 190 }191 192 .offers {193 display: flex; align-items: center; justify-content: space-between;194 padding: 24px 0;195 }196 .offers-title { font-size: 44px; font-weight: 700; }197 .offers-sub { font-size: 36px; color: #666; margin-top: 6px; }198 .chev {199 width: 40px; height: 40px; fill: none; stroke: #333; stroke-width: 6;200 }201 202 .delivery { margin-top: 18px; font-size: 38px; }203 .link { color: #0aa3a6; }204 .strong { font-weight: 700; }205 .pin-row { display: flex; align-items: center; gap: 18px; font-size: 40px; color: #0aa3a6; margin: 22px 0 20px; }206 .pin-icon { width: 40px; height: 40px; fill: #666; }207 .stock { font-size: 48px; color: #1a9e34; font-weight: 700; margin: 24px 0; }208 209 /* Qty pill */210 .qty-pill {211 position: absolute;212 left: 24px;213 bottom: 340px;214 width: 220px;215 height: 90px;216 border-radius: 18px;217 background: #f3f3f3;218 border: 2px solid #d5d5d5;219 box-shadow: 0 4px 10px rgba(0,0,0,0.08);220 display: flex; align-items: center; justify-content: space-between;221 padding: 0 22px; box-sizing: border-box;222 font-size: 40px; color: #333;223 }224 .caret {225 width: 28px; height: 28px; border: solid #333; border-width: 0 6px 6px 0; transform: rotate(45deg); margin-left: 8px;226 }227 228 /* Bottom nav */229 .bottom-nav {230 position: absolute;231 left: 0; right: 0; bottom: 0;232 height: 180px; background: #ffffff; border-top: 1px solid #e5e5e5;233 display: flex; align-items: center; justify-content: space-around;234 padding-bottom: 12px;235 }236 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #444; }237 .nav-item .label { font-size: 32px; }238 .nav-item.active { color: #0aa3a6; }239 .nav-icon { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 6; }240 .cart-wrap { position: relative; }241 .badge {242 position: absolute; right: -12px; top: -6px; background: #0aa3a6; color: #fff;243 font-size: 26px; padding: 4px 10px; border-radius: 16px;244 }245 246 /* Gesture bar */247 .gesture {248 position: absolute; left: 50%; transform: translateX(-50%);249 bottom: 190px; width: 240px; height: 12px; background: #bdbdbd; border-radius: 6px;250 }251</style>252</head>253<body>254<div id="render-target">255 256 <div class="header">257 <div class="status-bar">258 <div>11:24</div>259 <div class="status-right">260 <!-- Simple placeholders for status icons -->261 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="7" cy="12" r="6" fill="#333"/></svg>262 <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" fill="#333"/></svg>263 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 18h18M3 14h14M3 10h10" stroke="#333" stroke-width="3"/></svg>264 </div>265 </div>266 267 <div class="search-row">268 <div class="icon-btn">269 <svg class="icon" viewBox="0 0 24 24">270 <path d="M15 4L7 12l8 8" stroke="#0f1111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>271 </svg>272 </div>273 <div class="search-pill">274 <svg class="icon" viewBox="0 0 24 24">275 <circle cx="11" cy="11" r="7" stroke="#0f1111" stroke-width="2" fill="none"/>276 <path d="M20 20l-4-4" stroke="#0f1111" stroke-width="2" fill="none" stroke-linecap="round"/>277 </svg>278 <div class="search-text">formal suit for women</div>279 <div class="scan-btn">280 <svg class="icon" viewBox="0 0 24 24">281 <rect x="5" y="7" width="14" height="10" stroke="#0f1111" stroke-width="2" fill="none"/>282 <path d="M2 6h4M18 6h4M2 18h4M18 18h4" stroke="#0f1111" stroke-width="2" fill="none" stroke-linecap="round"/>283 </svg>284 </div>285 </div>286 </div>287 </div>288 289 <div class="image-area">290 <div class="img-placeholder">[IMG: Black formal suit product photo]</div>291 </div>292 293 <div class="carousel">294 <div class="dots">295 <div class="dot-active"></div>296 <div class="dot"></div>297 <div class="dot"></div>298 <div class="dot"></div>299 <div class="dot"></div>300 </div>301 <div class="viewed">50+ viewed in past month</div>302 </div>303 304 <div class="divider"></div>305 306 <div class="content">307 <div class="line">Colour: <b>Black</b></div>308 309 <div class="size-title">Size: <b>M</b></div>310 <div class="size-grid">311 <div class="size-card selected">312 <div class="size-label">M</div>313 <div class="price">₹899.00</div>314 <div class="strike">₹1,999.00</div>315 </div>316 <div class="size-card">317 <div class="size-label">L</div>318 <div class="price">₹899.00</div>319 <div class="strike">₹1,999.00</div>320 </div>321 <div class="size-card">322 <div class="size-label">XL</div>323 <div class="price">₹899.00</div>324 <div class="strike">₹1,999.00</div>325 </div>326 <div class="size-card">327 <div class="size-label">2XL</div>328 <div class="price">₹899.00</div>329 <div class="strike">₹1,999.00</div>330 </div>331 </div>332 333 <div class="price-row">334 <div class="discount">-55%</div>335 <div class="final-price">₹899</div>336 </div>337 <div class="mrp">M.R.P.: <span style="text-decoration: line-through;">₹1,999</span></div>338 <div class="tax">Inclusive of all taxes</div>339 340 <div class="hr"></div>341 342 <div class="offers">343 <div>344 <div class="offers-title">Save Extra with Offers</div>345 <div class="offers-sub">No Cost EMI Offers, Bank Offers and Partner</div>346 </div>347 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>348 </div>349 350 <div class="hr"></div>351 352 <div class="delivery">353 <span class="link">FREE delivery</span> Sunday, 3 September. <span class="link">Details</span>354 </div>355 <div class="delivery">356 Or fastest delivery <span class="strong">Tomorrow, 2 September.</span> Order within <span class="link">1 hr 20 mins</span>. <span class="link">Details</span>357 </div>358 359 <div class="pin-row">360 <svg class="pin-icon" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>361 <div>Select delivery location</div>362 </div>363 364 <div class="stock">In stock</div>365 </div>366 367 <div class="qty-pill">368 <div>Qty: 1</div>369 <div class="caret"></div>370 </div>371 372 <div class="gesture"></div>373 374 <div class="bottom-nav">375 <div class="nav-item active">376 <svg class="nav-icon" viewBox="0 0 24 24">377 <path d="M3 12l9-8 9 8v8H3zM9 20v-6h6v6" />378 </svg>379 <div class="label">Home</div>380 </div>381 <div class="nav-item">382 <svg class="nav-icon" viewBox="0 0 24 24">383 <circle cx="12" cy="8" r="4" />384 <path d="M4 22c0-4 4-7 8-7s8 3 8 7" />385 </svg>386 <div class="label">You</div>387 </div>388 <div class="nav-item">389 <svg class="nav-icon" viewBox="0 0 24 24">390 <path d="M4 12a8 8 0 0 1 13-6M20 12a8 8 0 0 1-13 6" />391 <path d="M16 3v5h5" />392 </svg>393 <div class="label">More</div>394 </div>395 <div class="nav-item cart-wrap">396 <svg class="nav-icon" viewBox="0 0 24 24">397 <path d="M3 5h3l2 12h10l2-8H7" />398 <circle cx="10" cy="20" r="1.8" />399 <circle cx="17" cy="20" r="1.8" />400 </svg>401 <div class="badge">6</div>402 <div class="label">Cart</div>403 </div>404 <div class="nav-item">405 <svg class="nav-icon" viewBox="0 0 24 24">406 <path d="M3 6h18M3 12h18M3 18h18" />407 </svg>408 <div class="label">Menu</div>409 </div>410 </div>411 412</div>413</body>414</html>