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>BMW X7 SUV - Search Results</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    color: #FFFFFF;16  }17  .top-bar {18    padding: 48px 48px 24px 48px;19    border-bottom: 1px solid #121212;20  }21  .title-row {22    display: flex;23    align-items: center;24    justify-content: space-between;25    margin-bottom: 24px;26  }27  .left-title {28    display: flex;29    align-items: center;30    gap: 24px;31  }32  .title-text {33    font-weight: 700;34    font-size: 56px;35    letter-spacing: 0.2px;36  }37  .circle-btn {38    width: 96px;39    height: 96px;40    background: #1E1E1E;41    border-radius: 999px;42    display: flex;43    align-items: center;44    justify-content: center;45  }46  .circle-btn svg { width: 48px; height: 48px; fill: none; stroke: #FFFFFF; stroke-width: 4; }47  .action-row {48    display: flex;49    align-items: center;50    justify-content: space-between;51    padding: 8px 0 12px 0;52  }53  .link-left, .link-right {54    display: flex;55    align-items: center;56    gap: 14px;57  }58  .blue {59    color: #3D6AE8;60    font-size: 40px;61    font-weight: 500;62  }63  .grey {64    color: #B3B3B3;65  }66 67  /* Fit card */68  .fit-card {69    margin: 24px 24px 16px 24px;70    background: #1F1F1F;71    border-radius: 28px;72    padding: 40px 40px 48px 40px;73  }74  .fit-title {75    font-size: 56px;76    font-weight: 800;77    margin-bottom: 20px;78  }79  .fit-desc {80    font-size: 38px;81    color: #BDBDBD;82    line-height: 1.35;83    margin-bottom: 38px;84  }85  .big-pill {86    width: 100%;87    height: 130px;88    border-radius: 70px;89    background: #6FA9FF;90    display: flex;91    align-items: center;92    justify-content: center;93    color: #0D1B3D;94    font-weight: 800;95    font-size: 44px;96  }97 98  /* List items */99  .results {100    margin-top: 12px;101    padding: 0 24px 0 24px;102  }103  .item-card {104    position: relative;105    background: #222326;106    border-radius: 32px;107    display: flex;108    gap: 28px;109    padding: 24px;110    margin-bottom: 24px;111    border: 1px solid #121212;112  }113  .img-box {114    width: 340px;115    height: 220px;116    background: #E0E0E0;117    border: 1px solid #BDBDBD;118    border-radius: 26px;119    display: flex;120    align-items: center;121    justify-content: center;122    color: #757575;123    font-size: 30px;124    text-align: center;125  }126  .heart-badge {127    position: absolute;128    right: 24px;129    top: 24px;130    width: 72px;131    height: 72px;132    border-radius: 36px;133    background: rgba(0,0,0,0.55);134    backdrop-filter: blur(2px);135    display: flex;136    align-items: center;137    justify-content: center;138    border: 1px solid #333;139  }140  .heart-badge svg { width: 38px; height: 38px; stroke: #FFFFFF; stroke-width: 4; fill: none; }141  .item-content {142    flex: 1;143    display: flex;144    flex-direction: column;145    justify-content: center;146  }147  .item-title {148    font-size: 40px;149    font-weight: 700;150    margin-bottom: 12px;151  }152  .meta {153    font-size: 34px;154    color: #9AA0A6;155    margin-bottom: 18px;156  }157  .price {158    font-size: 56px;159    font-weight: 800;160    margin-bottom: 10px;161  }162  .sub {163    font-size: 34px;164    color: #C7C7C7;165  }166 167  .results-count {168    text-align: center;169    font-size: 36px;170    color: #DADADA;171    padding: 20px 0 16px 0;172  }173 174  /* Bottom nav */175  .bottom-nav {176    position: absolute;177    left: 0;178    bottom: 0;179    width: 1080px;180    background: #0B0B0B;181    border-top: 1px solid #1A1A1A;182    height: 190px;183    display: flex;184    align-items: center;185    justify-content: space-around;186  }187  .nav-item {188    display: flex;189    flex-direction: column;190    align-items: center;191    gap: 14px;192    color: #D7D7D7;193    font-size: 32px;194  }195  .nav-item svg { width: 52px; height: 52px; stroke: #D7D7D7; fill: none; stroke-width: 4; }196  .nav-item.active .icon-wrap {197    width: 100px;198    height: 100px;199    background: #182445;200    border-radius: 50px;201    display: flex;202    align-items: center;203    justify-content: center;204  }205  .nav-item.active svg { stroke: #3D6AE8; }206 207  /* Tiny icons (sort/filter) */208  .tiny-icon { width: 38px; height: 38px; stroke: #3D6AE8; fill: none; stroke-width: 4; }209 210  /* Back icon */211  .back-icon { width: 56px; height: 56px; stroke: #FFFFFF; fill: none; stroke-width: 6; }212</style>213</head>214<body>215<div id="render-target">216 217  <div class="top-bar">218    <div class="title-row">219      <div class="left-title">220        <svg class="back-icon" viewBox="0 0 24 24">221          <path d="M15 6l-6 6 6 6"/>222        </svg>223        <div class="title-text">BMW X7 SUV</div>224      </div>225      <div style="display:flex; gap:18px;">226        <div class="circle-btn" title="Search">227          <svg viewBox="0 0 24 24">228            <circle cx="10" cy="10" r="6"></circle>229            <path d="M15 15l6 6"></path>230          </svg>231        </div>232        <div class="circle-btn" title="Camera">233          <svg viewBox="0 0 24 24">234            <path d="M4 19h16V8H4z"></path>235            <path d="M8 8l2-3h4l2 3"></path>236            <circle cx="12" cy="13" r="3"></circle>237          </svg>238        </div>239        <div class="circle-btn" title="Cart">240          <svg viewBox="0 0 24 24">241            <path d="M3 5h3l2 12h10l2-8H7"></path>242            <circle cx="9" cy="20" r="2"></circle>243            <circle cx="17" cy="20" r="2"></circle>244          </svg>245        </div>246      </div>247    </div>248 249    <div class="action-row">250      <div class="link-left">251        <svg class="tiny-icon" viewBox="0 0 24 24">252          <path d="M12 21s7-4.35 7-10a4 4 0 0 0-7-2 4 4 0 0 0-7 2c0 5.65 7 10 7 10z"></path>253        </svg>254        <span class="blue">Save this search</span>255      </div>256      <div class="link-right" style="gap:28px;">257        <div class="link-left">258          <svg class="tiny-icon" viewBox="0 0 24 24">259            <path d="M8 5v14M16 5v14"></path>260            <path d="M6 9l2-4 2 4M14 15l2 4 2-4"></path>261          </svg>262          <span class="blue">Sort</span>263        </div>264        <div class="link-left">265          <svg class="tiny-icon" viewBox="0 0 24 24">266            <path d="M3 6h18l-7 8v6l-4-2v-4z"></path>267          </svg>268          <span class="blue">Filter</span>269        </div>270      </div>271    </div>272  </div>273 274  <div class="fit-card">275    <div class="fit-title">Find parts that fit</div>276    <div class="fit-desc">We need more information about your vehicle to confirm fit.</div>277    <div class="big-pill">Finish adding vehicle</div>278  </div>279 280  <div class="results">281    <div class="item-card">282      <div class="img-box">[IMG: White BMW X7 - front angle]</div>283      <div class="heart-badge">284        <svg viewBox="0 0 24 24">285          <path d="M12 21s7-4.35 7-10a4 4 0 0 0-7-2 4 4 0 0 0-7 2c0 5.65 7 10 7 10z"></path>286        </svg>287      </div>288      <div class="item-content">289        <div class="item-title">2022 BMW X7 X7 M50i AWD SUV Highly Optioned HUGE $108k MSRP</div>290        <div class="meta">Pre-Owned · Year: 2022</div>291        <div class="price">$72,999.00</div>292        <div class="sub">or Best Offer<br>Free local pickup</div>293      </div>294    </div>295 296    <div class="item-card">297      <div class="img-box">[IMG: Silver BMW X7 - side view]</div>298      <div class="heart-badge">299        <svg viewBox="0 0 24 24">300          <path d="M12 21s7-4.35 7-10a4 4 0 0 0-7-2 4 4 0 0 0-7 2c0 5.65 7 10 7 10z"></path>301        </svg>302      </div>303      <div class="item-content">304        <div class="item-title">2023 BMW X7 XDRIVE40I</div>305        <div class="meta">Pre-Owned · Year: 2023</div>306        <div class="price">$79,500.00</div>307        <div class="sub">or Best Offer<br>Free local pickup<br>39 watchers</div>308      </div>309    </div>310  </div>311 312  <div class="results-count">15 results</div>313 314  <div class="bottom-nav">315    <div class="nav-item">316      <svg viewBox="0 0 24 24">317        <path d="M3 11l9-8 9 8v9H15v-6H9v6H3z"></path>318      </svg>319      <div>Home</div>320    </div>321    <div class="nav-item">322      <svg viewBox="0 0 24 24">323        <circle cx="12" cy="8" r="4"></circle>324        <path d="M4 20c0-4 3.5-6 8-6s8 2 8 6"></path>325      </svg>326      <div>My eBay</div>327    </div>328    <div class="nav-item active">329      <div class="icon-wrap">330        <svg viewBox="0 0 24 24">331          <circle cx="10" cy="10" r="6"></circle>332          <path d="M15 15l6 6"></path>333        </svg>334      </div>335      <div style="color:#FFFFFF;">Search</div>336    </div>337    <div class="nav-item">338      <svg viewBox="0 0 24 24">339        <path d="M6 20l6-6 6 6"></path>340        <path d="M12 4v10"></path>341      </svg>342      <div>Inbox</div>343    </div>344    <div class="nav-item">345      <svg viewBox="0 0 24 24">346        <path d="M6 6h12v14H6z"></path>347        <circle cx="9" cy="10" r="1.5"></circle>348        <path d="M6 9h12"></path>349      </svg>350      <div>Selling</div>351    </div>352  </div>353 354</div>355</body>356</html>