GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>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    border-radius: 32px;15    box-shadow: 0 8px 24px rgba(0,0,0,0.1);16    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;17    color: #0b4d17;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 120px;27    padding: 0 48px;28    box-sizing: border-box;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: #2a2a2a;33    font-weight: 600;34    font-size: 42px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .status-icons svg {42    width: 42px;43    height: 42px;44    fill: #6b6b6b;45  }46 47  /* Search box */48  .search-wrap {49    position: absolute;50    top: 150px;51    left: 60px;52    width: 960px;53  }54  .search-box {55    height: 140px;56    border: 6px solid #176d18;57    border-radius: 30px;58    background: #e9f5e9;59    display: flex;60    align-items: center;61    padding: 0 36px;62    box-sizing: border-box;63  }64  .search-placeholder {65    color: #98c49a;66    font-size: 48px;67    letter-spacing: 0.5px;68  }69 70  /* Tabs */71  .tabs {72    position: absolute;73    top: 360px;74    left: 60px;75    width: 960px;76    display: flex;77    justify-content: space-between;78    align-items: flex-end;79  }80  .tab {81    font-size: 60px;82    font-weight: 700;83    color: #1b7c1f;84  }85  .tab-line {86    position: absolute;87    top: 445px;88    left: 60px;89    width: 960px;90    height: 12px;91    border-radius: 6px;92    background: #e6f2e6;93    overflow: hidden;94  }95  .tab-line .active {96    width: 480px;97    height: 12px;98    background: #1b7c1f;99  }100 101  /* Hint text */102  .hint {103    position: absolute;104    top: 1180px;105    left: 0;106    width: 1080px;107    text-align: center;108    font-size: 52px;109    color: #c7e7c7;110    font-weight: 700;111  }112 113  /* Keyboard mock */114  .keyboard {115    position: absolute;116    bottom: 72px;117    left: 0;118    width: 1080px;119    height: 880px;120    background: #131313;121    border-top-left-radius: 26px;122    border-top-right-radius: 26px;123    box-shadow: 0 -8px 24px rgba(0,0,0,0.2);124  }125  .kb-topbar {126    height: 120px;127    display: flex;128    align-items: center;129    gap: 36px;130    padding: 0 36px;131    box-sizing: border-box;132  }133  .kb-icon {134    width: 84px;135    height: 84px;136    background: #242424;137    border-radius: 18px;138  }139  .kb-rows {140    padding: 0 36px;141    box-sizing: border-box;142  }143  .kb-row {144    display: flex;145    justify-content: center;146    gap: 16px;147    margin: 16px 0;148  }149  .key {150    width: 92px;151    height: 112px;152    background: #2b2b2b;153    border-radius: 22px;154    color: #eeeeee;155    font-size: 46px;156    display: flex;157    align-items: center;158    justify-content: center;159    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);160  }161  .key.wide { width: 140px; }162  .key.backspace { width: 140px; }163  .space-row {164    display: flex;165    align-items: center;166    gap: 16px;167    padding: 12px 0 0;168  }169  .space {170    width: 520px;171    height: 112px;172    background: #2b2b2b;173    border-radius: 22px;174  }175  .enter {176    width: 140px;177    height: 112px;178    background: #cfd7ff;179    color: #1a1a1a;180    border-radius: 22px;181    font-weight: 700;182  }183 184  /* Gesture bar */185  .gesture-bar {186    position: absolute;187    bottom: 14px;188    left: 50%;189    transform: translateX(-50%);190    width: 360px;191    height: 12px;192    background: #e6e6e6;193    border-radius: 6px;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <!-- Status Bar -->201  <div class="status-bar">202    <div class="time">9:09</div>203    <div class="status-icons">204      <!-- Simple cloud icon -->205      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 16h8a4 4 0 0 0 0-8h-.3A5 5 0 0 0 5 9.5C3.3 10 2 11.5 2 13.3A2.7 2.7 0 0 0 4.7 16H7z"/></svg>206      <!-- WiFi icon -->207      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/><path d="M4.9 13.4a10 10 0 0 1 14.2 0l-1.4 1.4a8 8 0 0 0-11.4 0l-1.4-1.4z"/><path d="M8.5 16.9a6 6 0 0 1 7 0l-1.4 1.4a4 4 0 0 0-4.2 0l-1.4-1.4z"/></svg>208      <!-- Battery icon -->209      <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="6" width="18" height="12" rx="2"></rect><rect x="20" y="10" width="2" height="4" rx="1"></rect></svg>210    </div>211  </div>212 213  <!-- Search -->214  <div class="search-wrap">215    <div class="search-box">216      <div class="search-placeholder">Search ...</div>217    </div>218  </div>219 220  <!-- Tabs -->221  <div class="tabs">222    <div class="tab">Plants</div>223    <div class="tab">People</div>224  </div>225  <div class="tab-line">226    <div class="active"></div>227  </div>228 229  <!-- Hint -->230  <div class="hint">Tap the search box to write</div>231 232  <!-- Keyboard Mock -->233  <div class="keyboard">234    <div class="kb-topbar">235      <div class="kb-icon"></div>236      <div class="kb-icon"></div>237      <div class="kb-icon"></div>238      <div class="kb-icon"></div>239      <div class="kb-icon"></div>240      <div class="kb-icon"></div>241    </div>242 243    <div class="kb-rows">244      <div class="kb-row">245        <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>246      </div>247      <div class="kb-row">248        <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>249      </div>250      <div class="kb-row">251        <div class="key wide">⇧</div>252        <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>253        <div class="key backspace">⌫</div>254      </div>255      <div class="space-row">256        <div class="key wide">?123</div>257        <div class="key wide">,</div>258        <div class="key wide">😊</div>259        <div class="space"></div>260        <div class="key wide">.</div>261        <div class="enter">✓</div>262      </div>263    </div>264  </div>265 266  <!-- Gesture bar -->267  <div class="gesture-bar"></div>268 269</div>270</body>271</html>