GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Amazon.in UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #fafafa;13 border-radius: 24px;14 box-shadow: 0 8px 24px rgba(0,0,0,0.15);15 }16 17 /* Top gradient area */18 .top-area {19 width: 100%;20 height: 260px;21 background: linear-gradient(180deg, #bfe7e2 0%, #a6ddd6 100%);22 position: relative;23 padding: 24px 32px;24 box-sizing: border-box;25 }26 27 .status-bar {28 height: 36px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 color: #2b2b2b;33 font-weight: 600;34 font-size: 26px;35 opacity: 0.85;36 margin-bottom: 16px;37 }38 .status-icons { display: flex; align-items: center; gap: 18px; }39 .dot-icon { width: 12px; height: 12px; background: #2b2b2b; border-radius: 50%; opacity: 0.6; }40 .battery {41 width: 32px; height: 16px; border: 2px solid #2b2b2b; border-radius: 4px; position: relative;42 }43 .battery::after { content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 8px; background: #2b2b2b; border-radius: 2px; }44 45 .search-bar {46 width: 1016px;47 height: 80px;48 border-radius: 16px;49 background: #fff;50 display: flex;51 align-items: center;52 box-shadow: 0 4px 10px rgba(0,0,0,0.08);53 padding: 0 22px;54 box-sizing: border-box;55 }56 57 .search-left {58 display: flex; align-items: center; gap: 18px;59 }60 .search-text {61 color: #2b2b2b;62 font-size: 30px;63 font-weight: 600;64 letter-spacing: 0.2px;65 }66 .search-right { margin-left: auto; display: flex; align-items: center; }67 .icon { width: 30px; height: 30px; }68 69 /* Location row */70 .location-row {71 margin-top: 18px;72 width: 1016px;73 height: 64px;74 background: rgba(255,255,255,0.55);75 border: 1px solid rgba(0,0,0,0.06);76 border-radius: 12px;77 display: flex; align-items: center;78 gap: 16px;79 padding: 0 18px;80 color: #2b2b2b;81 font-weight: 600;82 font-size: 28px;83 }84 .chev { margin-left: auto; width: 20px; height: 20px; }85 86 /* Category strip */87 .category-strip {88 width: 100%;89 height: 160px;90 background: #f5d987;91 display: flex;92 align-items: center;93 gap: 18px;94 padding: 18px 20px;95 box-sizing: border-box;96 }97 .cat {98 width: 200px;99 display: flex; flex-direction: column; align-items: center;100 text-align: center;101 color: #24313d;102 }103 .cat-circle {104 width: 92px; height: 92px; background: #fff8e6; border: 2px solid #e9c667; border-radius: 50%;105 display: flex; align-items: center; justify-content: center;106 }107 .cat label { margin-top: 12px; font-size: 26px; font-weight: 700; }108 109 /* Festival banner area */110 .festival-banner {111 width: 100%;112 height: 740px;113 background: radial-gradient(circle at 50% 20%, #ffd9ac 0%, #f8a969 35%, #f27b66 100%);114 position: relative;115 padding: 30px;116 box-sizing: border-box;117 }118 .festival-content {119 display: flex; gap: 24px; align-items: flex-start;120 }121 .festival-left {122 width: 500px; height: 620px;123 border: 1px solid #BDBDBD; background: #E0E0E0;124 display: flex; align-items: center; justify-content: center;125 color: #555; font-size: 34px; font-weight: 700; border-radius: 12px;126 }127 .festival-right {128 flex: 1; color: #3b2526;129 }130 .festival-title {131 font-size: 48px; font-weight: 900; color: #231c1c; margin-top: 18px;132 }133 .festival-sub { font-size: 30px; margin-top: 16px; font-weight: 700; }134 .festival-bullets { margin-top: 18px; font-size: 26px; line-height: 1.6; }135 .mini-icons { display: flex; gap: 18px; margin-top: 20px; }136 .small-pill {137 background: #fff3e6; border: 1px dashed rgba(0,0,0,0.15);138 padding: 10px 14px; border-radius: 10px; font-size: 24px; font-weight: 700; color: #4b2b26;139 }140 141 /* Cards row under banner */142 .cards-row {143 display: flex; gap: 30px; padding: 26px 30px; box-sizing: border-box; background: #fff;144 }145 .pay-card {146 width: 340px; height: 500px; background: #f8e196; border-radius: 16px;147 box-shadow: 0 6px 12px rgba(0,0,0,0.10);148 padding: 20px; box-sizing: border-box;149 }150 .pay-grid {151 margin-top: 12px;152 display: grid; grid-template-columns: 1fr 1fr; gap: 22px;153 }154 .pay-item {155 background: #fffaf0; border-radius: 16px; height: 200px;156 display: flex; flex-direction: column; align-items: center; justify-content: center;157 gap: 16px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);158 }159 .pay-label { font-size: 26px; font-weight: 800; color: #2b2b2b; text-align: center; }160 161 .keep-card {162 width: 360px; height: 500px; background: #fff; border-radius: 16px;163 border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 6px 12px rgba(0,0,0,0.08);164 padding: 18px; box-sizing: border-box;165 }166 .keep-title { font-size: 36px; font-weight: 900; color: #2b2b2b; margin-bottom: 16px; }167 .img-placeholder {168 width: 100%; height: 420px; background: #E0E0E0; border: 1px solid #BDBDBD;169 border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; font-weight: 700;170 }171 172 .spin-card {173 width: 290px; height: 500px; background: #fff7e8; border-radius: 16px;174 border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 6px 12px rgba(0,0,0,0.08);175 padding: 18px; box-sizing: border-box;176 }177 .spin-title { font-size: 34px; font-weight: 900; color: #2b2b2b; }178 .spin-img { margin-top: 18px; width: 100%; height: 380px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 10px; display:flex; align-items:center; justify-content:center; color:#757575; font-weight:700; }179 180 /* Whirlpool banner */181 .whirlpool-banner {182 width: 100%;183 height: 420px;184 background: #ffffff;185 padding: 26px 30px;186 box-sizing: border-box;187 }188 .whirlpool-img {189 width: 100%; height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD;190 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; font-weight: 800; border-radius: 12px;191 }192 193 /* Bottom navigation */194 .bottom-nav {195 position: absolute; left: 0; bottom: 0; width: 100%; height: 140px;196 background: #fff;197 border-top: 1px solid rgba(0,0,0,0.12);198 display: flex; align-items: center; justify-content: space-around;199 }200 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #2b2b2b; }201 .nav-item span { font-size: 26px; font-weight: 800; }202 .nav-icon { width: 44px; height: 44px; }203 204 /* Utility */205 .section { width: 100%; }206</style>207</head>208<body>209<div id="render-target">210 211 <div class="top-area section">212 <div class="status-bar">213 <div>10:33 16°</div>214 <div class="status-icons">215 <div class="dot-icon"></div>216 <div class="dot-icon"></div>217 <svg class="icon" viewBox="0 0 24 24">218 <path d="M4 10h16v4H4z" fill="#2b2b2b"/>219 </svg>220 <div class="battery"></div>221 </div>222 </div>223 224 <div class="search-bar">225 <div class="search-left">226 <svg class="icon" viewBox="0 0 24 24">227 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>228 <line x1="15.5" y1="15.5" x2="21" y2="21" stroke="#333" stroke-width="2"/>229 </svg>230 <div class="search-text">Search Amazon.in</div>231 </div>232 <div class="search-right">233 <svg class="icon" viewBox="0 0 24 24">234 <rect x="3" y="4" width="18" height="14" rx="3" ry="3" fill="#333"/>235 <circle cx="12" cy="11" r="3" fill="#fff"/>236 </svg>237 </div>238 </div>239 240 <div class="location-row">241 <svg class="icon" viewBox="0 0 24 24">242 <path d="M12 2c-4.4 0-8 3.4-8 7.7 0 5.8 8 12.3 8 12.3s8-6.5 8-12.3C20 5.4 16.4 2 12 2zm0 10.3a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" fill="#1f4c57"/>243 </svg>244 <div>Select a location to see product availability</div>245 <svg class="chev" viewBox="0 0 24 24">246 <path d="M6 9l6 6 6-6" stroke="#1f4c57" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>247 </svg>248 </div>249 </div>250 251 <div class="category-strip section">252 <div class="cat">253 <div class="cat-circle">254 <svg class="icon" viewBox="0 0 24 24">255 <rect x="3" y="6" width="18" height="12" rx="2" fill="#4a4a4a"/>256 </svg>257 </div>258 <label>Electronics</label>259 </div>260 <div class="cat">261 <div class="cat-circle">262 <svg class="icon" viewBox="0 0 24 24">263 <rect x="7" y="3" width="10" height="18" rx="3" fill="#4a4a4a"/>264 </svg>265 </div>266 <label>Mobiles</label>267 </div>268 <div class="cat">269 <div class="cat-circle">270 <svg class="icon" viewBox="0 0 24 24">271 <rect x="5" y="8" width="14" height="10" fill="#4a4a4a"/>272 <rect x="9" y="4" width="6" height="4" fill="#777"/>273 </svg>274 </div>275 <label>Home</label>276 </div>277 <div class="cat">278 <div class="cat-circle">279 <svg class="icon" viewBox="0 0 24 24">280 <path d="M4 20h6V8H4v12zm10 0h6V4h-6v16z" fill="#4a4a4a"/>281 </svg>282 </div>283 <label>Fashion</label>284 </div>285 <div class="cat">286 <div class="cat-circle">287 <svg class="icon" viewBox="0 0 24 24">288 <rect x="4" y="6" width="16" height="12" rx="2" fill="#f06"/>289 <text x="12" y="16" font-size="10" text-anchor="middle" fill="#fff">TV</text>290 </svg>291 </div>292 <label>miniTV</label>293 </div>294 </div>295 296 <div class="festival-banner section">297 <div class="festival-content">298 <div class="festival-left">[IMG: Great Indian Festival banner]</div>299 <div class="festival-right">300 <div class="festival-title">Get 20% cashback</div>301 <div class="festival-sub">No minimum order value • Collect your offer now</div>302 <div class="mini-icons">303 <div class="small-pill">Free delivery</div>304 <div class="small-pill">Pay on delivery</div>305 <div class="small-pill">Easy returns</div>306 </div>307 <div class="festival-sub" style="margin-top:32px;">HOWZATT! Celebrate with the best deals of the year now</div>308 <div class="festival-bullets">309 • Instant Discounts with SBI Cards<br/>310 • Exciting offers across categories<br/>311 • Shop now and save more312 </div>313 </div>314 </div>315 </div>316 317 <div class="cards-row section">318 <div class="pay-card">319 <div style="font-size:34px; font-weight:900; color:#2b2b2b;">Amazon Pay</div>320 <div class="pay-grid">321 <div class="pay-item">322 <svg class="nav-icon" viewBox="0 0 24 24">323 <path d="M3 12h18v6H3z" fill="#333"/><path d="M3 6h10v4H3z" fill="#777"/>324 </svg>325 <div class="pay-label">Amazon Pay</div>326 </div>327 <div class="pay-item">328 <svg class="nav-icon" viewBox="0 0 24 24">329 <path d="M5 8h14v8H5z" fill="#333"/>330 <path d="M8 12h8" stroke="#fff" stroke-width="2"/>331 </svg>332 <div class="pay-label">Send Money</div>333 </div>334 <div class="pay-item">335 <svg class="nav-icon" viewBox="0 0 24 24">336 <rect x="4" y="4" width="16" height="16" rx="3" fill="#333"/>337 <path d="M8 8h8v8H8z" fill="#fff"/>338 </svg>339 <div class="pay-label">Scan any QR</div>340 </div>341 <div class="pay-item">342 <svg class="nav-icon" viewBox="0 0 24 24">343 <path d="M5 5h14v14H5z" fill="#333"/>344 <path d="M7 9h10M7 13h10M7 17h6" stroke="#fff" stroke-width="2"/>345 </svg>346 <div class="pay-label">Pay Bills</div>347 </div>348 </div>349 </div>350 351 <div class="keep-card">352 <div class="keep-title">Keep shopping for</div>353 <div class="img-placeholder">[IMG: Formal shirt product]</div>354 </div>355 356 <div class="spin-card">357 <div class="spin-title">Spin & win</div>358 <div class="spin-img">[IMG: Wheel of rewards]</div>359 </div>360 </div>361 362 <div class="whirlpool-banner section">363 <div class="whirlpool-img">[IMG: Whirlpool refrigerators promotional banner]</div>364 </div>365 366 <div class="bottom-nav">367 <div class="nav-item">368 <svg class="nav-icon" viewBox="0 0 24 24">369 <path d="M12 3l9 7v11H3V10l9-7z" fill="#333"/>370 </svg>371 <span>Home</span>372 </div>373 <div class="nav-item">374 <svg class="nav-icon" viewBox="0 0 24 24">375 <circle cx="12" cy="8" r="4" fill="#333"/>376 <path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="#333"/>377 </svg>378 <span>You</span>379 </div>380 <div class="nav-item">381 <svg class="nav-icon" viewBox="0 0 24 24">382 <circle cx="5" cy="12" r="2" fill="#333"/>383 <circle cx="12" cy="12" r="2" fill="#333"/>384 <circle cx="19" cy="12" r="2" fill="#333"/>385 </svg>386 <span>More</span>387 </div>388 <div class="nav-item">389 <svg class="nav-icon" viewBox="0 0 24 24">390 <path d="M6 6h15l-2 10H7L6 6z" fill="#333"/>391 <circle cx="9" cy="20" r="2" fill="#333"/>392 <circle cx="18" cy="20" r="2" fill="#333"/>393 </svg>394 <span>Cart</span>395 </div>396 <div class="nav-item">397 <svg class="nav-icon" viewBox="0 0 24 24">398 <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" fill="#333"/>399 </svg>400 <span>Menu</span>401 </div>402 </div>403 404</div>405</body>406</html>