GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Aqara A100 Pro Product Page Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    color: #111;14  }15 16  /* Status + Nav */17  .statusbar {18    height: 120px;19    background: #222530;20    color: #fff;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    box-sizing: border-box;26    font-weight: 600;27  }28  .status-left, .status-right {29    display: flex;30    align-items: center;31    gap: 18px;32    font-size: 40px;33  }34  .status-dot {35    width: 22px; height: 22px; background:#fff; border-radius: 3px; opacity:.9;36  }37 38  .navbar {39    height: 120px;40    background: #222530;41    display: flex;42    align-items: center;43    padding: 0 24px 0 16px;44    box-sizing: border-box;45    color: #fff;46    justify-content: space-between;47  }48  .nav-left, .nav-right { display: flex; align-items: center; gap: 26px; }49  .icon {50    width: 56px; height: 56px;51    display: inline-flex; align-items: center; justify-content: center;52  }53  .badge {54    position: absolute;55    top: -6px;56    right: -6px;57    background: #ff7a00;58    color: #fff;59    font-size: 28px;60    line-height: 28px;61    border-radius: 18px;62    padding: 4px 10px;63  }64  .icon-wrap { position: relative; }65 66  /* Image area */67  .hero {68    width: 1080px;69    height: 900px;70    position: relative;71    background: #E0E0E0;72    border-top: 1px solid #BDBDBD;73    border-bottom: 1px solid #BDBDBD;74    display: flex;75    align-items: center;76    justify-content: center;77    color: #555;78    text-align: center;79    font-size: 34px;80  }81  .pager-bubble {82    position: absolute;83    bottom: 22px;84    left: 26px;85    background: rgba(0,0,0,0.6);86    color: #fff;87    font-size: 34px;88    padding: 10px 18px;89    border-radius: 36px;90  }91 92  /* Content */93  .content { padding: 24px 32px 240px; box-sizing: border-box; }94  .price-row {95    display: flex;96    align-items: baseline;97    gap: 24px;98  }99  .price {100    font-size: 72px; font-weight: 800; color: #111;101  }102  .old-price {103    font-size: 38px; color: #777; text-decoration: line-through;104  }105 106  .promo-row {107    display: flex; align-items: center; gap: 12px; margin-top: 18px;108    color: #666; font-size: 34px;109  }110  .promo-chip {111    background: #eef6ff; color: #2b78ff; border: 1px solid #bcd8ff;112    padding: 6px 12px; border-radius: 10px; font-weight: 700; font-size: 30px;113  }114 115  .title {116    margin-top: 22px;117    font-size: 42px;118    line-height: 58px;119    font-weight: 600;120    color: #1b1b1b;121  }122  .subtle { color: #666; font-size: 34px; margin-top: 10px; }123 124  .pill {125    border: 1px solid #d9d9d9;126    border-radius: 18px;127    padding: 26px;128    margin-top: 28px;129  }130  .pill .row { display: flex; align-items: center; justify-content: space-between; }131  .pill .label { color: #666; font-size: 34px; }132  .pill .value { color: #111; font-size: 40px; font-weight: 700; }133 134  .section-title {135    margin-top: 36px;136    font-size: 40px;137    font-weight: 700;138    color: #111;139    display: flex; align-items: center; justify-content: space-between;140  }141  .warning {142    margin-top: 14px;143    color: #e76a00;144    font-size: 36px;145  }146  .divider { height: 16px; background: #f3f3f3; margin: 26px -32px; }147 148  /* Bottom action bar */149  .bottom-bar {150    position: absolute;151    left: 0; right: 0; bottom: 0;152    height: 200px;153    background: #ffffff;154    border-top: 1px solid #e6e6e6;155    display: flex;156    padding: 20px 24px;157    box-sizing: border-box;158    gap: 24px;159  }160  .btn {161    flex: 1;162    border-radius: 22px;163    font-size: 46px;164    font-weight: 700;165    display: flex; align-items: center; justify-content: center;166  }167  .btn.secondary { background: #f0f0f0; color: #222; }168  .btn.primary { background: #e6e7ea; color: #282828; }169 170  /* Small helpers */171  .muted { color:#7a7a7a; }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status Bar -->178  <div class="statusbar">179    <div class="status-left">180      <div>9:00</div>181      <div class="status-dot"></div>182      <div class="status-dot" style="border-radius: 50%; width: 20px; height:20px;"></div>183    </div>184    <div class="status-right">185      <div style="font-size:34px;">Wi‑Fi</div>186      <div style="width:38px; height:20px; border:2px solid #fff; border-radius:4px; position:relative;">187        <div style="position:absolute; right:2px; top:2px; bottom:2px; width:10px; background:#fff;"></div>188      </div>189    </div>190  </div>191 192  <!-- Navigation Bar -->193  <div class="navbar">194    <div class="nav-left">195      <div class="icon">196        <svg viewBox="0 0 24 24" width="52" height="52" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">197          <path d="M15 18l-6-6 6-6"/>198        </svg>199      </div>200    </div>201    <div class="nav-right">202      <div class="icon-wrap">203        <div class="icon">204          <svg viewBox="0 0 24 24" width="50" height="50" fill="none" stroke="#fff" stroke-width="2">205            <path d="M6 6h12l-1.5 9h-9z"/>206            <circle cx="9" cy="20" r="1.6" fill="#fff"></circle>207            <circle cx="15" cy="20" r="1.6" fill="#fff"></circle>208          </svg>209        </div>210        <div class="badge">2</div>211      </div>212      <div class="icon">213        <svg viewBox="0 0 24 24" width="50" height="50" fill="none" stroke="#fff" stroke-width="2">214          <path d="M12 5v12M7 10l5-5 5 5"/>215          <path d="M5 19h14v0" />216        </svg>217      </div>218      <div class="icon">219        <svg viewBox="0 0 24 24" width="50" height="50" fill="#fff">220          <circle cx="5" cy="12" r="2"></circle>221          <circle cx="12" cy="12" r="2"></circle>222          <circle cx="19" cy="12" r="2"></circle>223        </svg>224      </div>225    </div>226  </div>227 228  <!-- Product Image -->229  <div class="hero">230    [IMG: Smart Door Lock on wooden door with modern living room background]231    <div class="pager-bubble">5/6</div>232  </div>233 234  <!-- Product Content -->235  <div class="content">236    <div class="price-row">237      <div class="price">₹20,084.26</div>238      <div class="old-price">₹20,672.52</div>239    </div>240 241    <div class="promo-row">242      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">243        <path d="M3 5h18M3 12h18M3 19h18"/>244      </svg>245      <div>Promotion Sale From <b>Nov 7</b> to <b>Nov 30</b></div>246    </div>247 248    <div class="promo-row" style="justify-content: space-between; margin-top:20px;">249      <div style="display:flex; align-items:center; gap:12px;">250        <span class="promo-chip">NEW</span>251        <span class="title" style="font-size:40px; font-weight:700;">252          Aqara A100 Pro Smart Door Lock Zigbee BT5.0 Apple Homekey Unlock Fingerprint Unlock Work with Apple Homekit Aqara Home253        </span>254      </div>255    </div>256 257    <div class="subtle">1 Sold</div>258 259    <div class="pill">260      <div class="row">261        <div class="label">Type, Ship From</div>262        <div class="value">40-80mm, CN</div>263      </div>264    </div>265 266    <div class="divider"></div>267 268    <div class="section-title">269      <span>Shipping</span>270      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>271    </div>272    <div class="warning">This Warehouse Can Not Ship To India</div>273  </div>274 275  <!-- Bottom Buttons -->276  <div class="bottom-bar">277    <div class="btn secondary">Buy Now</div>278    <div class="btn primary">Add to Cart</div>279  </div>280 281</div>282</body>283</html>