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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000000; color: #FFFFFF;13 }14 15 .screen-padding { padding: 40px; }16 17 /* Header / logo */18 .logo {19 font-weight: 700; font-size: 64px; letter-spacing: -1px;20 display: inline-block;21 margin-top: 20px;22 }23 .logo span { display: inline-block; }24 .logo .e { color: #E53238; }25 .logo .b { color: #0064D2; }26 .logo .a { color: #F5AF02; }27 .logo .y { color: #86B817; }28 29 /* Floating cart */30 .cart-fab {31 position: absolute; right: 28px; top: 270px;32 width: 88px; height: 88px; border-radius: 50%;33 background: #1E1E1E; box-shadow: 0 4px 12px rgba(0,0,0,0.4);34 display: flex; align-items: center; justify-content: center;35 }36 .cart-fab svg { width: 40px; height: 40px; fill: #FFFFFF; opacity: 0.9; }37 38 /* Search */39 .search-wrap { margin-top: 26px; }40 .search-bar {41 background: #1E1E1E; border-radius: 60px; height: 120px;42 display: flex; align-items: center; padding: 0 36px; gap: 24px;43 border: 1px solid #333333;44 }45 .search-bar svg { width: 46px; height: 46px; fill: #CFCFCF; }46 .search-input { flex: 1; color: #CFCFCF; font-size: 38px; }47 .search-actions { display: flex; align-items: center; gap: 26px; }48 .search-actions .icon-btn {49 width: 86px; height: 86px; border-radius: 50%;50 display: flex; align-items: center; justify-content: center;51 background: transparent; border: 2px solid #3B3B3B;52 }53 .search-actions .icon-btn svg { width: 42px; height: 42px; fill: #FFFFFF; }54 55 /* Chips */56 .chip-row { margin-top: 34px; display: flex; gap: 24px; flex-wrap: nowrap; }57 .chip {58 padding: 22px 34px; border-radius: 50px;59 background: #151515; border: 2px solid #3A3A3A;60 color: #FFFFFF; font-size: 34px; display: flex; align-items: center; gap: 16px;61 }62 .chip svg { width: 36px; height: 36px; fill: #FFFFFF; opacity: 0.9; }63 64 /* Banner */65 .banner {66 margin-top: 34px; background: #E3BC45; color: #2A1F00;67 border-radius: 0; padding: 44px 40px 60px 40px;68 }69 .banner h2 {70 font-size: 60px; margin: 0 0 16px 0; color: #2A1F00; font-weight: 800;71 }72 .banner p { margin: 0 0 36px 0; font-size: 36px; color: #3A2D00; }73 .banner .cta {74 display: inline-block; background: #3A2A19; color: #F7E7C6;75 padding: 26px 40px; border-radius: 50px; font-size: 38px; font-weight: 600;76 }77 78 /* Section headers */79 .section-header {80 display: flex; align-items: baseline; justify-content: space-between;81 margin: 40px 0 24px;82 }83 .section-header .title {84 font-size: 56px; font-weight: 800;85 }86 .section-header .see-all {87 font-size: 34px; color: #CFCFCF;88 }89 90 /* Product cards */91 .card-row {92 display: flex; gap: 28px; overflow: hidden;93 }94 .product-card {95 width: 320px;96 }97 .product-card .img {98 width: 100%; height: 320px; border-radius: 32px; overflow: hidden;99 background: #E0E0E0; border: 1px solid #BDBDBD;100 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;101 }102 .product-card .title {103 margin-top: 18px; font-size: 34px; line-height: 1.25; color: #FFFFFF;104 height: 84px; overflow: hidden;105 }106 .product-card .price {107 margin-top: 10px; font-size: 44px; font-weight: 800; color: #FFFFFF;108 }109 110 /* Bottom nav */111 .bottom-nav {112 position: absolute; left: 0; right: 0; bottom: 0;113 height: 220px; background: #121212; border-top: 1px solid #2A2A2A;114 display: flex; justify-content: space-around; align-items: center;115 padding-bottom: 20px;116 }117 .nav-item { width: 160px; text-align: center; color: #CFCFCF; }118 .nav-item .icon-wrap {119 width: 96px; height: 96px; border-radius: 28px; margin: 0 auto 12px;120 display: flex; align-items: center; justify-content: center;121 }122 .nav-item svg { width: 48px; height: 48px; fill: #CFCFCF; }123 .nav-item .label { font-size: 32px; }124 .nav-item.active .icon-wrap { background: #223E8A; }125 .nav-item.active svg { fill: #FFFFFF; }126 .nav-item.active .label { color: #7EA6FF; font-weight: 700; }127 128 /* Gesture bar */129 .gesture {130 position: absolute; left: 50%; transform: translateX(-50%);131 bottom: 236px; width: 360px; height: 12px; background: #EDEDED; border-radius: 12px; opacity: 0.9;132 }133</style>134</head>135<body>136<div id="render-target">137 <div class="screen-padding">138 <div class="logo">139 <span class="e">e</span><span class="b">b</span><span class="a">a</span><span class="y">y</span>140 </div>141 142 <div class="search-wrap">143 <div class="search-bar">144 <!-- Search icon -->145 <svg viewBox="0 0 24 24" aria-hidden="true">146 <path d="M10 4a6 6 0 1 0 0 12A6 6 0 1 0 10 4zm8.7 14.3-3.6-3.6-1.4 1.4 3.6 3.6 1.4-1.4z"></path>147 </svg>148 <div class="search-input">Search on eBay</div>149 <div class="search-actions">150 <div class="icon-btn" title="Voice">151 <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zm-7 8h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6v3h-2v-3a7 7 0 0 1-6-6z"/></svg>152 </div>153 <div class="icon-btn" title="Camera">154 <svg viewBox="0 0 24 24"><path d="M9 4h6l2 2h3v14H4V6h3l2-2zm3 4a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/></svg>155 </div>156 </div>157 </div>158 </div>159 160 <!-- Quick chips -->161 <div class="chip-row">162 <div class="chip">163 <svg viewBox="0 0 24 24"><path d="M4 5h14l2 4v10H4V5zm4 4h6v2H8V9zm0 4h10v2H8v-2z"/></svg>164 <span>Selling</span>165 </div>166 <div class="chip">167 <svg viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-6 9-6 9z"/></svg>168 <span>Saved</span>169 </div>170 <div class="chip">171 <svg viewBox="0 0 24 24"><path d="M12 3v7l4 2-4 2v7l9-9-9-9z"/></svg>172 <span>Deals</span>173 </div>174 <div class="chip">175 <svg viewBox="0 0 24 24"><path d="M6 3h12v4H6V3zm-2 6h16v12H4V9zm4 2v2h8v-2H8z"/></svg>176 <span>Gifting</span>177 </div>178 </div>179 </div>180 181 <!-- Floating cart -->182 <div class="cart-fab">183 <svg viewBox="0 0 24 24"><path d="M7 6h13l-2 8H8L7 6zm-3 0h3l1 10h10l2-8H7l-.3-2H4V6zm4 13a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm9 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>184 </div>185 186 <!-- Banner -->187 <div class="banner">188 <h2>An homage to the fans</h2>189 <p>Reach new heights with the 'Gratitude' AJ1s.</p>190 <a class="cta" href="#">Score a pair</a>191 </div>192 193 <div class="screen-padding">194 <!-- Recently Viewed -->195 <div class="section-header">196 <div class="title">Your Recently Viewed Items</div>197 <div class="see-all">See all</div>198 </div>199 200 <div class="card-row">201 <div class="product-card">202 <div class="img">[IMG: Folding Wall Desk]</div>203 <div class="title">Wall Mounted Folding Table, Wall Desk Fold ...</div>204 <div class="price">$185.94</div>205 </div>206 <div class="product-card">207 <div class="img">[IMG: Wall Mounted Writing Table]</div>208 <div class="title">Wall Mounted Writing Table Wood Folding F...</div>209 <div class="price">$96.99</div>210 </div>211 <div class="product-card">212 <div class="img">[IMG: WORKPRO Wrench Set]</div>213 <div class="title">WORKPRO 22‑Piece Combination Wrench Set...</div>214 <div class="price">$61.90</div>215 </div>216 </div>217 218 <!-- Watched Items -->219 <div class="section-header" style="margin-top: 64px;">220 <div class="title">Your Watched Items</div>221 <div class="see-all">See all</div>222 </div>223 224 <div class="card-row">225 <div class="product-card">226 <div class="img">[IMG: Watched Item Thumbnail]</div>227 <div class="title">Watched Item name goes here with truncation...</div>228 <div class="price">$129.99</div>229 </div>230 <div class="product-card">231 <div class="img">[IMG: Watched Item Thumbnail]</div>232 <div class="title">Another Watched Product sample listing...</div>233 <div class="price">$58.49</div>234 </div>235 <div class="product-card">236 <div class="img">[IMG: Watched Item Thumbnail]</div>237 <div class="title">Accessory or gadget that is being watched...</div>238 <div class="price">$24.50</div>239 </div>240 </div>241 </div>242 243 <!-- Gesture bar -->244 <div class="gesture"></div>245 246 <!-- Bottom Navigation -->247 <div class="bottom-nav">248 <div class="nav-item active">249 <div class="icon-wrap">250 <svg viewBox="0 0 24 24"><path d="M12 3 3 10v11h6v-7h6v7h6V10L12 3z"/></svg>251 </div>252 <div class="label">Home</div>253 </div>254 <div class="nav-item">255 <div class="icon-wrap">256 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-8 9v-2a6 6 0 0 1 12 0v2H4z"/></svg>257 </div>258 <div class="label">My eBay</div>259 </div>260 <div class="nav-item">261 <div class="icon-wrap">262 <svg viewBox="0 0 24 24"><path d="M10 4a6 6 0 1 0 0 12A6 6 0 1 0 10 4zm8.7 14.3-3.6-3.6-1.4 1.4 3.6 3.6 1.4-1.4z"/></svg>263 </div>264 <div class="label">Search</div>265 </div>266 <div class="nav-item">267 <div class="icon-wrap">268 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7l-2 2h16l-2-2z"/></svg>269 </div>270 <div class="label">Inbox</div>271 </div>272 <div class="nav-item">273 <div class="icon-wrap">274 <svg viewBox="0 0 24 24"><path d="M3 11 13 1l8 8-10 10H3v-8zm9-6 7 7-2 2-7-7 2-2z"/></svg>275 </div>276 <div class="label">Selling</div>277 </div>278 </div>279</div>280</body>281</html>