GD-ML/AndroidCode

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>Shopping App UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";16    color: #111;17  }18 19  /* Top promo section */20  #promo {21    background: #FFE24D;22    padding: 34px 30px 24px;23  }24  .promo-grid {25    width: 1020px;26    margin: 8px auto 16px;27    display: grid;28    grid-template-columns: 1fr 1fr;29    gap: 26px;30  }31  .coupon {32    height: 150px;33    border-radius: 18px;34    display: flex;35    align-items: center;36    justify-content: space-between;37    padding: 18px 20px;38    box-sizing: border-box;39  }40  .coupon.black { background: #111; color: #fff; }41  .coupon.green { background: #36B44A; color: #fff; }42  .coupon .left {43    display: flex;44    align-items: baseline;45    gap: 10px;46    font-weight: 800;47    letter-spacing: 0.5px;48  }49  .coupon .currency { font-size: 44px; line-height: 1; }50  .coupon .amount { font-size: 76px; line-height: 1; }51  .coupon .off { font-size: 38px; margin-left: 6px; opacity: 0.95; }52  .coupon .cond {53    background: #ffffff;54    color: #111;55    font-size: 28px;56    border-radius: 12px;57    padding: 14px 16px;58    text-align: center;59    width: 265px;60    box-sizing: border-box;61    font-weight: 600;62  }63  .promo-code {64    text-align: center;65    font-weight: 900;66    font-size: 46px;67    letter-spacing: 2px;68    margin-top: 18px;69  }70 71  /* Products row */72  .products {73    padding: 38px 40px 0;74    display: flex;75    justify-content: space-between;76  }77  .product {78    width: 320px;79    text-align: left;80  }81  .product .ph {82    width: 320px;83    height: 430px;84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    border-radius: 8px;87    color: #757575;88    display: flex;89    align-items: center;90    justify-content: center;91    font-size: 26px;92  }93  .product .name {94    font-size: 34px;95    margin-top: 18px;96    letter-spacing: 0.2px;97  }98  .product .price {99    font-size: 32px;100    margin-top: 10px;101    font-weight: 600;102  }103 104  /* Fast Delivery banner */105  .fast-delivery {106    padding: 38px 30px 0;107  }108  .fd-card {109    background: #F5AEB3;110    border-radius: 26px;111    height: 360px;112    position: relative;113    padding: 38px;114    box-sizing: border-box;115    overflow: hidden;116  }117  .fd-title {118    color: #D64F49;119    font-weight: 900;120    font-size: 78px;121    letter-spacing: 1px;122    line-height: 1;123  }124  .fd-link {125    margin-top: 24px;126    color: #C24B46;127    font-size: 36px;128    font-weight: 700;129  }130  .fd-logo {131    position: absolute;132    right: 32px;133    top: 26px;134    color: #C24B46;135    font-weight: 800;136    font-size: 46px;137    opacity: 0.85;138  }139  .fd-truck {140    position: absolute;141    right: 28px;142    bottom: 20px;143    opacity: 0.45;144  }145 146  /* Popular categories */147  .popular {148    padding: 46px 30px 0;149  }150  .popular .title {151    font-family: Georgia, "Times New Roman", serif;152    font-size: 64px;153    font-weight: 700;154    margin: 0 0 26px 6px;155    letter-spacing: 0.2px;156  }157  .category-grid {158    display: grid;159    grid-template-columns: 1fr 1fr;160    gap: 22px;161  }162  .cat {163    height: 470px;164    border-radius: 12px;165    overflow: hidden;166  }167  .cat .ph {168    width: 100%;169    height: 100%;170    background: #E0E0E0;171    border: 1px solid #BDBDBD;172    color: #757575;173    display: flex;174    align-items: center;175    justify-content: center;176    font-size: 30px;177  }178 179  /* Bottom navigation */180  .bottom-nav {181    position: absolute;182    left: 0;183    bottom: 70px;184    width: 100%;185    height: 210px;186    background: #ffffff;187    border-top: 1px solid #E0E0E0;188    display: flex;189    align-items: center;190    justify-content: space-around;191  }192  .nav-item {193    width: 200px;194    text-align: center;195    color: #9E9E9E;196    font-size: 30px;197  }198  .nav-item.active { color: #111; }199  .nav-icon {200    width: 64px;201    height: 64px;202    margin: 0 auto 12px;203    display: block;204  }205  .bag-badge {206    position: absolute;207    top: -6px;208    left: 50%;209    transform: translateX(10px);210    background: #111;211    color: #fff;212    width: 34px;213    height: 34px;214    border-radius: 17px;215    font-size: 22px;216    line-height: 34px;217  }218 219  /* Home indicator area */220  .home-indicator {221    position: absolute;222    left: 0;223    bottom: 0;224    width: 100%;225    height: 70px;226    background: #000;227  }228  .home-indicator::after {229    content: "";230    position: absolute;231    left: 50%;232    transform: translateX(-50%);233    top: 24px;234    width: 220px;235    height: 10px;236    background: #ffffff;237    border-radius: 8px;238    opacity: 0.92;239  }240</style>241</head>242<body>243<div id="render-target">244  <!-- Promo section -->245  <section id="promo">246    <div class="promo-grid">247      <div class="coupon black">248        <div class="left">249          <span class="currency">₹</span><span class="amount">150</span><span class="off">OFF</span>250        </div>251        <div class="cond">For order over ₹1500</div>252      </div>253      <div class="coupon green">254        <div class="left">255          <span class="currency">₹</span><span class="amount">350</span><span class="off">OFF</span>256        </div>257        <div class="cond">For order over ₹2500</div>258      </div>259      <div class="coupon black">260        <div class="left">261          <span class="currency">₹</span><span class="amount">700</span><span class="off">OFF</span>262        </div>263        <div class="cond">For order over ₹3500</div>264      </div>265      <div class="coupon green">266        <div class="left">267          <span class="currency">₹</span><span class="amount">1000</span><span class="off">OFF</span>268        </div>269        <div class="cond">For order over ₹5000</div>270      </div>271    </div>272    <div class="promo-code">USE CODE: BFS20</div>273  </section>274 275  <!-- Products -->276  <section class="products">277    <div class="product">278      <div class="ph">[IMG: Dress Product]</div>279      <div class="name">Long Gathered</div>280      <div class="price">₹1,490</div>281    </div>282    <div class="product">283      <div class="ph">[IMG: Pullover Product]</div>284      <div class="name">Sheer Pullover</div>285      <div class="price">₹1,190</div>286    </div>287    <div class="product">288      <div class="ph">[IMG: Straight Leg Jeans]</div>289      <div class="name">Straight Leg</div>290      <div class="price">₹1,690</div>291    </div>292  </section>293 294  <!-- Fast delivery banner -->295  <section class="fast-delivery">296    <div class="fd-card">297      <div class="fd-logo">ur</div>298      <div class="fd-title">FAST DELIVERY</div>299      <div class="fd-link">VIEW MORE ></div>300      <svg class="fd-truck" width="420" height="210" viewBox="0 0 210 105" fill="none" xmlns="http://www.w3.org/2000/svg">301        <rect x="2" y="20" width="110" height="60" rx="6" stroke="#C24B46" stroke-width="4"/>302        <path d="M112 45h34l18 20v15h-22" stroke="#C24B46" stroke-width="4" fill="none"/>303        <circle cx="48" cy="92" r="10" stroke="#C24B46" stroke-width="4"/>304        <circle cx="152" cy="92" r="10" stroke="#C24B46" stroke-width="4"/>305        <path d="M24 36h62M24 46h62M24 56h62" stroke="#C24B46" stroke-width="4"/>306      </svg>307    </div>308  </section>309 310  <!-- Popular categories -->311  <section class="popular">312    <div class="title">Popular categories</div>313    <div class="category-grid">314      <div class="cat">315        <div class="ph">[IMG: Knitwear Category]</div>316      </div>317      <div class="cat">318        <div class="ph">[IMG: Partywear Category]</div>319      </div>320    </div>321  </section>322 323  <!-- Bottom navigation -->324  <nav class="bottom-nav">325    <div class="nav-item active">326      <svg class="nav-icon" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg">327        <path d="M3 10.5L12 3l9 7.5" />328        <path d="M5 10v10h14V10" />329      </svg>330      Home331    </div>332    <div class="nav-item">333      <svg class="nav-icon" viewBox="0 0 24 24" stroke="#9E9E9E" fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg">334        <circle cx="11" cy="11" r="7" />335        <path d="M20 20l-4-4" />336      </svg>337      Menu338    </div>339    <div class="nav-item" style="position: relative;">340      <svg class="nav-icon" viewBox="0 0 24 24" stroke="#9E9E9E" fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg">341        <path d="M6 8h12l1 12H5L6 8z" />342        <path d="M8 8V6a4 4 0 0 1 8 0v2" />343      </svg>344      <div class="bag-badge">1</div>345      Bag346    </div>347    <div class="nav-item">348      <svg class="nav-icon" viewBox="0 0 24 24" stroke="#9E9E9E" fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg">349        <circle cx="12" cy="8" r="4" />350        <path d="M4 21c1.5-4 6-6 8-6s6.5 2 8 6" />351      </svg>352      Me353    </div>354  </nav>355 356  <!-- Home indicator -->357  <div class="home-indicator"></div>358</div>359</body>360</html>