GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</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    width:1080px;9    height:2400px;10    position:relative;11    overflow:hidden;12    background:#F6F6F6;13  }14 15  /* Status bar */16  .status-bar {17    position:absolute;18    top:24px;19    left:40px;20    right:40px;21    height:60px;22    display:flex;23    align-items:center;24    justify-content:space-between;25    color:#222;26    font-weight:600;27    font-size:36px;28  }29  .status-left {30    display:flex;31    align-items:center;32    gap:26px;33  }34  .status-right {35    display:flex;36    align-items:center;37    gap:28px;38  }39  .icon {40    width:40px; height:40px;41  }42 43  /* Close button */44  .close-btn {45    position:absolute;46    top:110px;47    left:46px;48    width:96px;49    height:96px;50    border-radius:50%;51    background:#FFFFFF;52    box-shadow:0 6px 18px rgba(0,0,0,0.12);53    border:1px solid #E5E5E5;54    display:flex;55    align-items:center;56    justify-content:center;57  }58  .tabs {59    position:absolute;60    top:116px;61    left:220px;62    display:flex;63    gap:40px;64    align-items:flex-end;65  }66  .tab {67    font-size:56px;68    font-weight:700;69    color:#7A7A7A;70    padding-bottom:18px;71  }72  .tab.active {73    color:#1F1F1F;74    border-bottom:8px solid #1F1F1F;75  }76 77  /* Search fields wrapper */78  .search-card {79    position:absolute;80    top:220px;81    left:40px;82    right:40px;83    background:transparent;84  }85  .field {86    background:#FFFFFF;87    border:1px solid #E5E5E5;88    border-radius:48px;89    height:160px;90    margin-bottom:28px;91    display:flex;92    align-items:center;93    justify-content:space-between;94    padding:0 48px;95    box-shadow:0 8px 20px rgba(0,0,0,0.05);96  }97  .label {98    font-size:44px;99    color:#555;100    font-weight:600;101  }102  .value {103    font-size:48px;104    color:#1F1F1F;105    font-weight:700;106  }107 108  /* Who's coming panel */109  .panel {110    position:absolute;111    top:520px;112    left:40px;113    right:40px;114    background:#FFFFFF;115    border:1px solid #E9E9E9;116    border-radius:56px;117    box-shadow:0 10px 24px rgba(0,0,0,0.07);118    padding:54px;119  }120  .panel-title {121    font-size:84px;122    font-weight:800;123    color:#1F1F1F;124    margin-bottom:30px;125  }126  .row {127    display:flex;128    align-items:center;129    justify-content:space-between;130    padding:36px 0;131    border-top:1px solid #F0F0F0;132  }133  .row:first-of-type { border-top:none; }134  .row-left {135    display:flex;136    flex-direction:column;137  }138  .row-left .main {139    font-size:56px;140    font-weight:700;141    color:#1F1F1F;142    margin-bottom:8px;143  }144  .row-left .sub {145    font-size:38px;146    color:#777;147    font-weight:600;148  }149  .row-right {150    display:flex;151    align-items:center;152    gap:34px;153  }154  .circle-btn {155    width:110px;156    height:110px;157    border-radius:55px;158    border:2px solid #BDBDBD;159    background:#FFF;160    display:flex;161    align-items:center;162    justify-content:center;163  }164  .count {165    font-size:56px;166    font-weight:800;167    color:#1F1F1F;168    width:60px;169    text-align:center;170  }171  .service-link {172    font-size:40px;173    color:#0A6;174    text-decoration:underline;175    margin-top:10px;176  }177 178  /* Bottom bar */179  .bottom-bar {180    position:absolute;181    left:0;182    right:0;183    bottom:80px;184    padding:0 40px;185    display:flex;186    align-items:center;187    justify-content:space-between;188  }189  .clear-link {190    font-size:48px;191    color:#1F1F1F;192    text-decoration:underline;193    font-weight:700;194  }195  .search-btn {196    width:720px;197    height:140px;198    border-radius:36px;199    background:#D83B57;200    color:#FFFFFF;201    display:flex;202    align-items:center;203    justify-content:center;204    gap:24px;205    font-size:56px;206    font-weight:800;207    box-shadow:0 10px 20px rgba(216,59,87,0.35);208  }209 210  /* Misc */211  .divider {212    height:1px;213    background:#EEE;214    margin:18px 0;215  }216</style>217</head>218<body>219<div id="render-target">220 221  <!-- Status bar -->222  <div class="status-bar">223    <div class="status-left">224      <div>12:59</div>225      <!-- calendar icon -->226      <svg class="icon" viewBox="0 0 24 24">227        <rect x="3" y="4" width="18" height="16" rx="3" ry="3" fill="#666"/>228        <rect x="3" y="8" width="18" height="2" fill="#fff"/>229      </svg>230      <!-- cloud icon -->231      <svg class="icon" viewBox="0 0 24 24">232        <path d="M6 15a5 5 0 0 1 9-3h1a4 4 0 0 1 0 8H7a4 4 0 0 1-1-5z" fill="#666"/>233      </svg>234    </div>235    <div class="status-right">236      <!-- wifi icon -->237      <svg class="icon" viewBox="0 0 24 24">238        <path d="M3 9c5-5 13-5 18 0" stroke="#222" stroke-width="2" fill="none"/>239        <path d="M6 12c3-3 9-3 12 0" stroke="#222" stroke-width="2" fill="none"/>240        <circle cx="12" cy="17" r="2" fill="#222"/>241      </svg>242      <!-- battery icon -->243      <svg class="icon" viewBox="0 0 28 24">244        <rect x="2" y="5" width="20" height="14" rx="3" ry="3" stroke="#222" stroke-width="2" fill="none"/>245        <rect x="4" y="7" width="16" height="10" fill="#222"/>246        <rect x="22" y="9" width="4" height="6" rx="1" fill="#222"/>247      </svg>248    </div>249  </div>250 251  <!-- Close button -->252  <div class="close-btn">253    <svg width="42" height="42" viewBox="0 0 24 24">254      <path d="M5 5l14 14M19 5L5 19" stroke="#333" stroke-width="2" stroke-linecap="round"/>255    </svg>256  </div>257 258  <!-- Tabs -->259  <div class="tabs">260    <div class="tab active">Stays</div>261    <div class="tab">Experiences</div>262  </div>263 264  <!-- Search card -->265  <div class="search-card">266    <div class="field">267      <div class="label">Where</div>268      <div class="value">Newark</div>269    </div>270    <div class="field">271      <div class="label">When</div>272      <div class="value">Jul 1 – 7</div>273    </div>274  </div>275 276  <!-- Who's coming panel -->277  <div class="panel">278    <div class="panel-title">Who's coming?</div>279 280    <!-- Adults -->281    <div class="row">282      <div class="row-left">283        <div class="main">Adults</div>284        <div class="sub">Ages 13 or above</div>285      </div>286      <div class="row-right">287        <div class="circle-btn">288          <svg width="40" height="40" viewBox="0 0 24 24">289            <path d="M5 12h14" stroke="#666" stroke-width="2" stroke-linecap="round"/>290          </svg>291        </div>292        <div class="count">5</div>293        <div class="circle-btn">294          <svg width="40" height="40" viewBox="0 0 24 24">295            <path d="M12 5v14M5 12h14" stroke="#333" stroke-width="2" stroke-linecap="round"/>296          </svg>297        </div>298      </div>299    </div>300 301    <!-- Children -->302    <div class="row">303      <div class="row-left">304        <div class="main">Children</div>305        <div class="sub">Ages 2–12</div>306      </div>307      <div class="row-right">308        <div class="circle-btn" style="opacity:0.7">309          <svg width="40" height="40" viewBox="0 0 24 24">310            <path d="M5 12h14" stroke="#666" stroke-width="2" stroke-linecap="round"/>311          </svg>312        </div>313        <div class="count">0</div>314        <div class="circle-btn">315          <svg width="40" height="40" viewBox="0 0 24 24">316            <path d="M12 5v14M5 12h14" stroke="#333" stroke-width="2" stroke-linecap="round"/>317          </svg>318        </div>319      </div>320    </div>321 322    <!-- Infants -->323    <div class="row">324      <div class="row-left">325        <div class="main">Infants</div>326        <div class="sub">Under 2</div>327      </div>328      <div class="row-right">329        <div class="circle-btn" style="opacity:0.7">330          <svg width="40" height="40" viewBox="0 0 24 24">331            <path d="M5 12h14" stroke="#666" stroke-width="2" stroke-linecap="round"/>332          </svg>333        </div>334        <div class="count">0</div>335        <div class="circle-btn">336          <svg width="40" height="40" viewBox="0 0 24 24">337            <path d="M12 5v14M5 12h14" stroke="#333" stroke-width="2" stroke-linecap="round"/>338          </svg>339        </div>340      </div>341    </div>342 343    <!-- Pets -->344    <div class="row" style="border-bottom:none;">345      <div class="row-left">346        <div class="main">Pets</div>347        <a class="service-link">Bringing a service animal?</a>348      </div>349      <div class="row-right">350        <div class="circle-btn" style="opacity:0.7">351          <svg width="40" height="40" viewBox="0 0 24 24">352            <path d="M5 12h14" stroke="#666" stroke-width="2" stroke-linecap="round"/>353          </svg>354        </div>355        <div class="count">0</div>356        <div class="circle-btn">357          <svg width="40" height="40" viewBox="0 0 24 24">358            <path d="M12 5v14M5 12h14" stroke="#333" stroke-width="2" stroke-linecap="round"/>359          </svg>360        </div>361      </div>362    </div>363  </div>364 365  <!-- Bottom actions -->366  <div class="bottom-bar">367    <div class="clear-link">Clear all</div>368    <div class="search-btn">369      <svg width="60" height="60" viewBox="0 0 24 24">370        <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"/>371        <path d="M16 16l5 5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>372      </svg>373      <div>Search</div>374    </div>375  </div>376 377</div>378</body>379</html>