GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>eBay Item UI - Render</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0c0c0f;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0; left: 0;20    width: 100%;21    height: 64px;22    padding: 0 24px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #fff;27    font-weight: 600;28    font-size: 28px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 24px;34  }35  .sb-icon svg { width: 36px; height: 36px; fill: #fff; opacity: 0.9; }36 37  /* Header */38  .header {39    position: absolute;40    top: 64px;41    left: 0;42    width: 100%;43    height: 112px;44    display: flex;45    align-items: center;46    padding: 0 24px;47    box-sizing: border-box;48    background: #101114;49  }50  .back-btn {51    width: 72px; height: 72px;52    border-radius: 36px;53    display: flex; align-items: center; justify-content: center;54    margin-right: 16px;55  }56  .back-btn svg { width: 42px; height: 42px; fill: #fff; }57  .title {58    font-size: 44px; font-weight: 700;59    margin-right: auto;60  }61  .actions { display: flex; gap: 22px; }62  .round-icon {63    width: 72px; height: 72px; border-radius: 36px;64    background: #1a1b1f; display: flex; justify-content: center; align-items: center;65  }66  .round-icon svg { width: 40px; height: 40px; fill: #fff; opacity: 0.95; }67 68  /* Image area */69  .image-area {70    position: absolute;71    top: 176px;72    left: 0;73    width: 100%;74    height: 680px;75    background: #ffffff;76  }77  .watch-pill {78    position: absolute;79    top: 24px; left: 24px;80    background: #cf3342;81    color: #fff;82    font-size: 32px;83    font-weight: 800;84    padding: 16px 24px;85    border-radius: 32px;86  }87  .image-placeholder {88    position: absolute;89    left: 36px; right: 36px; bottom: 40px; top: 100px;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    display: flex; align-items: center; justify-content: center;93    color: #757575; font-size: 34px; font-weight: 600;94  }95  .heart-fab {96    position: absolute;97    top: 760px;98    right: 36px;99    width: 120px; height: 120px;100    background: #111215;101    border-radius: 60px;102    box-shadow: 0 6px 10px rgba(0,0,0,0.6);103    display: flex; align-items: center; justify-content: center;104  }105  .heart-fab svg { width: 56px; height: 56px; fill: #fff; opacity: 0.9; }106 107  /* Carousel dots */108  .dots {109    position: absolute;110    top: 880px; left: 0; width: 100%;111    display: flex; gap: 16px; justify-content: center; align-items: center;112  }113  .dot { width: 16px; height: 16px; border-radius: 8px; background: #5a5a5a; }114  .dot.active { background: #cfcfcf; }115 116  /* Content area */117  .content {118    position: absolute;119    top: 930px;120    left: 0;121    width: 100%;122    padding: 0 36px;123    box-sizing: border-box;124  }125  .item-title {126    font-size: 52px; line-height: 1.2; font-weight: 800; margin-bottom: 36px;127  }128 129  /* Seller section */130  .seller-row {131    display: flex; align-items: center;132    margin-bottom: 36px;133  }134  .seller-avatar {135    width: 86px; height: 86px; border-radius: 43px; background: #2a2b2f;136    display: flex; align-items: center; justify-content: center; margin-right: 22px;137    border: 1px solid #3c3d44;138  }139  .seller-avatar svg { width: 44px; height: 44px; fill: #dcdcdc; }140  .seller-info { flex: 1; }141  .seller-name { font-size: 36px; font-weight: 700; }142  .seller-sub { font-size: 30px; color: #A8A8A8; margin-top: 6px; }143  .seller-arrow svg { width: 36px; height: 36px; fill: #A8A8A8; }144 145  /* Price section */146  .price-line {147    font-size: 54px; font-weight: 900; margin-top: 16px;148  }149  .shipping {150    font-size: 36px; color: #B0B0B0; margin-left: 8px; font-weight: 600;151  }152  .meta {153    font-size: 34px; color: #B0B0B0; margin-top: 10px;154  }155 156  .buy-now-block {157    margin-top: 28px; padding-top: 16px;158    border-top: 1px solid #2a2a2a;159  }160  .buy-now-line {161    font-size: 48px; font-weight: 800; margin-bottom: 6px;162  }163  .buy-now-text { font-size: 34px; color: #B0B0B0; }164 165  .est {166    margin-top: 24px; font-size: 34px; color: #dcdcdc; font-weight: 700;167  }168  .condition-row {169    margin-top: 24px; display: flex; align-items: center; gap: 22px;170    font-size: 36px; color: #cfcfcf; font-weight: 700;171  }172  .cond-label { color: #b0b0b0; font-weight: 600; }173  .info-icn svg { width: 34px; height: 34px; fill: #b0b0b0; }174 175  /* Bottom nav */176  .bottom-nav {177    position: absolute; bottom: 0; left: 0; width: 100%; height: 170px;178    background: #0f1014; border-top: 1px solid #202226;179    display: flex; align-items: center; justify-content: space-around;180  }181  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #cfcfcf; font-size: 30px; }182  .nav-item svg { width: 52px; height: 52px; fill: #cfcfcf; }183  .nav-item.active { color: #5aa0ff; }184  .nav-item.active svg { fill: #5aa0ff; }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Status bar -->191  <div class="status-bar">192    <div>12:30</div>193    <div class="status-right">194      <span class="sb-icon">195        <!-- WiFi -->196        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/></svg>197      </span>198      <span class="sb-icon">199        <!-- Signal -->200        <svg viewBox="0 0 24 24"><path d="M3 17h2v4H3v-4zm4-6h2v10H7V11zm4-4h2v14h-2V7zm4-4h2v18h-2V3z"/></svg>201      </span>202      <span class="sb-icon">203        <!-- Battery -->204        <svg viewBox="0 0 24 24"><path d="M18 7h2v10h-2V7z"/><path d="M2 6h14c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2zm1 3v6h12V9H3z"/></svg>205      </span>206    </div>207  </div>208 209  <!-- Header -->210  <div class="header">211    <div class="back-btn">212      <svg viewBox="0 0 24 24"><path d="M15 19L8 12l7-7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>213    </div>214    <div class="title">Item</div>215    <div class="actions">216      <div class="round-icon">217        <!-- Search -->218        <svg viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm9 3-5-5" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>219      </div>220      <div class="round-icon">221        <!-- Cart/Bag -->222        <svg viewBox="0 0 24 24"><path d="M6 9h12l-1 11H7L6 9zm3-3a3 3 0 0 1 6 0v3H9V6z" /></svg>223      </div>224      <div class="round-icon">225        <!-- Share -->226        <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.9-3.7L8.6 8.3a3.1 3.1 0 0 0 0 7.4l6.4 3.9A3 3 0 1 0 16 18l-6.5-4a3.2 3.2 0 0 0 0-3.9l6.5-4.1A3 3 0 0 0 18 8z"/></svg>227      </div>228      <div class="round-icon">229        <!-- More -->230        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>231      </div>232    </div>233  </div>234 235  <!-- Image / gallery -->236  <div class="image-area">237    <div class="watch-pill">2 WATCHED IN THE LAST 24 HOURS</div>238    <div class="image-placeholder">[IMG: Orange Nike Shoe]</div>239  </div>240 241  <div class="heart-fab">242    <!-- Heart -->243    <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.2 10.6 2.6 7 6.5 7c2 0 3.3 1.1 3.5 2.3C10.2 8.1 11.5 7 13.5 7c3.9 0 5.3 3.6 3.5 5.8C19 16.4 12 21 12 21z"/></svg>244  </div>245 246  <div class="dots">247    <div class="dot active"></div>248    <div class="dot"></div>249    <div class="dot"></div>250    <div class="dot"></div>251    <div class="dot"></div>252  </div>253 254  <!-- Content -->255  <div class="content">256    <div class="item-title">257      New Nike Air Deldon Legacy Easy On<br>258      Basketball Court Shoes sz mens 13<br>259      wmns 14.5260    </div>261 262    <div class="seller-row">263      <div class="seller-avatar">264        <!-- Store icon -->265        <svg viewBox="0 0 24 24"><path d="M3 7l2-3h14l2 3v3H3V7zm0 5h18v7H3v-7z"/></svg>266      </div>267      <div class="seller-info">268        <div class="seller-name">lordtonster (75805)</div>269        <div class="seller-sub">99.9% positive feedback</div>270      </div>271      <div class="seller-arrow">272        <svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6" stroke="#A8A8A8" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>273      </div>274    </div>275 276    <div class="price-line">277      $46.00 <span class="shipping">+ $93.54 shipping</span>278    </div>279    <div class="meta">12 bids • 21h 17m left</div>280 281    <div class="buy-now-block">282      <div class="buy-now-line">$59.99 <span class="shipping">+ $93.54 shipping</span></div>283      <div class="buy-now-text">Buy It Now</div>284    </div>285 286    <div class="est">Est. delivery Wed, Nov 8 - Thu, Nov 30</div>287 288    <div class="condition-row">289      <span class="cond-label">Condition</span>290      <span>New with box</span>291      <span class="info-icn">292        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#b0b0b0" stroke-width="2" fill="none"/><path d="M12 17v-6" stroke="#b0b0b0" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1.6" fill="#b0b0b0"/></svg>293      </span>294    </div>295  </div>296 297  <!-- Bottom navigation -->298  <div class="bottom-nav">299    <div class="nav-item">300      <svg viewBox="0 0 24 24"><path d="M12 3l9 8v10h-6v-6H9v6H3V11l9-8z"/></svg>301      <div>Home</div>302    </div>303    <div class="nav-item">304      <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-9 9c0-5 4-9 9-9s9 4 9 9H3z"/></svg>305      <div>My eBay</div>306    </div>307    <div class="nav-item active">308      <svg viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm9 3-5-5" stroke="#5aa0ff" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>309      <div>Search</div>310    </div>311    <div class="nav-item">312      <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>313      <div>Inbox</div>314    </div>315    <div class="nav-item">316      <svg viewBox="0 0 24 24"><path d="M20 6l-2-2H6L4 6v14h16V6zm-3 3H7v9h10V9z"/></svg>317      <div>Selling</div>318    </div>319  </div>320 321</div>322</body>323</html>