GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="utf-8">4<title>Amazon Mobile UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background: transparent; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;15 color: #222;16 }17 18 /* Header gradient area */19 .header {20 width: 100%;21 background: linear-gradient(180deg, #bfe7e5 0%, #cbe9ea 60%, #eaf4f5 100%);22 padding: 20px 24px 12px 24px;23 box-sizing: border-box;24 }25 .statusbar {26 height: 50px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #2b2b2b;31 font-size: 30px;32 opacity: 0.9;33 margin-bottom: 10px;34 }35 .status-icons {36 display: flex;37 gap: 16px;38 align-items: center;39 }40 .status-icons svg { width: 32px; height: 32px; }41 42 .search-bar {43 height: 120px;44 border-radius: 32px;45 background: #fff;46 border: 1px solid #dfe6ea;47 display: flex;48 align-items: center;49 padding: 0 24px;50 box-sizing: border-box;51 gap: 18px;52 }53 .search-input {54 flex: 1;55 font-size: 36px;56 color: #5f6b75;57 }58 .search-actions {59 display: flex;60 gap: 18px;61 align-items: center;62 }63 .search-actions svg { width: 44px; height: 44px; fill: none; stroke: #5f6b75; stroke-width: 3; }64 65 .delivery-row {66 display: flex;67 align-items: center;68 gap: 16px;69 font-size: 34px;70 color: #1f2a33;71 margin-top: 16px;72 margin-bottom: 6px;73 }74 .delivery-row svg { width: 34px; height: 34px; fill: #2b4a56; }75 76 .categories {77 display: flex;78 align-items: center;79 justify-content: space-between;80 padding: 16px 0 22px 0;81 }82 .cat {83 width: 160px;84 text-align: center;85 color: #1f2a33;86 font-size: 28px;87 }88 .cat-icon {89 width: 94px;90 height: 78px;91 border-radius: 18px;92 background: #f3f7f9;93 border: 1px solid #dfe6ea;94 margin: 0 auto 10px auto;95 display: flex;96 align-items: center;97 justify-content: center;98 }99 .cat-icon svg { width: 48px; height: 48px; stroke: #647582; stroke-width: 2.5; fill: none; }100 101 /* Content below header */102 .content { padding: 24px; }103 104 .hero {105 width: 100%;106 height: 600px;107 background: #E0E0E0;108 border: 1px solid #BDBDBD;109 border-radius: 18px;110 display: flex;111 align-items: center;112 justify-content: center;113 color: #757575;114 font-size: 40px;115 text-align: center;116 }117 118 .dots {119 display: flex;120 gap: 16px;121 justify-content: center;122 margin-top: 22px;123 margin-bottom: 16px;124 }125 .dot {126 width: 18px;127 height: 18px;128 border-radius: 50%;129 background: #d7dde1;130 border: 1px solid #b9c2c7;131 }132 .dot.active { background: #4d9fb5; border-color: #4d9fb5; }133 134 .cards {135 display: flex;136 gap: 26px;137 margin-top: 8px;138 }139 .card {140 flex: 1;141 min-width: 0;142 background: #fff;143 border: 1px solid #e2e7ea;144 border-radius: 18px;145 box-shadow: 0 2px 4px rgba(0,0,0,0.05);146 padding: 20px;147 box-sizing: border-box;148 }149 .card h3 {150 margin: 0 0 16px 0;151 font-size: 36px;152 line-height: 1.1;153 color: #20262c;154 }155 156 /* Amazon Pay quick actions card */157 .quick-grid {158 display: grid;159 grid-template-columns: 1fr 1fr;160 gap: 22px;161 margin-top: 4px;162 }163 .quick-item {164 display: flex;165 align-items: center;166 gap: 18px;167 padding: 18px;168 border-radius: 16px;169 background: #f7fafb;170 border: 1px solid #e6ecef;171 }172 .quick-icon {173 width: 84px;174 height: 84px;175 border-radius: 50%;176 background: #fff;177 border: 1px solid #dfe6ea;178 display: flex;179 align-items: center;180 justify-content: center;181 }182 .quick-icon svg { width: 42px; height: 42px; stroke: #6b7a86; stroke-width: 2.5; fill: none; }183 .quick-label {184 font-size: 30px;185 color: #2b343c;186 }187 188 /* Product suggestion cards */189 .product-thumb {190 width: 100%;191 height: 360px;192 background: #E0E0E0;193 border: 1px solid #BDBDBD;194 border-radius: 14px;195 display: flex;196 align-items: center;197 justify-content: center;198 color: #757575;199 font-size: 32px;200 }201 .card-subtext {202 font-size: 30px;203 color: #47545e;204 margin-top: 10px;205 }206 207 /* Feature badges row */208 .features {209 display: flex;210 justify-content: space-between;211 padding: 26px 12px;212 margin-top: 12px;213 }214 .feature {215 width: 31%;216 background: #fff;217 border: 1px dashed #e1e7ea;218 border-radius: 16px;219 padding: 18px 16px;220 display: flex;221 align-items: center;222 gap: 16px;223 box-sizing: border-box;224 }225 .feature-icon {226 width: 70px;227 height: 70px;228 border-radius: 50%;229 background: #ffe8c2;230 display: flex;231 align-items: center;232 justify-content: center;233 border: 1px solid #f5d7a4;234 }235 .feature-icon.orange { background: #ffe8c2; border-color: #f5d7a4; }236 .feature-icon.green { background: #dff7e5; border-color: #b7e7c3; }237 .feature-icon.blue { background: #e2f1ff; border-color: #c7e2fb; }238 .feature-text {239 font-size: 30px;240 color: #2b343c;241 line-height: 1.2;242 }243 244 /* Bottom navigation */245 .bottom-nav {246 position: absolute;247 left: 0;248 right: 0;249 bottom: 90px;250 height: 160px;251 border-top: 1px solid #e2e7ea;252 background: #ffffff;253 display: flex;254 justify-content: space-around;255 align-items: center;256 }257 .nav-item {258 width: 19%;259 display: flex;260 flex-direction: column;261 align-items: center;262 gap: 10px;263 color: #1f2a33;264 font-size: 30px;265 }266 .nav-item svg { width: 48px; height: 48px; stroke: #1f2a33; stroke-width: 2.5; fill: none; }267 268 .home-indicator {269 position: absolute;270 bottom: 24px;271 left: 50%;272 transform: translateX(-50%);273 width: 380px;274 height: 12px;275 background: #cfcfcf;276 border-radius: 8px;277 opacity: 0.8;278 }279</style>280</head>281<body>282<div id="render-target">283 284 <!-- Header: gradient area -->285 <div class="header">286 <div class="statusbar">287 <div>2:12</div>288 <div class="status-icons">289 <!-- simple circle icons to mimic status items -->290 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#8ea7af"/></svg>291 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#8ea7af"/></svg>292 <svg viewBox="0 0 24 24"><path d="M3 8h18M5 12h14M7 16h10" stroke="#8ea7af" stroke-width="2"/></svg>293 </div>294 </div>295 296 <div class="search-bar">297 <!-- search icon -->298 <svg viewBox="0 0 24 24" style="width:44px;height:44px; stroke:#647582; fill:none; stroke-width:3;">299 <circle cx="11" cy="11" r="7"></circle>300 <path d="M16 16l6 6"></path>301 </svg>302 <div class="search-input">Search Amazon.in</div>303 <div class="search-actions">304 <!-- camera icon -->305 <svg viewBox="0 0 24 24">306 <rect x="3" y="6" width="18" height="12" rx="2"></rect>307 <circle cx="12" cy="12" r="3.5"></circle>308 </svg>309 <!-- mic icon -->310 <svg viewBox="0 0 24 24">311 <rect x="9" y="4" width="6" height="10" rx="3"></rect>312 <path d="M5 11v1a7 7 0 0 0 14 0v-1M12 18v4"></path>313 </svg>314 </div>315 </div>316 317 <div class="delivery-row">318 <!-- location icon -->319 <svg viewBox="0 0 24 24">320 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13s-7-8-7-13a7 7 0 0 1 7-7z"></path>321 <circle cx="12" cy="9" r="3" fill="#fff"></circle>322 </svg>323 <div>Deliver to Delhi 110025</div>324 <svg viewBox="0 0 24 24" style="width:30px;height:30px; fill:none; stroke:#2b4a56; stroke-width:2;">325 <path d="M8 10l4 4 4-4"></path>326 </svg>327 </div>328 329 <div class="categories">330 <div class="cat">331 <div class="cat-icon">332 <svg viewBox="0 0 24 24"><path d="M3 18h18M6 18V6h12v12" /><path d="M9 6l3-3 3 3" /></svg>333 </div>334 Prime335 </div>336 <div class="cat">337 <div class="cat-icon">338 <svg viewBox="0 0 24 24"><rect x="6" y="3" width="12" height="18" rx="2"/><circle cx="12" cy="17" r="1.5"/></svg>339 </div>340 Mobiles341 </div>342 <div class="cat">343 <div class="cat-icon">344 <svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="3"/><path d="M5 21c2-5 12-5 14 0"/></svg>345 </div>346 Fashion347 </div>348 <div class="cat">349 <div class="cat-icon">350 <svg viewBox="0 0 24 24"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5"/></svg>351 </div>352 FunZone353 </div>354 <div class="cat">355 <div class="cat-icon">356 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M10 7V5h4v2"/></svg>357 </div>358 miniTV359 </div>360 <div class="cat">361 <div class="cat-icon">362 <svg viewBox="0 0 24 24"><circle cx="8" cy="12" r="4"/><rect x="12" y="8" width="8" height="8" rx="2"/></svg>363 </div>364 Elect…365 </div>366 </div>367 </div>368 369 <!-- Main content -->370 <div class="content">371 <div class="hero">[IMG: Hero banner - Clothing, beauty & more starting ₹199]</div>372 373 <div class="dots">374 <div class="dot"></div>375 <div class="dot active"></div>376 <div class="dot"></div>377 <div class="dot"></div>378 <div class="dot"></div>379 <div class="dot"></div>380 <div class="dot"></div>381 </div>382 383 <div class="cards">384 <!-- Amazon Pay Quick Actions -->385 <div class="card" style="flex:0 0 330px;">386 <h3>Amazon Pay</h3>387 <div class="quick-grid">388 <div class="quick-item">389 <div class="quick-icon">390 <!-- wallet icon -->391 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="12" rx="2"/><path d="M15 11h6"/></svg>392 </div>393 <div class="quick-label">Send Money</div>394 </div>395 <div class="quick-item">396 <div class="quick-icon">397 <!-- upward arrow -->398 <svg viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg>399 </div>400 <div class="quick-label">Pay Bills</div>401 </div>402 <div class="quick-item">403 <div class="quick-icon">404 <!-- QR icon -->405 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><path d="M14 14h7v7h-7z"/></svg>406 </div>407 <div class="quick-label">Scan any QR</div>408 </div>409 <div class="quick-item">410 <div class="quick-icon">411 <!-- rupee symbol -->412 <svg viewBox="0 0 24 24"><path d="M6 6h10M6 10h10M6 18l10-8"/></svg>413 </div>414 <div class="quick-label">Pay Bills</div>415 </div>416 </div>417 </div>418 419 <!-- Men's formal shirts card -->420 <div class="card" style="flex:0 0 330px;">421 <h3>Keep shopping for Men's formal shi…</h3>422 <div class="product-thumb">[IMG: Men's formal shirt]</div>423 <div class="card-subtext"></div>424 </div>425 426 <!-- Laptops card -->427 <div class="card" style="flex:0 0 330px;">428 <h3>Keep shopping Laptops</h3>429 <div class="product-thumb">[IMG: Laptop product]</div>430 </div>431 </div>432 433 <!-- Feature badges -->434 <div class="features">435 <div class="feature">436 <div class="feature-icon orange">437 <svg viewBox="0 0 24 24" style="width:40px;height:40px; stroke:#b36b1c; fill:none; stroke-width:2.5;">438 <path d="M5 12l4 4 10-10"/>439 </svg>440 </div>441 <div class="feature-text">WIDE SELECTION</div>442 </div>443 <div class="feature">444 <div class="feature-icon blue">445 <svg viewBox="0 0 24 24" style="width:40px;height:40px; stroke:#1f6fb2; fill:none; stroke-width:2.5;">446 <path d="M3 7h18M5 7v10h14V7"/><path d="M12 12l-2 2 3 3"/></svg>447 </div>448 <div class="feature-text">PAY ON DELIVERY</div>449 </div>450 <div class="feature">451 <div class="feature-icon green">452 <svg viewBox="0 0 24 24" style="width:40px;height:40px; stroke:#2f8f57; fill:none; stroke-width:2.5;">453 <path d="M5 12l4 4 10-10"/>454 </svg>455 </div>456 <div class="feature-text">EASY RETURNS</div>457 </div>458 </div>459 460 <!-- Spacer to reach bottom nav position -->461 <div style="height: 900px;"></div>462 </div>463 464 <!-- Bottom navigation bar -->465 <div class="bottom-nav">466 <div class="nav-item">467 <svg viewBox="0 0 24 24">468 <path d="M3 11l9-7 9 7v9H3z"/><path d="M9 20v-6h6v6"/>469 </svg>470 <div>Home</div>471 </div>472 <div class="nav-item">473 <svg viewBox="0 0 24 24">474 <circle cx="12" cy="8" r="4"/><path d="M4 21c2-6 14-6 16 0"/>475 </svg>476 <div>You</div>477 </div>478 <div class="nav-item">479 <svg viewBox="0 0 24 24">480 <rect x="3" y="6" width="7" height="7"/><rect x="14" y="6" width="7" height="7"/><rect x="3" y="16" width="7" height="5"/><rect x="14" y="16" width="7" height="5"/>481 </svg>482 <div>More</div>483 </div>484 <div class="nav-item">485 <svg viewBox="0 0 24 24">486 <path d="M3 6h2l2 12h12l2-9H7"/><circle cx="10" cy="20" r="1.8"/><circle cx="17" cy="20" r="1.8"/>487 </svg>488 <div>Cart</div>489 </div>490 <div class="nav-item">491 <svg viewBox="0 0 24 24">492 <path d="M4 6h16M4 12h16M4 18h16"/>493 </svg>494 <div>Menu</div>495 </div>496 </div>497 498 <div class="home-indicator"></div>499</div>500</body>501</html>