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 UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;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: 84px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 36px;29 box-sizing: border-box;30 color: #FFFFFF;31 font-size: 30px;32 opacity: 0.95;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 24px;38 }39 .status-icon {40 width: 34px;41 height: 34px;42 border-radius: 8px;43 background: #ffffff22;44 }45 46 /* Header */47 .header {48 position: absolute;49 top: 84px;50 left: 0;51 width: 1080px;52 height: 120px;53 display: flex;54 align-items: center;55 padding: 0 30px;56 box-sizing: border-box;57 }58 .back-btn {59 width: 84px;60 height: 84px;61 display: flex;62 align-items: center;63 justify-content: center;64 }65 .header-title {66 font-size: 52px;67 font-weight: 700;68 margin-left: 6px;69 }70 .header-actions {71 margin-left: auto;72 display: flex;73 gap: 24px;74 }75 .circle-icon {76 width: 96px;77 height: 96px;78 border-radius: 48px;79 background: #2a2a2a;80 display: flex;81 align-items: center;82 justify-content: center;83 }84 .circle-icon svg { width: 52px; height: 52px; }85 86 /* Image area */87 .image-wrapper {88 position: absolute;89 top: 220px;90 left: 30px;91 width: 1020px;92 height: 1040px;93 background: #111111;94 border-radius: 8px;95 padding: 24px;96 box-sizing: border-box;97 }98 .product-image {99 width: 100%;100 height: 100%;101 background: #E0E0E0;102 border: 1px solid #BDBDBD;103 display: flex;104 align-items: center;105 justify-content: center;106 color: #757575;107 font-size: 34px;108 text-align: center;109 }110 .image-count {111 position: absolute;112 top: 18px;113 right: 18px;114 background: #E5E7EB;115 color: #111;116 font-weight: 700;117 font-size: 34px;118 padding: 12px 22px;119 border-radius: 32px;120 }121 .like-pill {122 position: absolute;123 right: 42px;124 bottom: 42px;125 background: #2a2a2a;126 color: #fff;127 border-radius: 40px;128 padding: 14px 24px;129 display: flex;130 align-items: center;131 gap: 12px;132 font-size: 34px;133 box-shadow: 0 4px 10px rgba(0,0,0,0.45);134 }135 .like-pill svg { width: 38px; height: 38px; }136 137 /* Dots indicator */138 .dots {139 position: absolute;140 top: 1288px;141 left: 0;142 width: 1080px;143 display: flex;144 justify-content: center;145 gap: 16px;146 }147 .dot {148 width: 16px;149 height: 16px;150 background: #777;151 border-radius: 8px;152 opacity: 0.6;153 }154 .dot.active { opacity: 1; }155 156 /* Title */157 .title {158 position: absolute;159 top: 1336px;160 left: 36px;161 width: 1008px;162 font-size: 52px;163 font-weight: 800;164 line-height: 1.25;165 color: #FFFFFF;166 }167 168 /* Seller row */169 .seller-row {170 position: absolute;171 top: 1586px;172 left: 36px;173 width: 1008px;174 display: flex;175 align-items: center;176 justify-content: space-between;177 }178 .seller-left {179 display: flex;180 align-items: center;181 gap: 24px;182 }183 .seller-avatar {184 width: 98px;185 height: 98px;186 border-radius: 49px;187 background: #E0E0E0;188 border: 1px solid #BDBDBD;189 display: flex;190 align-items: center;191 justify-content: center;192 color: #757575;193 font-size: 22px;194 }195 .seller-text {196 display: flex;197 flex-direction: column;198 gap: 6px;199 }200 .seller-name {201 font-size: 38px;202 font-weight: 700;203 }204 .seller-sub {205 font-size: 30px;206 color: #BBBBBB;207 }208 .chevron-right {209 width: 48px;210 height: 48px;211 }212 213 /* Price section */214 .price-section {215 position: absolute;216 top: 1718px;217 left: 36px;218 width: 1008px;219 display: flex;220 flex-direction: column;221 gap: 12px;222 }223 .price-line {224 font-size: 64px;225 font-weight: 800;226 }227 .shipping {228 font-size: 36px;229 color: #BDBDBD;230 }231 .strike {232 font-size: 32px;233 color: #BDBDBD;234 text-decoration: line-through;235 margin-right: 8px;236 }237 .save {238 font-size: 32px;239 color: #FF4D4D;240 font-weight: 700;241 }242 243 /* Bottom nav */244 .bottom-nav {245 position: absolute;246 bottom: 84px;247 left: 0;248 width: 1080px;249 height: 160px;250 background: #1b1b1d;251 display: flex;252 align-items: center;253 justify-content: space-around;254 border-top: 1px solid #2c2c2c;255 }256 .nav-item {257 width: 180px;258 height: 120px;259 display: flex;260 flex-direction: column;261 align-items: center;262 justify-content: center;263 gap: 12px;264 color: #BDBDBD;265 font-size: 26px;266 }267 .nav-item.active { color: #3b82f6; }268 .nav-item svg { width: 56px; height: 56px; }269 .search-ring {270 width: 84px; height: 84px; border-radius: 42px; border: 6px solid #3b82f6; display: flex; align-items: center; justify-content: center;271 }272 273 /* Home indicator */274 .home-indicator {275 position: absolute;276 bottom: 24px;277 left: 50%;278 transform: translateX(-50%);279 width: 360px;280 height: 16px;281 background: #ffffff;282 border-radius: 8px;283 opacity: 0.9;284 }285</style>286</head>287<body>288<div id="render-target">289 290 <!-- Status bar -->291 <div class="status-bar">292 <div>9:26</div>293 <div class="status-right">294 <div class="status-icon"></div>295 <div class="status-icon"></div>296 <div class="status-icon"></div>297 </div>298 </div>299 300 <!-- Header -->301 <div class="header">302 <div class="back-btn">303 <svg viewBox="0 0 24 24">304 <path d="M15 6 L9 12 L15 18" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>305 </svg>306 </div>307 <div class="header-title">Item</div>308 <div class="header-actions">309 <div class="circle-icon">310 <svg viewBox="0 0 24 24">311 <circle cx="11" cy="11" r="6" stroke="#fff" stroke-width="2" fill="none"/>312 <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#fff" stroke-width="2" stroke-linecap="round"/>313 </svg>314 </div>315 <div class="circle-icon">316 <svg viewBox="0 0 24 24">317 <path d="M6 6h14l-2 9H8L6 6z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>318 <circle cx="9" cy="20" r="1.6" fill="#fff"/>319 <circle cx="17" cy="20" r="1.6" fill="#fff"/>320 </svg>321 </div>322 <div class="circle-icon">323 <svg viewBox="0 0 24 24">324 <path d="M4 12v-6l8-2v8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>325 <path d="M12 14l8-4v8l-8 4v-8z" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round"/>326 </svg>327 </div>328 <div class="circle-icon">329 <svg viewBox="0 0 24 24">330 <circle cx="12" cy="5" r="2" fill="#fff"/>331 <circle cx="12" cy="12" r="2" fill="#fff"/>332 <circle cx="12" cy="19" r="2" fill="#fff"/>333 </svg>334 </div>335 </div>336 </div>337 338 <!-- Product image -->339 <div class="image-wrapper">340 <div class="product-image">[IMG: Cordless Drill product photo]</div>341 <div class="image-count">1 of 7</div>342 <div class="like-pill">343 <span>102</span>344 <svg viewBox="0 0 24 24">345 <path d="M12 21s-6.5-4.2-8.3-7.1C2.5 11.6 3.5 9 6.2 9c1.6 0 2.6 0.9 3.3 2 0.7-1.1 1.7-2 3.3-2 2.7 0 3.7 2.6 2.5 4.9C18.5 16.8 12 21 12 21z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>346 </svg>347 </div>348 </div>349 350 <!-- Dots -->351 <div class="dots">352 <div class="dot active"></div>353 <div class="dot"></div>354 <div class="dot"></div>355 <div class="dot"></div>356 <div class="dot"></div>357 </div>358 359 <!-- Title -->360 <div class="title">361 Cordless Drill Driver Kit, 20V MAX ELECTRIC SCREWDRIVER Compact Drill 13pcs Set362 </div>363 364 <!-- Seller row -->365 <div class="seller-row">366 <div class="seller-left">367 <div class="seller-avatar">[IMG]</div>368 <div class="seller-text">369 <div class="seller-name">GlobalSuppliesUSA (7429)</div>370 <div class="seller-sub">98.1% positive feedback</div>371 </div>372 </div>373 <svg class="chevron-right" viewBox="0 0 24 24">374 <path d="M9 6 L15 12 L9 18" stroke="#bbb" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>375 </svg>376 </div>377 378 <!-- Price -->379 <div class="price-section">380 <div class="price-line">$28.90/ea <span class="shipping"> + $82.33 shipping</span></div>381 <div><span class="strike">Was $34.00</span><span class="save">Save $5.10 (15% off)</span></div>382 </div>383 384 <!-- Bottom navigation -->385 <div class="bottom-nav">386 <div class="nav-item">387 <svg viewBox="0 0 24 24">388 <path d="M4 10l8-6 8 6v8H4z" fill="none" stroke="#BDBDBD" stroke-width="2" stroke-linejoin="round"/>389 </svg>390 <div>Home</div>391 </div>392 <div class="nav-item">393 <svg viewBox="0 0 24 24">394 <circle cx="12" cy="8" r="4" fill="none" stroke="#BDBDBD" stroke-width="2"/>395 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#BDBDBD" stroke-width="2"/>396 </svg>397 <div>My eBay</div>398 </div>399 <div class="nav-item active">400 <div class="search-ring">401 <svg viewBox="0 0 24 24">402 <circle cx="11" cy="11" r="6" stroke="#3b82f6" stroke-width="2" fill="none"/>403 <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>404 </svg>405 </div>406 <div>Search</div>407 </div>408 <div class="nav-item">409 <svg viewBox="0 0 24 24">410 <path d="M12 3l7 5v5c0 4-3 7-7 7s-7-3-7-7V8l7-5z" fill="none" stroke="#BDBDBD" stroke-width="2"/>411 </svg>412 <div>Inbox</div>413 </div>414 <div class="nav-item">415 <svg viewBox="0 0 24 24">416 <path d="M5 4h10l4 6-8 10-6-8z" fill="none" stroke="#BDBDBD" stroke-width="2" stroke-linejoin="round"/>417 <circle cx="14" cy="8" r="2" fill="#BDBDBD"/>418 </svg>419 <div>Selling</div>420 </div>421 </div>422 423 <!-- Home indicator -->424 <div class="home-indicator"></div>425 426</div>427</body>428</html>