GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search List UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #FFFFFF;20  }21 22  /* Status bar */23  .status-bar {24    height: 90px;25    background: #0A6772;26    color: #ffffff;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 32px;31    box-sizing: border-box;32    font-size: 30px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 20px;38  }39  .status-dot {40    width: 14px;41    height: 14px;42    border-radius: 50%;43    background: #ffffff;44    opacity: 0.9;45  }46  .status-icon svg {47    width: 34px;48    height: 34px;49    fill: none;50    stroke: #fff;51    stroke-width: 3;52  }53 54  /* App bar with search */55  .app-bar {56    height: 150px;57    background: #0A6772;58    display: flex;59    align-items: center;60    padding: 0 24px;61    box-sizing: border-box;62    color: #ffffff;63    gap: 24px;64  }65  .app-bar .back-btn svg,66  .app-bar .close-btn svg {67    width: 54px;68    height: 54px;69    stroke: #fff;70    stroke-width: 5;71    fill: none;72  }73  .search-input {74    flex: 1;75    height: 84px;76    display: flex;77    align-items: center;78    color: #ffffff;79    font-size: 48px;80    line-height: 1;81    border-bottom: 2px solid rgba(255,255,255,0.25);82  }83  .search-text {84    white-space: nowrap;85  }86  .caret {87    width: 2px;88    height: 56px;89    background: #ffffff;90    margin-left: 6px;91  }92 93  /* List */94  .list {95    position: relative;96    background: #ffffff;97  }98  .list-item {99    padding: 32px 32px;100    border-bottom: 1px solid #E5E5E5;101    box-sizing: border-box;102  }103  .item-title {104    font-size: 46px;105    color: #333333;106    font-weight: 700;107    margin-bottom: 8px;108  }109  .item-sub {110    font-size: 32px;111    color: #8A8A8A;112    font-weight: 500;113  }114 115  /* Keyboard overlay */116  .keyboard {117    position: absolute;118    left: 0;119    bottom: 0;120    width: 1080px;121    height: 900px;122    background: #1F1F1F;123    color: #EAEAEA;124    box-sizing: border-box;125    padding: 22px 26px 70px 26px;126  }127  .kb-suggestion {128    height: 80px;129    display: flex;130    align-items: center;131    gap: 28px;132    color: #C9C9C9;133    font-size: 36px;134    margin-bottom: 16px;135  }136  .kb-suggestion .left-icon,137  .kb-suggestion .right-icon {138    width: 56px;139    height: 56px;140    display: flex;141    align-items: center;142    justify-content: center;143  }144  .kb-suggestion .divider {145    color: #666;146    margin: 0 6px;147  }148 149  .row {150    display: flex;151    justify-content: space-between;152    gap: 12px;153    margin: 10px 0;154  }155  .key {156    flex: 1;157    height: 120px;158    background: #2A2A2A;159    border-radius: 16px;160    display: flex;161    align-items: center;162    justify-content: center;163    font-size: 44px;164    color: #F1F1F1;165  }166  .key.wide {167    flex: 1.2;168  }169  .key.space {170    flex: 4.5;171  }172  .key.special {173    background: #B9D1E8;174    color: #1B1B1B;175  }176  .key.icon svg {177    width: 46px;178    height: 46px;179    stroke: #F1F1F1;180    fill: none;181    stroke-width: 4;182  }183 184  /* Gesture bar/pill */185  .gesture-pill {186    position: absolute;187    left: 50%;188    transform: translateX(-50%);189    bottom: 18px;190    width: 320px;191    height: 12px;192    background: #FFFFFF;193    border-radius: 8px;194    opacity: 0.9;195  }196</style>197</head>198<body>199<div id="render-target">200 201  <!-- Status bar -->202  <div class="status-bar">203    <div class="time">10:18</div>204    <div class="status-icons">205      <div class="status-dot"></div>206      <div class="status-dot"></div>207      <div class="status-icon">208        <!-- Wi-Fi icon -->209        <svg viewBox="0 0 48 48">210          <path d="M4 16c9-8 31-8 40 0"></path>211          <path d="M10 22c6-6 22-6 28 0"></path>212          <path d="M16 28c4-4 12-4 16 0"></path>213          <circle cx="24" cy="34" r="3" fill="#fff"></circle>214        </svg>215      </div>216      <div class="status-icon">217        <!-- Battery icon -->218        <svg viewBox="0 0 48 48">219          <rect x="4" y="12" width="34" height="24" rx="3"></rect>220          <rect x="39" y="18" width="5" height="12" rx="1"></rect>221          <rect x="8" y="16" width="26" height="16" fill="#fff" stroke="none"></rect>222        </svg>223      </div>224    </div>225  </div>226 227  <!-- App bar with search -->228  <div class="app-bar">229    <div class="back-btn">230      <svg viewBox="0 0 48 48">231        <path d="M30 8 L14 24 L30 40"></path>232      </svg>233    </div>234    <div class="search-input">235      <div class="search-text">Richmond, VA</div>236      <div class="caret"></div>237    </div>238    <div class="close-btn">239      <svg viewBox="0 0 48 48">240        <path d="M12 12 L36 36"></path>241        <path d="M36 12 L12 36"></path>242      </svg>243    </div>244  </div>245 246  <!-- List of results -->247  <div class="list">248    <div class="list-item">249      <div class="item-title">Richmond, VA</div>250      <div class="item-sub">United States</div>251    </div>252    <div class="list-item">253      <div class="item-title">Colonial Heights, VA</div>254      <div class="item-sub">United States</div>255    </div>256    <div class="list-item">257      <div class="item-title">Oakland-Berkeley-East Bay, CA</div>258      <div class="item-sub">United States</div>259    </div>260    <div class="list-item">261      <div class="item-title">Richmond, IN</div>262      <div class="item-sub">United States</div>263    </div>264    <div class="list-item">265      <div class="item-title">Bratislava</div>266      <div class="item-sub">Slovakia</div>267    </div>268    <div class="list-item">269      <div class="item-title">Bratislava Airport</div>270      <div class="item-sub">Slovakia</div>271    </div>272    <div class="list-item">273      <div class="item-title">Vancouver, BC</div>274      <div class="item-sub">Canada</div>275    </div>276  </div>277 278  <!-- Keyboard overlay -->279  <div class="keyboard">280    <div class="kb-suggestion">281      <div class="left-icon">282        <!-- grid icon -->283        <svg viewBox="0 0 48 48">284          <rect x="6" y="6" width="10" height="10" fill="#C9C9C9"></rect>285          <rect x="18" y="6" width="10" height="10" fill="#C9C9C9"></rect>286          <rect x="30" y="6" width="10" height="10" fill="#C9C9C9"></rect>287          <rect x="6" y="18" width="10" height="10" fill="#C9C9C9"></rect>288          <rect x="18" y="18" width="10" height="10" fill="#C9C9C9"></rect>289          <rect x="30" y="18" width="10" height="10" fill="#C9C9C9"></rect>290        </svg>291      </div>292      <div>VA</div>293      <div class="divider">|</div>294      <div>VAN</div>295      <div class="divider">|</div>296      <div>CA</div>297      <div style="flex:1"></div>298      <div class="right-icon">299        <!-- mic icon -->300        <svg viewBox="0 0 48 48">301          <rect x="18" y="10" width="12" height="20" rx="6" fill="#C9C9C9" stroke="none"></rect>302          <path d="M12 24c0 8 24 8 24 0" stroke="#C9C9C9" stroke-width="4" fill="none"></path>303          <path d="M24 30 L24 38 M18 38 L30 38" stroke="#C9C9C9" stroke-width="4" fill="none"></path>304        </svg>305      </div>306    </div>307 308    <div class="row">309      <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>310      <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>311    </div>312    <div class="row">313      <div class="key wide">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>314      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key wide">l</div>315    </div>316    <div class="row">317      <div class="key icon wide">318        <!-- shift -->319        <svg viewBox="0 0 48 48">320          <path d="M12 28 L24 14 L36 28"></path>321          <path d="M18 30 L30 30"></path>322        </svg>323      </div>324      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>325      <div class="key">b</div><div class="key">n</div><div class="key">m</div>326      <div class="key icon wide">327        <!-- backspace -->328        <svg viewBox="0 0 48 48">329          <path d="M10 24 L18 16 H40 V32 H18 Z"></path>330          <path d="M23 19 L33 29 M33 19 L23 29"></path>331        </svg>332      </div>333    </div>334    <div class="row">335      <div class="key special wide">?123</div>336      <div class="key icon">337        <!-- emoji -->338        <svg viewBox="0 0 48 48">339          <circle cx="24" cy="24" r="16"></circle>340          <circle cx="18" cy="20" r="2" fill="#F1F1F1"></circle>341          <circle cx="30" cy="20" r="2" fill="#F1F1F1"></circle>342          <path d="M16 28 C24 34 32 28 32 28" stroke="#F1F1F1" stroke-width="3"></path>343        </svg>344      </div>345      <div class="key space">space</div>346      <div class="key">.</div>347      <div class="key special wide">🔍</div>348    </div>349  </div>350 351  <!-- Gesture pill -->352  <div class="gesture-pill"></div>353</div>354</body>355</html>