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 Detail Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #000;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 height: 92px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #cfcfcf;26 font-size: 38px;27 letter-spacing: 0.3px;28 }29 .status-icons {30 display: flex;31 gap: 26px;32 align-items: center;33 }34 .status-dot { width: 10px; height: 10px; background: #cfcfcf; border-radius: 50%; }35 36 /* Header */37 .header {38 padding: 18px 36px 24px 36px;39 display: flex;40 align-items: center;41 justify-content: space-between;42 }43 .header-left {44 display: flex;45 align-items: center;46 gap: 28px;47 }48 .header-title {49 font-size: 56px;50 font-weight: 700;51 letter-spacing: 0.2px;52 }53 .icon-btns {54 display: flex;55 gap: 24px;56 }57 .icon-btn {58 width: 96px;59 height: 96px;60 background: #2f2f2f;61 border-radius: 48px;62 display: inline-flex;63 align-items: center;64 justify-content: center;65 }66 .icon-btn svg { width: 52px; height: 52px; }67 68 /* Gallery */69 .gallery {70 margin: 24px 72px 0 72px;71 position: relative;72 }73 .image-box {74 width: 936px;75 height: 936px;76 background: #E0E0E0;77 border: 1px solid #BDBDBD;78 display: flex;79 align-items: center;80 justify-content: center;81 color: #757575;82 font-size: 34px;83 text-align: center;84 }85 .count-pill {86 position: absolute;87 top: 20px;88 right: 0;89 transform: translateY(-50%);90 background: #D9D9D9;91 color: #000;92 font-weight: 700;93 font-size: 34px;94 padding: 10px 20px;95 border-radius: 26px;96 }97 .heart-fab {98 position: absolute;99 right: 24px;100 bottom: 24px;101 width: 120px;102 height: 120px;103 background: #2f2f2f;104 border-radius: 60px;105 display: flex;106 align-items: center;107 justify-content: center;108 }109 .dots {110 display: flex;111 gap: 18px;112 justify-content: center;113 margin: 30px 0 12px;114 }115 .dot {116 width: 18px;117 height: 18px;118 background: #8c8c8c;119 border-radius: 50%;120 }121 .dot.active { background: #cfcfcf; }122 123 /* Content */124 .content {125 padding: 0 36px 260px 36px;126 }127 .title {128 font-size: 54px;129 font-weight: 800;130 line-height: 1.1;131 margin-top: 24px;132 }133 .seller-row {134 margin-top: 40px;135 display: flex;136 align-items: center;137 justify-content: space-between;138 }139 .seller-left {140 display: flex;141 align-items: center;142 gap: 28px;143 }144 .seller-avatar {145 width: 96px;146 height: 96px;147 border-radius: 48px;148 background: #2f2f2f;149 display: flex;150 align-items: center;151 justify-content: center;152 }153 .seller-info {154 display: flex;155 flex-direction: column;156 gap: 8px;157 }158 .seller-name {159 font-size: 36px;160 font-weight: 700;161 }162 .seller-meta {163 font-size: 32px;164 color: #bdbdbd;165 }166 167 .price-row {168 margin-top: 40px;169 font-size: 64px;170 font-weight: 800;171 }172 .shipping {173 font-size: 40px;174 color: #d0d0d0;175 font-weight: 600;176 }177 178 .delivery {179 margin-top: 18px;180 font-size: 36px;181 color: #d0d0d0;182 }183 .delivery b { color: #fff; }184 185 .condition {186 margin-top: 40px;187 font-size: 32px;188 color: #bdbdbd;189 }190 .condition-value {191 margin-top: 8px;192 display: flex;193 align-items: center;194 gap: 12px;195 font-size: 36px;196 color: #fff;197 font-weight: 600;198 }199 200 .dropdown {201 margin-top: 28px;202 border: 2px solid #3a3a3a;203 border-radius: 18px;204 padding: 28px;205 display: flex;206 align-items: center;207 justify-content: space-between;208 color: #e6e6e6;209 font-size: 38px;210 background: #0f0f0f;211 }212 .dropdown .label { color: #cfcfcf; }213 .dropdown .value { font-weight: 700; color: #fff; }214 215 /* Bottom nav */216 .bottom-nav {217 position: absolute;218 bottom: 0;219 left: 0;220 width: 1080px;221 height: 200px;222 background: #101010;223 border-top: 1px solid #222;224 display: flex;225 align-items: center;226 justify-content: space-around;227 padding-bottom: 24px;228 }229 .nav-item {230 display: flex;231 flex-direction: column;232 align-items: center;233 gap: 12px;234 color: #cfcfcf;235 font-size: 28px;236 }237 .nav-item .icon {238 width: 72px;239 height: 72px;240 display: flex;241 align-items: center;242 justify-content: center;243 }244 .nav-item.active { color: #87a9ff; }245 .badge {246 position: absolute;247 top: -6px;248 right: -6px;249 background: #ff4d5a;250 color: #fff;251 font-size: 24px;252 width: 38px;253 height: 38px;254 border-radius: 19px;255 display: flex;256 align-items: center;257 justify-content: center;258 font-weight: 700;259 }260</style>261</head>262<body>263<div id="render-target">264 265 <!-- Status bar -->266 <div class="status-bar">267 <div>8:57</div>268 <div class="status-icons">269 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="10" r="5" stroke="#cfcfcf" stroke-width="2"/><rect x="6" y="10" width="12" height="10" rx="2" stroke="#cfcfcf" stroke-width="2"/></svg>270 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><rect x="3" y="7" width="18" height="12" rx="2" stroke="#cfcfcf" stroke-width="2"/><rect x="5" y="9" width="14" height="8" fill="#cfcfcf"/></svg>271 <div class="status-dot"></div>272 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><path d="M4 9h16M4 15h10" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/></svg>273 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><path d="M17 3l4 4-4 4" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 7h12" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/></svg>274 </div>275 </div>276 277 <!-- Header -->278 <div class="header">279 <div class="header-left">280 <div class="icon">281 <svg width="72" height="72" viewBox="0 0 24 24" fill="none">282 <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>283 </svg>284 </div>285 <div class="header-title">Item</div>286 </div>287 <div class="icon-btns">288 <div class="icon-btn">289 <svg viewBox="0 0 24 24" fill="none">290 <circle cx="11" cy="11" r="6" stroke="#fff" stroke-width="2"/>291 <path d="M20 20l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>292 </svg>293 </div>294 <div class="icon-btn">295 <svg viewBox="0 0 24 24" fill="none">296 <path d="M6 6h14l-2 8H8l-2-8z" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>297 <circle cx="9" cy="18" r="2" fill="#fff"/>298 <circle cx="17" cy="18" r="2" fill="#fff"/>299 </svg>300 </div>301 <div class="icon-btn">302 <svg viewBox="0 0 24 24" fill="none">303 <circle cx="6" cy="12" r="2" fill="#fff"/>304 <circle cx="12" cy="7" r="2" fill="#fff"/>305 <circle cx="18" cy="3" r="2" fill="#fff"/>306 <path d="M7.7 11l3.6-3.2M13.7 6l3.6-2.7" stroke="#fff" stroke-width="2" stroke-linecap="round"/>307 </svg>308 </div>309 <div class="icon-btn">310 <svg viewBox="0 0 24 24" fill="none">311 <circle cx="12" cy="5" r="2" fill="#fff"/>312 <circle cx="12" cy="12" r="2" fill="#fff"/>313 <circle cx="12" cy="19" r="2" fill="#fff"/>314 </svg>315 </div>316 </div>317 </div>318 319 <!-- Gallery -->320 <div class="gallery">321 <div class="image-box">[IMG: Skechers slip-on walking shoes]</div>322 <div class="count-pill">1 of 11</div>323 <div class="heart-fab">324 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">325 <path d="M12 20s-7-4.4-7-9.5A4.5 4.5 0 0 1 9.5 6c1.5 0 2.5.9 2.5.9s1-0.9 2.5-0.9A4.5 4.5 0 0 1 19 10.5C19 15.6 12 20 12 20z" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round"/>326 </svg>327 </div>328 <div class="dots">329 <div class="dot active"></div>330 <div class="dot"></div>331 <div class="dot"></div>332 <div class="dot"></div>333 <div class="dot"></div>334 </div>335 </div>336 337 <!-- Content -->338 <div class="content">339 <div class="title">340 Skechers Women's Arch Comfort<br>341 Sneaker Walking Shoes Ladies<br>342 Comfortable Shoe343 </div>344 345 <div class="seller-row">346 <div class="seller-left">347 <div class="seller-avatar">348 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">349 <circle cx="12" cy="8" r="4" stroke="#cfcfcf" stroke-width="2"/>350 <path d="M4 20c2.5-4 13.5-4 16 0" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>351 </svg>352 </div>353 <div class="seller-info">354 <div class="seller-name">thecharmingturtlestore (21580)</div>355 <div class="seller-meta">99.6% positive feedback</div>356 </div>357 </div>358 <div class="seller-right">359 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">360 <path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>361 </svg>362 </div>363 </div>364 365 <div class="price-row">366 $37.99 <span class="shipping">+ $54.33 shipping</span>367 </div>368 369 <div class="delivery">370 Est. delivery <b>Thu, Nov 2 - Wed, Nov 22</b>371 </div>372 373 <div class="condition">Condition</div>374 <div class="condition-value">375 New with box376 <svg width="38" height="38" viewBox="0 0 24 24" fill="none">377 <circle cx="12" cy="12" r="10" stroke="#cfcfcf" stroke-width="2"/>378 <path d="M12 8v8M12 6h0.01" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>379 </svg>380 </div>381 382 <div class="dropdown">383 <div><span class="label">Color:</span> <span class="value">Select</span></div>384 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">385 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>386 </svg>387 </div>388 389 <div class="dropdown">390 <div><span class="label">Size:</span> <span class="value">Select</span></div>391 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">392 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>393 </svg>394 </div>395 </div>396 397 <!-- Bottom Navigation -->398 <div class="bottom-nav">399 <div class="nav-item">400 <div class="icon">401 <svg width="72" height="72" viewBox="0 0 24 24" fill="none">402 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z" stroke="#cfcfcf" stroke-width="2" stroke-linejoin="round"/>403 <path d="M9 21v-6h6v6" stroke="#cfcfcf" stroke-width="2"/>404 </svg>405 </div>406 <div>Home</div>407 </div>408 <div class="nav-item">409 <div class="icon">410 <svg width="72" height="72" viewBox="0 0 24 24" fill="none">411 <circle cx="12" cy="8" r="4" stroke="#cfcfcf" stroke-width="2"/>412 <path d="M4 21c2.5-5 13.5-5 16 0" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>413 </svg>414 </div>415 <div>My eBay</div>416 </div>417 <div class="nav-item active">418 <div class="icon">419 <svg width="72" height="72" viewBox="0 0 24 24" fill="none">420 <circle cx="11" cy="11" r="6" stroke="#87a9ff" stroke-width="2"/>421 <path d="M20 20l-4-4" stroke="#87a9ff" stroke-width="2" stroke-linecap="round"/>422 </svg>423 </div>424 <div>Search</div>425 </div>426 <div class="nav-item" style="position: relative;">427 <div class="icon" style="position: relative;">428 <svg width="72" height="72" viewBox="0 0 24 24" fill="none">429 <path d="M6 9a6 6 0 0 1 12 0v5a3 3 0 0 0 1 2H5a3 3 0 0 0 1-2V9z" stroke="#cfcfcf" stroke-width="2"/>430 <path d="M10 21h4" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>431 </svg>432 <div class="badge">1</div>433 </div>434 <div>Inbox</div>435 </div>436 <div class="nav-item">437 <div class="icon">438 <svg width="72" height="72" viewBox="0 0 24 24" fill="none">439 <path d="M20 7l-9 9H5v-6l9-9 6 6z" stroke="#cfcfcf" stroke-width="2" stroke-linejoin="round"/>440 <circle cx="7" cy="16" r="1.5" fill="#cfcfcf"/>441 </svg>442 </div>443 <div>Selling</div>444 </div>445 </div>446 447</div>448</body>449</html>