GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>eBay Shopping Cart - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15  .status-bar {16    height: 80px;17    padding: 0 40px;18    display: flex;19    align-items: center;20    justify-content: space-between;21    color: #6E6E6E;22    font-size: 34px;23  }24  .status-right {25    display: flex;26    align-items: center;27    gap: 20px;28    color: #6E6E6E;29  }30  .icon {31    width: 36px;32    height: 36px;33  }34  .app-bar {35    height: 140px;36    display: flex;37    align-items: center;38    padding: 0 36px;39    gap: 24px;40  }41  .back-btn svg { width: 54px; height: 54px; }42  .title {43    font-size: 60px;44    font-weight: 700;45    color: #111;46  }47  .content {48    padding: 0 36px;49  }50  .divider { height: 1px; background: #E0E0E0; margin: 24px 0; }51  .product {52    display: grid;53    grid-template-columns: 300px 1fr;54    gap: 36px;55  }56  .img-placeholder {57    width: 300px;58    height: 230px;59    background: #E0E0E0;60    border: 1px solid #BDBDBD;61    border-radius: 26px;62    display: flex;63    align-items: center;64    justify-content: center;65    color: #757575;66    font-size: 30px;67    text-align: center;68  }69  .pill {70    display: inline-block;71    border: 2px solid #D54B4B;72    color: #D54B4B;73    border-radius: 40px;74    font-weight: 700;75    padding: 8px 18px;76    font-size: 26px;77    margin-bottom: 10px;78  }79  .product-title {80    font-size: 36px;81    line-height: 46px;82    color: #222;83    margin: 6px 0;84  }85  .subtitle { color: #8A8A8A; font-size: 30px; }86  .price { font-size: 50px; font-weight: 700; margin-top: 16px; color: #111; }87  .green { color: #2E7D32; }88  .grey { color: #757575; }89  .row-between {90    display: flex;91    align-items: center;92    justify-content: space-between;93  }94  .qty {95    font-size: 34px;96    color: #494949;97    display: flex;98    align-items: center;99    gap: 10px;100  }101  .action-link { color: #276EF1; font-size: 34px; }102  .offer {103    display: flex;104    align-items: center;105    gap: 18px;106    padding: 18px 0;107  }108  .offer .badge {109    width: 34px; height: 34px; border-radius: 50%; border: 2px solid #2E7D32; display: flex; align-items: center; justify-content: center; color: #2E7D32; font-size: 24px; font-weight: 700;110  }111  .seller {112    display: flex; align-items: center; gap: 24px;113  }114  .seller .avatar {115    width: 88px; height: 88px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;116  }117  .seller .name { font-size: 40px; font-weight: 700; color: #222; }118  .seller .feedback { font-size: 30px; color: #8A8A8A; }119  .ellipsis { font-size: 48px; color: #6E6E6E; margin-left: auto; }120  .summary {121    margin-top: 16px;122    font-size: 34px;123    color: #3A3A3A;124  }125  .summary .line { padding: 18px 0; }126  .summary .value { float: right; font-weight: 700; color: #111; }127  .summary .value.green { color: #2E7D32; font-weight: 700; }128  .subtotal { font-size: 40px; font-weight: 700; color: #111; padding-top: 10px; }129  .subtotal .amount { float: right; font-size: 40px; font-weight: 700; }130  .checkout {131    position: absolute;132    bottom: 120px;133    left: 60px;134    width: 960px;135    height: 140px;136    background: #3E6AE1;137    border-radius: 80px;138    display: flex;139    align-items: center;140    justify-content: center;141    color: #fff;142    font-size: 48px;143    font-weight: 700;144    box-shadow: 0 8px 16px rgba(62,106,225,0.35);145  }146  .home-indicator {147    position: absolute;148    bottom: 40px;149    left: 50%;150    transform: translateX(-50%);151    width: 380px;152    height: 18px;153    background: #BDBDBD;154    border-radius: 10px;155  }156  /* small chevrons */157  .chev-right { width: 34px; height: 34px; }158  .chev-down { width: 28px; height: 28px; }159</style>160</head>161<body>162<div id="render-target">163  <!-- Status Bar -->164  <div class="status-bar">165    <div>2:14</div>166    <div class="status-right">167      <span style="font-size:32px;">⦸</span>168      <svg class="icon" viewBox="0 0 24 24"><path d="M12 3c4.4 0 8 3.6 8 8h-2c0-3.3-2.7-6-6-6S6 7.7 6 11H4c0-4.4 3.6-8 8-8zm0 6c2.2 0 4 1.8 4 4h-2c0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.2 1.8-4 4-4z" fill="#6E6E6E"/></svg>169      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#6E6E6E" fill="none" stroke-width="2"/><rect x="5" y="8" width="14" height="8" fill="#6E6E6E"/></svg>170      <span>100%</span>171    </div>172  </div>173 174  <!-- App Bar -->175  <div class="app-bar">176    <div class="back-btn">177      <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>178    </div>179    <div class="title">eBay shopping cart</div>180  </div>181 182  <div class="content">183    <!-- First product -->184    <div class="product">185      <div class="img-placeholder">[IMG: Laptop product]</div>186      <div>187        <div class="pill">9 SOLD</div>188        <div class="product-title">14" Dell Latitude Laptop PC: Intel Core i7! Backlit Keyboard! Built in Webcam!</div>189        <div class="subtitle">Excellent - Refurbished</div>190        <div class="price">$279.99</div>191        <div class="green" style="font-size:32px; margin-top:6px;">Free 2-3 day shipping</div>192        <div class="grey" style="font-size:30px;">Free Returns</div>193      </div>194    </div>195 196    <div class="row-between" style="margin-top: 26px;">197      <div class="qty">198        <svg class="chev-down" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"/></svg>199        Qty 1200      </div>201      <div>202        <span class="action-link" style="margin-right: 36px;">Save for later</span>203        <span class="action-link">Remove</span>204      </div>205    </div>206 207    <div class="divider" style="margin-top: 28px;"></div>208 209    <div class="row-between" style="padding: 12px 0;">210      <div class="grey" style="font-size:34px;">Shipping</div>211      <svg class="chev-right" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round"/></svg>212    </div>213 214    <div class="offer">215      <div class="badge">✓</div>216      <div>217        <div style="font-weight:700; font-size:34px; color:#333;">Offer applied</div>218        <div class="grey" style="font-size:30px;">Save up to $50</div>219      </div>220    </div>221 222    <!-- Seller header -->223    <div class="divider"></div>224    <div class="seller" style="margin: 10px 0 20px;">225      <div class="avatar">[IMG]</div>226      <div>227        <div class="name">jbar0907</div>228        <div class="feedback">100.0% positive feedback</div>229      </div>230      <div class="ellipsis">⋮</div>231    </div>232 233    <!-- Second product -->234    <div class="product" style="margin-top: 6px;">235      <div class="img-placeholder" style="height: 240px;">[IMG: Coffee Machine]</div>236      <div>237        <div class="pill">LAST ONE</div>238        <div class="product-title">Coffee Machine Quiet Automatic Heating  One Click Portable Tea Brewer</div>239        <div class="subtitle">New</div>240        <div class="price" style="margin-top: 10px;">$162.99</div>241        <div class="green" style="font-size:32px; margin-top:6px;">Free shipping</div>242      </div>243    </div>244 245    <div class="row-between" style="margin-top: 26px;">246      <div class="qty">247        Qty 1248      </div>249      <div>250        <span class="action-link" style="margin-right: 36px;">Save for later</span>251        <span class="action-link">Remove</span>252      </div>253    </div>254 255    <div class="divider" style="margin-top: 24px;"></div>256 257    <!-- Summary -->258    <div class="summary">259      <div class="line">Items (2) <span class="value">$442.98</span></div>260      <div class="line">Shipping to 72845-8907 <span class="value green">Free</span></div>261      <div class="divider" style="margin: 24px 0;"></div>262      <div class="subtotal">Subtotal <span class="amount">$442.98</span></div>263    </div>264  </div>265 266  <!-- Checkout button -->267  <div class="checkout">Go to checkout</div>268  <div class="home-indicator"></div>269</div>270</body>271</html>