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>Categories - UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #2b2f33; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Header */18  .top-header {19    position: relative;20    height: 360px;21    background: #ffffff;22  }23  .top-header .pill {24    position: absolute;25    left: 40px;26    top: 98px;27    width: 160px;28    height: 26px;29    background: #EFF3F7;30    border-radius: 20px;31  }32  .top-header .tile {33    position: absolute;34    left: 160px;35    top: 128px;36    width: 320px;37    height: 140px;38    background: #E0E0E0;39    border: 1px solid #BDBDBD;40    border-radius: 8px;41    display: flex; align-items: center; justify-content: center;42    color: #757575; font-size: 28px;43  }44  .top-header .avatar {45    position: absolute;46    right: 40px;47    top: 88px;48    width: 120px; height: 120px;49    background: #E0E0E0;50    border: 1px solid #BDBDBD;51    border-radius: 50%;52    display: flex; align-items: center; justify-content: center;53    color: #757575; font-size: 24px;54  }55  .top-header .banner {56    position: absolute;57    left: 32px;58    right: 32px;59    top: 220px;60    height: 110px;61    background: #E0E0E0;62    border: 1px solid #BDBDBD;63    border-radius: 18px;64    display: flex; align-items: center; justify-content: center;65    color: #757575; font-size: 30px;66  }67  .header-shadow {68    position: absolute;69    left: 0; right: 0;70    top: 360px;71    height: 16px;72    box-shadow: 0 2px 6px rgba(0,0,0,0.06);73    background: transparent;74  }75 76  /* Content area */77  .content {78    position: absolute;79    top: 376px;80    left: 0;81    width: 1080px;82    height: calc(2400px - 376px - 180px);83    background: #E8EDF3;84  }85 86  /* Feature badges row */87  .features {88    display: flex;89    justify-content: space-around;90    padding: 50px 60px 30px;91    color: #6F7B8A;92    font-size: 36px;93  }94  .feature {95    display: flex;96    align-items: center;97    gap: 20px;98    white-space: nowrap;99  }100  .feature svg { width: 46px; height: 46px; stroke: #90A0B4; fill: none; stroke-width: 2.8; }101 102  /* Section title */103  .section-title {104    margin: 40px 80px;105    display: flex;106    align-items: center;107    justify-content: center;108    gap: 28px;109  }110  .section-title .line {111    flex: 1;112    max-width: 220px;113    height: 2px;114    background: #C9D2DD;115  }116  .section-title .text {117    font-weight: 700;118    font-size: 44px;119    color: #2F3A48;120    letter-spacing: 0.5px;121  }122 123  .empty-msg {124    margin-top: 40px;125    text-align: center;126    font-size: 40px;127    color: #8A95A6;128  }129 130  /* Bottom nav */131  .bottom-nav {132    position: absolute;133    bottom: 0;134    left: 0;135    width: 1080px;136    height: 180px;137    background: #ffffff;138    border-top: 1px solid #E5E9F0;139    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);140    display: flex;141    justify-content: space-around;142    align-items: center;143  }144  .nav-item {145    display: flex;146    flex-direction: column;147    align-items: center;148    gap: 16px;149    color: #8A95A6;150    font-size: 32px;151  }152  .nav-item svg { width: 58px; height: 58px; stroke: #8A95A6; fill: none; stroke-width: 2.8; }153  .nav-item.active { color: #C2185B; }154  .nav-item.active svg { stroke: #C2185B; }155  /* grid icon uses fill */156  .grid-icon rect { fill: #C2185B; stroke: none; }157 158  /* OS home indicator (visual) */159  .home-indicator {160    position: absolute;161    bottom: 12px;162    left: 50%;163    transform: translateX(-50%);164    width: 240px;165    height: 10px;166    background: #D0D4DA;167    border-radius: 10px;168  }169</style>170</head>171<body>172<div id="render-target">173 174  <div class="top-header">175    <div class="pill"></div>176    <div class="tile">[IMG: Placeholder Tile]</div>177    <div class="avatar">[IMG]</div>178    <div class="banner">[IMG: Banner/Search]</div>179  </div>180  <div class="header-shadow"></div>181 182  <div class="content">183    <div class="features">184      <div class="feature">185        <!-- Shield icon -->186        <svg viewBox="0 0 48 48">187          <path d="M24 4l16 6v12c0 9-8 16-16 20-8-4-16-11-16-20V10l16-6z"></path>188          <path d="M17 24l5 5 9-9"></path>189        </svg>190        <span>Assured Quality</span>191      </div>192      <div class="feature">193        <!-- Cart + arrow (returns) -->194        <svg viewBox="0 0 48 48">195          <path d="M6 10h6l5 20h18l3-12H18"></path>196          <circle cx="20" cy="40" r="3"></circle>197          <circle cx="36" cy="40" r="3"></circle>198          <path d="M14 18l-6 6 6 6"></path>199        </svg>200        <span>Easy Returns</span>201      </div>202      <div class="feature">203        <!-- Truck icon -->204        <svg viewBox="0 0 48 48">205          <path d="M4 30V14h22v16"></path>206          <path d="M26 20h10l6 6v4H26"></path>207          <circle cx="14" cy="36" r="4"></circle>208          <circle cx="34" cy="36" r="4"></circle>209        </svg>210        <span>Free Delivery &amp; COD</span>211      </div>212    </div>213 214    <div class="section-title">215      <div class="line"></div>216      <div class="text">All Products</div>217      <div class="line"></div>218    </div>219 220    <div class="empty-msg">No Products available at the moment.</div>221  </div>222 223  <div class="bottom-nav">224    <div class="nav-item">225      <!-- Home icon -->226      <svg viewBox="0 0 48 48">227        <path d="M8 22l16-12 16 12"></path>228        <path d="M12 20v18h24V20"></path>229      </svg>230      <div>Home</div>231    </div>232    <div class="nav-item active">233      <!-- Grid icon -->234      <svg viewBox="0 0 48 48">235        <rect x="6" y="6" width="12" height="12" class="grid-icon"></rect>236        <rect x="20" y="6" width="12" height="12" class="grid-icon"></rect>237        <rect x="6" y="20" width="12" height="12" class="grid-icon"></rect>238        <rect x="20" y="20" width="12" height="12" class="grid-icon"></rect>239      </svg>240      <div>Categories</div>241    </div>242    <div class="nav-item">243      <!-- Box icon -->244      <svg viewBox="0 0 48 48">245        <path d="M8 16l16-8 16 8-16 8-16-8z"></path>246        <path d="M8 16v16l16 8 16-8V16"></path>247      </svg>248      <div>My Orders</div>249    </div>250    <div class="nav-item">251      <!-- Profile icon -->252      <svg viewBox="0 0 48 48">253        <circle cx="24" cy="16" r="8"></circle>254        <path d="M8 40c4-8 12-12 16-12s12 4 16 12"></path>255      </svg>256      <div>Profile</div>257    </div>258    <div class="home-indicator"></div>259  </div>260 261</div>262</body>263</html>