GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>46 pcs tool set - Product UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Status bar */15  .status-bar {16    height:90px;17    padding:18px 24px;18    box-sizing:border-box;19    display:flex;20    align-items:center;21    justify-content:space-between;22    color:#222;23    font-weight:600;24    font-size:36px;25  }26  .status-icons {27    display:flex; align-items:center; gap:22px; color:#444; font-size:28px;28  }29  .dot { width:16px; height:16px; background:#000; border-radius:50%; display:inline-block; }30  .battery {31    width:48px; height:24px; border:2px solid #111; border-radius:5px; position:relative;32  }33  .battery:after { content:""; position:absolute; right:-10px; top:6px; width:6px; height:12px; background:#111; border-radius:2px; }34  .battery .lvl { position:absolute; left:2px; top:2px; height:18px; width:36px; background:#4CAF50; }35 36  /* Top controls */37  .top-controls {38    display:flex; align-items:center; gap:24px;39    padding:8px 24px 16px 24px;40  }41  .circle-btn {42    width:80px; height:80px; border-radius:50%; background:#EFEFEF; border:1px solid #CFCFCF;43    display:flex; align-items:center; justify-content:center;44  }45  .search-bar {46    flex:1;47    height:86px; border-radius:44px; background:#F3F3F5; border:1px solid #D9D9DF;48    display:flex; align-items:center; padding:0 24px; box-sizing:border-box; color:#666;49    font-size:36px; font-weight:500;50  }51  .right-icons { display:flex; align-items:center; gap:22px; }52  .notif-dot {53    position:absolute; width:40px; height:40px; background:#FF3B30; color:#fff; font-size:24px; font-weight:700;54    border-radius:50%; display:flex; align-items:center; justify-content:center; right:70px; top:158px;55    box-shadow:0 2px 4px rgba(0,0,0,0.2);56  }57 58  /* Main image */59  .main-image {60    margin:18px 24px 0 24px;61    height:780px; border:1px solid #BDBDBD; background:#E0E0E0;62    display:flex; align-items:center; justify-content:center; color:#757575; font-size:38px; font-weight:600;63  }64 65  /* Thumbnail carousel */66  .thumb-row {67    display:flex; gap:22px; padding:26px 24px;68  }69  .thumb {70    width:210px; height:160px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;71  }72  .thumb.active { border:4px solid #FF6A00; }73 74  /* Product meta */75  .section {76    padding:14px 24px;77  }78  .title {79    font-size:44px; font-weight:700; color:#222; display:flex; align-items:center; gap:16px;80  }81  .info-icon {82    width:34px; height:34px; border-radius:50%; border:2px solid #888; color:#666; display:inline-flex; align-items:center; justify-content:center; font-size:24px;83  }84 85  /* pricing grid */86  .pricing {87    display:flex; justify-content:space-between; padding:18px 24px;88  }89  .price-col {90    width:33%; box-sizing:border-box;91  }92  .price {93    font-size:54px; font-weight:800; color:#111;94  }95  .sub {96    font-size:30px; color:#666; margin-top:8px;97  }98 99  .desc { font-size:36px; color:#333; line-height:1.35; padding:16px 24px; }100  .reviews-row {101    display:flex; align-items:center; justify-content:space-between;102    padding:6px 24px 24px 24px; color:#333; font-size:36px;103  }104  .reviews-row .muted { color:#777; margin-left:18px; }105  .icon-btn {106    width:76px; height:76px; border:1px solid #CCC; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-left:16px; background:#fff;107  }108 109  /* bottom actions */110  .bottom-actions {111    position:absolute; left:0; right:0; bottom:90px;112    padding:18px 24px;113    display:flex; align-items:center; gap:22px;114  }115  .label-btn {116    flex:0 0 220px; height:120px; border:1px solid #D7D7D7; border-radius:24px; background:#fff;117    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;118    font-size:30px; color:#333;119    box-shadow:0 2px 6px rgba(0,0,0,0.06);120  }121  .primary-btn {122    flex:0 0 360px; height:120px; border-radius:60px; background:#fff; border:2px solid #222; color:#111; font-size:40px; font-weight:700;123    display:flex; align-items:center; justify-content:center;124    box-shadow:0 2px 6px rgba(0,0,0,0.08);125  }126  .cta-btn {127    flex:1; height:120px; border-radius:60px; background:#FF7A1A; color:#fff; font-size:42px; font-weight:800; display:flex; align-items:center; justify-content:center;128    box-shadow:0 6px 12px rgba(255,122,26,0.35);129  }130 131  /* simple icons */132  svg { display:block; }133</style>134</head>135<body>136<div id="render-target">137 138  <!-- Status bar -->139  <div class="status-bar">140    <div>3:09</div>141    <div class="status-icons">142      <span>Wi-Fi</span>143      <span class="battery"><span class="lvl"></span></span>144      <span>100%</span>145    </div>146  </div>147 148  <!-- Top controls -->149  <div class="top-controls">150    <div class="circle-btn" title="Back">151      <svg width="40" height="40" viewBox="0 0 24 24">152        <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>153      </svg>154    </div>155 156    <div class="search-bar">157      <svg width="40" height="40" viewBox="0 0 24 24" style="margin-right:14px;">158        <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"/>159        <line x1="15" y1="15" x2="22" y2="22" stroke="#666" stroke-width="2"/>160      </svg>161      46 pcs tool set162    </div>163 164    <div class="right-icons">165      <div class="circle-btn" title="Camera">166        <svg width="40" height="40" viewBox="0 0 24 24">167          <rect x="4" y="7" width="16" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"/>168          <circle cx="12" cy="13" r="4" stroke="#333" stroke-width="2" fill="none"/>169          <path d="M9 7l2-3h2l2 3" stroke="#333" stroke-width="2" fill="none" />170        </svg>171      </div>172      <div class="circle-btn" title="Cart">173        <svg width="44" height="44" viewBox="0 0 24 24">174          <circle cx="9" cy="20" r="2" fill="#333"></circle>175          <circle cx="17" cy="20" r="2" fill="#333"></circle>176          <path d="M5 5h2l1 9h10l2-7H8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>177        </svg>178      </div>179      <div class="circle-btn" title="Menu">180        <svg width="46" height="46" viewBox="0 0 24 24">181          <circle cx="12" cy="5" r="2" fill="#333"/>182          <circle cx="12" cy="12" r="2" fill="#333"/>183          <circle cx="12" cy="19" r="2" fill="#333"/>184        </svg>185      </div>186    </div>187    <div class="notif-dot">3</div>188  </div>189 190  <!-- Main product image -->191  <div class="main-image">[IMG: 46 piece tool set in red case]</div>192 193  <!-- Thumbnail row -->194  <div class="thumb-row">195    <div class="thumb active">[IMG]</div>196    <div class="thumb">[IMG]</div>197    <div class="thumb">[IMG]</div>198    <div class="thumb">[IMG]</div>199    <div class="thumb">[IMG]</div>200  </div>201 202  <!-- Product meta sections -->203  <div class="section">204    <div class="title">Ready to Ship <span class="info-icon">i</span></div>205  </div>206 207  <div class="pricing">208    <div class="price-col">209      <div class="price">₹253.42</div>210      <div class="sub">Min. order: 1 piece</div>211    </div>212    <div class="price-col">213      <div class="price">₹244.80</div>214      <div class="sub">500-999 pieces</div>215    </div>216    <div class="price-col">217      <div class="price">₹236.18</div>218      <div class="sub">≥1000 pieces</div>219    </div>220  </div>221 222  <div class="desc">223    46 piece set of auto repair tools on-board household repair kit wrench socket224  </div>225 226  <div class="reviews-row">227    <div>228      <span style="font-weight:700;">3 reviews</span>229      <span class="muted">· 28 orders</span>230    </div>231    <div style="display:flex; align-items:center;">232      <div class="icon-btn" title="Favorite">233        <svg width="38" height="38" viewBox="0 0 24 24">234          <path d="M12 21s-7-4.4-9-8.5C1.6 9.2 3.3 7 5.6 7c1.5 0 2.7.8 3.4 2 0.7-1.2 1.9-2 3.4-2 2.3 0 4 2.2 2.6 5.5-2 4.1-9 8.5-9 8.5z" stroke="#333" stroke-width="2" fill="none" stroke-linejoin="round"/>235        </svg>236      </div>237      <div class="icon-btn" title="Share">238        <svg width="38" height="38" viewBox="0 0 24 24">239          <circle cx="6" cy="12" r="3" stroke="#333" stroke-width="2" fill="none"/>240          <circle cx="18" cy="5" r="3" stroke="#333" stroke-width="2" fill="none"/>241          <circle cx="18" cy="19" r="3" stroke="#333" stroke-width="2" fill="none"/>242          <path d="M8.7 10.8l6-3.5M8.7 13.2l6 3.5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>243        </svg>244      </div>245    </div>246  </div>247 248  <!-- Spacer to push bottom buttons into view -->249  <div style="height:920px;"></div>250 251  <!-- Bottom action buttons -->252  <div class="bottom-actions">253    <div class="label-btn">254      <svg width="42" height="42" viewBox="0 0 24 24">255        <path d="M4 5h16v10H7l-3 3V5z" stroke="#333" stroke-width="2" fill="none" stroke-linejoin="round"/>256      </svg>257      <div>Chat now</div>258    </div>259    <div class="label-btn">260      <svg width="42" height="42" viewBox="0 0 24 24">261        <rect x="3" y="5" width="18" height="14" rx="2" stroke="#333" stroke-width="2" fill="none"/>262        <path d="M4 7l8 6 8-6" stroke="#333" stroke-width="2" fill="none" />263      </svg>264      <div>Send inquiry</div>265    </div>266    <div class="primary-btn">Add to cart</div>267    <div class="cta-btn">Start order</div>268  </div>269 270</div>271</body>272</html>