GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Airbnb Style Filter UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    border-radius: 0;15    box-shadow: none;16    color: #222;17  }18 19  /* Status bar */20  .status-bar {21    position: relative;22    height: 120px;23    padding: 0 40px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #222;28    font-weight: 600;29    font-size: 40px;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 26px;35  }36  .status-icon {37    width: 40px; height: 40px; border-radius: 6px; background: #eaeaea;38    display: inline-flex; align-items: center; justify-content: center;39    border: 1px solid #d0d0d0; font-size: 26px; color: #666;40  }41  .status-right {42    display: flex; align-items: center; gap: 24px;43    color: #666; font-size: 32px;44  }45 46  /* Close button */47  .close-btn {48    position: absolute;49    top: 140px;50    left: 44px;51    width: 96px;52    height: 96px;53    border-radius: 50%;54    background: #ffffff;55    border: 1px solid #E0E0E0;56    box-shadow: 0 8px 16px rgba(0,0,0,0.08);57    display: flex; align-items: center; justify-content: center;58  }59  .close-btn svg { width: 44px; height: 44px; stroke: #333; stroke-width: 8; }60 61  /* Tabs */62  .tabs {63    margin-top: 110px;64    width: 100%;65    display: flex;66    justify-content: center;67    gap: 80px;68    align-items: center;69  }70  .tab {71    font-size: 58px;72    font-weight: 700;73    color: #777;74    position: relative;75    padding-bottom: 16px;76  }77  .tab.active {78    color: #222;79  }80  .tab.active::after {81    content: "";82    position: absolute;83    left: 0;84    right: 0;85    bottom: 0;86    height: 8px;87    background: #222;88    border-radius: 4px;89  }90 91  /* Cards */92  .card {93    width: 980px;94    margin: 36px auto;95    background: #fff;96    border: 1px solid #e9e9e9;97    border-radius: 36px;98    box-shadow: 0 12px 24px rgba(0,0,0,0.06);99    padding: 34px 40px;100  }101 102  .row {103    display: flex;104    align-items: center;105    justify-content: space-between;106    padding: 18px 0;107  }108  .row + .row { border-top: 1px solid #eee; }109  .label {110    font-size: 44px;111    font-weight: 700;112    color: #222;113  }114  .value {115    font-size: 44px;116    color: #222;117    font-weight: 600;118  }119  .sub {120    font-size: 32px;121    color: #777;122    margin-top: 6px;123    font-weight: 500;124  }125 126  /* Count controls */127  .controls {128    display: flex;129    align-items: center;130    gap: 28px;131  }132  .icon-btn {133    width: 100px;134    height: 100px;135    border: 2px solid #BDBDBD;136    border-radius: 50%;137    display: flex; align-items: center; justify-content: center;138    background: #fff;139  }140  .count {141    font-size: 46px; font-weight: 700; color: #222; width: 50px; text-align: center;142  }143 144  /* Who's coming card specifics */145  .who-title {146    font-size: 64px;147    font-weight: 800;148    margin-bottom: 18px;149    color: #111;150  }151  .small-stack {152    display: flex; flex-direction: column;153  }154  .link {155    font-size: 34px;156    color: #444;157    text-decoration: underline;158    margin-top: 10px;159    font-weight: 600;160  }161 162  /* Bottom actions */163  .bottom-bar {164    position: absolute;165    left: 0; right: 0; bottom: 0;166    height: 220px;167    background: #fff;168    border-top: 1px solid #eee;169    display: flex;170    align-items: center;171    justify-content: space-between;172    padding: 0 44px;173  }174  .clear-link {175    font-size: 44px;176    color: #1b1b1b;177    text-decoration: underline;178    font-weight: 700;179  }180  .search-btn {181    background: #E91E63;182    color: #fff;183    border: none;184    border-radius: 28px;185    height: 120px;186    width: 420px;187    display: flex; align-items: center; justify-content: center;188    gap: 18px;189    font-size: 48px; font-weight: 800;190    box-shadow: 0 10px 20px rgba(233,30,99,0.3);191  }192  .search-btn svg { width: 54px; height: 54px; fill: none; stroke: #fff; stroke-width: 6; }193 194</style>195</head>196<body>197<div id="render-target">198 199  <!-- Status Bar -->200  <div class="status-bar">201    <div class="status-left">202      <div>12:59</div>203      <div class="status-icon">📅</div>204      <div class="status-icon">☁️</div>205    </div>206    <div class="status-right">207      <span>📶</span>208      <span>🔋</span>209    </div>210  </div>211 212  <!-- Close Button -->213  <div class="close-btn">214    <svg viewBox="0 0 24 24">215      <path d="M5 5 L19 19 M19 5 L5 19" />216    </svg>217  </div>218 219  <!-- Tabs -->220  <div class="tabs">221    <div class="tab active">Stays</div>222    <div class="tab">Experiences</div>223  </div>224 225  <!-- Where card -->226  <div class="card">227    <div class="row">228      <div class="small-stack">229        <div class="label">Where</div>230      </div>231      <div class="value">Newark</div>232    </div>233  </div>234 235  <!-- When card -->236  <div class="card">237    <div class="row">238      <div class="small-stack">239        <div class="label">When</div>240      </div>241      <div class="value">Jul 1 – 7</div>242    </div>243  </div>244 245  <!-- Who's coming card -->246  <div class="card">247    <div class="who-title">Who's coming?</div>248 249    <div class="row">250      <div class="small-stack">251        <div class="label">Adults</div>252        <div class="sub">Ages 13 or above</div>253      </div>254      <div class="controls">255        <div class="icon-btn">256          <svg viewBox="0 0 48 48">257            <circle cx="24" cy="24" r="20" fill="none" stroke="#BDBDBD" stroke-width="0"></circle>258            <path d="M12 24 H36" stroke="#777" stroke-width="4" />259          </svg>260        </div>261        <div class="count">4</div>262        <div class="icon-btn">263          <svg viewBox="0 0 48 48">264            <path d="M24 12 V36 M12 24 H36" stroke="#777" stroke-width="4" />265          </svg>266        </div>267      </div>268    </div>269 270    <div class="row">271      <div class="small-stack">272        <div class="label">Children</div>273        <div class="sub">Ages 2–12</div>274      </div>275      <div class="controls">276        <div class="icon-btn">277          <svg viewBox="0 0 48 48">278            <path d="M12 24 H36" stroke="#777" stroke-width="4" />279          </svg>280        </div>281        <div class="count">0</div>282        <div class="icon-btn">283          <svg viewBox="0 0 48 48">284            <path d="M24 12 V36 M12 24 H36" stroke="#777" stroke-width="4" />285          </svg>286        </div>287      </div>288    </div>289 290    <div class="row">291      <div class="small-stack">292        <div class="label">Infants</div>293        <div class="sub">Under 2</div>294      </div>295      <div class="controls">296        <div class="icon-btn">297          <svg viewBox="0 0 48 48">298            <path d="M12 24 H36" stroke="#777" stroke-width="4" />299          </svg>300        </div>301        <div class="count">0</div>302        <div class="icon-btn">303          <svg viewBox="0 0 48 48">304            <path d="M24 12 V36 M12 24 H36" stroke="#777" stroke-width="4" />305          </svg>306        </div>307      </div>308    </div>309 310    <div class="row">311      <div class="small-stack">312        <div class="label">Pets</div>313        <div class="link">Bringing a service animal?</div>314      </div>315      <div class="controls">316        <div class="icon-btn">317          <svg viewBox="0 0 48 48">318            <path d="M12 24 H36" stroke="#777" stroke-width="4" />319          </svg>320        </div>321        <div class="count">0</div>322        <div class="icon-btn">323          <svg viewBox="0 0 48 48">324            <path d="M24 12 V36 M12 24 H36" stroke="#777" stroke-width="4" />325          </svg>326        </div>327      </div>328    </div>329  </div>330 331  <!-- Bottom actions -->332  <div class="bottom-bar">333    <div class="clear-link">Clear all</div>334    <button class="search-btn">335      <svg viewBox="0 0 24 24">336        <circle cx="10" cy="10" r="6"></circle>337        <path d="M15 15 L22 22" />338      </svg>339      <span>Search</span>340    </button>341  </div>342 343</div>344</body>345</html>