GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>More Like This - Tools</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1440px; height: 3120px;11    position: relative; overflow: hidden;12    background: #ffffff;13    font-family: Arial, Helvetica, sans-serif;14    color: #222;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    padding: 0 48px;24    font-size: 42px;25    color: #333;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 28px;31  }32  .dot { width: 14px; height: 14px; background:#9e9e9e; border-radius:50%; display:inline-block; }33 34  /* Header actions */35  .header {36    position: relative;37    padding: 24px 48px 0 48px;38  }39  .back-btn {40    width: 96px; height: 96px; border-radius: 48px;41    border: 1px solid #e0e0e0; background: #fff;42    display: flex; align-items: center; justify-content: center;43  }44  .header-actions {45    position: absolute; right: 48px; top: 0;46    display: flex; gap: 24px;47  }48  .circle-icon {49    width: 96px; height: 96px; border-radius: 48px;50    border: 1px solid #e0e0e0; background: #fff;51    display: flex; align-items: center; justify-content: center;52  }53  .icon { width: 48px; height: 48px; }54 55  /* Tabs */56  .tabs-wrap {57    margin: 24px 48px 16px 48px;58    background: #f1f1f1;59    border-radius: 40px;60    padding: 8px;61    display: flex;62    gap: 8px;63  }64  .tab {65    flex: 1;66    text-align: center;67    padding: 24px 0;68    border-radius: 32px;69    font-size: 40px;70    color: #666;71  }72  .tab.active {73    background: #ffffff;74    color: #333;75    box-shadow: 0 2px 8px rgba(0,0,0,0.06);76    font-weight: bold;77  }78 79  /* Divider line under tabs */80  .divider { height: 8px; background: #f3f3f3; }81 82  /* Product grid */83  .grid {84    display: grid;85    grid-template-columns: 1fr 1fr;86    column-gap: 32px;87    row-gap: 48px;88    padding: 32px 48px 0 48px;89  }90  .product {91    border-top: 8px solid #f3f3f3;92    padding-top: 32px;93  }94  .img {95    width: 100%; height: 620px;96    background: #E0E0E0;97    border: 1px solid #BDBDBD;98    display: flex; align-items: center; justify-content: center;99    color: #757575; font-size: 44px;100    border-radius: 12px;101  }102  .badge {103    display: inline-block;104    margin-top: 24px;105    padding: 14px 22px;106    border-radius: 12px;107    font-size: 36px;108    font-weight: bold;109  }110  .badge.green { background: #e7f4e7; color: #2e7d32; }111  .badge.pink { background: #fde7f3; color: #b0006d; }112 113  .title {114    margin-top: 18px;115    font-size: 42px;116    line-height: 1.3;117    color: #333;118  }119  .price-row {120    display: flex; align-items: baseline; gap: 18px;121    margin-top: 16px;122  }123  .price {124    font-size: 54px; font-weight: 800; color: #000;125  }126  .old-price {127    font-size: 40px; color: #888; text-decoration: line-through;128  }129  .off {130    font-size: 40px; color: #b47c12; font-weight: bold;131  }132 133  /* Bottom gesture bar */134  .gesture-bar {135    position: absolute; bottom: 32px; left: 50%;136    transform: translateX(-50%);137    width: 420px; height: 16px; background: #000; border-radius: 12px;138    opacity: 0.8;139  }140</style>141</head>142<body>143<div id="render-target">144 145  <!-- Status Bar -->146  <div class="status-bar">147    <div>2:27</div>148    <div class="status-right">149      <!-- simple icons -->150      <svg class="icon" viewBox="0 0 24 24" fill="#616161">151        <path d="M3 9h18v6H3z"/>152      </svg>153      <svg class="icon" viewBox="0 0 24 24" fill="#616161">154        <path d="M12 3l10 9H2z"/>155      </svg>156      <span class="dot"></span>157      <svg class="icon" viewBox="0 0 24 24" fill="#616161">158        <path d="M4 4h16v14H4z"/><path d="M8 20h8v1H8z"/>159      </svg>160      <svg class="icon" viewBox="0 0 24 24" fill="#616161">161        <path d="M6 18h12l2-9H4zM6 6h2l1-2h6l1 2h2"/>162      </svg>163    </div>164  </div>165 166  <!-- Header with back and actions -->167  <div class="header">168    <div class="back-btn">169      <svg class="icon" viewBox="0 0 24 24" fill="#555">170        <path d="M15 18l-6-6 6-6"/>171      </svg>172    </div>173    <div class="header-actions">174      <div class="circle-icon">175        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">176          <circle cx="11" cy="11" r="7"></circle>177          <path d="M20 20l-4-4"></path>178        </svg>179      </div>180      <div class="circle-icon">181        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">182          <path d="M3 11l9-8 9 8v9H3z"></path>183          <path d="M9 20v-5h6v5"></path>184        </svg>185      </div>186      <div class="circle-icon">187        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">188          <path d="M6 6h15l-2 10H7L6 6z"></path>189          <circle cx="9" cy="20" r="1.5"></circle>190          <circle cx="17" cy="20" r="1.5"></circle>191        </svg>192      </div>193    </div>194  </div>195 196  <!-- Tabs -->197  <div class="tabs-wrap">198    <div class="tab">Details</div>199    <div class="tab active">More Like This</div>200    <div class="tab">Reviews</div>201  </div>202  <div class="divider"></div>203 204  <!-- Product Grid -->205  <div class="grid">206    <!-- Card 1 -->207    <div class="product">208      <div class="img">[IMG: 102pc Drill & Tool Kit Case]</div>209      <div class="badge green">PRICE DROP</div>210      <div class="title">BD - 102pc drill machine 650W & tool accessories set</div>211      <div class="price-row">212        <div class="price">₹2,973</div>213        <div class="old-price">₹4,999</div>214        <div class="off">41% OFF</div>215      </div>216    </div>217 218    <!-- Card 2 -->219    <div class="product">220      <div class="img">[IMG: Orange Ratchet Socket Set Case]</div>221      <div class="title">Shopper52 - 46 in 1 Pcs Tool Kit & socket set</div>222      <div class="price-row">223        <div class="price">₹547</div>224        <div class="old-price">₹1,999</div>225        <div class="off">73% OFF</div>226      </div>227    </div>228 229    <!-- Card 3 -->230    <div class="product">231      <div class="img">[IMG: Black Ratchet Socket Kit Case]</div>232      <div class="badge green">PRICE DROP</div>233      <div class="title">BD 46 Pcs Screwdriver Set</div>234      <div class="price-row">235        <div class="price">₹499</div>236        <div class="old-price">₹1,250</div>237        <div class="off">60% OFF</div>238      </div>239    </div>240 241    <!-- Card 4 -->242    <div class="product">243      <div class="img">[IMG: Precision Screwdriver Bits with Pouch]</div>244      <div class="badge pink">TOP RATED</div>245      <div class="title">HOMETALES 25 in 1 Screwdriver Precision Bits Kit</div>246      <div class="price-row">247        <div class="price">₹299</div>248        <div class="old-price">₹1,199</div>249        <div class="off">75% OFF</div>250      </div>251    </div>252 253    <!-- Card 5 -->254    <div class="product">255      <div class="img">[IMG: Cordless Lighted Electric Screwdriver]</div>256      <div class="title">Rechargeable Electric Screwdriver with Light</div>257      <div class="price-row">258        <div class="price">₹1,799</div>259        <div class="old-price">₹3,499</div>260        <div class="off">49% OFF</div>261      </div>262    </div>263 264    <!-- Card 6 -->265    <div class="product">266      <div class="img">[IMG: Red Socket Bit Set Case]</div>267      <div class="title">Compact Socket Bit Kit 40 Pcs</div>268      <div class="price-row">269        <div class="price">₹699</div>270        <div class="old-price">₹1,799</div>271        <div class="off">61% OFF</div>272      </div>273    </div>274  </div>275 276  <!-- Bottom gesture bar -->277  <div class="gesture-bar"></div>278</div>279</body>280</html>