GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Item - Mobile UI</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: 1440px;9    height: 3120px;10    position: relative;11    overflow: hidden;12    background: #0d0d0f; /* app dark background */13    color: #fff;14  }15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 100%;21    height: 120px;22    padding: 0 48px;23    box-sizing: border-box;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #e5e5e7;28    font-size: 44px;29    letter-spacing: 0.2px;30  }31  .status-icons {32    display: flex;33    gap: 28px;34    align-items: center;35  }36  .status-dot { width: 20px; height: 20px; background:#bfbfbf; border-radius:50%; opacity:0.8; }37  /* Header */38  .appbar {39    position: absolute;40    top: 120px;41    left: 0;42    width: 100%;43    height: 200px;44    padding: 0 48px;45    box-sizing: border-box;46    display: flex;47    align-items: center;48    justify-content: space-between;49  }50  .left-title {51    display: flex;52    align-items: center;53    gap: 32px;54  }55  .back-btn {56    width: 84px; height: 84px; border-radius: 50%;57    background: #1a1a1e; display: flex; align-items: center; justify-content: center;58  }59  .screen-title { font-size: 72px; font-weight: 700; color: #ffffff; }60  .actions {61    display: flex; gap: 28px;62  }63  .icon-btn {64    width: 120px; height: 120px; border-radius: 60px;65    background: #1a1a1e; display: flex; align-items: center; justify-content: center;66  }67  .icon-btn svg { width: 64px; height: 64px; stroke: #fff; fill: none; stroke-width: 6; }68  /* Content image */69  .product-image {70    position: absolute;71    top: 340px;72    left: 60px;73    width: 1320px;74    height: 1060px;75    background: #E0E0E0;76    border: 1px solid #BDBDBD;77    border-radius: 16px;78    display: flex;79    align-items: center;80    justify-content: center;81    color: #4d4d4d;82    font-size: 44px;83    text-align: center;84    line-height: 1.4;85  }86  /* Title and info */87  .title-row {88    position: absolute;89    top: 1460px;90    left: 60px;91    width: 1320px;92    display: flex;93    align-items: flex-start;94    justify-content: space-between;95  }96  .item-title {97    font-size: 64px;98    font-weight: 800;99    line-height: 1.25;100    color: #ffffff;101    max-width: 1060px;102  }103  .heart-wrap {104    width: 160px; height: 160px; border-radius: 80px; background: #1a1a1e;105    display: flex; align-items: center; justify-content: center;106  }107  .heart-wrap svg { width: 84px; height: 84px; stroke: #a3a3a3; fill: none; stroke-width: 6; }108  .meta-blocks {109    position: absolute;110    top: 1820px;111    left: 60px;112    width: 1320px;113  }114  .meta-line {115    height: 52px; background: #1a1a1e; border-radius: 12px; margin-top: 36px;116  }117  .meta-line.wide { width: 1020px; }118  .meta-line.mid { width: 720px; }119  .meta-line.short { width: 520px; }120  /* Bottom nav bar */121  .bottom-nav {122    position: absolute;123    bottom: 0;124    left: 0;125    width: 100%;126    height: 230px;127    background: #121214;128    border-top: 1px solid #1e1e22;129    display: flex;130    align-items: center;131    justify-content: space-around;132    padding-bottom: 20px;133    box-sizing: border-box;134  }135  .nav-item {136    display: flex;137    flex-direction: column;138    align-items: center;139    gap: 24px;140    color: #cfcfd3;141    font-size: 46px;142  }143  .nav-icon {144    width: 120px; height: 120px; border-radius: 60px; background:#1a1a1e;145    display:flex; align-items:center; justify-content:center;146  }147  .nav-icon svg { width: 64px; height: 64px; stroke:#fff; fill:none; stroke-width:6; }148  .nav-active .nav-icon { background: #23314d; }149  .home-indicator {150    position: absolute;151    bottom: 20px;152    left: 50%;153    transform: translateX(-50%);154    width: 340px; height: 12px; background: #e6e6e8; border-radius: 6px; opacity: 0.85;155  }156</style>157</head>158<body>159<div id="render-target">160 161  <!-- Status Bar -->162  <div class="status-bar">163    <div>2:56</div>164    <div class="status-icons">165      <div class="status-dot"></div>166      <div class="status-dot"></div>167      <div class="status-dot"></div>168    </div>169  </div>170 171  <!-- Header -->172  <div class="appbar">173    <div class="left-title">174      <div class="back-btn">175        <svg viewBox="0 0 24 24">176          <path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"></path>177        </svg>178      </div>179      <div class="screen-title">Item</div>180    </div>181    <div class="actions">182      <div class="icon-btn">183        <svg viewBox="0 0 24 24">184          <circle cx="11" cy="11" r="7"></circle>185          <path d="M20 20 L16 16" stroke-linecap="round"></path>186        </svg>187      </div>188      <div class="icon-btn">189        <svg viewBox="0 0 24 24">190          <path d="M3 6 H21 L19 16 H7 Z" stroke-linecap="round" stroke-linejoin="round"></path>191          <circle cx="9" cy="19" r="1.5" fill="#fff" stroke="none"></circle>192          <circle cx="17" cy="19" r="1.5" fill="#fff" stroke="none"></circle>193        </svg>194      </div>195      <div class="icon-btn">196        <svg viewBox="0 0 24 24">197          <path d="M4 12 C8 8, 8 8, 12 4" stroke-linecap="round"></path>198          <path d="M12 4 L12 10 L18 10" stroke-linecap="round"></path>199        </svg>200      </div>201      <div class="icon-btn">202        <svg viewBox="0 0 24 24">203          <circle cx="12" cy="5" r="2" fill="#fff" stroke="none"></circle>204          <circle cx="12" cy="12" r="2" fill="#fff" stroke="none"></circle>205          <circle cx="12" cy="19" r="2" fill="#fff" stroke="none"></circle>206        </svg>207      </div>208    </div>209  </div>210 211  <!-- Product Image -->212  <div class="product-image">[IMG: Bathroom Wall-Mount Cabinet with Mirror - White]</div>213 214  <!-- Title + Heart -->215  <div class="title-row">216    <div class="item-title">217      ( Open Box ) Home Bathroom Wall Mount Cabinet Storage Toilet Mirror Door White218    </div>219    <div class="heart-wrap">220      <svg viewBox="0 0 24 24">221        <path d="M12 20 C8 17, 4 14, 4 10 C4 8 6 6 8 6 C10 6 11.5 7.2 12 8.2 C12.5 7.2 14 6 16 6 C18 6 20 8 20 10 C20 14 16 17 12 20 Z" stroke-linejoin="round"></path>222      </svg>223    </div>224  </div>225 226  <!-- Meta placeholder lines (simulating blurred details) -->227  <div class="meta-blocks">228    <div class="meta-line wide"></div>229    <div class="meta-line mid"></div>230    <div class="meta-line short"></div>231  </div>232 233  <!-- Bottom Navigation -->234  <div class="bottom-nav">235    <div class="nav-item">236      <div class="nav-icon">237        <svg viewBox="0 0 24 24">238          <path d="M3 11 L12 4 L21 11" stroke-linecap="round"></path>239          <path d="M6 11 V20 H18 V11" stroke-linecap="round"></path>240        </svg>241      </div>242      <div>Home</div>243    </div>244 245    <div class="nav-item">246      <div class="nav-icon">247        <svg viewBox="0 0 24 24">248          <circle cx="12" cy="8" r="4"></circle>249          <path d="M4 20 C6 16, 18 16, 20 20" stroke-linecap="round"></path>250        </svg>251      </div>252      <div>My eBay</div>253    </div>254 255    <div class="nav-item nav-active">256      <div class="nav-icon">257        <svg viewBox="0 0 24 24">258          <circle cx="11" cy="11" r="7"></circle>259          <path d="M20 20 L16 16" stroke-linecap="round"></path>260        </svg>261      </div>262      <div>Search</div>263    </div>264 265    <div class="nav-item">266      <div class="nav-icon">267        <svg viewBox="0 0 24 24">268          <path d="M6 9 C6 5, 10 3, 12 3 C14 3, 18 5, 18 9 V14 L12 18 L6 14 Z" stroke-linecap="round"></path>269        </svg>270      </div>271      <div>Inbox</div>272    </div>273 274    <div class="nav-item">275      <div class="nav-icon">276        <svg viewBox="0 0 24 24">277          <path d="M4 6 L14 6 L20 12 L14 18 L4 18 Z" stroke-linecap="round"></path>278          <circle cx="7" cy="12" r="2" fill="#fff" stroke="none"></circle>279        </svg>280      </div>281      <div>Selling</div>282    </div>283  </div>284 285  <div class="home-indicator"></div>286</div>287</body>288</html>