GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile Item Page 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: #000000;14 color: #FFFFFF;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 }17 18 /* Header */19 .header {20 position: relative;21 height: 140px;22 padding: 40px 36px 0 36px;23 display: flex;24 align-items: center;25 gap: 24px;26 }27 .header-title {28 font-size: 48px;29 font-weight: 700;30 letter-spacing: 0.2px;31 }32 .header-actions {33 margin-left: auto;34 display: flex;35 gap: 24px;36 }37 .circle-icon {38 width: 92px;39 height: 92px;40 background: #2F2F2F;41 border-radius: 50%;42 display: inline-flex;43 justify-content: center;44 align-items: center;45 }46 .icon {47 width: 44px;48 height: 44px;49 fill: none;50 stroke: #FFFFFF;51 stroke-width: 4;52 }53 .back {54 width: 60px;55 height: 60px;56 }57 58 /* Hero image area */59 .hero {60 width: 920px;61 height: 690px;62 background: #FFFFFF;63 margin: 40px auto 20px auto;64 position: relative;65 border-radius: 8px;66 }67 .hero .img {68 position: absolute;69 left: 60px;70 top: 110px;71 width: 800px;72 height: 470px;73 background: #E0E0E0;74 border: 1px solid #BDBDBD;75 display: flex;76 justify-content: center;77 align-items: center;78 color: #757575;79 font-size: 34px;80 border-radius: 4px;81 }82 .pill {83 position: absolute;84 right: -10px;85 top: 18px;86 background: #6F6F6F;87 color: #000;88 border-radius: 28px;89 padding: 16px 22px;90 font-size: 36px;91 font-weight: 700;92 color: #FFFFFF;93 }94 .heart-fab {95 position: absolute;96 right: -30px;97 bottom: 40px;98 width: 120px;99 height: 120px;100 background: #2F2F2F;101 border-radius: 50%;102 display: flex;103 justify-content: center;104 align-items: center;105 }106 .heart-icon {107 width: 56px;108 height: 56px;109 fill: none;110 stroke: #FFFFFF;111 stroke-width: 5;112 }113 114 /* Thumbnails */115 .thumbs {116 width: 100%;117 padding: 24px 40px;118 display: flex;119 gap: 28px;120 box-sizing: border-box;121 align-items: center;122 }123 .thumb {124 width: 200px;125 height: 180px;126 background: #141414;127 border-radius: 26px;128 padding: 20px;129 box-sizing: border-box;130 display: flex;131 justify-content: center;132 align-items: center;133 border: 2px solid #2A2A2A;134 }135 .thumb.selected {136 border: 6px solid #FFFFFF;137 }138 .thumb .img {139 width: 100%;140 height: 100%;141 background: #E0E0E0;142 border: 1px solid #BDBDBD;143 display: flex;144 justify-content: center;145 align-items: center;146 color: #757575;147 font-size: 28px;148 border-radius: 16px;149 }150 151 /* Title and seller */152 .content {153 padding: 8px 40px 0 40px;154 }155 .title {156 font-size: 52px;157 font-weight: 800;158 line-height: 1.18;159 margin: 20px 0 18px 0;160 }161 .seller-row {162 display: flex;163 align-items: center;164 gap: 18px;165 margin-bottom: 8px;166 }167 .brand-script {168 font-style: italic;169 font-size: 36px;170 opacity: 0.85;171 }172 .seller-name {173 font-size: 34px;174 font-weight: 600;175 }176 .feedback {177 font-size: 32px;178 color: #BDBDBD;179 margin: 6px 0 26px 0;180 }181 .chev-right {182 margin-left: auto;183 width: 44px;184 height: 44px;185 stroke: #FFFFFF;186 stroke-width: 5;187 fill: none;188 }189 190 /* Pricing */191 .price {192 font-size: 72px;193 font-weight: 900;194 margin: 16px 0;195 }196 .list-and-save {197 font-size: 34px;198 display: flex;199 gap: 16px;200 align-items: baseline;201 }202 .list-price {203 color: #BDBDBD;204 text-decoration: line-through;205 }206 .save {207 color: #FF6B8A;208 font-weight: 700;209 }210 211 /* Condition */212 .row {213 display: flex;214 align-items: center;215 gap: 18px;216 margin-top: 30px;217 }218 .label {219 color: #9E9E9E;220 font-size: 36px;221 min-width: 170px;222 }223 .value {224 font-size: 36px;225 }226 .info-icon {227 width: 36px;228 height: 36px;229 stroke: #FFFFFF;230 stroke-width: 4;231 fill: none;232 }233 234 /* Size selector */235 .selector {236 margin-top: 26px;237 width: 1000px;238 height: 130px;239 border: 2px solid #3A3A3A;240 border-radius: 26px;241 display: flex;242 align-items: center;243 justify-content: space-between;244 padding: 0 36px;245 box-sizing: border-box;246 background: #121212;247 }248 .selector .text {249 font-size: 40px;250 }251 .selector .strong {252 font-weight: 800;253 }254 .chev-down {255 width: 40px;256 height: 40px;257 stroke: #FFFFFF;258 stroke-width: 5;259 fill: none;260 }261 262 /* Bottom navigation */263 .bottom-nav {264 position: absolute;265 bottom: 0;266 left: 0;267 width: 1080px;268 height: 210px;269 background: #121212;270 border-top: 1px solid #222;271 display: flex;272 align-items: center;273 justify-content: space-around;274 }275 .nav-item {276 width: 180px;277 display: flex;278 flex-direction: column;279 align-items: center;280 gap: 18px;281 color: #FFFFFF;282 font-size: 30px;283 }284 .nav-item .nav-icon {285 width: 60px;286 height: 60px;287 stroke: #FFFFFF;288 stroke-width: 5;289 fill: none;290 opacity: 0.94;291 }292 .nav-item.active .nav-icon {293 stroke: #3A75FF;294 }295 .nav-item.active .label {296 color: #3A75FF;297 font-weight: 700;298 }299 .home-indicator {300 position: absolute;301 bottom: 220px;302 left: 50%;303 transform: translateX(-50%);304 width: 360px;305 height: 14px;306 background: #FFFFFF;307 opacity: 0.9;308 border-radius: 10px;309 }310</style>311</head>312<body>313<div id="render-target">314 315 <!-- Header -->316 <div class="header">317 <svg class="back" viewBox="0 0 24 24">318 <path d="M15 4 L7 12 L15 20" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>319 </svg>320 <div class="header-title">Item</div>321 <div class="header-actions">322 <div class="circle-icon">323 <svg class="icon" viewBox="0 0 24 24">324 <circle cx="11" cy="11" r="7"/>325 <line x1="20" y1="20" x2="16" y2="16"/>326 </svg>327 </div>328 <div class="circle-icon">329 <svg class="icon" viewBox="0 0 24 24">330 <path d="M6 8 H20 L19 18 H7 Z"/>331 <circle cx="9" cy="20" r="1.5"/>332 <circle cx="17" cy="20" r="1.5"/>333 </svg>334 </div>335 <div class="circle-icon">336 <svg class="icon" viewBox="0 0 24 24">337 <circle cx="6" cy="12" r="3"/>338 <circle cx="18" cy="6" r="3"/>339 <circle cx="18" cy="18" r="3"/>340 <line x1="8.5" y1="10.5" x2="15.5" y2="7.5"/>341 <line x1="8.5" y1="13.5" x2="15.5" y2="16.5"/>342 </svg>343 </div>344 <div class="circle-icon">345 <svg class="icon" viewBox="0 0 24 24">346 <circle cx="12" cy="5" r="2.2" fill="#FFFFFF" stroke="none"/>347 <circle cx="12" cy="12" r="2.2" fill="#FFFFFF" stroke="none"/>348 <circle cx="12" cy="19" r="2.2" fill="#FFFFFF" stroke="none"/>349 </svg>350 </div>351 </div>352 </div>353 354 <!-- Main product image -->355 <div class="hero">356 <div class="pill">1 of 5</div>357 <div class="img">[IMG: Brown Wallabee Shoe]</div>358 <div class="heart-fab">359 <svg class="heart-icon" viewBox="0 0 24 24">360 <path d="M12 21 C12 21 5 15 5 10 A4 4 0 0 1 12 10 A4 4 0 0 1 19 10 C19 15 12 21 12 21 Z"/>361 </svg>362 </div>363 </div>364 365 <!-- Thumbnails -->366 <div class="thumbs">367 <div class="thumb selected">368 <div class="img">[IMG: Shoe]</div>369 </div>370 <div class="thumb">371 <div class="img">[IMG: Shoe Angle]</div>372 </div>373 <div class="thumb">374 <div class="img">[IMG: Front]</div>375 </div>376 <div class="thumb">377 <div class="img">[IMG: Side]</div>378 </div>379 <div class="thumb">380 <div class="img">[IMG: Back]</div>381 </div>382 </div>383 384 <!-- Content -->385 <div class="content">386 <div class="title">Clarks Originals Womens Wallabee Moccasin Cup Brown Leather Shoes</div>387 388 <div class="seller-row">389 <div class="brand-script">Clarks</div>390 <div class="seller-name">CLARKS OFFICIAL STORE (6435)</div>391 <svg class="chev-right" viewBox="0 0 24 24">392 <path d="M9 4 L17 12 L9 20" stroke-linecap="round" stroke-linejoin="round"/>393 </svg>394 </div>395 <div class="feedback">98.6% positive feedback</div>396 397 <div class="price">$74.99</div>398 <div class="list-and-save">399 <div class="list-price">List price $160.00</div>400 <div class="save">Save $85.01 (53% off)</div>401 </div>402 403 <div class="row">404 <div class="label">Condition</div>405 <div class="value">New with box</div>406 <svg class="info-icon" viewBox="0 0 24 24">407 <circle cx="12" cy="12" r="9"/>408 <line x1="12" y1="8" x2="12" y2="8"/>409 <line x1="12" y1="11" x2="12" y2="17"/>410 </svg>411 </div>412 413 <div class="selector">414 <div class="text">US Shoe Size: <span class="strong">7</span></div>415 <svg class="chev-down" viewBox="0 0 24 24">416 <path d="M6 9 L12 15 L18 9" stroke-linecap="round" stroke-linejoin="round"/>417 </svg>418 </div>419 </div>420 421 <!-- iOS/Android home indicator mock -->422 <div class="home-indicator"></div>423 424 <!-- Bottom Navigation -->425 <div class="bottom-nav">426 <div class="nav-item">427 <svg class="nav-icon" viewBox="0 0 24 24">428 <path d="M4 12 L12 5 L20 12 V20 H4 Z" stroke-linejoin="round"/>429 </svg>430 <div class="label">Home</div>431 </div>432 <div class="nav-item">433 <svg class="nav-icon" viewBox="0 0 24 24">434 <circle cx="12" cy="8" r="4"/>435 <path d="M4 21 C4 16 8 14 12 14 C16 14 20 16 20 21"/>436 </svg>437 <div class="label">My eBay</div>438 </div>439 <div class="nav-item active">440 <svg class="nav-icon" viewBox="0 0 24 24">441 <circle cx="11" cy="11" r="7"/>442 <line x1="20" y1="20" x2="16" y2="16"/>443 </svg>444 <div class="label">Search</div>445 </div>446 <div class="nav-item">447 <svg class="nav-icon" viewBox="0 0 24 24">448 <path d="M6 8 H18 V19 H6 Z"/>449 <path d="M10 6 V5 A2 2 0 0 1 14 5 V6"/>450 </svg>451 <div class="label">Inbox</div>452 </div>453 <div class="nav-item">454 <svg class="nav-icon" viewBox="0 0 24 24">455 <path d="M7 4 H17 L20 8 V20 H4 V4 Z"/>456 <circle cx="16" cy="9" r="2"/>457 </svg>458 <div class="label">Selling</div>459 </div>460 </div>461 462</div>463</body>464</html>