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>ShopClues Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15  }16 17  /* Top colored status/header background */18  .top-teal {19    position: absolute;20    left: 0; top: 0; right: 0;21    height: 120px;22    background: #3aa5ad;23  }24 25  /* Brand row */26  .brand-bar {27    position: absolute;28    left: 0; right: 0; top: 120px;29    height: 120px;30    background: #ffffff;31    display: flex;32    align-items: center;33    padding: 0 36px;34    box-sizing: border-box;35  }36  .icon-btn {37    width: 72px; height: 72px;38    display: flex; align-items: center; justify-content: center;39    cursor: default;40  }41  .brand {42    font-weight: 800;43    font-size: 48px;44    letter-spacing: 1px;45    color: #1a1a1a;46    margin-left: 12px;47  }48  .grow { flex: 1; }49 50  /* Search area */51  .search-wrap {52    position: absolute;53    left: 0; right: 0; top: 240px;54    padding: 18px 36px 12px;55    box-sizing: border-box;56    background: #ffffff;57  }58  .search-row {59    height: 100px;60    border-radius: 16px;61    background: #f1f1f1;62    display: flex; align-items: center;63    padding: 0 0 0 28px;64    box-sizing: border-box;65  }66  .search-row input {67    border: none; outline: none; background: transparent;68    font-size: 38px; color: #555;69    width: calc(100% - 160px);70  }71  .search-btn {72    width: 160px; height: 100%;73    border-top-right-radius: 16px; border-bottom-right-radius: 16px;74    background: linear-gradient(90deg, #ffb072, #f56b52);75    display: flex; align-items: center; justify-content: center;76  }77 78  /* Location row */79  .location-row {80    position: absolute;81    left: 0; right: 0; top: 352px;82    height: 78px;83    display: flex; align-items: center;84    padding: 0 36px;85    box-sizing: border-box;86    color: #6b6b6b;87    font-size: 36px;88    border-bottom: 1px solid #eee;89    background: #ffffff;90  }91  .location-row a { color: #0aa0c0; text-decoration: none; font-weight: 600; }92  .location-row .close {93    margin-left: auto;94    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; color: #aaa;95  }96 97  /* Sign-in card */98  .signin-card {99    position: absolute;100    left: 24px; right: 24px; top: 442px;101    height: 200px;102    background: #ffffff;103    border-radius: 18px;104    box-shadow: 0 3px 10px rgba(0,0,0,0.08);105    display: flex; align-items: center;106    padding: 0 28px;107    box-sizing: border-box;108  }109  .avatar {110    width: 120px; height: 120px; border-radius: 60px;111    background: #fde1d6; color: #f28a62;112    display: flex; align-items: center; justify-content: center;113    margin-right: 24px;114  }115  .signin-text { flex: 1; }116  .signin-title { font-size: 40px; font-weight: 700; color: #333; }117  .signin-sub { font-size: 34px; color: #8a8a8a; margin-top: 6px; }118  .signin-btn {119    background: #ff8b54; color: #fff; font-weight: 700;120    padding: 20px 34px; border-radius: 14px; font-size: 34px;121  }122 123  /* Categories row */124  .cat-strip {125    position: absolute;126    left: 0; right: 0; top: 662px;127    height: 210px;128    background: #ffffff;129    display: flex; align-items: center; justify-content: space-between;130    padding: 0 24px;131    border-top: 1px solid #eee; border-bottom: 1px solid #eee;132    box-sizing: border-box;133  }134  .cat {135    width: 200px; text-align: center; color: #555;136    font-size: 30px;137  }138  .cat .circle {139    width: 120px; height: 120px; margin: 0 auto 12px;140    border-radius: 60px; background: #E0E0E0; border: 1px solid #BDBDBD;141    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;142  }143 144  /* Image placeholders (banners) */145  .img-ph {146    background: #E0E0E0;147    border: 1px solid #BDBDBD;148    color: #757575;149    display: flex; align-items: center; justify-content: center;150    text-align: center;151  }152 153  .banner-thin {154    position: absolute; left: 0; right: 0; top: 874px;155    height: 180px;156    margin: 0 0;157  }158 159  .banner-hero {160    position: absolute; left: 0; right: 0; top: 1064px;161    height: 390px;162    border-radius: 10px;163  }164  .dots {165    position: absolute;166    top: 1460px;167    left: 50%;168    transform: translateX(-50%);169    display: flex; gap: 12px;170  }171  .dot {172    width: 26px; height: 10px; border-radius: 6px;173    background: #d0d0d0;174  }175  .dot.active { background: #9e9e9e; width: 40px; }176 177  .banner-refurb {178    position: absolute; left: 0; right: 0; top: 1496px;179    height: 280px;180  }181 182  .banner-next {183    position: absolute; left: 0; right: 0; top: 1790px;184    height: 160px;185  }186 187  /* Bottom navigation */188  .bottom-nav {189    position: absolute; left: 0; right: 0; bottom: 0;190    height: 200px; background: #ffffff;191    border-top: 1px solid #e6e6e6;192    display: flex; align-items: center; justify-content: space-around;193  }194  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #7a7a7a; font-size: 28px; }195  .nav-item.active { color: #2aa7a9; }196  .nav-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }197 198</style>199</head>200<body>201<div id="render-target">202 203  <div class="top-teal"></div>204 205  <div class="brand-bar">206    <div class="icon-btn">207      <svg width="48" height="48" viewBox="0 0 24 24" fill="#3c3c3c"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>208    </div>209    <div class="brand">SHOPCLUES</div>210    <div class="grow"></div>211    <div class="icon-btn">212      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#3c3c3c" stroke-width="2"><path d="M6 6h15l-1.5 9h-12z"/><circle cx="9" cy="19" r="1.5"/><circle cx="17" cy="19" r="1.5"/></svg>213    </div>214  </div>215 216  <div class="search-wrap">217    <div class="search-row">218      <input type="text" placeholder="What is on your mind today?">219      <div class="search-btn">220        <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 14.5 15l.27.28v.79L20 21.5 21.5 20zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>221      </div>222    </div>223  </div>224 225  <div class="location-row">226    <div>Hi, You are in <a href="#">Delhi</a></div>227    <div class="close">228      <svg width="36" height="36" viewBox="0 0 24 24" fill="#b0b0b0"><path d="M18.3 5.71L12 12.01 5.7 5.7 4.29 7.11l6.3 6.3-6.3 6.29 1.41 1.41 6.3-6.29 6.29 6.29 1.41-1.41-6.29-6.29 6.29-6.3z"/></svg>229    </div>230  </div>231 232  <div class="signin-card">233    <div class="avatar">234      <svg width="64" height="64" viewBox="0 0 24 24" fill="#f28a62"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z"/></svg>235    </div>236    <div class="signin-text">237      <div class="signin-title">You are missing out</div>238      <div class="signin-sub">Sign in for the best offers</div>239    </div>240    <div class="signin-btn">SIGN IN</div>241  </div>242 243  <div class="cat-strip">244    <div class="cat">245      <div class="circle">Rocking</div>246      Rocking Deals247    </div>248    <div class="cat">249      <div class="circle">Express</div>250      Express Shipping251    </div>252    <div class="cat">253      <div class="circle">Refurb</div>254      Refurb Smartphones255    </div>256    <div class="cat">257      <div class="circle">Men</div>258      Men's Clothing259    </div>260    <div class="cat">261      <div class="circle">Gadget</div>262      Gadget Accessories263    </div>264  </div>265 266  <div class="img-ph banner-thin">[IMG: Nokia Nostalgia - Upto 85% Off banner]</div>267 268  <div class="img-ph banner-hero">[IMG: Monsoon Maha Bachat mobile store banner - Upto 90% Off]</div>269  <div class="dots">270    <div class="dot active"></div>271    <div class="dot"></div>272    <div class="dot"></div>273    <div class="dot"></div>274  </div>275 276  <div class="img-ph banner-refurb">[IMG: Refurbished best selling smartphones - From ₹999/M + Upto ₹1500 OFF (REFURB15)]</div>277 278  <div class="img-ph banner-next">[IMG: Starting at deals banner]</div>279 280  <div class="bottom-nav">281    <div class="nav-item active">282      <div class="nav-icon">283        <svg width="56" height="56" viewBox="0 0 24 24" fill="#2aa7a9"><path d="M12 3l9 8h-3v9H6v-9H3z"/></svg>284      </div>285      Home286    </div>287    <div class="nav-item">288      <div class="nav-icon">289        <svg width="56" height="56" viewBox="0 0 24 24" fill="#7a7a7a"><path d="M3 3h8v8H3zm10 0h8v8h-8zM3 13h8v8H3zm10 8v-8h8v8z"/></svg>290      </div>291      Categories292    </div>293    <div class="nav-item">294      <div class="nav-icon">295        <svg width="56" height="56" viewBox="0 0 24 24" fill="#7a7a7a"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>296      </div>297      Community298    </div>299    <div class="nav-item">300      <div class="nav-icon">301        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#7a7a7a" stroke-width="2"><path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 5.65-7 10-7 10z"/></svg>302      </div>303      Wishlist304    </div>305    <div class="nav-item">306      <div class="nav-icon">307        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#7a7a7a" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg>308      </div>309      Account310    </div>311  </div>312 313</div>314</body>315</html>