GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Hardware Shack - Screw Driver</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: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 140px;23    background: #4B1AB6;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 40px;28    box-sizing: border-box;29    font-size: 40px;30    letter-spacing: 0.3px;31  }32  .sb-left { flex: 1; display: flex; align-items: center; gap: 28px; }33  .sb-right { display: flex; align-items: center; gap: 26px; }34  .sb-dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9; }35  .sb-battery {36    width: 44px; height: 24px; border: 3px solid #fff; border-radius: 6px; position: relative;37  }38  .sb-battery::after {39    content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px;40  }41 42  /* Header / logo row */43  .header {44    position: absolute;45    top: 140px;46    left: 0;47    width: 1080px;48    height: 170px;49    background: #ffffff;50    display: flex;51    align-items: center;52    padding: 0 36px;53    box-sizing: border-box;54    border-bottom: 1px solid #e6e6e6;55  }56  .hamburger {57    width: 86px; height: 86px; display: flex; justify-content: center; align-items: center; margin-right: 20px;58  }59  .logo-wrap {60    display: flex; align-items: center; gap: 26px;61    flex: 1;62  }63  .logo-icon {64    width: 136px; height: 136px; background: #FFD751; border-radius: 24px; position: relative; box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset;65    display: flex; justify-content: center; align-items: center; color: #222; font-weight: bold; font-size: 26px;66  }67  .logo-text {68    font-size: 58px; font-weight: 700; letter-spacing: 0.5px; color: #111;69  }70  .cart-button {71    width: 96px; height: 96px; background: #FFD751; border-radius: 50%;72    display: flex; justify-content: center; align-items: center;73  }74 75  /* Breadcrumbs and title */76  .breadcrumbs {77    position: absolute;78    top: 310px;79    left: 0;80    width: 1080px;81    padding: 0 36px;82    box-sizing: border-box;83    color: #6f6f6f;84    font-size: 40px;85    display: flex;86    gap: 12px;87    align-items: center;88  }89  .crumb strong { color: #111; font-weight: 700; }90  .filter-row {91    position: absolute;92    top: 386px;93    left: 0;94    width: 1080px;95    padding: 20px 36px 0 36px;96    box-sizing: border-box;97    display: flex;98    align-items: center;99    gap: 26px;100    color: #222;101  }102  .filter-label {103    display: flex; align-items: center; gap: 18px; font-weight: 700; font-size: 44px;104  }105  .select-box {106    margin-left: auto;107    width: 680px;108    height: 96px;109    border: 1px solid #dcdcdc;110    border-radius: 12px;111    display: flex; align-items: center; justify-content: space-between;112    padding: 0 28px;113    box-sizing: border-box;114    color: #444;115    font-size: 42px;116    background: #fafafa;117  }118 119  /* Product grid */120  .products {121    position: absolute;122    top: 520px;123    left: 0;124    width: 1080px;125    padding: 0 36px 36px 36px;126    box-sizing: border-box;127    display: grid;128    grid-template-columns: 1fr 1fr;129    grid-gap: 34px 34px;130  }131  .card {132    position: relative;133    background: #fff;134  }135  .product-image {136    width: 100%;137    height: 460px;138    background: #E0E0E0;139    border: 1px solid #BDBDBD;140    display: flex;141    justify-content: center;142    align-items: center;143    color: #757575;144    font-size: 32px;145  }146  .badge {147    position: absolute;148    top: 34px;149    left: 24px;150    width: 130px; height: 130px;151    background: #000;152    color: #fff;153    border-radius: 50%;154    display: flex; justify-content: center; align-items: center;155    font-size: 44px;156    font-weight: 800;157  }158  .meta {159    margin-top: 20px;160    color: #8a8a8a;161    font-size: 36px;162    letter-spacing: 0.3px;163  }164  .title {165    margin-top: 12px;166    font-size: 44px;167    color: #222;168    line-height: 1.25;169  }170  .price {171    margin-top: 16px;172    font-size: 42px;173    color: #111;174  }175  .strike { color: #777; text-decoration: line-through; margin-right: 18px; }176  .btn {177    margin-top: 22px;178    height: 96px;179    background: #F4C53F;180    color: #222;181    font-weight: 800;182    font-size: 40px;183    border-radius: 12px;184    display: flex; align-items: center; justify-content: center;185  }186 187  /* More products section (lower) */188  .more-row {189    position: absolute;190    top: 1440px;191    left: 0;192    width: 1080px;193    padding: 0 36px;194    box-sizing: border-box;195    display: grid;196    grid-template-columns: 1fr 1fr;197    grid-gap: 34px;198  }199  .thumb {200    position: relative;201  }202  .thumb .product-image { height: 460px; }203  .thumb .badge { top: 18px; left: 24px; }204 205  /* Bottom gesture bar */206  .gesture {207    position: absolute;208    bottom: 40px;209    left: 50%;210    transform: translateX(-50%);211    width: 420px;212    height: 16px;213    background: #D8D8D8;214    border-radius: 10px;215  }216 217  /* Simple helper svg icons */218  .icon {219    width: 60px; height: 60px;220  }221  .icon-small { width: 40px; height: 40px; }222</style>223</head>224<body>225<div id="render-target">226 227  <!-- Status bar -->228  <div class="status-bar">229    <div class="sb-left">230      <div>8:32</div>231      <div class="sb-dot"></div>232      <div class="sb-dot"></div>233      <div class="sb-dot"></div>234    </div>235    <div class="sb-right">236      <!-- signal icon -->237      <svg class="icon-small" viewBox="0 0 24 24" fill="#fff"><rect x="2" y="14" width="3" height="8"/><rect x="7" y="10" width="3" height="12"/><rect x="12" y="6" width="3" height="16"/><rect x="17" y="2" width="3" height="20"/></svg>238      <!-- battery -->239      <div class="sb-battery"></div>240      <div>100%</div>241    </div>242  </div>243 244  <!-- Header -->245  <div class="header">246    <div class="hamburger">247      <svg class="icon" viewBox="0 0 24 24" fill="#333">248        <rect x="2" y="4" width="20" height="3"></rect>249        <rect x="2" y="10.5" width="20" height="3"></rect>250        <rect x="2" y="17" width="20" height="3"></rect>251      </svg>252    </div>253    <div class="logo-wrap">254      <div class="logo-icon">HS</div>255      <div class="logo-text">HARDWARE SHACK</div>256    </div>257    <div class="cart-button">258      <svg class="icon" viewBox="0 0 24 24" fill="#fff">259        <path d="M7 4h-2v2h2l2.6 9.2c.1.5.6.8 1.1.8h7.9v-2h-7.1l-.5-2h7.6c.5 0 .9-.3 1-.8l1.4-6.2h-14z"></path>260        <circle cx="10" cy="20" r="2"></circle>261        <circle cx="18" cy="20" r="2"></circle>262      </svg>263    </div>264  </div>265 266  <!-- Breadcrumbs -->267  <div class="breadcrumbs">268    <div class="crumb">HOME</div>269    <div>/</div>270    <div class="crumb">TOOLS</div>271    <div>/</div>272    <div class="crumb"><strong>SCREW DRIVER</strong></div>273  </div>274 275  <!-- Filter row and sorting -->276  <div class="filter-row">277    <div class="filter-label">278      <svg class="icon" viewBox="0 0 24 24" fill="#333">279        <rect x="2" y="4" width="20" height="2"></rect>280        <rect x="5" y="10" width="14" height="2"></rect>281        <rect x="8" y="16" width="8" height="2"></rect>282      </svg>283      <div>FILTER</div>284    </div>285    <div class="select-box">286      <div>Default sorting</div>287      <svg class="icon-small" viewBox="0 0 24 24" fill="#333">288        <path d="M6 8l6 6 6-6z"></path>289      </svg>290    </div>291  </div>292 293  <!-- Product grid -->294  <div class="products">295 296    <!-- Card 1 -->297    <div class="card">298      <div class="badge">-16%</div>299      <div class="product-image">[IMG: Yellow Adjustable Screwdriver]</div>300      <div class="meta">SCREW DRIVER</div>301      <div class="title">Caltex Screw Driver 2 in 1 Adjustable</div>302      <div class="price">₹59.85 – ₹84.00</div>303      <div class="btn">SELECT OPTIONS</div>304    </div>305 306    <!-- Card 2 -->307    <div class="card">308      <div class="badge">-3%</div>309      <div class="product-image">[IMG: Precision Screwdriver Set]</div>310      <div class="meta">SCREW DRIVER</div>311      <div class="title">Jon Bhandari Tools 5pc Precision Screwdriver Set Multi-Purpose 10 in 1</div>312      <div class="price"><span class="strike">₹320.00</span> <strong>₹312.00</strong></div>313      <div class="btn">ADD TO CART</div>314    </div>315 316  </div>317 318  <!-- More products row -->319  <div class="more-row">320    <div class="thumb">321      <div class="badge">-24%</div>322      <div class="product-image">[IMG: Hex Key Screwdriver Pack]</div>323    </div>324    <div class="thumb">325      <div class="badge">-25%</div>326      <div class="product-image">[IMG: L-Shaped Hex Key Set]</div>327    </div>328  </div>329 330  <!-- Bottom gesture bar -->331  <div class="gesture"></div>332</div>333</body>334</html>