GD-ML/AndroidCode

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 - Mobile Dark</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; position:relative; overflow:hidden;11    background:#000; color:#fff;12  }13 14  /* Status bar */15  .statusbar {16    position:absolute; top:0; left:0; right:0; height:84px;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 32px; font-size:34px; font-weight:600; letter-spacing:0.5px;19  }20  .status-icons { display:flex; align-items:center; gap:22px; opacity:0.9; }21  .dot { width:18px; height:18px; border-radius:50%; background:#fff; }22  .battery {23    width:48px; height:26px; border:3px solid #fff; border-radius:6px; position:relative;24  }25  .battery::after {26    content:""; position:absolute; right:-8px; top:7px; width:6px; height:12px; background:#fff; border-radius:2px;27  }28  .battery-level { position:absolute; top:3px; left:3px; right:10px; bottom:3px; background:#fff; border-radius:2px; }29 30  /* Top header */31  .topbar {32    padding:108px 32px 16px;33  }34  .top-row {35    display:flex; align-items:center; justify-content:space-between;36  }37  .back-and-title { display:flex; align-items:center; gap:22px; }38  .title { font-size:52px; font-weight:700; white-space:nowrap; }39  .circle-btns { display:flex; gap:18px; }40  .circle {41    width:92px; height:92px; border-radius:50%;42    background:#1b1b1b; display:flex; align-items:center; justify-content:center;43  }44  .icon { width:38px; height:38px; fill:#fff; }45 46  /* Save/Sort row */47  .actions {48    margin-top:22px; padding:0 12px;49    display:flex; align-items:center; justify-content:space-between;50  }51  .save-link { display:flex; align-items:center; gap:14px; color:#4c8df6; font-size:36px; font-weight:600; }52  .meta-actions { display:flex; align-items:center; gap:48px; color:#d7d7d7; font-size:34px; }53  .meta-actions span { display:flex; align-items:center; gap:12px; }54  .meta-actions svg { width:30px; height:30px; fill:#d7d7d7; }55 56  /* List */57  .list { margin-top:18px; height:1670px; overflow:hidden; }58  .item {59    display:flex; gap:26px; padding:36px 32px; border-bottom:1px solid #2a2a2a;60  }61  .thumb {62    position:relative; width:430px; height:260px; border-radius:28px; overflow:hidden;63    background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center;64    color:#757575; font-size:28px; text-align:center; padding:12px;65  }66  .heart {67    position:absolute; top:14px; right:14px; width:64px; height:64px; border-radius:50%;68    background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center;69  }70  .heart svg { width:30px; height:30px; fill:#fff; }71  .details { flex:1; padding-top:2px; }72  .title-line { font-size:42px; font-weight:700; line-height:1.15; margin-bottom:6px; }73  .subline { color:#bdbdbd; font-size:30px; margin-bottom:14px; }74  .price { font-size:54px; font-weight:800; margin:2px 0 8px; }75  .meta { color:#bdbdbd; font-size:30px; line-height:1.35; }76 77  /* Bottom results bar */78  .results-bar {79    position:absolute; left:0; right:0; bottom:228px; height:90px;80    background:#0f0f0f; border-top:1px solid #2a2a2a;81    display:flex; align-items:center; padding:0 36px; color:#d7d7d7; font-size:36px; font-weight:600;82  }83 84  /* Bottom nav */85  .tabbar {86    position:absolute; left:0; right:0; bottom:0; height:228px;87    background:#0a0a0a; border-top:1px solid #1f1f1f; display:flex; align-items:center; justify-content:space-around;88    padding-bottom:36px;89  }90  .tab { display:flex; flex-direction:column; align-items:center; gap:14px; color:#d7d7d7; font-size:28px; }91  .tab svg { width:46px; height:46px; fill:#d7d7d7; }92  .tab.active .bubble {93    width:110px; height:110px; border-radius:55px; background:#0f172a; border:2px solid #3b82f6;94    display:flex; align-items:center; justify-content:center;95  }96  .tab.active svg { fill:#3b82f6; }97  .home-indicator {98    position:absolute; left:50%; transform:translateX(-50%);99    bottom:14px; width:320px; height:10px; background:#fff; border-radius:6px; opacity:0.9;100  }101 102  /* Small helper icon buttons */103  .small-heart { width:32px; height:32px; fill:#4c8df6; }104  .back { width:42px; height:42px; fill:#fff; }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status bar -->111  <div class="statusbar">112    <div>9:24</div>113    <div class="status-icons">114      <div class="dot"></div>115      <svg class="icon" viewBox="0 0 24 24" style="width:28px;height:28px;"><circle cx="12" cy="12" r="10" fill="#fff"/></svg>116      <div class="battery"><div class="battery-level"></div></div>117    </div>118  </div>119 120  <!-- Top search header -->121  <div class="topbar">122    <div class="top-row">123      <div class="back-and-title">124        <svg class="back" viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-2 2.1L3 12l10.5-9.6z"/></svg>125        <div class="title">clothes for men lot</div>126      </div>127      <div class="circle-btns">128        <div class="circle">129          <svg class="icon" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 6.3-3.1l4.2 4.2-1.4 1.4-4.2-4.2A8 8 0 0 1 10 18zm0-2.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11z"/></svg>130        </div>131        <div class="circle">132          <svg class="icon" viewBox="0 0 24 24"><path d="M8 6h3l1-2h4l1 2h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm4 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg>133        </div>134        <div class="circle">135          <svg class="icon" viewBox="0 0 24 24"><path d="M7 7h14l-2 10H7L5 5H2V3h4l1.6 8H19"/></svg>136        </div>137      </div>138    </div>139 140    <div class="actions">141      <div class="save-link">142        <svg class="small-heart" viewBox="0 0 24 24"><path d="M12 21s-7-4.3-9.3-8.1C1 9.6 2.5 6 6 6c2 0 3.3 1.2 4 2.3C10.7 7.2 12 6 14 6c3.5 0 5 3.6 3.3 6.9C19 16.7 12 21 12 21z"/></svg>143        <span>Save this search</span>144      </div>145      <div class="meta-actions">146        <span>147          Sort148          <svg viewBox="0 0 24 24"><path d="M7 7h10v2H7V7zm3 5h7v2h-7v-2zm4 5h3v2h-3v-2z"/></svg>149        </span>150        <span>151          Filter152          <svg viewBox="0 0 24 24"><path d="M3 5h18l-7 8v5l-4 2v-7L3 5z"/></svg>153        </span>154      </div>155    </div>156  </div>157 158  <!-- Results list -->159  <div class="list">160    <!-- Item 1 -->161    <div class="item">162      <div class="thumb">163        <div>[IMG: Mixed golf clothing lot]</div>164        <div class="heart">165          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.3-9.3-8.1C1 9.6 2.5 6 6 6c2 0 3.3 1.2 4 2.3C10.7 7.2 12 6 14 6c3.5 0 5 3.6 3.3 6.9C19 16.7 12 21 12 21z"/></svg>166        </div>167      </div>168      <div class="details">169        <div class="title-line">Lot of Women's Jofit Golf Clothing</div>170        <div class="subline">Brand New · Jofit</div>171        <div class="price">$5.50</div>172        <div class="meta">5 bids · 9h 14m<br>+$49.42 shipping<br>from United States</div>173      </div>174    </div>175 176    <!-- Item 2 -->177    <div class="item">178      <div class="thumb">179        <div>[IMG: 30 pieces junior boys golf clothing]</div>180        <div class="heart">181          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.3-9.3-8.1C1 9.6 2.5 6 6 6c2 0 3.3 1.2 4 2.3C10.7 7.2 12 6 14 6c3.5 0 5 3.6 3.3 6.9C19 16.7 12 21 12 21z"/></svg>182        </div>183      </div>184      <div class="details">185        <div class="title-line">Lot of 30 Pieces of Junior Boys Golf Clothing</div>186        <div class="subline">Brand New · GOLF</div>187        <div class="price">$51.00</div>188        <div class="meta">8 bids · 7h 19m<br>+$109.80 shipping<br>from United States</div>189      </div>190    </div>191 192    <!-- Item 3 -->193    <div class="item" style="border-bottom:1px solid #2a2a2a;">194      <div class="thumb" style="border-radius:32px;">195        <div>[IMG: Vintage/retro college shirts bundle]</div>196        <div class="heart">197          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.3-9.3-8.1C1 9.6 2.5 6 6 6c2 0 3.3 1.2 4 2.3C10.7 7.2 12 6 14 6c3.5 0 5 3.6 3.3 6.9C19 16.7 12 21 12 21z"/></svg>198        </div>199      </div>200      <div class="details">201        <div class="title-line">Lot of Vintage / Retro College Clothes Reseller Bundle Basketball Football Shirt</div>202        <div class="subline">Pre-Owned · Unbranded</div>203        <div class="price">$35.00</div>204        <div class="meta">or Best Offer<br>+$31.55 shipping<br>from United States</div>205      </div>206    </div>207  </div>208 209  <!-- Results count bar -->210  <div class="results-bar">6,300+ results</div>211 212  <!-- Bottom navigation -->213  <div class="tabbar">214    <div class="tab">215      <svg viewBox="0 0 24 24"><path d="M3 12l9-8 9 8v8h-6v-5H9v5H3z"/></svg>216      <div>Home</div>217    </div>218    <div class="tab">219      <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-8 2-8 5v2h16v-2c0-3-4-5-8-5z"/></svg>220      <div>My eBay</div>221    </div>222    <div class="tab active">223      <div class="bubble">224        <svg viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 6.3-3.1l4.2 4.2-1.4 1.4-4.2-4.2A8 8 0 0 1 10 18zm0-2.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11z"/></svg>225      </div>226      <div>Search</div>227    </div>228    <div class="tab">229      <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7L4 17v2h16v-2l-2-1z"/></svg>230      <div>Inbox</div>231    </div>232    <div class="tab">233      <svg viewBox="0 0 24 24"><path d="M20 6l-7 14-3-5-5-3 15-6z"/></svg>234      <div>Selling</div>235    </div>236    <div class="home-indicator"></div>237  </div>238 239</div>240</body>241</html>