GD-ML/AndroidCode

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