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 for a city UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    position: relative;16    overflow: hidden;17    width: 1080px;18    height: 2400px;19    background: #1C1819; /* very dark theme background */20    color: #E7E3E6;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 110px;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #FFFFFF;35    font-size: 40px;36  }37  .status-right {38    display: flex;39    gap: 24px;40    align-items: center;41  }42  .status-dot {43    width: 12px;44    height: 12px;45    border-radius: 50%;46    background: #FFFFFF;47    opacity: 0.85;48  }49  .status-icon {50    width: 34px;51    height: 34px;52    border-radius: 6px;53    border: 2px solid #FFFFFF;54    opacity: 0.9;55  }56  .wifi {57    border: none;58    width: 38px;59    height: 28px;60    position: relative;61  }62  .wifi::before, .wifi::after {63    content: "";64    position: absolute;65    left: 0;66    right: 0;67    margin: auto;68    border: 3px solid #fff;69    border-top-left-radius: 24px;70    border-top-right-radius: 24px;71    border-bottom: none;72  }73  .wifi::before { top: 3px; width: 36px; height: 26px; opacity: 0.8; }74  .wifi::after { top: 10px; width: 22px; height: 14px; opacity: 0.8; }75 76  /* App bar */77  .app-bar {78    position: absolute;79    top: 110px;80    left: 0;81    width: 1080px;82    height: 150px;83    display: flex;84    align-items: center;85    padding: 0 36px;86    color: #D0CBCE;87    font-size: 44px;88    letter-spacing: 0.2px;89  }90  .app-bar svg {91    margin-right: 24px;92  }93  .divider {94    position: absolute;95    top: 260px;96    left: 0;97    width: 1080px;98    height: 2px;99    background: #544C51;100    opacity: 0.7;101  }102 103  /* Empty state */104  .empty-state {105    position: absolute;106    top: 600px;107    left: 0;108    width: 1080px;109    display: flex;110    flex-direction: column;111    align-items: center;112    gap: 36px;113  }114  .big-search {115    width: 320px;116    height: 320px;117  }118  .empty-text {119    color: #B9B6B9;120    font-size: 48px;121  }122 123  /* Keyboard */124  .keyboard {125    position: absolute;126    left: 0;127    bottom: 110px; /* leave room for gesture bar */128    width: 1080px;129    background: #141213;130    border-top-left-radius: 32px;131    border-top-right-radius: 32px;132    padding: 28px 28px 34px;133    box-sizing: border-box;134  }135  .kb-tools {136    display: flex;137    align-items: center;138    justify-content: space-between;139    padding: 0 12px 18px;140    color: #EAE6EA;141  }142  .tool {143    display: flex;144    align-items: center;145    justify-content: center;146    width: 88px;147    height: 72px;148    border-radius: 36px;149    background: #1F1D1E;150    color: #EAE6EA;151    font-size: 30px;152  }153  .tool-label {154    font-weight: 700;155    letter-spacing: 1px;156  }157  .tool svg { width: 36px; height: 36px; }158 159  .kb-row {160    display: flex;161    justify-content: space-between;162    gap: 16px;163    margin-bottom: 18px;164    padding: 0 12px;165  }166  .key {167    flex: 1 1 auto;168    max-width: 92px;169    height: 120px;170    background: #2A2729;171    border-radius: 26px;172    color: #EEE6EA;173    display: flex;174    align-items: center;175    justify-content: center;176    font-size: 44px;177    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);178  }179  .key.small { max-width: 80px; }180  .key.wide { flex: 1 1 180px; max-width: none; }181  .key.space {182    flex: 1 1 520px;183    height: 120px;184    background: #2A2729;185    border-radius: 26px;186    color: #CFC7CB;187    font-size: 34px;188  }189  .special {190    background: #E7C5D1;191    color: #2B2729;192  }193  .action-round {194    width: 132px;195    height: 132px;196    border-radius: 50%;197    background: #E7C5D1;198    color: #2B2729;199    display: flex;200    align-items: center;201    justify-content: center;202    font-size: 52px;203  }204  .backspace {205    font-size: 44px;206  }207 208  /* Floating mic button (right side) */209  .mic-btn {210    position: absolute;211    right: 36px;212    top: -36px;213    width: 110px;214    height: 110px;215    border-radius: 55px;216    background: #2A2729;217    display: flex;218    align-items: center;219    justify-content: center;220    color: #EAE6EA;221  }222 223  /* Gesture bar */224  .gesture-bar {225    position: absolute;226    bottom: 36px;227    left: 50%;228    transform: translateX(-50%);229    width: 220px;230    height: 12px;231    border-radius: 8px;232    background: #E8E4E7;233    opacity: 0.85;234  }235</style>236</head>237<body>238<div id="render-target">239 240  <!-- Status bar -->241  <div class="status-bar">242    <div class="status-left">8:50</div>243    <div class="status-right">244      <div class="status-icon"></div>245      <div class="status-icon" style="transform: rotate(90deg);"></div>246      <div class="status-icon"></div>247      <div class="status-dot"></div>248      <div class="wifi"></div>249      <div class="status-icon"></div>250      <div class="status-icon"></div>251    </div>252  </div>253 254  <!-- App bar with back arrow and title -->255  <div class="app-bar">256    <svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">257      <polyline points="36,10 20,28 36,46" fill="none" stroke="#D0CBCE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>258    </svg>259    <div>Search for a city</div>260  </div>261  <div class="divider"></div>262 263  <!-- Empty state content -->264  <div class="empty-state">265    <svg class="big-search" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">266      <circle cx="92" cy="90" r="54" fill="none" stroke="#9D9A9E" stroke-width="14"/>267      <line x1="132" y1="130" x2="175" y2="173" stroke="#9D9A9E" stroke-width="14" stroke-linecap="square"/>268    </svg>269    <div class="empty-text">Search for a city</div>270  </div>271 272  <!-- Keyboard -->273  <div class="keyboard">274    <div class="mic-btn">275      <!-- simple mic icon -->276      <svg width="44" height="44" viewBox="0 0 24 24">277        <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0m5 5v3" stroke="#EAE6EA" stroke-width="2" fill="none" stroke-linecap="round"/>278      </svg>279    </div>280 281    <div class="kb-tools">282      <div class="tool">283        <svg viewBox="0 0 24 24">284          <rect x="3" y="3" width="7" height="7" fill="#EAE6EA"/><rect x="14" y="3" width="7" height="7" fill="#EAE6EA"/>285          <rect x="3" y="14" width="7" height="7" fill="#EAE6EA"/><rect x="14" y="14" width="7" height="7" fill="#EAE6EA"/>286        </svg>287      </div>288      <div class="tool">🙂</div>289      <div class="tool tool-label">GIF</div>290      <div class="tool">291        <svg viewBox="0 0 24 24">292          <circle cx="12" cy="12" r="9" stroke="#EAE6EA" stroke-width="2" fill="none"/>293          <path d="M12 7v5l3 3" stroke="#EAE6EA" stroke-width="2" fill="none" stroke-linecap="round"/>294        </svg>295      </div>296      <div class="tool">297        <svg viewBox="0 0 24 24">298          <path d="M4 5h10v4H4zM10 11h10v4H10zM4 17h10v4H4z" fill="#EAE6EA"/>299        </svg>300      </div>301      <div class="tool">302        <svg viewBox="0 0 24 24">303          <circle cx="12" cy="12" r="10" stroke="#EAE6EA" stroke-width="2" fill="none"/>304          <circle cx="8" cy="8" r="2" fill="#EAE6EA"/>305          <circle cx="16" cy="16" r="2" fill="#EAE6EA"/>306        </svg>307      </div>308    </div>309 310    <div class="kb-row">311      <div class="key">q</div>312      <div class="key">w</div>313      <div class="key">e</div>314      <div class="key">r</div>315      <div class="key">t</div>316      <div class="key">y</div>317      <div class="key">u</div>318      <div class="key">i</div>319      <div class="key">o</div>320      <div class="key">p</div>321    </div>322 323    <div class="kb-row">324      <div class="key">a</div>325      <div class="key">s</div>326      <div class="key">d</div>327      <div class="key">f</div>328      <div class="key">g</div>329      <div class="key">h</div>330      <div class="key">j</div>331      <div class="key">k</div>332      <div class="key">l</div>333      <div class="key backspace">⌫</div>334    </div>335 336    <div class="kb-row">337      <div class="key small">⇧</div>338      <div class="key">z</div>339      <div class="key">x</div>340      <div class="key">c</div>341      <div class="key">v</div>342      <div class="key">b</div>343      <div class="key">n</div>344      <div class="key">m</div>345      <div class="key small">.</div>346      <div class="key backspace">⌫</div>347    </div>348 349    <div class="kb-row" style="align-items:center;">350      <div class="action-round special">?123</div>351      <div class="key small">,</div>352      <div class="action-round">🙂</div>353      <div class="key space">space</div>354      <div class="key small">.</div>355      <div class="action-round special">356        <svg width="40" height="40" viewBox="0 0 24 24">357          <circle cx="10" cy="10" r="6" stroke="#2B2729" stroke-width="2" fill="none"/>358          <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#2B2729" stroke-width="2"/>359        </svg>360      </div>361    </div>362  </div>363 364  <!-- Bottom gesture bar -->365  <div class="gesture-bar"></div>366</div>367</body>368</html>