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 Page 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; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11 }12 13 /* Top status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; width: 100%; height: 140px;16 background: #8e8e8e; color: #fff; display: flex; align-items: center; padding: 0 40px;17 font-size: 34px;18 }19 .status-icons { margin-left: auto; display: flex; gap: 24px; align-items: center; }20 .dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: 0.9; }21 22 /* App bar with search */23 .app-bar {24 position: absolute; top: 140px; left: 0; width: 100%; height: 200px; background: #fff;25 display: flex; align-items: center; padding: 0 32px; gap: 24px;26 }27 .icon-btn { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; }28 .logo {29 width: 76px; height: 76px; border-radius: 16px; background: #e53935; color: #fff; font-weight: 700;30 display: flex; align-items: center; justify-content: center; font-size: 44px;31 box-shadow: 0 2px 6px rgba(0,0,0,0.15);32 }33 .search-pill {34 flex: 1; height: 112px; border: 2px solid #e0e0e0; border-radius: 56px; display: flex; align-items: center;35 padding: 0 28px; gap: 18px; box-shadow: 0 3px 0 rgba(233,215,220,0.6) inset;36 }37 .search-text { color: #9e9e9e; font-size: 36px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }38 .right-actions { display: flex; gap: 24px; }39 .soft-underline {40 position: absolute; top: 340px; left: 0; width: 100%; height: 12px; background: #f8e6ea;41 }42 43 /* Sections */44 .section { width: 100%; padding: 24px 40px; }45 .divider { height: 14px; background: #efefef; width: 100%; }46 .ask-row, .bulk-row {47 display: flex; align-items: center; justify-content: space-between; padding: 36px 0;48 border-bottom: 14px solid #efefef;49 }50 .ask-row h3, .bulk-row h3 { margin: 0; font-size: 40px; color: #444; }51 .muted { color: #8a8a8a; font-size: 30px; margin-top: 8px; }52 .soft-btn {53 background: #ffe7ea; color: #d94352; border: 2px solid #f6c9cf; border-radius: 16px; padding: 26px 40px; font-weight: 700; font-size: 34px;54 }55 .bulk-left { display: flex; align-items: center; gap: 24px; }56 .cube-icon { width: 64px; height: 64px; position: relative; }57 .cube-icon span {58 position: absolute; width: 22px; height: 22px; background: #333; transform: rotate(45deg);59 }60 .cube-icon span:nth-child(1){ left:0; top:0;}61 .cube-icon span:nth-child(2){ right:0; top:0;}62 .cube-icon span:nth-child(3){ left:0; bottom:0;}63 .cube-icon span:nth-child(4){ right:0; bottom:0;}64 65 /* Similar products */66 .similar-header { padding: 36px 40px; font-size: 46px; font-weight: 800; color: #444; }67 .cards-wrap {68 display: flex; gap: 24px; padding: 0 24px 24px 24px;69 }70 .card {71 background: #fff; border: 2px solid #e6e6e6; border-radius: 24px; width: 328px; overflow: hidden;72 box-shadow: 0 2px 0 rgba(0,0,0,0.04);73 }74 .card-img {75 width: 100%; height: 280px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;76 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;77 }78 .card-body { padding: 22px; }79 .rating-chip {80 display: inline-flex; align-items: center; gap: 10px; background: #2ecc71; color: #fff; font-weight: 700;81 padding: 6px 12px; border-radius: 12px; font-size: 28px;82 }83 .small-muted { color: #777; font-size: 26px; }84 .title { font-size: 32px; color: #333; font-weight: 700; margin: 12px 0; line-height: 1.2; }85 .brand { font-size: 28px; color: #777; margin-bottom: 12px; }86 .price-row { font-size: 30px; color: #777; display: flex; gap: 12px; align-items: baseline; }87 .strike { text-decoration: line-through; color: #9e9e9e; }88 .green { color: #22b573; font-weight: 800; }89 .final-price { font-size: 38px; color: #222; font-weight: 800; margin: 12px 0; }90 .card-actions { display: flex; gap: 14px; align-items: center; margin-top: 10px; }91 .mini-cart {92 border: 2px solid #f08a8a; color: #d94444; background: #fff; border-radius: 14px; padding: 16px 18px;93 display: inline-flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 700;94 }95 .buy-btn {96 flex: 1; background: #e53935; color: #fff; border: none; border-radius: 16px; padding: 20px; font-size: 34px; font-weight: 800;97 }98 99 /* Bottom summary sheet */100 .sheet {101 position: absolute; left: 24px; right: 24px; top: 1700px; background: #f7f7f7;102 border-radius: 28px; border: 2px solid #e4e4e4; padding: 36px; box-shadow: 0 6px 18px rgba(0,0,0,0.08);103 }104 .sheet .title { font-size: 46px; margin: 0 0 18px 0; }105 .tax { color: #8a8a8a; font-size: 30px; margin-bottom: 14px; }106 .prices { display: flex; align-items: baseline; gap: 24px; margin-bottom: 10px; }107 .prices .main { font-size: 52px; font-weight: 900; color: #222; }108 .coupon {109 margin-left: auto; background: #eaffea; border: 4px dashed #44c062; border-radius: 16px; padding: 16px 26px;110 text-align: center; width: 220px;111 }112 .coupon .big { color: #2fbf59; font-weight: 900; font-size: 34px; }113 .coupon .small { color: #777; font-size: 26px; }114 115 /* Bottom CTA bar */116 .cta-bar {117 position: absolute; left: 0; right: 0; bottom: 86px; padding: 24px 32px; display: flex; gap: 24px;118 background: transparent;119 }120 .cta { flex: 1; height: 132px; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 16px;121 font-size: 40px; font-weight: 800; color: #fff;122 }123 .cta.cart { background: #2f7bd7; }124 .cta.buy { background: #e53935; }125 .home-indicator {126 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);127 width: 320px; height: 14px; background: #e6e6e6; border-radius: 8px;128 }129 130 /* Generic SVG icon style */131 svg { display: block; }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Status bar -->138 <div class="status-bar">139 <div>8:17</div>140 <div class="status-icons">141 <div class="dot"></div>142 <div class="dot"></div>143 <div class="dot"></div>144 <svg width="38" height="24" viewBox="0 0 38 24"><rect x="2" y="2" width="30" height="20" rx="4" fill="#fff"/><rect x="34" y="8" width="4" height="8" rx="2" fill="#fff"/></svg>145 </div>146 </div>147 148 <!-- App bar -->149 <div class="app-bar">150 <div class="icon-btn">151 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>152 </div>153 <div class="logo">m</div>154 <div class="search-pill">155 <svg width="38" height="38" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#666" stroke-width="2" stroke-linecap="round"/></svg>156 <div class="search-text">Search for IT & Electronics...</div>157 <svg width="38" height="38" viewBox="0 0 24 24"><rect x="9" y="4" width="6" height="10" rx="3" fill="#3f51b5"/><path d="M12 18v2" stroke="#3f51b5" stroke-width="2" stroke-linecap="round"/></svg>158 </div>159 <div class="right-actions">160 <div class="icon-btn">161 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 6h14l-2 10H8L6 6z" stroke="#333" stroke-width="2" fill="none"/><circle cx="9" cy="20" r="2" fill="#333"/><circle cx="17" cy="20" r="2" fill="#333"/></svg>162 </div>163 <div class="icon-btn">164 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#333" stroke-width="2" stroke-linecap="round"/></svg>165 </div>166 </div>167 </div>168 <div class="soft-underline"></div>169 170 <!-- Doubts section -->171 <div class="section ask-row" style="margin-top: 24px;">172 <h3>Have Doubts Regarding This Product?</h3>173 <button class="soft-btn">ASK NOW</button>174 </div>175 176 <!-- Bulk buy section -->177 <div class="section bulk-row">178 <div class="bulk-left">179 <div class="cube-icon">180 <span></span><span></span><span></span><span></span>181 </div>182 <div>183 <h3 style="margin:0;">Interested to buy in bulk?</h3>184 <div class="muted">Get customized price</div>185 </div>186 </div>187 <button class="soft-btn">GET QUOTE</button>188 </div>189 190 <!-- Similar products -->191 <div class="similar-header">Similar Products</div>192 193 <div class="cards-wrap">194 <!-- Card 1 -->195 <div class="card">196 <div class="card-img">[IMG: Wall Mount Bracket]</div>197 <div class="card-body">198 <div class="title">...</div>199 <div class="brand">By: Brand</div>200 <div class="price-row">201 <span class="strike">₹900</span>202 <span class="green">50% OFF</span>203 </div>204 <div class="final-price">₹380</div>205 <div class="card-actions">206 <div class="mini-cart">207 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 6h14l-2 10H8L6 6z" stroke="#d94444" stroke-width="2" fill="none"/><circle cx="9" cy="20" r="2" fill="#d94444"/><circle cx="17" cy="20" r="2" fill="#d94444"/></svg>208 </div>209 <button class="buy-btn">BUY NOW</button>210 </div>211 </div>212 </div>213 214 <!-- Card 2 -->215 <div class="card">216 <div class="card-img">[IMG: E-Writer Tablet]</div>217 <div class="card-body">218 <div class="rating-chip">219 <span>4.6</span>220 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 17l-6 3 2-6-4-4 6-1 2-5 2 5 6 1-4 4 2 6z" fill="#fff"/></svg>221 <span class="small-muted">(5 Reviews)</span>222 </div>223 <div class="title">Portronics Ruffpad 12M 12 inch Plastic Bl...</div>224 <div class="brand">By: Portronics</div>225 <div class="price-row">226 <span class="strike">₹1,599</span>227 <span class="green">68% OFF</span>228 </div>229 <div class="final-price">₹429</div>230 <div class="card-actions">231 <div class="mini-cart">232 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 6h14l-2 10H8L6 6z" stroke="#d94444" stroke-width="2" fill="none"/><circle cx="9" cy="20" r="2" fill="#d94444"/><circle cx="17" cy="20" r="2" fill="#d94444"/></svg>233 </div>234 <button class="buy-btn">BUY NOW</button>235 </div>236 </div>237 </div>238 239 <!-- Card 3 -->240 <div class="card">241 <div class="card-img">[IMG: Set Top Box Stand]</div>242 <div class="card-body">243 <div class="title">Drizzle 2 Pcs Plastic Clear Set Top Bo...</div>244 <div class="brand">By: Drizzle</div>245 <div class="price-row">246 <span class="strike">₹900</span>247 <span class="green">50% OFF</span>248 </div>249 <div class="final-price">₹380</div>250 <div class="card-actions">251 <div class="mini-cart">252 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 6h14l-2 10H8L6 6z" stroke="#d94444" stroke-width="2" fill="none"/><circle cx="9" cy="20" r="2" fill="#d94444"/><circle cx="17" cy="20" r="2" fill="#d94444"/></svg>253 </div>254 <button class="buy-btn">BUY NOW</button>255 </div>256 </div>257 </div>258 </div>259 260 <!-- Bottom summary sheet -->261 <div class="sheet">262 <div class="title">RANZ 14-42 Inch Fix Lcd Wall Mount Stand</div>263 <div class="tax">₹327 (Incl. of all taxes)</div>264 <div class="prices">265 <div class="main">₹277</div>266 <div class="small-muted">+ ₹50 GST</div>267 <div class="strike">MRP ₹590</div>268 <div class="green">44% OFF</div>269 <div class="coupon">270 <div class="big">HELLO</div>271 <div class="small">Tap to Copy</div>272 </div>273 </div>274 </div>275 276 <!-- Bottom CTA buttons -->277 <div class="cta-bar">278 <div class="cta cart">279 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 6h14l-2 10H8L6 6z" stroke="#fff" stroke-width="2" fill="none"/><circle cx="9" cy="20" r="2" fill="#fff"/><circle cx="17" cy="20" r="2" fill="#fff"/></svg>280 ADD TO CART281 </div>282 <div class="cta buy">BUY NOW</div>283 </div>284 285 <div class="home-indicator"></div>286</div>287</body>288</html>