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>eBay Shopping Cart UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Header */18  .nav {19    display: flex;20    align-items: center;21    gap: 24px;22    padding: 40px 36px 24px 36px;23  }24  .nav .title {25    font-size: 52px;26    font-weight: 700;27    color: #111;28  }29 30  /* Promo banner */31  .promo {32    background: #CFEDEA;33    padding: 40px 36px;34  }35  .promo h1 {36    margin: 0 0 16px 0;37    font-size: 48px;38    font-weight: 700;39    color: #111;40    line-height: 1.15;41  }42  .promo p {43    margin: 0 0 18px 0;44    font-size: 30px;45    color: #444;46  }47  .promo a {48    color: #1a73e8;49    font-size: 30px;50    text-decoration: underline;51  }52 53  .section-title {54    padding: 28px 36px;55    font-size: 42px;56    font-weight: 700;57    color: #222;58    border-top: 1px solid #e6e6e6;59    border-bottom: 1px solid #e6e6e6;60  }61 62  /* Cards */63  .card {64    padding: 18px 36px 24px 36px;65    border-bottom: 1px solid #e6e6e6;66  }67 68  .seller-row {69    display: flex;70    align-items: center;71    justify-content: space-between;72    padding: 22px 0 16px 0;73  }74  .seller-left {75    display: flex;76    align-items: center;77    gap: 22px;78  }79  .avatar {80    width: 80px;81    height: 80px;82    background: #E0E0E0;83    border: 1px solid #BDBDBD;84    border-radius: 50%;85    display: flex;86    justify-content: center;87    align-items: center;88    color: #757575;89    font-size: 18px;90  }91  .seller-info .name {92    font-size: 36px;93    font-weight: 700;94    color: #222;95    margin-bottom: 6px;96  }97  .seller-info .feedback {98    font-size: 28px;99    color: #777;100  }101  .menu-icon { width: 36px; height: 36px; }102 103  .product-row {104    display: flex;105    gap: 24px;106  }107  .product-image {108    width: 220px;109    height: 220px;110    background: #E0E0E0;111    border: 1px solid #BDBDBD;112    border-radius: 28px;113    display: flex;114    justify-content: center;115    align-items: center;116    color: #757575;117    font-size: 22px;118  }119  .details {120    flex: 1;121  }122  .badge {123    display: inline-block;124    border: 2px solid #d32f2f;125    color: #d32f2f;126    font-weight: 700;127    font-size: 26px;128    padding: 6px 14px;129    border-radius: 999px;130    margin: 4px 0 12px 0;131  }132  .item-title {133    font-size: 32px;134    line-height: 44px;135    color: #333;136    margin: 4px 0 8px 0;137  }138  .subtitle {139    font-size: 28px;140    color: #777;141    margin-bottom: 12px;142  }143  .price {144    font-size: 44px;145    font-weight: 700;146    color: #111;147    margin: 10px 0 8px 0;148  }149  .shipping {150    font-size: 30px;151    color: #1e8e3e;152    margin-bottom: 4px;153  }154  .returns {155    font-size: 28px;156    color: #777;157  }158 159  .action-row {160    display: flex;161    align-items: center;162    justify-content: space-between;163    margin-top: 24px;164  }165  .qty {166    display: flex;167    align-items: center;168    gap: 8px;169    font-size: 32px;170    color: #444;171  }172  .actions a {173    color: #1a73e8;174    font-size: 32px;175    text-decoration: none;176    margin-left: 26px;177  }178 179  .offer {180    display: flex;181    align-items: center;182    gap: 14px;183    margin: 22px 0 8px 0;184  }185  .offer .label {186    font-size: 32px;187    font-weight: 700;188    color: #2e7d32;189  }190  .offer .desc {191    font-size: 28px;192    color: #777;193  }194 195  /* Bottom gesture bar */196  .gesture {197    position: absolute;198    bottom: 34px;199    left: 360px;200    width: 360px;201    height: 12px;202    background: #9e9e9e;203    border-radius: 999px;204  }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Header -->211  <div class="nav">212    <svg width="56" height="56" viewBox="0 0 48 48">213      <path d="M28 10 L14 24 L28 38" stroke="#000" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>214    </svg>215    <div class="title">eBay shopping cart</div>216  </div>217 218  <!-- Promo Banner -->219  <div class="promo">220    <h1>Love it. Buy it. Get Rewarded.</h1>221    <p>Earn up to 5X points when you use your eBay Mastercard ®.</p>222    <a href="#">See details</a>223  </div>224 225  <div class="section-title">Your cart (2)</div>226 227  <!-- Item Card 1 -->228  <div class="card">229    <div class="seller-row">230      <div class="seller-left">231        <div class="avatar">IMG: Seller Avatar</div>232        <div class="seller-info">233          <div class="name">rinuvo</div>234          <div class="feedback">99.5% positive feedback</div>235        </div>236      </div>237      <svg class="menu-icon" viewBox="0 0 36 36">238        <circle cx="18" cy="8" r="3" fill="#555"></circle>239        <circle cx="18" cy="18" r="3" fill="#555"></circle>240        <circle cx="18" cy="28" r="3" fill="#555"></circle>241      </svg>242    </div>243 244    <div class="product-row">245      <div class="product-image">IMG: Laptop Photo</div>246      <div class="details">247        <div class="badge">9 SOLD</div>248        <div class="item-title">14" Dell Latitude Laptop PC: Intel Core i7! Backlit Keyboard! Built in Webcam!</div>249        <div class="subtitle">Excellent - Refurbished</div>250        <div class="price">$279.99</div>251        <div class="shipping">Free 2-3 day shipping</div>252        <div class="returns">Free Returns</div>253      </div>254    </div>255 256    <div class="action-row">257      <div class="qty">258        <span>Qty 1</span>259        <svg width="32" height="32" viewBox="0 0 32 32">260          <path d="M6 12 L16 22 L26 12" stroke="#555" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>261        </svg>262      </div>263      <div class="actions">264        <a href="#">Save for later</a>265        <a href="#">Remove</a>266      </div>267    </div>268 269    <div class="offer">270      <svg width="34" height="34" viewBox="0 0 32 32">271        <circle cx="16" cy="16" r="14" stroke="#34A853" stroke-width="3" fill="none"></circle>272        <path d="M8 16 L14 21 L24 11" stroke="#34A853" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>273      </svg>274      <div>275        <div class="label">Offer applied</div>276        <div class="desc">Save up to $50</div>277      </div>278    </div>279  </div>280 281  <!-- Item Card 2 -->282  <div class="card">283    <div class="seller-row">284      <div class="seller-left">285        <div class="avatar">IMG: Seller Avatar</div>286        <div class="seller-info">287          <div class="name">jbar0907</div>288          <div class="feedback">100.0% positive feedback</div>289        </div>290      </div>291      <svg class="menu-icon" viewBox="0 0 36 36">292        <circle cx="18" cy="8" r="3" fill="#555"></circle>293        <circle cx="18" cy="18" r="3" fill="#555"></circle>294        <circle cx="18" cy="28" r="3" fill="#555"></circle>295      </svg>296    </div>297 298    <div class="product-row">299      <div class="product-image">IMG: Coffee Machine Photo</div>300      <div class="details">301        <div class="badge">LAST ONE</div>302        <div class="item-title">Coffee Machine Quiet Automatic Heating  One Click Portable Tea Brewer</div>303        <div class="subtitle">New</div>304        <div class="price">$162.99</div>305        <div class="shipping">Free shipping</div>306      </div>307    </div>308 309    <div class="action-row" style="margin-top: 22px;">310      <div class="qty">311        <span>Qty 1</span>312        <svg width="32" height="32" viewBox="0 0 32 32">313          <path d="M6 12 L16 22 L26 12" stroke="#555" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>314        </svg>315      </div>316      <div class="actions">317        <a href="#">Save for later</a>318        <a href="#">Remove</a>319      </div>320    </div>321  </div>322 323  <div class="gesture"></div>324</div>325</body>326</html>