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>Hardware Shop Home</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #333;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #FFFFFF;21  }22 23  /* General layout */24  .screen {25    padding: 50px 60px 0 60px;26  }27 28  /* Search bar */29  .search-bar {30    height: 130px;31    border: 1px solid #E4E7EB;32    border-radius: 14px;33    display: flex;34    align-items: center;35    padding: 0 32px;36    gap: 24px;37    color: #607D8B;38    font-size: 46px;39    box-sizing: border-box;40  }41  .search-bar svg {42    width: 60px;43    height: 60px;44    stroke: #90A4AE;45  }46 47  /* Promo banner */48  .promo-banner {49    margin-top: 36px;50    width: 960px;51    height: 420px;52    border-radius: 22px;53    overflow: hidden;54    background: #E0E0E0;55    border: 1px solid #BDBDBD;56    display: flex;57    align-items: center;58    justify-content: center;59    color: #555;60    font-size: 38px;61  }62 63  /* Carousel indicators */64  .indicators {65    margin: 22px auto 0 auto;66    width: 220px;67    display: flex;68    justify-content: space-between;69    align-items: center;70  }71  .dot {72    width: 46px;73    height: 10px;74    border-radius: 6px;75    background: #E0E0E0;76  }77  .dot.active {78    background: #607D8B;79  }80 81  /* CTA banner */82  .cta {83    margin-top: 28px;84    height: 130px;85    background: #A8D0F0;86    border-radius: 6px;87    display: flex;88    align-items: center;89    justify-content: center;90    color: #0F2B46;91    font-size: 46px;92    font-weight: 500;93  }94 95  /* Categories header */96  .categories-header {97    margin-top: 42px;98    height: 80px;99    display: flex;100    align-items: center;101    justify-content: space-between;102  }103  .categories-header .title {104    font-size: 58px;105    color: #607D8B;106    font-weight: 500;107  }108  .categories-header .icon-btn {109    width: 72px;110    height: 72px;111    display: inline-flex;112    align-items: center;113    justify-content: center;114    border-radius: 50%;115  }116  .categories-header .icon-btn svg {117    width: 54px;118    height: 54px;119    stroke: #90A4AE;120  }121 122  /* Categories grid */123  .categories-grid {124    margin-top: 30px;125    display: grid;126    grid-template-columns: repeat(4, 1fr);127    gap: 34px 10px;128    text-align: center;129  }130  .cat-item {131    padding-top: 12px;132  }133  .cat-thumb {134    width: 160px;135    height: 160px;136    margin: 0 auto 18px auto;137    background: #E0E0E0;138    border: 1px solid #BDBDBD;139    display: flex;140    align-items: center;141    justify-content: center;142    color: #757575;143    font-size: 26px;144    border-radius: 16px;145  }146  .cat-label {147    font-size: 34px;148    color: #37474F;149    line-height: 1.2;150  }151 152  /* Secondary banner */153  .flash-banner {154    margin: 40px auto 0 auto;155    width: 960px;156    height: 220px;157    background: #E0E0E0;158    border: 1px solid #BDBDBD;159    border-radius: 12px;160    display: flex;161    align-items: center;162    justify-content: center;163    color: #555;164    font-size: 36px;165  }166 167  /* Bottom navigation */168  .bottom-nav {169    position: absolute;170    left: 0;171    bottom: 0;172    width: 1080px;173    height: 160px;174    background: #FFFFFF;175    border-top: 1px solid #E0E0E0;176    display: flex;177    justify-content: space-around;178    align-items: center;179  }180  .nav-item svg {181    width: 64px;182    height: 64px;183  }184  .nav-item.home svg {185    fill: #E53935;186    stroke: none;187  }188  .nav-item.default svg {189    fill: #90A4AE;190    stroke: none;191  }192</style>193</head>194<body>195<div id="render-target">196  <div class="screen">197 198    <!-- Search bar -->199    <div class="search-bar">200      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">201        <circle cx="10" cy="10" r="7"></circle>202        <line x1="15" y1="15" x2="22" y2="22"></line>203      </svg>204      <div>Search products</div>205    </div>206 207    <!-- Promo banner -->208    <div class="promo-banner">[IMG: Hardware Promo Banner - Cart with Boxes]</div>209 210    <!-- Carousel indicators -->211    <div class="indicators">212      <div class="dot active"></div>213      <div class="dot"></div>214      <div class="dot"></div>215      <div class="dot"></div>216      <div class="dot"></div>217    </div>218 219    <!-- CTA banner -->220    <div class="cta">Bulk Order? Get a Quote Here</div>221 222    <!-- Categories header -->223    <div class="categories-header">224      <div class="title">Categories</div>225      <div class="icon-btn">226        <svg viewBox="0 0 24 24" fill="none" stroke-width="2">227          <circle cx="10" cy="10" r="7"></circle>228          <line x1="15" y1="15" x2="22" y2="22"></line>229        </svg>230      </div>231    </div>232 233    <!-- Categories grid -->234    <div class="categories-grid">235      <div class="cat-item">236        <div class="cat-thumb">[IMG: Shovel Icon]</div>237        <div class="cat-label">Concreting & Masonry</div>238      </div>239      <div class="cat-item">240        <div class="cat-thumb">[IMG: Steel Beam Icon]</div>241        <div class="cat-label">Steel</div>242      </div>243      <div class="cat-item">244        <div class="cat-thumb">[IMG: Wood Planks Icon]</div>245        <div class="cat-label">Wood Products</div>246      </div>247      <div class="cat-item">248        <div class="cat-thumb">[IMG: Roofing Sheet Icon]</div>249        <div class="cat-label">Roofing & Insulation</div>250      </div>251 252      <div class="cat-item">253        <div class="cat-thumb">[IMG: Paint Bucket Icon]</div>254        <div class="cat-label">Painting Supplies</div>255      </div>256      <div class="cat-item">257        <div class="cat-thumb">[IMG: Power Drill Icon]</div>258        <div class="cat-label">Tools & Equipments</div>259      </div>260      <div class="cat-item">261        <div class="cat-thumb">[IMG: Tiles Icon]</div>262        <div class="cat-label">Tiling Supplies</div>263      </div>264      <div class="cat-item">265        <div class="cat-thumb">[IMG: Bricks Icon]</div>266        <div class="cat-label">Finishing Materials</div>267      </div>268    </div>269 270    <!-- Secondary promo -->271    <div class="flash-banner">[IMG: FLASH SALE Banner]</div>272  </div>273 274  <!-- Bottom navigation -->275  <div class="bottom-nav">276    <div class="nav-item home">277      <svg viewBox="0 0 24 24">278        <path d="M12 3l10 8h-3v10h-6V14H11v7H5V11H2l10-8z"></path>279      </svg>280    </div>281    <div class="nav-item default">282      <svg viewBox="0 0 24 24">283        <rect x="3" y="5" width="18" height="2"></rect>284        <rect x="3" y="11" width="18" height="2"></rect>285        <rect x="3" y="17" width="18" height="2"></rect>286      </svg>287    </div>288    <div class="nav-item default">289      <svg viewBox="0 0 24 24">290        <path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM21 21l-5.2-5.2"></path>291      </svg>292    </div>293    <div class="nav-item default">294      <svg viewBox="0 0 24 24">295        <path d="M6 7h12l-1.5 12H7.5L6 7z"></path>296        <path d="M9 7V5a3 3 0 0 1 6 0v2"></path>297      </svg>298    </div>299    <div class="nav-item default">300      <svg viewBox="0 0 24 24">301        <circle cx="12" cy="8" r="4"></circle>302        <path d="M4 21c0-4 4-7 8-7s8 3 8 7"></path>303      </svg>304    </div>305  </div>306</div>307</body>308</html>