GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Location Search UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #212121;16  }17 18  /* Top app bar */19  .appbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 200px;25    background: #0B5F6D;26  }27 28  .status-bar {29    height: 72px;30    display: flex;31    align-items: center;32    padding: 0 24px;33    color: #fff;34    font-size: 34px;35    letter-spacing: 0.5px;36  }37  .status-spacer { flex: 1; }38  .status-icons svg { margin-left: 22px; }39 40  .search-row {41    height: 128px;42    display: flex;43    align-items: center;44    padding: 0 24px;45  }46  .search-row input {47    flex: 1;48    height: 72px;49    border: none;50    outline: none;51    background: transparent;52    color: #ffffff;53    font-size: 52px;54    font-weight: 500;55    padding-left: 24px;56  }57  .icon-btn {58    width: 72px;59    height: 72px;60    display: inline-flex;61    align-items: center;62    justify-content: center;63    cursor: default;64  }65  .icon-btn svg { fill: none; stroke: #ffffff; stroke-width: 5; }66 67  /* Content list */68  .content {69    position: absolute;70    top: 200px;71    left: 0;72    right: 0;73    bottom: 900px; /* leave space for keyboard */74    overflow-y: hidden;75    background: #fff;76  }77 78  .location-row {79    height: 120px;80    display: flex;81    align-items: center;82    padding: 0 32px;83    border-bottom: 1px solid #E0E0E0;84    color: #616161;85    font-size: 40px;86    background: #FAFAFA;87  }88  .location-row svg { margin-right: 24px; stroke: #0B5F6D; }89 90  .item {91    padding: 30px 32px;92    border-bottom: 1px solid #E0E0E0;93  }94  .item-title {95    font-size: 48px;96    font-weight: 600;97    color: #3E3E3E;98    margin-bottom: 10px;99  }100  .item-sub {101    font-size: 34px;102    color: #777777;103  }104 105  /* Keyboard */106  .keyboard {107    position: absolute;108    bottom: 0;109    left: 0;110    width: 1080px;111    height: 900px;112    background: #141414;113    border-top: 1px solid #2A2A2A;114    box-sizing: border-box;115    padding: 18px 18px 32px 18px;116  }117 118  .suggestions {119    height: 110px;120    display: flex;121    align-items: center;122    padding: 0 6px;123    color: #E0E0E0;124  }125  .suggest-left, .suggest-right {126    width: 120px;127    display: flex;128    align-items: center;129    justify-content: center;130  }131  .pill {132    background: #2A2A2A;133    color: #EDEDED;134    font-size: 36px;135    padding: 12px 26px;136    border-radius: 30px;137    margin: 0 12px;138  }139 140  .keys-row {141    display: flex;142    padding: 8px 6px;143  }144  .key {145    flex: 1;146    height: 120px;147    margin: 6px;148    background: #242424;149    border-radius: 24px;150    color: #F1F1F1;151    font-size: 44px;152    display: flex;153    align-items: center;154    justify-content: center;155    box-shadow: inset 0 0 0 1px #2F2F2F;156  }157  .key.small { flex: 0.9; }158  .key.wide { flex: 4.5; }159  .key.action { background: #CFE1F8; color: #1C2B3A; }160  .key.gray { background: #78828A; color: #ffffff; }161  .key.icon svg { stroke: #EDEDED; }162  .key.icon.fill svg { fill: #EDEDED; stroke: none; }163 164  .gesture-bar {165    position: absolute;166    bottom: 12px;167    left: 50%;168    width: 240px;169    height: 10px;170    background: #EDEDED;171    border-radius: 6px;172    transform: translateX(-50%);173    opacity: 0.85;174  }175</style>176</head>177<body>178<div id="render-target">179 180  <!-- Top app bar -->181  <div class="appbar">182    <div class="status-bar">183      <div>10:16</div>184      <div class="status-spacer"></div>185      <div class="status-icons">186        <!-- Notifications placeholder -->187        <svg width="30" height="30" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#fff" fill="none"/></svg>188        <!-- Network -->189        <svg width="34" height="34" viewBox="0 0 24 24">190          <path d="M2 9c4-4 16-4 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0M12 18h0" stroke="#fff" fill="none" stroke-linecap="round"/>191        </svg>192        <!-- Battery -->193        <svg width="46" height="34" viewBox="0 0 28 16">194          <rect x="1" y="3" width="22" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>195          <rect x="3" y="5" width="18" height="6" rx="1" ry="1" fill="#fff"/>196          <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"/>197        </svg>198      </div>199    </div>200 201    <div class="search-row">202      <!-- Back arrow -->203      <div class="icon-btn">204        <svg width="48" height="48" viewBox="0 0 24 24">205          <path d="M15 6l-6 6 6 6" />206        </svg>207      </div>208      <input type="text" value="Hamilton, ON" />209      <!-- Clear (X) -->210      <div class="icon-btn">211        <svg width="48" height="48" viewBox="0 0 24 24">212          <path d="M6 6l12 12M18 6L6 18" />213        </svg>214      </div>215    </div>216  </div>217 218  <!-- Main content -->219  <div class="content">220    <div class="location-row">221      <svg width="50" height="50" viewBox="0 0 24 24" fill="none">222        <path d="M3 11l18-7-7 18-2-7-7-4z" stroke-width="2" stroke-linejoin="round" />223      </svg>224      <span>Enable location to see nearby cities</span>225    </div>226 227    <div class="item">228      <div class="item-title">Hamilton, ON</div>229      <div class="item-sub">Canada</div>230    </div>231 232    <div class="item">233      <div class="item-title">London, ON</div>234      <div class="item-sub">Canada</div>235    </div>236 237    <div class="item">238      <div class="item-title">Washington, D.C.</div>239      <div class="item-sub">United States</div>240    </div>241 242    <div class="item">243      <div class="item-title">London</div>244      <div class="item-sub">United Kingdom</div>245    </div>246 247    <div class="item">248      <div class="item-title">London Gatwick Airport</div>249      <div class="item-sub">United Kingdom</div>250    </div>251 252    <div class="item" style="border-bottom: none;">253      <div class="item-title">Phoenix-Tempe, AZ</div>254      <div class="item-sub">United States</div>255    </div>256  </div>257 258  <!-- Keyboard -->259  <div class="keyboard">260    <div class="suggestions">261      <div class="suggest-left">262        <!-- grid/dots icon -->263        <svg width="54" height="54" viewBox="0 0 24 24" class="fill">264          <circle cx="5" cy="5" r="2"/>265          <circle cx="12" cy="5" r="2"/>266          <circle cx="19" cy="5" r="2"/>267          <circle cx="5" cy="12" r="2"/>268          <circle cx="12" cy="12" r="2"/>269          <circle cx="19" cy="12" r="2"/>270          <circle cx="5" cy="19" r="2"/>271          <circle cx="12" cy="19" r="2"/>272          <circle cx="19" cy="19" r="2"/>273        </svg>274      </div>275      <div class="pill">ON</div>276      <div class="pill">IN</div>277      <div class="pill">ONE</div>278      <div class="suggest-right">279        <!-- mic icon -->280        <svg width="54" height="54" viewBox="0 0 24 24" class="fill">281          <rect x="9" y="4" width="6" height="10" rx="3"/>282          <path d="M5 11a7 7 0 0 0 14 0M12 18v3" fill="none" stroke="#EDEDED" stroke-width="2"/>283        </svg>284      </div>285    </div>286 287    <div class="keys-row">288      <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>289    </div>290 291    <div class="keys-row">292      <div class="key small"></div>293      <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>294      <div class="key small"></div>295    </div>296 297    <div class="keys-row">298      <div class="key gray small">?123</div>299      <div class="key">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>300      <div class="key icon small">301        <!-- backspace -->302        <svg width="46" height="46" viewBox="0 0 24 24">303          <path d="M6 5l-4 7 4 7h13a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H6z" fill="none"/>304          <path d="M10 9l6 6M16 9l-6 6" stroke-width="2"/>305        </svg>306      </div>307    </div>308 309    <div class="keys-row">310      <div class="key gray small">?123</div>311      <div class="key icon small">312        <!-- emoji -->313        <svg width="40" height="40" viewBox="0 0 24 24">314          <circle cx="12" cy="12" r="9" fill="none"/>315          <circle cx="9" cy="10" r="1.4"/>316          <circle cx="15" cy="10" r="1.4"/>317          <path d="M8 15c2 2 6 2 8 0" stroke-width="2" fill="none"/>318        </svg>319      </div>320      <div class="key wide">space</div>321      <div class="key">.</div>322      <div class="key action icon small">323        <!-- search icon -->324        <svg width="40" height="40" viewBox="0 0 24 24">325          <circle cx="11" cy="11" r="6" fill="none" stroke="#1C2B3A" stroke-width="2"/>326          <path d="M16 16l5 5" stroke="#1C2B3A" stroke-width="2" />327        </svg>328      </div>329    </div>330 331    <div class="gesture-bar"></div>332  </div>333 334</div>335</body>336</html>