GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Search UI with Keyboard</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: #000000;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15    color: #ffffff;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #fff;26    box-sizing: border-box;27    font-weight: 600;28    letter-spacing: 0.5px;29  }30  .status-left { font-size: 42px; }31  .status-right {32    display: flex; align-items: center; gap: 24px; font-size: 34px; color: #e0e0e0;33  }34  .dot { width: 10px; height: 10px; background: #9e9e9e; border-radius: 50%; display: inline-block; margin: 0 8px; }35  .wifi-icon, .battery-icon {36    display: inline-flex; align-items: center;37  }38  .wifi-icon svg { width: 36px; height: 36px; fill: none; stroke: #ffffff; stroke-width: 3; }39  .battery-icon {40    gap: 10px; font-size: 34px; color: #ffffff;41  }42  .battery-icon svg { width: 40px; height: 22px; fill: none; stroke: #ffffff; stroke-width: 3; }43 44  /* Search bar */45  .search-wrap {46    padding: 0 24px;47  }48  .search-bar {49    margin-top: 6px;50    height: 120px;51    background: #1f1f1f;52    border-radius: 28px;53    display: flex;54    align-items: center;55    box-sizing: border-box;56    padding: 0 24px;57  }58  .search-back {59    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;60  }61  .back-icon svg { width: 36px; height: 36px; fill: none; stroke: #ffffff; stroke-width: 6; }62  .search-input {63    flex: 1;64    color: #ffffff;65    font-size: 48px;66    line-height: 1;67  }68  .search-actions {69    display: flex; align-items: center; gap: 18px;70  }71  .action-btn {72    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 36px;73  }74  .clear-btn { background: transparent; }75  .clear-btn svg { width: 34px; height: 34px; stroke: #ffffff; stroke-width: 5; }76  .camera-btn { background: #2b2b2b; }77  .camera-btn svg { width: 34px; height: 34px; fill: none; stroke: #ffffff; stroke-width: 4; }78 79  /* Suggestion */80  .suggestions {81    padding: 26px 36px;82  }83  .suggestion {84    padding: 18px 0;85  }86  .suggestion .title {87    font-size: 46px; color: #e0e0e0;88  }89  .suggestion .meta {90    margin-top: 8px; font-size: 28px; color: #8f8f8f;91  }92 93  /* Big empty area (content) */94  .content-space {95    height: 1000px;96  }97 98  /* Keyboard */99  .keyboard {100    position: absolute;101    left: 0; right: 0; bottom: 80px;102    height: 920px;103    background: #121416;104    border-top: 1px solid #1e1e1e;105    box-sizing: border-box;106    padding: 24px 24px 18px;107  }108  .kb-suggest {109    height: 86px;110    margin-bottom: 18px;111    display: flex; align-items: center; justify-content: space-between;112    color: #cfd2d5;113  }114  .kb-left {115    display: flex; align-items: center; gap: 20px;116  }117  .kb-grid {118    width: 64px; height: 64px; border-radius: 12px; background: #2a2d30;119    display: flex; align-items: center; justify-content: center;120  }121  .kb-grid svg { width: 36px; height: 36px; fill: #cfd2d5; }122  .kb-words {123    display: flex; align-items: center; gap: 18px; font-size: 34px;124  }125  .kb-sep {126    width: 2px; height: 34px; background: #3c3f42;127  }128  .kb-right {129    width: 64px; height: 64px; border-radius: 32px; background: #2a2d30;130    display: flex; align-items: center; justify-content: center;131  }132  .kb-right svg { width: 34px; height: 34px; fill: none; stroke: #cfd2d5; stroke-width: 3; }133 134  .kb-row {135    display: flex; gap: 12px; justify-content: center; margin-bottom: 14px;136  }137  .key {138    background: #1f2326;139    color: #e7e7e7;140    font-size: 42px;141    height: 120px;142    min-width: 88px;143    padding: 0 26px;144    border-radius: 22px;145    display: flex; align-items: center; justify-content: center;146    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);147  }148  .key.small { min-width: 80px; }149  .key.wide { min-width: 120px; }150  .key.space { flex: 1; min-width: 420px; justify-content: flex-start; padding-left: 38px; color: #bfc4c8; }151  .key.shift, .key.backspace { background: #23272a; }152  .key.enter, .key.num {153    background: #9be5c0; color: #10231a; font-weight: 700;154    border-radius: 32px;155  }156  .key.round {157    width: 120px; min-width: 120px; border-radius: 60px;158  }159  .key.icon svg { width: 38px; height: 38px; stroke: #e7e7e7; fill: none; stroke-width: 4; }160 161  /* Gesture bar */162  .gesture {163    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);164    width: 360px; height: 10px; border-radius: 5px; background: #e8e8e8;165    opacity: 0.9;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status Bar -->173  <div class="status-bar">174    <div class="status-left">3:46</div>175    <div class="status-right">176      <span class="dot"></span>177      <span class="dot"></span>178      <span class="wifi-icon">179        <svg viewBox="0 0 24 24">180          <path d="M2 8c5-4 15-4 20 0"></path>181          <path d="M5 12c3-3 11-3 14 0"></path>182          <path d="M8 15c2-2 6-2 8 0"></path>183          <circle cx="12" cy="18" r="1.6" fill="#ffffff"></circle>184        </svg>185      </span>186      <div class="battery-icon">187        <svg viewBox="0 0 24 24">188          <rect x="1" y="4" width="18" height="12" rx="3"></rect>189          <rect x="20" y="8" width="3" height="4" rx="1"></rect>190        </svg>191        <span>100%</span>192      </div>193    </div>194  </div>195 196  <!-- Search Bar -->197  <div class="search-wrap">198    <div class="search-bar">199      <div class="search-back back-icon">200        <svg viewBox="0 0 24 24">201          <path d="M15 19l-7-7 7-7"></path>202        </svg>203      </div>204      <div class="search-input">BMW X7 SUV</div>205      <div class="search-actions">206        <div class="action-btn clear-btn">207          <svg viewBox="0 0 24 24">208            <path d="M5 5l14 14M19 5L5 19"></path>209          </svg>210        </div>211        <div class="action-btn camera-btn">212          <svg viewBox="0 0 24 24">213            <rect x="4" y="7" width="16" height="11" rx="2"></rect>214            <path d="M9 7l2-3h2l2 3"></path>215            <circle cx="12" cy="12" r="3.2"></circle>216          </svg>217        </div>218      </div>219    </div>220  </div>221 222  <!-- Suggestions -->223  <div class="suggestions">224    <div class="suggestion">225      <div class="title">bmw x7 suv</div>226      <div class="meta">Recent</div>227    </div>228  </div>229 230  <div class="content-space"></div>231 232  <!-- Keyboard -->233  <div class="keyboard">234    <div class="kb-suggest">235      <div class="kb-left">236        <div class="kb-grid">237          <svg viewBox="0 0 24 24">238            <rect x="3" y="3" width="6" height="6"></rect>239            <rect x="15" y="3" width="6" height="6"></rect>240            <rect x="3" y="15" width="6" height="6"></rect>241            <rect x="15" y="15" width="6" height="6"></rect>242          </svg>243        </div>244        <div class="kb-words">245          <span>SUV</span>246          <div class="kb-sep"></div>247          <span>SUB</span>248          <div class="kb-sep"></div>249          <span>SIV</span>250        </div>251      </div>252      <div class="kb-right">253        <svg viewBox="0 0 24 24">254          <circle cx="12" cy="10" r="4"></circle>255          <path d="M5 20c2-4 12-4 14 0"></path>256        </svg>257      </div>258    </div>259 260    <div class="kb-row">261      <div class="key">q</div>262      <div class="key">w</div>263      <div class="key">e</div>264      <div class="key">r</div>265      <div class="key">t</div>266      <div class="key">y</div>267      <div class="key">u</div>268      <div class="key">i</div>269      <div class="key">o</div>270      <div class="key">p</div>271    </div>272 273    <div class="kb-row">274      <div class="key">a</div>275      <div class="key">s</div>276      <div class="key">d</div>277      <div class="key">f</div>278      <div class="key">g</div>279      <div class="key">h</div>280      <div class="key">j</div>281      <div class="key">k</div>282      <div class="key">l</div>283    </div>284 285    <div class="kb-row">286      <div class="key shift wide">⇧</div>287      <div class="key">z</div>288      <div class="key">x</div>289      <div class="key">c</div>290      <div class="key">v</div>291      <div class="key">b</div>292      <div class="key">n</div>293      <div class="key">m</div>294      <div class="key backspace icon">295        <svg viewBox="0 0 24 24">296          <path d="M3 12l6-6h10v12H9z"></path>297          <path d="M10 9l6 6M16 9l-6 6"></path>298        </svg>299      </div>300    </div>301 302    <div class="kb-row">303      <div class="key num round">?123</div>304      <div class="key small">,</div>305      <div class="key small">😊</div>306      <div class="key space">space</div>307      <div class="key small">.</div>308      <div class="key enter round icon">309        <svg viewBox="0 0 24 24">310          <circle cx="10" cy="10" r="6" stroke="#10231a" fill="none"></circle>311          <path d="M16 16l5 5" stroke="#10231a"></path>312        </svg>313      </div>314    </div>315  </div>316 317  <!-- Gesture bar -->318  <div class="gesture"></div>319 320</div>321</body>322</html>