GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Item Screen Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0B0B0B;14 color: #FFFFFF;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 }17 .statusbar {18 height: 96px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 font-size: 34px;24 color: #EAEAEA;25 }26 .status-icons {27 display: flex;28 align-items: center;29 gap: 12px;30 }31 .dot { width: 12px; height: 12px; background: #EAEAEA; border-radius: 50%; display: inline-block; }32 .appbar {33 height: 120px;34 display: flex;35 align-items: center;36 padding: 0 36px;37 gap: 24px;38 }39 .appbar .title {40 font-size: 54px;41 font-weight: 700;42 }43 .spacer { flex: 1; }44 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }45 .content {46 padding: 0 36px;47 }48 .divider {49 height: 2px;50 background: #262626;51 margin: 24px 0;52 }53 .section-title {54 font-size: 58px;55 font-weight: 800;56 margin-top: 24px;57 margin-bottom: 16px;58 }59 .row {60 display: flex;61 justify-content: space-between;62 font-size: 38px;63 color: #CFCFCF;64 margin: 12px 0;65 }66 .row .value {67 color: #FFFFFF;68 font-weight: 600;69 }70 .chevron-right {71 width: 24px; height: 24px; margin-left: 16px;72 }73 .section-line {74 border-top: 2px solid #262626;75 margin: 36px 0;76 }77 .link-pill {78 border: 3px solid #3B82F6;79 color: #62A4FF;80 border-radius: 64px;81 padding: 26px 24px;82 text-align: center;83 font-size: 44px;84 margin: 18px 0;85 }86 /* Related items */87 .related {88 margin-top: 24px;89 }90 .related-sub {91 font-size: 40px;92 color: #CFCFCF;93 margin-bottom: 18px;94 }95 .cards {96 display: flex;97 gap: 18px;98 }99 .card {100 position: relative;101 width: 300px;102 height: 260px;103 border-radius: 28px;104 overflow: hidden;105 background: #151515;106 border: 1px solid #2D2D2D;107 }108 .card .img {109 position: absolute;110 inset: 0;111 background: #E0E0E0;112 border: 1px solid #BDBDBD;113 display: flex;114 align-items: center;115 justify-content: center;116 color: #757575;117 font-size: 32px;118 }119 .heart {120 position: absolute;121 top: 16px;122 right: 16px;123 width: 60px;124 height: 60px;125 background: rgba(25,25,25,0.8);126 border-radius: 50%;127 display: flex;128 align-items: center;129 justify-content: center;130 border: 1px solid #3A3A3A;131 }132 /* Bottom navigation */133 .bottom-nav {134 position: absolute;135 left: 0;136 bottom: 84px;137 width: 100%;138 height: 220px;139 background: #171717;140 border-top: 1px solid #2A2A2A;141 display: flex;142 align-items: center;143 justify-content: space-around;144 padding: 24px 24px 18px;145 }146 .nav-item {147 width: 180px;148 display: flex;149 flex-direction: column;150 align-items: center;151 color: #CFCFCF;152 font-size: 30px;153 gap: 14px;154 }155 .nav-item.active .icon-wrap {156 background: #0F172A;157 border: 2px solid #3B82F6;158 }159 .icon-wrap {160 width: 90px;161 height: 90px;162 border-radius: 30px;163 background: transparent;164 display: flex;165 align-items: center;166 justify-content: center;167 }168 .gesture {169 position: absolute;170 bottom: 24px;171 left: 50%;172 transform: translateX(-50%);173 width: 260px;174 height: 16px;175 background: #D6D6D6;176 border-radius: 12px;177 opacity: 0.9;178 }179 /* Overlay menu */180 .overlay-menu {181 position: absolute;182 right: 44px;183 top: 270px;184 width: 650px;185 background: #242A31;186 border-radius: 24px;187 box-shadow: 0 20px 40px rgba(0,0,0,0.6);188 padding: 24px 0;189 border: 1px solid #313841;190 }191 .overlay-item {192 font-size: 44px;193 padding: 26px 36px;194 color: #EAEFF7;195 }196 .overlay-item + .overlay-item {197 border-top: 1px solid #313841;198 }199 /* Misc */200 .muted { color: #BDBDBD; }201</style>202</head>203<body>204<div id="render-target">205 <!-- Status bar -->206 <div class="statusbar">207 <div>5:42</div>208 <div class="status-icons">209 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>210 <span style="width: 34px; height: 24px; border: 3px solid #EAEAEA; border-radius: 4px; display:inline-block; position: relative;">211 <span style="position:absolute; right:-8px; top:8px; width:6px; height:8px; background:#EAEAEA;"></span>212 </span>213 </div>214 </div>215 216 <!-- App bar -->217 <div class="appbar">218 <div class="icon-btn">219 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">220 <path d="M15 6 L9 12 L15 18" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 </div>223 <div class="title">Item</div>224 <div class="spacer"></div>225 <div class="icon-btn">226 <svg width="44" height="44" viewBox="0 0 24 24" fill="#FFFFFF">227 <circle cx="12" cy="5" r="2.2"></circle>228 <circle cx="12" cy="12" r="2.2"></circle>229 <circle cx="12" cy="19" r="2.2"></circle>230 </svg>231 </div>232 </div>233 234 <!-- Content -->235 <div class="content">236 <div class="muted" style="font-size:40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Item description •••</div>237 <div class="divider"></div>238 239 <div class="section-title">Bidding</div>240 <div class="row">241 <div>Time left</div><div class="value">2d 16h</div>242 </div>243 <div class="row">244 <div class="muted">Mon, Oct ...</div><div class="muted"> </div>245 </div>246 <div class="row">247 <div>Bids</div><div class="value">0</div>248 </div>249 <div class="row">250 <div>Bidders</div><div class="value">0</div>251 </div>252 253 <div class="section-line"></div>254 255 <div style="display:flex; align-items:center; justify-content:space-between;">256 <div class="section-title" style="margin:0;">Shipping, returns, and payments</div>257 <svg class="chevron-right" viewBox="0 0 24 24">258 <path d="M9 6 L15 12 L9 18" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>259 </svg>260 </div>261 <div class="row">262 <div>Location</div><div class="value">Duluth, Georgia, United States</div>263 </div>264 <div class="row">265 <div>Returns</div><div class="value">Seller does not accept returns</div>266 </div>267 268 <div class="section-line"></div>269 270 <div style="display:flex; align-items:center; justify-content:space-between;">271 <div class="section-title" style="margin:0;">About this seller</div>272 <svg class="chevron-right" viewBox="0 0 24 24">273 <path d="M9 6 L15 12 L9 18" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>274 </svg>275 </div>276 <div style="font-size:40px; color:#CFCFCF; margin-top:10px;">96.5% positive feedback</div>277 278 <div class="link-pill">Seller's other items</div>279 <div class="link-pill">Contact seller</div>280 281 <div class="section-line"></div>282 283 <div class="related">284 <div class="section-title" style="margin-bottom:4px;">Related sponsored items</div>285 <div class="related-sub">Kitchen Racks & Holders</div>286 <div class="cards">287 <div class="card">288 <div class="img">[IMG: Kitchen Rack]</div>289 <div class="heart">290 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">291 <path d="M12 20s-7-4.6-7-9.5C5 8 6.5 6.5 8.4 6.5c1.3 0 2.4.7 3.1 1.7.7-1 1.8-1.7 3.1-1.7 1.9 0 3.4 1.5 3.4 4 0 4.9-7 9.5-7 9.5z"292 stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round"/>293 </svg>294 </div>295 </div>296 <div class="card">297 <div class="img">[IMG: Metal Holder]</div>298 <div class="heart">299 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">300 <path d="M12 20s-7-4.6-7-9.5C5 8 6.5 6.5 8.4 6.5c1.3 0 2.4.7 3.1 1.7.7-1 1.8-1.7 3.1-1.7 1.9 0 3.4 1.5 3.4 4 0 4.9-7 9.5-7 9.5z"301 stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round"/>302 </svg>303 </div>304 </div>305 <div class="card">306 <div class="img">[IMG: Sink Organizer]</div>307 <div class="heart">308 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">309 <path d="M12 20s-7-4.6-7-9.5C5 8 6.5 6.5 8.4 6.5c1.3 0 2.4.7 3.1 1.7.7-1 1.8-1.7 3.1-1.7 1.9 0 3.4 1.5 3.4 4 0 4.9-7 9.5-7 9.5z"310 stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round"/>311 </svg>312 </div>313 </div>314 <div class="card">315 <div class="img">[IMG: Sponsored Product]</div>316 <div class="heart">317 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">318 <path d="M12 20s-7-4.6-7-9.5C5 8 6.5 6.5 8.4 6.5c1.3 0 2.4.7 3.1 1.7.7-1 1.8-1.7 3.1-1.7 1.9 0 3.4 1.5 3.4 4 0 4.9-7 9.5-7 9.5z"319 stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round"/>320 </svg>321 </div>322 </div>323 </div>324 </div>325 </div>326 327 <!-- Overlay drop-down menu -->328 <div class="overlay-menu">329 <div class="overlay-item">Unwatch this item</div>330 <div class="overlay-item">Share this item</div>331 <div class="overlay-item">Report this item</div>332 <div class="overlay-item">Help & Contact</div>333 </div>334 335 <!-- Bottom navigation -->336 <div class="bottom-nav">337 <div class="nav-item">338 <div class="icon-wrap">339 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">340 <path d="M3 11 L12 4 L21 11" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>341 <path d="M6 10 V20 H18 V10" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>342 </svg>343 </div>344 <div>Home</div>345 </div>346 <div class="nav-item">347 <div class="icon-wrap">348 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">349 <circle cx="12" cy="8" r="4.2" stroke="#FFFFFF" stroke-width="2"></circle>350 <path d="M4 20c2-4 6-4 8-4s6 0 8 4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>351 </svg>352 </div>353 <div>My eBay</div>354 </div>355 <div class="nav-item active">356 <div class="icon-wrap">357 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">358 <circle cx="11" cy="11" r="6" stroke="#3B82F6" stroke-width="2.2"></circle>359 <path d="M20 20 L16 16" stroke="#3B82F6" stroke-width="2.2" stroke-linecap="round"/>360 </svg>361 </div>362 <div style="color:#FFFFFF;">Search</div>363 </div>364 <div class="nav-item">365 <div class="icon-wrap">366 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">367 <path d="M4 10 L12 4 L20 10 V20 H4 V10z" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>368 <circle cx="12" cy="15" r="2" fill="#FFFFFF"></circle>369 </svg>370 </div>371 <div>Inbox</div>372 </div>373 <div class="nav-item">374 <div class="icon-wrap">375 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">376 <path d="M6 4 H18 L14 20 H4z" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>377 <circle cx="7.5" cy="8.5" r="1.5" fill="#FFFFFF"></circle>378 </svg>379 </div>380 <div>Selling</div>381 </div>382 </div>383 384 <div class="gesture"></div>385</div>386</body>387</html>