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 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 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #ffffff;17 }18 19 /* Status bar */20 .status-bar {21 height: 96px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 40px;26 color: #e6e6e6;27 font-size: 34px;28 opacity: 0.9;29 }30 .status-icons { display: flex; align-items: center; gap: 24px; }31 .dot { width: 10px; height: 10px; background: #e6e6e6; border-radius: 50%; display: inline-block; }32 33 /* Header and search */34 .brand {35 margin: 30px 40px 24px;36 font-size: 120px;37 font-weight: 700;38 letter-spacing: -2px;39 }40 .brand .e { color: #e53935; } /* red */41 .brand .b { color: #1e88e5; } /* blue */42 .brand .a { color: #fdd835; } /* yellow */43 .brand .y { color: #43a047; } /* green */44 45 .search-wrap {46 margin: 20px 40px 26px;47 position: relative;48 }49 .search-bar {50 height: 120px;51 background: #1b1b1b;52 border: 1px solid #2b2b2b;53 border-radius: 60px;54 display: flex;55 align-items: center;56 padding: 0 40px;57 gap: 30px;58 }59 .search-bar .placeholder {60 color: #cfcfcf;61 font-size: 40px;62 flex: 1;63 }64 .search-icon, .mic-icon, .camera-icon {65 width: 56px;66 height: 56px;67 fill: none;68 stroke: #e6e6e6;69 stroke-width: 5;70 }71 72 /* Floating cart button */73 .cart-fab {74 position: absolute;75 right: 40px;76 top: 450px;77 width: 96px;78 height: 96px;79 background: #2b2b2b;80 border-radius: 50%;81 display: flex;82 align-items: center;83 justify-content: center;84 box-shadow: 0 6px 16px rgba(0,0,0,0.5);85 }86 .cart-icon { width: 50px; height: 50px; fill: none; stroke: #ffffff; stroke-width: 5; }87 88 /* Quick actions pills */89 .quick-actions {90 margin: 16px 40px 40px;91 display: flex;92 gap: 24px;93 flex-wrap: wrap;94 }95 .pill {96 display: flex;97 align-items: center;98 gap: 18px;99 padding: 22px 34px;100 height: 92px;101 border-radius: 46px;102 background: #101010;103 border: 1px solid #3a3a3a;104 color: #ffffff;105 font-size: 36px;106 white-space: nowrap;107 }108 .pill svg { width: 40px; height: 40px; stroke: #e6e6e6; stroke-width: 5; fill: none; }109 110 /* Sign-in block */111 .signin {112 text-align: center;113 margin: 40px 60px 20px;114 color: #e9e9e9;115 font-size: 44px;116 line-height: 1.4;117 }118 .cta-row {119 display: flex;120 justify-content: center;121 gap: 40px;122 margin: 30px 0 60px;123 }124 .cta-outline {125 width: 420px;126 height: 110px;127 border-radius: 55px;128 border: 2px solid #5b82ff;129 color: #7da1ff;130 background: transparent;131 font-size: 44px;132 font-weight: 600;133 display: flex;134 align-items: center;135 justify-content: center;136 }137 138 /* Yellow help panel */139 .help-panel {140 background: #e9d97a;141 color: #4b2a22;142 padding: 56px 40px;143 }144 .help-panel h2 {145 margin: 0 0 20px;146 font-size: 64px;147 line-height: 1.15;148 font-weight: 800;149 letter-spacing: -0.5px;150 }151 .help-panel p {152 margin: 0 0 36px;153 font-size: 40px;154 color: #5a352b;155 }156 .read-btn {157 background: #4b2a22;158 color: #f9eede;159 border: none;160 border-radius: 55px;161 height: 110px;162 padding: 0 46px;163 font-size: 42px;164 font-weight: 600;165 display: inline-flex;166 align-items: center;167 justify-content: center;168 }169 170 /* Popular destinations */171 .section {172 padding: 50px 40px 0;173 }174 .section h3 {175 margin: 0;176 font-size: 56px;177 color: #ffffff;178 font-weight: 800;179 }180 .destinations {181 margin-top: 220px; /* creates the large empty zone like the screenshot */182 display: flex;183 justify-content: space-around;184 padding: 0 40px 0;185 }186 .destinations .item {187 color: #ffffff;188 font-size: 38px;189 }190 191 /* Bottom navigation */192 .bottom-nav {193 position: absolute;194 bottom: 0;195 left: 0;196 width: 1080px;197 height: 210px;198 background: #1f1f1f;199 border-top: 1px solid #2c2c2c;200 display: flex;201 align-items: center;202 justify-content: space-around;203 padding-bottom: 20px;204 }205 .nav-item {206 width: 180px;207 display: flex;208 flex-direction: column;209 align-items: center;210 color: #cfcfcf;211 gap: 12px;212 font-size: 32px;213 }214 .nav-item .icon-wrap {215 width: 92px;216 height: 92px;217 border-radius: 30px;218 background: transparent;219 display: flex;220 align-items: center;221 justify-content: center;222 }223 .nav-item svg { width: 50px; height: 50px; stroke: #cfcfcf; stroke-width: 5; fill: none; }224 225 .nav-item.active { color: #7da1ff; }226 .nav-item.active .icon-wrap {227 background: #283758;228 }229 .nav-item.active svg { stroke: #7da1ff; }230</style>231</head>232<body>233<div id="render-target">234 235 <!-- Status Bar -->236 <div class="status-bar">237 <div>8:46</div>238 <div class="status-icons">239 <span>🐶</span>240 <span>📱</span>241 <span>✉️</span>242 <span class="dot"></span>243 <svg width="38" height="22" viewBox="0 0 38 22">244 <rect x="1" y="1" width="32" height="20" rx="4" stroke="#e6e6e6" fill="none" stroke-width="3"></rect>245 <rect x="34" y="6" width="3" height="10" rx="1.5" fill="#e6e6e6"></rect>246 </svg>247 </div>248 </div>249 250 <!-- Logo -->251 <div class="brand">252 <span class="e">e</span><span class="b">b</span><span class="a">a</span><span class="y">y</span>253 </div>254 255 <!-- Search -->256 <div class="search-wrap">257 <div class="search-bar">258 <svg class="search-icon" viewBox="0 0 24 24">259 <circle cx="10" cy="10" r="7"></circle>260 <line x1="16" y1="16" x2="22" y2="22"></line>261 </svg>262 <div class="placeholder">Search on eBay</div>263 <svg class="mic-icon" viewBox="0 0 24 24">264 <rect x="9" y="4" width="6" height="10" rx="3"></rect>265 <line x1="12" y1="14" x2="12" y2="20"></line>266 <path d="M6,12 C6,16 18,16 18,12" />267 </svg>268 <svg class="camera-icon" viewBox="0 0 24 24">269 <rect x="3" y="7" width="18" height="12" rx="2"></rect>270 <circle cx="12" cy="13" r="4"></circle>271 <path d="M8 7 L10 4 H14 L16 7" />272 </svg>273 </div>274 </div>275 276 <!-- Floating Cart -->277 <div class="cart-fab">278 <svg class="cart-icon" viewBox="0 0 24 24">279 <circle cx="9" cy="20" r="2"></circle>280 <circle cx="17" cy="20" r="2"></circle>281 <path d="M3 4 H6 L7.5 12 H18 L20 6 H8"></path>282 </svg>283 </div>284 285 <!-- Quick action pills -->286 <div class="quick-actions">287 <div class="pill">288 <svg viewBox="0 0 24 24">289 <path d="M3 6 H8 V18 H3 Z M10 6 H21 V12 H10 Z"></path>290 </svg>291 <span>Selling</span>292 </div>293 <div class="pill">294 <svg viewBox="0 0 24 24">295 <path d="M12 3 L14 10 H21 L15.5 14 L17.5 21 L12 16 L6.5 21 L8.5 14 L3 10 H10 Z"></path>296 </svg>297 <span>Deals</span>298 </div>299 <div class="pill">300 <svg viewBox="0 0 24 24">301 <rect x="3" y="3" width="7" height="7"></rect>302 <rect x="14" y="3" width="7" height="7"></rect>303 <rect x="3" y="14" width="7" height="7"></rect>304 <rect x="14" y="14" width="7" height="7"></rect>305 </svg>306 <span>Categories</span>307 </div>308 <div class="pill">309 <svg viewBox="0 0 24 24">310 <path d="M12 21 C5 16 3 12 5 9 C7 6 10 7 12 9 C14 7 17 6 19 9 C21 12 19 16 12 21 Z"></path>311 </svg>312 <span>Saved</span>313 </div>314 </div>315 316 <!-- Sign-in prompt -->317 <div class="signin">318 Sign in so we can personalize your eBay<br/>experience319 </div>320 <div class="cta-row">321 <div class="cta-outline">Register</div>322 <div class="cta-outline">Sign in</div>323 </div>324 325 <!-- Yellow panel -->326 <div class="help-panel">327 <h2>Have you been selling on eBay already?</h2>328 <p>To pay your fees or ask questions</p>329 <button class="read-btn">Read more</button>330 </div>331 332 <!-- Popular Destinations -->333 <div class="section">334 <h3>Popular Destinations</h3>335 <div class="destinations">336 <div class="item">Jewelry</div>337 <div class="item">Beauty</div>338 <div class="item">Computers &<br/>Tablets</div>339 </div>340 </div>341 342 <!-- Bottom navigation -->343 <div class="bottom-nav">344 <div class="nav-item active">345 <div class="icon-wrap">346 <svg viewBox="0 0 24 24">347 <path d="M3 11 L12 3 L21 11"></path>348 <rect x="6" y="11" width="12" height="9"></rect>349 </svg>350 </div>351 <div>Home</div>352 </div>353 <div class="nav-item">354 <div class="icon-wrap">355 <svg viewBox="0 0 24 24">356 <circle cx="12" cy="8" r="4"></circle>357 <path d="M4 21 C4 15 20 15 20 21"></path>358 </svg>359 </div>360 <div>My eBay</div>361 </div>362 <div class="nav-item">363 <div class="icon-wrap">364 <svg viewBox="0 0 24 24">365 <circle cx="10" cy="10" r="7"></circle>366 <line x1="16" y1="16" x2="22" y2="22"></line>367 </svg>368 </div>369 <div>Search</div>370 </div>371 <div class="nav-item">372 <div class="icon-wrap">373 <svg viewBox="0 0 24 24">374 <path d="M12 3 V5"></path>375 <path d="M5 8 H19 V14 H5 Z"></path>376 <path d="M8 14 V21"></path>377 <path d="M16 14 V21"></path>378 </svg>379 </div>380 <div>Inbox</div>381 </div>382 <div class="nav-item">383 <div class="icon-wrap">384 <svg viewBox="0 0 24 24">385 <path d="M4 4 H18 L20 10 L12 20 L4 10 Z"></path>386 <circle cx="12" cy="12" r="3"></circle>387 </svg>388 </div>389 <div>Selling</div>390 </div>391 </div>392 393</div>394</body>395</html>