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>Products Related</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #2b2b2b;17  }18  .status-bar {19    height: 92px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    padding: 0 36px;24    font-size: 34px;25    color: #4e4e4e;26  }27  .status-icons { display: flex; align-items: center; gap: 24px; }28  .dot { width: 16px; height: 16px; background: #2b2b2b; border-radius: 50%; display: inline-block; }29  .app-bar {30    height: 128px;31    display: flex;32    align-items: center;33    gap: 24px;34    padding: 0 36px;35    border-top: 1px solid #f0f0f0;36    border-bottom: 1px solid #ededed;37    background: #fff;38  }39  .app-title {40    font-weight: 700;41    font-size: 46px;42  }43  .divider-strip {44    height: 24px;45    background: #f3f4f5;46    border-top: 1px solid #ececec;47    border-bottom: 1px solid #ececec;48  }49  .list-section { background: #fff; }50  .product-row {51    display: grid;52    grid-template-columns: 56px 200px 1fr;53    column-gap: 28px;54    padding: 36px;55    align-items: start;56  }57  .row-sep {58    height: 2px;59    background: #eeeeee;60    margin: 0 36px;61  }62  .radio {63    width: 44px;64    height: 44px;65    border: 3px solid #bfbfbf;66    border-radius: 50%;67    margin-top: 84px;68    position: relative;69  }70  .radio.selected {71    border-color: #d6d6d6;72    background: #f2f2f2;73  }74  .radio.selected::after {75    content: "";76    position: absolute;77    left: 10px;78    top: 10px;79    width: 18px;80    height: 10px;81    border-left: 4px solid #8e8e8e;82    border-bottom: 4px solid #8e8e8e;83    transform: rotate(-45deg);84  }85  .img-ph {86    width: 200px;87    height: 200px;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    border-radius: 26px;91    display: flex;92    align-items: center;93    justify-content: center;94    color: #6f6f6f;95    font-size: 26px;96    text-align: center;97    line-height: 1.2;98  }99  .p-title {100    font-size: 36px;101    font-weight: 600;102    color: #333;103    line-height: 1.25;104    margin-top: 6px;105    margin-bottom: 16px;106    white-space: nowrap;107    overflow: hidden;108    text-overflow: ellipsis;109  }110  .pill {111    display: inline-flex;112    align-items: center;113    padding: 10px 18px;114    border-radius: 14px;115    background: #efefef;116    color: #6a6a6a;117    font-size: 28px;118    gap: 8px;119    margin-bottom: 18px;120  }121  .price {122    font-size: 40px;123    font-weight: 800;124    margin-top: 6px;125  }126  .old-price {127    font-size: 30px;128    color: #9c9c9c;129    text-decoration: line-through;130    margin-top: 6px;131  }132  .spacer-area {133    height: 880px;134    background: #f4f5f7;135    border-top: 1px solid #ececec;136  }137  .total-row {138    position: absolute;139    left: 0;140    right: 0;141    bottom: 320px;142    height: 120px;143    background: #ffffff;144    border-top: 1px solid #eeeeee;145    border-bottom: 1px solid #f2f2f2;146    display: flex;147    align-items: center;148    justify-content: space-between;149    padding: 0 36px;150    font-size: 34px;151  }152  .total-row .amount {153    font-weight: 800;154    font-size: 40px;155  }156  .cta-bar {157    position: absolute;158    left: 0;159    right: 0;160    bottom: 148px;161    height: 160px;162    background: #ffffff;163    display: flex;164    align-items: center;165    gap: 32px;166    padding: 0 36px;167  }168  .btn {169    flex: 1;170    height: 120px;171    border-radius: 18px;172    color: #fff;173    font-weight: 800;174    font-size: 38px;175    display: flex;176    align-items: center;177    justify-content: center;178    border: none;179  }180  .btn.buy {181    background: linear-gradient(90deg, #ffb000, #ff9500);182  }183  .btn.cart {184    background: linear-gradient(90deg, #ff6a28, #ff3b30);185  }186  .home-indicator {187    position: absolute;188    bottom: 62px;189    left: 50%;190    transform: translateX(-50%);191    width: 260px;192    height: 10px;193    border-radius: 10px;194    background: #cfcfcf;195  }196  /* tiny svg icon styling */197  .icon { width: 48px; height: 48px; }198</style>199</head>200<body>201<div id="render-target">202  <!-- Status Bar -->203  <div class="status-bar">204    <div>3:00</div>205    <div class="status-icons">206      <span class="dot"></span>207      <!-- simple circle, video, etc. -->208      <svg class="icon" viewBox="0 0 24 24" fill="#7a7a7a"><circle cx="12" cy="12" r="3"/></svg>209      <svg class="icon" viewBox="0 0 24 24" fill="#7a7a7a"><path d="M3 8l7 5 7-5v8H3z"/></svg>210      <!-- signal -->211      <svg class="icon" viewBox="0 0 24 24" fill="#7a7a7a"><path d="M2 18h2v2H2zm4-4h2v6H6zm4-3h2v9h-2zm4-3h2v12h-2zm4-4h2v16h-2z"/></svg>212      <!-- battery -->213      <svg class="icon" viewBox="0 0 24 24" fill="#7a7a7a">214        <rect x="2" y="7" width="18" height="10" rx="2"></rect>215        <rect x="4" y="9" width="12" height="6" fill="#ffffff"></rect>216        <rect x="20" y="10" width="2" height="4" rx="1"></rect>217      </svg>218    </div>219  </div>220 221  <!-- App Bar -->222  <div class="app-bar">223    <svg class="icon" viewBox="0 0 24 24" fill="#2b2b2b">224      <path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-6.5z"></path>225    </svg>226    <div class="app-title">Products related to this item</div>227  </div>228 229  <div class="divider-strip"></div>230 231  <!-- Product List -->232  <div class="list-section">233    <!-- Item 1 -->234    <div class="product-row">235      <div class="radio selected"></div>236      <div class="img-ph">[IMG: Portable Juicer]</div>237      <div>238        <div class="p-title">XIAOMI Mijia Portable Juicer Mixer Electric ...</div>239        <div class="pill">Selected240          <svg width="18" height="18" viewBox="0 0 24 24" fill="#8a8a8a" style="margin-left:6px">241            <path d="M7 10l5 5 5-5z"></path>242          </svg>243        </div>244        <div class="price">₹2,502.74 ×1</div>245        <div class="old-price">₹4,205.44</div>246      </div>247    </div>248 249    <div class="row-sep"></div>250 251    <!-- Item 2 -->252    <div class="product-row">253      <div class="radio"></div>254      <div class="img-ph">[IMG: Blender on Green]</div>255      <div>256        <div class="p-title">Morphy MR9800 300ml Portable Food Mix...</div>257        <div class="pill">Select Details258          <svg width="18" height="18" viewBox="0 0 24 24" fill="#8a8a8a" style="margin-left:6px">259            <path d="M7 10l5 5 5-5z"></path>260          </svg>261        </div>262        <div class="price">₹3,700.69 ×1</div>263      </div>264    </div>265 266    <div class="row-sep"></div>267 268    <!-- Item 3 -->269    <div class="product-row">270      <div class="radio"></div>271      <div class="img-ph">[IMG: Two Juicers]</div>272      <div>273        <div class="p-title">Zhenmi Portable Fresh Juice Sugarcane Jui...</div>274        <div class="pill">Select Details275          <svg width="18" height="18" viewBox="0 0 24 24" fill="#8a8a8a" style="margin-left:6px">276            <path d="M7 10l5 5 5-5z"></path>277          </svg>278        </div>279        <div class="price">₹3,700.69 ×1</div>280      </div>281    </div>282  </div>283 284  <div class="spacer-area"></div>285 286  <!-- Total Row -->287  <div class="total-row">288    <div>Total (1)</div>289    <div class="amount">₹2,502.74</div>290  </div>291 292  <!-- CTA Buttons -->293  <div class="cta-bar">294    <button class="btn buy">Buy Now</button>295    <button class="btn cart">Add to Cart</button>296  </div>297 298  <!-- Home Indicator -->299  <div class="home-indicator"></div>300</div>301</body>302</html>