GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Item Page Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", 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 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 110px;25 padding: 0 36px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #f5f5f5;31 font-weight: 600;32 font-size: 44px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 26px;38 font-size: 36px;39 }40 .status-icon { width: 42px; height: 42px; opacity: 0.85; }41 42 /* App header */43 .app-header {44 position: absolute;45 top: 110px;46 left: 0;47 width: 1080px;48 height: 120px;49 display: flex;50 align-items: center;51 padding: 0 36px;52 box-sizing: border-box;53 gap: 24px;54 }55 .back-btn, .menu-btn {56 width: 96px;57 height: 96px;58 display: flex;59 align-items: center;60 justify-content: center;61 }62 .header-title {63 font-size: 56px;64 font-weight: 700;65 letter-spacing: 0.2px;66 }67 .menu-btn { margin-left: auto; }68 69 .divider {70 position: absolute;71 left: 36px;72 right: 36px;73 height: 2px;74 background: #2b2b2b;75 }76 77 /* Sections */78 .section {79 position: absolute;80 left: 36px;81 right: 36px;82 }83 .section h2 {84 margin: 0;85 font-size: 54px;86 font-weight: 800;87 letter-spacing: 0.2px;88 }89 .muted { color: #9AA0A6; }90 91 .desc-text {92 margin-top: 18px;93 font-size: 36px;94 line-height: 1.4;95 color: #cfcfcf;96 max-width: 960px;97 }98 99 /* Shipping section */100 .kv-row {101 display: flex;102 justify-content: space-between;103 align-items: center;104 margin-top: 26px;105 }106 .kv-row .label {107 color: #b0b0b0;108 font-size: 38px;109 }110 .kv-row .value {111 color: #ffffff;112 font-size: 40px;113 display: flex;114 align-items: center;115 gap: 12px;116 }117 .chevron {118 width: 28px; height: 28px; opacity: 0.8;119 }120 121 /* Seller buttons */122 .pill-btn {123 height: 120px;124 border: 2px solid #4C82FF;125 color: #83A5FF;126 border-radius: 60px;127 display: flex;128 align-items: center;129 justify-content: center;130 font-size: 42px;131 font-weight: 600;132 margin-top: 24px;133 }134 135 /* More like this */136 .more-header {137 display: flex;138 align-items: center;139 justify-content: space-between;140 }141 .see-all {142 width: 240px;143 height: 100px;144 border: 2px solid #8A8A8A;145 border-radius: 50px;146 display: flex;147 align-items: center;148 justify-content: center;149 gap: 16px;150 color: #EDEDED;151 font-size: 38px;152 }153 154 .cards {155 position: absolute;156 left: 36px;157 right: 36px;158 top: 1700px;159 display: flex;160 gap: 24px;161 }162 .card {163 width: 492px;164 height: 460px;165 background: #FFFFFF;166 border-radius: 36px;167 position: relative;168 overflow: hidden;169 }170 .img-placeholder {171 position: absolute;172 left: 0; top: 0;173 width: 100%; height: 100%;174 background: #E0E0E0;175 border: 1px solid #BDBDBD;176 color: #757575;177 display: flex;178 align-items: center;179 justify-content: center;180 font-size: 34px;181 font-weight: 600;182 }183 .heart {184 position: absolute;185 top: 22px;186 right: 22px;187 width: 72px;188 height: 72px;189 background: #ffffff;190 border-radius: 36px;191 display: flex;192 align-items: center;193 justify-content: center;194 box-shadow: 0 2px 10px rgba(0,0,0,0.35);195 }196 .heart svg { width: 40px; height: 40px; fill: none; stroke: #111; stroke-width: 3; }197 198 /* Bottom nav */199 .bottom-nav {200 position: absolute;201 bottom: 90px;202 left: 0;203 width: 1080px;204 height: 180px;205 background: #141414;206 border-top: 1px solid #2a2a2a;207 display: flex;208 align-items: center;209 justify-content: space-around;210 color: #bdbdbd;211 }212 .nav-item {213 width: 180px;214 display: flex;215 flex-direction: column;216 align-items: center;217 gap: 10px;218 font-size: 32px;219 }220 .nav-item svg { width: 50px; height: 50px; }221 .active .label { color: #5C8DFF; }222 .active svg path, .active svg circle, .active svg rect { stroke: #5C8DFF; fill: none; }223 224 .home-indicator {225 position: absolute;226 bottom: 20px;227 left: 50%;228 transform: translateX(-50%);229 width: 360px;230 height: 16px;231 background: #e6e6e6;232 border-radius: 10px;233 opacity: 0.5;234 }235 236 /* Overflow menu */237 .overflow-menu {238 position: absolute;239 top: 260px;240 right: 40px;241 width: 480px;242 background: #2E3138;243 color: #F5F7FA;244 border-radius: 28px;245 box-shadow: 0 12px 30px rgba(0,0,0,0.6);246 padding: 20px 24px;247 box-sizing: border-box;248 }249 .menu-item {250 height: 110px;251 display: flex;252 align-items: center;253 font-size: 40px;254 padding: 0 8px;255 border-bottom: 1px solid #3a3d44;256 }257 .menu-item:last-child { border-bottom: none; }258</style>259</head>260<body>261<div id="render-target">262 263 <!-- Status Bar -->264 <div class="status-bar">265 <div>4:53</div>266 <div class="status-right">267 <!-- small icons -->268 <svg class="status-icon" viewBox="0 0 24 24">269 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"></circle>270 </svg>271 <svg class="status-icon" viewBox="0 0 24 24">272 <rect x="3" y="7" width="18" height="10" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"></rect>273 <rect x="6" y="9" width="12" height="6" fill="#fff"></rect>274 </svg>275 <div>95%</div>276 </div>277 </div>278 279 <!-- App Header -->280 <div class="app-header">281 <div class="back-btn">282 <svg viewBox="0 0 24 24" width="56" height="56">283 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>284 </svg>285 </div>286 <div class="header-title">Item</div>287 <div class="menu-btn">288 <svg viewBox="0 0 24 24" width="56" height="56">289 <circle cx="12" cy="5" r="2" fill="#fff"></circle>290 <circle cx="12" cy="12" r="2" fill="#fff"></circle>291 <circle cx="12" cy="19" r="2" fill="#fff"></circle>292 </svg>293 </div>294 </div>295 296 <!-- Overflow Menu -->297 <div class="overflow-menu">298 <div class="menu-item">Unwatch this item</div>299 <div class="menu-item">Share this item</div>300 <div class="menu-item">Report this item</div>301 <div class="menu-item">Help & Contact</div>302 </div>303 304 <!-- Divider under header -->305 <div class="divider" style="top: 230px;"></div>306 307 <!-- Item description section -->308 <div class="section" style="top: 260px;">309 <h2>Item description from seller</h2>310 <div class="desc-text">311 American vintage-style beaded detailing on soft nubuck for a subtly bohemian feel.312 </div>313 </div>314 315 <div class="divider" style="top: 520px;"></div>316 317 <!-- Shipping, returns and payments -->318 <div class="section" style="top: 560px;">319 <h2>Shipping, returns, and payments</h2>320 321 <div class="kv-row">322 <div class="label">Location</div>323 <div class="value">Hanover, Pennsylvania, United States324 <svg class="chevron" viewBox="0 0 24 24">325 <path d="M9 6l6 6-6 6" stroke="#bfbfbf" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>326 </svg>327 </div>328 </div>329 330 <div class="kv-row">331 <div class="label">Returns</div>332 <div class="value">Accepted within 30 days</div>333 </div>334 </div>335 336 <div class="divider" style="top: 880px;"></div>337 338 <!-- About seller -->339 <div class="section" style="top: 920px;">340 <h2>About this seller</h2>341 <div class="kv-row" style="margin-top: 10px;">342 <div class="muted" style="font-size:38px;">98.6% positive feedback</div>343 <div class="value">344 <svg class="chevron" viewBox="0 0 24 24">345 <path d="M9 6l6 6-6 6" stroke="#bfbfbf" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>346 </svg>347 </div>348 </div>349 350 <div class="pill-btn">Seller's other items</div>351 <div class="pill-btn">Contact seller</div>352 </div>353 354 <div class="divider" style="top: 1280px;"></div>355 356 <!-- More like this header -->357 <div class="section" style="top: 1320px;">358 <div class="more-header">359 <div>360 <div style="font-size:54px; font-weight:800;">More like this</div>361 <div class="muted" style="font-size:36px; margin-top:10px;">Sponsored</div>362 </div>363 <div class="see-all">See all364 <svg viewBox="0 0 24 24" width="26" height="26">365 <path d="M9 6l6 6-6 6" stroke="#dcdcdc" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>366 </svg>367 </div>368 </div>369 </div>370 371 <!-- Cards -->372 <div class="cards">373 <div class="card">374 <div class="img-placeholder">[IMG: Brown Shoe]</div>375 <div class="heart">376 <svg viewBox="0 0 24 24">377 <path d="M12 21s-7-4.7-7-10a4 4 0 017-2 4 4 0 017 2c0 5.3-7 10-7 10z"></path>378 </svg>379 </div>380 </div>381 <div class="card">382 <div class="img-placeholder">[IMG: White Sneaker]</div>383 <div class="heart">384 <svg viewBox="0 0 24 24">385 <path d="M12 21s-7-4.7-7-10a4 4 0 017-2 4 4 0 017 2c0 5.3-7 10-7 10z"></path>386 </svg>387 </div>388 </div>389 </div>390 391 <!-- Bottom Navigation -->392 <div class="bottom-nav">393 <div class="nav-item">394 <svg viewBox="0 0 24 24">395 <path d="M3 10l9-7 9 7v9a1 1 0 01-1 1h-5v-6H9v6H4a1 1 0 01-1-1z" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linejoin="round"></path>396 </svg>397 <div class="label">Home</div>398 </div>399 <div class="nav-item">400 <svg viewBox="0 0 24 24">401 <circle cx="12" cy="8" r="4" stroke="#bdbdbd" stroke-width="2" fill="none"></circle>402 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linecap="round"></path>403 </svg>404 <div class="label">My eBay</div>405 </div>406 <div class="nav-item active">407 <svg viewBox="0 0 24 24">408 <circle cx="11" cy="11" r="7" stroke="#5C8DFF" stroke-width="2" fill="none"></circle>409 <path d="M20 20l-4-4" stroke="#5C8DFF" stroke-width="2" fill="none" stroke-linecap="round"></path>410 </svg>411 <div class="label">Search</div>412 </div>413 <div class="nav-item">414 <svg viewBox="0 0 24 24">415 <path d="M12 3a4 4 0 014 4v3h3v8H5v-8h3V7a4 4 0 014-4z" stroke="#bdbdbd" stroke-width="2" fill="none" stroke-linejoin="round"></path>416 </svg>417 <div class="label">Inbox</div>418 </div>419 <div class="nav-item">420 <svg viewBox="0 0 24 24">421 <path d="M4 7l10-3 6 6-10 3-6-6z" stroke="#bdbdbd" stroke-width="2" fill="none"></path>422 <path d="M14 4l6 6" stroke="#bdbdbd" stroke-width="2"></path>423 </svg>424 <div class="label">Selling</div>425 </div>426 </div>427 428 <div class="home-indicator"></div>429 430</div>431</body>432</html>