GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Search New York</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: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 96px;22    padding: 0 28px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #2E2E2E;27    font-size: 40px;28  }29  .status-left { display: flex; align-items: center; gap: 18px; }30  .status-right { display: flex; align-items: center; gap: 22px; }31  .dot { width: 10px; height: 10px; background:#777; border-radius:50%; display:inline-block; }32  .ghost { width: 24px; height: 24px; background:#777; border-radius: 6px; opacity: 0.6; }33 34  /* Search bar */35  .search-wrap {36    position: absolute;37    top: 110px;38    left: 20px;39    width: 1040px;40  }41  .search-bar {42    width: 1040px;43    height: 140px;44    border-radius: 80px;45    background: #F3F3F3;46    display: flex;47    align-items: center;48    padding: 0 28px;49    box-sizing: border-box;50  }51  .search-text {52    font-size: 54px;53    color: #212121;54    flex: 1;55    padding-left: 24px;56  }57  .icon-btn {58    width: 96px;59    height: 96px;60    border-radius: 48px;61    background: #E9E9E9;62    display: flex;63    align-items: center;64    justify-content: center;65  }66 67  /* Results list */68  .results {69    position: absolute;70    top: 280px;71    left: 0;72    width: 1080px;73  }74  .result-item {75    display: flex;76    align-items: center;77    padding: 36px 36px;78    box-sizing: border-box;79  }80  .result-item + .result-item { border-top: 1px solid #E6E6E6; }81  .circle-icon {82    width: 96px;83    height: 96px;84    border-radius: 48px;85    background: #EFEFEF;86    border: 2px solid #D7D7D7;87    display: flex;88    align-items: center;89    justify-content: center;90    margin-right: 28px;91  }92  .result-content { flex: 1; }93  .title { font-size: 54px; color: #1F1F1F; }94  .subtitle { font-size: 40px; color: #6B6B6B; margin-top: 14px; }95  .arrow-open {96    width: 72px;97    height: 72px;98    border-radius: 36px;99    display: flex;100    align-items: center;101    justify-content: center;102    color: #4A4A4A;103    font-size: 52px;104  }105 106  /* Keyboard */107  .keyboard {108    position: absolute;109    bottom: 0;110    left: 0;111    width: 1080px;112    height: 920px;113    background: #1C1C1C;114    border-top-left-radius: 26px;115    border-top-right-radius: 26px;116    overflow: hidden;117    box-shadow: 0 -8px 20px rgba(0,0,0,0.1);118  }119  .suggestions {120    height: 120px;121    background: #202020;122    display: flex;123    align-items: center;124    padding: 0 40px;125    color: #D9D9D9;126    font-size: 44px;127    gap: 36px;128  }129  .suggestions span { padding: 0 18px; }130  .suggestions .divider { width: 2px; height: 44px; background:#3A3A3A; display:inline-block; }131 132  .keys {133    padding: 24px 24px 18px 24px;134    display: grid;135    grid-template-rows: repeat(4, 1fr);136    row-gap: 22px;137    height: calc(100% - 120px);138    box-sizing: border-box;139  }140  .row { display: flex; justify-content: space-between; gap: 16px; }141  .key {142    height: 120px;143    flex: 1;144    background: #2B2B2B;145    border-radius: 18px;146    color: #F0F0F0;147    font-size: 52px;148    display: flex;149    align-items: center;150    justify-content: center;151  }152  .key.small { flex: 0 0 96px; }153  .key.medium { flex: 0 0 120px; }154  .key.wide { flex: 0 0 480px; }155  .key.extra-wide { flex: 0 0 540px; }156  .key.circle {157    width: 120px;158    height: 120px;159    border-radius: 60px;160    flex: 0 0 120px;161  }162  .key.dark { background: #252525; }163  .space { font-size: 36px; color:#CFCFCF; }164 165  /* Simple helper for small label at bottom center (gesture bar) */166  .gesture-bar {167    position: absolute;168    bottom: 20px;169    left: 50%;170    transform: translateX(-50%);171    width: 360px;172    height: 10px;173    background: #CFCFCF;174    border-radius: 6px;175    opacity: 0.8;176  }177 178  /* SVG styling */179  svg { width: 48px; height: 48px; }180  .clock svg { width: 44px; height: 44px; }181  .pin svg { width: 40px; height: 40px; }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status bar -->188  <div class="status-bar">189    <div class="status-left">190      <div>11:02</div>191      <span class="ghost"></span>192      <span class="ghost"></span>193      <span class="ghost"></span>194      <span class="ghost"></span>195      <span class="dot"></span>196    </div>197    <div class="status-right">198      <span style="font-size:38px; color:#666;">📶</span>199      <span style="font-size:38px; color:#666;">🔋</span>200    </div>201  </div>202 203  <!-- Search bar -->204  <div class="search-wrap">205    <div class="search-bar">206      <div class="icon-btn">207        <svg viewBox="0 0 24 24">208          <path d="M15 6L9 12l6 6" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>209        </svg>210      </div>211      <div class="search-text">New York</div>212      <div class="icon-btn">213        <svg viewBox="0 0 24 24">214          <path d="M6 6l12 12M18 6L6 18" stroke="#555" stroke-width="2" stroke-linecap="round"/>215        </svg>216      </div>217    </div>218  </div>219 220  <!-- Results -->221  <div class="results">222    <div class="result-item">223      <div class="circle-icon clock">224        <svg viewBox="0 0 24 24">225          <circle cx="12" cy="12" r="9" fill="none" stroke="#7A7A7A" stroke-width="2"/>226          <path d="M12 7v6l4 2" stroke="#7A7A7A" stroke-width="2" stroke-linecap="round"/>227        </svg>228      </div>229      <div class="result-content">230        <div class="title">New York</div>231        <div class="subtitle">NY, USA</div>232      </div>233      <div class="arrow-open">↗</div>234    </div>235 236    <div class="result-item">237      <div class="circle-icon pin">238        <svg viewBox="0 0 24 24">239          <path d="M12 3c-3.3 0-6 2.6-6 5.8 0 4.7 6 11.2 6 11.2s6-6.5 6-11.2C18 5.6 15.3 3 12 3zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#7A7A7A"/>240        </svg>241      </div>242      <div class="result-content">243        <div class="title">New York State</div>244        <div class="subtitle">USA</div>245      </div>246      <div class="arrow-open">↗</div>247    </div>248  </div>249 250  <!-- Keyboard -->251  <div class="keyboard">252    <div class="suggestions">253      <span>York</span>254      <span class="divider"></span>255      <span>Yorkshire</span>256      <span class="divider"></span>257      <span>Yorker</span>258      <div style="margin-left:auto; display:flex; align-items:center; gap:28px;">259        <div class="key circle dark" style="width:80px;height:80px;">260          <svg viewBox="0 0 24 24">261            <path d="M12 4a8 8 0 0 0 0 16 8 8 0 0 0 0-16zm-1 5h2v5h4v2h-6z" fill="#CFCFCF"/>262          </svg>263        </div>264      </div>265    </div>266    <div class="keys">267      <div class="row">268        <div class="key">q</div>269        <div class="key">w</div>270        <div class="key">e</div>271        <div class="key">r</div>272        <div class="key">t</div>273        <div class="key">y</div>274        <div class="key">u</div>275        <div class="key">i</div>276        <div class="key">o</div>277        <div class="key">p</div>278      </div>279      <div class="row">280        <div class="key">a</div>281        <div class="key">s</div>282        <div class="key">d</div>283        <div class="key">f</div>284        <div class="key">g</div>285        <div class="key">h</div>286        <div class="key">j</div>287        <div class="key">k</div>288        <div class="key">l</div>289      </div>290      <div class="row">291        <div class="key small dark">z</div>292        <div class="key">x</div>293        <div class="key">c</div>294        <div class="key">v</div>295        <div class="key">b</div>296        <div class="key">n</div>297        <div class="key">m</div>298        <div class="key circle dark">299          <svg viewBox="0 0 24 24">300            <path d="M18 10v4h-4l-5 5V5l5 5h4z" fill="#DADADA"/>301          </svg>302        </div>303      </div>304      <div class="row">305        <div class="key medium dark">?123</div>306        <div class="key medium dark">,</div>307        <div class="key medium dark">😊</div>308        <div class="key extra-wide dark space">Space</div>309        <div class="key medium dark">.</div>310        <div class="key circle dark">311          <svg viewBox="0 0 24 24">312            <circle cx="11" cy="11" r="7" stroke="#E6E6E6" stroke-width="2" fill="none"/>313            <path d="M16.5 16.5L21 21" stroke="#E6E6E6" stroke-width="2" stroke-linecap="round"/>314          </svg>315        </div>316      </div>317    </div>318  </div>319 320  <div class="gesture-bar"></div>321</div>322</body>323</html>