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>Stays Search 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    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #F7F7F7;14  }15 16  /* Status bar mock */17  .status-bar {18    height: 90px;19    padding: 0 40px;20    color: #111;21    font-weight: 600;22    font-size: 34px;23    display: flex;24    align-items: center;25    justify-content: space-between;26  }27  .status-icons {28    display: flex;29    gap: 22px;30    color: #555;31    font-size: 28px;32    align-items: center;33  }34 35  /* Top actions */36  .top-row {37    position: relative;38    padding: 18px 40px 0 40px;39    height: 120px;40  }41  .close-btn {42    width: 96px;43    height: 96px;44    border-radius: 50%;45    background: #FFFFFF;46    box-shadow: 0 2px 10px rgba(0,0,0,0.08);47    display: flex;48    align-items: center;49    justify-content: center;50    position: absolute;51    left: 28px;52    top: -10px;53    color: #111;54    font-size: 48px;55    font-weight: 600;56  }57 58  .tabs {59    display: flex;60    gap: 48px;61    justify-content: center;62    align-items: flex-end;63    height: 100%;64  }65  .tab {66    font-size: 48px;67    color: #7A7A7A;68    padding-bottom: 12px;69  }70  .tab.active {71    color: #111;72    font-weight: 700;73    border-bottom: 10px solid #111;74    border-radius: 2px;75  }76 77  .field {78    background: #FFFFFF;79    margin: 22px 28px;80    border-radius: 36px;81    box-shadow: 0 6px 24px rgba(0,0,0,0.06);82    padding: 36px 42px;83  }84  .field .row {85    display: flex;86    align-items: center;87    justify-content: space-between;88  }89  .label {90    font-size: 36px;91    color: #555;92  }93  .value {94    font-size: 42px;95    color: #111;96    font-weight: 600;97  }98 99  .who-card {100    background: #FFFFFF;101    margin: 30px 28px;102    border-radius: 40px;103    box-shadow: 0 10px 30px rgba(0,0,0,0.08);104    padding: 44px;105  }106  .who-title {107    font-size: 72px;108    color: #111;109    font-weight: 800;110    margin-bottom: 28px;111    letter-spacing: -0.5px;112  }113  .divider {114    height: 2px;115    background: #ECECEC;116    margin: 34px 0;117  }118  .guest-row {119    display: flex;120    align-items: center;121    justify-content: space-between;122  }123  .guest-info {124    display: flex;125    flex-direction: column;126  }127  .guest-info .name {128    font-size: 48px;129    color: #111;130    font-weight: 700;131  }132  .guest-info .sub {133    font-size: 32px;134    color: #777;135    margin-top: 6px;136  }137  .counter {138    display: flex;139    align-items: center;140    gap: 28px;141  }142  .circle-btn {143    width: 108px;144    height: 108px;145    border-radius: 54px;146    border: 4px solid #CFCFCF;147    display: flex;148    align-items: center;149    justify-content: center;150    color: #555;151    background: #fff;152  }153  .circle-btn svg { width: 46px; height: 46px; }154  .count {155    font-size: 52px;156    font-weight: 700;157    color: #111;158    width: 40px;159    text-align: center;160  }161  .service-link {162    font-size: 36px;163    color: #0057a3;164    text-decoration: underline;165    margin-top: 10px;166  }167 168  /* Bottom actions */169  .bottom-actions {170    position: absolute;171    left: 0;172    right: 0;173    bottom: 160px;174    padding: 0 40px;175    display: flex;176    align-items: center;177    justify-content: space-between;178  }179  .clear-link {180    font-size: 44px;181    color: #111;182    text-decoration: underline;183  }184  .search-btn {185    background: #FF385C;186    color: #FFF;187    border: none;188    border-radius: 28px;189    padding: 28px 44px;190    display: flex;191    align-items: center;192    gap: 18px;193    font-size: 48px;194    font-weight: 700;195    box-shadow: 0 8px 20px rgba(255,56,92,0.4);196  }197  .search-btn svg { width: 54px; height: 54px; }198 199  /* Home indicator */200  .home-indicator {201    position: absolute;202    bottom: 36px;203    left: 50%;204    transform: translateX(-50%);205    width: 360px;206    height: 10px;207    border-radius: 6px;208    background: #CFCFCF;209  }210</style>211</head>212<body>213<div id="render-target">214  <!-- Mock status bar -->215  <div class="status-bar">216    <div>12:58</div>217    <div class="status-icons">218      <span>📅</span>219      <span>☁️</span>220      <span>📶</span>221      <span>🔋</span>222    </div>223  </div>224 225  <!-- Top controls and tabs -->226  <div class="top-row">227    <div class="close-btn">×</div>228    <div class="tabs">229      <div class="tab active">Stays</div>230      <div class="tab">Experiences</div>231    </div>232  </div>233 234  <!-- Fields -->235  <div class="field">236    <div class="row">237      <div class="label">Where</div>238      <div class="value">Newark</div>239    </div>240  </div>241 242  <div class="field">243    <div class="row">244      <div class="label">When</div>245      <div class="value">Jul 1 – 7</div>246    </div>247  </div>248 249  <!-- Who's coming card -->250  <div class="who-card">251    <div class="who-title">Who's coming?</div>252 253    <!-- Adults -->254    <div class="guest-row">255      <div class="guest-info">256        <div class="name">Adults</div>257        <div class="sub">Ages 13 or above</div>258      </div>259      <div class="counter">260        <div class="circle-btn" aria-label="decrease adults">261          <svg viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="2" fill="#444"/></svg>262        </div>263        <div class="count">2</div>264        <div class="circle-btn" aria-label="increase adults">265          <svg viewBox="0 0 24 24"><path d="M11 4h2v16h-2zM4 11h16v2H4z" fill="#444"/></svg>266        </div>267      </div>268    </div>269 270    <div class="divider"></div>271 272    <!-- Children -->273    <div class="guest-row">274      <div class="guest-info">275        <div class="name">Children</div>276        <div class="sub">Ages 2–12</div>277      </div>278      <div class="counter">279        <div class="circle-btn" aria-label="decrease children">280          <svg viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="2" fill="#999"/></svg>281        </div>282        <div class="count" style="color:#777;">0</div>283        <div class="circle-btn" aria-label="increase children">284          <svg viewBox="0 0 24 24"><path d="M11 4h2v16h-2zM4 11h16v2H4z" fill="#444"/></svg>285        </div>286      </div>287    </div>288 289    <div class="divider"></div>290 291    <!-- Infants -->292    <div class="guest-row">293      <div class="guest-info">294        <div class="name">Infants</div>295        <div class="sub">Under 2</div>296      </div>297      <div class="counter">298        <div class="circle-btn" aria-label="decrease infants">299          <svg viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="2" fill="#999"/></svg>300        </div>301        <div class="count" style="color:#777;">0</div>302        <div class="circle-btn" aria-label="increase infants">303          <svg viewBox="0 0 24 24"><path d="M11 4h2v16h-2zM4 11h16v2H4z" fill="#444"/></svg>304        </div>305      </div>306    </div>307 308    <div class="divider"></div>309 310    <!-- Pets -->311    <div class="guest-row">312      <div class="guest-info">313        <div class="name">Pets</div>314        <div class="service-link">Bringing a service animal?</div>315      </div>316      <div class="counter">317        <div class="circle-btn" aria-label="decrease pets">318          <svg viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="2" fill="#999"/></svg>319        </div>320        <div class="count" style="color:#777;">0</div>321        <div class="circle-btn" aria-label="increase pets">322          <svg viewBox="0 0 24 24"><path d="M11 4h2v16h-2zM4 11h16v2H4z" fill="#444"/></svg>323        </div>324      </div>325    </div>326  </div>327 328  <!-- Bottom actions -->329  <div class="bottom-actions">330    <div class="clear-link">Clear all</div>331    <button class="search-btn">332      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="white" stroke-width="2" fill="none"/><path d="M20 20l-4.2-4.2" stroke="white" stroke-width="2" fill="none" stroke-linecap="round"/></svg>333      <span>Search</span>334    </button>335  </div>336 337  <div class="home-indicator"></div>338</div>339</body>340</html>