GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Search Screen Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #111214;13    color: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    padding: 0 36px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #EDEDED;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .icon-dot {38    width: 14px; height: 14px; background:#BDBDBD; border-radius:50%;39  }40  .battery {41    width: 56px; height: 28px; border: 3px solid #DADADA; border-radius: 6px; position: relative;42  }43  .battery::after {44    content: ""; position: absolute; right: -10px; top: 6px; width: 8px; height: 16px; background: #DADADA; border-radius: 2px;45  }46  .battery-level {47    position: absolute; left: 3px; top: 3px; height: 20px; width: 40px; background: #DADADA; border-radius: 3px;48  }49 50  /* Header */51  .header {52    position: absolute;53    top: 90px;54    left: 0;55    width: 1080px;56    height: 130px;57    display: flex;58    align-items: center;59    padding: 0 30px;60    box-sizing: border-box;61    gap: 20px;62  }63  .back-btn {64    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;65  }66  .header-title {67    font-size: 56px; font-weight: 700; letter-spacing: 0.4px;68  }69 70  /* Search input */71  .search-area {72    position: absolute;73    top: 230px;74    left: 30px;75    width: 1020px;76    box-sizing: border-box;77  }78  .input {79    width: 100%;80    height: 120px;81    background: #26282C;82    border-radius: 24px;83    display: flex;84    align-items: center;85    padding: 0 28px;86    box-sizing: border-box;87    gap: 26px;88  }89  .input-text {90    flex: 1;91    font-size: 46px;92    color: #FFFFFF;93  }94  .input-actions {95    display: flex;96    align-items: center;97    gap: 28px;98  }99  .icon-btn { width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; }100 101  /* Two columns information */102  .info-row {103    margin-top: 42px;104    display: flex;105    align-items: stretch;106    width: 100%;107    height: 192px;108    background: transparent;109    border-radius: 16px;110    overflow: hidden;111    border-top: 1px solid #2E3034;112    border-bottom: 1px solid #2E3034;113  }114  .col {115    flex: 1;116    padding: 28px;117    box-sizing: border-box;118  }119  .divider {120    width: 2px;121    background: #2E3034;122  }123  .label {124    color: #B0B7C3;125    font-size: 38px;126    margin-bottom: 22px;127  }128  .value {129    color: #FFFFFF;130    font-size: 46px;131    font-weight: 600;132  }133 134  /* Search button */135  .cta {136    margin-top: 42px;137    width: 100%;138    height: 120px;139    background: #E6518B;140    border-radius: 24px;141    display: flex;142    align-items: center;143    justify-content: center;144    font-size: 48px;145    font-weight: 700;146  }147 148  /* Keyboard mock */149  .keyboard {150    position: absolute;151    bottom: 0;152    left: 0;153    width: 1080px;154    height: 980px;155    background: #1A1C20;156    border-top-left-radius: 24px;157    border-top-right-radius: 24px;158    box-sizing: border-box;159    padding: 28px 18px;160  }161 162  .suggest-bar {163    width: 100%;164    height: 120px;165    display: flex;166    align-items: center;167    gap: 22px;168    color: #EDEDED;169  }170  .suggest-icon {171    width: 74px; height: 74px; display:flex; align-items:center; justify-content:center; background:#2A2C31; border-radius:16px;172  }173  .chip {174    padding: 18px 28px;175    background: #2A2C31;176    border-radius: 18px;177    font-size: 42px;178  }179 180  .keys {181    margin-top: 20px;182    display: grid;183    grid-template-columns: repeat(10, 1fr);184    grid-auto-rows: 120px;185    gap: 16px;186  }187  .key {188    background: #2B2D33;189    border-radius: 18px;190    display: flex;191    align-items: center;192    justify-content: center;193    color: #FFFFFF;194    font-size: 44px;195  }196  .key.small { font-size: 38px; }197  .key.wide { grid-column: span 2; }198  .space-row {199    margin-top: 18px;200    display: grid;201    grid-template-columns: 1.3fr 4fr 1fr 1fr;202    gap: 16px;203    height: 120px;204  }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Status Bar -->211  <div class="status-bar">212    <div>3:39</div>213    <div class="status-icons">214      <div class="icon-dot"></div>215      <div class="icon-dot"></div>216      <div class="icon-dot"></div>217      <div class="battery"><div class="battery-level"></div></div>218    </div>219  </div>220 221  <!-- Header -->222  <div class="header">223    <div class="back-btn">224      <svg width="48" height="48" viewBox="0 0 48 48">225        <path d="M30 8 L14 24 L30 40" stroke="#FFFFFF" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>226      </svg>227    </div>228    <div class="header-title">Search</div>229  </div>230 231  <!-- Search Area -->232  <div class="search-area">233    <div class="input">234      <div class="icon-btn">235        <svg width="44" height="44" viewBox="0 0 24 24">236          <circle cx="10" cy="10" r="6" stroke="#D3D3D3" stroke-width="2" fill="none"></circle>237          <line x1="15" y1="15" x2="22" y2="22" stroke="#D3D3D3" stroke-width="2" stroke-linecap="round"></line>238        </svg>239      </div>240      <div class="input-text">Florianópolis</div>241      <div class="input-actions">242        <div class="icon-btn">243          <svg width="44" height="44" viewBox="0 0 24 24">244            <circle cx="12" cy="12" r="10" stroke="#CFCFCF" stroke-width="2" fill="none"></circle>245            <path d="M8 8 L16 16 M16 8 L8 16" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"></path>246          </svg>247        </div>248        <div class="icon-btn">249          <svg width="44" height="44" viewBox="0 0 24 24">250            <circle cx="12" cy="12" r="10" stroke="#CFCFCF" stroke-width="2" fill="none"></circle>251            <path d="M12 6 L12 12 M12 12 L16 16" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"></path>252            <circle cx="12" cy="8" r="2" fill="#CFCFCF"></circle>253          </svg>254        </div>255      </div>256    </div>257 258    <div class="info-row">259      <div class="col">260        <div class="label">Enter your dates</div>261        <div class="value">28, Oct - 29, Oct</div>262      </div>263      <div class="divider"></div>264      <div class="col">265        <div class="label">Number of rooms</div>266        <div class="value">1 Room 2 people</div>267      </div>268    </div>269 270    <div class="cta">Search</div>271  </div>272 273  <!-- Keyboard Mock -->274  <div class="keyboard">275    <div class="suggest-bar">276      <div class="suggest-icon">277        <svg width="42" height="42" viewBox="0 0 24 24">278          <rect x="3" y="3" width="6" height="6" fill="#D0D3D8"></rect>279          <rect x="15" y="3" width="6" height="6" fill="#D0D3D8"></rect>280          <rect x="3" y="15" width="6" height="6" fill="#D0D3D8"></rect>281          <rect x="15" y="15" width="6" height="6" fill="#D0D3D8"></rect>282        </svg>283      </div>284      <div class="chip">Florianópolis</div>285      <div class="chip">Florianopolis</div>286      <div style="margin-left:auto" class="suggest-icon">287        <svg width="42" height="42" viewBox="0 0 24 24">288          <path d="M12 3 C9 3 7 5 7 8 L7 13 C7 14.7 5.8 16 4 16 L4 18 C6.2 18.6 8.3 19.2 10.5 19.2 C15 19.2 20 18 20 18 L20 16 C18.2 16 17 14.7 17 13 L17 8 C17 5 15 3 12 3 Z" fill="#D0D3D8"></path>289        </svg>290      </div>291    </div>292 293    <!-- Keys rows -->294    <div class="keys">295      <!-- Row 1 -->296      <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><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>297      <!-- Row 2 -->298      <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key small">;</div>299      <!-- Row 3 -->300      <div class="key wide">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key wide">⌫</div><div class="key">.</div><div class="key">,</div>301    </div>302 303    <div class="space-row">304      <div class="key">?123</div>305      <div class="key">Space</div>306      <div class="key">.</div>307      <div class="key">✔</div>308    </div>309  </div>310 311</div>312</body>313</html>