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 Grid UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color: #111;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px;19    padding: 28px 32px 0 32px;20    display: flex; align-items: flex-start; justify-content: space-between;21    font-weight: 600; color: #202124;22  }23  .status-left { display: flex; align-items: center; gap: 16px; }24  .status-time { font-size: 40px; letter-spacing: 1px; }25  .status-right { display: flex; align-items: center; gap: 28px; }26  .status-icon svg { width: 40px; height: 40px; }27 28  /* Top action icons */29  .top-actions {30    height: 120px;31    padding: 22px 40px 0 40px;32    display: flex; align-items: center; justify-content: space-between;33  }34  .top-actions .icon-btn { width: 64px; height: 64px; }35  .top-actions .icon-btn svg { width: 64px; height: 64px; stroke: #000; stroke-width: 6; fill: none; }36 37  /* Grid */38  .grid {39    display: grid;40    grid-template-columns: 1fr 1fr;41    gap: 30px;42    padding: 0 30px;43    margin-top: 24px;44    padding-bottom: 220px; /* space above bottom nav */45  }46  .card {47    background: #f5f5f5;48    border-radius: 4px;49    overflow: hidden;50  }51  .card .img {52    height: 430px;53    background: #E0E0E0;54    border-bottom: 1px solid #BDBDBD;55    display: flex; align-items: center; justify-content: center;56    color: #757575; font-size: 34px;57  }58  .card .label {59    background: #efefef;60    padding: 34px 28px;61    font-size: 44px;62    line-height: 52px;63    color: #222;64  }65 66  /* Bottom nav bar */67  .bottom-nav {68    position: absolute; left: 0; bottom: 0;69    width: 100%; height: 160px;70    border-top: 1px solid #e0e0e0;71    background: #ffffff;72    display: flex; align-items: center; justify-content: space-around;73  }74  .nav-item {75    position: relative;76    width: 120px; height: 100px;77    display: flex; align-items: center; justify-content: center;78  }79  .nav-item svg { width: 56px; height: 56px; stroke: #333; stroke-width: 5; fill: none; }80  .badge {81    position: absolute;82    right: 10px; top: 10px;83    background: #1769ff; color: #fff;84    width: 44px; height: 44px; border-radius: 22px;85    display: flex; align-items: center; justify-content: center;86    font-size: 28px; font-weight: 700;87    box-shadow: 0 2px 0 rgba(0,0,0,0.1);88  }89 90  /* Home indicator */91  .home-indicator {92    position: absolute; left: 50%; bottom: 14px;93    width: 220px; height: 12px; transform: translateX(-50%);94    background: #000; border-radius: 8px;95    opacity: 0.75;96  }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status bar -->103  <div class="status-bar">104    <div class="status-left">105      <div class="status-time">11:10</div>106      <!-- Small play triangle -->107      <div class="status-icon">108        <svg viewBox="0 0 24 24"><path d="M6 5 L19 12 L6 19 Z" fill="#777"/></svg>109      </div>110    </div>111    <div class="status-right">112      <!-- Wifi -->113      <div class="status-icon">114        <svg viewBox="0 0 24 24">115          <path d="M2 8 C8 3,16 3,22 8" stroke="#777" stroke-width="2" fill="none"/>116          <path d="M5 12 C10 8,14 8,19 12" stroke="#777" stroke-width="2" fill="none"/>117          <circle cx="12" cy="16" r="2" fill="#777"/>118        </svg>119      </div>120      <!-- Cast / ring -->121      <div class="status-icon">122        <svg viewBox="0 0 24 24">123          <circle cx="12" cy="12" r="7" stroke="#777" stroke-width="2" fill="none"/>124          <circle cx="12" cy="12" r="2" fill="#777"/>125        </svg>126      </div>127      <!-- Battery -->128      <div class="status-icon">129        <svg viewBox="0 0 32 24">130          <rect x="2" y="6" width="24" height="12" rx="2" ry="2" stroke="#777" fill="none" stroke-width="2"/>131          <rect x="4" y="8" width="18" height="8" fill="#777"/>132          <rect x="27" y="10" width="3" height="4" rx="1" fill="#777"/>133        </svg>134      </div>135    </div>136  </div>137 138  <!-- Top actions -->139  <div class="top-actions">140    <!-- Profile/Account icon -->141    <div class="icon-btn">142      <svg viewBox="0 0 24 24">143        <circle cx="12" cy="8" r="4"></circle>144        <path d="M4 20 C4 14,20 14,20 20"></path>145      </svg>146    </div>147    <!-- Bell/Notifications icon -->148    <div class="icon-btn">149      <svg viewBox="0 0 24 24">150        <path d="M6 9 C6 5,9 3,12 3 C15 3,18 5,18 9 V15 L20 17 H4 L6 15 Z"></path>151        <circle cx="12" cy="20" r="2"></circle>152      </svg>153    </div>154  </div>155 156  <!-- Grid of categories -->157  <div class="grid">158    <!-- Card 1 -->159    <div class="card">160      <div class="img">[IMG: Beds & mattress]</div>161      <div class="label">Beds & mattresses</div>162    </div>163    <!-- Card 2 -->164    <div class="card">165      <div class="img">[IMG: White kitchen cabinets]</div>166      <div class="label">Kitchen & appliances</div>167    </div>168 169    <!-- Card 3 -->170    <div class="card">171      <div class="img">[IMG: Line art & vases]</div>172      <div class="label">Home décor</div>173    </div>174    <!-- Card 4 -->175    <div class="card">176      <div class="img">[IMG: Sofa & pillows]</div>177      <div class="label">Home textiles</div>178    </div>179 180    <!-- Card 5 -->181    <div class="card">182      <div class="img">[IMG: Modern lamps]</div>183      <div class="label">Lighting</div>184    </div>185    <!-- Card 6 -->186    <div class="card">187      <div class="img">[IMG: Kids table & stools]</div>188      <div class="label">Baby & kids</div>189    </div>190  </div>191 192  <!-- Bottom navigation -->193  <div class="bottom-nav">194    <div class="nav-item">195      <!-- Home icon -->196      <svg viewBox="0 0 24 24">197        <path d="M3 10 L12 3 L21 10"></path>198        <path d="M5 10 V21 H19 V10"></path>199      </svg>200    </div>201    <div class="nav-item">202      <!-- Search icon -->203      <svg viewBox="0 0 24 24">204        <circle cx="10" cy="10" r="6"></circle>205        <path d="M15 15 L21 21"></path>206      </svg>207    </div>208    <div class="nav-item">209      <!-- Grid/catalog icon -->210      <svg viewBox="0 0 24 24">211        <rect x="3" y="3" width="7" height="7" rx="1"></rect>212        <rect x="14" y="3" width="7" height="7" rx="1"></rect>213        <rect x="3" y="14" width="7" height="7" rx="1"></rect>214        <rect x="14" y="14" width="7" height="7" rx="1"></rect>215      </svg>216    </div>217    <div class="nav-item">218      <!-- Heart icon -->219      <svg viewBox="0 0 24 24">220        <path d="M12 20 C12 20,4 14,4 9 A4 4 0 0 1 12 8 A4 4 0 0 1 20 9 C20 14,12 20,12 20"></path>221      </svg>222    </div>223    <div class="nav-item">224      <!-- Basket/Cart icon -->225      <svg viewBox="0 0 24 24">226        <path d="M3 7 H21 L19 19 H5 Z"></path>227        <path d="M9 7 L12 3 L15 7"></path>228        <circle cx="9" cy="20" r="1.6" fill="#333"></circle>229        <circle cx="15" cy="20" r="1.6" fill="#333"></circle>230      </svg>231      <div class="badge">1</div>232    </div>233  </div>234 235  <div class="home-indicator"></div>236</div>237</body>238</html>