GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">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; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0A0A0A;15 color: #FFFFFF;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17 }18 19 /* Top system status bar */20 .status-bar {21 height: 90px;22 padding: 0 32px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #fff;27 font-size: 32px;28 letter-spacing: 0.5px;29 opacity: 0.9;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 22px;35 }36 .status-icon {37 width: 26px; height: 26px;38 border-radius: 50%;39 background: rgba(255,255,255,0.25);40 }41 .battery {42 display: inline-flex;43 align-items: center;44 gap: 8px;45 font-size: 28px;46 }47 .battery svg { width: 34px; height: 26px; }48 49 /* App bar */50 .app-bar {51 height: 120px;52 display: flex;53 align-items: center;54 padding: 0 32px;55 gap: 24px;56 }57 .back-btn {58 width: 72px; height: 72px; border-radius: 36px;59 display: flex; align-items: center; justify-content: center;60 background: transparent;61 }62 .app-title {63 font-size: 46px;64 font-weight: 600;65 flex: 1;66 }67 .actions {68 display: flex;69 gap: 20px;70 }71 .circle-icon {72 width: 84px; height: 84px; border-radius: 42px;73 background: #1C1C1C;74 display: flex; align-items: center; justify-content: center;75 }76 .circle-icon svg { width: 40px; height: 40px; }77 78 hr.divider {79 border: none;80 border-bottom: 2px solid #2A2A2A;81 margin: 14px 32px 0 32px;82 }83 84 /* Content sections */85 .section {86 padding: 28px 32px;87 }88 .section h2 {89 margin: 10px 0 8px 0;90 font-size: 44px;91 font-weight: 700;92 }93 .section .subtext {94 color: #BDBDBD;95 font-size: 30px;96 line-height: 1.4;97 }98 .row {99 display: flex;100 align-items: center;101 gap: 20px;102 }103 .chevron {104 margin-left: auto;105 }106 .chevron svg { width: 34px; height: 34px; }107 108 /* Shipping details */109 .details {110 margin-top: 16px;111 display: grid;112 grid-template-columns: 230px 1fr 40px;113 row-gap: 18px;114 column-gap: 10px;115 align-items: center;116 font-size: 32px;117 }118 .details .label { color: #BDBDBD; }119 .details .value { color: #FFFFFF; }120 .details .arrow { justify-self: end; }121 122 /* Seller actions */123 .seller-actions {124 margin-top: 22px;125 display: flex;126 flex-direction: column;127 gap: 26px;128 }129 .outline-btn {130 height: 120px;131 border-radius: 60px;132 border: 2px solid #4C6EF5;133 color: #89A3FF;134 background: transparent;135 font-size: 36px;136 font-weight: 500;137 display: flex; align-items: center; justify-content: center;138 }139 140 /* More like this header */141 .more-header {142 display: flex;143 align-items: center;144 padding: 8px 32px 0 32px;145 }146 .more-header h3 {147 font-size: 42px;148 font-weight: 700;149 margin: 0;150 flex: 1;151 }152 .sponsored {153 color: #9E9E9E;154 font-size: 28px;155 margin-top: 6px;156 padding: 0 32px;157 }158 .see-all {159 border: 2px solid #5A5A5A;160 color: #FFFFFF;161 height: 86px;162 padding: 0 34px;163 border-radius: 43px;164 font-size: 32px;165 display: inline-flex;166 align-items: center;167 gap: 12px;168 }169 .see-all svg { width: 28px; height: 28px; }170 171 /* Product cards */172 .cards {173 margin-top: 18px;174 padding: 0 32px;175 display: grid;176 grid-template-columns: 1fr 1fr;177 gap: 20px;178 }179 .card {180 background: #111;181 border-radius: 28px;182 overflow: hidden;183 position: relative;184 padding: 18px;185 height: 470px;186 }187 .card .img {188 height: 100%;189 border-radius: 18px;190 background: #E0E0E0;191 border: 1px solid #BDBDBD;192 display: flex; align-items: center; justify-content: center;193 color: #757575; font-size: 32px;194 }195 .favorite {196 position: absolute;197 top: 18px; right: 18px;198 width: 70px; height: 70px; border-radius: 35px;199 background: #FFFFFF;200 display: flex; align-items: center; justify-content: center;201 }202 .favorite svg { width: 34px; height: 34px; }203 204 /* Bottom nav bar */205 .bottom-nav {206 position: absolute;207 left: 0; right: 0; bottom: 70px;208 height: 170px;209 background: #101010;210 border-top: 1px solid #1F1F1F;211 display: grid;212 grid-template-columns: repeat(5, 1fr);213 align-items: center;214 padding: 0 24px;215 }216 .nav-item {217 display: flex;218 flex-direction: column;219 align-items: center;220 gap: 10px;221 color: #D9D9D9;222 font-size: 28px;223 }224 .nav-item .icon {225 width: 76px; height: 76px; border-radius: 38px;226 display: flex; align-items: center; justify-content: center;227 background: #1C1C1C;228 }229 .nav-item.active .icon {230 background: #24324A;231 border: 2px solid #3A57C4;232 }233 .nav-item.active span { color: #7FA2FF; }234 235 /* iOS/Android gesture handle */236 .gesture {237 position: absolute;238 bottom: 20px; left: 50%;239 transform: translateX(-50%);240 width: 220px; height: 12px;241 border-radius: 6px;242 background: #EDEDED;243 opacity: 0.85;244 }245</style>246</head>247<body>248<div id="render-target">249 250 <!-- Status Bar -->251 <div class="status-bar">252 <div class="status-left">4:53</div>253 <div class="status-right">254 <div class="status-icon"></div>255 <div class="status-icon"></div>256 <div class="status-icon"></div>257 <div class="battery">258 <svg viewBox="0 0 24 24">259 <rect x="1" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>260 <rect x="3" y="7" width="12" height="10" fill="#fff"></rect>261 <rect x="20" y="9" width="3" height="6" fill="#fff"></rect>262 </svg>263 95%264 </div>265 </div>266 </div>267 268 <!-- App Bar -->269 <div class="app-bar">270 <div class="back-btn">271 <svg viewBox="0 0 24 24">272 <polyline points="15,5 7,12 15,19" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>273 </svg>274 </div>275 <div class="app-title">Item</div>276 <div class="actions">277 <div class="circle-icon">278 <!-- Search -->279 <svg viewBox="0 0 24 24">280 <circle cx="10" cy="10" r="6" fill="none" stroke="#fff" stroke-width="2"></circle>281 <line x1="15" y1="15" x2="21" y2="21" stroke="#fff" stroke-width="2"></line>282 </svg>283 </div>284 <div class="circle-icon">285 <!-- Cart -->286 <svg viewBox="0 0 24 24">287 <rect x="5" y="7" width="13" height="10" fill="none" stroke="#fff" stroke-width="2"></rect>288 <path d="M7 7 V5 H16 V7" fill="none" stroke="#fff" stroke-width="2"></path>289 <circle cx="9" cy="19" r="1.7" fill="#fff"></circle>290 <circle cx="16" cy="19" r="1.7" fill="#fff"></circle>291 </svg>292 </div>293 <div class="circle-icon">294 <!-- Share -->295 <svg viewBox="0 0 24 24">296 <circle cx="6" cy="12" r="2" fill="none" stroke="#fff" stroke-width="2"></circle>297 <circle cx="18" cy="6" r="2" fill="none" stroke="#fff" stroke-width="2"></circle>298 <circle cx="18" cy="18" r="2" fill="none" stroke="#fff" stroke-width="2"></circle>299 <line x1="8" y1="11" x2="16" y2="7" stroke="#fff" stroke-width="2"></line>300 <line x1="8" y1="13" x2="16" y2="17" stroke="#fff" stroke-width="2"></line>301 </svg>302 </div>303 <div class="circle-icon">304 <!-- More -->305 <svg viewBox="0 0 24 24">306 <circle cx="12" cy="5" r="2" fill="#fff"></circle>307 <circle cx="12" cy="12" r="2" fill="#fff"></circle>308 <circle cx="12" cy="19" r="2" fill="#fff"></circle>309 </svg>310 </div>311 </div>312 </div>313 314 <hr class="divider">315 316 <!-- Item description section -->317 <div class="section">318 <div class="row">319 <h2 style="flex:1;">Item description from the seller</h2>320 <div class="chevron">321 <svg viewBox="0 0 24 24">322 <polyline points="9,5 16,12 9,19" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>323 </svg>324 </div>325 </div>326 <div class="subtext">327 American vintage-style beading adorns supple tan nubuck for a subtly bohemian, autumnal take on our...328 </div>329 </div>330 331 <hr class="divider">332 333 <!-- Shipping/returns section -->334 <div class="section">335 <h2>Shipping, returns, and payments</h2>336 <div class="details">337 <div class="label">Location</div>338 <div class="value">Hanover, Pennsylvania, United States</div>339 <div class="arrow">340 <svg viewBox="0 0 24 24">341 <polyline points="9,5 16,12 9,19" fill="none" stroke="#fff" stroke-width="2"></polyline>342 </svg>343 </div>344 345 <div class="label">Returns</div>346 <div class="value">Accepted within 30 days</div>347 <div class="arrow"></div>348 </div>349 </div>350 351 <hr class="divider">352 353 <!-- About seller section -->354 <div class="section">355 <div class="row">356 <h2 style="flex:1;">About this seller</h2>357 <div class="chevron">358 <svg viewBox="0 0 24 24">359 <polyline points="9,5 16,12 9,19" fill="none" stroke="#fff" stroke-width="2"></polyline>360 </svg>361 </div>362 </div>363 <div class="subtext">98.6% positive feedback</div>364 365 <div class="seller-actions">366 <div class="outline-btn">Seller's other items</div>367 <div class="outline-btn">Contact seller</div>368 </div>369 </div>370 371 <hr class="divider">372 373 <!-- More like this -->374 <div class="more-header">375 <h3>More like this</h3>376 <div class="see-all">377 See all378 <svg viewBox="0 0 24 24">379 <polyline points="9,5 16,12 9,19" fill="none" stroke="#fff" stroke-width="2"></polyline>380 </svg>381 </div>382 </div>383 <div class="sponsored">Sponsored</div>384 385 <div class="cards">386 <div class="card">387 <div class="favorite">388 <svg viewBox="0 0 24 24">389 <path d="M12 21s-7-4.6-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.4-7 10-7 10z" fill="#000"></path>390 </svg>391 </div>392 <div class="img">[IMG: Brown shoe product]</div>393 </div>394 <div class="card">395 <div class="favorite">396 <svg viewBox="0 0 24 24">397 <path d="M12 21s-7-4.6-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.4-7 10-7 10z" fill="#000"></path>398 </svg>399 </div>400 <div class="img">[IMG: White shoe product]</div>401 </div>402 </div>403 404 <!-- Bottom navigation -->405 <div class="bottom-nav">406 <div class="nav-item">407 <div class="icon">408 <!-- Home -->409 <svg viewBox="0 0 24 24">410 <path d="M4 11 L12 4 L20 11" fill="none" stroke="#fff" stroke-width="2"></path>411 <rect x="6" y="11" width="12" height="9" fill="none" stroke="#fff" stroke-width="2"></rect>412 </svg>413 </div>414 <span>Home</span>415 </div>416 <div class="nav-item">417 <div class="icon">418 <!-- Person -->419 <svg viewBox="0 0 24 24">420 <circle cx="12" cy="8" r="4" fill="none" stroke="#fff" stroke-width="2"></circle>421 <path d="M4 20c2-4 6-5 8-5s6 1 8 5" fill="none" stroke="#fff" stroke-width="2"></path>422 </svg>423 </div>424 <span>My eBay</span>425 </div>426 <div class="nav-item active">427 <div class="icon">428 <!-- Search -->429 <svg viewBox="0 0 24 24">430 <circle cx="10" cy="10" r="6" fill="none" stroke="#7FA2FF" stroke-width="2"></circle>431 <line x1="15" y1="15" x2="21" y2="21" stroke="#7FA2FF" stroke-width="2"></line>432 </svg>433 </div>434 <span>Search</span>435 </div>436 <div class="nav-item">437 <div class="icon">438 <!-- Bell -->439 <svg viewBox="0 0 24 24">440 <path d="M6 10c0-4 3-6 6-6s6 2 6 6v5H6z" fill="none" stroke="#fff" stroke-width="2"></path>441 <circle cx="12" cy="19" r="2" fill="#fff"></circle>442 </svg>443 </div>444 <span>Inbox</span>445 </div>446 <div class="nav-item">447 <div class="icon">448 <!-- Tag -->449 <svg viewBox="0 0 24 24">450 <path d="M3 12 L12 3 H20 V11 L11 20 Z" fill="none" stroke="#fff" stroke-width="2"></path>451 <circle cx="17" cy="7" r="2" fill="#fff"></circle>452 </svg>453 </div>454 <span>Selling</span>455 </div>456 </div>457 458 <div class="gesture"></div>459</div>460</body>461</html>