GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Drawer Menu UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #2f334b;14    color: #111;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    color: #fff;25    font-weight: 600;26  }27  .status-left {28    position: absolute;29    left: 40px;30    top: 30px;31    display: flex;32    align-items: center;33    gap: 22px;34  }35  .status-left .time { font-size: 40px; letter-spacing: 1px; }36  .status-dot {37    width: 18px; height: 18px; background: #CFCFEA; border-radius: 50%;38    display: inline-block;39  }40  .status-right {41    position: absolute;42    right: 40px;43    top: 30px;44    display: flex; gap: 24px; align-items: center;45  }46  .icon-wifi, .icon-battery {47    width: 48px; height: 30px;48  }49  .icon-wifi svg, .icon-battery svg { width: 100%; height: 100%; }50 51  /* Drawer and header */52  .drawer {53    position: absolute;54    left: 0;55    top: 110px;56    width: 760px;57    height: 2290px;58    box-shadow: 6px 0 16px rgba(0,0,0,0.35);59  }60  .welcome-area {61    background: #2f334b;62    color: #fff;63    padding: 50px 40px 40px 40px;64  }65  .welcome-title {66    font-size: 80px;67    font-weight: 800;68    margin: 40px 0 36px 0;69  }70  .signin-btn {71    display: inline-block;72    background: #8a8ea1;73    color: #fff;74    border-radius: 60px;75    padding: 26px 40px;76    font-size: 42px;77    font-weight: 700;78  }79 80  .list-area {81    background: #fff;82    padding: 36px 32px 120px 32px;83  }84  .section-title {85    color: #7c7c7c;86    font-size: 36px;87    font-weight: 700;88    margin-bottom: 30px;89  }90 91  .menu-item {92    display: flex;93    justify-content: space-between;94    align-items: center;95    padding: 28px 8px;96    border-bottom: 1px solid #f0f0f0;97    font-size: 46px;98    color: #222;99  }100  .menu-item.no-border { border-bottom: none; }101  .menu-item .text { max-width: 600px; }102  .menu-item.sub {103    padding-left: 34px;104    font-size: 44px;105    color: #2b2b2b;106  }107  .menu-item.sub2 { padding-left: 54px; }108  .menu-group-title {109    font-size: 52px;110    font-weight: 800;111    color: #1d1d1d;112  }113 114  /* Right side dim and content preview */115  .right-overlay {116    position: absolute;117    right: 0;118    top: 110px;119    width: 320px;120    height: 2290px;121    background: rgba(255,255,255,0.08);122  }123  .preview-card {124    position: absolute;125    right: 22px;126    top: 400px;127    width: 280px;128    height: 640px;129    background: #E0E0E0;130    border: 1px solid #BDBDBD;131    display: flex; align-items: center; justify-content: center;132    color: #757575; font-size: 28px; text-align: center;133  }134  .fab {135    position: absolute;136    right: 30px;137    bottom: 480px;138    width: 110px; height: 110px;139    border-radius: 50%;140    background: #1f2240;141    box-shadow: 0 8px 18px rgba(0,0,0,0.35);142    display: flex; align-items: center; justify-content: center;143  }144 145  /* Bottom handle */146  .handle {147    position: absolute;148    bottom: 32px;149    left: 50%;150    transform: translateX(-50%);151    width: 540px; height: 16px; border-radius: 12px;152    background: #bdbdc6;153    opacity: 0.65;154  }155 156  /* Icon styles */157  .icon {158    width: 48px; height: 48px;159  }160  .icon svg { width: 48px; height: 48px; }161  .icon.plus svg path { stroke: #555; }162  .icon.minus svg path { stroke: #555; }163  .cart-wrapper {164    position: absolute;165    right: 40px;166    top: 170px;167    display: flex; align-items: center; gap: 10px; color: #fff;168  }169  .cart {170    width: 70px; height: 70px;171  }172  .badge {173    background: #2f334b;174    color: #fff;175    border: 2px solid #bfbfd6;176    font-size: 34px;177    border-radius: 50%;178    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status -->186  <div class="status-bar">187    <div class="status-left">188      <div class="time">10:19</div>189      <span class="status-dot"></span>190      <span class="status-dot"></span>191      <span class="status-dot"></span>192      <span class="status-dot"></span>193    </div>194    <div class="status-right">195      <div class="icon-wifi">196        <svg viewBox="0 0 24 24" fill="none">197          <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>198          <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>199          <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>200          <circle cx="12" cy="19" r="2" fill="#fff"/>201        </svg>202      </div>203      <div class="icon-battery">204        <svg viewBox="0 0 28 16" fill="none">205          <rect x="1" y="2" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>206          <rect x="3" y="4" width="16" height="8" rx="1" fill="#fff"/>207          <rect x="24" y="5" width="3" height="6" rx="1" fill="#fff"/>208        </svg>209      </div>210    </div>211  </div>212 213  <!-- Cart preview on right -->214  <div class="cart-wrapper">215    <div class="cart">216      <svg viewBox="0 0 24 24" fill="none">217        <path d="M3 5h2l2 12h10l2-9H6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>218        <circle cx="9" cy="20" r="2" fill="#fff"/>219        <circle cx="17" cy="20" r="2" fill="#fff"/>220      </svg>221    </div>222    <div class="badge">1</div>223  </div>224 225  <!-- Drawer -->226  <div class="drawer">227    <div class="welcome-area">228      <div class="welcome-title">Welcome</div>229      <div class="signin-btn">Sign in / Sign up</div>230    </div>231 232    <div class="list-area">233      <div class="section-title">Shop by Category</div>234 235      <div class="menu-item">236        <div class="text">Power Tools</div>237        <div class="icon plus">238          <svg viewBox="0 0 24 24">239            <path d="M12 5v14M5 12h14" stroke-width="3" stroke="#505050" stroke-linecap="round"/>240          </svg>241        </div>242      </div>243      <div class="menu-item">244        <div class="text">Hand Tools</div>245        <div class="icon plus">246          <svg viewBox="0 0 24 24">247            <path d="M12 5v14M5 12h14" stroke-width="3" stroke="#505050" stroke-linecap="round"/>248          </svg>249        </div>250      </div>251      <div class="menu-item">252        <div class="text">General Safety</div>253        <div class="icon plus">254          <svg viewBox="0 0 24 24">255            <path d="M12 5v14M5 12h14" stroke-width="3" stroke="#505050" stroke-linecap="round"/>256          </svg>257        </div>258      </div>259      <div class="menu-item">260        <div class="text">Organization &amp; Storage</div>261        <div class="icon plus">262          <svg viewBox="0 0 24 24">263            <path d="M12 5v14M5 12h14" stroke-width="3" stroke="#505050" stroke-linecap="round"/>264          </svg>265        </div>266      </div>267 268      <div class="menu-item">269        <div class="menu-group-title">Lighting and Electrical</div>270        <div class="icon minus">271          <svg viewBox="0 0 24 24">272            <path d="M5 12h14" stroke-width="3" stroke="#505050" stroke-linecap="round"/>273          </svg>274        </div>275      </div>276 277      <div class="menu-item sub">278        <div class="text">Light Bulbs &amp; Lighting</div>279        <div class="icon plus">280          <svg viewBox="0 0 24 24">281            <path d="M12 5v14M5 12h14" stroke-width="3" stroke="#505050" stroke-linecap="round"/>282          </svg>283        </div>284      </div>285      <div class="menu-item sub">286        <div class="text">Switches, Outlets &amp; Plugs</div>287        <div class="icon plus">288          <svg viewBox="0 0 24 24">289            <path d="M12 5v14M5 12h14" stroke-width="3" stroke="#505050" stroke-linecap="round"/>290          </svg>291        </div>292      </div>293      <div class="menu-item sub">294        <div class="text">Cables &amp; Wires</div>295        <div class="icon plus">296          <svg viewBox="0 0 24 24">297            <path d="M12 5v14M5 12h14" stroke-width="3" stroke="#505050" stroke-linecap="round"/>298          </svg>299        </div>300      </div>301      <div class="menu-item sub">302        <div class="text">Boxes &amp; Fittings</div>303        <div class="icon plus">304          <svg viewBox="0 0 24 24">305            <path d="M12 5v14M5 12h14" stroke-width="3" stroke="#505050" stroke-linecap="round"/>306          </svg>307        </div>308      </div>309      <div class="menu-item sub">310        <div class="text">Circuit Breakers, Fuses and Panels</div>311        <div class="icon plus">312          <svg viewBox="0 0 24 24">313            <path d="M12 5v14M5 12h14" stroke-width="3" stroke="#505050" stroke-linecap="round"/>314          </svg>315        </div>316      </div>317      <div class="menu-item sub">318        <div class="text">Solar &amp; Outdoor Lighting</div>319        <div class="icon plus">320          <svg viewBox="0 0 24 24">321            <path d="M12 5v14M5 12h14" stroke-width="3" stroke="#505050" stroke-linecap="round"/>322          </svg>323        </div>324      </div>325      <div class="menu-item sub">326        <div class="text">Extension Cords, Adapters and Plugs</div>327      </div>328      <div class="menu-item sub">329        <div class="text">Smart Home</div>330      </div>331      <div class="menu-item sub">332        <div class="text">Flashlights and Lanterns</div>333      </div>334      <div class="menu-item sub">335        <div class="text">Cable Management, Cables Ties</div>336      </div>337      <div class="menu-item sub no-border">338        <div class="text">Electrical Tapes</div>339      </div>340    </div>341  </div>342 343  <!-- Right side dim and preview -->344  <div class="right-overlay">345    <div class="preview-card">[IMG: Product card / app content]</div>346    <div class="fab">347      <svg viewBox="0 0 24 24">348        <circle cx="12" cy="12" r="10" fill="#2f334b"/>349        <path d="M12 7v10M7 12h10" stroke="#fff" stroke-width="2" stroke-linecap="round"/>350      </svg>351    </div>352  </div>353 354  <div class="handle"></div>355</div>356</body>357</html>