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>eBay Mobile UI Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;13 color: #fff;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #000;21 }22 23 /* Utility */24 .row { display: flex; align-items: center; }25 .space-between { justify-content: space-between; }26 .pill { border-radius: 999px; }27 .muted { color: #BDBDBD; }28 .section-title { font-weight: 800; }29 30 /* Status bar */31 .statusbar {32 height: 110px;33 padding: 0 36px;34 display: flex;35 align-items: center;36 justify-content: space-between;37 font-size: 40px;38 color: #fff;39 box-sizing: border-box;40 }41 .status-icons { display: flex; gap: 26px; align-items: center; }42 .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }43 .battery {44 width: 48px; height: 26px; border: 3px solid #fff; border-radius: 6px; position: relative;45 }46 .battery:after {47 content: ""; position: absolute; right: -10px; top: 7px; width: 8px; height: 12px; background: #fff; border-radius: 2px;48 }49 50 /* Top bar */51 .topbar {52 height: 120px;53 padding: 0 36px;54 display: flex;55 align-items: center;56 gap: 28px;57 box-sizing: border-box;58 }59 .icon-btn {60 width: 64px; height: 64px; border-radius: 32px; background: rgba(255,255,255,0.08);61 display: flex; align-items: center; justify-content: center;62 }63 .logo {64 font-size: 64px; font-weight: 800; letter-spacing: -2px; display: flex; align-items: baseline; gap: 6px;65 }66 .logo span { font-weight: 800; }67 .logo .e { color: #e53238; }68 .logo .b { color: #0064d2; }69 .logo .a { color: #f5af02; }70 .logo .y { color: #86b817; }71 .floating-cart {72 position: absolute;73 right: 36px;74 top: 220px;75 width: 88px; height: 88px; border-radius: 44px;76 background: rgba(255,255,255,0.12);77 display: flex; align-items: center; justify-content: center;78 }79 80 /* Search */81 .search-wrap {82 padding: 24px 36px 16px 36px;83 box-sizing: border-box;84 }85 .search {86 height: 110px;87 background: #2b2b2b;88 border-radius: 55px;89 display: flex; align-items: center; justify-content: space-between;90 padding: 0 26px;91 box-sizing: border-box;92 }93 .search .placeholder {94 flex: 1;95 margin-left: 18px;96 font-size: 40px;97 color: #e0e0e0;98 }99 .search-actions {100 display: flex; gap: 16px; align-items: center;101 }102 .search-actions .mini {103 width: 78px; height: 78px; border-radius: 39px;104 background: rgba(255,255,255,0.08);105 display: flex; align-items: center; justify-content: center;106 }107 108 /* Filter pills */109 .filters {110 padding: 18px 36px 28px 36px; box-sizing: border-box;111 display: flex; gap: 16px; flex-wrap: nowrap;112 }113 .filter-pill {114 border: 1px solid #555;115 background: rgba(255,255,255,0.06);116 height: 72px; padding: 0 26px;117 display: flex; align-items: center; gap: 16px;118 border-radius: 36px; color: #fff; font-size: 34px;119 }120 .filter-pill svg { width: 32px; height: 32px; }121 122 /* Yellow hero banner */123 .hero-yellow {124 background: #F2C94C;125 color: #0b0b28;126 padding: 48px 36px 56px 36px;127 }128 .hero-yellow h1 {129 margin: 0 0 14px 0;130 font-size: 64px; font-weight: 800; letter-spacing: -0.5px;131 }132 .hero-yellow p { margin: 0 0 32px 0; font-size: 36px; color: #1f1f3a; }133 .cta-dark {134 display: inline-flex; align-items: center; justify-content: center;135 background: #0b0b28; color: #fff;136 height: 100px; padding: 0 44px; border-radius: 50px; font-size: 40px; font-weight: 700;137 }138 139 .divider { height: 26px; background: #000; }140 141 /* Teal section */142 .teal-section {143 background: #7BD4D3;144 padding: 48px 36px 40px 36px;145 color: #0b0b28;146 }147 .teal-section h2 {148 font-size: 60px; font-weight: 800; margin: 0 0 30px 0; max-width: 880px;149 }150 .cta-outline {151 display: inline-flex; align-items: center; justify-content: center;152 background: #0b0b28; color: #fff;153 height: 100px; padding: 0 44px; border-radius: 50px; font-size: 40px; font-weight: 700;154 }155 .card-grid {156 margin-top: 36px;157 display: grid;158 grid-template-columns: 1fr 1fr;159 gap: 24px;160 }161 .img-card {162 height: 300px;163 border-radius: 28px;164 overflow: hidden;165 background: #E0E0E0;166 border: 1px solid #BDBDBD;167 display: flex; align-items: center; justify-content: center;168 color: #757575; font-size: 34px; text-align: center; padding: 10px;169 }170 171 /* Daily deals */172 .deals-section {173 background: #000;174 padding: 36px;175 }176 .deals-header {177 display: flex; align-items: center; justify-content: space-between;178 margin-bottom: 24px;179 }180 .deals-header .title { font-size: 54px; font-weight: 800; }181 .deals-header .link { font-size: 36px; color: #BDBDBD; }182 .product-list { display: flex; gap: 24px; overflow: hidden; }183 .product-card {184 width: 320px;185 background: #111;186 border-radius: 24px;187 padding: 16px;188 box-sizing: border-box;189 }190 .product-card .image {191 width: 100%; height: 220px; border-radius: 18px;192 background: #E0E0E0; border: 1px solid #BDBDBD;193 display: flex; align-items: center; justify-content: center;194 color: #757575; font-size: 28px; text-align: center;195 }196 .product-card .name {197 margin-top: 16px; font-size: 32px; color: #fff;198 }199 .product-card .price {200 margin-top: 6px; font-size: 30px; color: #9EE29E;201 }202 203 /* Bottom gesture bar */204 .gesture {205 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);206 width: 240px; height: 12px; background: #fff; border-radius: 6px; opacity: 0.85;207 }208 209 /* SVG defaults */210 svg { fill: none; stroke: #fff; stroke-width: 4; }211</style>212</head>213<body>214<div id="render-target">215 216 <!-- Status bar -->217 <div class="statusbar">218 <div>8:21</div>219 <div class="status-icons">220 <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#fff"/></svg>221 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M3 12h18M7 8h10M9 4h6" stroke="#fff"/></svg>222 <div class="status-dot"></div>223 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M5 18l7-12 7 12" stroke="#fff"/></svg>224 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M3 17h18" stroke="#fff"/></svg>225 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" stroke="#fff"/></svg>226 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 3v18M3 12h18" stroke="#fff"/></svg>227 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 6h12v12H6z" stroke="#fff"/></svg>228 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#fff"/></svg>229 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 6h12v12H6z" stroke="#fff"/></svg>230 <div class="battery"></div>231 </div>232 </div>233 234 <!-- Top bar with menu and logo -->235 <div class="topbar">236 <div class="icon-btn">237 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="3"/></svg>238 </div>239 <div class="logo">240 <span class="e">e</span><span class="b">b</span><span class="a">a</span><span class="y">y</span>241 </div>242 </div>243 244 <!-- Floating cart -->245 <div class="floating-cart">246 <svg width="40" height="40" viewBox="0 0 24 24">247 <path d="M4 6h2l2 10h10l2-8H7" stroke="#fff" stroke-width="3" />248 <circle cx="10" cy="20" r="1.5" fill="#fff" stroke="none"></circle>249 <circle cx="18" cy="20" r="1.5" fill="#fff" stroke="none"></circle>250 </svg>251 </div>252 253 <!-- Search -->254 <div class="search-wrap">255 <div class="search">256 <div class="row" style="gap:18px;">257 <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-5-5"/></svg>258 <div class="placeholder">Search on eBay</div>259 </div>260 <div class="search-actions">261 <div class="mini">262 <svg width="30" height="30" viewBox="0 0 24 24">263 <path d="M12 4c2 0 3 1.5 3 3.5v4.5c0 2-1 3.5-3 3.5s-3-1.5-3-3.5V7.5C9 5.5 10 4 12 4z"/>264 <path d="M9 18h6" />265 </svg>266 </div>267 <div class="mini">268 <svg width="34" height="34" viewBox="0 0 24 24">269 <rect x="4" y="7" width="16" height="12" rx="2"/>270 <path d="M9 7l2-3h2l2 3"/>271 <circle cx="12" cy="13" r="3"/>272 </svg>273 </div>274 </div>275 </div>276 </div>277 278 <!-- Filter pills -->279 <div class="filters">280 <div class="filter-pill">281 <svg viewBox="0 0 24 24"><path d="M4 4h8l8 8-8 8H4l8-8z"/></svg>282 <span>Selling</span>283 </div>284 <div class="filter-pill">285 <svg viewBox="0 0 24 24"><path d="M12 3v9l6 3" /></svg>286 <span>Deals</span>287 </div>288 <div class="filter-pill">289 <svg viewBox="0 0 24 24"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/></svg>290 <span>Categories</span>291 </div>292 <div class="filter-pill">293 <svg viewBox="0 0 24 24"><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"/></svg>294 <span>Saved</span>295 </div>296 </div>297 298 <!-- Yellow Hero -->299 <div class="hero-yellow">300 <h1>What's Trending on eBay?</h1>301 <p>Save on deals you really want</p>302 <div class="cta-dark">Buy it now</div>303 </div>304 305 <div class="divider"></div>306 307 <!-- Teal section -->308 <div class="teal-section">309 <h2>Shop millions of items for you and your home.</h2>310 <div class="cta-outline">Shop Now</div>311 312 <div class="card-grid">313 <div class="img-card">[IMG: Warehouse packing and handheld scanner]</div>314 <div class="img-card">[IMG: Yellow banner with sports bag visual]</div>315 </div>316 </div>317 318 <!-- Daily Deals -->319 <div class="deals-section">320 <div class="deals-header">321 <div class="title">Daily Deals</div>322 <div class="link">See all</div>323 </div>324 <div class="product-list">325 <div class="product-card">326 <div class="image">[IMG: Replacement phone screens]</div>327 <div class="name">Phone Screen Set</div>328 <div class="price">$14.99</div>329 </div>330 <div class="product-card">331 <div class="image">[IMG: Smartwatch front]</div>332 <div class="name">Smart Watch</div>333 <div class="price">$29.99</div>334 </div>335 <div class="product-card">336 <div class="image">[IMG: Tablet device]</div>337 <div class="name">Tablet 10"</div>338 <div class="price">$119.00</div>339 </div>340 <div class="product-card">341 <div class="image">[IMG: Headphones]</div>342 <div class="name">Wireless Headphones</div>343 <div class="price">$39.00</div>344 </div>345 </div>346 </div>347 348 <!-- Bottom gesture bar -->349 <div class="gesture"></div>350 351</div>352</body>353</html>