GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Product Detail UI - Front-End Render</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Top status and app bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 padding: 20px 28px;24 box-sizing: border-box;25 color: #222;26 display: flex;27 align-items: center;28 justify-content: space-between;29 }30 .status-left {31 display: flex;32 align-items: center;33 gap: 18px;34 }35 .time {36 font-size: 34px;37 font-weight: 600;38 }39 .status-icons {40 display: flex;41 align-items: center;42 gap: 20px;43 color: #555;44 }45 46 .app-bar {47 position: absolute;48 top: 120px;49 left: 0;50 width: 1080px;51 height: 100px;52 display: flex;53 align-items: center;54 justify-content: space-between;55 padding: 0 24px;56 box-sizing: border-box;57 }58 .icon-btn {59 width: 72px;60 height: 72px;61 display: inline-flex;62 align-items: center;63 justify-content: center;64 border-radius: 16px;65 }66 .back-btn {67 margin-left: 10px;68 }69 70 /* Image area */71 .image-area {72 position: absolute;73 top: 220px;74 left: 0;75 width: 1080px;76 height: 1160px;77 display: grid;78 grid-template-columns: 720px 360px;79 column-gap: 0;80 background: #fff;81 }82 .img-box {83 background: #E0E0E0;84 border: 1px solid #BDBDBD;85 color: #757575;86 display: flex;87 align-items: center;88 justify-content: center;89 font-size: 30px;90 text-align: center;91 }92 .left-img {93 height: 1160px;94 }95 .right-img {96 height: 1160px;97 }98 .pager-bar {99 position: absolute;100 bottom: 30px;101 left: 20px;102 width: 230px;103 height: 12px;104 background: #111;105 border-radius: 6px;106 opacity: 0.9;107 }108 109 /* Floating chips */110 .chips {111 position: absolute;112 right: 24px;113 bottom: 160px;114 display: flex;115 gap: 24px;116 }117 .chip {118 background: #ffffff;119 border: 1px solid #DADADA;120 box-shadow: 0 2px 6px rgba(0,0,0,0.08);121 height: 110px;122 width: 150px;123 border-radius: 80px;124 display: flex;125 align-items: center;126 justify-content: center;127 gap: 12px;128 font-size: 28px;129 color: #333;130 }131 132 /* Details section */133 .details {134 position: absolute;135 top: 1400px;136 left: 0;137 width: 1080px;138 padding: 24px 36px;139 box-sizing: border-box;140 }141 .brand {142 font-size: 42px;143 font-weight: 700;144 color: #222;145 margin-bottom: 10px;146 text-transform: uppercase;147 letter-spacing: 0.5px;148 }149 .title {150 font-size: 34px;151 color: #444;152 margin-bottom: 20px;153 }154 .price-row {155 display: flex;156 align-items: baseline;157 gap: 20px;158 margin-top: 16px;159 margin-bottom: 6px;160 }161 .price {162 font-size: 46px;163 font-weight: 800;164 color: #111;165 }166 .mrp {167 font-size: 34px;168 color: #777;169 text-decoration: line-through;170 }171 .off {172 font-size: 36px;173 color: #2e7d32;174 font-weight: 700;175 }176 .tax-note {177 font-size: 26px;178 color: #777;179 margin-top: 8px;180 }181 182 /* Offer card */183 .offer-card {184 margin: 32px 0 16px 0;185 border: 1px solid #E4E4E4;186 border-radius: 16px;187 padding: 26px;188 display: flex;189 justify-content: space-between;190 align-items: stretch;191 gap: 24px;192 }193 .offer-left {194 flex: 2;195 }196 .offer-title {197 font-size: 34px;198 font-weight: 800;199 color: #2e7d32;200 display: flex;201 align-items: center;202 gap: 12px;203 }204 .offer-price {205 font-size: 36px;206 font-weight: 800;207 color: #2e7d32;208 margin-left: 8px;209 }210 .offer-copy {211 font-size: 28px;212 color: #555;213 margin-top: 10px;214 }215 .offer-copy a {216 color: #1976d2;217 text-decoration: none;218 font-weight: 600;219 }220 .offer-right {221 flex: 1.2;222 border-left: 1px solid #EEEEEE;223 padding-left: 26px;224 display: flex;225 flex-direction: column;226 justify-content: center;227 gap: 10px;228 }229 .code-title {230 font-size: 30px;231 color: #555;232 text-align: center;233 }234 .code-box {235 font-size: 34px;236 font-weight: 800;237 color: #333;238 text-align: center;239 letter-spacing: 1px;240 }241 .tnc {242 font-size: 28px;243 color: #1976d2;244 text-align: center;245 font-weight: 700;246 margin-top: 8px;247 }248 .more-offers {249 font-size: 30px;250 color: #1976d2;251 font-weight: 700;252 margin: 20px 10px;253 }254 255 /* Bottom bar */256 .bottom-bar {257 position: absolute;258 bottom: 0;259 left: 0;260 width: 1080px;261 height: 170px;262 background: #ffffff;263 border-top: 1px solid #E6E6E6;264 display: flex;265 align-items: center;266 justify-content: space-between;267 padding: 28px;268 box-sizing: border-box;269 }270 .mini-actions {271 display: flex;272 gap: 24px;273 }274 .mini-btn {275 width: 130px;276 height: 110px;277 border: 1px solid #E4E4E4;278 border-radius: 24px;279 display: flex;280 align-items: center;281 justify-content: center;282 }283 .bag-cta {284 width: 640px;285 height: 120px;286 background: #111111;287 color: #ffffff;288 border-radius: 22px;289 display: flex;290 align-items: center;291 justify-content: center;292 gap: 16px;293 font-size: 36px;294 font-weight: 800;295 }296 297 /* Simple icon styles */298 svg { display: block; }299</style>300</head>301<body>302<div id="render-target">303 304 <!-- Status Bar -->305 <div class="status-bar">306 <div class="status-left">307 <div class="time">1:34</div>308 </div>309 <div class="status-icons">310 <!-- small circle icon -->311 <svg width="24" height="24"><circle cx="12" cy="12" r="10" fill="#888"/></svg>312 <!-- wifi icon -->313 <svg width="28" height="24" viewBox="0 0 24 24">314 <path d="M2 8c5-4 15-4 20 0M5 11c4-3 10-3 14 0M9 14c2-2 4-2 6 0M12 18l2 2-2 2-2-2 2-2z" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>315 </svg>316 <!-- battery icon -->317 <svg width="40" height="24" viewBox="0 0 40 24">318 <rect x="2" y="4" width="32" height="16" rx="3" ry="3" stroke="#444" fill="none" stroke-width="2"/>319 <rect x="5" y="7" width="24" height="10" fill="#444"/>320 <rect x="34" y="8" width="4" height="8" fill="#444"/>321 </svg>322 </div>323 </div>324 325 <!-- App Bar -->326 <div class="app-bar">327 <div class="icon-btn back-btn">328 <svg width="40" height="40" viewBox="0 0 24 24">329 <path d="M15 18l-6-6 6-6" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>330 </svg>331 </div>332 <div style="display:flex; align-items:center; gap:28px;">333 <div class="icon-btn">334 <!-- search -->335 <svg width="40" height="40" viewBox="0 0 24 24">336 <circle cx="11" cy="11" r="7" stroke="#000" stroke-width="2" fill="none"/>337 <path d="M20 20l-4-4" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>338 </svg>339 </div>340 <div class="icon-btn">341 <!-- heart -->342 <svg width="40" height="40" viewBox="0 0 24 24">343 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" stroke="#000" stroke-width="2" fill="none"/>344 </svg>345 </div>346 <div class="icon-btn">347 <!-- bag -->348 <svg width="40" height="40" viewBox="0 0 24 24">349 <path d="M6 8h12l-1 12H7L6 8z" stroke="#000" stroke-width="2" fill="none"/>350 <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#000" stroke-width="2" fill="none"/>351 </svg>352 </div>353 </div>354 </div>355 356 <!-- Images -->357 <div class="image-area">358 <div class="img-box left-img">[IMG: Model wearing men’s black slim-fit shirt]</div>359 <div class="img-box right-img">[IMG: Alternate product view]</div>360 361 <div class="pager-bar"></div>362 363 <!-- Floating chips -->364 <div class="chips">365 <div class="chip">366 <svg width="28" height="28" viewBox="0 0 24 24">367 <path d="M4 4h16v14H4zM8 8h8v2H8zM8 12h6v2H8z" stroke="#333" stroke-width="1.5" fill="none"/>368 </svg>369 <span>SIMILAR</span>370 </div>371 <div class="chip">372 <svg width="28" height="28" viewBox="0 0 24 24">373 <path d="M4 18V6h16v12M8 14h8" stroke="#333" stroke-width="1.5" fill="none" stroke-linecap="round"/>374 </svg>375 <span>SIZE</span>376 </div>377 </div>378 </div>379 380 <!-- Details -->381 <div class="details">382 <div class="brand">VAN HEUSEN</div>383 <div class="title">Men Slim Fit Shirt with Patch Pocket</div>384 385 <div class="price-row">386 <div class="price">₹1,415</div>387 <div class="mrp">MRP ₹2,399</div>388 <div class="off">41% off</div>389 </div>390 <div class="tax-note">Price inclusive of all taxes.</div>391 392 <div class="offer-card">393 <div class="offer-left">394 <div class="offer-title">395 <svg width="32" height="32" viewBox="0 0 24 24">396 <path d="M3 12l4-9 4 9 4-9 4 9" stroke="#2e7d32" stroke-width="2" fill="none" stroke-linecap="round"/>397 </svg>398 Offer Price <span class="offer-price">₹1,195</span>399 </div>400 <div class="offer-copy">Extra Upto 25% Off on 2589 and Above. Max Discount Rs. 900. <a href="#">View All Products></a></div>401 </div>402 <div class="offer-right">403 <div class="code-title">Use Code</div>404 <div class="code-box">EPIC</div>405 <div class="tnc">T&C</div>406 </div>407 </div>408 409 <div class="more-offers">+ 14 more offers</div>410 </div>411 412 <!-- Bottom bar -->413 <div class="bottom-bar">414 <div class="mini-actions">415 <div class="mini-btn">416 <!-- share icon -->417 <svg width="40" height="40" viewBox="0 0 24 24">418 <circle cx="6" cy="12" r="3" stroke="#000" stroke-width="2" fill="none"/>419 <circle cx="18" cy="6" r="3" stroke="#000" stroke-width="2" fill="none"/>420 <circle cx="18" cy="18" r="3" stroke="#000" stroke-width="2" fill="none"/>421 <path d="M9 12l6-4M9 12l6 4" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>422 </svg>423 </div>424 <div class="mini-btn">425 <!-- heart icon -->426 <svg width="40" height="40" viewBox="0 0 24 24">427 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" stroke="#000" stroke-width="2" fill="none"/>428 </svg>429 </div>430 </div>431 <div class="bag-cta">432 <svg width="40" height="40" viewBox="0 0 24 24">433 <path d="M6 8h12l-1 12H7L6 8z" stroke="#fff" stroke-width="2" fill="none"/>434 <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#fff" stroke-width="2" fill="none"/>435 </svg>436 <span>Add To Bag</span>437 </div>438 </div>439 440</div>441</body>442</html>