GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Render</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: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15    color: #333;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 80px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 24px;29    font-size: 32px;30    color: #2d2d2d;31    z-index: 10;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 16px;37  }38  .status-icon {39    width: 28px; height: 28px; background: #cfcfcf; border-radius: 50%;40  }41  .status-battery {42    width: 46px; height: 24px; border: 2px solid #2d2d2d; border-radius: 6px; position: relative;43  }44  .status-battery::after { content: ""; position: absolute; right: -6px; top: 8px; width: 6px; height: 8px; background: #2d2d2d; border-radius: 2px; }45  .status-battery-fill { width: 60%; height: 100%; background: #2d2d2d; }46 47  /* Gradient header area */48  .header {49    position: absolute;50    top: 80px;51    left: 0;52    width: 1080px;53    height: 210px;54    background: linear-gradient(180deg, #88dfd5 0%, #8fe7d1 100%);55    padding: 24px;56    box-sizing: border-box;57  }58  .back-btn {59    position: absolute;60    top: 132px;61    left: 24px;62    width: 60px;63    height: 60px;64    display: flex;65    align-items: center;66    justify-content: center;67  }68  .searchbar {69    position: absolute;70    top: 116px;71    left: 96px;72    width: 880px;73    height: 86px;74    background: #fff;75    border-radius: 20px;76    box-shadow: 0 6px 10px rgba(0,0,0,0.15);77    display: flex;78    align-items: center;79    padding: 0 24px;80    gap: 18px;81    box-sizing: border-box;82  }83  .search-input {84    flex: 1;85    font-size: 34px;86    color: #444;87  }88  .scan-btn {89    width: 64px; height: 64px; border-radius: 16px; background: #f2f2f2;90    display: flex; align-items: center; justify-content: center;91  }92 93  /* Sponsored top card */94  .product-card {95    position: absolute;96    top: 290px;97    left: 0;98    width: 1080px;99    padding: 16px 24px;100    box-sizing: border-box;101    border-bottom: 1px solid #e6e6e6;102    background: #fff;103  }104  .row { display: flex; align-items: center; }105  .thumb {106    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;107    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; margin-right: 18px;108  }109  .title {110    font-size: 30px; font-weight: 700; color: #222; line-height: 1.2;111    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;112    max-width: 720px;113  }114  .sponsored {115    margin-left: auto; font-size: 26px; color: #888;116  }117  .price-row { margin-top: 8px; display: flex; align-items: baseline; gap: 16px; }118  .price { font-size: 40px; color: #e65100; font-weight: 700; }119  .mrp { font-size: 30px; color: #9e9e9e; text-decoration: line-through; }120  .brand-rating {121    margin-top: 24px; display: flex; align-items: center; justify-content: space-between;122  }123  .brand {124    font-size: 28px;125  }126  .brand .link { color: #1a73e8; font-weight: 700; }127  .rating { font-size: 26px; display: flex; align-items: center; gap: 8px; }128  .stars { color: #ff9f00; font-size: 28px; letter-spacing: 4px; }129 130  /* Main product image */131  .image-block {132    position: absolute;133    top: 540px;134    left: 24px;135    width: 1032px;136    height: 740px;137    background: #E0E0E0;138    border: 1px solid #BDBDBD;139    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;140  }141  .badge {142    position: absolute;143    top: 560px;144    left: 24px;145    width: 124px; height: 124px; border-radius: 62px; background: #b43c00;146    color: #fff; font-weight: 800; font-size: 34px; display: flex; align-items: center; justify-content: center; flex-direction: column;147    box-shadow: 0 6px 10px rgba(0,0,0,0.2);148  }149  .badge small { font-size: 26px; font-weight: 700; }150  .share {151    position: absolute; top: 560px; right: 48px; width: 64px; height: 64px; background: #fff; border-radius: 18px;152    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.2);153  }154  .heart {155    position: absolute; bottom: 620px; left: 48px; width: 70px; height: 70px; background: #ffffffcc; border-radius: 36px;156    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.2);157  }158  /* Carousel dots */159  .dots {160    position: absolute; top: 1310px; left: 0; width: 1080px;161    display: flex; align-items: center; justify-content: center; gap: 26px;162  }163  .dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #bdbdbd; }164  .dot.active { background: #178e95; border-color: #178e95; }165 166  /* Colour section */167  .colour {168    position: absolute;169    top: 1360px;170    left: 0;171    width: 1080px;172    padding: 24px;173    box-sizing: border-box;174    border-top: 1px solid #e5e5e5;175    background: #fff;176  }177  .colour-header {178    display: flex; align-items: center; justify-content: space-between; font-size: 34px;179  }180  .colour-header b { font-weight: 800; margin-left: 8px; }181  .caret {182    width: 36px; height: 36px; border: 4px solid #888; border-left: none; border-top: none;183    transform: rotate(-45deg);184  }185  .variants {186    margin-top: 24px; display: flex; gap: 18px; overflow: hidden;187  }188  .card {189    width: 300px; height: 300px; background: #fff; border: 2px solid #e0e0e0; border-radius: 22px;190    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.06);191  }192  .card.selected { border-color: #ff9800; box-shadow: 0 0 0 3px rgba(255,152,0,0.3) inset; }193  .card .img {194    width: 260px; height: 260px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; border-radius: 12px;195  }196 197  /* Bottom nav bar */198  .bottom-nav {199    position: absolute;200    bottom: 110px;201    left: 0;202    width: 1080px;203    height: 140px;204    background: #fff;205    border-top: 1px solid #e6e6e6;206    display: flex; align-items: center; justify-content: space-around;207  }208  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #2f2f2f; font-size: 24px; }209  .nav-icon { width: 56px; height: 56px; }210  .cart-badge {211    position: absolute; top: 18px; right: 210px; width: 40px; height: 40px; background: #fff; border: 2px solid #2f2f2f; border-radius: 50%;212    display: flex; align-items: center; justify-content: center; font-size: 24px;213  }214 215  /* Gesture handle */216  .gesture {217    position: absolute;218    bottom: 40px; left: 50%; transform: translateX(-50%);219    width: 360px; height: 16px; background: #cfcfcf; border-radius: 8px;220  }221</style>222</head>223<body>224<div id="render-target">225 226  <!-- Status Bar -->227  <div class="status-bar">228    <div>10:37</div>229    <div class="status-right">230      <div class="status-icon"></div>231      <div class="status-icon"></div>232      <div class="status-battery"><div class="status-battery-fill"></div></div>233    </div>234  </div>235 236  <!-- Gradient Header with Search -->237  <div class="header"></div>238  <div class="back-btn">239    <svg width="48" height="48" viewBox="0 0 24 24">240      <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>241    </svg>242  </div>243  <div class="searchbar">244    <svg width="34" height="34" viewBox="0 0 24 24">245      <circle cx="11" cy="11" r="7" fill="none" stroke="#777" stroke-width="2"></circle>246      <path d="M16 16l5 5" stroke="#777" stroke-width="2" stroke-linecap="round"></path>247    </svg>248    <div class="search-input">sofa gray colour</div>249    <div class="scan-btn">250      <svg width="36" height="36" viewBox="0 0 24 24">251        <path d="M3 7v-3h6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path>252        <path d="M21 7v-3h-6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path>253        <path d="M3 17v3h6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path>254        <path d="M21 17v3h-6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path>255        <rect x="7" y="7" width="10" height="10" rx="2" stroke="#666" stroke-width="2" fill="none"></rect>256      </svg>257    </div>258  </div>259 260  <!-- Sponsored Row -->261  <div class="product-card">262    <div class=