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 App Mock</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(#bfe8ea 0%, #e8faf9 26%, #ffffff 60%);14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 height: 86px;20 padding: 0 28px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #1b1b1b;25 font-size: 44px;26 letter-spacing: 1px;27 }28 .sys-icons { display: flex; align-items: center; gap: 18px; color: #1b1b1b; }29 .sys-icons span { font-size: 36px; opacity: .9; }30 31 /* Search */32 .search-wrap {33 padding: 14px 24px 10px;34 }35 .search-bar {36 height: 112px;37 background: #fff;38 border-radius: 24px;39 box-shadow: 0 2px 0 rgba(0,0,0,0.05);40 border: 1px solid #e5e5e5;41 display: flex;42 align-items: center;43 padding: 0 18px;44 gap: 18px;45 }46 .search-input {47 flex: 1;48 color: #666;49 font-size: 40px;50 }51 .camera-chip {52 width: 92px;53 height: 92px;54 border: 1px solid #e3e3e3;55 border-radius: 16px;56 display: flex; align-items: center; justify-content: center;57 background: #fafafa;58 }59 60 /* Location */61 .location {62 display: flex; align-items: center;63 gap: 16px;64 padding: 14px 28px;65 color: #2f2f2f;66 font-size: 36px;67 }68 .location .sub { color: #0f766e; font-weight: bold; }69 70 /* Category strip */71 .category-strip {72 display: flex;73 gap: 30px;74 padding: 18px 20px 10px;75 overflow: hidden;76 }77 .cat {78 width: 150px;79 text-align: center;80 color: #222;81 }82 .cat .thumb {83 width: 132px; height: 132px;84 margin: 0 auto 10px;85 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px;86 display: flex; align-items: center; justify-content: center;87 font-size: 22px; color: #666;88 }89 .cat span { font-size: 32px; }90 91 /* Banner */92 .banner {93 margin: 8px 18px 6px;94 height: 460px;95 border-radius: 20px;96 background: linear-gradient(135deg, #ff6d90, #ff6c8c 45%, #ff506f);97 position: relative;98 padding: 36px;99 color: #fff;100 overflow: hidden;101 }102 .banner h3 { margin: 0 0 16px; font-size: 54px; font-weight: 800; }103 .banner p { margin: 0 0 24px; font-size: 40px; }104 .banner .img {105 position: absolute; right: 24px; bottom: 24px;106 width: 520px; height: 360px;107 background: #E0E0E0; border: 1px solid #BDBDBD;108 display: flex; align-items: center; justify-content: center;109 color: #333; font-size: 30px; border-radius: 16px;110 }111 .badge-row { display: flex; gap: 18px; }112 .badge {113 background: rgba(255,255,255,0.92);114 color: #d00039;115 padding: 10px 18px;116 border-radius: 999px;117 font-weight: 700;118 font-size: 28px;119 }120 121 .dots {122 display: flex; gap: 18px; justify-content: center; align-items: center;123 padding: 16px 0 8px;124 }125 .dot { width: 22px; height: 22px; border-radius: 50%; background: #2aa4a4; opacity: .4; }126 .dot.active { opacity: 1; }127 128 /* Quick actions grid */129 .card-grid {130 display: grid;131 grid-template-columns: 1fr 1fr;132 gap: 22px;133 padding: 10px 18px;134 }135 .qcard {136 background: #fff;137 border: 1px solid #e8e8e8;138 border-radius: 22px;139 height: 210px;140 display: flex; flex-direction: column; align-items: center; justify-content: center;141 gap: 18px;142 }143 .qicon {144 width: 92px; height: 92px; border-radius: 50%;145 border: 1px solid #e4e4e4; background: #f7f7f7;146 display: flex; align-items: center; justify-content: center;147 }148 .qcard span { font-size: 34px; color: #2a2a2a; }149 150 /* Continue browsing & Browse similar */151 .section-pair {152 display: grid; grid-template-columns: 1fr 1fr; gap: 22px;153 padding: 8px 18px 8px;154 }155 .tile {156 background: #fff; border: 1px solid #e8e8e8; border-radius: 22px;157 padding: 20px; height: 240px; display: flex; flex-direction: column;158 }159 .tile h4 { margin: 0 0 10px; font-size: 40px; color: #222; }160 .tile .img {161 margin-top: auto;162 height: 150px; border-radius: 14px;163 background: #E0E0E0; border: 1px solid #BDBDBD;164 display: flex; align-items: center; justify-content: center; color: #666; font-size: 28px;165 }166 167 /* Feature badges row */168 .feature-row {169 display: flex; justify-content: space-around; align-items: center;170 padding: 14px 24px;171 }172 .feature {173 display: flex; align-items: center; gap: 16px;174 font-size: 32px; color: #333;175 }176 .feature .circle {177 width: 60px; height: 60px; border-radius: 50%; background: #ffd480;178 border: 2px solid #e6a400;179 display: inline-flex; align-items: center; justify-content: center; color: #7a4b00; font-weight: 800;180 }181 182 .red-banner {183 margin: 10px 18px 170px;184 height: 140px;185 border-radius: 16px;186 background: #b21b25;187 border: 1px solid #9b0f18;188 color: #fff;189 display: flex; align-items: center; justify-content: center;190 font-size: 42px; font-weight: 700;191 }192 193 /* Bottom Nav */194 .bottom-nav {195 position: absolute; bottom: 0; left: 0; right: 0;196 height: 140px; background: #fff; border-top: 1px solid #e6e6e6;197 display: flex; justify-content: space-around; align-items: center;198 }199 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #444; font-size: 30px; }200 .nav-item.active { color: #0f766e; font-weight: 700; }201 202 /* Simple icons */203 svg { display: block; }204 .ic { width: 48px; height: 48px; }205 .ic-lg { width: 56px; height: 56px; }206</style>207</head>208<body>209<div id="render-target">210 211 <!-- Status bar -->212 <div class="status-bar">213 <div class="time">9:36</div>214 <div class="sys-icons">215 <span title="silent">⏽</span>216 <!-- Simple wifi icon -->217 <svg class="ic" viewBox="0 0 24 24">218 <path fill="#222" d="M12 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-6-5 1.4 1.4A7 7 0 0 1 18.6 14L20 12.6A9 9 0 0 0 6 13Zm-3-4 1.4 1.4A12 12 0 0 1 19.6 9L21 7.6A14 14 0 0 0 3 9Z"/>219 </svg>220 <!-- Battery -->221 <svg class="ic-lg" viewBox="0 0 24 24">222 <rect x="1" y="6" width="18" height="12" rx="2" ry="2" fill="#fff" stroke="#222" />223 <rect x="3" y="8" width="14" height="8" fill="#10b981"/>224 <rect x="19" y="10" width="3" height="6" rx="1" fill="#222"/>225 </svg>226 <span style="font-size:36px">100%</span>227 </div>228 </div>229 230 <!-- Search -->231 <div class="search-wrap">232 <div class="search-bar">233 <!-- search icon -->234 <svg class="ic-lg" viewBox="0 0 24 24">235 <path fill="#666" d="M10 2a8 8 0 1 0 5.3 14l4.5 4.5 1.4-1.4-4.5-4.5A8 8 0 0 0 10 2Zm0 2a6 6 0 1 1 0 12A6 6 0 0 1 10 4Z"/>236 </svg>237 <div class="search-input">Search Amazon.in</div>238 <div class="camera-chip">239 <svg class="ic" viewBox="0 0 24 24">240 <path fill="#444" d="M9 4 7.5 6H5a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3h-2.5L15 4H9Zm3 4.5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/>241 </svg>242 </div>243 </div>244 </div>245 246 <!-- Location -->247 <div class="location">248 <svg class="ic" viewBox="0 0 24 24">249 <path fill="#0f766e" 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"/>250 </svg>251 <div>Delivering to <strong>Delhi 110001</strong> - <span class="sub">Update location</span></div>252 <svg class="ic" viewBox="0 0 24 24" style="margin-left:8px">253 <path fill="#0f766e" d="M7 10l5 5 5-5H7z"/>254 </svg>255 </div>256 257 <!-- Categories -->258 <div class="category-strip">259 <div class="cat">260 <div class="thumb">[IMG: Mobiles]</div>261 <span>Mobiles</span>262 </div>263 <div class="cat">264 <div class="thumb">[IMG: Electronics]</div>265 <span>Electronics</span>266 </div>267 <div class="cat">268 <div class="thumb">[IMG: Fashion]</div>269 <span>Fashion</span>270 </div>271 <div class="cat">272 <div class="thumb">[IMG: Home]</div>273 <span>Home</span>274 </div>275 <div class="cat">276 <div class="thumb">[IMG: miniTV]</div>277 <span>miniTV</span>278 </div>279 <div class="cat">280 <div class="thumb">[IMG: Beauty]</div>281 <span>Beauty</span>282 </div>283 </div>284 285 <!-- Pink banner -->286 <div class="banner">287 <h3>Mobile accessories</h3>288 <p>Up to 70% off</p>289 <div class="badge-row">290 <div class="badge">EASY RETURNS</div>291 <div class="badge">PAY ON DELIVERY</div>292 </div>293 <div class="img">[IMG: Power bank & earbuds]</div>294 </div>295 296 <div class="dots">297 <div class="dot active"></div>298 <div class="dot"></div>299 <div class="dot"></div>300 <div class="dot"></div>301 <div class="dot"></div>302 <div class="dot"></div>303 </div>304 305 <!-- Quick actions -->306 <div class="card-grid">307 <div class="qcard">308 <div class="qicon">309 <svg class="ic" viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 2 4 6v6c0 5 4 9 8 10 4-1 8-5 8-10V6l-8-4Z"/></svg>310 </div>311 <span>Amazon Pay</span>312 </div>313 <div class="qcard">314 <div class="qicon">315 <svg class="ic" viewBox="0 0 24 24"><path fill="#0ea5e9" d="M4 4h16v6H4z"/><path fill="#0284c7" d="M2 13h20v7H2z"/></svg>316 </div>317 <span>Send Money</span>318 </div>319 <div class="qcard">320 <div class="qicon">321 <svg class="ic" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" fill="#16a34a"/><path fill="#fff" d="M7 8h10v2H7zm0 4h6v2H7z"/></svg>322 </div>323 <span>Scan any QR</span>324 </div>325 <div class="qcard">326 <div class="qicon">327 <svg class="ic" viewBox="0 0 24 24"><path fill="#8b5cf6" d="M3 5h18v4H3zM5 11h14v8H5z"/></svg>328 </div>329 <span>Pay Bills</span>330 </div>331 </div>332 333 <!-- Continue & Browse tiles -->334 <div class="section-pair">335 <div class="tile">336 <h4>Continue browsing</h4>337 <div class="img">[IMG: Laptop product]</div>338 </div>339 <div class="tile">340 <h4>Browse similar</h4>341 <div class="img">[IMG: Pair of watches]</div>342 </div>343 </div>344 345 <!-- Feature badges -->346 <div class="feature-row">347 <div class="feature"><span class="circle">✓</span> <div>WIDE SELECTION</div></div>348 <div class="feature"><span class="circle">₹</span> <div>PAY ON DELIVERY</div></div>349 <div class="feature"><span class="circle">↺</span> <div>EASY RETURNS</div></div>350 </div>351 352 <!-- Red banner -->353 <div class="red-banner">354 3 reasons to apply for a credit card355 </div>356 357 <!-- Bottom Navigation -->358 <div class="bottom-nav">359 <div class="nav-item active">360 <svg class="ic" viewBox="0 0 24 24"><path fill="#0f766e" d="M12 3 2 12h3v8h6v-6h2v6h6v-8h3z"/></svg>361 <div>Home</div>362 </div>363 <div class="nav-item">364 <svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#444"/><path fill="#444" d="M4 20c0-4 4-6 8-6s8 2 8 6H4z"/></svg>365 <div>You</div>366 </div>367 <div class="nav-item">368 <svg class="ic" viewBox="0 0 24 24"><path fill="#444" d="M4 4h16v6H4zM4 14h10v6H4z"/></svg>369 <div>More</div>370 </div>371 <div class="nav-item">372 <svg class="ic" viewBox="0 0 24 24"><path fill="#444" d="M7 7h14l-2 10H9L7 7Zm-2 0H3v2h2V7Zm4 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/></svg>373 <div>Cart</div>374 </div>375 <div class="nav-item">376 <svg class="ic" viewBox="0 0 24 24"><path fill="#444" d="M4 6h16v2H4zM4 11h16v2H4zM4 16h16v2H4z"/></svg>377 <div>Menu</div>378 </div>379 </div>380 381</div>382</body>383</html>