GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>eBay Item UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 right: 0;23 height: 104px;24 padding: 24px 32px;25 box-sizing: border-box;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #2c2c2c;30 font-weight: 600;31 }32 .status-icons {33 display: flex;34 align-items: center;35 gap: 22px;36 }37 .status-dot {38 width: 28px;39 height: 28px;40 border-radius: 50%;41 border: 2px solid #777;42 }43 .wifi {44 width: 36px; height: 24px;45 }46 .battery {47 width: 38px; height: 22px; border: 2px solid #555; border-radius: 4px; position: relative;48 }49 .battery::after {50 content: "";51 position: absolute;52 right: -8px; top: 6px;53 width: 6px; height: 10px; background: #555; border-radius: 2px;54 }55 56 /* Header */57 .header {58 position: absolute;59 top: 104px;60 left: 0; right: 0;61 height: 112px;62 display: flex;63 align-items: center;64 padding: 0 32px;65 box-sizing: border-box;66 gap: 20px;67 }68 .back-btn {69 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;70 }71 .header-title {72 font-size: 52px; font-weight: 700; letter-spacing: -0.5px;73 }74 .more-btn {75 margin-left: auto;76 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;77 }78 .dots svg { width: 28px; height: 28px; }79 80 /* Action buttons (blue outline pills) */81 .actions {82 position: absolute;83 top: 236px;84 left: 32px; right: 32px;85 }86 .outline-btn {87 height: 110px;88 border: 3px solid #2F5BFF;89 border-radius: 58px;90 margin-bottom: 26px;91 display: flex; align-items: center;92 padding: 0 36px;93 box-sizing: border-box;94 color: #2F5BFF; font-size: 44px; font-weight: 600;95 }96 .outline-btn .heart {97 margin-right: 18px;98 }99 100 /* Dropdown menu card */101 .menu-card {102 position: absolute;103 top: 176px;104 right: 32px;105 width: 540px;106 background: #EEF2FF;107 border-radius: 22px;108 box-shadow: 0 12px 30px rgba(0,0,0,0.12);109 padding: 28px 32px;110 box-sizing: border-box;111 }112 .menu-item {113 font-size: 44px; color: #222;114 padding: 24px 10px;115 border-bottom: 1px solid rgba(0,0,0,0.08);116 }117 .menu-item:last-child { border-bottom: none; }118 119 /* Section titles */120 .section-title {121 position: absolute;122 top: 740px;123 left: 32px;124 font-size: 56px; font-weight: 800;125 }126 127 /* About list */128 .about-list {129 position: absolute;130 top: 840px;131 left: 32px; right: 32px;132 }133 .about-row {134 display: flex; justify-content: space-between; align-items: center;135 padding: 22px 0;136 font-size: 40px;137 border-bottom: 1px solid #eee;138 }139 .about-label { color: #666; }140 .about-value { font-weight: 600; }141 .chev {142 margin-left: 12px; width: 28px; height: 28px;143 }144 145 /* Description */146 .desc-title {147 position: absolute;148 top: 1220px;149 left: 32px; right: 32px;150 font-size: 56px; font-weight: 800;151 }152 .desc-text {153 position: absolute;154 top: 1320px;155 left: 32px; right: 32px;156 font-size: 40px; line-height: 1.5; color: #222;157 }158 .see-full {159 position: absolute;160 top: 1540px; left: 32px;161 color: #2F5BFF; font-size: 44px; font-weight: 700; text-decoration: none;162 }163 164 /* More like this */165 .mlt-head {166 position: absolute;167 top: 1640px; left: 32px;168 font-size: 60px; font-weight: 800;169 }170 .mlt-sub {171 position: absolute;172 top: 1720px; left: 32px; right: 360px;173 color: #666; font-size: 40px;174 }175 .see-all-btn {176 position: absolute;177 top: 1700px; right: 32px;178 height: 110px; width: 300px;179 border: 2px solid #cfcfcf; border-radius: 60px;180 display: flex; align-items: center; justify-content: center;181 font-size: 44px; color: #222;182 background: #fff;183 }184 185 .cards {186 position: absolute;187 top: 1840px; left: 32px; right: 32px;188 display: flex; gap: 32px;189 }190 .card {191 width: 492px; height: 420px; border-radius: 28px; overflow: hidden;192 background: #fff; border: 1px solid #e6e6e6; position: relative;193 }194 .img {195 width: 100%; height: 100%;196 background: #E0E0E0;197 border-top-left-radius: 28px; border-top-right-radius: 28px;198 border-bottom: 1px solid #BDBDBD;199 display: flex; align-items: center; justify-content: center;200 color: #757575; font-size: 36px; text-align: center;201 }202 .fav {203 position: absolute; top: 22px; right: 22px;204 width: 78px; height: 78px; border-radius: 50%;205 background: #fff; border: 1px solid #ddd;206 display: flex; align-items: center; justify-content: center;207 box-shadow: 0 2px 8px rgba(0,0,0,0.1);208 }209 210 /* Bottom navigation */211 .nav {212 position: absolute; bottom: 0; left: 0; right: 0;213 height: 168px; border-top: 1px solid #e5e5e5; background: #fafafa;214 display: flex; justify-content: space-around; align-items: center;215 }216 .nav-item {217 width: 180px; height: 140px; display: flex; flex-direction: column;218 align-items: center; justify-content: center; color: #333; font-size: 32px;219 }220 .nav-item .icon {221 width: 72px; height: 72px; margin-bottom: 10px; color: #333;222 }223 .nav-item.active .icon-wrap {224 width: 120px; height: 120px; border-radius: 60px; background: #E7EDFF;225 display: flex; align-items: center; justify-content: center; margin-bottom: 6px;226 }227 .nav-item.active .label { color: #2F5BFF; }228</style>229</head>230<body>231<div id="render-target">232 233 <!-- Status Bar -->234 <div class="status-bar">235 <div style="display:flex;align-items:center;gap:18px;">236 <div style="font-size:44px;">10:47</div>237 <div class="status-dot"></div>238 </div>239 <div class="status-icons">240 <svg class="wifi" viewBox="0 0 48 32">241 <path d="M24 28c-2 0-4 2-4 4s2 4 4 4 4-2 4-4-2-4-4-4zm0-8c-6 0-12 3-16 8l4 3c3-4 7-6 12-6s9 2 12 6l4-3c-4-5-10-8-16-8zm0-8c-10 0-18 4-24 12l4 3c5-6 12-10 20-10s15 4 20 10l4-3C42 8 34 4 24 4z" fill="#4b4b4b"/>242 </svg>243 <div class="battery"></div>244 </div>245 </div>246 247 <!-- Header -->248 <div class="header">249 <div class="back-btn">250 <svg viewBox="0 0 48 48" width="48" height="48">251 <path d="M28 6 L10 24 L28 42" stroke="#222" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 </div>254 <div class="header-title">Item</div>255 <div class="more-btn dots">256 <svg viewBox="0 0 20 60">257 <circle cx="10" cy="10" r="6" fill="#222"></circle>258 <circle cx="10" cy="30" r="6" fill="#222"></circle>259 <circle cx="10" cy="50" r="6" fill="#222"></circle>260 </svg>261 </div>262 </div>263 264 <!-- Dropdown menu -->265 <div class="menu-card">266 <div class="menu-item">Watch this item</div>267 <div class="menu-item">Share this item</div>268 <div class="menu-item">Report this item</div>269 <div class="menu-item">Help & Contact</div>270 </div>271 272 <!-- Blue outline actions -->273 <div class="actions">274 <div class="outline-btn">Add to basket</div>275 <div class="outline-btn">Make offer</div>276 <div class="outline-btn">277 <span class="heart">278 <svg viewBox="0 0 48 48" width="48" height="48">279 <path d="M24 42s-14-9-18-16c-3-6 1-14 8-14 5 0 8 4 10 7 2-3 5-7 10-7 7 0 11 8 8 14-4 7-18 16-18 16z" fill="none" stroke="#2F5BFF" stroke-width="4"/>280 </svg>281 </span>282 Add to watchlist283 </div>284 </div>285 286 <!-- About this item -->287 <div class="section-title">About this item</div>288 <div class="about-list">289 <div class="about-row">290 <div class="about-label">Condition</div>291 <div class="about-value">Used</div>292 </div>293 <div class="about-row">294 <div class="about-label">Quantity</div>295 <div class="about-value">1 available</div>296 </div>297 <div class="about-row">298 <div class="about-label">Item Number</div>299 <div style="display:flex; align-items:center;">300 <div class="about-value">304796314833</div>301 <svg class="chev" viewBox="0 0 24 24">302 <path d="M8 4 L16 12 L8 20" stroke="#666" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>303 </svg>304 </div>305 </div>306 <div class="about-row">307 <div class="about-label">UK Shoe Size</div>308 <div class="about-value">7</div>309 </div>310 <div class="about-row" style="border-bottom:none;">311 <div class="about-label">Shoe Shaft Style</div>312 <div class="about-value">Low Top</div>313 </div>314 </div>315 316 <!-- Description -->317 <div class="desc-title">Item description from the seller</div>318 <div class="desc-text">319 New Balance 420 Size 9 Athletic shoes for women WL420DFU Mint. Good pre-owned conditions, look at all over the pictures for details.320 </div>321 <a href="#" class="see-full">See full description</a>322 323 <!-- More like this -->324 <div class="mlt-head">More like this</div>325 <div class="mlt-sub">Sponsored · UK Shoe Size 7 and similar styles</div>326 <div class="see-all-btn">See all →</div>327 328 <div class="cards">329 <div class="card">330 <div class="img">[IMG: Mint New Balance Sneakers]</div>331 <div class="fav">332 <svg viewBox="0 0 48 48" width="40" height="40">333 <path d="M24 40s-12-8-16-14c-3-5 1-12 7-12 4 0 7 3 9 6 2-3 5-6 9-6 6 0 10 7 7 12-4 6-16 14-16 14z" fill="none" stroke="#777" stroke-width="3"/>334 </svg>335 </div>336 </div>337 <div class="card">338 <div class="img">[IMG: Similar Running Shoes]</div>339 <div class="fav">340 <svg viewBox="0 0 48 48" width="40" height="40">341 <path d="M24 40s-12-8-16-14c-3-5 1-12 7-12 4 0 7 3 9 6 2-3 5-6 9-6 6 0 10 7 7 12-4 6-16 14-16 14z" fill="none" stroke="#777" stroke-width="3"/>342 </svg>343 </div>344 </div>345 </div>346 347 <!-- Bottom Navigation -->348 <div class="nav">349 <div class="nav-item">350 <div class="icon">351 <svg viewBox="0 0 48 48" width="72" height="72">352 <path d="M6 22 L24 6 L42 22 V42 H28 V30 H20 V42 H6 Z" fill="#333"/>353 </svg>354 </div>355 <div class="label">Home</div>356 </div>357 <div class="nav-item">358 <div class="icon">359 <svg viewBox="0 0 48 48" width="72" height="72">360 <circle cx="24" cy="16" r="10" fill="#333"></circle>361 <path d="M6 44c4-10 14-14 18-14s14 4 18 14" stroke="#333" stroke-width="4" fill="none"/>362 </svg>363 </div>364 <div class="label">My eBay</div>365 </div>366 <div class="nav-item active">367 <div class="icon-wrap">368 <svg class="icon" viewBox="0 0 48 48">369 <circle cx="20" cy="20" r="14" stroke="#2F5BFF" stroke-width="4" fill="none"></circle>370 <path d="M32 32 L44 44" stroke="#2F5BFF" stroke-width="4" stroke-linecap="round"/>371 </svg>372 </div>373 <div class="label">Search</div>374 </div>375 <div class="nav-item">376 <div class="icon">377 <svg viewBox="0 0 48 48" width="72" height="72">378 <path d="M8 20 C8 12 14 6 24 6s16 6 16 14v8l-6 6v8H14v-8l-6-6z" fill="#333"/>379 </svg>380 </div>381 <div class="label">Inbox</div>382 </div>383 <div class="nav-item">384 <div class="icon">385 <svg viewBox="0 0 48 48" width="72" height="72">386 <path d="M12 38 L36 14" stroke="#333" stroke-width="4"/>387 <path d="M34 10 L42 18 L18 42 L10 34 Z" fill="none" stroke="#333" stroke-width="4"/>388 </svg>389 </div>390 <div class="label">Selling</div>391 </div>392 </div>393 394</div>395</body>396</html>