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>Currency Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #333;25    font-size: 36px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 28px;31  }32  .icon {33    width: 48px;34    height: 48px;35  }36 37  /* App search header */38  .search-bar {39    height: 150px;40    display: flex;41    align-items: center;42    padding: 0 26px;43    border-bottom: 1px solid #EEEEEE;44  }45  .back-btn {46    width: 72px;47    height: 72px;48    display: flex;49    align-items: center;50    justify-content: center;51    margin-right: 14px;52  }53  .search-input {54    flex: 1;55    height: 86px;56    display: flex;57    align-items: center;58    border-bottom: 2px solid #DFDFDF;59    color: #7A7A7A;60    font-size: 44px;61    letter-spacing: 0.2px;62  }63  .cursor {64    width: 4px;65    height: 58px;66    background: #3D7DFF;67    margin: 0 16px 0 8px;68    border-radius: 2px;69  }70  .search-placeholder { color: #6E6E6E; }71 72  /* Filter chips */73  .chips-wrap {74    background: #F6F6F6;75    padding: 22px 26px;76    border-bottom: 1px solid #EEEEEE;77  }78  .chips {79    display: flex;80    gap: 16px;81  }82  .chip {83    padding: 20px 32px;84    border: 1px solid #DDDDDD;85    border-radius: 28px;86    background: #FFFFFF;87    font-size: 34px;88    color: #5A5A5A;89  }90  .chip.active {91    background: #EFEFEF;92    color: #333333;93    border-color: #D0D0D0;94  }95 96  /* List of currencies */97  .list {98    position: relative;99    height: 1180px;100    overflow: hidden;101  }102  .item {103    display: flex;104    align-items: center;105    gap: 28px;106    padding: 24px 26px;107    height: 180px;108    border-bottom: 1px solid #EEEEEE;109    background: #FFFFFF;110  }111  .item.selected { background: #EAF2FF; }112  .flag {113    width: 120px;114    height: 80px;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    border-radius: 8px;118    display: flex;119    align-items: center;120    justify-content: center;121    color: #757575;122    font-size: 24px;123  }124  .text .code {125    font-size: 52px;126    font-weight: 700;127    color: #222222;128    line-height: 1.2;129  }130  .text .name {131    font-size: 36px;132    color: #6A6A6A;133    margin-top: 6px;134  }135 136  /* Scroll indicator */137  .scrollbar {138    position: absolute;139    right: 12px;140    top: 540px;141    width: 12px;142    height: 260px;143    background: #CFCFCF;144    border-radius: 8px;145  }146 147  /* Keyboard mock */148  .keyboard {149    position: absolute;150    left: 0;151    bottom: 0;152    width: 1080px;153    height: 920px;154    background: #101010;155    box-shadow: 0 -4px 12px rgba(0,0,0,0.25);156  }157  .suggest-bar {158    height: 140px;159    background: #0A0A0A;160  }161  .keys {162    height: 780px;163    background: #181818;164    padding: 28px 36px 90px;165    display: flex;166    flex-direction: column;167    justify-content: space-between;168  }169  .key-row {170    display: flex;171    justify-content: center;172    gap: 22px;173  }174  .key {175    width: 92px;176    height: 112px;177    background: #2A2A2A;178    border-radius: 18px;179    color: #E6E6E6;180    display: flex;181    align-items: center;182    justify-content: center;183    font-size: 44px;184  }185  .key.wide { width: 160px; }186  .space { width: 520px; }187  .round {188    width: 126px;189    height: 126px;190    border-radius: 50%;191    background: #2A2A2A;192  }193  .round.blue { background: #CDE0FF; color: #1B3FAE; }194  .gesture {195    position: absolute;196    bottom: 16px;197    left: 50%;198    transform: translateX(-50%);199    width: 240px;200    height: 10px;201    border-radius: 6px;202    background: #EDEDED;203    opacity: 0.92;204  }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Status Bar -->211  <div class="status-bar">212    <div>11:09</div>213    <div class="status-right">214      <!-- simple cellular icon -->215      <svg class="icon" viewBox="0 0 24 24">216        <rect x="2" y="15" width="4" height="7" fill="#4A4A4A"></rect>217        <rect x="8" y="12" width="4" height="10" fill="#4A4A4A"></rect>218        <rect x="14" y="9" width="4" height="13" fill="#4A4A4A"></rect>219      </svg>220      <!-- wifi icon -->221      <svg class="icon" viewBox="0 0 24 24">222        <path d="M2 8c5-4 15-4 20 0" stroke="#4A4A4A" stroke-width="2" fill="none"/>223        <path d="M5 12c4-3 10-3 14 0" stroke="#4A4A4A" stroke-width="2" fill="none"/>224        <circle cx="12" cy="16" r="2" fill="#4A4A4A"/>225      </svg>226      <!-- battery icon -->227      <svg class="icon" viewBox="0 0 28 24">228        <rect x="2" y="5" width="20" height="14" rx="2" ry="2" stroke="#4A4A4A" stroke-width="2" fill="none"></rect>229        <rect x="4" y="7" width="16" height="10" fill="#4A4A4A"></rect>230        <rect x="22" y="9" width="4" height="6" fill="#4A4A4A"></rect>231      </svg>232    </div>233  </div>234 235  <!-- Search Header -->236  <div class="search-bar">237    <div class="back-btn">238      <svg class="icon" viewBox="0 0 24 24">239        <path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>240      </svg>241    </div>242    <div class="search-input">243      <span class="cursor"></span>244      <span class="search-placeholder">Search</span>245    </div>246  </div>247 248  <!-- Chips -->249  <div class="chips-wrap">250    <div class="chips">251      <div class="chip active">Currencies</div>252      <div class="chip">Crypto</div>253      <div class="chip">Metals</div>254    </div>255  </div>256 257  <!-- List -->258  <div class="list">259    <div class="item selected">260      <div class="flag">[IMG: China Flag]</div>261      <div class="text">262        <div class="code">CNY</div>263        <div class="name">Chinese Yuan</div>264      </div>265    </div>266 267    <div class="item">268      <div class="flag">[IMG: Afghanistan Flag]</div>269      <div class="text">270        <div class="code">AFN</div>271        <div class="name">Afghan Afghani</div>272      </div>273    </div>274 275    <div class="item">276      <div class="flag">[IMG: Albania Flag]</div>277      <div class="text">278        <div class="code">ALL</div>279        <div class="name">Albanian Lek</div>280      </div>281    </div>282 283    <div class="item">284      <div class="flag">[IMG: Armenia Flag]</div>285      <div class="text">286        <div class="code">AMD</div>287        <div class="name">Armenian Dram</div>288      </div>289    </div>290 291    <div class="item">292      <div class="flag">[IMG: Netherlands Antilles Flag]</div>293      <div class="text">294        <div class="code">ANG</div>295        <div class="name">Netherlands Antillean Guilder</div>296      </div>297    </div>298  </div>299 300  <!-- Scroll indicator -->301  <div class="scrollbar"></div>302 303  <!-- Keyboard Mock -->304  <div class="keyboard">305    <div class="suggest-bar"></div>306    <div class="keys">307      <div class="key-row">308        <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>309        <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>310      </div>311      <div class="key-row">312        <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>313        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>314      </div>315      <div class="key-row">316        <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>317        <div class="key">n</div><div class="key">m</div>318        <div class="key wide">319          <svg class="icon" viewBox="0 0 24 24">320            <path d="M4 6l8 8 8-8" stroke="#E6E6E6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>321          </svg>322        </div>323      </div>324      <div class="key-row">325        <div class="round">?123</div>326        <div class="key">,</div>327        <div class="key">🙂</div>328        <div class="key space"></div>329        <div class="key">.</div>330        <div class="key">331          <svg class="icon" viewBox="0 0 24 24">332            <path d="M5 7h14M5 12h10M5 17h14" stroke="#E6E6E6" stroke-width="2" fill="none" stroke-linecap="round"/>333          </svg>334        </div>335        <div class="round blue">🔍</div>336      </div>337    </div>338    <div class="gesture"></div>339  </div>340 341</div>342</body>343</html>