GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Drawer Menu - Hardware Shack</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14    border-radius: 0;15  }16 17  /* Top system/app bar */18  .top-bar {19    position: absolute;20    left: 0; top: 0;21    width: 1080px;22    height: 150px;23    background: #5500cc; /* material purple feeling */24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .dot { width: 16px; height: 16px; border-radius: 50%; background: #e9ddff; opacity: .9; }35  .small-pill {36    height: 40px; padding: 0 14px; border-radius: 20px;37    background: rgba(255,255,255,.18); color: #fff; font-size: 24px; line-height: 40px;38  }39 40  /* Dimmed page in the background (right side) */41  .dim {42    position: absolute; right: 0; top: 150px;43    width: 320px; height: 2250px;44    background: rgba(0,0,0,.45);45  }46  .page-preview {47    position: absolute; right: 0; top: 150px;48    width: 1080px; height: 2250px;49    pointer-events: none;50  }51  .preview-content {52    position: absolute; right: 0; top: 0;53    width: 1080px; height: 2250px;54    background: #fafafa;55    color: #cfcfcf;56    font-weight: 700;57    display: flex; align-items: flex-start; justify-content: flex-end;58    padding: 60px;59    box-sizing: border-box;60  }61  .preview-content span {62    font-size: 96px; opacity: .4;63    margin-right: 120px;64  }65 66  /* Close button on the dim area */67  .close-btn {68    position: absolute; right: 36px; top: 180px;69    width: 96px; height: 96px; border-radius: 48px;70    border: 3px solid #ffffff;71    display: flex; align-items: center; justify-content: center;72  }73  .close-btn svg { width: 40px; height: 40px; stroke: #fff; stroke-width: 6; }74 75  /* Drawer */76  .drawer {77    position: absolute;78    left: 0; top: 0;79    width: 760px; height: 2400px;80    background: #ffffff;81    box-shadow: 6px 0 20px rgba(0,0,0,0.25);82  }83  .drawer-content {84    position: absolute; left: 0; top: 150px; bottom: 0;85    width: 100%;86    overflow: hidden;87    padding: 28px 36px 40px 36px;88    box-sizing: border-box;89  }90 91  /* Search row */92  .search-row {93    display: flex; align-items: center;94    gap: 22px;95    margin-bottom: 30px;96  }97  .chip {98    min-width: 130px; height: 84px;99    border-radius: 18px;100    border: 2px solid #e5e5e5;101    display: flex; align-items: center; justify-content: center;102    gap: 10px; padding: 0 18px;103    color: #444; font-size: 32px; font-weight: 600;104    box-sizing: border-box;105  }106  .search-box {107    flex: 1;108    height: 84px;109    border-radius: 18px;110    background: #f5f5f7;111    border: 2px solid #e5e5e5;112    display: flex; align-items: center;113    padding: 0 22px; box-sizing: border-box;114  }115  .search-box input {116    border: none; outline: none; background: transparent;117    font-size: 32px; color: #555; width: 100%;118  }119  .icon {120    width: 34px; height: 34px; fill: none; stroke: #777; stroke-width: 4;121  }122 123  /* Menu list */124  .menu {125    margin-top: 18px;126    height: 2000px;127    overflow-y: auto;128    padding-right: 14px;129  }130  .menu::-webkit-scrollbar { width: 0; height: 0; }131 132  .item {133    display: flex; align-items: center; justify-content: space-between;134    padding: 26px 6px;135    font-size: 42px; color: #333; font-weight: 700;136    text-transform: uppercase;137    border-bottom: 1px solid #f2f2f2;138    letter-spacing: .5px;139  }140  .item.light { text-transform: none; font-size: 40px; font-weight: 600; color: #222; border: none; padding: 22px 6px; }141  .sub-item {142    font-size: 36px; color: #555; font-weight: 500;143    padding: 20px 6px 20px 28px;144  }145  .caret { width: 32px; height: 32px; stroke: #777; stroke-width: 6; }146  .section-spacer { height: 10px; }147 148  /* Bottom gesture bar */149  .gesture {150    position: absolute; left: 0; bottom: 0;151    width: 1080px; height: 120px;152    background: #000;153    display: flex; align-items: center; justify-content: center;154  }155  .gesture .pill {156    width: 380px; height: 10px; background: #e6e6e6; border-radius: 8px;157  }158</style>159</head>160<body>161<div id="render-target">162 163  <!-- App/Status bar -->164  <div class="top-bar">165    <div class="status-icons">166      <div class="dot"></div>167      <div class="dot"></div>168      <div class="dot"></div>169      <div class="small-pill">LR</div>170      <div class="dot" style="width:12px;height:12px;"></div>171    </div>172  </div>173 174  <!-- Background page preview and dim -->175  <div class="page-preview">176    <div class="preview-content">177      <span>HARDWARE SHACK</span>178    </div>179  </div>180  <div class="dim"></div>181 182  <!-- Close (X) button on dimmed area -->183  <div class="close-btn">184    <svg viewBox="0 0 24 24">185      <line x1="4" y1="4" x2="20" y2="20"></line>186      <line x1="20" y1="4" x2="4" y2="20"></line>187    </svg>188  </div>189 190  <!-- Drawer -->191  <div class="drawer">192    <div class="drawer-content">193      <!-- Search area -->194      <div class="search-row">195        <div class="chip">196          <span>All</span>197          <svg class="caret" viewBox="0 0 24 24">198            <polyline points="5,8 12,15 19,8" fill="none"></polyline>199          </svg>200        </div>201        <div class="search-box">202          <input type="text" placeholder="Search...">203          <svg class="icon" viewBox="0 0 24 24">204            <circle cx="10" cy="10" r="6"></circle>205            <line x1="15" y1="15" x2="22" y2="22"></line>206          </svg>207        </div>208      </div>209 210      <!-- Menu -->211      <div class="menu">212        <div class="item light">Home</div>213        <div class="item">Shop</div>214 215        <div class="item">216          <span>Paints</span>217          <svg class="caret" viewBox="0 0 24 24"><polyline points="5,8 12,15 19,8" fill="none"></polyline></svg>218        </div>219 220        <div class="item">221          <span>Electricals</span>222          <svg class="caret" viewBox="0 0 24 24"><polyline points="5,8 12,15 19,8" fill="none"></polyline></svg>223        </div>224 225        <div class="item">226          <span>Sanitary Ware & Faucets</span>227          <svg class="caret" viewBox="0 0 24 24"><polyline points="5,8 12,15 19,8" fill="none"></polyline></svg>228        </div>229 230        <div class="item">231          <span>Cements & POP</span>232          <svg class="caret" viewBox="0 0 24 24"><polyline points="5,8 12,15 19,8" fill="none"></polyline></svg>233        </div>234 235        <div class="item">236          <span>Adhesive</span>237          <svg class="caret" viewBox="0 0 24 24"><polyline points="5,8 12,15 19,8" fill="none"></polyline></svg>238        </div>239 240        <div class="item">241          <span>Cleaning</span>242          <svg class="caret" viewBox="0 0 24 24"><polyline points="5,8 12,15 19,8" fill="none"></polyline></svg>243        </div>244 245        <!-- Tools expanded -->246        <div class="item">247          <span>Tools</span>248          <svg class="caret" viewBox="0 0 24 24" style="transform: rotate(180deg);"><polyline points="5,8 12,15 19,8" fill="none"></polyline></svg>249        </div>250        <div class="sub-item">hand tools</div>251        <div class="sub-item">abrasives</div>252        <div class="sub-item">Allen Keys</div>253        <div class="sub-item">Brush</div>254        <div class="sub-item">Carpenter Pincer</div>255        <div class="sub-item">Chisels</div>256        <div class="sub-item">Clamps</div>257        <div class="sub-item">Cutters</div>258      </div>259    </div>260  </div>261 262  <!-- Bottom gesture bar -->263  <div class="gesture">264    <div class="pill"></div>265  </div>266 267</div>268</body>269</html>