GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Smart Door Locks - Mock UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: linear-gradient(180deg, #A8E3DA 0%, #BDE8DF 30%, #DFF3EE 100%);13    color: #111;14  }15  .status-bar {16    height: 80px;17    display: flex;18    align-items: center;19    padding: 0 32px;20    font-size: 34px;21    color: #212121;22  }23  .status-icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }24  .top-search {25    display: flex;26    align-items: center;27    padding: 12px 24px 0 24px;28  }29  .back-btn {30    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-right: 16px;31  }32  .search-box {33    flex: 1;34    height: 108px;35    background: #fff;36    border-radius: 18px;37    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;38    display: flex; align-items: center;39    padding: 0 24px;40  }41  .search-icon, .camera-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }42  .search-text {43    flex: 1;44    font-size: 40px;45    color: #222;46  }47  .location-row {48    margin: 14px 24px 0 24px;49    height: 92px;50    background: rgba(255,255,255,0.55);51    border-radius: 18px;52    display: flex; align-items: center;53    padding: 0 24px;54    gap: 18px;55    font-size: 36px;56    color: #1f1f1f;57  }58  .row-controls {59    display: flex; align-items: center;60    padding: 18px 24px;61    gap: 24px;62  }63  .prime-toggle {64    display: inline-flex; align-items: center; gap: 16px;65    font-size: 36px; color: #444;66  }67  .toggle-pill {68    width: 100px; height: 50px; background: #eee; border-radius: 26px; position: relative;69  }70  .toggle-knob {71    width: 46px; height: 46px; background: #fff; border-radius: 50%;72    position: absolute; top: 2px; left: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.2);73  }74  .filters-btn {75    margin-left: auto; display: flex; align-items: center; gap: 12px;76    font-size: 40px; color: #007185;77  }78  .section-title {79    font-size: 48px;80    font-weight: 700;81    padding: 12px 24px;82    color: #111;83  }84  .sponsored-note {85    display: flex; align-items: center; gap: 8px;86    font-size: 32px; color: #666; padding-left: 24px;87  }88  .products-row {89    display: grid;90    grid-template-columns: 1fr 1fr;91    gap: 20px;92    padding: 18px 24px;93  }94  .img-box {95    background: #E0E0E0;96    border: 1px solid #BDBDBD;97    display: flex; align-items: center; justify-content: center;98    color: #757575;99    text-align: center;100  }101  .deal-card {102    background: #fff;103    border-radius: 12px;104    padding: 12px;105    box-shadow: 0 2px 6px rgba(0,0,0,0.08);106  }107  .deal-badge {108    display: inline-block;109    background: #A9472B;110    color: #fff;111    font-size: 34px;112    padding: 8px 16px;113    border-radius: 8px;114    margin: 8px 0;115  }116  .price-row { font-size: 56px; color: #111; margin-top: 6px; }117  .mrp-row { font-size: 34px; color: #666; margin-top: 4px; }118  .prime-bolt { color: #1A73E8; font-weight: 700; margin-left: 8px; }119  .product-card {120    margin: 12px 24px;121    background: #fff;122    border-radius: 16px;123    box-shadow: 0 2px 8px rgba(0,0,0,0.08);124    display: grid;125    grid-template-columns: 360px 1fr;126    overflow: hidden;127  }128  .product-image {129    height: 680px;130  }131  .product-info {132    padding: 24px;133  }134  .sponsored-tag { font-size: 32px; color: #666; }135  .product-title {136    font-size: 46px; font-weight: 700; line-height: 1.25; margin-top: 8px; color: #111;137  }138  .ratings {139    margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: 38px; color: #111;140  }141  .stars { display: inline-flex; gap: 6px; }142  .festival-badge {143    margin-top: 18px; display: inline-block; background: #F8A74B; color: #3A2100;144    font-size: 36px; padding: 10px 18px; border-radius: 10px; font-weight: 700;145  }146  .price-block {147    margin-top: 20px; font-size: 58px; color: #111; font-weight: 700;148  }149  .mrp-strike { font-size: 36px; color: #777; text-decoration: line-through; margin-left: 12px; }150  .off-note { font-size: 36px; color: #111; margin-left: 12px; }151  .emi-note { font-size: 34px; color: #555; margin-top: 8px; }152  .delivery {153    margin-top: 18px; font-size: 36px; color: #111;154  }155  .delivery .prime { color: #1A73E8; font-weight: 800; }156  .free-delivery { font-size: 34px; color: #555; margin-top: 6px; }157  .bottom-nav {158    position: absolute; bottom: 0; left: 0; right: 0;159    height: 180px; background: #fff; border-top: 1px solid #ddd;160    display: flex; align-items: center; justify-content: space-around;161  }162  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #111; font-size: 34px; }163  .nav-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }164  .bottom-swipe {165    position: absolute; bottom: 180px; left: 50%; transform: translateX(-50%);166    width: 640px; height: 18px; background: #C5C5C5; border-radius: 9px; opacity: 0.8;167  }168  .chevron { width: 28px; height: 28px; }169  .sponsored-inline { color: #777; font-size: 32px; margin-top: 10px; }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status bar -->176  <div class="status-bar">177    <div>1:31</div>178    <div class="status-icons">179      <span>📧</span>180      <span>⬛</span>181      <span>⚙️</span>182      <span>🛜</span>183    </div>184  </div>185 186  <!-- Top search -->187  <div class="top-search">188    <div class="back-btn">189      <svg width="40" height="40" viewBox="0 0 24 24">190        <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>191      </svg>192    </div>193    <div class="search-box">194      <div class="search-icon">195        <svg width="38" height="38" viewBox="0 0 24 24">196          <circle cx="10" cy="10" r="6" stroke="#333" stroke-width="2" fill="none"/>197          <path d="M21 21l-5.2-5.2" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>198        </svg>199      </div>200      <div class="search-text">smart door locks</div>201      <div class="camera-icon">202        <svg width="38" height="38" viewBox="0 0 24 24">203          <rect x="3" y="6" width="18" height="14" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"/>204          <path d="M9 6l2-2h2l2 2" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>205          <circle cx="12" cy="13" r="4" stroke="#333" stroke-width="2" fill="none"/>206        </svg>207      </div>208    </div>209  </div>210 211  <!-- Location row -->212  <div class="location-row">213    <svg width="38" height="38" viewBox="0 0 24 24">214      <path d="M12 2c4 0 7 3 7 7 0 5-7 13-7 13S5 14 5 9c0-4 3-7 7-7zm0 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="#111"/>215    </svg>216    <div>Delivering to Delhi 110001 - Update location</div>217    <svg class="chevron" viewBox="0 0 24 24">218      <path d="M8 9l4 4 4-4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>219    </svg>220  </div>221 222  <!-- Prime and Filters -->223  <div class="row-controls">224    <div class="prime-toggle">225      <span style="color:#ff9f00; font-weight:800;">prime</span>226      <div class="toggle-pill"><div class="toggle-knob"></div></div>227    </div>228    <div class="filters-btn">229      <span>Filters</span>230      <svg class="chevron" viewBox="0 0 24 24">231        <path d="M9 6l6 6-6 6" stroke="#007185" stroke-width="2" fill="none" stroke-linecap="round"/>232      </svg>233    </div>234  </div>235 236  <!-- Section Title -->237  <div class="section-title">Godrej Smart Door Locks for Home and Office</div>238  <div class="sponsored-note">239    <span>Sponsored</span>240    <svg width="26" height="26" viewBox="0 0 24 24">241      <circle cx="12" cy="12" r="10" stroke="#999" stroke-width="2" fill="none"/>242      <text x="12" y="15" text-anchor="middle" font-size="12" fill="#999">i</text>243    </svg>244  </div>245 246  <!-- Sponsored products row -->247  <div class="products-row">248    <div>249      <div class="img-box" style="width:100%; height:260px;">[IMG: Godrej Locks Banner]</div>250      <div class="sponsored-inline">Shop Godrej Locks</div>251    </div>252    <div class="deal-card">253      <div class="img-box" style="width:100%; height:260px;">[IMG: Godrej Smart Lock Product]</div>254      <div class="deal-badge">Limited time Deal</div>255      <div class="price-row">₹8,699 <span class="prime-bolt">prime</span></div>256      <div class="mrp-row">₹14,999 (42% off)</div>257    </div>258  </div>259 260  <!-- Product Card -->261  <div class="product-card">262    <div class="img-box product-image">[IMG: QUBO Smart Door Lock]</div>263    <div class="product-info">264      <div class="sponsored-tag">Sponsored</div>265      <div class="product-title">266        QUBO Smart Door Lock Select from Hero Group | 5-Way Unlocking | Fingerprint | Pincode...267      </div>268      <div class="ratings">269        <span>4.4</span>270        <div class="stars">271          <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.4 1.6-6.9L2 9.8l7-0.7L12 3l3 6.1 7 0.7-5.4 4.1 1.6 6.9z" fill="#F4B400"/></svg>272          <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.4 1.6-6.9L2 9.8l7-0.7L12 3l3 6.1 7 0.7-5.4 4.1 1.6 6.9z" fill="#F4B400"/></svg>273          <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.4 1.6-6.9L2 9.8l7-0.7L12 3l3 6.1 7 0.7-5.4 4.1 1.6 6.9z" fill="#F4B400"/></svg>274          <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.4 1.6-6.9L2 9.8l7-0.7L12 3l3 6.1 7 0.7-5.4 4.1 1.6 6.9z" fill="#F4B400"/></svg>275          <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.4 1.6-6.9L2 9.8l7-0.7L12 3l3 6.1 7 0.7-5.4 4.1 1.6 6.9z" fill="#F4B400" opacity="0.5"/></svg>276        </div>277        <span style="color:#555; margin-left:8px;">(718)</span>278      </div>279      <div style="color:#555; font-size:34px; margin-top:6px;">100+ bought in past month</div>280 281      <div class="festival-badge">Great Indian Festival</div>282 283      <div class="price-block">₹14,990284        <span class="mrp-strike">M.R.P: ₹29,990</span>285        <span class="off-note">(50% off)</span>286      </div>287      <div class="emi-note">Save extra with No Cost EMI</div>288 289      <div class="delivery">290        <span class="prime">prime</span> Get it by <b>Tomorrow, 11 November</b>291      </div>292      <div class="free-delivery">FREE Delivery by Amazon</div>293    </div>294  </div>295 296  <!-- Another sponsored stub for continuity (short) -->297  <div style="margin: 12px 24px; background:#fff; border-radius:16px; padding:24px;">298    <div class="sponsored-tag">Sponsored</div>299    <div style="display:flex; gap:24px; align-items:center; margin-top:12px;">300      <div class="img-box" style="width:180px; height:180px;">[IMG: LAVNA Smart Digital Door Lock]</div>301      <div style="font-size:40px; font-weight:700; color:#111;">LAVNA Smart Digital Door Lock with Fingerprint, Mobile app, PIN...</div>302    </div>303  </div>304 305  <!-- Bottom swipe bar mimic -->306  <div class="bottom-swipe"></div>307 308  <!-- Bottom navigation -->309  <div class="bottom-nav">310    <div class="nav-item">311      <div class="nav-icon">312        <svg width="52" height="52" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" fill="#111"/></svg>313      </div>314      <div>Home</div>315    </div>316    <div class="nav-item">317      <div class="nav-icon">318        <svg width="52" height="52" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#111"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke="#111" stroke-width="2" fill="none"/></svg>319      </div>320      <div>You</div>321    </div>322    <div class="nav-item">323      <div class="nav-icon">324        <svg width="52" height="52" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="#111"/><path d="M8 8h8v8H8z" fill="#fff"/></svg>325      </div>326      <div>More</div>327    </div>328    <div class="nav-item">329      <div class="nav-icon">330        <svg width="52" height="52" viewBox="0 0 24 24"><path d="M6 6h14l-2 12H6L4 6h2z" stroke="#111" stroke-width="2" fill="none"/><circle cx="9" cy="20" r="1.6" fill="#111"/><circle cx="17" cy="20" r="1.6" fill="#111"/></svg>331      </div>332      <div>Cart</div>333    </div>334    <div class="nav-item">335      <div class="nav-icon">336        <svg width="52" height="52" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#111" stroke-width="2"/></svg>337      </div>338      <div>Menu</div>339    </div>340  </div>341 342</div>343</body>344</html>