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>Mobile UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #000000;15 color: #ffffff;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 height: 88px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #eaeaea;27 font-size: 36px;28 letter-spacing: 0.5px;29 }30 .status-icons {31 display: flex;32 gap: 22px;33 align-items: center;34 }35 .status-dot {36 width: 12px; height: 12px; background: #eaeaea; border-radius: 50%;37 }38 .battery {39 width: 44px; height: 22px; border: 3px solid #eaeaea; border-radius: 6px; position: relative;40 }41 .battery::after {42 content: "";43 position: absolute;44 right: -8px; top: 4px;45 width: 6px; height: 12px; background: #eaeaea; border-radius: 2px;46 }47 .battery .level {48 position: absolute; left: 3px; top: 3px; bottom: 3px; right: 10px;49 background: #eaeaea; border-radius: 3px;50 }51 52 /* Header / Nav */53 .header {54 position: relative;55 padding: 18px 36px 18px 24px;56 height: 132px;57 display: flex;58 align-items: center;59 gap: 24px;60 }61 .back-btn {62 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;63 }64 .header-title {65 font-size: 56px;66 font-weight: 700;67 }68 .header-actions {69 margin-left: auto;70 display: flex;71 gap: 16px;72 align-items: center;73 }74 .action-btn {75 width: 88px; height: 88px; border-radius: 50%;76 background: #242424;77 display: flex; align-items: center; justify-content: center;78 }79 .divider-pill {80 margin: 10px 36px 0 36px;81 height: 54px;82 background: #1a1a1a;83 border-radius: 18px;84 }85 86 /* Content sections */87 .section {88 padding: 36px;89 }90 .h1 {91 font-size: 58px;92 font-weight: 800;93 margin: 22px 0 28px;94 }95 .detail-list {96 margin-top: 8px;97 border-top: 1px solid #1e1e1e;98 }99 .row {100 display: flex;101 align-items: flex-start;102 padding: 34px 0;103 border-bottom: 1px solid #1e1e1e;104 position: relative;105 }106 .label {107 width: 420px;108 color: #bfbfbf;109 font-size: 38px;110 }111 .value {112 flex: 1;113 font-size: 44px;114 color: #ffffff;115 }116 .subtext {117 display: block;118 margin-top: 6px;119 font-size: 34px;120 color: #a4a4a4;121 }122 .pink { color: #ff6f91; font-weight: 700; }123 .chevron {124 position: absolute;125 right: 0;126 top: 44px;127 }128 129 .seller-desc {130 margin-top: 18px;131 padding: 0 36px 0 36px;132 }133 .desc-row {134 padding: 10px 0 30px 0;135 display: flex;136 align-items: center;137 justify-content: space-between;138 }139 .link {140 color: #cfe6ff;141 font-size: 42px;142 text-decoration: underline;143 }144 145 .more-like {146 padding: 40px 36px 0 36px;147 }148 .subtle {149 color: #bfbfbf;150 font-size: 36px;151 margin-top: 6px;152 }153 .see-all {154 margin-left: auto;155 border: 2px solid #ffffff;156 color: #ffffff;157 padding: 18px 28px;158 border-radius: 38px;159 display: inline-flex;160 align-items: center;161 gap: 14px;162 font-size: 40px;163 }164 165 /* Horizontal product list */166 .carousel {167 margin-top: 22px;168 padding-left: 36px;169 padding-right: 36px;170 display: flex;171 gap: 28px;172 overflow: hidden;173 }174 .card {175 width: 324px;176 }177 .img {178 width: 324px; height: 324px;179 background: #E0E0E0;180 border: 1px solid #BDBDBD;181 border-radius: 24px;182 display: flex; align-items: center; justify-content: center;183 color: #757575;184 font-size: 30px;185 position: relative;186 overflow: hidden;187 }188 .heart {189 position: absolute; right: 12px; top: 12px;190 width: 56px; height: 56px; border-radius: 50%;191 background: rgba(0,0,0,0.75);192 display: flex; align-items: center; justify-content: center;193 }194 .title {195 margin-top: 14px;196 font-size: 36px;197 line-height: 44px;198 color: #ffffff;199 }200 201 /* Bottom tab bar */202 .tabbar {203 position: absolute;204 left: 0; right: 0; bottom: 36px;205 height: 168px;206 background: #0a0a0a;207 display: flex;208 align-items: center;209 justify-content: space-around;210 border-top: 1px solid #161616;211 }212 .tab {213 width: 180px;214 display: flex; flex-direction: column; align-items: center; justify-content: center;215 gap: 12px;216 color: #bfbfbf;217 font-size: 30px;218 }219 .tab.active { color: #5aa9ff; }220 .tab .icon {221 width: 64px; height: 64px;222 display: flex; align-items: center; justify-content: center;223 border-radius: 50%;224 }225 .tab.active .icon {226 outline: 3px solid #2e5fff;227 outline-offset: 0;228 border-radius: 50%;229 }230 231 /* Home indicator */232 .home-indicator {233 position: absolute;234 left: 50%;235 transform: translateX(-50%);236 bottom: 8px;237 width: 240px; height: 8px;238 border-radius: 6px; background: #e6e6e6;239 opacity: 0.85;240 }241</style>242</head>243<body>244<div id="render-target">245 246 <!-- Status Bar -->247 <div class="status-bar">248 <div>9:26</div>249 <div class="status-icons">250 <div class="status-dot"></div>251 <div class="status-dot"></div>252 <div class="battery"><div class="level"></div></div>253 </div>254 </div>255 256 <!-- Header -->257 <div class="header">258 <div class="back-btn">259 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">260 <path d="M14.5 5L7.5 12l7 7" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>261 </svg>262 </div>263 <div class="header-title">Item</div>264 <div class="header-actions">265 <div class="action-btn" title="Search">266 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">267 <circle cx="11" cy="11" r="6.5" stroke="#fff" stroke-width="2"/>268 <path d="M16.5 16.5L21 21" stroke="#fff" stroke-width="2" stroke-linecap="round"/>269 </svg>270 </div>271 <div class="action-btn" title="Cart">272 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">273 <path d="M3 5h2l2.5 10h9.5l2-7H7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>274 <circle cx="10" cy="19" r="1.6" fill="#fff"/>275 <circle cx="17" cy="19" r="1.6" fill="#fff"/>276 </svg>277 </div>278 <div class="action-btn" title="Share">279 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">280 <circle cx="6" cy="12" r="2" stroke="#fff" stroke-width="2"/>281 <circle cx="18" cy="6" r="2" stroke="#fff" stroke-width="2"/>282 <circle cx="18" cy="18" r="2" stroke="#fff" stroke-width="2"/>283 <path d="M8 12l8-6M8 12l8 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>284 </svg>285 </div>286 <div class="action-btn" title="More">287 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff">288 <circle cx="5" cy="12" r="2"/>289 <circle cx="12" cy="12" r="2"/>290 <circle cx="19" cy="12" r="2"/>291 </svg>292 </div>293 </div>294 </div>295 296 <div class="divider-pill"></div>297 298 <!-- About this item -->299 <div class="section">300 <div class="h1">About this item</div>301 <div class="detail-list">302 <div class="row">303 <div class="label">Condition</div>304 <div class="value">New</div>305 </div>306 <div class="row">307 <div class="label">Time left</div>308 <div class="value">1d 9h</div>309 </div>310 <div class="row">311 <div class="label">Quantity</div>312 <div class="value">313 <span class="pink">Almost gone</span>314 <span class="subtext">92 sold</span>315 </div>316 <div class="chevron">317 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">318 <path d="M9 5l7 7-7 7" stroke="#9e9e9e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>319 </svg>320 </div>321 </div>322 <div class="row">323 <div class="label">Item Number</div>324 <div class="value">404012681761</div>325 </div>326 <div class="row" style="border-bottom: none;">327 <div class="label">Number of Items in Set</div>328 <div class="value">13</div>329 </div>330 </div>331 </div>332 333 <!-- Item description -->334 <div class="section">335 <div class="h1">Item description from the seller</div>336 </div>337 <div class="seller-desc">338 <div class="desc-row">339 <div class="link">See full description</div>340 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">341 <path d="M9 5l7 7-7 7" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>342 </svg>343 </div>344 </div>345 346 <!-- More like this -->347 <div class="more-like">348 <div style="display:flex; align-items:center;">349 <div>350 <div class="h1" style="margin:0;">More like this</div>351 <div class="subtle">Sponsored</div>352 </div>353 <div class="see-all" style="margin-left:auto;">354 See all355 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">356 <path d="M9 5l7 7-7 7" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>357 </svg>358 </div>359 </div>360 </div>361 362 <!-- Product carousel -->363 <div class="carousel">364 <div class="card">365 <div class="img">[IMG: Cordless Drill Kit]366 <div class="heart">367 <svg width="24" height="24" viewBox="0 0 24 24" fill="none">368 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" stroke="#fff" stroke-width="2" fill="none"/>369 </svg>370 </div>371 </div>372 <div class="title">98VF Cordless Electric Screwdriver Rechargeable Drill Driver Power Tool Bit ...</div>373 </div>374 375 <div class="card">376 <div class="img">[IMG: Cordless Drill Kit]377 <div class="heart">378 <svg width="24" height="24" viewBox="0 0 24 24" fill="none">379 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" stroke="#fff" stroke-width="2" fill="none"/>380 </svg>381 </div>382 </div>383 <div class="title">98VF Cordless Electric Screwdriver Rechargeable Drill Driver Power Tool Bit ...</div>384 </div>385 386 <div class="card">387 <div class="img">[IMG: Power Drill Listing]</div>388 <div class="title">Milwaukee M18 Fuel 18V Cordless Hammer Drill. Used. Tool Only.</div>389 </div>390 </div>391 392 <!-- Bottom Tab Bar -->393 <div class="tabbar">394 <div class="tab">395 <div class="icon">396 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">397 <path d="M3 10l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" stroke="#bfbfbf" stroke-width="2" fill="none" stroke-linejoin="round"/>398 </svg>399 </div>400 Home401 </div>402 <div class="tab">403 <div class="icon">404 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">405 <circle cx="12" cy="7" r="4" stroke="#bfbfbf" stroke-width="2"/>406 <path d="M4 21c1.5-4 6-6 8-6s6.5 2 8 6" stroke="#bfbfbf" stroke-width="2" fill="none" stroke-linecap="round"/>407 </svg>408 </div>409 My eBay410 </div>411 <div class="tab active">412 <div class="icon">413 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">414 <circle cx="11" cy="11" r="6.5" stroke="#5aa9ff" stroke-width="2"/>415 <path d="M16.5 16.5L21 21" stroke="#5aa9ff" stroke-width="2" stroke-linecap="round"/>416 </svg>417 </div>418 Search419 </div>420 <div class="tab">421 <div class="icon">422 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">423 <path d="M12 22a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3zM6 15h12l1-6H5l1 6z" stroke="#bfbfbf" stroke-width="2" fill="none" stroke-linejoin="round"/>424 </svg>425 </div>426 Inbox427 </div>428 <div class="tab">429 <div class="icon">430 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">431 <path d="M3 7a2 2 0 0 1 2-2h10l4 4v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" stroke="#bfbfbf" stroke-width="2" fill="none"/>432 <circle cx="8.5" cy="13.5" r="2" stroke="#bfbfbf" stroke-width="2"/>433 </svg>434 </div>435 Selling436 </div>437 </div>438 439 <div class="home-indicator"></div>440</div>441</body>442</html>