GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Screwdriver Kit Listing</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #333;16  }17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 150px;24    background: #4ea4a7;25    color: #fff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31    font-size: 40px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .status-icon {39    display: inline-flex;40    align-items: center;41    justify-content: center;42  }43 44  /* Header */45  .header {46    position: absolute;47    top: 150px;48    left: 0;49    width: 1080px;50    height: 160px;51    background: #ffffff;52    border-bottom: 1px solid #e5e5e5;53    display: flex;54    align-items: center;55    padding: 0 36px;56    box-sizing: border-box;57  }58  .header-title {59    font-size: 50px;60    font-weight: 700;61    letter-spacing: 1px;62    margin-left: 24px;63    color: #2b2b2b;64  }65  .header-actions {66    margin-left: auto;67    display: flex;68    align-items: center;69    gap: 36px;70  }71  .icon-btn svg { display: block; }72 73  /* Filter bar */74  .filter-bar {75    position: absolute;76    top: 310px;77    left: 0;78    width: 1080px;79    height: 120px;80    background: #ffffff;81    border-bottom: 1px solid #e5e5e5;82    border-top: 1px solid #e5e5e5;83    display: grid;84    grid-template-columns: repeat(4, 1fr);85  }86  .filter-item {87    display: flex;88    align-items: center;89    justify-content: center;90    gap: 18px;91    font-size: 38px;92    color: #666;93    border-right: 1px solid #eeeeee;94  }95  .filter-item:last-child { border-right: none; }96  .filter-icon {97    width: 46px;98    height: 46px;99  }100  .caret {101    margin-left: 10px;102    font-size: 34px;103    color: #888;104  }105 106  /* Product grid */107  .product-grid {108    position: absolute;109    top: 430px;110    left: 0;111    width: 1080px;112    display: grid;113    grid-template-columns: 1fr 1fr;114    border-top: 1px solid #efefef;115  }116  .product-card {117    padding: 28px 28px 40px 28px;118    box-sizing: border-box;119    border-right: 1px solid #f0f0f0;120    border-bottom: 1px solid #f0f0f0;121    position: relative;122    min-height: 700px;123  }124  .product-card:nth-child(2n) { border-right: none; }125  .img-ph {126    width: 100%;127    height: 360px;128    background: #E0E0E0;129    border: 1px solid #BDBDBD;130    display: flex;131    justify-content: center;132    align-items: center;133    color: #757575;134    font-size: 34px;135    box-sizing: border-box;136  }137  .fav-circle {138    position: absolute;139    top: 40px;140    right: 40px;141    width: 92px;142    height: 92px;143    border-radius: 46px;144    background: #ffffff;145    border: 1px solid #e5e5e5;146    box-shadow: 0 2px 6px rgba(0,0,0,0.06);147    display: flex;148    align-items: center;149    justify-content: center;150  }151  .title {152    margin-top: 24px;153    font-size: 40px;154    color: #555;155    line-height: 1.2;156  }157  .price-row {158    margin-top: 16px;159    display: flex;160    align-items: baseline;161    gap: 18px;162  }163  .price-now {164    font-size: 48px;165    font-weight: 800;166  }167  .price-old {168    font-size: 40px;169    color: #999;170    text-decoration: line-through;171  }172  .discount {173    margin-top: 8px;174    color: #1e88e5;175    font-size: 38px;176    font-weight: 700;177  }178  .stars {179    margin-top: 10px;180    display: flex;181    gap: 8px;182  }183 184  /* Gesture bar */185  .gesture {186    position: absolute;187    bottom: 30px;188    left: 50%;189    transform: translateX(-50%);190    width: 360px;191    height: 14px;192    background: #000;193    border-radius: 7px;194    opacity: 0.85;195  }196</style>197</head>198<body>199<div id="render-target">200 201  <!-- Status bar -->202  <div class="status-bar">203    <div>11:00</div>204    <div class="status-right">205      <!-- simple status icons -->206      <svg class="status-icon" width="44" height="44" viewBox="0 0 44 44">207        <circle cx="12" cy="22" r="5" fill="#ffffff" opacity="0.9"></circle>208        <circle cx="22" cy="22" r="5" fill="#ffffff" opacity="0.8"></circle>209        <circle cx="32" cy="22" r="5" fill="#ffffff" opacity="0.7"></circle>210      </svg>211      <svg class="status-icon" width="44" height="44" viewBox="0 0 44 44">212        <rect x="4" y="12" width="28" height="20" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="3"></rect>213        <rect x="8" y="16" width="20" height="12" fill="#fff"></rect>214        <rect x="35" y="17" width="4" height="10" fill="#fff"></rect>215      </svg>216      <div>100%</div>217    </div>218  </div>219 220  <!-- Header -->221  <div class="header">222    <!-- Back -->223    <div class="icon-btn">224      <svg width="64" height="64" viewBox="0 0 48 48">225        <path d="M28 10 L14 24 L28 38" fill="none" stroke="#4ea4a7" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>226      </svg>227    </div>228    <div class="header-title">SCREWDRIVER KIT</div>229    <div class="header-actions">230      <!-- Search -->231      <div class="icon-btn">232        <svg width="64" height="64" viewBox="0 0 48 48">233          <circle cx="20" cy="20" r="12" fill="none" stroke="#4ea4a7" stroke-width="4"></circle>234          <line x1="30" y1="30" x2="42" y2="42" stroke="#4ea4a7" stroke-width="4" stroke-linecap="round"></line>235        </svg>236      </div>237      <!-- Cart -->238      <div class="icon-btn">239        <svg width="64" height="64" viewBox="0 0 48 48">240          <rect x="8" y="14" width="28" height="18" rx="2" fill="none" stroke="#4ea4a7" stroke-width="4"></rect>241          <circle cx="16" cy="38" r="3" fill="#4ea4a7"></circle>242          <circle cx="28" cy="38" r="3" fill="#4ea4a7"></circle>243        </svg>244      </div>245    </div>246  </div>247 248  <!-- Filter bar -->249  <div class="filter-bar">250    <div class="filter-item">251      <svg class="filter-icon" viewBox="0 0 48 48">252        <path d="M8 16 H40" stroke="#777" stroke-width="4" stroke-linecap="round"></path>253        <circle cx="24" cy="16" r="6" fill="none" stroke="#777" stroke-width="4"></circle>254        <path d="M8 32 H40" stroke="#777" stroke-width="4" stroke-linecap="round"></path>255        <circle cx="16" cy="32" r="6" fill="none" stroke="#777" stroke-width="4"></circle>256      </svg>257      <span>Category</span>258      <span class="caret">▾</span>259    </div>260    <div class="filter-item">261      <svg class="filter-icon" viewBox="0 0 48 48">262        <path d="M8 14 H40" stroke="#777" stroke-width="4" stroke-linecap="round"></path>263        <circle cx="16" cy="14" r="4" fill="#777"></circle>264        <path d="M8 24 H40" stroke="#777" stroke-width="4" stroke-linecap="round"></path>265        <circle cx="30" cy="24" r="4" fill="#777"></circle>266        <path d="M8 34 H40" stroke="#777" stroke-width="4" stroke-linecap="round"></path>267        <circle cx="22" cy="34" r="4" fill="#777"></circle>268      </svg>269      <span>Filter</span>270    </div>271    <div class="filter-item">272      <span style="font-size:44px;color:#777;">₹↓</span>273      <span>Price</span>274    </div>275    <div class="filter-item">276      <svg class="filter-icon" viewBox="0 0 48 48">277        <path d="M24 8 L24 40" stroke="#777" stroke-width="4" stroke-linecap="round"></path>278        <path d="M16 14 L24 8 L32 14" fill="none" stroke="#777" stroke-width="4" stroke-linecap="round"></path>279        <path d="M16 34 L24 40 L32 34" fill="none" stroke="#777" stroke-width="4" stroke-linecap="round"></path>280      </svg>281      <span>Sort</span>282    </div>283  </div>284 285  <!-- Product grid -->286  <div class="product-grid">287 288    <!-- Card 1 -->289    <div class="product-card">290      <div class="img-ph">[IMG: Screwdriver Kit Case]</div>291      <div class="fav-circle">292        <svg width="48" height="48" viewBox="0 0 48 48">293          <path d="M24 40 C10 30 8 18 16 14 C20 12 24 14 24 18 C24 14 28 12 32 14 C40 18 38 30 24 40 Z"294                fill="none" stroke="#888" stroke-width="3"></path>295        </svg>296      </div>297      <div class="title">41 Pcs Screwdriver Kit (Combination Set)</div>298      <div class="price-row">299        <div class="price-now">₹399</div>300        <div class="price-old">₹499</div>301      </div>302      <div class="discount">20% off</div>303      <div class="stars">304        <svg width="40" height="40" viewBox="0 0 48 48">305          <polygon points="24,6 29,18 42,18 31,26 35,38 24,30 13,38 17,26 6,18 19,18"306                   fill="#ff9800"></polygon>307        </svg>308        <svg width="40" height="40" viewBox="0 0 48 48">309          <polygon points="24,6 29,18 42,18 31,26 35,38 24,30 13,38 17,26 6,18 19,18"310                   fill="#ff9800"></polygon>311        </svg>312        <svg width="40" height="40" viewBox="0 0 48 48">313          <polygon points="24,6 29,18 42,18 31,26 35,38 24,30 13,38 17,26 6,18 19,18"314                   fill="#ff9800"></polygon>315        </svg>316        <svg width="40" height="40" viewBox="0 0 48 48">317          <polygon points="24,6 29,18 42,18 31,26 35,38 24,30 13,38 17,26 6,18 19,18"318                   fill="#ddd"></polygon>319        </svg>320        <svg width="40" height="40" viewBox="0 0 48 48">321          <polygon points="24,6 29,18 42,18 31,26 35,38 24,30 13,38 17,26 6,18 19,18"322                   fill="#ddd"></polygon>323        </svg>324      </div>325    </div>326 327    <!-- Card 2 -->328    <div class="product-card">329      <div class="img-ph">[IMG: Screwdriver Bits + Handle]</div>330      <div class="fav-circle">331        <svg width="48" height="48" viewBox="0 0 48 48">332          <path d="M24 40 C10 30 8 18 16 14 C20 12 24 14 24 18 C24 14 28 12 32 14 C40 18 38 30 24 40 Z"333                fill="none" stroke="#888" stroke-width="3"></path>334        </svg>335      </div>336      <div class="title">PYE 8 in 1 Screwdriver Kit with Nylon Handle</div>337      <div class="price-row">338        <div class="price-now">₹450</div>339        <div class="price-old">₹650</div>340      </div>341      <div class="discount">30% off</div>342    </div>343 344    <!-- Card 3 -->345    <div class="product-card">346      <div class="img-ph">[IMG: Hand Tool Kit - Pliers, Hammer]</div>347      <div class="fav-circle">348        <svg width="48" height="48" viewBox="0 0 48 48">349          <path d="M24 40 C10 30 8 18 16 14 C20 12 24 14 24 18 C24 14 28 12 32 14 C40 18 38 30 24 40 Z"350                fill="none" stroke="#888" stroke-width="3"></path>351        </svg>352      </div>353      <div class="title">JAMM Hand Tool Kit 4 in 1 Screwdriver Set</div>354      <div class="price-row">355        <div class="price-now">₹690</div>356        <div class="price-old">₹950</div>357      </div>358      <div class="discount">27% off</div>359    </div>360 361    <!-- Card 4 -->362    <div class="product-card">363      <div class="img-ph">[IMG: Combination Socket Wrench Set]</div>364      <div class="fav-circle">365        <svg width="48" height="48" viewBox="0 0 48 48">366          <path d="M24 40 C10 30 8 18 16 14 C20 12 24 14 24 18 C24 14 28 12 32 14 C40 18 38 30 24 40 Z"367                fill="none" stroke="#888" stroke-width="3"></path>368        </svg>369      </div>370      <div class="title">EXCLUSIVE NEW Device 40 in 1 Pack</div>371      <div class="price-row">372        <div class="price-now">₹549</div>373        <div class="price-old">₹1,999</div>374      </div>375      <div class="discount">72% off</div>376    </div>377 378  </div>379 380  <!-- Gesture bar -->381  <div class="gesture"></div>382</div>383</body>384</html>