GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Search UI</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    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0d0d0f;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 0 36px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #fff;29    font-weight: 600;30    letter-spacing: 0.3px;31  }32  .status-left { display: flex; align-items: center; gap: 26px; }33  .dot { width: 10px; height: 10px; background: #ccc; border-radius: 50%; }34  .status-right { display: flex; align-items: center; gap: 16px; }35  .icon-small { width: 34px; height: 34px; opacity: 0.9; }36  .battery {37    display: flex; align-items: center; gap: 10px; font-weight: 700;38  }39  .battery svg { width: 44px; height: 22px; }40 41  /* Overlay panel */42  .overlay {43    position: absolute;44    top: 110px;45    left: 0;46    width: 1080px;47    height: 1390px;48    background: #141416;49    border-radius: 40px 40px 0 0;50    box-shadow: 0 20px 50px rgba(0,0,0,0.5) inset;51    padding: 40px 36px 0 36px;52    box-sizing: border-box;53  }54 55  .header {56    display: flex;57    align-items: center;58    gap: 24px;59    margin-bottom: 30px;60  }61  .back-btn {62    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;63    border-radius: 18px; background: transparent;64  }65  .back-btn svg { width: 42px; height: 42px; stroke: #fff; }66  .title {67    font-size: 48px;68    font-weight: 800;69  }70 71  /* Destination input */72  .dest-input {73    margin-top: 18px;74    background: #222327;75    border: 1px solid #2d2f35;76    height: 130px;77    border-radius: 26px;78    display: flex;79    align-items: center;80    padding: 0 28px;81    box-sizing: border-box;82    gap: 24px;83  }84  .dest-input .search-ico { width: 40px; height: 40px; }85  .input-text {86    flex: 1;87    color: #bcbcc3;88    font-size: 40px;89  }90  .dest-input .action-ico {91    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;92    border-radius: 18px;93  }94  .action-ico svg { width: 40px; height: 40px; }95 96  /* Two-column info */97  .info-row {98    display: grid;99    grid-template-columns: 1fr 1fr;100    gap: 40px;101    align-items: start;102    margin-top: 60px;103    position: relative;104  }105  .divider {106    position: absolute;107    left: 540px;108    top: 0;109    bottom: 0;110    width: 2px;111    background: #2b2c31;112    opacity: 0.8;113  }114  .info-block .label {115    font-size: 40px;116    font-weight: 800;117    color: #e9e9ea;118    margin-bottom: 22px;119  }120  .info-block .value {121    font-size: 44px;122    color: #e3e3e6;123  }124 125  /* Search button */126  .btn-search {127    margin-top: 80px;128    width: calc(100% - 72px);129    height: 120px;130    background: #e05a95;131    border-radius: 26px;132    display: flex;133    align-items: center;134    justify-content: center;135    font-size: 48px;136    font-weight: 800;137    color: #fff;138    margin-left: 36px;139  }140 141  /* Large empty area to mimic dark sheet space */142  .spacer {143    height: 520px;144  }145 146  /* Keyboard mock */147  .keyboard {148    position: absolute;149    left: 0;150    bottom: 0;151    width: 1080px;152    height: 920px;153    background: #111214;154    border-top: 1px solid #222327;155    padding: 32px 32px 40px 32px;156    box-sizing: border-box;157  }158 159  .kb-top-icons {160    display: flex; align-items: center; justify-content: space-between;161    padding: 0 6px 24px 6px;162  }163  .kb-icon {164    width: 80px; height: 80px; background: #1d1f23; border-radius: 22px;165    display: flex; align-items: center; justify-content: center; color: #bfbfc5; font-size: 30px;166    border: 1px solid #2a2c31;167  }168 169  .kb-row {170    display: grid;171    grid-template-columns: repeat(10, 1fr);172    gap: 18px;173    margin-bottom: 26px;174  }175  .kb-row.short { grid-template-columns: repeat(9, 1fr); }176  .kb-row.last { grid-template-columns: repeat(8, 1fr); }177 178  .key {179    height: 120px;180    background: #26282d;181    border: 1px solid #32353b;182    color: #e7e7ea;183    border-radius: 26px;184    display: flex; align-items: center; justify-content: center;185    font-size: 42px; font-weight: 600;186  }187 188  .key.wide { grid-column: span 3; }189  .space-row {190    display: grid; grid-template-columns: 1.2fr 0.9fr 3fr 0.9fr 1.2fr;191    gap: 18px;192  }193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status bar -->199  <div class="status-bar">200    <div class="status-left">201      <div style="font-size:44px;">3:39</div>202      <div class="dot"></div>203      <div class="dot"></div>204    </div>205    <div class="status-right">206      <!-- Simple icons: wifi and location as circles -->207      <svg class="icon-small" viewBox="0 0 24 24">208        <path d="M12 18.5c2 0 3.5-1.6 3.5-3.5S14 11.5 12 11.5 8.5 13.1 8.5 15s1.6 3.5 3.5 3.5z" fill="#fff" opacity="0.9"/>209        <path d="M3 8c5-5 13-5 18 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.8"/>210        <path d="M6 11c3.5-3.5 8.5-3.5 12 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.7"/>211      </svg>212      <div class="battery">213        <svg viewBox="0 0 40 20">214          <rect x="1" y="3" width="34" height="14" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>215          <rect x="36" y="6" width="3" height="8" rx="1" fill="#fff"/>216          <rect x="3" y="5" width="28" height="10" rx="2" fill="#9bf27b"/>217        </svg>218        <div style="font-size:38px;">97%</div>219      </div>220    </div>221  </div>222 223  <!-- Overlay search sheet -->224  <div class="overlay">225    <div class="header">226      <div class="back-btn">227        <svg viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">228          <path d="M30 10 L16 24 L30 38" stroke="#ffffff"/>229        </svg>230      </div>231      <div class="title">Search</div>232    </div>233 234    <div class="dest-input">235      <svg class="search-ico" viewBox="0 0 24 24">236        <circle cx="10.5" cy="10.5" r="7" stroke="#ff4fa3" stroke-width="2" fill="none"/>237        <path d="M16.5 16.5 L22 22" stroke="#ff4fa3" stroke-width="2" stroke-linecap="round"/>238      </svg>239      <div class="input-text">Choose destination</div>240      <div class="action-ico">241        <svg viewBox="0 0 24 24">242          <path d="M6 6 L18 18 M18 6 L6 18" stroke="#bfc1c7" stroke-width="2" stroke-linecap="round"/>243        </svg>244      </div>245      <div class="action-ico">246        <svg viewBox="0 0 24 24">247          <circle cx="12" cy="12" r="8" stroke="#bfc1c7" stroke-width="2" fill="none"/>248          <path d="M12 7 L12 12 L15 14" stroke="#bfc1c7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>249        </svg>250      </div>251    </div>252 253    <div class="info-row">254      <div class="divider"></div>255      <div class="info-block">256        <div class="label">Enter your dates</div>257        <div class="value">28, Oct - 29, Oct</div>258      </div>259      <div class="info-block">260        <div class="label">Number of rooms</div>261        <div class="value">1 Room 2 people</div>262      </div>263    </div>264 265    <div class="btn-search">Search</div>266 267    <div class="spacer"></div>268  </div>269 270  <!-- Keyboard mockup -->271  <div class="keyboard">272    <div class="kb-top-icons">273      <div class="kb-icon">⌫</div>274      <div class="kb-icon">🙂</div>275      <div class="kb-icon">GIF</div>276      <div class="kb-icon">⚙️</div>277      <div class="kb-icon">G</div>278      <div class="kb-icon">🎨</div>279      <div class="kb-icon">🎤</div>280    </div>281 282    <div class="kb-row">283      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>284      <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>285    </div>286 287    <div class="kb-row short">288      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>289      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>290    </div>291 292    <div class="kb-row last">293      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>294      <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">⌫</div>295    </div>296 297    <div class="space-row">298      <div class="key">?123</div>299      <div class="key">,</div>300      <div class="key">Space</div>301      <div class="key">.</div>302      <div class="key">✓</div>303    </div>304  </div>305 306</div>307</body>308</html>