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>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13  .status-bar {14    height: 90px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; color: #111;15    font-size: 32px;16  }17  .status-left, .status-right { display: flex; align-items: center; gap: 24px; }18  .icon { width: 40px; height: 40px; }19  .header {20    padding: 10px 24px 18px 24px;21  }22  .search-row {23    display: flex; align-items: center; gap: 20px;24  }25  .back-btn {26    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;27  }28  .search-box {29    flex: 1; height: 96px; background: #f2f3f5; border: 1px solid #e5e6ea; border-radius: 18px;30    display: flex; align-items: center; gap: 22px; padding: 0 26px;31  }32  .search-placeholder { color: #777; font-size: 34px; }33  .cart-btn {34    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;35  }36 37  .list { padding: 0 24px; }38  .list-item {39    display: flex; align-items: center; padding: 28px 0; border-bottom: 1px solid #efefef;40  }41  .list-item:last-child { border-bottom: none; }42  .li-ico {43    width: 72px; height: 72px; border-radius: 12px; display: flex; align-items: center; justify-content: center;44    color: #333;45  }46  .li-text { margin-left: 26px; flex: 1; }47  .li-title { font-size: 36px; font-weight: 700; color: #111; }48  .li-sub { font-size: 30px; color: #6b6b6b; margin-top: 8px; }49  .accent-pink { color: #ff3b83; font-weight: 700; }50  .chev { width: 40px; height: 40px; }51  .divider-soft { height: 18px; background: #f6eef9; margin: 18px 0; }52 53  .deal-card { padding: 24px; }54  .deal-row {55    display: flex; align-items: center; gap: 24px; border: 1px solid #eee; border-radius: 16px; padding: 26px;56  }57  .deal-badge {58    width: 170px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;59    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 700;60  }61  .deal-text { flex: 1; }62  .deal-title { font-size: 38px; font-weight: 800; color: #111; }63  .price { color: #00a650; font-weight: 800; }64  .deal-sub { font-size: 30px; color: #666; margin-top: 6px; }65 66  .section-header {67    padding: 28px 24px; font-size: 38px; font-weight: 800; color: #111; border-top: 1px solid #eee; border-bottom: 1px solid #eee;68    display: flex; align-items: center; justify-content: space-between;69  }70 71  .info-row {72    display: flex; align-items: center; padding: 28px 24px; border-bottom: 1px solid #efefef; gap: 22px;73  }74  .circle-ico {75    width: 58px; height: 58px; border-radius: 50%; background: #eaf7ea; border: 1px solid #d6e9d6; display: flex; align-items: center; justify-content: center;76  }77  .info-text { font-size: 34px; color: #222; }78  .highlight { font-weight: 800; }79  .coin-ico { background: #fff9e6; border-color: #ffe7a6; }80  .helper { padding: 20px 24px; font-size: 32px; color: #555; }81  .link { color: #1976d2; font-weight: 700; }82 83  .banner {84    margin: 16px 24px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 10px;85    display: flex; align-items: center; justify-content: center; color: #757575;86  }87 88  .brand-card {89    margin: 24px; border: 1px solid #eee; border-radius: 18px; padding: 24px;90  }91  .brand-top { display: flex; align-items: center; gap: 20px; color: #888; font-size: 32px; }92  .brand-logo {93    width: 120px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD;94    display: flex; align-items: center; justify-content: center; color: #757575;95    border-radius: 12px;96  }97  .brand-name { font-size: 44px; font-weight: 900; color: #111; margin: 18px 0 10px 0; }98  .feature {99    display: flex; align-items: flex-start; gap: 22px; padding: 22px 0; border-top: 1px solid #f2f2f2;100  }101  .feat-ico { width: 56px; height: 56px; }102  .feat-title { font-size: 36px; font-weight: 800; color: #111; }103  .feat-sub { font-size: 30px; color: #777; margin-top: 6px; }104 105  .bottom-bar {106    position: absolute; left: 0; bottom: 0; width: 1080px; height: 190px; background: #fff; border-top: 1px solid #e6e6e6;107    display: flex; align-items: center; gap: 24px; padding: 24px;108  }109  .btn {110    height: 120px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800;111  }112  .btn-outline { flex: 0 0 300px; background: #fff; border: 1px solid #e6e6e6; color: #111; gap: 16px; }113  .btn-white { flex: 1; background: #fff; border: 1px solid #e6e6e6; color: #111; }114  .btn-primary { flex: 0 0 380px; background: #f9c527; border: 1px solid #e0b01e; color: #111; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }115  .floating {116    position: absolute; right: 40px; bottom: 230px; width: 120px; height: 120px; border-radius: 60px; background: #2563eb;117    display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,0.25);118  }119  .floating .logo {120    width: 90px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 45px; color: #757575;121    display: flex; align-items: center; justify-content: center; font-weight: 800;122  }123</style>124</head>125<body>126<div id="render-target">127 128  <!-- Status bar -->129  <div class="status-bar">130    <div class="status-left">131      <span>11:29</span>132      <!-- simple icons -->133      <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="#555" stroke-width="2"/><path d="M20 20 L16 16" stroke="#555" stroke-width="2" /></svg>134      <svg class="icon" viewBox="0 0 24 24"><path d="M4 10 L12 4 L20 10 L12 16 Z" fill="none" stroke="#555" stroke-width="2"/></svg>135      <svg class="icon" viewBox="0 0 24 24"><path d="M6 6 L18 18 M18 6 L6 18" stroke="#555" stroke-width="2"/></svg>136      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#555"/></svg>137    </div>138    <div class="status-right">139      <svg class="icon" viewBox="0 0 24 24"><path d="M3 18 L3 6 L21 6 L21 18" fill="none" stroke="#555" stroke-width="2"/><rect x="6" y="9" width="12" height="6" fill="#555"/></svg>140      <svg class="icon" viewBox="0 0 24 24"><path d="M6 18 L18 18 L18 6" fill="none" stroke="#555" stroke-width="2"/><path d="M10 6 L14 6" stroke="#555" stroke-width="2"/></svg>141    </div>142  </div>143 144  <!-- Header with search -->145  <div class="header">146    <div class="search-row">147      <div class="back-btn">148        <svg viewBox="0 0 100 100" width="56" height="56">149          <path d="M60 20 L30 50 L60 80" fill="none" stroke="#222" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>150        </svg>151      </div>152      <div class="search-box">153        <svg viewBox="0 0 24 24" width="44" height="44">154          <circle cx="10" cy="10" r="6" fill="none" stroke="#777" stroke-width="2"/>155          <path d="M16 16 L21 21" stroke="#777" stroke-width="2"/>156        </svg>157        <div class="search-placeholder">Search for products</div>158        <div style="margin-left:auto;">159          <svg viewBox="0 0 24 24" width="44" height="44">160            <path d="M12 4 C9 4,8 6,8 8 L8 14 C8 16,9 18,12 18 C15 18,16 16,16 14 L16 8 C16 6,15 4,12 4" fill="none" stroke="#777" stroke-width="2"/>161            <rect x="10" y="18" width="4" height="3" fill="#777"/>162          </svg>163        </div>164      </div>165      <div class="cart-btn">166        <svg viewBox="0 0 24 24" width="48" height="48">167          <path d="M4 6 L6 6 L7 14 L19 14 L21 8 L7 8" fill="none" stroke="#222" stroke-width="2"/>168          <circle cx="9" cy="18" r="2" fill="#222"/>169          <circle cx="17" cy="18" r="2" fill="#222"/>170        </svg>171      </div>172    </div>173  </div>174 175  <!-- Info list -->176  <div class="list">177    <div class="list-item">178      <div class="li-ico">179        <svg viewBox="0 0 24 24" width="48" height="48">180          <rect x="3" y="6" width="12" height="10" fill="none" stroke="#555" stroke-width="2"/>181          <rect x="15" y="10" width="6" height="6" fill="none" stroke="#555" stroke-width="2"/>182          <circle cx="8" cy="18" r="1.8" fill="#555"/><circle cx="18" cy="18" r="1.8" fill="#555"/>183        </svg>184      </div>185      <div class="li-text">186        <div class="li-title">1 Nov, Wednesday</div>187        <div class="li-sub">If ordered within <span class="accent-pink">28m 07s</span></div>188      </div>189      <svg class="chev" viewBox="0 0 24 24"><path d="M9 5 L16 12 L9 19" fill="none" stroke="#999" stroke-width="2"/></svg>190    </div>191 192    <div class="list-item">193      <div class="li-ico">194        <svg viewBox="0 0 24 24" width="48" height="48">195          <path d="M5 12 L12 5 L19 12" fill="none" stroke="#555" stroke-width="2"/>196          <path d="M12 5 L12 19" fill="none" stroke="#555" stroke-width="2"/>197        </svg>198      </div>199      <div class="li-text">200        <div class="li-title">10 Days Return Policy</div>201      </div>202      <svg class="chev" viewBox="0 0 24 24"><path d="M9 5 L16 12 L9 19" fill="none" stroke="#999" stroke-width="2"/></svg>203    </div>204 205    <div class="list-item">206      <div class="li-ico">207        <svg viewBox="0 0 24 24" width="48" height="48">208          <path d="M6 12 C6 9,8 7,11 7 C14 7,16 9,16 12" fill="none" stroke="#555" stroke-width="2"/>209          <path d="M11 12 L11 17" stroke="#555" stroke-width="2"/>210          <path d="M9 17 L13 17" stroke="#555" stroke-width="2"/>211        </svg>212      </div>213      <div class="li-text">214        <div class="li-title">Cash on Delivery Available</div>215      </div>216      <svg class="chev" viewBox="0 0 24 24"><path d="M9 5 L16 12 L9 19" fill="none" stroke="#999" stroke-width="2"/></svg>217    </div>218  </div>219 220  <div class="divider-soft"></div>221 222  <!-- Deal card -->223  <div class="deal-card">224    <div class="deal-row">225      <div class="deal-badge">[IMG: WOW DEAL]</div>226      <div class="deal-text">227        <div class="deal-title">Get at <span class="price">₹1,879</span></div>228        <div class="deal-sub">With Basket, Bank offers</div>229      </div>230      <svg class="chev" viewBox="0 0 24 24"><path d="M9 5 L16 12 L9 19" fill="none" stroke="#999" stroke-width="2"/></svg>231    </div>232  </div>233 234  <!-- Offers header -->235  <div class="section-header">236    <div>All Offers & Coupons</div>237    <svg class="chev" viewBox="0 0 24 24"><path d="M9 5 L16 12 L9 19" fill="none" stroke="#999" stroke-width="2"/></svg>238  </div>239 240  <!-- Info rows -->241  <div class="info-row">242    <div class="circle-ico">243      <svg viewBox="0 0 24 24" width="36" height="36">244        <path d="M4 14 L10 10 L14 12 L20 8" fill="none" stroke="#27ae60" stroke-width="2"/>245      </svg>246    </div>247    <div class="info-text"><span class="highlight">820</span> people ordered this in the last 15 days</div>248  </div>249 250  <div class="info-row">251    <div class="circle-ico coin-ico">252      <svg viewBox="0 0 24 24" width="36" height="36">253        <circle cx="12" cy="12" r="8" fill="none" stroke="#f4c542" stroke-width="2"/>254        <path d="M12 7 L10 12 L14 12 L12 17" stroke="#f4c542" stroke-width="2" fill="none"/>255      </svg>256    </div>257    <div class="info-text">You will earn ⚡ <span class="highlight">50</span> SuperCoins cashback</div>258  </div>259 260  <div class="helper">261    Use it to save on your next order. <span class="link">How?</span>262  </div>263 264  <!-- Banner -->265  <div class="banner">[IMG: Flipkart Pay Later banner]</div>266 267  <!-- Brand card -->268  <div class="brand-card">269    <div class="brand-top">270      <div class="brand-logo">[IMG: Nike logo]</div>271      <div>About the brand</div>272    </div>273    <div class="brand-name">NIKE</div>274 275    <div class="feature">276      <svg class="feat-ico" viewBox="0 0 24 24">277        <path d="M4 16 L10 10 L14 12 L20 6" fill="none" stroke="#111" stroke-width="2"/>278      </svg>279      <div>280        <div class="feat-title">Popular in Running</div>281        <div class="feat-sub">Based on recent orders on Flipkart</div>282      </div>283    </div>284 285    <div class="feature">286      <svg class="feat-ico" viewBox="0 0 24 24">287        <path d="M12 18 L7 21 L8 15 L4 11 L10 10 L12 4 L14 10 L20 11 L16 15 L17 21 Z" fill="none" stroke="#111" stroke-width="2"/>288      </svg>289      <div>290        <div class="feat-title">Loved by customers</div>291        <div class="feat-sub">Based on customer ratings</div>292      </div>293    </div>294 295    <div class="feature">296      <svg class="feat-ico" viewBox="0 0 24 24">297        <path d="M6 4 L16 4 L16 18 L11 16 L6 18 Z" fill="none" stroke="#111" stroke-width="2"/>298      </svg>299      <div>300        <div class="feat-title">8+ years on Flipkart</div>301        <div class="feat-sub">Trusted brand on Flipkart</div>302      </div>303    </div>304  </div>305 306  <!-- Floating button -->307  <div class="floating">308    <div class="logo">[IMG: Flipkart logo]</div>309  </div>310 311  <!-- Bottom bar -->312  <div class="bottom-bar">313    <div class="btn btn-outline">314      <svg viewBox="0 0 24 24" width="44" height="44">315        <path d="M4 6 L6 6 L7 14 L19 14 L21 8 L7 8" fill="none" stroke="#222" stroke-width="2"/>316        <path d="M12 9 L12 13 M10 11 L14 11" stroke="#222" stroke-width="2"/>317      </svg>318      <span>Add</span>319    </div>320    <div class="btn btn-white">Pay with EMI</div>321    <div class="btn btn-primary">Buy now</div>322  </div>323 324</div>325</body>326</html>