GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile Item Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    height: 96px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #fff;26    font-size: 34px;27    opacity: 0.95;28  }29  .status-right { display: flex; align-items: center; gap: 22px; opacity: 0.9; }30  .sb-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.9; }31 32  /* App bar */33  .appbar {34    height: 150px;35    padding: 0 36px;36    display: flex;37    align-items: center;38    gap: 22px;39  }40  .appbar-title {41    font-size: 48px;42    font-weight: 700;43    margin-right: auto;44  }45  .icon-btn {46    width: 92px; height: 92px; border-radius: 46px;47    background: #1E1E1E;48    display: inline-flex; align-items: center; justify-content: center;49  }50  .icon-btn svg { width: 44px; height: 44px; stroke: #fff; fill: none; stroke-width: 2.5; }51 52  /* Scrollable content */53  .content {54    position: absolute;55    left: 0; right: 0;56    top: 246px; /* status + app bar */57    bottom: 240px; /* space for bottom nav */58    overflow-y: auto;59    padding: 32px 36px 40px 36px;60  }61 62  .title {63    font-size: 66px;64    line-height: 1.1;65    font-weight: 800;66    margin: 8px 0 26px 0;67    letter-spacing: 0.2px;68  }69 70  .seller-row {71    display: flex;72    align-items: center;73    gap: 22px;74    margin-bottom: 34px;75  }76  .avatar {77    width: 116px; height: 116px; border-radius: 58px;78    background: #E0E0E0; border: 1px solid #BDBDBD;79    color: #757575; display: flex; align-items: center; justify-content: center;80    font-size: 26px;81  }82  .seller-text { flex: 1; }83  .seller-name { font-size: 36px; font-weight: 700; margin-bottom: 6px; }84  .seller-sub { font-size: 32px; color: #A8A8A8; }85  .chev { width: 54px; height: 54px; }86 87  .price {88    font-size: 90px;89    font-weight: 800;90    margin: 20px 0 8px 0;91  }92  .muted { color: #A8A8A8; font-size: 34px; }93 94  .cond-row {95    display: flex; align-items: center; gap: 18px;96    margin: 40px 0 28px 0;97  }98  .cond-label { color: #9E9E9E; font-size: 36px; margin-right: 24px; }99  .cond-value { font-size: 38px; font-weight: 700; }100  .info-ic { width: 40px; height: 40px; opacity: 0.9; }101 102  .primary-btn {103    background: #6FA8FF;104    color: #03132E;105    font-weight: 800;106    font-size: 44px;107    border: none;108    width: 100%;109    height: 164px;110    border-radius: 82px;111    margin: 16px 0 22px 0;112  }113 114  .outline-btn {115    background: transparent;116    color: #6FA8FF;117    border: 3px solid #3F6FE6;118    width: 100%;119    height: 160px;120    border-radius: 82px;121    font-size: 44px;122    font-weight: 700;123    display: flex; align-items: center; justify-content: center; gap: 18px;124    margin-bottom: 34px;125  }126  .outline-btn svg { width: 48px; height: 48px; fill: none; stroke: #6FA8FF; stroke-width: 2.6; }127 128  .divider { height: 1px; background: #2B2B2B; margin: 36px 0; }129 130  .section-header {131    display: flex; align-items: center;132    font-size: 50px; font-weight: 800; margin-bottom: 24px;133  }134  .section-header .spacer { flex: 1; }135  .row {136    display: flex; align-items: center; justify-content: space-between;137    font-size: 36px; margin: 16px 0;138  }139  .row .lbl { color: #A8A8A8; }140  .row .val { color: #fff; }141 142  /* Bidding grid */143  .grid {144    display: grid;145    grid-template-columns: 1fr 1fr;146    gap: 18px 36px;147    font-size: 36px;148  }149  .grid .g-lbl { color: #A8A8A8; }150  .grid .g-val { color: #fff; font-weight: 700; }151 152  /* Bottom navigation */153  .bottom-nav {154    position: absolute;155    left: 0; right: 0; bottom: 0;156    height: 210px;157    background: #171717;158    border-top: 1px solid #262626;159    display: flex; align-items: center; justify-content: space-around;160    padding-bottom: 40px;161  }162  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #CFCFCF; font-size: 28px; }163  .nav-item svg { width: 54px; height: 54px; stroke: #CFCFCF; fill: none; stroke-width: 2.8; }164  .nav-item.active svg { stroke: #4D79FF; }165  .nav-item.active .label { color: #4D79FF; }166  .home-indicator {167    position: absolute; bottom: 18px; left: 50%;168    transform: translateX(-50%);169    width: 260px; height: 10px; background: #FFFFFF; opacity: 0.6; border-radius: 6px;170  }171</style>172</head>173<body>174<div id="render-target">175  <!-- Status bar -->176  <div class="status-bar">177    <div>12:42</div>178    <div class="status-right">179      <span class="sb-dot"></span>180      <span class="sb-dot"></span>181      <span class="sb-dot"></span>182      <span class="sb-dot"></span>183      <svg viewBox="0 0 24 24" width="34" height="34"><path d="M3 10h14l3 3v5H3z"></path><path d="M5 7h10" stroke="#fff" stroke-width="2" fill="none"></path></svg>184      <svg viewBox="0 0 24 24" width="34" height="34"><path d="M6 18h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2z" fill="#fff"></path></svg>185    </div>186  </div>187 188  <!-- App bar -->189  <div class="appbar">190    <div class="icon-btn" title="Back">191      <svg viewBox="0 0 24 24"><path d="M14 6l-6 6 6 6" stroke="#fff"/></svg>192    </div>193    <div class="appbar-title">Item</div>194    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg></div>195    <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M6 7h14l-2 8H8L6 7z"/><circle cx="9" cy="18" r="1.8"/><circle cx="17" cy="18" r="1.8"/></svg></div>196    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/><circle cx="12" cy="6" r="2"/><circle cx="18" cy="12" r="2"/><path d="M8 12l2-2M14 8l2 2M10 14l2 2" opacity="0"/></svg></div>197    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2.2" fill="#fff"/><circle cx="12" cy="12" r="2.2" fill="#fff"/><circle cx="19" cy="12" r="2.2" fill="#fff"/></svg></div>198  </div>199 200  <!-- Content -->201  <div class="content">202    <div class="title">Strong Suction, 4400mAh, Black</div>203 204    <div class="seller-row">205      <div class="avatar">[IMG: Seller Avatar]</div>206      <div class="seller-text">207        <div class="seller-name">xpectmoreforless (435400)</div>208        <div class="seller-sub">96.5% positive feedback</div>209      </div>210      <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="2.5" fill="none"/></svg>211    </div>212 213    <div class="price">$29.99</div>214    <div class="muted">Starting bid · 3d 9h left</div>215 216    <div class="cond-row">217      <div class="cond-label">Condition</div>218      <div class="cond-value">New</div>219      <svg class="info-ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#A8A8A8" fill="none" stroke-width="2.2"/><path d="M12 10v6" stroke="#A8A8A8" stroke-width="2.2"/><circle cx="12" cy="7.5" r="1.2" fill="#A8A8A8"/></svg>220    </div>221 222    <button class="primary-btn">Place bid</button>223 224    <div class="outline-btn">225      <svg viewBox="0 0 24 24"><path d="M12 20l-7-7a4.5 4.5 0 016.5-6l.5.5.5-.5a4.5 4.5 0 016.5 6l-7 7z"/></svg>226      Added to watchlist227    </div>228 229    <div class="divider"></div>230 231    <div class="section-header">232      About this item233      <div class="spacer"></div>234      <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="2.5" fill="none"/></svg>235    </div>236    <div class="row">237      <div class="lbl">Condition</div>238      <div class="val">New</div>239    </div>240    <div class="row">241      <div class="lbl">Quantity</div>242      <div class="val">1 available</div>243    </div>244 245    <div class="divider"></div>246 247    <div class="section-header">248      Item description from the seller249      <div class="spacer"></div>250      <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="2.5" fill="none"/></svg>251    </div>252 253    <div class="divider"></div>254 255    <div class="section-header">Bidding</div>256    <div class="grid" style="margin-bottom: 8px;">257      <div>258        <div class="g-lbl">Time left</div>259        <div class="g-val">3d 9h</div>260      </div>261      <div style="text-align:right">262        <div class="g-lbl">Ends</div>263        <div class="g-val">Mon, Oct 02, 10:35 AM</div>264      </div>265      <div>266        <div class="g-lbl">Bids</div>267        <div class="g-val">0</div>268      </div>269      <div style="text-align:right">270        <div class="g-lbl">Bidders</div>271        <div class="g-val">0</div>272      </div>273    </div>274    <div class="divider"></div>275 276    <!-- Extra space to allow scrolling comfortably -->277    <div style="height: 180px;"></div>278  </div>279 280  <!-- Bottom navigation -->281  <div class="bottom-nav">282    <div class="nav-item">283      <svg viewBox="0 0 24 24"><path d="M3 12l9-7 9 7v7H3z"/><path d="M9 19v-5h6v5" /></svg>284      <div class="label">Home</div>285    </div>286    <div class="nav-item">287      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>288      <div class="label">My eBay</div>289    </div>290    <div class="nav-item active">291      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>292      <div class="label">Search</div>293    </div>294    <div class="nav-item">295      <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/><path d="M18 16V9a6 6 0 1 0-12 0v7"/></svg>296      <div class="label">Inbox</div>297    </div>298    <div class="nav-item">299      <svg viewBox="0 0 24 24"><path d="M4 6h16v4H4z"/><path d="M7 10v8h10v-8"/></svg>300      <div class="label">Selling</div>301    </div>302    <div class="home-indicator"></div>303  </div>304</div>305</body>306</html>