GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Checkout UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  .statusbar {18    height: 110px;19    padding: 24px 32px;20    color: #555;21    font-size: 42px;22    display: flex;23    align-items: center;24    justify-content: space-between;25  }26  .status-icons { display: flex; align-items: center; gap: 28px; color: #777; }27  .header {28    padding: 12px 32px 24px 32px;29    display: flex;30    align-items: center;31    gap: 28px;32  }33  .close-circle {34    width: 92px;35    height: 92px;36    border-radius: 46px;37    border: 2px solid #DADADA;38    display: flex;39    align-items: center;40    justify-content: center;41  }42  .header-title {43    font-size: 72px;44    font-weight: 700;45    color: #111;46  }47 48  .banner {49    margin: 18px 32px 24px 32px;50    background: #D8E7FF;51    border-radius: 28px;52    padding: 34px;53    display: flex;54    align-items: center;55    gap: 28px;56  }57  .paypal-tag {58    border: 2px solid #BBD0FF;59    background: #F5FAFF;60    color: #1E40AF;61    font-weight: 700;62    border-radius: 10px;63    padding: 10px 18px;64    font-size: 36px;65  }66  .banner-text {67    font-size: 42px;68    color: #1f2937;69  }70 71  .section {72    padding: 10px 32px 0 32px;73  }74  .seller-label {75    font-size: 40px;76    font-weight: 700;77    color: #222;78    margin: 24px 0;79  }80 81  .item {82    display: grid;83    grid-template-columns: 210px 1fr auto;84    gap: 28px;85    align-items: start;86  }87  .thumb {88    width: 210px;89    height: 210px;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    border-radius: 28px;93    display: flex;94    align-items: center;95    justify-content: center;96    color: #757575;97    font-size: 32px;98    text-align: center;99    padding: 10px;100  }101  .item-title {102    font-size: 48px;103    line-height: 1.25;104    color: #222;105    margin-top: 8px;106  }107  .price {108    font-size: 52px;109    font-weight: 700;110    color: #222;111    margin-top: 8px;112  }113 114  .meta-row {115    display: flex;116    align-items: center;117    justify-content: space-between;118    margin: 24px 0 14px 0;119  }120  .qty {121    font-size: 40px;122    color: #8A8A8A;123  }124  .remove {125    font-size: 40px;126    color: #2962FF;127    text-decoration: none;128  }129 130  .delivery {131    margin-top: 14px;132  }133  .delivery h4 {134    margin: 0 0 14px 0;135    font-size: 40px;136    color: #333;137    font-weight: 600;138  }139  .delivery p {140    margin: 8px 0;141    font-size: 38px;142    color: #7a7a7a;143  }144  .delivery .green {145    color: #2e7d32;146    font-weight: 700;147  }148 149  .divider {150    height: 2px;151    background: #E6E6E6;152    margin: 24px 0;153  }154  .message-row {155    display: flex;156    align-items: center;157    justify-content: space-between;158    padding: 12px 0 28px 0;159  }160  .message-row .label {161    font-size: 42px;162    color: #333;163  }164 165  .qty-input {166    width: 74px;167    height: 64px;168    border: 2px solid #BDBDBD;169    border-radius: 10px;170    text-align: center;171    font-size: 40px;172    color: #333;173    background: #fff;174  }175 176  .cta {177    margin: 26px 32px;178    height: 128px;179    border-radius: 64px;180    background: #E8E8E8;181    color: #9E9E9E;182    display: flex;183    align-items: center;184    justify-content: center;185    gap: 22px;186    font-size: 50px;187    font-weight: 700;188  }189 190  .protection {191    display: flex;192    align-items: center;193    gap: 20px;194    padding: 8px 32px;195    color: #333;196    font-size: 38px;197  }198  .protection b { font-weight: 700; }199 200  .bottom-bar {201    position: absolute;202    bottom: 30px;203    left: 50%;204    transform: translateX(-50%);205    width: 240px;206    height: 16px;207    background: #CFCFCF;208    border-radius: 8px;209  }210</style>211</head>212<body>213<div id="render-target">214 215  <div class="statusbar">216    <div>2:14</div>217    <div class="status-icons">218      <!-- simple circle icon -->219      <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"/></svg>220      <!-- battery icon -->221      <svg width="48" height="36" viewBox="0 0 28 18">222        <rect x="1" y="3" width="22" height="12" rx="2" fill="none" stroke="#777" stroke-width="2"/>223        <rect x="3" y="5" width="18" height="8" fill="#777"/>224        <rect x="23" y="6" width="3" height="6" rx="1" fill="#777"/>225      </svg>226      <div style="font-size:38px;">100%</div>227    </div>228  </div>229 230  <div class="header">231    <div class="close-circle">232      <svg width="48" height="48" viewBox="0 0 24 24">233        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#444" stroke-width="2" stroke-linecap="round"/>234      </svg>235    </div>236    <div class="header-title">Checkout</div>237  </div>238 239  <div class="banner">240    <div class="paypal-tag">PayPal</div>241    <div class="banner-text">Buy with PayPal. It’s fast and simple.</div>242  </div>243 244  <!-- Seller 1 -->245  <div class="section">246    <div class="seller-label">Seller: jbar0907</div>247 248    <div class="item">249      <div class="thumb">[IMG: Coffee Machine]</div>250      <div class="item-title">251        Coffee Machine Quiet<br>252        Automatic Heating  One<br>253        Click Portable Tea Brewer254      </div>255      <div class="price">$162.99</div>256    </div>257 258    <div class="meta-row">259      <div class="qty">Quantity 1</div>260      <a href="#" class="remove">Remove</a>261    </div>262 263    <div class="delivery">264      <h4>Delivery</h4>265      <p>Est. delivery: Nov 29 – Dec 4</p>266      <p>USPS Ground Advantage</p>267      <p>Free</p>268    </div>269 270    <div class="divider"></div>271 272    <div class="message-row">273      <div class="label">Message to seller</div>274      <svg width="40" height="40" viewBox="0 0 24 24">275        <path d="M9 5 L16 12 L9 19" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>276      </svg>277    </div>278  </div>279 280  <!-- Seller 2 -->281  <div class="section">282    <div class="seller-label">Seller: rinuvo</div>283 284    <div class="item">285      <div class="thumb">[IMG: 14" Dell Latitude Laptop]</div>286      <div class="item-title">287        14" Dell Latitude Laptop<br>288        PC: Intel Core i7! Backlit<br>289        Keyboard! Built in Webcam!290      </div>291      <div class="price">$279.99</div>292    </div>293 294    <div class="meta-row">295      <div class="qty">296        Quantity297        <input class="qty-input" type="text" value="1">298      </div>299      <a href="#" class="remove">Remove</a>300    </div>301 302    <div class="delivery">303      <h4>Delivery</h4>304      <p class="green">Free 2-3 day shipping</p>305      <p>Get it by Nov 27 – Nov 28</p>306      <p>Expedited Shipping</p>307    </div>308  </div>309 310  <!-- CTA -->311  <div class="cta">312    <svg width="44" height="44" viewBox="0 0 24 24">313      <rect x="7" y="10" width="10" height="8" rx="2" fill="none" stroke="#9E9E9E" stroke-width="2"/>314      <path d="M8 10 V8 a4 4 0 0 1 8 0 v2" fill="none" stroke="#9E9E9E" stroke-width="2"/>315    </svg>316    Confirm and pay317  </div>318 319  <div class="protection">320    <svg width="48" height="48" viewBox="0 0 24 24">321      <path d="M12 2 L20 6 V12c0 6-8 8-8 8s-8-2-8-8V6z" fill="#4F83FF"/>322      <path d="M7 12l3 3 7-7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>323    </svg>324    Purchase protected by <b>eBay Money Back Guarantee</b>325  </div>326 327  <div class="bottom-bar"></div>328</div>329</body>330</html>