GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Amazon Style Product UI - iPhone 15</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: linear-gradient(180deg, #a9dfe0 0%, #bfe8cf 100%);14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 height: 70px;20 padding: 0 30px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #1f2a2b;25 font-weight: 600;26 font-size: 34px;27 letter-spacing: 1px;28 }29 .status-icons {30 display: flex;31 gap: 18px;32 align-items: center;33 }34 .icon-signal, .icon-wifi, .icon-battery {35 width: 36px; height: 24px;36 }37 38 /* Search header */39 .search-header {40 display: flex;41 align-items: center;42 padding: 14px 24px 12px 18px;43 gap: 16px;44 }45 .back-btn {46 width: 70px; height: 70px; border-radius: 50%;47 display: flex; align-items: center; justify-content: center;48 }49 .search-box {50 flex: 1;51 height: 110px;52 background: #ffffff;53 border-radius: 18px;54 display: flex;55 align-items: center;56 padding: 0 26px;57 gap: 22px;58 box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;59 border: 1px solid #e6e6e6;60 }61 .search-input {62 flex: 1;63 color: #222;64 font-size: 40px;65 }66 .scan-btn {67 width: 70px; height: 70px; border-radius: 16px; border: 2px solid #c8d2d1;68 display: flex; align-items: center; justify-content: center; color: #5d6d6c; font-size: 36px;69 }70 71 /* Storage options */72 .options-wrap {73 padding: 8px 18px 0 18px;74 }75 .storage-row {76 display: flex;77 gap: 28px;78 }79 .storage-card {80 flex: 1;81 min-width: 0;82 background: #ffffff;83 border: 1px solid #dadada;84 border-radius: 24px;85 padding: 26px 24px;86 height: 250px;87 }88 .storage-card.selected {89 border: 3px solid #f6a940;90 box-shadow: 0 0 0 3px rgba(246,169,64,0.15) inset;91 }92 .storage-title {93 font-size: 40px; font-weight: 700; color: #2a2a2a; margin-bottom: 8px;94 }95 .price {96 font-size: 44px; font-weight: 800; margin: 6px 0; letter-spacing: 0.5px;97 }98 .price .rs { font-weight: 800; }99 .mrp {100 font-size: 32px; color: #7a7a7a; text-decoration: line-through; margin-top: 4px;101 }102 .instock {103 color: #1a8c36; font-weight: 700; margin-top: 10px; font-size: 34px;104 }105 .scroll-indicator {106 width: 1010px; height: 10px; background: #d2d2d2; border-radius: 6px; margin: 18px auto 6px;107 position: relative;108 }109 .scroll-indicator::after {110 content: "";111 position: absolute; left: 360px; top: 0; height: 10px; width: 300px; background: #8b8b8b; border-radius: 6px;112 }113 114 /* Accordion list */115 .list {116 background: #fff;117 border-top-left-radius: 22px; border-top-right-radius: 22px;118 margin-top: 16px;119 padding-bottom: 30px;120 box-shadow: 0 -1px 0 rgba(0,0,0,0.06);121 }122 .row {123 display: flex; align-items: center; padding: 26px 30px;124 border-bottom: 1px solid #ececec;125 gap: 24px;126 }127 .row:last-child { border-bottom: none; }128 .bullet {129 width: 64px; height: 64px; border-radius: 14px; background: #f3f6f6; border: 1px solid #dfe6e6;130 display: flex; align-items: center; justify-content: center;131 }132 .row-text {133 flex: 1;134 }135 .row-title {136 font-size: 42px; font-weight: 800; color: #1e2b2a; margin-bottom: 4px;137 }138 .row-sub {139 font-size: 34px; color: #6b7978;140 }141 .chev {142 width: 34px; height: 34px; opacity: 0.8;143 }144 145 /* Totals and delivery */146 .totals {147 padding: 22px 30px 10px;148 background: #fff;149 }150 .total-line {151 font-size: 48px; font-weight: 800; margin: 8px 0 18px;152 }153 .free-delivery, .fast-delivery {154 font-size: 36px; color: #1e2b2a; line-height: 1.35;155 }156 .free-delivery .green { color: #149c36; font-weight: 800; }157 .free-delivery .link, .fast-delivery .link { color: #2a7dc1; }158 .fast-delivery .green { color: #149c36; }159 .location {160 margin-top: 18px;161 display: flex; align-items: center; gap: 16px;162 font-size: 38px; color: #20505b;163 }164 .pin { width: 34px; height: 34px; }165 .instock-large {166 color: #188c36; font-weight: 800; font-size: 46px; padding: 20px 30px 140px; background: #fff;167 }168 169 /* Sticky Add to Cart */170 .add-to-cart-wrap {171 position: absolute;172 left: 26px; right: 26px; bottom: 180px;173 height: 130px;174 display: flex; align-items: center; justify-content: center;175 }176 .add-to-cart-btn {177 width: 100%; height: 130px; background: #ffd94e;178 border-radius: 70px;179 box-shadow: 0 6px 18px rgba(0,0,0,0.12);180 display: flex; align-items: center; justify-content: center;181 font-size: 50px; font-weight: 800; color: #4b3b00;182 border: 1px solid #f2c73b;183 }184 185 /* Bottom navigation */186 .bottom-nav {187 position: absolute; bottom: 0; left: 0; right: 0;188 height: 140px; background: #ffffff;189 border-top: 1px solid #e9e9e9;190 display: flex; align-items: center; justify-content: space-around;191 }192 .nav-item {193 display: flex; flex-direction: column; align-items: center; gap: 8px; color: #445c5d;194 font-size: 30px; font-weight: 700;195 }196 .nav-item.active { color: #1b877c; }197 .nav-ic { width: 52px; height: 52px; }198 /* Gesture handle (small bar) */199 .gesture {200 position: absolute; bottom: 148px; left: 50%; transform: translateX(-50%);201 width: 400px; height: 10px; background: #a8a8a8; border-radius: 10px; opacity: 0.7;202 }203 204 /* Helper colors in rupee */205 .rs { font-family: Arial, Helvetica, sans-serif; }206</style>207</head>208<body>209<div id="render-target">210 211 <!-- Status Bar -->212 <div class="status-bar">213 <div>9:58</div>214 <div class="status-icons">215 <svg class="icon-signal" viewBox="0 0 24 24"><path d="M2 20h2v-2H2v2zm4 0h2v-6H6v6zm4 0h2V8h-2v12zm4 0h2V4h-2v16z" fill="#274747"/></svg>216 <svg class="icon-wifi" viewBox="0 0 24 24"><path d="M2 8.5C7.5 4 16.5 4 22 8.5l-1.5 1.5C15 6 9 6 3.5 10L2 8.5zm4 4C9.5 10 14.5 10 18 12.5l-1.5 1.5C13 12 11 12 7.5 14L6 12.5zm4 4l2 2 2-2c-1.3-1.3-4.7-1.3-6 0z" fill="#274747"/></svg>217 <svg class="icon-battery" viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#274747" stroke-width="2"/><rect x="4" y="9" width="12" height="6" fill="#274747"/><rect x="20" y="10" width="2" height="4" fill="#274747"/></svg>218 </div>219 </div>220 221 <!-- Search Header -->222 <div class="search-header">223 <div class="back-btn">224 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8 1.5-1.5L10.5 12l6.5-6.5L15.5 4z" fill="#1f2b2a"/></svg>225 </div>226 <div class="search-box">227 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.3 14l5 5 1.4-1.4-5-5A8 8 0 0010 2zm0 2a6 6 0 110 12A6 6 0 0110 4z" fill="#657b7a"/></svg>228 <div class="search-input">iphone 15</div>229 <div class="scan-btn">230 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M4 9V5h4M4 15v4h4M20 9V5h-4M20 15v4h-4" stroke="#5d6d6c" stroke-width="2" fill="none" stroke-linecap="round"/></svg>231 </div>232 </div>233 </div>234 235 <!-- Storage Options -->236 <div class="options-wrap">237 <div class="storage-row">238 <div class="storage-card">239 <div class="storage-title">128 GB</div>240 <div class="price"><span class="rs">₹</span>72,990<span style="font-size:28px">00</span></div>241 <div class="mrp"><span class="rs">₹</span>79,900.00</div>242 <div class="instock">In stock</div>243 </div>244 <div class="storage-card selected">245 <div class="storage-title">256 GB</div>246 <div class="price"><span class="rs">₹</span>83,999<span style="font-size:28px">00</span></div>247 <div class="mrp"><span class="rs">₹</span>89,900.00</div>248 <div class="instock">In stock</div>249 </div>250 <div class="storage-card">251 <div class="storage-title">512 GB</div>252 <div class="price"><span class="rs">₹</span>1,02,999<span style="font-size:28px">00</span></div>253 <div class="mrp"><span class="rs">₹</span>1,09,900.00</div>254 <div class="instock">In stock</div>255 </div>256 </div>257 <div class="scroll-indicator"></div>258 </div>259 260 <!-- Accordion style list -->261 <div class="list">262 <div class="row">263 <div class="bullet">264 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#e0a410" stroke-width="2" fill="none"/><text x="12" y="16" font-size="12" fill="#e0a410" text-anchor="middle">%</text></svg>265 </div>266 <div class="row-text">267 <div class="row-title">Save Extra with Offers</div>268 <div class="row-sub">No Cost EMI Offers</div>269 </div>270 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#708080" stroke-width="2" fill="none" stroke-linecap="round"/></svg>271 </div>272 273 <div class="row">274 <div class="bullet">275 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 6l-3 3 3 3M18 6l3 3-3 3M4 9h16M12 12v6" stroke="#748b8a" stroke-width="2" fill="none" stroke-linecap="round"/></svg>276 </div>277 <div class="row-text">278 <div class="row-title">Exchange Your Old Phone</div>279 <div class="row-sub">Save upto ₹32,050</div>280 </div>281 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#708080" stroke-width="2" fill="none" stroke-linecap="round"/></svg>282 </div>283 284 <div class="row">285 <div class="bullet">286 <svg width="38" height="38" viewBox="0 0 24 24"><circle cx="12" cy="8" r="3" fill="none" stroke="#748b8a" stroke-width="2"/><path d="M4 20c1-4 6-4 8-4s7 0 8 4" stroke="#748b8a" stroke-width="2" fill="none"/></svg>287 </div>288 <div class="row-text">289 <div class="row-title">Phone Set-up Service at Delivery</div>290 <div class="row-sub">Sim insertion, secure data transfer & more</div>291 </div>292 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#708080" stroke-width="2" fill="none" stroke-linecap="round"/></svg>293 </div>294 295 <div class="row">296 <div class="bullet">297 <svg width="34" height="34" viewBox="0 0 24 24"><rect x="4" y="4" width="8" height="12" rx="2" fill="none" stroke="#748b8a" stroke-width="2"/><line x1="16" y1="6" x2="20" y2="6" stroke="#748b8a" stroke-width="2"/><line x1="16" y1="10" x2="20" y2="10" stroke="#748b8a" stroke-width="2"/></svg>298 </div>299 <div class="row-text">300 <div class="row-title">Add Accessories</div>301 <div class="row-sub">Recommended accessories with this iPhone</div>302 </div>303 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#708080" stroke-width="2" fill="none" stroke-linecap="round"/></svg>304 </div>305 306 <div class="totals">307 <div class="total-line">Total: ₹83,999</div>308 <div class="free-delivery"><span class="green">FREE delivery</span> Wednesday, 10 January. <span class="link">Details</span></div>309 <div class="fast-delivery">Or fastest delivery <b>Tomorrow, 9 January</b>. Order within <span class="green">9 hrs 32 mins</span>. <span class="link">Details</span></div>310 <div class="location">311 <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7zm0 4a3 3 0 100 6 3 3 0 000-6z" fill="#2c737a"/></svg>312 Delivering to Delhi 110001 - <span class="link">Update location</span>313 </div>314 </div>315 <div class="instock-large">In stock</div>316 </div>317 318 <!-- Sticky Add To Cart -->319 <div class="add-to-cart-wrap">320 <div class="add-to-cart-btn">Add to Cart</div>321 </div>322 323 <!-- Gesture Bar -->324 <div class="gesture"></div>325 326 <!-- Bottom Navigation -->327 <div class="bottom-nav">328 <div class="nav-item active">329 <svg class="nav-ic" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-5v-7H10v7H5a2 2 0 0 1-2-2v-9z" fill="#1b877c"/></svg>330 <div>Home</div>331 </div>332 <div class="nav-item">333 <svg class="nav-ic" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#445c5d"/><path d="M4 20c1-4 4-6 8-6s7 2 8 6" stroke="#445c5d" stroke-width="2" fill="none"/></svg>334 <div>You</div>335 </div>336 <div class="nav-item">337 <svg class="nav-ic" viewBox="0 0 24 24"><rect x="4" y="4" width="6" height="6" fill="#445c5d"/><rect x="14" y="4" width="6" height="6" fill="#445c5d"/><rect x="4" y="14" width="6" height="6" fill="#445c5d"/><rect x="14" y="14" width="6" height="6" fill="#445c5d"/></svg>338 <div>More</div>339 </div>340 <div class="nav-item">341 <svg class="nav-ic" viewBox="0 0 24 24"><path d="M7 6h13l-2 9H8L6 4H2" stroke="#445c5d" stroke-width="2" fill="none"/><circle cx="9" cy="20" r="2" fill="#445c5d"/><circle cx="18" cy="20" r="2" fill="#445c5d"/></svg>342 <div>Cart</div>343 </div>344 <div class="nav-item">345 <svg class="nav-ic" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#445c5d" stroke-width="2"/></svg>346 <div>Menu</div>347 </div>348 </div>349 350</div>351</body>352</html>