GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8"/>4<meta name="viewport" content="width=1440, initial-scale=1.0"/>5<title>Product Page UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1440px;10 height: 3120px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 36px;15 box-shadow: 0 12px 40px rgba(0,0,0,0.15);16 }17 18 /* General */19 .row { display: flex; align-items: center; }20 .spacer { height: 24px; }21 .divider { height: 20px; background: #f3f4f6; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }22 .section { padding: 0 72px; }23 .label { color: #111; font-size: 48px; font-weight: 600; }24 .link { color: #2f6eff; font-size: 42px; font-weight: 600; }25 .muted { color: #6b7280; }26 .bullet-list { font-size: 46px; color: #111; line-height: 1.7; }27 .small { font-size: 38px; }28 .thin-divider { height: 1px; background: #e6e6e6; margin: 36px 0; }29 30 /* Status bar */31 .status-bar {32 height: 120px;33 padding: 0 48px;34 display: flex;35 align-items: center;36 justify-content: space-between;37 color: #111;38 font-weight: 700;39 font-size: 50px;40 }41 .status-icons { display: flex; gap: 28px; align-items: center; }42 .dot { width: 24px; height: 24px; background: #111; border-radius: 50%; }43 .wifi { width: 44px; height: 44px; border: 6px solid #111; border-radius: 50%; position: relative; }44 .wifi:after { content:""; position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); width: 12px; height: 12px; background:#111; border-radius:50%; }45 .battery {46 width: 88px; height: 40px; border: 6px solid #111; border-radius: 10px; position: relative;47 }48 .battery:after {49 content:""; position:absolute; right:-14px; top:12px; width:12px; height:16px; background:#111; border-radius:3px;50 }51 .battery-fill { position:absolute; left:6px; top:6px; height:28px; width:56px; background:#111; border-radius:6px; }52 53 /* App bar */54 .app-bar {55 height: 150px;56 display:flex;57 align-items:center;58 justify-content: space-between;59 padding: 0 36px;60 }61 .icon-btn { width: 120px; height: 120px; display:flex; align-items:center; justify-content:center; }62 .icons { display:flex; gap: 18px; }63 svg { width: 72px; height: 72px; }64 65 /* Color swatch */66 .color-area { padding: 0 72px; margin-top: 24px; }67 .color-label { font-size: 46px; color:#333; margin-bottom: 24px; }68 .swatch { width: 170px; height: 170px; border-radius: 50%; border: 8px solid #1e293b; background:#111; box-shadow: inset 0 0 0 10px rgba(255,255,255,0.08); }69 70 /* Size selector */71 .size-section { padding: 0 72px; margin-top: 36px; }72 .size-header { display:flex; align-items:center; gap: 18px; }73 .tag { padding: 8px 22px; border-radius: 18px; background:#ffe7a6; color:#8a6a00; font-weight:700; font-size: 40px; border:1px solid #f2c96d; }74 .sizes { margin-top: 30px; display:flex; gap: 28px; }75 .chip {76 width: 170px; height: 140px; border: 3px solid #d1d5db; border-radius: 22px;77 display:flex; align-items:center; justify-content:center; font-size: 52px; color:#111; position: relative; background:#fff;78 }79 .chip.selected { border-color:#111; box-shadow: 0 6px 0 0 #111 inset; }80 .chip.disabled { color:#a3a3a3; }81 .chip.disabled:before {82 content:""; position:absolute; width: 140px; height: 4px; background:#333; transform: rotate(-45deg);83 }84 .size-right { margin-left:auto; color:#3b82f6; font-size: 42px; font-weight:700; }85 86 /* Delivery section */87 .delivery { padding: 40px 72px; display:flex; align-items:center; justify-content: space-between; }88 .delivery h3 { margin:0; font-size: 56px; }89 .delivery .link { font-size: 48px; }90 91 /* Bank offers */92 .offers { padding: 24px 72px; }93 .offers h3 { font-size: 56px; margin: 20px 0 36px 0; }94 .offer-row { display:flex; gap: 28px; margin: 24px 0; align-items:flex-start; }95 .building-icon { width: 68px; height: 68px; border: 3px solid #555; border-radius: 16px; position: relative; }96 .building-icon:after { content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-12px; width:64px; height:14px; background:#555; border-radius: 8px; }97 .offer-text { font-size: 46px; color:#111; line-height:1.5; }98 .tnc { font-size: 40px; color:#3b82f6; margin-top: 10px; font-weight:700; }99 .more-offers { text-align:right; color:#3b82f6; font-size: 46px; font-weight:700; }100 101 /* Product Details */102 .product-details { padding: 24px 72px 220px; }103 .product-details h3 { font-size: 56px; margin: 20px 0 20px 0; display:flex; align-items:center; justify-content: space-between; }104 .more-link { color:#3b82f6; font-size: 46px; font-weight:700; }105 .bullet-list ul { padding-left: 40px; margin: 16px 0; }106 .bullet-list li { margin: 22px 0; }107 108 /* Bottom action bar */109 .bottom-bar {110 position: absolute;111 left: 0; right: 0; bottom: 0;112 height: 240px;113 background: #ffffff;114 border-top: 1px solid #e5e7eb;115 display:flex; align-items:center; padding: 0 48px; gap: 36px;116 }117 .circle-btn {118 width: 170px; height: 170px; border-radius: 28px; background:#f3f4f6; display:flex; align-items:center; justify-content:center; border:1px solid #e5e7eb;119 }120 .bag-btn {121 flex: 1;122 height: 170px; border-radius: 28px; background:#0f172a; color:#fff; display:flex; align-items:center; justify-content:center; gap: 24px; font-size: 60px; font-weight: 700;123 }124 .bag-btn svg { fill:#fff; width: 72px; height: 72px; }125</style>126</head>127<body>128<div id="render-target">129 130 <!-- Status bar -->131 <div class="status-bar">132 <div>9:58</div>133 <div class="status-icons">134 <div class="dot"></div>135 <div class="wifi"></div>136 <div class="battery"><div class="battery-fill"></div></div>137 </div>138 </div>139 140 <!-- App bar -->141 <div class="app-bar">142 <div class="icon-btn" title="Back">143 <svg viewBox="0 0 24 24">144 <path d="M15.5 5.5L8 12l7.5 6.5-1.5 2L4 12 14 3.5z" fill="#111"/>145 </svg>146 </div>147 <div class="icons">148 <div class="icon-btn" title="Search">149 <svg viewBox="0 0 24 24">150 <circle cx="10" cy="10" r="7" stroke="#111" stroke-width="2" fill="none"></circle>151 <path d="M15 15l6 6" stroke="#111" stroke-width="2"></path>152 </svg>153 </div>154 <div class="icon-btn" title="Wishlist">155 <svg viewBox="0 0 24 24">156 <path d="M12 21s-7-4.4-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.6-7 10-11 10z" fill="none" stroke="#111" stroke-width="2"/>157 </svg>158 </div>159 <div class="icon-btn" title="Cart">160 <svg viewBox="0 0 24 24">161 <path d="M3 5h3l2 12h9l2-9H7" stroke="#111" stroke-width="2" fill="none"/>162 <circle cx="9" cy="21" r="2" fill="#111"></circle>163 <circle cx="17" cy="21" r="2" fill="#111"></circle>164 </svg>165 </div>166 </div>167 </div>168 169 <!-- Color Section -->170 <div class="color-area">171 <div class="color-label">Black</div>172 <div class="swatch" aria-label="Color swatch: Black"></div>173 </div>174 175 <div class="divider"></div>176 177 <!-- Size selector -->178 <div class="size-section">179 <div class="size-header">180 <div class="label" style="font-weight:700;">Select Size</div>181 <div class="tag">UK</div>182 <div class="size-right">Size chart</div>183 </div>184 185 <div class="sizes">186 <div class="chip">6</div>187 <div class="chip selected">7</div>188 <div class="chip">8</div>189 <div class="chip">9</div>190 <div class="chip disabled">10</div>191 <div class="chip disabled">11</div>192 </div>193 </div>194 195 <div class="divider"></div>196 197 <!-- Delivery details -->198 <div class="delivery">199 <h3 class="label" style="font-weight:700;">Delivery Details</h3>200 <div class="link">Check delivery date</div>201 </div>202 203 <div class="divider"></div>204 205 <!-- Bank Offers -->206 <div class="offers">207 <h3 class="label" style="font-weight:700;">Bank Offers</h3>208 <div class="offer-row">209 <div class="building-icon"></div>210 <div>211 <div class="offer-text">Save ₹29 by choosing Prepaid over COD</div>212 <div class="tnc">T&C Apply</div>213 </div>214 </div>215 <div class="offer-row">216 <div class="building-icon"></div>217 <div>218 <div class="offer-text">Get Extra 5% off upto Rs. 100 by using your Flash.co email ID. Exclusive for Flash.co email ID users.</div>219 <div class="tnc">T&C Apply</div>220 </div>221 </div>222 <div class="more-offers">+ 6 more offers</div>223 </div>224 225 <div class="divider"></div>226 227 <!-- Product Details -->228 <div class="product-details">229 <h3 class="label">Product Details <span class="more-link">+ More</span></h3>230 <div class="bullet-list">231 <ul>232 <li>Wipe with a clean, dry cloth when needed</li>233 <li>Textile upper</li>234 <li>Lace Fastening</li>235 <li>Regular Fit</li>236 </ul>237 </div>238 </div>239 240 <!-- Bottom bar -->241 <div class="bottom-bar">242 <div class="circle-btn" title="Share">243 <svg viewBox="0 0 24 24">244 <path d="M18 8a3 3 0 1 0-2.8-4H15a3 3 0 0 0 .2 1.2L8 9a3 3 0 1 0 0 6l7.2 3.8A3 3 0 0 0 18 22a3 3 0 1 0-2.8-4.8L8 13a3 3 0 0 0 .2-2.4L15 6.8A3 3 0 0 0 18 8z" fill="#111"/>245 </svg>246 </div>247 <div class="circle-btn" title="Wishlist">248 <svg viewBox="0 0 24 24">249 <path d="M12 21s-7-4.4-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.6-7 10-11 10z" fill="none" stroke="#111" stroke-width="2"/>250 </svg>251 </div>252 <div class="bag-btn">253 <svg viewBox="0 0 24 24">254 <path d="M6 8h12l-1 12H7L6 8zm3-2a3 3 0 0 1 6 0v2H9V6z" />255 </svg>256 <span>Add To Bag</span>257 </div>258 </div>259 260</div>261</body>262</html>