GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Hardware Shack - Drawer</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #FFFFFF;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 120px;27    background: #5A2AD6; /* deep purple */28    color: #fff;29  }30  .status-inner {31    position: absolute;32    top: 16px;33    left: 24px;34    right: 24px;35    height: 88px;36    display: flex;37    align-items: center;38    justify-content: space-between;39  }40  .time {41    font-size: 40px;42    font-weight: 600;43    letter-spacing: 1px;44  }45  .status-icons {46    display: flex;47    align-items: center;48    gap: 28px;49  }50  .icon-circle {51    width: 36px;52    height: 36px;53    border-radius: 50%;54    border: 3px solid #fff;55    opacity: 0.85;56  }57  .icon-dot {58    width: 12px;59    height: 12px;60    background: #fff;61    border-radius: 50%;62    opacity: 0.85;63  }64  .icon-battery {65    width: 88px;66    height: 44px;67    border: 4px solid #fff;68    border-radius: 8px;69    position: relative;70  }71  .icon-battery::after {72    content: "";73    position: absolute;74    right: -12px;75    top: 12px;76    width: 10px;77    height: 20px;78    background: #fff;79    border-radius: 2px;80  }81  .battery-fill {82    position: absolute;83    left: 6px;84    top: 6px;85    height: 28px;86    width: 66px;87    background: #fff;88    border-radius: 4px;89  }90  .battery-text {91    margin-left: 8px;92    font-size: 34px;93    font-weight: 700;94  }95 96  /* Underlying page content */97  .page-header {98    position: absolute;99    top: 160px;100    left: 420px;101    right: 24px;102    display: flex;103    align-items: center;104    justify-content: space-between;105  }106  .brand {107    font-size: 64px;108    font-weight: 800;109    letter-spacing: 4px;110    color: #111;111  }112  .cart-badge {113    width: 120px;114    height: 120px;115    background: #FFCA28;116    border-radius: 60px;117    display: flex;118    align-items: center;119    justify-content: center;120    box-shadow: 0 4px 12px rgba(0,0,0,0.2);121  }122  .cart-badge svg {123    width: 64px;124    height: 64px;125    fill: #fff;126  }127 128  .content-right {129    position: absolute;130    top: 340px;131    left: 420px;132    right: 24px;133    bottom: 24px;134    overflow: hidden;135    color: #4a4a4a;136  }137  .review {138    margin-bottom: 44px;139    font-size: 32px;140    line-height: 1.6;141  }142  .stars {143    color: #FFC107;144    font-size: 38px;145    letter-spacing: 4px;146  }147  .img-placeholder {148    width: 520px;149    height: 280px;150    background: #E0E0E0;151    border: 1px solid #BDBDBD;152    display: flex;153    align-items: center;154    justify-content: center;155    color: #757575;156    margin-bottom: 28px;157  }158 159  /* Overlay dim behind drawer */160  .dim {161    position: absolute;162    left: 0;163    top: 120px;164    width: 1080px;165    height: 2280px;166    background: rgba(0,0,0,0.35);167  }168 169  /* Drawer */170  .drawer {171    position: absolute;172    top: 120px;173    left: 0;174    width: 520px;175    height: 2280px;176    background: #FFFFFF;177    box-shadow: 4px 0 28px rgba(0,0,0,0.25);178    overflow: hidden;179  }180  .drawer-list {181    padding: 18px 32px;182  }183  .drawer-item {184    font-size: 46px;185    color: #4f4f4f;186    padding: 28px 0;187    border-bottom: 1px solid rgba(0,0,0,0.06);188  }189  .drawer-item:last-child {190    border-bottom: none;191  }192 193  /* Close button (X) */194  .close-btn {195    position: absolute;196    top: 146px;197    right: 90px;198    width: 84px;199    height: 84px;200    border-radius: 42px;201    display: flex;202    align-items: center;203    justify-content: center;204  }205  .close-btn svg {206    width: 72px;207    height: 72px;208    stroke: #FFFFFF;209    stroke-width: 10;210    fill: none;211  }212</style>213</head>214<body>215<div id="render-target">216 217  <!-- Status Bar -->218  <div class="status-bar">219    <div class="status-inner">220      <div class="time">8:31</div>221      <div class="status-icons">222        <div class="icon-circle" title="Status icon"></div>223        <div class="icon-circle" title="Lock icon"></div>224        <div class="icon-circle" title="LR icon"></div>225        <div class="icon-dot" title="notification dot"></div>226        <div style="display:flex; align-items:center; gap:10px;">227          <div class="icon-battery">228            <div class="battery-fill"></div>229          </div>230          <div class="battery-text">100%</div>231        </div>232      </div>233    </div>234  </div>235 236  <!-- Underlying page content (blurred by dim overlay) -->237  <div class="page-header">238    <div class="brand">HARDWARE SHACK</div>239    <div class="cart-badge" aria-label="Cart">240      <svg viewBox="0 0 24 24">241        <path d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.2 6h12.3l-1.6 7.2c-.2.8-.9 1.3-1.7 1.3H9.1c-.9 0-1.6-.6-1.7-1.5L6.1 4H3V2h3.8c.9 0 1.6.6 1.7 1.5L9 12h7.1l1.1-5H7.2z"/>242      </svg>243    </div>244  </div>245 246  <div class="content-right">247    <div class="img-placeholder">[IMG: Product Banner / Listing]</div>248    <div class="review">249      <div class="stars">★★★★★</div>250      5 reviews for Jon Bhandari Tools 9pcs Hex Key Ball Point Hexagon Wrench Screwdriver Tools Kit251    </div>252    <div class="review">253      <div class="stars">★★★★☆</div>254      Narinder Singh — February 11, 2021<br>255      Excellent tool256    </div>257    <div class="review">258      <div class="stars">★★★☆☆</div>259      Manoj — February 11, 2021<br>260      Superb quality and nice finish261    </div>262    <div class="review">263      <div class="stars">★★★☆☆</div>264      Impressive customer service, provided me with proper tracking details and it arrived before scheduled delivery date.265    </div>266  </div>267 268  <!-- Dim overlay behind drawer -->269  <div class="dim"></div>270 271  <!-- Drawer -->272  <div class="drawer">273    <div class="drawer-list">274      <div class="drawer-item">Brush</div>275      <div class="drawer-item">Carpenter Pincer</div>276      <div class="drawer-item">Chisels</div>277      <div class="drawer-item">Clamps</div>278      <div class="drawer-item">Cutters</div>279      <div class="drawer-item">files</div>280      <div class="drawer-item">Garden Tools</div>281      <div class="drawer-item">glue gun</div>282      <div class="drawer-item">Grease Gun</div>283      <div class="drawer-item">Menu Item</div>284      <div class="drawer-item">Hammer</div>285      <div class="drawer-item">level</div>286      <div class="drawer-item">Lubrications</div>287      <div class="drawer-item">Plier</div>288      <div class="drawer-item">Polishing Accessories</div>289      <div class="drawer-item">power tools</div>290      <div class="drawer-item">saw</div>291      <div class="drawer-item">Screw Driver</div>292      <div class="drawer-item">Socket Set</div>293      <div class="drawer-item">Spanners</div>294      <div class="drawer-item">Spare Mallets</div>295      <div class="drawer-item">toolkit set</div>296      <div class="drawer-item">various tool bits</div>297    </div>298  </div>299 300  <!-- Close (X) -->301  <div class="close-btn">302    <svg viewBox="0 0 24 24">303      <path d="M4 4 L20 20 M20 4 L4 20"></path>304    </svg>305  </div>306 307</div>308</body>309</html>