GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>You May Also Like Grid</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #f3f4f6;12  }13 14  /* Top status bar */15  .status-bar {16    height: 110px;17    background: #2f2f38;18    color: #fff;19    display: flex;20    align-items: center;21    padding: 0 36px;22    font-weight: 600;23    font-size: 38px;24  }25  .status-right {26    margin-left: auto;27    display: flex;28    align-items: center;29    gap: 26px;30  }31  .icon-round {32    width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.25);33  }34  .wifi, .battery {35    width: 44px; height: 28px;36  }37 38  /* App bar */39  .app-bar {40    height: 140px;41    background: #2f2f38;42    color: #fff;43    display: flex;44    align-items: center;45    padding: 0 30px;46    border-bottom: 1px solid rgba(255,255,255,0.08);47  }48  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 40px; }49  .app-icon { width: 52px; height: 52px; }50 51  /* Tabs */52  .tabs {53    height: 120px;54    background: #ffffff;55    display: flex;56    align-items: center;57    gap: 60px;58    padding: 0 36px;59    border-bottom: 1px solid #e6e6ea;60    font-size: 38px;61    color: #757c86;62  }63  .tab { cursor: default; }64  .tab.active { color: #111; font-weight: 700; position: relative; }65  .tab.active::after {66    content: ""; position: absolute; left: 0; bottom: -18px; width: 60%; height: 8px; background: #ff7a00; border-radius: 8px;67  }68 69  /* Section title */70  .section-title {71    padding: 26px 36px 0 36px;72    font-size: 42px; font-weight: 700; color: #2b2f33;73  }74 75  /* Product grid */76  .grid {77    padding: 24px 24px 360px 24px; /* extra bottom space for bottom bar */78    display: grid;79    grid-template-columns: repeat(2, 1fr);80    gap: 26px;81  }82  .card {83    background: #fff;84    border-radius: 26px;85    box-shadow: 0 1px 0 rgba(0,0,0,0.04);86    overflow: hidden;87  }88  .card-inner { padding: 22px 24px 26px 24px; }89  .img {90    width: 100%; height: 420px;91    background: #E0E0E0;92    border: 1px solid #BDBDBD;93    color: #757575;94    display: flex; align-items: center; justify-content: center;95    font-size: 32px;96    border-radius: 18px;97    margin-bottom: 20px;98  }99  .title {100    font-size: 34px; line-height: 44px; color: #373a3f;101    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;102    margin-bottom: 12px;103  }104  .price {105    font-size: 42px; font-weight: 800; color: #111;106    margin-bottom: 10px;107  }108  .sold {109    font-size: 30px; color: #8b8f97;110  }111  .badge {112    display: inline-flex; align-items: center; gap: 10px;113    font-size: 28px; font-weight: 700; color: #fff;114    background: #ff6a00; padding: 8px 16px; border-radius: 16px;115    margin-bottom: 8px;116  }117  .badge svg { width: 26px; height: 26px; }118 119  /* Floating button */120  .floating-up {121    position: absolute; right: 34px; bottom: 620px;122    width: 110px; height: 110px; border-radius: 55px;123    background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.15);124    display: flex; align-items: center; justify-content: center;125  }126  .floating-up svg { width: 54px; height: 54px; }127 128  /* Bottom action bar */129  .bottom-sheet {130    position: absolute; bottom: 128px; left: 0; width: 100%;131    background: #ffffff;132    height: 220px;133    border-top-left-radius: 26px; border-top-right-radius: 26px;134    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);135    display: flex; align-items: center; justify-content: space-around;136    padding: 0 30px;137  }138  .cta {139    width: 480px; height: 120px; border-radius: 20px;140    background: #eef0f3; color: #6b7078; font-weight: 800; font-size: 42px;141    display: flex; align-items: center; justify-content: center;142  }143 144  /* System bottom bar */145  .sys-bar {146    position: absolute; bottom: 0; left: 0; width: 100%; height: 128px;147    background: #17171c;148    display: flex; align-items: center; justify-content: center;149  }150  .gesture-pill {151    width: 220px; height: 14px; border-radius: 7px; background: #bfc1c6;152  }153 154  /* Simple SVG styling */155  svg { fill: none; stroke: currentColor; stroke-width: 4; }156</style>157</head>158<body>159<div id="render-target">160 161  <!-- Status bar -->162  <div class="status-bar">163    10:02164    <div class="status-right">165      <div class="icon-round"></div>166      <div class="icon-round"></div>167      <div class="icon-round"></div>168      <div class="icon-round"></div>169      <div class="icon-round"></div>170      <svg class="wifi" viewBox="0 0 24 24" style="stroke:#fff;">171        <path d="M2 8c5-5 15-5 20 0"/>172        <path d="M6 12c3-3 9-3 12 0"/>173        <path d="M10 16c1.8-1.8 4.2-1.8 6 0"/>174        <circle cx="12" cy="20" r="1.8" style="fill:#fff; stroke:none;"></circle>175      </svg>176      <svg class="battery" viewBox="0 0 28 16" style="stroke:#fff;">177        <rect x="1" y="3" width="22" height="10" rx="2"></rect>178        <rect x="24" y="6" width="3" height="4" rx="1"></rect>179        <rect x="3" y="5" width="14" height="6" rx="1" style="fill:#fff; stroke:none;"></rect>180      </svg>181    </div>182  </div>183 184  <!-- App bar -->185  <div class="app-bar">186    <svg class="app-icon" viewBox="0 0 24 24" style="stroke:#fff;">187      <path d="M15 18l-6-6 6-6"/>188    </svg>189    <div class="app-actions">190      <svg class="app-icon" viewBox="0 0 24 24" style="stroke:#fff;">191        <path d="M6 7h12l-1 11H7L6 7z"/>192        <path d="M9 7V5a3 3 0 0 1 6 0v2"/>193      </svg>194      <svg class="app-icon" viewBox="0 0 24 24" style="stroke:#fff;">195        <path d="M4 12v8h16V12"/>196        <path d="M12 4v10"/>197        <path d="M8 8l4-4 4 4"/>198      </svg>199      <svg class="app-icon" viewBox="0 0 24 24" style="stroke:#fff;">200        <circle cx="5" cy="12" r="2" style="fill:#fff; stroke:none;"></circle>201        <circle cx="12" cy="12" r="2" style="fill:#fff; stroke:none;"></circle>202        <circle cx="19" cy="12" r="2" style="fill:#fff; stroke:none;"></circle>203      </svg>204    </div>205  </div>206 207  <!-- Tabs -->208  <div class="tabs">209    <div class="tab">Overview</div>210    <div class="tab">Reviews</div>211    <div class="tab">Description</div>212    <div class="tab active">You May Also Like</div>213  </div>214 215  <div class="section-title">You May Also Like</div>216 217  <!-- Product Grid -->218  <div class="grid">219 220    <div class="card">221      <div class="card-inner">222        <div class="img">[IMG: Brushless Cordless Drill]</div>223        <div class="title">520NM 4000rpm Brushless...</div>224        <div class="price">₹4,466.50</div>225        <div class="sold">116 sold</div>226      </div>227    </div>228 229    <div class="card">230      <div class="card-inner">231        <div class="img">[IMG: Cordless Electric Hammer Drill]</div>232        <div class="title">Cordless Electric Hammer ...</div>233        <div class="price">₹4,803.66</div>234        <div class="sold">56 sold</div>235      </div>236    </div>237 238    <div class="card">239      <div class="card-inner">240        <div class="img">[IMG: Drillpro 10mm Chuck Impact Drill]</div>241        <div class="title">Drillpro 10mm Chuck Impa...</div>242        <div class="price">₹3,202.16</div>243        <div class="badge">244          <svg viewBox="0 0 24 24"><path d="M12 2l-3 7h6l-3 7"/></svg>245          Flash Deals246        </div>247        <div class="sold">1175 sold</div>248      </div>249    </div>250 251    <div class="card">252      <div class="card-inner">253        <div class="img">[IMG: Drillpro 18v Brushless Rotary Hammer]</div>254        <div class="title">Drillpro 18v Brushless Cor...</div>255        <div class="price">₹8,259.53</div>256        <div class="sold">146 sold</div>257      </div>258    </div>259 260    <div class="card">261      <div class="card-inner">262        <div class="img">[IMG: Cordless Brushless Drill Set]</div>263        <div class="title">Cordless Brushless Drill set...</div>264        <div class="price">₹5,499.00</div>265        <div class="sold">320 sold</div>266      </div>267    </div>268 269    <div class="card">270      <div class="card-inner">271        <div class="img">[IMG: Impact Wrench + Accessories]</div>272        <div class="title">Impact Wrench Kit Access...</div>273        <div class="price">₹6,899.99</div>274        <div class="sold">88 sold</div>275      </div>276    </div>277 278  </div>279 280  <!-- Floating Up Button -->281  <div class="floating-up">282    <svg viewBox="0 0 24 24" style="stroke:#2b2f33;">283      <path d="M12 19V5"/>284      <path d="M6 11l6-6 6 6"/>285    </svg>286  </div>287 288  <!-- Bottom action bar -->289  <div class="bottom-sheet">290    <div class="cta">Buy Now</div>291    <div class="cta">Add to Cart</div>292  </div>293 294  <!-- System bottom bar -->295  <div class="sys-bar">296    <div class="gesture-pill"></div>297  </div>298 299</div>300</body>301</html>