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.0">6<title>Product Detail UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* General layout */18 .status-bar {19 height: 140px;20 background: #e9e9e9;21 color: #555;22 font-size: 32px;23 display: flex;24 align-items: center;25 padding: 0 40px;26 }27 .content {28 padding: 32px 40px 240px;29 }30 .divider { height: 2px; background: #e6e6e6; margin: 28px 0; }31 32 /* Typography */33 .title { font-size: 44px; font-weight: 700; color: #000; }34 .subtle { color: #666; }35 .muted { color: #8a8a8a; }36 .link { color: #5C52F4; font-weight: 600; }37 38 /* Ratings */39 .ratings {40 display: flex;41 align-items: center;42 gap: 16px;43 font-size: 34px;44 color: #444;45 margin-top: 18px;46 margin-bottom: 6px;47 }48 .stars { display: flex; gap: 6px; }49 .stars svg { width: 40px; height: 40px; }50 .green { color: #2ea44f; }51 .gray-icon svg { fill: #BDBDBD; }52 53 /* Offer header */54 .offer-header {55 display: flex;56 align-items: center;57 gap: 20px;58 font-size: 40px;59 font-weight: 700;60 color: #222;61 padding: 26px 0;62 }63 .ticket {64 width: 56px; height: 56px; background: #e9f5ee; border-radius: 12px; display:flex; align-items:center; justify-content:center;65 border: 2px solid #d1e9d7;66 }67 .ticket svg { width: 36px; height: 36px; fill: #2ea44f; }68 69 /* Card row simple */70 .simple-card {71 border: 2px solid #e6e6e6;72 border-radius: 18px;73 padding: 28px 32px;74 display: flex;75 align-items: center;76 justify-content: space-between;77 font-size: 38px;78 color: #333;79 background: #fff;80 }81 .left-icon {82 width: 64px; height: 64px; border-radius: 12px; background: #f4f4f4; border: 2px solid #e6e6e6; display:flex; align-items:center; justify-content:center; margin-right: 22px;83 }84 .row {85 display:flex; align-items:center;86 }87 88 /* Size section */89 .size-header {90 display:flex; align-items:center; justify-content:space-between; margin-top: 36px;91 }92 .size-title { font-size: 40px; font-weight: 700; color: #222; }93 .size-chart { display:flex; align-items:center; gap: 14px; color:#5C52F4; font-weight:600; font-size: 34px; }94 .size-chart .icon { width: 38px; height: 38px; border:2px solid #5C52F4; border-radius: 6px; }95 96 .chips { display:flex; flex-wrap:wrap; gap: 24px; margin-top: 26px; }97 .chip {98 min-width: 120px; height: 96px;99 border: 2px solid #e4e4e4; border-radius: 18px;100 display:flex; align-items:center; justify-content:center;101 font-size: 40px; color:#333; background:#fff;102 box-shadow: 0 1px 0 #f7f7f7 inset;103 }104 .chip.more { color:#5C52F4; border-color:#e6e6e6; font-weight:600; }105 106 /* Pincode row */107 .pincode { display:flex; align-items:center; justify-content:space-between; font-size: 38px; color:#333; }108 .btn-outline {109 border:2px solid #e6e6e6; border-radius:18px; padding:24px 36px;110 font-size:38px; background:#fff; color:#5C52F4; font-weight:700;111 }112 113 /* Policy list */114 .list { margin-top: 20px; }115 .list-item {116 display:flex; align-items:center; justify-content:space-between;117 padding:28px 0; border-bottom:2px solid #e9e9e9; font-size:38px; color:#333;118 }119 .list-item:last-child { border-bottom: none; }120 .list-left { display:flex; align-items:center; gap:24px; }121 .badge-free { color:#2ea44f; font-weight:700; }122 .chev { color:#bdbdbd; font-size:48px; }123 124 /* Product details */125 .details-title { font-size: 44px; font-weight: 700; margin-top: 36px; }126 .detail-grid {127 display:grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; margin-top: 22px;128 }129 .detail-row { display:flex; justify-content:space-between; align-items:center; padding:18px 0; }130 .label { color:#8a8a8a; font-size:38px; }131 .value { color:#222; font-size:38px; font-weight:600; }132 .all-details { display:flex; align-items:center; justify-content:space-between; font-size:40px; padding:24px 0; }133 134 /* Bottom bar */135 .bottom-bar {136 position:absolute; left:0; right:0; bottom:0; height:180px; background:#ffffff;137 border-top: 2px solid #e6e6e6;138 padding:24px 40px;139 display:flex; gap:24px;140 }141 .btn {142 flex:1; border-radius:20px; font-size:42px; font-weight:700; display:flex; align-items:center; justify-content:center;143 box-shadow: 0 1px 0 rgba(0,0,0,0.04);144 }145 .btn.white {146 background:#fff; color:#5C52F4; border:2px solid #e6e6e6;147 }148 .btn.primary {149 background:#5C52F4; color:#fff; border:2px solid #584ee8;150 }151 /* Small helpers */152 .icon-round { width:56px; height:56px; border-radius:14px; background:#f4f4f8; display:flex; align-items:center; justify-content:center; }153 .muted-note { color:#9e9e9e; font-size:32px; }154</style>155</head>156<body>157<div id="render-target">158 <div class="status-bar">2:16 • ⌕ 🔍 ❌ ⦿ 62%</div>159 160 <div class="content">161 <!-- Ratings -->162 <div class="ratings">163 <div class="stars">164 <!-- simple green stars -->165 <svg viewBox="0 0 24 24" fill="#2ea44f"><path d="M12 17.3l-6.4 3.6 1.9-7-5.5-4.6 7.2-.6L12 2l2.8 6.7 7.2.6-5.5 4.6 1.9 7z"/></svg>166 <svg viewBox="0 0 24 24" fill="#2ea44f"><path d="M12 17.3l-6.4 3.6 1.9-7-5.5-4.6 7.2-.6L12 2l2.8 6.7 7.2.6-5.5 4.6 1.9 7z"/></svg>167 <svg viewBox="0 0 24 24" fill="#2ea44f"><path d="M12 17.3l-6.4 3.6 1.9-7-5.5-4.6 7.2-.6L12 2l2.8 6.7 7.2.6-5.5 4.6 1.9 7z"/></svg>168 <svg viewBox="0 0 24 24" fill="#2ea44f"><path d="M12 17.3l-6.4 3.6 1.9-7-5.5-4.6 7.2-.6L12 2l2.8 6.7 7.2.6-5.5 4.6 1.9 7z"/></svg>169 <svg viewBox="0 0 24 24" fill="#2ea44f"><path d="M12 17.3l-6.4 3.6 1.9-7-5.5-4.6 7.2-.6L12 2l2.8 6.7 7.2.6-5.5 4.6 1.9 7z"/></svg>170 </div>171 <div class="muted">7,814 ratings & 688 reviews</div>172 </div>173 174 <!-- Offers header -->175 <div class="offer-header">176 <div class="ticket">177 <svg viewBox="0 0 24 24"><path d="M3 7c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v3a2 2 0 010 4v3c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-3a2 2 0 010-4V7zm7 2h4v6h-4V9z"/></svg>178 </div>179 Available offers180 </div>181 182 <div class="simple-card">183 <div class="row">184 <div class="left-icon">185 <svg viewBox="0 0 24 24" width="36" height="36" fill="#bdbdbd"><path d="M4 6h16v12H4zM2 9h2v6H2zM20 9h2v6h-2z"/></svg>186 </div>187 <div>View Similar</div>188 </div>189 <div class="chev">›</div>190 </div>191 192 <!-- Size section -->193 <div class="size-header">194 <div class="size-title">Size- UK/India</div>195 <div class="size-chart">196 <div class="icon"></div>197 <div>Size Chart</div>198 </div>199 </div>200 201 <div class="chips">202 <div class="chip">6</div>203 <div class="chip">7</div>204 <div class="chip">8</div>205 <div class="chip">9</div>206 <div class="chip more">+3 more</div>207 </div>208 209 <div class="divider"></div>210 211 <!-- Pincode -->212 <div class="pincode">213 <div>Find a seller that delivers to you</div>214 <button class="btn-outline">Enter pincode</button>215 </div>216 217 <!-- Delivery and policies -->218 <div class="list">219 <div class="list-item">220 <div class="list-left">221 <div class="icon-round">222 <svg viewBox="0 0 24 24" width="34" height="34" fill="#9e9e9e"><path d="M3 6h12v9H3zM15 9h4l2 3v3h-6V9zM6 18a2 2 0 11.001 4.001A2 2 0 016 18zm10 0a2 2 0 11.001 4.001A2 2 0 0116 18z"/></svg>223 </div>224 <div><span class="badge-free">Free</span> ₹40 | Delivery by 8 Dec, Friday</div>225 </div>226 <div class="chev">›</div>227 </div>228 229 <div class="list-item">230 <div class="list-left">231 <div class="icon-round">232 <svg viewBox="0 0 24 24" width="34" height="34" fill="#5C52F4"><path d="M12 5v3l4-4-4-4v3C6.5 3 2.7 7.4 3.1 12.8c.3 4.3 3.8 7.9 8.1 8.2 4.8.3 8.9-3.6 8.9-8.4h-2c0 3.6-2.9 6.6-6.5 6.6S5.1 16.3 5.1 12.7 8 6.1 11.6 6.1H12z"/></svg>233 </div>234 <div>10 Days Return Policy</div>235 </div>236 <div class="chev">›</div>237 </div>238 239 <div class="list-item">240 <div class="list-left">241 <div class="icon-round">242 <svg viewBox="0 0 24 24" width="34" height="34" fill="#2ea44f"><path d="M12 2C7 2 3 6 3 11s4 9 9 9 9-4 9-9-4-9-9-9zm1 14h-2v-2h-2v-2h2V8h2v2h2v2h-2v4z"/></svg>243 </div>244 <div>Cash on Delivery Available</div>245 </div>246 <div class="chev">›</div>247 </div>248 </div>249 250 <div class="divider"></div>251 252 <!-- Product details -->253 <div class="details-title">Product Details</div>254 <div class="detail-grid">255 <div class="detail-row">256 <div class="label">Outer material</div>257 <div class="value">PU</div>258 </div>259 <div class="detail-row"></div>260 <div class="detail-row">261 <div class="label">Occasion</div>262 <div class="value">Sports</div>263 </div>264 <div class="detail-row"></div>265 <div class="detail-row">266 <div class="label">Type For Sports</div>267 <div class="value">Running Shoes</div>268 </div>269 <div class="detail-row"></div>270 </div>271 272 <div class="all-details">273 <div class="title" style="font-size:40px; font-weight:700;">All Details</div>274 <div class="chev">›</div>275 </div>276 277 <div class="divider"></div>278 <!-- Placeholder for any image/banners if present in page -->279 <div style="width: 100%; height: 220px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; border-radius: 12px;">280 [IMG: Product/Brand banner if any]281 </div>282 </div>283 284 <!-- Bottom bar -->285 <div class="bottom-bar">286 <div class="btn white">Add to cart</div>287 <div class="btn primary">Buy Now</div>288 </div>289</div>290</body>291</html>