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 - Mobile</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;13 color: #111;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #ffffff;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 120px;30 background: #000;31 color: #fff;32 display: flex;33 align-items: center;34 padding: 0 36px;35 box-sizing: border-box;36 z-index: 10;37 letter-spacing: 0.5px;38 }39 .status-left {40 font-size: 38px;41 font-weight: 600;42 }43 .status-right {44 margin-left: auto;45 display: flex;46 align-items: center;47 gap: 26px;48 }49 .status-dot {50 width: 18px;51 height: 18px;52 background: #fff;53 border-radius: 50%;54 opacity: 0.9;55 }56 .status-icon {57 width: 38px;58 height: 30px;59 border: 2px solid #fff;60 border-radius: 4px;61 position: relative;62 }63 .status-battery {64 width: 50px;65 height: 28px;66 border: 2px solid #fff;67 border-radius: 6px;68 position: relative;69 }70 .status-battery::after {71 content: '';72 position: absolute;73 right: -8px;74 top: 8px;75 width: 6px;76 height: 12px;77 background: #fff;78 border-radius: 2px;79 }80 .status-battery .level {81 position: absolute;82 left: 3px;83 top: 3px;84 bottom: 3px;85 right: 8px;86 background: #fff;87 border-radius: 3px;88 }89 90 /* Hero image area */91 .hero {92 position: absolute;93 top: 120px;94 left: 0;95 width: 1080px;96 height: 1080px;97 overflow: hidden;98 background: #f2f2f2;99 }100 .hero .img {101 position: absolute;102 inset: 0;103 background: #E0E0E0;104 border: 1px solid #BDBDBD;105 display: flex;106 align-items: center;107 justify-content: center;108 color: #757575;109 font-size: 36px;110 text-align: center;111 padding: 0 40px;112 box-sizing: border-box;113 }114 115 /* Floating controls on hero */116 .circle-btn {117 position: absolute;118 width: 120px;119 height: 120px;120 border-radius: 60px;121 background: #fff;122 border: 1px solid rgba(0,0,0,0.08);123 display: flex;124 align-items: center;125 justify-content: center;126 box-shadow: 0 4px 16px rgba(0,0,0,0.12);127 }128 .circle-btn svg {129 width: 48px;130 height: 48px;131 }132 .back-btn {133 top: 36px;134 left: 24px;135 }136 .fav-btn {137 top: 36px;138 right: 176px;139 }140 .bag-btn {141 top: 36px;142 right: 24px;143 }144 .tryon-btn {145 right: 24px;146 bottom: 36px;147 }148 149 /* Pager dots */150 .pager {151 position: absolute;152 bottom: 40px;153 left: 0;154 width: 100%;155 display: flex;156 justify-content: center;157 gap: 16px;158 }159 .pager .dot {160 width: 16px;161 height: 16px;162 background: rgba(255,255,255,0.8);163 border-radius: 50%;164 }165 .pager .dot.active {166 width: 40px;167 border-radius: 10px;168 }169 170 /* Content area */171 .content {172 position: absolute;173 top: 1200px;174 left: 0;175 right: 0;176 padding: 40px 56px 0 56px;177 box-sizing: border-box;178 }179 .advisor {180 text-align: center;181 font-size: 34px;182 color: #333;183 margin-bottom: 24px;184 }185 .advisor .link {186 font-weight: 700;187 text-decoration: underline;188 text-underline-offset: 6px;189 }190 191 .title-row {192 position: relative;193 }194 .brand {195 font-size: 72px;196 font-weight: 800;197 letter-spacing: 1px;198 margin: 10px 0 14px 0;199 }200 .subtitle {201 font-size: 34px;202 color: #555;203 margin-bottom: 32px;204 }205 .share-btn {206 position: absolute;207 right: 0;208 top: 10px;209 width: 96px;210 height: 96px;211 border-radius: 48px;212 border: 1px solid #e5e5e5;213 display: flex;214 align-items: center;215 justify-content: center;216 }217 .price {218 font-size: 48px;219 font-weight: 800;220 margin: 16px 0 8px 0;221 }222 .tax {223 color: #8a8a8a;224 font-size: 32px;225 margin-bottom: 26px;226 }227 .return-pill {228 display: inline-block;229 padding: 18px 22px;230 background: #EDEDED;231 border: 1px solid #D0D0D0;232 border-radius: 10px;233 color: #444;234 font-size: 28px;235 margin-bottom: 36px;236 }237 .divider {238 height: 14px;239 background: #f0f0f0;240 margin: 36px -56px 24px -56px;241 }242 243 .size-row {244 display: flex;245 align-items: flex-end;246 justify-content: space-between;247 margin-bottom: 36px;248 }249 .size-row .label {250 font-size: 40px;251 font-weight: 700;252 }253 .size-row .chart {254 font-size: 34px;255 font-weight: 700;256 text-decoration: underline;257 text-underline-offset: 6px;258 }259 260 /* Bottom actions */261 .actions {262 display: flex;263 align-items: center;264 gap: 28px;265 margin-top: 28px;266 padding-bottom: 28px;267 }268 .actions .wish {269 width: 140px;270 height: 140px;271 border-radius: 70px;272 border: 1px solid #E6E6E6;273 display: flex;274 align-items: center;275 justify-content: center;276 background: #fff;277 box-shadow: 0 6px 18px rgba(0,0,0,0.08);278 }279 .add-btn {280 flex: 1;281 height: 150px;282 background: #000;283 color: #fff;284 border-radius: 12px;285 font-size: 42px;286 letter-spacing: 1px;287 font-weight: 800;288 display: flex;289 align-items: center;290 justify-content: center;291 box-shadow: 0 10px 24px rgba(0,0,0,0.2);292 }293 294 /* Home indicator (device) */295 .home-indicator {296 position: absolute;297 left: 0;298 right: 0;299 bottom: 0;300 height: 110px;301 background: #000;302 display: flex;303 align-items: center;304 justify-content: center;305 }306 .home-indicator .pill {307 width: 280px;308 height: 12px;309 background: #fff;310 border-radius: 8px;311 opacity: 0.95;312 }313</style>314</head>315<body>316<div id="render-target">317 318 <!-- Status Bar -->319 <div class="status-bar">320 <div class="status-left">8:32</div>321 <div class="status-right">322 <div class="status-dot"></div>323 <div class="status-dot"></div>324 <div class="status-dot"></div>325 <div style="width: 26px; height: 26px; border: 3px solid #fff; border-radius: 50%;"></div>326 <div class="status-icon" style="border-color:#fff;">327 <div style="position:absolute; left:6px; top:5px; right:6px; bottom:5px; border-top:6px solid #fff; border-left:6px solid #fff; transform: skewX(-20deg); opacity:0.95;"></div>328 </div>329 <div class="status-battery"><div class="level"></div></div>330 </div>331 </div>332 333 <!-- Product Hero -->334 <div class="hero">335 <div class="img">[IMG: Men's striped shirt product image]</div>336 337 <!-- Back -->338 <div class="circle-btn back-btn" aria-label="Back">339 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">340 <path d="M15 18l-6-6 6-6"></path>341 </svg>342 </div>343 344 <!-- Favorite -->345 <div class="circle-btn fav-btn" aria-label="Favorite">346 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">347 <path d="M12 21s-6-4.35-8.4-6.75A5.5 5.5 0 0112 5.6a5.5 5.5 0 018.4 8.65C18 16.65 12 21 12 21z"></path>348 </svg>349 </div>350 351 <!-- Bag -->352 <div class="circle-btn bag-btn" aria-label="Bag">353 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">354 <path d="M6 7h12l1 12H5L6 7z"></path>355 <path d="M9 7a3 3 0 016 0"></path>356 </svg>357 </div>358 359 <!-- Try-on / view icon -->360 <div class="circle-btn tryon-btn" aria-label="View">361 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">362 <path d="M12 3l7 5-7 5-7-5 7-5z"></path>363 <path d="M5 13l7 5 7-5"></path>364 </svg>365 </div>366 367 <!-- Pager -->368 <div class="pager">369 <div class="dot active"></div>370 <div class="dot"></div>371 <div class="dot"></div>372 <div class="dot"></div>373 </div>374 </div>375 376 <!-- Content -->377 <div class="content">378 <div class="advisor">Find your perfect match! <span class="link">Ask your Expert Advisor</span></div>379 380 <div class="title-row">381 <div class="brand">LOUIS PHILIPPE</div>382 <div class="share-btn" aria-label="Share">383 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">384 <circle cx="6" cy="12" r="2"></circle>385 <circle cx="18" cy="6" r="2"></circle>386 <circle cx="18" cy="18" r="2"></circle>387 <path d="M8 12l8-6M8 12l8 6"></path>388 </svg>389 </div>390 </div>391 392 <div class="subtitle">Stripes Cotton Slim Fit Men's Work Wear Shirt</div>393 394 <div class="price">MRP ₹2,599</div>395 <div class="tax">Includes all taxes</div>396 <div class="return-pill">14 days easy return and exchange applicable for this item</div>397 398 <div class="divider"></div>399 400 <div class="size-row">401 <div class="label">Size</div>402 <div class="chart">Size Chart</div>403 </div>404 405 <div class="actions">406 <div class="wish" aria-label="Add to wishlist">407 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.2">408 <path d="M12 21s-6-4.35-8.4-6.75A5.5 5.5 0 0112 5.6a5.5 5.5 0 018.4 8.65C18 16.65 12 21 12 21z"></path>409 </svg>410 </div>411 <div class="add-btn">ADD TO BAG</div>412 </div>413 </div>414 415 <!-- Bottom device indicator -->416 <div class="home-indicator">417 <div class="pill"></div>418 </div>419</div>420</body>421</html>