GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Shopping UI - More Like This</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1440px;9    height: 3120px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    color: #222;14  }15 16  /* Top status bar */17  .status-bar {18    height: 90px;19    padding: 0 40px;20    display: flex;21    align-items: center;22    font-size: 44px;23    color: #222;24  }25  .status-right {26    margin-left: auto;27    display: flex;28    align-items: center;29    gap: 28px;30    color: #666;31    font-size: 38px;32  }33 34  /* App bar */35  .app-bar {36    height: 120px;37    padding: 0 30px;38    display: flex;39    align-items: center;40    border-bottom: 1px solid #e5e5e5;41  }42  .icon-btn {43    width: 96px;44    height: 96px;45    border-radius: 48px;46    display: inline-flex;47    justify-content: center;48    align-items: center;49    margin-right: 18px;50    background: #f4f4f4;51    border: 1px solid #ddd;52  }53  .icon {54    width: 48px;55    height: 48px;56    fill: #333;57  }58  .spacer { flex: 1; }59 60  /* Tabs */61  .tabs {62    display: flex;63    align-items: center;64    gap: 26px;65    padding: 24px 30px;66    border-bottom: 1px solid #e9e9e9;67    background: #fafafa;68  }69  .tab {70    padding: 28px 40px;71    font-size: 46px;72    color: #666;73    border-radius: 20px;74  }75  .tab.active {76    background: #f1f1f7;77    color: #000;78    font-weight: 700;79  }80 81  /* Grid of product cards */82  .content {83    padding: 30px;84  }85  .grid {86    display: flex;87    flex-wrap: wrap;88    gap: 32px;89  }90  .card {91    width: 690px;92    background: #fff;93    border: 1px solid #e2e2e2;94    border-radius: 24px;95    overflow: hidden;96    position: relative;97  }98  .card .image {99    width: 100%;100    height: 700px;101    background: #E0E0E0;102    border-bottom: 1px solid #BDBDBD;103    display: flex;104    align-items: center;105    justify-content: center;106    color: #757575;107    font-size: 42px;108    text-align: center;109    padding: 20px;110  }111 112  .badge {113    position: absolute;114    left: 24px;115    top: 720px; /* just under image edge to mimic screenshot label on list area */116    transform: translateY(-50%);117    padding: 14px 22px;118    border-radius: 100px;119    font-size: 34px;120    font-weight: 700;121    color: #2f6f3e;122    background: #dbf4dd;123    border: 1px solid #a9d7af;124  }125  .badge.purple {126    color: #7d49c2;127    background: #efe6ff;128    border-color: #c9b6ee;129  }130 131  .details {132    padding: 28px;133  }134  .title {135    font-size: 42px;136    line-height: 1.2;137    color: #222;138    margin-bottom: 14px;139  }140  .price-row {141    display: flex;142    align-items: baseline;143    gap: 20px;144    font-size: 44px;145    margin-top: 8px;146  }147  .price {148    font-weight: 800;149    color: #000;150  }151  .mrp {152    color: #999;153    text-decoration: line-through;154    font-size: 38px;155  }156  .off {157    color: #b3872e;158    font-weight: 700;159    font-size: 40px;160    margin-left: auto;161  }162 163  /* Bottom shadow hint to mimic app content cut-off */164  .bottom-fade {165    position: absolute;166    left: 0; right: 0; bottom: 0;167    height: 120px;168    background: linear-gradient(to top, rgba(0,0,0,0.06), rgba(0,0,0,0));169  }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status bar -->176  <div class="status-bar">177    <div>2:26</div>178    <div class="status-right">179      <span>●</span>180      <span>Wi‑Fi</span>181      <span>🔋</span>182    </div>183  </div>184 185  <!-- App bar with back and quick actions -->186  <div class="app-bar">187    <div class="icon-btn" title="Back">188      <svg class="icon" viewBox="0 0 24 24">189        <path d="M15 5l-7 7 7 7" />190      </svg>191    </div>192    <div class="spacer"></div>193    <div class="icon-btn" title="Search">194      <svg class="icon" viewBox="0 0 24 24">195        <circle cx="11" cy="11" r="7"></circle>196        <path d="M20 20l-4-4"></path>197      </svg>198    </div>199    <div class="icon-btn" title="Home">200      <svg class="icon" viewBox="0 0 24 24">201        <path d="M3 10l9-7 9 7v10H3z"></path>202      </svg>203    </div>204    <div class="icon-btn" title="Cart">205      <svg class="icon" viewBox="0 0 24 24">206        <path d="M3 6h2l2 12h10l2-8H7"></path>207        <circle cx="9" cy="20" r="2"></circle>208        <circle cx="17" cy="20" r="2"></circle>209      </svg>210    </div>211  </div>212 213  <!-- Tabs -->214  <div class="tabs">215    <div class="tab">Details</div>216    <div class="tab active">More Like This</div>217    <div class="tab">Reviews</div>218  </div>219 220  <!-- Content grid -->221  <div class="content">222    <div class="grid">223 224      <!-- Card 1 -->225      <div class="card">226        <div class="image">[IMG: 102pc drill machine toolkit in hard case]</div>227        <div class="badge">PRICE DROP</div>228        <div class="details">229          <div class="title">BD - 102pc drill machine 650W Toolkit Set</div>230          <div class="price-row">231            <div class="price">₹2,973</div>232            <div class="mrp">₹4,999</div>233            <div class="off">41% OFF</div>234          </div>235        </div>236      </div>237 238      <!-- Card 2 -->239      <div class="card">240        <div class="image">[IMG: Orange 46 in 1 tool kit with sockets]</div>241        <div class="details">242          <div class="title">Shopper52 - 46 in 1 Tool Kit & Ratchet Set</div>243          <div class="price-row">244            <div class="price">₹547</div>245            <div class="mrp">₹1,999</div>246            <div class="off">73% OFF</div>247          </div>248        </div>249      </div>250 251      <!-- Card 3 -->252      <div class="card">253        <div class="image">[IMG: Black 46 pcs screwdriver and socket set]</div>254        <div class="badge">PRICE DROP</div>255        <div class="details">256          <div class="title">BD 46 Pcs Screwdriver Set</div>257          <div class="price-row">258            <div class="price">₹499</div>259            <div class="mrp">₹1,250</div>260            <div class="off">60% OFF</div>261          </div>262        </div>263      </div>264 265      <!-- Card 4 -->266      <div class="card">267        <div class="image">[IMG: Precision screwdriver kit with golden handle and many bits]</div>268        <div class="badge purple">TOP RATED</div>269        <div class="details">270          <div class="title">HOMETALES 25 in 1 Screwdriver Precision Kit</div>271          <div class="price-row">272            <div class="price">₹299</div>273            <div class="mrp">₹1,199</div>274            <div class="off">75% OFF</div>275          </div>276        </div>277      </div>278 279      <!-- Card 5 (additional row preview) -->280      <div class="card">281        <div class="image">[IMG: Compact air pump / electric tool]</div>282        <div class="details">283          <div class="title">Portable Air Pump & Tool Accessory</div>284          <div class="price-row">285            <div class="price">₹799</div>286            <div class="mrp">₹1,499</div>287            <div class="off">47% OFF</div>288          </div>289        </div>290      </div>291 292      <!-- Card 6 -->293      <div class="card">294        <div class="image">[IMG: Red socket set in molded case]</div>295        <div class="details">296          <div class="title">Socket & Bit Set in Red Case</div>297          <div class="price-row">298            <div class="price">₹649</div>299            <div class="mrp">₹1,399</div>300            <div class="off">54% OFF</div>301          </div>302        </div>303      </div>304 305    </div>306  </div>307 308  <div class="bottom-fade"></div>309</div>310</body>311</html>