GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Amazon UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: linear-gradient(180deg, #bfe6e2 0%, #cde9df 30%, #f3e6c4 100%);13 }14 15 /* Top status bar */16 .status-bar {17 height: 84px;18 padding: 0 30px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #2b2b2b;23 font-weight: 600;24 font-size: 34px;25 }26 .status-icons { display: flex; gap: 28px; align-items: center; }27 .icon-dot { width: 10px; height: 10px; background: #2b2b2b; border-radius: 50%; }28 29 /* Search bar */30 .search-container {31 padding: 20px 30px 10px;32 }33 .search-bar {34 background: #ffffff;35 height: 110px;36 border-radius: 22px;37 box-shadow: 0 4px 10px rgba(0,0,0,0.08);38 display: flex;39 align-items: center;40 padding: 0 26px;41 gap: 24px;42 }43 .search-input {44 flex: 1;45 font-size: 42px;46 color: #1f2428;47 }48 .search-icon, .qr-icon { width: 56px; height: 56px; }49 .search-icon svg, .qr-icon svg { width: 100%; height: 100%; }50 51 /* Location row */52 .location-row {53 margin: 12px 30px 0;54 background: rgba(255,255,255,0.65);55 border-radius: 16px;56 padding: 20px 24px;57 display: flex;58 align-items: center;59 gap: 16px;60 color: #1f2428;61 font-size: 34px;62 }63 .chevron { width: 20px; height: 20px; border-top: 3px solid #333; border-left: 3px solid #333; transform: rotate(-135deg); margin-left: 10px; }64 .pin-icon { width: 40px; height: 40px; }65 66 /* Categories */67 .categories {68 display: flex;69 gap: 22px;70 padding: 16px 20px 12px;71 overflow: hidden;72 }73 .cat-item {74 width: 150px;75 text-align: center;76 }77 .cat-icon {78 width: 90px; height: 90px;79 background: #f4f4f4; border: 2px solid #d0d0d0; border-radius: 18px;80 margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;81 color: #757575; font-size: 26px;82 }83 .cat-label { font-size: 28px; color: #2a2a2a; }84 85 /* Big banner */86 .banner {87 margin: 10px 0;88 background: #f6e1ac;89 height: 740px;90 position: relative;91 }92 .banner-content {93 position: absolute; left: 40px; top: 80px; width: 560px;94 color: #1b1b1b;95 }96 .banner-title { font-size: 72px; font-weight: 800; letter-spacing: 1px; }97 .price { font-size: 68px; font-weight: 800; margin-top: -8px; }98 .banner-sub { font-size: 38px; margin-top: 22px; line-height: 1.3; }99 .banner-img {100 position: absolute; right: 40px; top: 60px; width: 430px; height: 620px;101 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575;102 }103 104 .dots {105 display: flex; gap: 20px; align-items: center; justify-content: center;106 padding: 26px 0 16px;107 }108 .dot {109 width: 22px; height: 22px; border-radius: 50%; background: #cfd8dc; border: 2px solid #b0bec5;110 }111 .dot.active { background: #2aa6a0; border-color: #2aa6a0; }112 113 /* Cards row (3 columns) */114 .cards-row {115 display: flex; gap: 24px;116 padding: 0 20px;117 }118 .card {119 background: #ffffff; border-radius: 18px; box-shadow: 0 6px 16px rgba(0,0,0,0.06);120 width: 340px; min-height: 520px; padding: 22px;121 }122 .card h3 { font-size: 40px; margin: 0 0 22px; color: #232f3e; }123 .grid-quick {124 display: grid; grid-template-columns: 1fr 1fr; gap: 26px;125 margin-top: 10px;126 }127 .quick-item { display: flex; align-items: center; gap: 16px; }128 .quick-icon {129 width: 80px; height: 80px; border-radius: 50%; background: #f4f4f4; border: 2px solid #dddddd;130 display: flex; align-items: center; justify-content: center;131 }132 .quick-item span { font-size: 30px; color: #333; }133 134 .product-img {135 width: 100%; height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD;136 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;137 border-radius: 12px;138 }139 140 /* Feature badges row */141 .features {142 display: flex; gap: 24px; align-items: center; justify-content: center;143 padding: 30px 20px;144 }145 .feature {146 background: #ffffff; border-radius: 18px; box-shadow: 0 6px 16px rgba(0,0,0,0.06);147 width: 330px; padding: 24px; display: flex; align-items: center; gap: 18px;148 }149 .badge {150 width: 84px; height: 84px; border-radius: 50%; background: #f8b54c; display: flex; align-items: center; justify-content: center;151 }152 .feature span { font-size: 34px; color: #333; font-weight: 700; }153 154 /* Movie/banner strip */155 .strip-banner {156 margin: 20px; height: 330px; border-radius: 16px; background: #E0E0E0; border: 1px solid #BDBDBD;157 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;158 overflow: hidden;159 }160 161 /* Bottom navigation */162 .bottom-nav {163 position: absolute; bottom: 0; left: 0; right: 0;164 background: #ffffff; height: 150px; border-top: 1px solid #e0e0e0;165 display: flex; align-items: center; justify-content: space-around;166 }167 .nav-item { display: flex; flex-direction: column; align-items: center; color: #1f2428; }168 .nav-item svg { width: 64px; height: 64px; }169 .nav-item span { margin-top: 8px; font-size: 30px; }170 .nav-item.active span { color: #2aa6a0; font-weight: 700; }171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Status Bar -->177 <div class="status-bar">178 <div>10:03</div>179 <div class="status-icons">180 <div class="icon-dot"></div>181 <div class="icon-dot"></div>182 <div class="icon-dot"></div>183 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M3 8h18v8H3z" fill="#333"/></svg>184 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M7 2h10v20H7z" fill="#333"/></svg>185 </div>186 </div>187 188 <!-- Search -->189 <div class="search-container">190 <div class="search-bar">191 <div class="search-icon">192 <svg viewBox="0 0 24 24">193 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"></circle>194 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#333" stroke-width="2"></line>195 </svg>196 </div>197 <div class="search-input">iphone</div>198 <div class="qr-icon">199 <svg viewBox="0 0 24 24">200 <rect x="3" y="3" width="7" height="7" stroke="#333" stroke-width="2" fill="none"></rect>201 <rect x="14" y="3" width="7" height="7" stroke="#333" stroke-width="2" fill="none"></rect>202 <rect x="3" y="14" width="7" height="7" stroke="#333" stroke-width="2" fill="none"></rect>203 <path d="M14 14h7v7h-7v-7m4 0v7" stroke="#333" stroke-width="2" fill="none"></path>204 </svg>205 </div>206 </div>207 </div>208 209 <!-- Location Row -->210 <div class="location-row">211 <div class="pin-icon">212 <svg viewBox="0 0 24 24">213 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#333"/>214 </svg>215 </div>216 <div>Delivering to Delhi 110001 - Update location</div>217 <div class="chevron"></div>218 </div>219 220 <!-- Categories -->221 <div class="categories">222 <div class="cat-item">223 <div class="cat-icon">IMG</div>224 <div class="cat-label">Beauty</div>225 </div>226 <div class="cat-item">227 <div class="cat-icon">%</div>228 <div class="cat-label">Deals</div>229 </div>230 <div class="cat-item">231 <div class="cat-icon">Fresh</div>232 <div class="cat-label">Fresh</div>233 </div>234 <div class="cat-item">235 <div class="cat-icon">Books</div>236 <div class="cat-label">Books, Toys</div>237 </div>238 <div class="cat-item">239 <div class="cat-icon">IMG</div>240 <div class="cat-label">Appliances</div>241 </div>242 <div class="cat-item">243 <div class="cat-icon">IMG</div>244 <div class="cat-label">Essentials</div>245 </div>246 </div>247 248 <!-- Big Banner -->249 <div class="banner">250 <div class="banner-content">251 <div class="banner-title">STARTING</div>252 <div class="price">₹199</div>253 <div class="banner-sub">Shop your favourites in clothing, beauty & more</div>254 <div style="display:flex; gap:20px; margin-top:28px;">255 <div style="background:#fff; border-radius:12px; padding:10px 18px; font-size:28px; box-shadow:0 2px 6px rgba(0,0,0,0.1);">TOP BRANDS</div>256 <div style="background:#fff; border-radius:12px; padding:10px 18px; font-size:28px; box-shadow:0 2px 6px rgba(0,0,0,0.1);">LATEST TRENDS</div>257 </div>258 <div style="margin-top:30px; background:#fff; display:inline-block; border-radius:10px; padding:12px 16px; font-size:26px;">10% Instant Discount* on Debit Cards</div>259 </div>260 <div class="banner-img">[IMG: Clothing & Beauty Promo]</div>261 </div>262 263 <div class="dots">264 <div class="dot"></div>265 <div class="dot active"></div>266 <div class="dot"></div>267 <div class="dot"></div>268 <div class="dot"></div>269 <div class="dot"></div>270 <div class="dot"></div>271 <div class="dot"></div>272 </div>273 274 <!-- Cards -->275 <div class="cards-row">276 <!-- Left Card: Amazon Pay Quick Actions -->277 <div class="card">278 <h3>Amazon Pay</h3>279 <div class="grid-quick">280 <div class="quick-item">281 <div class="quick-icon">282 <svg viewBox="0 0 24 24">283 <circle cx="12" cy="12" r="9" stroke="#666" stroke-width="2" fill="none"></circle>284 <path d="M12 7v10M8 11h8" stroke="#666" stroke-width="2"></path>285 </svg>286 </div>287 <span>Amazon Pay</span>288 </div>289 <div class="quick-item">290 <div class="quick-icon">291 <svg viewBox="0 0 24 24">292 <path d="M4 12l8-8 8 8-3 0v8H7v-8z" fill="#666"></path>293 </svg>294 </div>295 <span>Send Money</span>296 </div>297 <div class="quick-item">298 <div class="quick-icon">299 <svg viewBox="0 0 24 24">300 <rect x="4" y="4" width="6" height="6" stroke="#666" stroke-width="2" fill="none"></rect>301 <rect x="14" y="4" width="6" height="6" stroke="#666" stroke-width="2" fill="none"></rect>302 <rect x="4" y="14" width="6" height="6" stroke="#666" stroke-width="2" fill="none"></rect>303 <rect x="14" y="14" width="6" height="6" stroke="#666" stroke-width="2" fill="none"></rect>304 </svg>305 </div>306 <span>Scan any QR</span>307 </div>308 <div class="quick-item">309 <div class="quick-icon">310 <svg viewBox="0 0 24 24">311 <rect x="3" y="5" width="18" height="14" stroke="#666" stroke-width="2" fill="none"></rect>312 <path d="M3 10h18" stroke="#666" stroke-width="2"></path>313 </svg>314 </div>315 <span>Pay Bills</span>316 </div>317 </div>318 </div>319 320 <!-- Middle Card: Keep shopping for -->321 <div class="card">322 <h3>Keep shopping for</h3>323 <div class="product-img">[IMG: Metal Door Handles]</div>324 </div>325 326 <!-- Right Card: Keep browsing -->327 <div class="card">328 <h3>Keep browsing</h3>329 <div class="product-img">[IMG: Plumbing Parts]</div>330 </div>331 </div>332 333 <!-- Features Row -->334 <div class="features">335 <div class="feature">336 <div class="badge">337 <svg viewBox="0 0 24 24">338 <path d="M3 6h18v12H3z" fill="#fff"></path>339 <path d="M3 10h18" stroke="#f8b54c" stroke-width="2"></path>340 </svg>341 </div>342 <span>WIDE SELECTION</span>343 </div>344 <div class="feature">345 <div class="badge">346 <svg viewBox="0 0 24 24">347 <path d="M4 19h16v2H4zM7 7h10l-1 9H8z" fill="#fff"></path>348 </svg>349 </div>350 <span>PAY ON DELIVERY</span>351 </div>352 <div class="feature">353 <div class="badge">354 <svg viewBox="0 0 24 24">355 <path d="M6 6h12v12H6z" fill="#fff"></path>356 <path d="M9 10l3 3 5-5" stroke="#f8b54c" stroke-width="2" fill="none"></path>357 </svg>358 </div>359 <span>EASY RETURNS</span>360 </div>361 </div>362 363 <!-- Movie strip banner -->364 <div class="strip-banner">[IMG: Movie/Series Promo Strip]</div>365 366 <!-- Bottom navigation -->367 <div class="bottom-nav">368 <div class="nav-item active">369 <svg viewBox="0 0 24 24"><path d="M12 3l9 8v10H3V11l9-8z" fill="#2aa6a0"/></svg>370 <span>Home</span>371 </div>372 <div class="nav-item">373 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#333"></circle><path d="M4 22c0-5 16-5 16 0" stroke="#333" stroke-width="2" fill="none"></path></svg>374 <span>You</span>375 </div>376 <div class="nav-item">377 <svg viewBox="0 0 24 24"><path d="M4 4h16v6H4zM4 12h16v8H4z" fill="#333"/></svg>378 <span>More</span>379 </div>380 <div class="nav-item">381 <svg viewBox="0 0 24 24"><path d="M6 6h12l-1 12H7L6 6zM9 6V4h6v2" stroke="#333" stroke-width="2" fill="none"></path></svg>382 <span>Cart</span>383 </div>384 <div class="nav-item">385 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#333" stroke-width="2"></path></svg>386 <span>Menu</span>387 </div>388 </div>389 390</div>391</body>392</html>