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>Amazon Product UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Header */18 .header {19 position: absolute;20 top: 0; left: 0; right: 0;21 height: 240px;22 background: linear-gradient(135deg, #7de0d0 0%, #a7ead4 100%);23 }24 .status-bar {25 height: 56px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 28px;30 color: #0f2c2a;31 font-weight: 600;32 font-size: 36px;33 }34 .status-left { display: flex; align-items: center; gap: 20px; }35 .status-icons { display: flex; align-items: center; gap: 18px; color: #1b4240; }36 .dot {37 width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.25);38 }39 .status-right { display: flex; align-items: center; gap: 22px; }40 .icon-pill {41 width: 36px; height: 22px; border-radius: 6px; background: rgba(0,0,0,0.25);42 }43 44 .back-btn {45 position: absolute;46 left: 24px;47 top: 112px;48 width: 64px; height: 64px;49 display: flex; align-items: center; justify-content: center;50 }51 .search-row {52 position: absolute;53 left: 100px;54 right: 24px;55 top: 96px;56 height: 90px;57 }58 .search-bar {59 height: 90px;60 background: #ffffff;61 border-radius: 18px;62 box-shadow: 0 4px 12px rgba(0,0,0,0.15);63 display: flex;64 align-items: center;65 padding: 0 24px;66 gap: 18px;67 }68 .search-input {69 flex: 1;70 color: #3a3a3a;71 font-size: 40px;72 }73 .scan-icon {74 width: 64px; height: 64px; border-radius: 12px;75 background: #f3f6f7;76 display: flex; align-items: center; justify-content: center;77 border: 1px solid #d7d7d7;78 }79 80 /* Content */81 .content {82 position: absolute;83 top: 240px;84 left: 0; right: 0;85 padding: 32px;86 color: #111111;87 }88 .line { font-size: 36px; line-height: 52px; color: #333; }89 .line strong { font-weight: 700; }90 .link { color: #007185; text-decoration: none; font-weight: 600; }91 .pin-row {92 display: flex; align-items: center; gap: 16px;93 margin-top: 16px;94 font-size: 36px;95 color: #4b4b4b;96 }97 .muted { color: #555; }98 .instock {99 color: #0f8a10;100 font-weight: 700;101 font-size: 42px;102 margin: 28px 0 24px;103 }104 .qty {105 width: 220px;106 height: 92px;107 border: 1px solid #dcdcdc;108 border-radius: 20px;109 display: flex; align-items: center; justify-content: space-between;110 padding: 0 24px;111 font-size: 36px;112 color: #333;113 background: #f8f8f8;114 box-shadow: 0 4px 8px rgba(0,0,0,0.04);115 }116 117 .cta {118 width: 92%;119 height: 120px;120 border-radius: 60px;121 margin: 26px auto;122 font-size: 44px;123 font-weight: 700;124 display: flex; align-items: center; justify-content: center;125 color: #222;126 box-shadow: 0 6px 18px rgba(0,0,0,0.12);127 }128 .add { background: #ffd814; }129 .buy { background: #ffa41c; }130 131 .secure-row {132 display: flex; align-items: center; gap: 16px;133 margin-top: 18px;134 font-size: 36px;135 }136 .small-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }137 .seller { margin-top: 18px; font-size: 36px; color: #333; }138 .gift { margin-top: 10px; font-size: 34px; color: #4b4b4b; }139 140 .subscribe-card {141 margin-top: 32px;142 background: #f3f3f3;143 border: 1px solid #e0e0e0;144 border-radius: 26px;145 padding: 26px;146 }147 .sub-header {148 display: flex; align-items: center; gap: 18px; font-size: 38px; font-weight: 700; color: #333;149 }150 .badge {151 padding: 6px 16px;152 border-radius: 16px;153 font-size: 30px;154 font-weight: 700;155 display: inline-flex; align-items: center; justify-content: center;156 }157 .badge.orange { background: #ffb84d; color: #222; }158 .badge.gray { background: #dddddd; color: #555; }159 .radio {160 position: absolute;161 right: 42px;162 width: 48px; height: 48px;163 border-radius: 50%;164 border: 3px solid #cfcfcf;165 background: #fff;166 }167 .sub-line { font-size: 36px; color: #333; line-height: 52px; }168 .price { font-size: 40px; margin-top: 8px; }169 .bold { font-weight: 700; }170 171 .wish { margin: 28px 8px 0; font-size: 40px; color: #007185; font-weight: 700; }172 173 /* Bottom navigation */174 .bottom-nav {175 position: absolute;176 left: 0; right: 0; bottom: 120px;177 height: 150px;178 border-top: 1px solid #e6e6e6;179 background: #ffffff;180 display: flex; align-items: center; justify-content: space-around;181 padding-top: 8px;182 }183 .nav-item { width: 150px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #444; font-size: 32px; }184 .nav-item.active { color: #0aa4a8; font-weight: 700; }185 .nav-icon { width: 64px; height: 64px; }186 187 .home-indicator {188 position: absolute;189 left: 50%;190 transform: translateX(-50%);191 bottom: 40px;192 width: 360px; height: 14px; border-radius: 8px; background: #bdbdbd;193 opacity: 0.7;194 }195 196 /* SVG styling */197 svg { display: block; }198 .icon-stroke { stroke: #333; stroke-width: 3; fill: none; }199 .icon-fill { fill: #333; }200 .icon-muted { stroke: #777; fill: none; stroke-width: 3; }201 .icon-teal { fill: #0aa4a8; }202</style>203</head>204<body>205<div id="render-target">206 207 <!-- Gradient header -->208 <div class="header">209 <div class="status-bar">210 <div class="status-left">211 <div>10:16</div>212 <div class="status-icons">213 <div class="dot"></div>214 <div class="dot"></div>215 <div class="dot"></div>216 <div style="width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,0.4);"></div>217 </div>218 </div>219 <div class="status-right">220 <svg width="36" height="24" viewBox="0 0 36 24">221 <rect x="2" y="6" width="20" height="12" rx="2" fill="rgba(0,0,0,0.35)"></rect>222 <rect x="24" y="10" width="8" height="4" rx="1" fill="rgba(0,0,0,0.35)"></rect>223 </svg>224 <div class="icon-pill"></div>225 </div>226 </div>227 228 <div class="back-btn">229 <svg width="48" height="48" viewBox="0 0 24 24">230 <path d="M15 6 L9 12 L15 18" stroke="#1a2e2c" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>231 </svg>232 </div>233 234 <div class="search-row">235 <div class="search-bar">236 <svg width="48" height="48" viewBox="0 0 24 24">237 <circle cx="10" cy="10" r="7" stroke="#7b8d8b" stroke-width="2.5" fill="none"></circle>238 <line x1="16" y1="16" x2="22" y2="22" stroke="#7b8d8b" stroke-width="2.5" stroke-linecap="round"></line>239 </svg>240 <div class="search-input">quaker oats</div>241 <div class="scan-icon">242 <svg width="36" height="36" viewBox="0 0 24 24">243 <rect x="5" y="5" width="14" height="14" rx="2" stroke="#8a9b99" stroke-width="2" fill="none"></rect>244 <circle cx="12" cy="12" r="3" fill="#8a9b99"></circle>245 </svg>246 </div>247 </div>248 </div>249 </div>250 251 <!-- Main content -->252 <div class="content">253 <div class="line">254 <span style="color:#00a2a2; font-weight:700;">FREE delivery</span> <strong>Saturday, 9 December</strong> on orders dispatched by Amazon over ₹499. <a class="link" href="#">Details</a>255 </div>256 <div class="line">257 Or fastest delivery <strong>Tomorrow, 8 December.</strong> Order within <span style="color:#0f8a10; font-weight:700;">13 hrs 15 mins.</span> <a class="link" href="#">Details</a>258 </div>259 260 <div class="pin-row">261 <svg width="36" height="36" viewBox="0 0 24 24">262 <path d="M12 2 C8 2 5 5 5 9 C5 14 12 22 12 22 C12 22 19 14 19 9 C19 5 16 2 12 2 Z" class="icon-muted"></path>263 <circle cx="12" cy="9" r="3" fill="#777"></circle>264 </svg>265 <span>Delivering to Delhi 110001 - </span><a class="link" href="#">Update location</a>266 </div>267 268 <div class="line" style="margin-top:22px;">Use by: <strong>18 JAN 2024</strong></div>269 <div class="line">Available at a lower price from <a class="link" href="#">other sellers</a> that may not offer free Prime shipping.</div>270 271 <div class="instock">In stock</div>272 273 <div class="qty">274 <div>Qty: 1</div>275 <svg width="28" height="28" viewBox="0 0 24 24">276 <path d="M6 9 L12 15 L18 9" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>277 </svg>278 </div>279 280 <div class="cta add">Add to Cart</div>281 <div class="cta buy">Buy Now</div>282 283 <div class="secure-row">284 <div class="small-icon">285 <svg width="32" height="32" viewBox="0 0 24 24">286 <rect x="5" y="10" width="14" height="10" rx="2" stroke="#999" stroke-width="2" fill="none"></rect>287 <path d="M8 10 V7 C8 5 10 3.5 12 3.5 C14 3.5 16 5 16 7 V10" stroke="#999" stroke-width="2" fill="none"></path>288 </svg>289 </div>290 <a class="link" href="#">Secure transaction</a>291 </div>292 293 <div class="seller">294 Sold by <a class="link" href="#">Amazon Retail</a> and <a class="link" href="#">Fulfilled by Amazon</a>.295 </div>296 <div class="gift">Gift-wrap available.</div>297 298 <div class="subscribe-card" style="position: relative;">299 <div class="sub-header">300 <span>Subscribe & Save:</span>301 <span class="badge orange">5%</span>302 <span class="badge gray">10%</span>303 </div>304 <di