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