GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>eBay Mobile UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0d0d0f;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 100%;23 height: 120px;24 background: #000;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 34px;29 font-size: 36px;30 letter-spacing: 0.5px;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 24px;36 font-size: 30px;37 color: #d9d9d9;38 }39 .battery {40 display: inline-flex;41 align-items: center;42 gap: 10px;43 }44 .battery svg { width: 50px; height: 28px; }45 46 /* App area */47 .app {48 position: absolute;49 top: 120px;50 left: 0;51 width: 100%;52 height: calc(100% - 120px);53 }54 55 /* Top brand bar */56 .brand-bar {57 height: 140px;58 display: flex;59 align-items: center;60 justify-content: space-between;61 padding: 0 34px;62 background: #0d0d0f;63 }64 .ebay-logo {65 font-weight: 800;66 font-size: 82px;67 line-height: 1;68 letter-spacing: 1px;69 }70 .ebay-logo span:nth-child(1){ color:#0064D2; } /* e */71 .ebay-logo span:nth-child(2){ color:#E53238; } /* b */72 .ebay-logo span:nth-child(3){ color:#F5AF02; } /* a */73 .ebay-logo span:nth-child(4){ color:#86B817; } /* y */74 75 .top-actions {76 display: flex;77 gap: 26px;78 }79 .circle-btn {80 width: 108px;81 height: 108px;82 border-radius: 54px;83 background: #1a1a1d;84 border: 1px solid #2a2a2d;85 display: flex;86 align-items: center;87 justify-content: center;88 }89 .circle-btn svg { width: 54px; height: 54px; fill: none; stroke: #f5f5f5; stroke-width: 4; }90 91 /* Yellow hero cards */92 .hero {93 background: #f6d674;94 padding: 34px;95 padding-top: 28px;96 height: 500px;97 box-sizing: border-box;98 }99 .hero-row {100 display: flex;101 gap: 28px;102 height: 100%;103 }104 .hero-card {105 flex: 1;106 background: #f1c95e;107 border-radius: 28px;108 position: relative;109 padding: 32px;110 box-sizing: border-box;111 color: #3b2a00;112 }113 .hero-title {114 font-size: 54px;115 font-weight: 800;116 }117 .hero-arrow {118 position: absolute;119 right: 30px;120 top: 30px;121 width: 52px;122 height: 52px;123 border-radius: 26px;124 background: rgba(0,0,0,0.08);125 display: flex;126 align-items: center;127 justify-content: center;128 color: #3b2a00;129 font-size: 40px;130 }131 .hero-img {132 position: absolute;133 left: 32px;134 right: 32px;135 bottom: 30px;136 height: 200px;137 background: #E0E0E0;138 border: 1px solid #BDBDBD;139 display: flex;140 align-items: center;141 justify-content: center;142 color: #757575;143 font-size: 34px;144 border-radius: 14px;145 }146 147 /* Popular Destinations */148 .section {149 padding: 32px 34px;150 }151 .section-title {152 font-size: 64px;153 font-weight: 800;154 margin-bottom: 24px;155 }156 .grid {157 display: grid;158 grid-template-columns: repeat(3, 1fr);159 gap: 26px 26px;160 }161 .cat {162 text-align: center;163 }164 .circle {165 width: 300px;166 height: 300px;167 border-radius: 150px;168 margin: 0 auto 24px auto;169 display: flex;170 align-items: center;171 justify-content: center;172 position: relative;173 color: #2a2a2a;174 font-weight: 600;175 font-size: 30px;176 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);177 }178 .circle.yellow { background: #f4c84c; }179 .circle.orange { background: #e68945; }180 .circle .img {181 width: 200px;182 height: 160px;183 background: #E0E0E0;184 border: 1px solid #BDBDBD;185 display: flex;186 align-items: center;187 justify-content: center;188 color: #757575;189 border-radius: 10px;190 }191 .cat-label {192 font-size: 40px;193 color: #ffffff;194 line-height: 1.2;195 }196 197 /* Daily Deals */198 .deals-header {199 display: flex;200 align-items: center;201 justify-content: space-between;202 margin-top: 10px;203 margin-bottom: 18px;204 }205 .deals-title {206 font-size: 64px;207 font-weight: 800;208 }209 .see-all {210 font-size: 40px;211 color: #dcdcdc;212 text-decoration: underline;213 }214 .deals-row {215 display: flex;216 gap: 24px;217 }218 .deal-card {219 width: 332px;220 background: #121214;221 border-radius: 22px;222 padding: 18px;223 box-sizing: border-box;224 border: 1px solid #2a2a2d;225 }226 .deal-img {227 width: 100%;228 height: 220px;229 background: #E0E0E0;230 border: 1px solid #BDBDBD;231 border-radius: 12px;232 color: #757575;233 display: flex;234 align-items: center;235 justify-content: center;236 font-size: 30px;237 }238 .deal-title {239 font-size: 34px;240 margin-top: 16px;241 color: #d9d9d9;242 }243 244 /* Bottom navigation */245 .bottom-nav {246 position: absolute;247 bottom: 0;248 left: 0;249 width: 100%;250 height: 176px;251 background: #0f0f12;252 border-top: 1px solid #1e1e22;253 display: flex;254 align-items: center;255 justify-content: space-around;256 padding-top: 18px;257 box-sizing: border-box;258 }259 .nav-item {260 width: 160px;261 text-align: center;262 color: #bfbfbf;263 font-size: 34px;264 }265 .nav-item.active { color: #4aa8ff; }266 .nav-icon {267 width: 72px;268 height: 72px;269 margin: 0 auto 12px auto;270 }271 .nav-icon svg {272 width: 100%;273 height: 100%;274 stroke: currentColor;275 fill: none;276 stroke-width: 4;277 }278</style>279</head>280<body>281<div id="render-target">282 283 <!-- Status bar -->284 <div class="status-bar">285 <div>10:51</div>286 <div class="status-right">287 <span>▴</span>288 <div class="battery">289 <svg viewBox="0 0 50 28">290 <rect x="1" y="3" width="42" height="22" rx="4" ry="4" stroke="#d9d9d9" fill="none" stroke-width="3"></rect>291 <rect x="4" y="6" width="34" height="16" fill="#d9d9d9"></rect>292 <rect x="44" y="10" width="5" height="8" fill="#d9d9d9"></rect>293 </svg>294 <span>100%</span>295 </div>296 </div>297 </div>298 299 <div class="app">300 <!-- Brand bar with actions -->301 <div class="brand-bar">302 <div class="ebay-logo">303 <span>e</span><span>b</span><span>a</span><span>y</span>304 </div>305 <div class="top-actions">306 <div class="circle-btn" title="Search">307 <svg viewBox="0 0 24 24">308 <circle cx="10" cy="10" r="6"></circle>309 <line x1="14.5" y1="14.5" x2="21" y2="21"></line>310 </svg>311 </div>312 <div class="circle-btn" title="Cart">313 <svg viewBox="0 0 24 24">314 <polyline points="2,3 6,3 7.5,14 19,14 22,6 6,6" ></polyline>315 <circle cx="9" cy="20" r="2"></circle>316 <circle cx="17" cy="20" r="2"></circle>317 </svg>318 </div>319 </div>320 </div>321 322 <!-- Hero promo cards -->323 <div class="hero">324 <div class="hero-row">325 <div class="hero-card">326 <div class="hero-title">Pokémon<br>cards</div>327 <div class="hero-arrow">›</div>328 <div class="hero-img">[IMG: Pokémon Card]</div>329 </div>330 <div class="hero-card">331 <div class="hero-title">Sealed<br>packs</div>332 <div class="hero-arrow">›</div>333 <div class="hero-img">[IMG: Sealed Pack Art]</div>334 </div>335 </div>336 </div>337 338 <!-- Popular Destinations -->339 <div class="section">340 <div class="section-title">Popular Destinations</div>341 <div class="grid">342 <div class="cat">343 <div class="circle yellow">344 <div class="img">[IMG: Watch]</div>345 </div>346 <div class="cat-label">Jewelry</div>347 </div>348 <div class="cat">349 <div class="circle orange">350 <div class="img">[IMG: Hair Dryer]</div>351 </div>352 <div class="cat-label">Beauty</div>353 </div>354 <div class="cat">355 <div class="circle orange">356 <div class="img">[IMG: Laptop]</div>357 </div>358 <div class="cat-label">Computers &<br>Tablets</div>359 </div>360 361 <div class="cat">362 <div class="circle yellow">363 <div class="img">[IMG: Toy Shark]</div>364 </div>365 <div class="cat-label">Toys & Hobbies</div>366 </div>367 <div class="cat">368 <div class="circle orange">369 <div class="img">[IMG: Smartphone]</div>370 </div>371 <div class="cat-label">Cell Phones,<br>Smart Watches …</div>372 </div>373 <div class="cat">374 <div class="circle yellow">375 <div class="img">[IMG: Sneaker]</div>376 </div>377 <div class="cat-label">Shoes</div>378 </div>379 </div>380 </div>381 382 <!-- Daily Deals -->383 <div class="section" style="padding-top: 10px;">384 <div class="deals-header">385 <div class="deals-title">Daily Deals</div>386 <div class="see-all">See all</div>387 </div>388 <div class="deals-row">389 <div class="deal-card">390 <div class="deal-img">[IMG: Game Console]</div>391 <div class="deal-title">Popular Console Bundle</div>392 </div>393 <div class="deal-card">394 <div class="deal-img">[IMG: Laptop]</div>395 <div class="deal-title">Powerful Laptop Deal</div>396 </div>397 <div class="deal-card">398 <div class="deal-img">[IMG: Running Shoes]</div>399 <div class="deal-title">Top Brand Sneakers</div>400 </div>401 </div>402 </div>403 </div>404 405 <!-- Bottom navigation -->406 <div class="bottom-nav">407 <div class="nav-item active">408 <div class="nav-icon">409 <svg viewBox="0 0 24 24">410 <path d="M3 11 L12 3 L21 11"></path>411 <rect x="6" y="11" width="12" height="10"></rect>412 </svg>413 </div>414 Home415 </div>416 <div class="nav-item">417 <div class="nav-icon">418 <svg viewBox="0 0 24 24">419 <circle cx="12" cy="8" r="4"></circle>420 <path d="M3 21 C3 16 7 14 12 14 C17 14 21 16 21 21"></path>421 </svg>422 </div>423 My eBay424 </div>425 <div class="nav-item">426 <div class="nav-icon">427 <svg viewBox="0 0 24 24">428 <circle cx="10" cy="10" r="6"></circle>429 <line x1="14.5" y1="14.5" x2="21" y2="21"></line>430 </svg>431 </div>432 Search433 </div>434 <div class="nav-item">435 <div class="nav-icon">436 <svg viewBox="0 0 24 24">437 <path d="M6 8 C6 5,8 3,12 3 C16 3,18 5,18 8 V16"></path>438 <line x1="4" y1="16" x2="20" y2="16"></line>439 <circle cx="12" cy="20" r="1.8"></circle>440 </svg>441 </div>442 Inbox443 </div>444 <div class="nav-item">445 <div class="nav-icon">446 <svg viewBox="0 0 24 24">447 <path d="M4 6 H16 L20 10 V20 H4 Z"></path>448 <circle cx="7" cy="9" r="1.2"></circle>449 </svg>450 </div>451 Selling452 </div>453 </div>454 455</div>456</body>457</html>