GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;10  }11 12  /* Header */13  .header {14    position: relative;15    height: 220px;16    background: linear-gradient(135deg, #8ee0d3 0%, #b6ead1 100%);17    padding: 32px 36px;18    box-sizing: border-box;19  }20  .back-icon {21    position: absolute; left: 24px; top: 96px; width: 44px; height: 44px;22  }23  .search-bar {24    position: absolute; left: 96px; right: 36px; top: 72px; height: 88px;25    background: #ffffff;26    border-radius: 44px;27    box-shadow: 0 6px 16px rgba(0,0,0,0.12);28    display: flex; align-items: center; padding: 0 28px; gap: 18px;29  }30  .search-input-placeholder {31    font-size: 36px; color: #333; flex: 1;32  }33  .scan-pill {34    width: 64px; height: 64px; border-radius: 18px; background: #f5f7f7;35    display: flex; justify-content: center; align-items: center; border: 1px solid #dfe6e6;36  }37 38  /* Content area */39  .content { position: relative; background: #fff; padding: 24px 36px 220px; box-sizing: border-box; }40 41  .deal-badge {42    display: inline-block; background: #f7b8c4; color: #fff; font-weight: 700;43    padding: 16px 24px; border-radius: 12px; font-size: 28px; margin-top: 16px;44  }45 46  .price-row { display: flex; align-items: baseline; gap: 36px; margin-top: 20px; }47  .discount { font-size: 140px; color: #f7b8c4; font-weight: 700; line-height: 1; }48  .price { font-size: 120px; color: #8c8c8c; font-weight: 700; line-height: 1; }49  .mrp { color: #9fa3a5; font-size: 34px; margin-top: 12px; }50  .fulfilled-tag {51    display: inline-flex; align-items: center; gap: 12px; background: #e6e6e6; color: #6d6d6d;52    border-radius: 12px; padding: 10px 16px; margin-top: 22px; font-size: 30px; font-weight: 600;53  }54  .fulfilled-tag .a-box {55    width: 30px; height: 30px; border-radius: 6px; background: #d6d2c3; color: #333;56    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px;57  }58  .tax-note { color: #8a8d90; font-size: 34px; margin-top: 12px; }59 60  .divider { height: 1px; background: #ececec; margin: 28px 0; }61 62  .offer-row { display: flex; align-items: center; justify-content: space-between; }63  .offer-left { display: flex; align-items: center; gap: 22px; }64  .offer-icon {65    width: 60px; height: 60px; border: 2px dashed #d9cfc8; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #c7a98c; font-weight: 700;66  }67  .offer-text { display: flex; flex-direction: column; }68  .offer-title { color: #8a8d90; font-size: 36px; font-weight: 700; }69  .offer-sub { color: #b8bec2; font-size: 32px; }70  .chev-icon { width: 42px; height: 42px; }71 72  .delivery { color: #83c7cd; font-size: 36px; margin-top: 26px; }73  .delivery .accent { color: #6ac064; }74  .details-link { color: #83c7cd; text-decoration: underline; }75 76  .location-row { display: flex; align-items: center; gap: 16px; color: #83c7cd; font-size: 36px; margin-top: 28px; }77 78  .toast {79    position: absolute; left: 280px; top: 1060px;80    background: #394046; color: #ffffff; padding: 24px 28px; border-radius: 28px;81    font-size: 40px; font-weight: 700; box-shadow: 0 10px 18px rgba(0,0,0,0.25);82    display: inline-flex; align-items: center; gap: 16px;83  }84  .toast .check {85    width: 34px; height: 34px; border-radius: 50%; background: #6ad17f; display: inline-block;86    position: relative;87  }88  .toast .check:after {89    content: ""; position: absolute; left: 8px; top: 9px; width: 18px; height: 10px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg);90  }91 92  .instock { color: #6ac064; font-size: 44px; font-weight: 700; margin-top: 40px; }93 94  .qty-selector {95    width: 210px; height: 90px; background: #fff; border-radius: 20px; border: 1px solid #e7e7e7;96    box-shadow: 0 10px 20px rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: space-between;97    padding: 0 24px; margin-top: 26px; color: #8a8d90; font-size: 34px; font-weight: 600;98  }99  .qty-chevron { width: 28px; height: 28px; }100 101  .cta {102    width: calc(100% - 72px); margin: 24px 0; height: 112px; border-radius: 56px; font-size: 42px; font-weight: 700;103    display: flex; align-items: center; justify-content: center;104  }105  .add-to-cart {106    background: #ffe79a; color: #7e8c94;107    border: 6px solid #cfeef4;108    box-shadow: 0 0 0 10px rgba(207,238,244,0.45) inset;109    margin-top: 38px;110  }111  .buy-now {112    background: #ffd19c; color: #7e8c94;113  }114 115  .secure-row { display: flex; align-items: center; gap: 16px; margin-top: 26px; color: #83c7cd; font-size: 36px; }116  .sold-by { color: #8a8d90; font-size: 34px; margin-top: 20px; }117  .link { color: #83c7cd; text-decoration: underline; }118  .desc { color: #7c8085; font-size: 34px; margin-top: 16px; }119  .desc b { font-weight: 700; color: #5f656b; }120 121  /* Bottom navigation */122  .bottom-nav {123    position: absolute; left: 0; right: 0; bottom: 60px; height: 160px; background: #ffffff;124    border-top: 1px solid #e9e9e9; display: flex; align-items: center; justify-content: space-around;125  }126  .nav-item { width: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }127  .nav-label { font-size: 32px; color: #8a8d90; }128  .nav-item.active .nav-label { color: #83c7cd; font-weight: 700; }129  .cart-dot {130    position: absolute; right: 190px; bottom: 130px; width: 12px; height: 12px; border-radius: 50%; background: #5cc0d9;131  }132 133  .gesture {134    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);135    width: 300px; height: 12px; background: #cfcfcf; border-radius: 8px;136  }137  svg { display: block; }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Header with search -->144  <div class="header">145    <svg class="back-icon" viewBox="0 0 32 32">146      <path d="M20 6 L8 16 L20 26" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>147    </svg>148 149    <div class="search-bar">150      <svg width="42" height="42" viewBox="0 0 32 32">151        <circle cx="14" cy="14" r="9" stroke="#7b8c90" stroke-width="3" fill="none"/>152        <path d="M22 22 L30 30" stroke="#7b8c90" stroke-width="3" stroke-linecap="round"/>153      </svg>154      <div class="search-input-placeholder">yoga mats for women</div>155      <div class="scan-pill">156        <svg width="30" height="30" viewBox="0 0 32 32">157          <rect x="8" y="8" width="16" height="16" rx="3" ry="3" fill="none" stroke="#7b8c90" stroke-width="2"/>158          <circle cx="16" cy="16" r="5" fill="none" stroke="#7b8c90" stroke-width="2"/>159        </svg>160      </div>161    </div>162  </div>163 164  <!-- Content -->165  <div class="content">166    <div class="deal-badge">Deal</div>167 168    <div class="price-row">169      <div class="discount">-61%</div>170      <div class="price"><span style="font-weight:700;">₹</span>347</div>171    </div>172 173    <div class="mrp">M.R.P.: ₹899</div>174 175    <div class="fulfilled-tag">176      <span class="a-box">a</span>177      Fulfilled178    </div>179    <div class="tax-note">Inclusive of all taxes</div>180 181    <div class="divider"></div>182 183    <div class="offer-row">184      <div class="offer-left">185        <div class="offer-icon">%</div>186        <div class="offer-text">187          <div class="offer-title">Save Extra with Offers</div>188          <div class="offer-sub">Buy More, Save More, Bank Offers and Part...</div>189        </div>190      </div>191      <svg class="chev-icon" viewBox="0 0 32 32">192        <path d="M8 12 L16 20 L24 12" stroke="#9ca2a6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>193      </svg>194    </div>195 196    <div class="delivery">197      FREE delivery <b>Saturday, 30 September</b> on orders dispatched by Amazon over ₹499. Order within <span class="accent">31 mins</span>. <span class="details-link">Details</span>198    </div>199 200    <div class="location-row">201      <svg width="38" height="38" viewBox="0 0 32 32">202        <path d="M16 3 C10 3 6 7 6 12 C6 18 16 29 16 29 C16 29 26 18 26 12 C26 7 22 3 16 3 Z" stroke="#83c7cd" stroke-width="2.6" fill="none"/>203        <circle cx="16" cy="12" r="4" stroke="#83c7cd" stroke-width="2" fill="none"/>204      </svg>205      <div>Select delivery location</div>206    </div>207 208    <div class="toast"><span class="check"></span>Added to cart</div>209 210    <div class="instock">In stock</div>211 212    <div class="qty-selector">213      <span>Qty: 1</span>214      <svg class="qty-chevron" viewBox="0 0 24 24">215        <path d="M6 9 L12 15 L18 9" stroke="#9ca2a6" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>216      </svg>217    </div>218 219    <div class="cta add-to-cart">Add to Cart</div>220    <div class="cta buy-now">Buy Now</div>221 222    <div class="secure-row">223      <svg width="36" height="36" viewBox="0 0 32 32">224        <rect x="7" y="14" width="18" height="12" rx="2" ry="2" fill="none" stroke="#9ca2a6" stroke-width="2"/>225        <path d="M10 14 V10 C10 6 14 4 16 4 C18 4 22 6 22 10 V14" stroke="#9ca2a6" stroke-width="2" fill="none"/>226      </svg>227      <div>Secure transaction</div>228    </div>229 230    <div class="sold-by">231      Sold by <span class="link">RetailEZ Pvt Ltd</span> and <span class="link">Fulfilled by Amazon</span>.232    </div>233 234    <div class="desc">235      <b>Shows what is inside.</b> Item often ships in manufacturer container to reduce packaging. If this is a gift, consider <span class="link">Hide prices</span> or different options.236    </div>237  </div>238 239  <!-- Bottom Navigation -->240  <div class="bottom-nav">241    <div class="nav-item active">242      <svg width="48" height="48" viewBox="0 0 32 32">243        <path d="M4 14 L16 4 L28 14 V26 H20 V18 H12 V26 H4 Z" fill="none" stroke="#83c7cd" stroke-width="2.2" stroke-linejoin="round"/>244      </svg>245      <div class="nav-label">Home</div>246    </div>247    <div class="nav-item">248      <svg width="48" height="48" viewBox="0 0 32 32">249        <circle cx="16" cy="12" r="6" stroke="#9ca2a6" stroke-width="2" fill="none"/>250        <path d="M6 28 C6 22 12 20 16 20 C20 20 26 22 26 28" stroke="#9ca2a6" stroke-width="2" fill="none"/>251      </svg>252      <div class="nav-label">You</div>253    </div>254    <div class="nav-item">255      <svg width="48" height="48" viewBox="0 0 32 32">256        <path d="M6 16 A10 10 0 0 1 26 16" stroke="#9ca2a6" stroke-width="2" fill="none"/>257        <path d="M22 12 L26 16 L22 20" stroke="#9ca2a6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>258      </svg>259      <div class="nav-label">More</div>260    </div>261    <div class="nav-item">262      <svg width="48" height="48" viewBox="0 0 32 32">263        <path d="M4 8 H10 L12 20 H24 L26 12 H12" fill="none" stroke="#9ca2a6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>264        <circle cx="12" cy="26" r="2.5" stroke="#9ca2a6" stroke-width="2" fill="none"/>265        <circle cx="22" cy="26" r="2.5" stroke="#9ca2a6" stroke-width="2" fill="none"/>266      </svg>267      <div class="nav-label">Cart</div>268    </div>269    <div class="nav-item">270      <svg width="48" height="48" viewBox="0 0 32 32">271        <path d="M6 10 H26 M6 16 H26 M6 22 H26" stroke="#9ca2a6" stroke-width="2" stroke-linecap="round"/>272      </svg>273      <div class="nav-label">Menu</div>274    </div>275  </div>276  <div class="cart-dot"></div>277 278  <div class="gesture"></div>279</div>280</body>281</html>