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{margin:0;padding:0;background:transparent;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#111;}9 #render-target{10 width:1080px;height:2400px;position:relative;overflow:hidden;background:#ffffff;11 }12 13 .top{padding:40px 44px 24px;}14 .status-pad{height:32px;} /* visual breathing space for OS status bar */15 16 .logo{17 font-size:96px;font-weight:700;letter-spacing:-2px;line-height:1;margin:16px 0 30px;18 }19 .logo span{display:inline-block}20 .logo .e{color:#e53238}21 .logo .b{color:#0064d2}22 .logo .a{color:#f5af02}23 .logo .y{color:#86b817}24 25 .search-bar{26 display:flex;align-items:center;gap:26px;27 background:#f1f3f4;border-radius:64px;padding:28px 32px;height:120px;28 box-shadow: inset 0 0 0 1px #e2e2e2;29 }30 .search-input{31 flex:1;color:#6b6f76;font-size:42px;32 }33 .icon{width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;color:#333}34 .icon svg{width:56px;height:56px}35 36 .quick-actions{display:flex;gap:26px;margin:26px 0 10px;flex-wrap:wrap}37 .pill{38 display:flex;align-items:center;gap:16px;padding:22px 32px;border-radius:60px;39 border:2px solid #d9d9dc;color:#333;background:#fff;font-size:38px;40 }41 .pill .icon svg{width:44px;height:44px}42 43 .cart-fab{44 position:absolute;right:36px;top:420px;width:108px;height:108px;border-radius:54px;45 background:#ffffff;box-shadow:0 6px 18px rgba(0,0,0,0.12),0 0 0 1px #e6e6e6;46 display:flex;align-items:center;justify-content:center;47 }48 .cart-fab svg{width:60px;height:60px}49 50 .promo{51 background:#3665f3;color:#fff;border-radius:0 0 24px 24px;52 padding:52px 44px 60px;margin:24px 0 34px;53 }54 .promo h2{font-size:64px;line-height:1.15;margin:0 0 18px;font-weight:800}55 .promo p{font-size:40px;opacity:0.95;margin:0 0 36px}56 .promo .cta{57 display:inline-block;background:#fff;color:#2f54eb;border-radius:60px;58 padding:26px 44px;font-size:42px;font-weight:600;box-shadow:0 1px 0 rgba(0,0,0,0.05);59 }60 61 .section{padding:0 44px}62 .section-header{display:flex;align-items:flex-end;justify-content:space-between;margin:18px 0 14px}63 .section-title{font-size:64px;font-weight:800;margin:0}64 .see-all{font-size:36px;color:#1a1a1a;text-decoration:none}65 66 .cards{display:flex;gap:28px;margin-top:18px}67 .card{width:300px}68 .card .img{69 width:300px;height:240px;border-radius:28px;background:#E0E0E0;border:1px solid #BDBDBD;70 display:flex;align-items:center;justify-content:center;color:#757575;font-size:34px;text-align:center;padding:10px;71 }72 .card .title{font-size:38px;line-height:1.25;margin:16px 0 10px;color:#222;max-height:3.2em;overflow:hidden}73 .card .price{font-size:44px;font-weight:800;margin:4px 0 0}74 75 .suggest{76 margin:38px 44px 0;border-top:1px solid #ececec;padding-top:26px;77 }78 .suggest-row{79 display:flex;align-items:center;gap:20px;font-size:54px;font-weight:700;color:#222;80 }81 .suggest-row .icon svg{width:60px;height:60px}82 83 .bottom-nav{84 position:absolute;left:0;right:0;bottom:0;background:#ffffff;85 border-top:1px solid #e9e9ea;height:220px;padding:18px 24px 24px;86 }87 .nav-items{display:flex;justify-content:space-around;align-items:center;height:100%}88 .nav-item{display:flex;flex-direction:column;align-items:center;gap:12px;color:#555;font-size:34px}89 .nav-item .ni{width:76px;height:76px;border-radius:24px;background:transparent;display:flex;align-items:center;justify-content:center}90 .nav-item.active{color:#3b6ef6}91 .nav-item.active .ni{background:#e9f0ff}92 .nav-item svg{width:48px;height:48px}93 94 .gesture{95 position:absolute;left:50%;transform:translateX(-50%);96 bottom:230px;width:220px;height:12px;border-radius:6px;background:#bdbdbd;opacity:.8;97 }98</style>99</head>100<body>101<div id="render-target">102 103 <div class="top">104 <div class="status-pad"></div>105 106 <div class="logo" aria-label="eBay logo">107 <span class="e">e</span><span class="b">b</span><span class="a">a</span><span class="y">y</span>108 </div>109 110 <div class="search-bar">111 <span class="icon" aria-hidden="true">112 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">113 <circle cx="11" cy="11" r="7"></circle>114 <path d="M20 20l-4.2-4.2"></path>115 </svg>116 </span>117 <div class="search-input">Search on eBay</div>118 <span class="icon" aria-label="Voice search">119 <svg viewBox="0 0 24 24" fill="currentColor">120 <rect x="9" y="3" width="6" height="10" rx="3"></rect>121 <path d="M5 11a7 7 0 0 0 14 0" fill="none" stroke="#333" stroke-width="2"></path>122 <path d="M12 18v3" stroke="#333" stroke-width="2"></path>123 </svg>124 </span>125 <span class="icon" aria-label="Camera">126 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">127 <rect x="3" y="6" width="18" height="13" rx="2"></rect>128 <path d="M9 6l2-2h2l2 2"></path>129 <circle cx="12" cy="12.5" r="3"></circle>130 </svg>131 </span>132 </div>133 134 <div class="quick-actions">135 <div class="pill">136 <span class="icon">137 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">138 <path d="M6 6h15l-2 9H7L6 6z"></path>139 <circle cx="9" cy="19" r="1.5"></circle>140 <circle cx="18" cy="19" r="1.5"></circle>141 </svg>142 </span>143 Selling144 </div>145 <div class="pill">146 <span class="icon">147 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">148 <path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.65-7 10-7 10z"></path>149 </svg>150 </span>151 Saved152 </div>153 <div class="pill">154 <span class="icon">155 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">156 <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"></path>157 <path d="M20 21a8 8 0 0 0-16 0" ></path>158 </svg>159 </span>160 Pre-loved fashion161 </div>162 <div class="pill">163 <span class="icon">164 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">165 <circle cx="12" cy="12" r="9"></circle>166 <path d="M2.5 12h19M12 2.5v19"></path>167 </svg>168 </span>169 More170 </div>171 </div>172 </div>173 174 <div class="cart-fab" aria-label="Cart">175 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">176 <path d="M6 6h15l-2 9H7L6 6z"></path>177 <circle cx="9" cy="19" r="1.5"></circle>178 <circle cx="18" cy="19" r="1.5"></circle>179 </svg>180 </div>181 182 <div class="promo">183 <h2>Introducing new services for sellers</h2>184 <p>All delivery options will soon be found on the eBay platform.</p>185 <a class="cta" href="#">Find out more</a>186 </div>187 188 <div class="section">189 <div class="section-header">190 <h3 class="section-title">Your Recently Viewed Items</h3>191 <a class="see-all" href="#">See all</a>192 </div>193 194 <div class="cards">195 <div class="card">196 <div class="img">[IMG: Light green New Balance shoes]</div>197 <div class="title">New Balance 420 Size 9 Athletic Shoes For Women WL420DFU ...</div>198 <div class="price">GBP 14.83</div>199 </div>200 <div class="card">201 <div class="img">[IMG: Columbia women's hiking boots]</div>202 <div class="title">Columbia Newton Ridge Women's Size 9 Waterproof Hiking ...</div>203 <div class="price">GBP 41.20</div>204 </div>205 <div class="card">206 <div class="img">[IMG: Brown leather boots]</div>207 <div class="title">Kodiak Women's Leather Boots Size 9</div>208 <div class="price">GBP 41.00</div>209 </div>210 </div>211 </div>212 213 <div class="suggest">214 <div class="suggest-row">215 <span class="icon">216 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">217 <circle cx="11" cy="11" r="7"></circle>218 <path d="M20 20l-4.2-4.2"></path>219 </svg>220 </span>221 <span>New Balance Shoes For</span>222 </div>223 </div>224 225 <div class="gesture"></div>226 227 <nav class="bottom-nav" role="navigation" aria-label="Bottom Navigation">228 <div class="nav-items">229 <div class="nav-item active">230 <div class="ni">231 <svg viewBox="0 0 24 24" fill="none" stroke="#3b6ef6" stroke-width="2">232 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-8z"></path>233 </svg>234 </div>235 <div>Home</div>236 </div>237 <div class="nav-item">238 <div class="ni">239 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">240 <circle cx="12" cy="8" r="4"></circle>241 <path d="M20 21a8 8 0 0 0-16 0"></path>242 </svg>243 </div>244 <div>My eBay</div>245 </div>246 <div class="nav-item">247 <div class="ni">248 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">249 <circle cx="11" cy="11" r="7"></circle>250 <path d="M20 20l-4.2-4.2"></path>251 </svg>252 </div>253 <div>Search</div>254 </div>255 <div class="nav-item">256 <div class="ni">257 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">258 <path d="M18 8a6 6 0 1 1-12 0"></path>259 <path d="M12 14v5"></path>260 <path d="M8 19h8"></path>261 </svg>262 </div>263 <div>Inbox</div>264 </div>265 <div class="nav-item">266 <div class="ni">267 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">268 <path d="M7 4h10l3 6-8 10L4 10l3-6z"></path>269 <path d="M7 9h10"></path>270 </svg>271 </div>272 <div>Selling</div>273 </div>274 </div>275 </nav>276 277</div>278</body>279</html>