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>Search Results - Dark UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0b0b0b;15 color: #fff;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17 }18 .status-bar {19 height: 90px;20 color: #eaeaea;21 font-size: 30px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 32px;26 box-sizing: border-box;27 }28 .fake-icons { display: flex; gap: 16px; align-items: center; }29 .battery {30 width: 28px; height: 16px; border: 2px solid #eaeaea; border-radius: 3px; position: relative;31 }32 .battery::after { content: ""; position: absolute; right: -5px; top: 4px; width: 3px; height: 8px; background: #eaeaea; }33 .battery .level { position: absolute; left: 2px; top: 2px; bottom: 2px; right: 8px; background: #eaeaea; }34 .header {35 padding: 10px 28px 20px;36 }37 .title-row {38 display: flex;39 align-items: center;40 justify-content: space-between;41 gap: 18px;42 }43 .title-left {44 display: flex; align-items: center; gap: 18px;45 }46 .title {47 font-size: 56px;48 font-weight: 700;49 letter-spacing: -0.5px;50 }51 .icon-btn {52 width: 88px; height: 88px;53 border-radius: 44px;54 background: #222; 55 display: flex; align-items: center; justify-content: center;56 }57 .inline-icon { fill: none; stroke: #eaeaea; stroke-width: 4; }58 .actions-row {59 display: flex;60 align-items: center;61 justify-content: space-between;62 padding: 14px 4px 0 4px;63 }64 .save-link {65 display: inline-flex; align-items: center; gap: 10px;66 font-size: 34px; color: #4ea1ff; font-weight: 600;67 }68 .filter-actions { display: flex; align-items: center; gap: 36px; color: #dcdcdc; font-size: 34px; }69 .filter-actions span { display: inline-flex; align-items: center; gap: 10px; }70 .list {71 padding: 16px 24px 0 24px;72 box-sizing: border-box;73 }74 .item {75 display: flex; gap: 28px;76 padding: 32px 8px;77 position: relative;78 }79 .item + .item { border-top: 2px solid #1f1f1f; }80 .thumb {81 position: relative;82 width: 320px; height: 260px;83 border-radius: 34px;84 background: #E0E0E0;85 border: 1px solid #BDBDBD;86 display: flex; align-items: center; justify-content: center;87 color: #757575;88 font-size: 28px;89 text-align: center;90 padding: 10px;91 box-sizing: border-box;92 }93 .fav {94 position: absolute; right: 16px; top: 16px;95 width: 72px; height: 72px; border-radius: 36px;96 background: rgba(0,0,0,0.6);97 display: flex; align-items: center; justify-content: center;98 }99 .fav svg { stroke: #fff; }100 .content {101 flex: 1;102 }103 .title-txt {104 font-size: 42px; line-height: 1.2; font-weight: 700; color: #f1f1f1;105 margin-bottom: 8px;106 }107 .subtitle {108 font-size: 30px; color: #bcbcbc; margin-bottom: 16px;109 }110 .price {111 font-size: 54px; font-weight: 800; margin: 8px 0;112 }113 .meta {114 font-size: 28px; color: #c7c7c7; line-height: 1.4;115 }116 .results-footer {117 position: absolute; left: 0; right: 0;118 bottom: 220px;119 height: 100px;120 background: #0f0f0f;121 border-top: 2px solid #1f1f1f;122 display: flex; align-items: center; justify-content: center;123 color: #d8d8d8; font-size: 34px; font-weight: 600;124 }125 .tabbar {126 position: absolute; left: 0; right: 0; bottom: 64px;127 height: 140px; background: #121212; border-top: 2px solid #1f1f1f;128 display: flex; align-items: center; justify-content: space-around;129 color: #d0d0d0;130 }131 .tab {132 display: flex; flex-direction: column; align-items: center; gap: 10px;133 font-size: 26px;134 }135 .tab .icon { width: 56px; height: 56px; }136 .active { color: #4ea1ff; }137 .home-indicator {138 position: absolute; left: 50%; transform: translateX(-50%);139 bottom: 18px; width: 300px; height: 12px; border-radius: 6px; background: #e8e8e8;140 opacity: 0.9;141 }142 .divider { height: 16px; }143</style>144</head>145<body>146<div id="render-target">147 148 <!-- Status bar -->149 <div class="status-bar">150 <div style="display:flex;align-items:center;gap:12px;">151 <span>9:24</span>152 <div style="width:24px;height:24px;background:#eaeaea;border-radius:4px;"></div>153 </div>154 <div class="fake-icons">155 <svg width="26" height="26" viewBox="0 0 24 24" class="inline-icon"><circle cx="12" cy="12" r="9" stroke="#eaeaea"/></svg>156 <div class="battery"><div class="level"></div></div>157 </div>158 </div>159 160 <!-- Header with title and actions -->161 <div class="header">162 <div class="title-row">163 <div class="title-left">164 <div class="icon-btn">165 <svg width="42" height="42" viewBox="0 0 24 24" class="inline-icon" stroke="#eaeaea">166 <path d="M15 4 L7 12 L15 20" />167 </svg>168 </div>169 <div class="title">clothes for men lot</div>170 </div>171 <div style="display:flex;gap:14px;">172 <div class="icon-btn" title="Search">173 <svg width="40" height="40" viewBox="0 0 24 24" class="inline-icon" stroke="#eaeaea">174 <circle cx="11" cy="11" r="7"></circle>175 <line x1="16" y1="16" x2="21" y2="21"></line>176 </svg>177 </div>178 <div class="icon-btn" title="Camera">179 <svg width="40" height="40" viewBox="0 0 24 24" class="inline-icon" stroke="#eaeaea">180 <rect x="3" y="6" width="18" height="12" rx="2"></rect>181 <circle cx="12" cy="12" r="3"></circle>182 <path d="M8 6 L10 4 L14 4 L16 6" />183 </svg>184 </div>185 <div class="icon-btn" title="Cart">186 <svg width="40" height="40" viewBox="0 0 24 24" class="inline-icon" stroke="#eaeaea">187 <circle cx="9" cy="20" r="1.6"></circle>188 <circle cx="17" cy="20" r="1.6"></circle>189 <path d="M3 4h2l2 12h10l2-8H7"></path>190 </svg>191 </div>192 </div>193 </div>194 195 <div class="actions-row">196 <div class="save-link">197 <svg width="34" height="34" viewBox="0 0 24 24" class="inline-icon" stroke="#4ea1ff">198 <path d="M12 21s-7-4.3-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.7-7 10-7 10z"></path>199 </svg>200 <span>Save this search</span>201 </div>202 <div class="filter-actions">203 <span>204 <span>Sort</span>205 <svg width="28" height="28" viewBox="0 0 24 24" class="inline-icon" stroke="#dcdcdc">206 <path d="M7 8l5-5 5 5"></path>207 <path d="M7 16l5 5 5-5"></path>208 </svg>209 </span>210 <span>211 <span>Filter</span>212 <svg width="28" height="28" viewBox="0 0 24 24" class="inline-icon" stroke="#dcdcdc">213 <path d="M3 4h18l-7 8v6l-4 2v-8z"></path>214 </svg>215 </span>216 </div>217 </div>218 </div>219 220 <!-- List -->221 <div class="list">222 223 <div class="item">224 <div class="thumb">225 [IMG: Product photo]226 <div class="fav">227 <svg width="32" height="32" viewBox="0 0 24 24" class="inline-icon">228 <path d="M12 21s-7-4.3-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.7-7 10-7 10z"></path>229 </svg>230 </div>231 </div>232 <div class="content">233 <div class="title-txt">Lot of Women's Jofit Golf Clothing</div>234 <div class="subtitle">Brand New · Jofit</div>235 <div class="price">$5.50</div>236 <div class="meta">5 bids · 9h 14m<br>+$49.42 shipping<br>from United States</div>237 </div>238 </div>239 240 <div class="item">241 <div class="thumb">242 [IMG: Clothing lot spread]243 <div class="fav">244 <svg width="32" height="32" viewBox="0 0 24 24" class="inline-icon">245 <path d="M12 21s-7-4.3-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.7-7 10-7 10z"></path>246 </svg>247 </div>248 </div>249 <div class="content">250 <div class="title-txt">Lot of 30 Pieces of Junior Boys Golf Clothing</div>251 <div class="subtitle">Brand New · GOLF</div>252 <div class="price">$51.00</div>253 <div class="meta">8 bids · 7h 19m<br>+$109.80 shipping<br>from United States</div>254 </div>255 </div>256 257 <div class="item">258 <div class="thumb">259 [IMG: Product photo]260 <div class="fav">261 <svg width="32" height="32" viewBox="0 0 24 24" class="inline-icon">262 <path d="M12 21s-7-4.3-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.7-7 10-7 10z"></path>263 </svg>264 </div>265 </div>266 <div class="content">267 <div class="title-txt">Lot of Vintage / Retro College Clothes Reseller Bundle Basketball Football Shirt</div>268 <div class="subtitle">Pre-Owned · Unbranded</div>269 <div class="price">$35.00</div>270 <div class="meta">or Best Offer<br>+$31.55 shipping<br>from United States</div>271 </div>272 </div>273 274 <div class="divider"></div>275 </div>276 277 <!-- Results count strip -->278 <div class="results-footer">6,300+ results</div>279 280 <!-- Bottom Tab Bar -->281 <div class="tabbar">282 <div class="tab">283 <svg class="icon" viewBox="0 0 24 24" class="inline-icon" stroke="#d0d0d0">284 <path d="M3 11l9-7 9 7v9H3z"></path>285 </svg>286 <span>Home</span>287 </div>288 <div class="tab">289 <svg class="icon" viewBox="0 0 24 24" class="inline-icon" stroke="#d0d0d0">290 <circle cx="12" cy="8" r="4"></circle>291 <path d="M4 20c1-4 7-6 8-6s7 2 8 6"></path>292 </svg>293 <span>My eBay</span>294 </div>295 <div class="tab active">296 <svg class="icon" viewBox="0 0 24 24" class="inline-icon" stroke="#4ea1ff">297 <circle cx="11" cy="11" r="7"></circle>298 <line x1="16" y1="16" x2="21" y2="21"></line>299 </svg>300 <span>Search</span>301 </div>302 <div class="tab">303 <svg class="icon" viewBox="0 0 24 24" class="inline-icon" stroke="#d0d0d0">304 <path d="M18 8a6 6 0 1 1-12 0"></path>305 <path d="M6 8v8a6 6 0 0 0 12 0V8"></path>306 </svg>307 <span>Inbox</span>308 </div>309 <div class="tab">310 <svg class="icon" viewBox="0 0 24 24" class="inline-icon" stroke="#d0d0d0">311 <path d="M3 7l9-4 9 4-9 4-9-4z"></path>312 <path d="M3 7v10l9 4 9-4V7"></path>313 </svg>314 <span>Selling</span>315 </div>316 </div>317 318 <div class="home-indicator"></div>319</div>320</body>321</html>