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 :root{9 --bg:#ffffff;10 --text:#1d1d1f;11 --muted:#6b6b6d;12 --chip-border:#cfcfcf;13 --chip-bg:#ffffff;14 --pill-bg:#f3f3f4;15 --search-bg:#f1f1f3;16 --yellow-light:#f2e186;17 --yellow:#e1b44a;18 --brown:#4b2c1f;19 --nav-bg:#f7f7f8;20 --divider:#e8e8ea;21 --card-bg:#f7e58f;22 }23 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }24 #render-target{25 width:1080px; height:2400px;26 position:relative; overflow:hidden;27 background:var(--bg);28 border-radius:32px;29 box-shadow:0 20px 60px rgba(0,0,0,0.15);30 }31 /* Status bar */32 .status-bar{33 height:120px; padding:0 40px;34 display:flex; align-items:center; justify-content:space-between;35 color:#000; font-size:44px; letter-spacing:0.2px;36 }37 .status-left{ display:flex; align-items:center; gap:24px; }38 .status-right{ display:flex; align-items:center; gap:28px; }39 .icon{ display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center; }40 /* Header area */41 .header{42 padding:0 40px;43 }44 .logo{45 margin-top:10px;46 font-size:120px; font-weight:800; letter-spacing:-6px;47 line-height:1;48 }49 .logo span:nth-child(1){ color:#e53238; } /* e red */50 .logo span:nth-child(2){ color:#0064d2; } /* b blue */51 .logo span:nth-child(3){ color:#f5af02; } /* a yellow */52 .logo span:nth-child(4){ color:#86b817; } /* y green */53 54 .search-row{55 position:relative;56 margin-top:28px;57 }58 .search{59 height:140px; border-radius:72px;60 background:var(--search-bg);61 display:flex; align-items:center;62 padding:0 36px;63 box-shadow:0 8px 20px rgba(0,0,0,0.06) inset;64 }65 .search .left, .search .right{ display:flex; align-items:center; }66 .search .left{ gap:28px; flex:1; }67 .search .right{ gap:30px; }68 .search-placeholder{ color:#686a6f; font-size:42px; }69 .circle-fab{70 position:absolute; right:0; top:-40px;71 width:120px; height:120px; border-radius:60px;72 background:#ffffff; box-shadow:0 6px 16px rgba(0,0,0,0.12);73 display:flex; align-items:center; justify-content:center;74 }75 76 /* Action chips */77 .chips{78 display:flex; gap:26px; flex-wrap:wrap;79 padding:34px 40px 24px 40px;80 }81 .chip{82 height:96px; padding:0 36px; border-radius:48px;83 background:var(--chip-bg); border:2px solid var(--chip-border);84 display:flex; align-items:center; gap:20px; color:#282828; font-size:40px;85 }86 87 /* Promo sections */88 .promo{89 margin-top:20px;90 padding:54px 40px;91 background:var(--yellow-light);92 }93 .promo h1{94 margin:0 0 18px 0; font-size:68px; line-height:1.1; color:var(--brown);95 font-weight:800;96 }97 .promo p{98 margin:0 0 34px 0; font-size:40px; color:#694a3c;99 }100 .promo .btn{101 display:inline-flex; align-items:center; justify-content:center;102 height:110px; padding:0 44px; border-radius:55px; background:var(--brown); color:#fff; font-size:44px; font-weight:700;103 box-shadow:0 6px 12px rgba(0,0,0,0.12);104 }105 .divider{106 height:24px; background:#ffffff;107 }108 109 .promo2{110 padding:54px 40px 40px 40px;111 background:var(--yellow);112 }113 .promo2 h1{114 margin:0 0 18px 0; font-size:68px; line-height:1.1; color:var(--brown); font-weight:800;115 }116 .promo2 p{117 margin:0 0 36px 0; font-size:40px; color:#6a4c3e;118 }119 .promo2 .btn{120 display:inline-flex; align-items:center; justify-content:center;121 height:110px; padding:0 54px; border-radius:55px; background:var(--brown); color:#fff; font-size:44px; font-weight:800;122 box-shadow:0 6px 12px rgba(0,0,0,0.12);123 }124 125 /* Cards grid */126 .cards{127 display:grid; grid-template-columns:1fr 1fr; gap:30px;128 padding:36px 40px 0 40px;129 }130 .card{131 background:var(--card-bg); border-radius:36px; padding:36px; min-height:420px;132 box-shadow:0 10px 24px rgba(0,0,0,0.08);133 display:flex; flex-direction:column; justify-content:space-between;134 }135 .card .title-row{136 display:flex; align-items:flex-start; justify-content:space-between;137 }138 .card .title{139 font-size:48px; font-weight:800; color:#543a2f; max-width:520px;140 }141 .card .arrow{142 width:60px; height:60px; border-radius:30px; background:rgba(0,0,0,0.08);143 display:flex; align-items:center; justify-content:center;144 }145 .img-placeholder{146 width:100%; height:240px;147 background:#E0E0E0; border:1px solid #BDBDBD;148 border-radius:28px;149 display:flex; align-items:center; justify-content:center;150 color:#757575; font-size:40px;151 }152 153 /* Bottom nav */154 .bottom-nav{155 position:absolute; left:0; right:0; bottom:0;156 height:220px; background:var(--nav-bg);157 border-top-left-radius:30px; border-top-right-radius:30px;158 box-shadow:0 -8px 24px rgba(0,0,0,0.1);159 display:flex; flex-direction:column; align-items:center; justify-content:center;160 }161 .nav-icons{162 width:100%; padding:10px 60px 0;163 display:flex; align-items:center; justify-content:space-between;164 }165 .nav-item{166 display:flex; flex-direction:column; align-items:center; gap:14px;167 color:#2c2c2c; font-size:32px;168 }169 .nav-item.active{ color:#246BFD; }170 .nav-icon{171 width:84px; height:84px; border-radius:28px;172 display:flex; align-items:center; justify-content:center;173 background:#ffffff; border:2px solid #e6e6e8;174 }175 .badge{176 position:absolute; top:-8px; right:-8px; background:#e33a3a; color:#fff; font-size:28px; width:44px; height:44px; border-radius:22px;177 display:flex; align-items:center; justify-content:center; border:2px solid #fff;178 }179</style>180</head>181<body>182<div id="render-target">183 <!-- Status Bar -->184 <div class="status-bar">185 <div class="status-left">186 <div>5:13</div>187 <div class="icon">188 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="#595959"/><path d="M12 1v3M12 20v3M1 12h3M20 12h3M4 4l2 2M18 18l2 2M4 20l2-2M18 6l2-2" stroke="#595959" stroke-width="1.5" stroke-linecap="round"/></svg>189 </div>190 </div>191 <div class="status-right">192 <div class="icon">193 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M2 9c0-1.1.9-2 2-2h3l3-3h4l3 3h3c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V9z" fill="#606060"/></svg>194 </div>195 <div class="icon">196 <svg width="40" height="40" viewBox="0 0 24 24"><rect x="3" y="7" width="16" height="10" rx="2" fill="#606060"/><rect x="20" y="10" width="2" height="4" rx="1" fill="#606060"/></svg>197 </div>198 </div>199 </div>200 201 <!-- Header / Logo -->202 <div class="header">203 <div class="logo">204 <span>e</span><span>b</span><span>a</span><span>y</span>205 </div>206 207 <!-- Search -->208 <div class="search-row">209 <div class="search">210 <div class="left">211 <svg width="56" height="56" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#222" stroke-width="2" stroke-linecap="round"/></svg>212 <div class="search-placeholder">Search on eBay</div>213 </div>214 <div class="right">215 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 3c1.7 0 3 1.3 3 3v6c0 1.7-1.3 3-3 3s-3-1.3-3-3V6c0-1.7 1.3-3 3-3z" fill="#000"/><path d="M9 18h6l-1 3H10l-1-3z" fill="#000"/></svg>216 <svg width="56" height="56" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="12" rx="2" stroke="#000" stroke-width="2" fill="none"/><rect x="9" y="10" width="6" height="5" fill="#000"/></svg>217 </div>218 </div>219 <div class="circle-fab">220 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M7 7h12l-1.5 8.5a2 2 0 0 1-2 1.5H9.5a2 2 0 0 1-2-1.5L6 6H4" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="9" cy="20" r="1.5" fill="#000"/><circle cx="17" cy="20" r="1.5" fill="#000"/></svg>221 </div>222 </div>223 </div>224 225 <!-- Chips -->226 <div class="chips">227 <div class="chip">228 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 6h16v12H4z" fill="#000"/></svg>229 <span>Selling</span>230 </div>231 <div class="chip">232 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l2 6h6l-5 3 2 6-5-3-5 3 2-6-5-3h6z" fill="#000"/></svg>233 <span>Deals</span>234 </div>235 <div class="chip">236 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="6" cy="6" r="2" fill="#000"/><circle cx="12" cy="6" r="2" fill="#000"/><circle cx="18" cy="6" r="2" fill="#000"/><circle cx="6" cy="12" r="2" fill="#000"/><circle cx="12" cy="12" r="2" fill="#000"/><circle cx="18" cy="12" r="2" fill="#000"/></svg>237 <span>Categories</span>238 </div>239 <div class="chip">240 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 21s-7-4.7-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.3-7 10-7 10z" fill="none" stroke="#000" stroke-width="2"/></svg>241 <span>Saved</span>242 </div>243 </div>244 245 <!-- Promo 1 -->246 <div class="promo">247 <h1>Have you been selling on eBay already?</h1>248 <p>To pay your fees or ask questions</p>249 <div class="btn">Read more</div>250 </div>251 252 <div class="divider"></div>253 254 <!-- Promo 2 -->255 <div class="promo2">256 <h1>Way more than just baseball cards</h1>257 <p>Whatever cards you’re collecting, you can find them here!</p>258 <div class="btn">Grow your collection</div>259 260 <!-- Cards -->261 <div class="cards">262 <div class="card">263 <div class="title-row">264 <div class="title">Sports cards</div>265 <div class="arrow">266 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>267 </div>268 </div>269 <div class="img-placeholder">[IMG: Assorted Sports Trading Cards]</div>270 </div>271 272 <div class="card">273 <div class="title-row">274 <div class="title">Collectibles Card Games</div>275 <div class="arrow">276 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>277 </div>278 </div>279 <div class="img-placeholder">[IMG: Collectible Card Game Boxes]</div>280 </div>281 </div>282 </div>283 284 <!-- Bottom Navigation -->285 <div class="bottom-nav">286 <div class="nav-icons">287 <div class="nav-item active">288 <div class="nav-icon" style="position:relative;">289 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" fill="#246BFD"/></svg>290 </div>291 <div>Home</div>292 </div>293 <div class="nav-item">294 <div class="nav-icon">295 <svg width="42" height="42" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#000"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#000" stroke-width="2"/></svg>296 </div>297 <div>My eBay</div>298 </div>299 <div class="nav-item">300 <div class="nav-icon">301 <svg width="42" height="42" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#000" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg>302 </div>303 <div>Search</div>304 </div>305 <div class="nav-item">306 <div class="nav-icon" style="position:relative;">307 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M6 9a6 6 0 1 1 12 0v5l2 2H4l2-2V9z" fill="none" stroke="#000" stroke-width="2"/></svg>308 <div class="badge">1</div>309 </div>310 <div>Inbox</div>311 </div>312 <div class="nav-item">313 <div class="nav-icon">314 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M6 3h12l2 5-9 13L4 8l2-5z" fill="none" stroke="#000" stroke-width="2"/></svg>315 </div>316 <div>Selling</div>317 </div>318 </div>319 </div>320</div>321</body>322</html>