GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Item</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: #0a0a0a;13    color: #fff;14  }15 16  /* Common */17  .divider { height: 2px; background: #1e1e1e; margin: 24px 0; }18  .section { padding: 0 40px; }19  .muted { color: #bdbdbd; }20  .row { display: flex; align-items: center; }21  .space-between { display: flex; justify-content: space-between; align-items: center; }22  .chevron {23    width: 32px; height: 32px;24  }25  .chevron svg { fill: none; stroke: #9e9e9e; stroke-width: 6; }26 27  /* Top status and header */28  .status-bar {29    height: 80px;30    padding: 0 32px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #e0e0e0;35    font-size: 32px;36  }37  .header {38    height: 120px;39    padding: 0 24px;40    display: flex;41    align-items: center;42    justify-content: space-between;43  }44  .title-area { display: flex; align-items: center; gap: 24px; }45  .title { font-size: 52px; font-weight: 600; }46  .icon-btn {47    width: 88px; height: 88px;48    border-radius: 44px;49    background: #1b1b1b;50    display: flex; align-items: center; justify-content: center;51    margin-left: 14px;52  }53  .icon-btn svg { width: 44px; height: 44px; fill: none; stroke: #e0e0e0; stroke-width: 6; }54 55  /* Content snippet */56  .snippet {57    padding: 0 40px;58    color: #cfcfcf;59    font-size: 36px;60    line-height: 1.3;61    margin-bottom: 18px;62  }63 64  /* Shipping section */65  .section-title {66    font-size: 50px; font-weight: 700; margin-bottom: 24px;67  }68  .info-row {69    padding: 24px 0;70    border-bottom: 2px solid #1e1e1e;71    display: grid;72    grid-template-columns: 260px 1fr 40px;73    align-items: center;74    gap: 18px;75  }76  .info-label { color: #cfcfcf; font-size: 34px; }77  .info-value { color: #fff; font-size: 36px; }78  .info-row:last-child { border-bottom: none; }79 80  /* About seller */81  .about-title-wrap { display: flex; justify-content: space-between; align-items: center; }82  .about-title { font-size: 52px; font-weight: 700; }83  .feedback { font-size: 38px; color: #cfcfcf; margin-top: 10px; }84  .pill-btn {85    height: 120px;86    border-radius: 60px;87    border: 3px solid #3b6ef7;88    color: #9bb2ff;89    font-size: 40px;90    display: flex; align-items: center; justify-content: center;91    margin: 24px 0;92  }93 94  /* Related items */95  .related-title { font-size: 56px; font-weight: 700; margin-bottom: 20px; }96  .sub-title { font-size: 42px; color: #eaeaea; margin-bottom: 20px; }97  .card-row { display: flex; gap: 28px; padding-bottom: 260px; }98  .card {99    width: 320px;100    background: #121212;101    border-radius: 24px;102    overflow: hidden;103    border: 1px solid #242424;104  }105  .card .img {106    width: 100%; height: 360px;107    background: #E0E0E0;108    border-bottom: 1px solid #BDBDBD;109    display: flex; align-items: center; justify-content: center;110    color: #757575; font-size: 30px; text-align: center; padding: 12px;111  }112  .card .caption {113    padding: 22px;114    color: #ffffff;115    font-size: 34px;116    line-height: 1.2;117  }118 119  /* Bottom nav */120  .bottom-nav {121    position: absolute;122    left: 0; right: 0; bottom: 0;123    height: 180px;124    background: #0f0f0f;125    border-top: 2px solid #1e1e1e;126    display: flex; align-items: center; justify-content: space-around;127  }128  .nav-item {129    display: flex; flex-direction: column; align-items: center; gap: 12px;130    color: #cfcfcf; font-size: 34px;131  }132  .nav-item .bubble {133    width: 96px; height: 96px; border-radius: 48px;134    background: #1b1b1b; display: flex; align-items: center; justify-content: center;135  }136  .nav-item.active .bubble { background: #263a7a; }137  .nav-item svg { width: 44px; height: 44px; stroke: #e0e0e0; stroke-width: 6; fill: none; }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status bar -->144  <div class="status-bar">145    <div>11:53</div>146    <div class="row" style="gap:18px;">147      <span class="muted">• • •</span>148      <span class="muted">100%</span>149    </div>150  </div>151 152  <!-- Header -->153  <div class="header">154    <div class="title-area">155      <!-- Back arrow -->156      <div class="icon-btn" style="background:#121212;">157        <svg viewBox="0 0 24 24">158          <path d="M15 19l-7-7 7-7"/>159        </svg>160      </div>161      <div class="title">Item</div>162    </div>163 164    <div class="row">165      <div class="icon-btn">166        <!-- Search -->167        <svg viewBox="0 0 24 24">168          <circle cx="11" cy="11" r="7"></circle>169          <path d="M20 20l-4.5-4.5"></path>170        </svg>171      </div>172      <div class="icon-btn">173        <!-- Cart -->174        <svg viewBox="0 0 24 24">175          <path d="M3 5h3l2 12h10l2-10H6"></path>176          <circle cx="9" cy="20" r="1.6"></circle>177          <circle cx="17" cy="20" r="1.6"></circle>178        </svg>179      </div>180      <div class="icon-btn">181        <!-- Share -->182        <svg viewBox="0 0 24 24">183          <circle cx="18" cy="5" r="3"></circle>184          <circle cx="6" cy="12" r="3"></circle>185          <circle cx="18" cy="19" r="3"></circle>186          <path d="M8.7 11l6-3.7M8.7 13l6 3.7"></path>187        </svg>188      </div>189      <div class="icon-btn">190        <!-- Menu -->191        <svg viewBox="0 0 24 24">192          <path d="M3 6h18M3 12h18M3 18h18"></path>193        </svg>194      </div>195    </div>196  </div>197 198  <!-- Text snippet -->199  <div class="snippet">nubuck for a subtly bohemian, autumnal take on our...</div>200  <div class="divider"></div>201 202  <!-- Shipping, returns, and payments -->203  <div class="section">204    <div class="section-title">Shipping, returns, and payments</div>205 206    <div class="info-row">207      <div class="info-label">Location</div>208      <div class="info-value">Hanover, Pennsylvania, United States</div>209      <div class="chevron">210        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>211      </div>212    </div>213 214    <div class="info-row" style="border-bottom:none;">215      <div class="info-label">Returns</div>216      <div class="info-value">Accepted within 30 days</div>217      <div class="chevron">218        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>219      </div>220    </div>221  </div>222 223  <div class="divider"></div>224 225  <!-- About seller -->226  <div class="section">227    <div class="about-title-wrap">228      <div class="about-title">About this seller</div>229      <div class="chevron">230        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>231      </div>232    </div>233    <div class="feedback">98.6% positive feedback</div>234 235    <div class="pill-btn">Seller's other items</div>236    <div class="pill-btn">Contact seller</div>237  </div>238 239  <div class="divider"></div>240 241  <!-- Related items -->242  <div class="section">243    <div class="related-title">Related sponsored items</div>244    <div class="sub-title">Women's Comfort Shoes</div>245 246    <div class="card-row">247      <div class="card">248        <div class="img">[IMG: Suede Wallabee Shoe]</div>249        <div class="caption">Clarks Womens Originals Wallabee</div>250      </div>251 252      <div class="card">253        <div class="img">[IMG: Dark leather Wallabee Shoe]</div>254        <div class="caption">Clarks Originals Wallabee Leather</div>255      </div>256 257      <div class="card">258        <div class="img">[IMG: Light leather Wallabee Shoe]</div>259        <div class="caption">Clarks Wallabee Leather Casual</div>260      </div>261    </div>262  </div>263 264  <!-- Bottom navigation -->265  <div class="bottom-nav">266    <div class="nav-item">267      <div class="bubble">268        <svg viewBox="0 0 24 24">269          <path d="M3 11l9-7 9 7v9H3z"></path>270        </svg>271      </div>272      <div>Home</div>273    </div>274    <div class="nav-item">275      <div class="bubble">276        <svg viewBox="0 0 24 24">277          <path d="M12 12a5 5 0 100-10 5 5 0 000 10zM4 22c1.5-4 6.5-4 8-4s6.5 0 8 4"></path>278        </svg>279      </div>280      <div>My eBay</div>281    </div>282    <div class="nav-item active">283      <div class="bubble">284        <svg viewBox="0 0 24 24">285          <circle cx="11" cy="11" r="7"></circle>286          <path d="M20 20l-4.5-4.5"></path>287        </svg>288      </div>289      <div>Search</div>290    </div>291    <div class="nav-item">292      <div class="bubble">293        <svg viewBox="0 0 24 24">294          <path d="M4 5h16v14H4z"></path>295          <path d="M4 9h16"></path>296        </svg>297      </div>298      <div>Inbox</div>299    </div>300    <div class="nav-item">301      <div class="bubble">302        <svg viewBox="0 0 24 24">303          <path d="M4 20h16M6 16l5-10 5 10"></path>304        </svg>305      </div>306      <div>Selling</div>307    </div>308  </div>309 310</div>311</body>312</html>