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 UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top status and search */18 .status-bar {19 height: 64px;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #333;25 font-size: 28px;26 }27 .status-icons { display: flex; gap: 22px; align-items: center; }28 .dot { width: 10px; height: 10px; background: #777; border-radius: 50%; display: inline-block; }29 .battery {30 width: 28px; height: 16px; border: 2px solid #555; position: relative; border-radius: 3px;31 }32 .battery::after {33 content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 8px; background: #555; border-radius: 1px;34 }35 .battery .lvl { position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px; background: #5e5e5e; border-radius: 2px; }36 37 .search-bar-wrap {38 height: 120px;39 padding: 0 24px;40 display: flex;41 align-items: center;42 gap: 18px;43 }44 .icon-btn {45 width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center;46 }47 .search-bar {48 flex: 1;49 height: 88px;50 background: #F1F3F5;51 border: 1px solid #DADCE0;52 border-radius: 18px;53 display: flex;54 align-items: center;55 padding: 0 24px;56 color: #777;57 font-size: 34px;58 justify-content: space-between;59 }60 .cart-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }61 62 /* Content */63 .content {64 padding: 16px 36px 140px 36px;65 }66 .img-placeholder {67 width: 140px; height: 140px; border-radius: 70px;68 background: #E0E0E0; border: 1px solid #BDBDBD;69 display: flex; align-items: center; justify-content: center;70 color: #757575; font-size: 26px; text-align: center;71 margin-top: 12px;72 }73 .slider-dots { display: flex; gap: 14px; justify-content: center; margin: 24px 0 12px; }74 .slider-dots span {75 width: 22px; height: 22px; border-radius: 11px;76 background: #C9C9C9;77 opacity: 0.5;78 }79 .slider-dots span.active { opacity: 1; background: #8f8f8f; }80 81 .link { color: #2E6CF6; font-weight: 700; font-size: 40px; margin-top: 16px; }82 .title { font-size: 38px; line-height: 50px; color: #111; margin-top: 10px; }83 .rating-row {84 display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 32px; color: #2e2e2e;85 }86 .stars { display: flex; gap: 6px; }87 .assured {88 margin-left: auto;89 width: 180px; height: 60px;90 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;91 display: flex; align-items: center; justify-content: center; font-size: 22px; border-radius: 12px;92 }93 94 .deal-tag {95 display: inline-block; margin-top: 34px; background: #6B3CE7; color: #fff;96 padding: 12px 18px; border-radius: 12px; font-size: 30px; font-weight: 700;97 }98 .price-row {99 margin-top: 22px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;100 }101 .off { color: #21A334; font-size: 62px; font-weight: 800; }102 .mrp { color: #9A9A9A; font-size: 40px; text-decoration: line-through; }103 .price { color: #000; font-size: 64px; font-weight: 800; }104 .emi { margin-top: 8px; font-size: 32px; color: #333; }105 .emi .plans { color: #2E6CF6; font-weight: 700; }106 107 .divider { height: 16px; background: #F3F3F7; margin: 28px -36px; }108 109 .size-header { display: flex; align-items: center; justify-content: space-between; }110 .size-header .label { font-size: 40px; color: #333; font-weight: 700; }111 .size-chart { color: #2E6CF6; font-size: 32px; display: flex; align-items: center; gap: 10px; }112 .size-list { display: flex; gap: 26px; margin-top: 24px; flex-wrap: wrap; }113 .size-chip {114 width: 140px; height: 140px; border: 3px solid #1E1E1E; border-radius: 70px;115 display: flex; align-items: center; justify-content: center; font-size: 40px; color: #1E1E1E; font-weight: 700;116 background: #fff;117 }118 .size-chip.disabled { color: #BDBDBD; border-color: #D0D0D0; background: #F3F3F3; }119 120 .info-card {121 margin-top: 28px;122 background: #F7F1E8;123 border: 1px solid #E6D9C6;124 border-radius: 18px;125 padding: 22px 24px;126 font-size: 32px;127 color: #555;128 display: flex; gap: 16px; align-items: center;129 }130 .cube { width: 44px; height: 44px; border: 2px solid #B9B5AB; }131 .info-card .link { font-size: 32px; font-weight: 700; }132 133 .delivery-row {134 display: flex; align-items: center; justify-content: space-between;135 margin-top: 34px; font-size: 36px; color: #333;136 }137 .change-btn { color: #2E6CF6; font-weight: 700; font-size: 34px; padding: 16px 24px; border: 1px solid #DADCE0; border-radius: 12px; }138 139 .shipping {140 margin-top: 26px; font-size: 34px; color: #333;141 }142 .shipping .green { color: #12B312; font-weight: 800; }143 .shipping .strike { text-decoration: line-through; color: #9A9A9A; }144 .shipping .muted { color: #777; }145 .shipping .countdown { color: #D52020; font-weight: 700; }146 147 .floating-badge {148 position: absolute; right: 36px; top: 1550px;149 width: 120px; height: 120px; border-radius: 60px;150 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;151 display: flex; align-items: center; justify-content: center; font-size: 22px;152 box-shadow: 0 6px 16px rgba(0,0,0,0.2);153 }154 155 /* Bottom actions */156 .bottom-bar {157 position: absolute; left: 0; right: 0; bottom: 0;158 padding: 16px 24px 40px 24px;159 background: #ffffff;160 box-shadow: 0 -8px 20px rgba(0,0,0,0.08);161 }162 .actions { display: grid; grid-template-columns: 1fr 1.6fr 1.6fr; gap: 20px; }163 .btn {164 height: 120px; border-radius: 20px; font-size: 36px; font-weight: 700;165 display: flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid #E0E0E0; color: #2E2E2E; background: #fff;166 }167 .btn.buy { background: #FFC42A; border-color: #FFC42A; color: #111; }168 .home-indicator { height: 8px; width: 200px; background: #111; border-radius: 4px; margin: 26px auto 0; opacity: 0.8; }169 170 /* SVG helpers */171 .svg-24 { width: 40px; height: 40px; }172 .svg-32 { width: 54px; height: 54px; }173 .green-fill path { fill: #15A54A; }174</style>175</head>176<body>177<div id="render-target">178 <!-- Status bar -->179 <div class="status-bar">180 <div>11:29</div>181 <div class="status-icons">182 <span class="dot"></span>183 <span class="dot"></span>184 <span class="dot"></span>185 <span class="dot"></span>186 <svg class="svg-24" viewBox="0 0 24 24">187 <path d="M3 18h18v-2H3v2zm2-5h14v-2H5v2zm4-5h6V6H9v2z" fill="#666"/>188 </svg>189 <div class="battery"><div class="lvl"></div></div>190 </div>191 </div>192 193 <!-- Search bar -->194 <div class="search-bar-wrap">195 <div class="icon-btn">196 <svg class="svg-32" viewBox="0 0 24 24">197 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>198 </svg>199 </div>200 <div class="search-bar">201 <span>Search for products</span>202 <svg class="svg-32" viewBox="0 0 24 24">203 <path d="M12 3c3.866 0 7 3.134 7 7 0 3.06-1.949 5.658-4.666 6.61L15 22l-3-2-3 2 1.666-5.39C7.95 15.658 6 13.06 6 10c0-3.866 3.134-7 6-7z" fill="#777"/>204 </svg>205 </div>206 <div class="cart-icon">207 <svg class="svg-32" viewBox="0 0 24 24">208 <path d="M7 7h13l-2 8H8L7 7zm0 0L5 3H2" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>209 </svg>210 </div>211 </div>212 213 <div class="content">214 <div class="img-placeholder">[IMG: New Arrival Badge]</div>215 216 <div class="slider-dots">217 <span class="active"></span>218 <span></span><span></span><span></span><span></span>219 </div>220 221 <div class="link">View more from NIKE</div>222 <div class="title"><strong>NIKE</strong> Revolution 5 Running Shoes For Women (Multicolor)</div>223 224 <div class="rating-row">225 <div class="stars">226 <svg class="svg-24 green-fill" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03L21 9.24l-7.19-.62L12 2 10.19 8.62 3 9.24l4.46 4.73L5.82 21z"/></svg>227 <svg class="svg-24 green-fill" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03L21 9.24l-7.19-.62L12 2 10.19 8.62 3 9.24l4.46 4.73L5.82 21z"/></svg>228 <svg class="svg-24 green-fill" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03L21 9.24l-7.19-.62L12 2 10.19 8.62 3 9.24l4.46 4.73L5.82 21z"/></svg>229 <svg class="svg-24 green-fill" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03L21 9.24l-7.19-.62L12 2 10.19 8.62 3 9.24l4.46 4.73L5.82 21z"/></svg>230 <svg class="svg-24 green-fill" viewBox="0 0 24 24"><path d="M12 17.27l6.18 3.73-1.64-7.03L21 9.24l-7.19-.62L12 2 10.19 8.62 3 9.24l4.46 4.73L5.82 21z"/></svg>231 </div>232 <span style="color:#2E6CF6;font-weight:700;">Very Good</span>233 <span>• 49 ratings</span>234 <div class="assured">[IMG: Plus Assured]</div>235 </div>236 237 <div class="deal-tag">Big Saving Deal</div>238 239 <div class="price-row">240 <div class="off">30% off</div>241 <div class="mrp">₹3,695</div>242 <div class="price">₹2,586</div>243 </div>244 <div class="emi">EMI from ₹127/month. <span class="plans">View Plans</span></div>245 246 <div class="divider"></div>247 248 <div class="size-header">249 <div class="label">Size- UK/India</div>250 <div class="size-chart">251 <svg class="svg-24" viewBox="0 0 24 24">252 <path d="M4 18h16v-2H4v2zm0-5h16v-2H4v2zm0-5h16V6H4v2z" fill="#2E6CF6"/>253 </svg>254 Size Chart255 </div>256 </div>257 <div class="size-list">258 <div class="size-chip">2.5</div>259 <div class="size-chip">3.5</div>260 <div class="size-chip">4.5</div>261 <div class="size-chip">5.5</div>262 <div class="size-chip">6.5</div>263 <div class="size-chip disabled">7.5</div>264 </div>265 266 <div class="info-card">267 <div class="cube"></div>268 <div>Don't worry, we have a <strong>10-day</strong> return policy on this item. <span class="link">See Details</span></div>269 </div>270 271 <div class="divider"></div>272 273 <div class="delivery-row">274 <div>Deliver to: <strong>New Delhi - 110054</strong></div>275 <div class="change-btn">Change</div>276 </div>277 278 <div class="shipping">279 <div>280 <svg class="svg-24" viewBox="0 0 24 24" style="vertical-align: middle;">281 <path d="M3 7h12v8H3V7zm12 3h4l2 3v2h-6v-5zM6 19a2 2 0 110-4 2 2 0 010 4zm10 0a2 2 0 110-4 2 2 0 010 4z" fill="#8C8C8C"/>282 </svg>283 <span class="green">FREE Delivery</span> <span class="strike">₹40</span> | Delivery by <strong>1 Nov, Wednesday</strong>284 </div>285 <div class="muted" style="margin-top:8px;">If ordered within <span class="countdown">28m 17s</span></div>286 </div>287 </div>288 289 <div class="floating-badge">[IMG: Flipkart Badge]</div>290 291 <!-- Bottom action bar -->292 <div class="bottom-bar">293 <div class="actions">294 <div class="btn">295 <svg class="svg-32" viewBox="0 0 24 24">296 <path d="M7 7h13l-2 8H8L7 7zm-2-4H2" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>297 <path d="M19 4h3" stroke="#333" stroke-width="2.2" stroke-linecap="round"/>298 <path d="M5 2v6" stroke="#333" stroke-width="2.2" stroke-linecap="round"/>299 </svg>300 <span>Add</span>301 </div>302 <div class="btn">Pay with EMI</div>303 <div class="btn buy">Buy now</div>304 </div>305 <div class="home-indicator"></div>306 </div>307</div>308</body>309</html>