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>Product Grid UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #454545;26    font-size: 40px;27    border-bottom: 1px solid #eee;28  }29  .sb-left, .sb-right { display: flex; align-items: center; gap: 26px; }30  .icon { width: 44px; height: 44px; display: inline-block; }31 32  /* Grid area */33  .content {34    height: 1760px;35    overflow: hidden;36  }37  .grid {38    display: grid;39    grid-template-columns: 1fr 1fr;40    /* no outer gap; we’ll draw separators like in the screenshot */41  }42  .card {43    height: 580px;44    border-right: 1px solid #E7E7E7;45    border-bottom: 1px solid #E7E7E7;46    padding: 22px 26px 24px 26px;47    box-sizing: border-box;48    background: #fff;49  }50  .product-image {51    width: 100%;52    height: 340px;53    background: #E0E0E0;54    border: 1px solid #BDBDBD;55    display: flex;56    align-items: center;57    justify-content: center;58    color: #757575;59    font-size: 30px;60    text-align: center;61  }62  .dots {63    display: flex;64    gap: 12px;65    margin: 16px 0 14px;66    justify-content: center;67  }68  .dot {69    width: 14px; height: 14px; border-radius: 50%;70    background: #D0D0D0;71  }72  .dot.active { background: #909090; }73  .title {74    font-size: 34px;75    color: #444;76    white-space: nowrap;77    overflow: hidden;78    text-overflow: ellipsis;79    margin-bottom: 8px;80  }81  .price {82    font-size: 44px;83    font-weight: 700;84    color: #111;85  }86 87  /* Benefits bar */88  .benefits {89    height: 240px;90    border-top: 1px solid #ECECEC;91    border-bottom: 1px solid #ECECEC;92    display: flex;93    align-items: center;94    justify-content: space-around;95    padding: 0 30px;96    box-sizing: border-box;97    background: #fff;98  }99  .benefit {100    display: flex;101    align-items: center;102    gap: 24px;103    color: #333;104    font-size: 36px;105  }106  .benefit .bicon {107    width: 72px; height: 72px;108  }109  .divider {110    width: 1px; height: 80px; background: #E0E0E0;111  }112 113  /* Bottom actions bar */114  .actions {115    height: 180px;116    display: flex;117    align-items: center;118    justify-content: space-between;119    padding: 0 40px;120    border-top: 1px solid #EEE;121    background: #fff;122    box-sizing: border-box;123  }124  .action {125    display: flex; align-items: center; gap: 24px;126    font-size: 40px; color: #222;127  }128  .action .aicon { width: 60px; height: 60px; }129 130  /* Home indicator */131  .home-indicator {132    height: 100px;133    display: flex;134    align-items: center;135    justify-content: center;136    background: #fff;137  }138  .pill {139    width: 280px; height: 16px; border-radius: 16px; background: #000000;140    opacity: 0.75;141  }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Status Bar -->148  <div class="status-bar">149    <div class="sb-left">150      <span>9:52</span>151      <!-- Light bulb icon -->152      <svg class="icon" viewBox="0 0 24 24">153        <circle cx="12" cy="10" r="5" fill="#7a7a7a"></circle>154        <rect x="10" y="15" width="4" height="5" rx="1" fill="#7a7a7a"></rect>155      </svg>156      <!-- Cloud icon -->157      <svg class="icon" viewBox="0 0 24 24">158        <path d="M7 14c-2.2 0-4-1.7-4-3.8S4.5 6 6.7 6c.8-2.2 3-3.7 5.3-3.3 2.7.4 4.6 2.8 4.5 5.4h1c2 0 3.5 1.6 3.5 3.5S19.5 15 17.6 15H7z" fill="#7a7a7a"></path>159      </svg>160    </div>161    <div class="sb-right">162      <!-- WiFi icon -->163      <svg class="icon" viewBox="0 0 24 24">164        <path d="M2 9c5-4 15-4 20 0" stroke="#7a7a7a" stroke-width="2" fill="none"></path>165        <path d="M5 12c4-3 10-3 14 0" stroke="#7a7a7a" stroke-width="2" fill="none"></path>166        <circle cx="12" cy="16" r="2" fill="#7a7a7a"></circle>167      </svg>168      <!-- Battery icon + percentage -->169      <svg class="icon" viewBox="0 0 28 16">170        <rect x="1" y="3" width="22" height="10" rx="2" stroke="#7a7a7a" fill="none"></rect>171        <rect x="3" y="5" width="18" height="6" rx="1" fill="#7a7a7a"></rect>172        <rect x="23" y="6" width="3" height="4" rx="1" fill="#7a7a7a"></rect>173      </svg>174      <span>100%</span>175    </div>176  </div>177 178  <!-- Product Grid -->179  <div class="content">180    <div class="grid">181      <!-- Card 1 -->182      <div class="card">183        <div class="product-image">[IMG: Product - White cotton men's vest]</div>184        <div class="dots">185          <div class="dot active"></div><div class="dot"></div><div class="dot"></div>186        </div>187        <div class="title">Jockey - White Cotton Men's Vest</div>188        <div class="price">₹657</div>189      </div>190      <!-- Card 2 -->191      <div class="card">192        <div class="product-image">[IMG: Product - Black sleeveless vest pack]</div>193        <div class="dots">194          <div class="dot active"></div><div class="dot"></div><div class="dot"></div>195        </div>196        <div class="title">Jockey Black Sleeveless Vests Pack</div>197        <div class="price">₹1,047</div>198      </div>199      <!-- Card 3 -->200      <div class="card">201        <div class="product-image">[IMG: Model wearing black sleeveless vest with gray trim]</div>202        <div class="dots">203          <div class="dot active"></div><div class="dot"></div><div class="dot"></div>204        </div>205        <div class="title">Jockey Black Sleeveless Vests Style</div>206        <div class="price">₹349</div>207      </div>208      <!-- Card 4 -->209      <div class="card">210        <div class="product-image">[IMG: Model wearing black sleeveless vest]</div>211        <div class="dots">212          <div class="dot active"></div><div class="dot"></div><div class="dot"></div>213        </div>214        <div class="title">Jockey Black Sleeveless Vests Style</div>215        <div class="price">₹319</div>216      </div>217      <!-- Card 5 -->218      <div class="card">219        <div class="product-image">[IMG: Two models wearing black sleeveless vests]</div>220        <div class="dots">221          <div class="dot active"></div><div class="dot"></div><div class="dot"></div>222        </div>223        <div class="title">Jockey Black Sleeveless Vests Pack</div>224        <div class="price">₹698</div>225      </div>226      <!-- Card 6 -->227      <div class="card">228        <div class="product-image">[IMG: Model wearing black sleeveless vest]</div>229        <div class="dots">230          <div class="dot active"></div><div class="dot"></div><div class="dot"></div>231        </div>232        <div class="title">Jockey Black Sleeveless Vests Style</div>233        <div class="price">₹349</div>234      </div>235    </div>236  </div>237 238  <!-- Benefits Bar -->239  <div class="benefits">240    <div class="benefit">241      <!-- Truck -->242      <svg class="bicon" viewBox="0 0 24 24">243        <rect x="2" y="6" width="12" height="8" rx="2" fill="#EF5350"></rect>244        <rect x="14" y="8" width="6" height="6" rx="1" fill="#EF5350"></rect>245        <circle cx="7" cy="16" r="2" fill="#424242"></circle>246        <circle cx="18" cy="16" r="2" fill="#424242"></circle>247      </svg>248      <div>Free Delivery</div>249    </div>250    <div class="divider"></div>251    <div class="benefit">252      <!-- Box -->253      <svg class="bicon" viewBox="0 0 24 24">254        <path d="M3 9l9-5 9 5v8l-9 5-9-5V9z" fill="#FF7043"></path>255        <path d="M12 4v16" stroke="#fff" stroke-width="2"></path>256      </svg>257      <div>7 Days Easy Returns</div>258    </div>259    <div class="divider"></div>260    <div class="benefit">261      <!-- Badge -->262      <svg class="bicon" viewBox="0 0 24 24">263        <circle cx="12" cy="12" r="9" fill="#E53935"></circle>264        <polygon points="12,7 13.6,10.6 17.6,11 14.8,13.2 15.6,17 12,15.2 8.4,17 9.2,13.2 6.4,11 10.4,10.6" fill="#fff"></polygon>265      </svg>266      <div>100% Quality Guaranteed</div>267    </div>268  </div>269 270  <!-- Bottom Actions -->271  <div class="actions">272    <div class="action">273      <!-- Sort icon -->274      <svg class="aicon" viewBox="0 0 24 24">275        <path d="M7 4v12" stroke="#444" stroke-width="2" fill="none"></path>276        <path d="M4 8l3-4 3 4" fill="#444"></path>277        <path d="M17 20V8" stroke="#444" stroke-width="2" fill="none"></path>278        <path d="M14 16l3 4 3-4" fill="#444"></path>279      </svg>280      <div>Sort</div>281    </div>282    <div></div>283    <div class="action">284      <!-- Filter icon -->285      <svg class="aicon" viewBox="0 0 24 24">286        <path d="M4 6h16v2H4zM6 11h12v2H6zM9 16h6v2H9z" fill="#444"></path>287      </svg>288      <div>Filter</div>289    </div>290  </div>291 292  <!-- Home indicator -->293  <div class="home-indicator">294    <div class="pill"></div>295  </div>296 297</div>298</body>299</html>