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>Departments UI</title>7<style>8  :root{9    --accent:#b7d43a;10    --text:#222;11    --muted:#757575;12    --border:#DADADA;13    --bg:#ffffff;14  }15  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color:var(--text); }16  #render-target{17    width:1080px; height:2400px; position:relative; overflow:hidden;18    background:#fff;19  }20 21  /* Status bar */22  .statusbar{23    height:120px;24    padding:0 48px;25    display:flex;26    align-items:center;27    justify-content:space-between;28    color:#333;29    font-size:36px;30  }31  .status-right{32    display:flex; gap:28px; align-items:center;33  }34  .status-icon{35    width:40px; height:40px; border-radius:50%; background:#e6e6e6;36  }37  .wifi-icon{38    width:48px; height:34px; position:relative;39  }40  .wifi-icon::before, .wifi-icon::after{41    content:""; position:absolute; left:0; right:0; margin:auto; border:3px solid #555; border-radius:50%;42  }43  .wifi-icon::before{ width:48px; height:34px; top:-2px; border-top-color:#555; border-left-color:transparent; border-right-color:transparent; border-bottom-color:transparent; }44  .wifi-icon::after{ width:26px; height:18px; top:8px; border-top-color:#555; border-left-color:transparent; border-right-color:transparent; border-bottom-color:transparent; }45  .battery{46    width:50px; height:26px; border:3px solid #555; border-radius:6px; position:relative;47  }48  .battery::after{49    content:""; position:absolute; right:-10px; top:6px; width:6px; height:14px; background:#555; border-radius:2px;50  }51  .battery::before{52    content:""; position:absolute; left:3px; top:3px; width:34px; height:18px; background:#555; border-radius:4px;53  }54 55  /* Content */56  .content{57    padding:0 54px;58  }59  .page-title{60    font-size:64px; font-weight:700; margin:10px 0 40px;61  }62 63  /* Search bar */64  .search-bar{65    height:120px; background:#F3F3F3; border:1px solid var(--border);66    border-radius:26px; display:flex; align-items:center; padding:0 32px; gap:30px;67  }68  .search-input{69    flex:1; color:#999; font-size:36px;70  }71  .icon{72    width:56px; height:56px;73  }74  .icon svg{ width:100%; height:100%; }75  .mic{76    width:64px; height:64px; background:#fff; border:1px solid var(--border); border-radius:20px; display:flex; align-items:center; justify-content:center;77  }78 79  .section-title{80    margin:50px 0 20px; font-size:38px; font-weight:700; letter-spacing:2px;81  }82 83  /* Grid of categories */84  .grid{85    display:grid; grid-template-columns:repeat(3, 1fr);86    gap:40px 40px; /* row / column gap */87  }88  .card{89    display:flex; flex-direction:column;90  }91  .thumb{92    width:100%; height:260px; background:#E0E0E0;93    border:1px solid #BDBDBD; border-radius:40px;94    display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; text-align:center; padding:0 20px;95  }96  .label{97    margin-top:24px; font-size:34px; color:#222;98  }99 100  /* Bottom navigation */101  .nav{102    position:absolute; left:0; right:0; bottom:80px;103    height:220px; background:#fff; border-top:1px solid #eee;104    display:flex; justify-content:space-around; align-items:center;105  }106  .nav-item{107    width:200px; text-align:center; color:#444;108  }109  .nav-item .icon{ margin:0 auto 16px; }110  .nav-item span{ font-size:28px; }111  .nav-item.active span{ color:var(--accent); font-weight:600; }112  .nav-item.active .icon svg path{ stroke:var(--accent); fill:none; }113  .nav-indicator{114    position:absolute; left:50%; transform:translateX(-50%);115    bottom:18px; width:360px; height:16px; background:#fff; border-radius:10px; box-shadow:0 0 0 2px rgba(0,0,0,0.1);116  }117  .bottom-black{118    position:absolute; left:0; right:0; bottom:0; height:80px; background:#000;119  }120</style>121</head>122<body>123<div id="render-target">124  <!-- Status bar -->125  <div class="statusbar">126    <div class="time">1:28</div>127    <div class="status-right">128      <div class="status-icon"></div>129      <div class="status-icon"></div>130      <div class="wifi-icon"></div>131      <div class="battery"></div>132    </div>133  </div>134 135  <div class="content">136    <div class="page-title">Shop by Departments</div>137 138    <div class="search-bar">139      <div class="icon">140        <svg viewBox="0 0 24 24">141          <circle cx="10" cy="10" r="7" stroke="#777" stroke-width="2" fill="none"></circle>142          <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#777" stroke-width="2" stroke-linecap="round"></line>143        </svg>144      </div>145      <div class="search-input">What are you looking for?</div>146      <div class="mic">147        <svg viewBox="0 0 24 24">148          <rect x="8" y="5" width="8" height="10" rx="4" fill="#444"></rect>149          <path d="M5 11c0 5 14 5 14 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"></path>150          <line x1="12" y1="16" x2="12" y2="21" stroke="#444" stroke-width="2" stroke-linecap="round"></line>151        </svg>152      </div>153    </div>154 155    <div class="section-title">DEPARTMENT</div>156 157    <div class="grid">158      <!-- Row 1 -->159      <div class="card">160        <div class="thumb">[IMG: Orange Sofa - Living Room]</div>161        <div class="label">Living room<br/>furniture</div>162      </div>163      <div class="card">164        <div class="thumb">[IMG: Wooden Bed - Bedroom]</div>165        <div class="label">Bedroom<br/>furniture</div>166      </div>167      <div class="card">168        <div class="thumb">[IMG: Dining Table Set]</div>169        <div class="label">Dining furniture</div>170      </div>171      <!-- Row 2 -->172      <div class="card">173        <div class="thumb">[IMG: Home Office Desk & Chair]</div>174        <div class="label">Home Office</div>175      </div>176      <div class="card">177        <div class="thumb">[IMG: Decorative Vases]</div>178        <div class="label">Décor</div>179      </div>180      <div class="card">181        <div class="thumb">[IMG: Cookware & Vegetables]</div>182        <div class="label">Kitchen</div>183      </div>184      <!-- Row 3 -->185      <div class="card">186        <div class="thumb">[IMG: Tableware Set]</div>187        <div class="label">Tableware</div>188      </div>189      <div class="card">190        <div class="thumb">[IMG: Cushions & Pillows]</div>191        <div class="label">Furnishing</div>192      </div>193      <div class="card">194        <div class="thumb">[IMG: Bath & Laundry Accessories]</div>195        <div class="label">Bath & Laundry</div>196      </div>197      <!-- Row 4 -->198      <div class="card">199        <div class="thumb">[IMG: Bunk Bed]</div>200        <div class="label">Kids furniture</div>201      </div>202      <div class="card">203        <div class="thumb">[IMG: Rocking Chair]</div>204        <div class="label">Seating</div>205      </div>206      <div class="card">207        <div class="thumb">[IMG: Study Table]</div>208        <div class="label">Study</div>209      </div>210    </div>211  </div>212 213  <!-- Bottom navigation -->214  <div class="nav">215    <div class="nav-item">216      <div class="icon">217        <svg viewBox="0 0 24 24">218          <path d="M3 10 L12 3 L21 10 V21 H15 V14 H9 V21 H3 Z" fill="none" stroke="#777" stroke-width="2" stroke-linejoin="round"></path>219        </svg>220      </div>221      <span>Home</span>222    </div>223    <div class="nav-item active">224      <div class="icon">225        <svg viewBox="0 0 24 24">226          <circle cx="10" cy="10" r="7" stroke="#777" stroke-width="2" fill="none"></circle>227          <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#777" stroke-width="2" stroke-linecap="round"></line>228        </svg>229      </div>230      <span>Department</span>231    </div>232    <div class="nav-item">233      <div class="icon">234        <svg viewBox="0 0 24 24">235          <path d="M6 7h12l-2 14H8L6 7z" fill="none" stroke="#777" stroke-width="2"></path>236          <path d="M9 7V5c0-1.1.9-2 2-2h2c1.1 0 2 .9 2 2v2" fill="none" stroke="#777" stroke-width="2"></path>237        </svg>238      </div>239      <span>Basket</span>240    </div>241    <div class="nav-item">242      <div class="icon">243        <svg viewBox="0 0 24 24">244          <path d="M12 21s-7-4.4-7-10a4.5 4.5 0 0 1 8-2.6A4.5 4.5 0 0 1 19 11c0 5.6-7 10-7 10z" fill="none" stroke="#777" stroke-width="2" stroke-linejoin="round"></path>245        </svg>246      </div>247      <span>Favourites</span>248    </div>249    <div class="nav-item">250      <div class="icon">251        <svg viewBox="0 0 24 24">252          <circle cx="12" cy="8" r="4" fill="none" stroke="#777" stroke-width="2"></circle>253          <path d="M4 21c0-4.4 4-7 8-7s8 2.6 8 7" fill="none" stroke="#777" stroke-width="2"></path>254        </svg>255      </div>256      <span>Account</span>257    </div>258  </div>259 260  <div class="bottom-black">261    <div class="nav-indicator"></div>262  </div>263</div>264</body>265</html>