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 Purchase UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;16 color: #111;17 }18 19 /* Header / search */20 .header {21 width: 100%;22 height: 300px;23 background: linear-gradient(180deg, #9ed9d8 0%, #bfe7c9 100%);24 position: relative;25 box-sizing: border-box;26 padding: 18px 32px 0;27 }28 .status {29 display: flex;30 align-items: center;31 justify-content: space-between;32 height: 70px;33 color: #0f1e25;34 }35 .status .left {36 display: flex;37 align-items: center;38 gap: 14px;39 font-size: 34px;40 font-weight: 600;41 }42 .dot {43 width: 10px; height: 10px; background: #0f1e25; border-radius: 50%;44 display: inline-block;45 }46 .ghost {47 width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.25); display: inline-block;48 }49 .status .right {50 display: flex; align-items: center; gap: 18px;51 }52 .status .signal { width: 28px; height: 20px; border: 2px solid #0f1e25; border-top: 0; }53 .status .battery {54 width: 42px; height: 22px; border: 2px solid #0f1e25; position: relative; border-radius: 5px;55 }56 .battery::after {57 content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #0f1e25; border-radius: 2px;58 }59 60 .search-row {61 margin-top: 16px;62 display: flex;63 align-items: center;64 gap: 18px;65 }66 .back-btn {67 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;68 }69 .search-box {70 flex: 1;71 height: 112px;72 background: #ffffff;73 border-radius: 28px;74 box-shadow: 0 3px 10px rgba(0,0,0,0.12);75 display: flex;76 align-items: center;77 padding: 0 28px;78 gap: 18px;79 }80 .search-input {81 flex: 1;82 font-size: 38px;83 color: #333;84 }85 .scan-btn {86 width: 96px; height: 96px; border-radius: 24px;87 display: flex; align-items: center; justify-content: center;88 }89 .icon { fill: none; stroke: #111; stroke-width: 4; }90 91 /* Content */92 .content {93 position: absolute;94 top: 300px;95 left: 0;96 right: 0;97 bottom: 0;98 overflow: hidden; /* screen screenshot: no scrolling */99 padding: 0 40px 200px;100 box-sizing: border-box;101 }102 .divider {103 height: 18px;104 background: #f4f4f4;105 margin: 0 -40px 0;106 border-top: 1px solid #e5e5e5;107 border-bottom: 1px solid #eaeaea;108 }109 .section {110 padding: 28px 0;111 border-bottom: 1px solid #ececec;112 }113 .row {114 display: flex; align-items: center; gap: 18px;115 }116 .badge {117 width: 60px; height: 60px; border: 2px dashed #c5c5c5; border-radius: 50%;118 display: flex; align-items: center; justify-content: center; color: #888; font-weight: 700;119 }120 .title { font-size: 40px; font-weight: 700; }121 .subtle { color: #6b6b6b; font-size: 32px; }122 123 .link { color: #167abd; }124 .bold { font-weight: 700; }125 126 .pin {127 width: 42px; height: 42px;128 border-radius: 50%; border: 2px solid #6a6a6a;129 display: flex; align-items: center; justify-content: center;130 color: #6a6a6a; font-size: 26px;131 }132 133 .instock { color: #218a2b; font-size: 48px; font-weight: 600; margin: 26px 0 22px; }134 135 .qty {136 width: 240px; height: 100px; background: #fff; border-radius: 22px;137 border: 1px solid #d8d8d8; box-shadow: 0 8px 18px rgba(0,0,0,0.06);138 display: flex; align-items: center; justify-content: space-between;139 padding: 0 24px; font-size: 34px; color: #444; margin-bottom: 26px;140 }141 .qty .carat {142 width: 34px; height: 34px; border-left: 2px solid transparent; border-right: 2px solid transparent;143 border-top: 10px solid #333; transform: translateY(4px);144 }145 146 .cta {147 height: 120px; border-radius: 60px; display: flex; align-items: center; justify-content: center;148 font-size: 42px; font-weight: 600; color: #1c1c1c; margin: 18px 0;149 box-shadow: 0 6px 16px rgba(0,0,0,0.12);150 }151 .add { background: linear-gradient(180deg, #f9e071, #f0c94a); }152 .buy { background: linear-gradient(180deg, #f2a43e, #e6872a); color: #1b1b1b; }153 154 .secure {155 display: flex; align-items: center; gap: 16px; margin-top: 16px; font-size: 36px;156 }157 .lock {158 width: 40px; height: 40px; border-radius: 8px; border: 2px solid #888; position: relative;159 }160 .lock::before {161 content: ""; position: absolute; left: 9px; top: -12px; width: 18px; height: 14px; border: 2px solid #888; border-bottom: none; border-radius: 10px 10px 0 0;162 }163 164 .seller { font-size: 34px; color: #404040; margin-top: 14px; }165 .wish { font-size: 34px; color: #187c9e; margin-top: 14px; }166 167 .sellers-card {168 background: #fff; padding: 28px 0 18px; border-top: 1px solid #e9e9e9;169 }170 .card-title { font-size: 44px; font-weight: 700; margin-bottom: 16px; }171 .price { font-size: 38px; }172 .rupee { font-family: Arial, sans-serif; }173 .free { font-weight: 700; }174 .arrow-right {175 width: 26px; height: 26px; border-top: 3px solid #666; border-right: 3px solid #666; transform: rotate(45deg);176 margin-left: auto; margin-right: 10px;177 }178 .compare { color: #1a789a; font-size: 36px; margin-top: 18px; }179 180 /* Bottom navigation */181 .bottom-nav {182 position: absolute; left: 0; right: 0; bottom: 84px; height: 140px;183 border-top: 1px solid #e6e6e6; background: #ffffff;184 display: flex; align-items: center; justify-content: space-around;185 padding-top: 10px;186 }187 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #3c3c3c; font-size: 28px; }188 .nav-item.active { color: #1a7f8f; }189 .nav-icon {190 width: 52px; height: 52px; border-radius: 14px; border: 2px solid currentColor; position: relative;191 }192 .nav-icon.cart::after {193 content: "1"; position: absolute; top: -10px; right: -14px; width: 32px; height: 32px; background: #1a7f8f; color: #fff; border-radius: 50%;194 display: flex; align-items: center; justify-content: center; font-size: 22px;195 }196 .home-indicator {197 position: absolute; left: 50%; transform: translateX(-50%);198 bottom: 24px; width: 360px; height: 12px; background: #bdbdbd; border-radius: 8px;199 }200</style>201</head>202<body>203<div id="render-target">204 205 <div class="header">206 <div class="status">207 <div class="left">208 <span>7:26</span>209 <span class="ghost"></span>210 <span class="ghost"></span>211 <span class="ghost"></span>212 <span class="ghost"></span>213 <span class="dot"></span>214 </div>215 <div class="right">216 <div class="signal"></div>217 <div class="battery"></div>218 </div>219 </div>220 221 <div class="search-row">222 <div class="back-btn" aria-label="Back">223 <svg width="48" height="48" viewBox="0 0 24 24" class="icon">224 <path d="M15 18l-6-6 6-6" />225 </svg>226 </div>227 228 <div class="search-box">229 <svg width="44" height="44" viewBox="0 0 24 24" class="icon">230 <circle cx="11" cy="11" r="7"></circle>231 <path d="M20 20l-4-4"></path>232 </svg>233 <div class="search-input">formal coat for women</div>234 <div class="scan-btn" aria-label="Camera">235 <svg width="44" height="44" viewBox="0 0 24 24" class="icon">236 <rect x="4" y="7" width="16" height="12" rx="2"></rect>237 <path d="M9 7l1.5-2h3L15 7"></path>238 <circle cx="12" cy="13" r="3"></circle>239 </svg>240 </div>241 </div>242 </div>243 </div>244 245 <div class="content">246 <div class="divider"></div>247 248 <div class="section">249 <div class="row">250 <div class="badge">%</div>251 <div>252 <div class="title">Save Extra with Offers</div>253 <div class="subtle">Bank Offers and Partner Offers</div>254 </div>255 <div style="margin-left:auto; transform: rotate(0deg);">256 <svg width="36" height="36" viewBox="0 0 24 24" class="icon" style="stroke:#444;">257 <path d="M6 9l6 6 6-6"></path>258 </svg>259 </div>260 </div>261 </div>262 263 <div class="section" style="border-bottom: none;">264 <div style="font-size: 36px; line-height: 1.5;">265 <span class="link bold">FREE delivery</span>266 <span> </span>267 <span class="bold">Wednesday, 25 October.</span>268 <span> </span>269 <span class="link">Details</span>270 </div>271 272 <div style="font-size: 34px; margin-top: 10px; line-height: 1.5;">273 Or fastest delivery <span class="bold">Monday, 23 October.</span>274 Order within <span class="link">17 hrs 19 mins.</span>275 <span class="link">Details</span>276 </div>277 278 <div class="row" style="margin-top: 20px;">279 <div class="pin">◎</div>280 <div style="font-size: 34px;">281 <span class="link">Delivering to Noida 110091 - Update location</span>282 </div>283 </div>284 285 <div class="instock">In stock</div>286 287 <div class="qty">288 <span>Qty: 1</span>289 <div class="carat"></div>290 </div>291 292 <div class="cta add">Add to Cart</div>293 <div class="cta buy">Buy Now</div>294 295 <div class="secure">296 <div class="lock"></div>297 <span class="link">Secure transaction</span>298 </div>299 300 <div class="seller">301 Sold by <span class="link">Zolario</span> and <span class="link">Fulfilled by Amazon</span>.302 </div>303 <div class="wish">Add to Wish List</div>304 </div>305 306 <div class="sellers-card">307 <div class="row">308 <div class="card-title">Other sellers on Amazon</div>309 </div>310 311 <div style="margin-top: 8px;">312 <div class="subtle" style="font-size: 36px;">Lowest price: New</div>313 <div class="price"><span class="rupee">₹</span>920<span style="font-size:24px; vertical-align: super;">00</span></div>314 <div class="subtle"><span class="free">FREE</span> Delivery.</div>315 </div>316 317 <div class="row" style="margin-top: 18px; padding-top: 18px; border-top: 1px solid #e6e6e6;">318 <div class="compare">Compare all 2 options</div>319 <div class="arrow-right"></div>320 </div>321 </div>322 </div>323 324 <div class="bottom-nav">325 <div class="nav-item active">326 <div class="nav-icon"></div>327 <div>Home</div>328 </div>329 <div class="nav-item">330 <div class="nav-icon" style="border-radius:50%;"></div>331 <div>You</div>332 </div>333 <div class="nav-item">334 <div class="nav-icon" style="border-style: dashed;"></div>335 <div>More</div>336 </div>337 <div class="nav-item">338 <div class="nav-icon cart"></div>339 <div>Cart</div>340 </div>341 <div class="nav-item">342 <div class="nav-icon" style="position: relative;">343 <div style="position:absolute; top:10px; left:10px; width:28px; height:4px; background: currentColor;"></div>344 <div style="position:absolute; top:20px; left:10px; width:28px; height:4px; background: currentColor;"></div>345 <div style="position:absolute; top:30px; left:10px; width:28px; height:4px; background: currentColor;"></div>346 </div>347 <div>Menu</div>348 </div>349 </div>350 351 <div class="home-indicator"></div>352</div>353</body>354</html>