GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Search UI with Keyboard</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Status bar (dark) */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 140px;23    background: #241F26;24    color: #fff;25  }26  .status-content {27    position: absolute;28    top: 36px;29    left: 40px;30    right: 40px;31    height: 68px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    font-weight: 600;36    font-size: 44px;37    letter-spacing: 1px;38  }39  .status-icons {40    display: flex;41    align-items: center;42    gap: 26px;43  }44  .dot {45    width: 14px; height: 14px; border-radius: 50%; background: #fff; opacity: .9;46  }47  .battery {48    width: 40px; height: 20px; border: 2px solid #fff; border-radius: 3px; position: relative;49  }50  .battery::after {51    content: ""; position: absolute; right: -8px; top: 4px; width: 6px; height: 12px; background: #fff; border-radius: 2px;52  }53 54  /* Search area */55  .search-area {56    position: absolute;57    top: 140px;58    left: 0;59    width: 1080px;60    padding: 28px 40px 20px;61    background: #FFFFFF;62  }63  .search-row {64    display: flex;65    align-items: center;66    gap: 24px;67  }68  .icon-btn {69    width: 64px;70    height: 64px;71    display: inline-flex;72    align-items: center;73    justify-content: center;74    color: #4A4A4A;75  }76  .search-input {77    flex: 1;78    font-size: 54px;79    color: #1b1b1b;80  }81  .search-underline {82    margin-top: 20px;83    height: 6px;84    background: #C9C9C9;85    width: 100%;86  }87 88  .suggestion {89    position: absolute;90    top: 340px;91    left: 40px;92    right: 40px;93    font-size: 48px;94    color: #1b1b1b;95  }96 97  /* Keyboard */98  .keyboard {99    position: absolute;100    left: 0;101    bottom: 0;102    width: 1080px;103    height: 900px;104    background: #1C1C21;105    box-shadow: 0 -6px 18px rgba(0,0,0,0.25);106    color: #EDEDED;107  }108  .kb-suggest {109    height: 110px;110    border-bottom: 1px solid #2a2a30;111    display: flex;112    align-items: center;113    justify-content: center;114    color: #D9D9D9;115    font-size: 44px;116    position: relative;117  }118  .kb-suggest .mic {119    position: absolute;120    right: 28px;121    top: 24px;122    width: 64px; height: 64px;123    display: flex; align-items: center; justify-content: center;124    color: #CFCFE6;125  }126 127  .row {128    padding: 18px 22px;129    display: flex;130    justify-content: space-between;131    gap: 14px;132  }133  .key {134    flex: 1;135    max-width: 92px;136    height: 120px;137    border-radius: 16px;138    background: #2C2C32;139    display: flex;140    align-items: center;141    justify-content: center;142    color: #F1F1F1;143    font-size: 46px;144  }145  .row.row2 .key { max-width: 100px; }146  .special { max-width: 140px; }147  .spacebar {148    flex: 1;149    height: 120px;150    border-radius: 18px;151    background: #2C2C32;152  }153  .key-wide { max-width: 180px; }154  .search-btn {155    width: 140px; height: 140px;156    border-radius: 70px;157    background: #DCD8FF;158    color: #2C2C32;159    display: flex; align-items: center; justify-content: center;160    margin-left: 12px;161  }162 163  /* Simple SVG icons */164  .svg {165    width: 48px; height: 48px; fill: #4A4A4A;166  }167  .svg-white { fill: #EDEDED; width: 44px; height: 44px; }168  .clear {169    font-size: 60px;170    color: #6A6A6A;171    line-height: 1;172  }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Dark status bar -->179  <div class="status-bar">180    <div class="status-content">181      <div>10:46</div>182      <div class="status-icons">183        <div class="dot"></div>184        <div class="dot"></div>185        <div class="dot"></div>186        <svg class="svg" viewBox="0 0 24 24">187          <path fill="#fff" d="M12 3C7 3 3 7 3 12h3a6 6 0 0 1 12 0h3c0-5-4-9-9-9zm-9 9c0 5 4 9 9 9s9-4 9-9h-3a6 6 0 0 1-12 0H3z"/>188        </svg>189        <div class="battery"></div>190      </div>191    </div>192  </div>193 194  <!-- Search bar area -->195  <div class="search-area">196    <div class="search-row">197      <div class="icon-btn">198        <svg class="svg" viewBox="0 0 24 24">199          <path d="M15.5 19l-7-7 7-7" stroke="#4A4A4A" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>200        </svg>201      </div>202      <div class="search-input">2 seater recliners</div>203      <div class="icon-btn">204        <div class="clear">&times;</div>205      </div>206    </div>207    <div class="search-underline"></div>208  </div>209 210  <!-- Suggestion -->211  <div class="suggestion">2 seater recliners</div>212 213  <!-- Keyboard -->214  <div class="keyboard">215    <div class="kb-suggest">216      recliners217      <div class="mic">218        <svg class="svg-white" viewBox="0 0 24 24">219          <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 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/>220        </svg>221      </div>222    </div>223 224    <!-- Row 1 -->225    <div class="row">226      <div class="key">q</div>227      <div class="key">w</div>228      <div class="key">e</div>229      <div class="key">r</div>230      <div class="key">t</div>231      <div class="key">y</div>232      <div class="key">u</div>233      <div class="key">i</div>234      <div class="key">o</div>235      <div class="key">p</div>236    </div>237 238    <!-- Row 2 -->239    <div class="row row2" style="padding-left: 60px; padding-right: 60px;">240      <div class="key">a</div>241      <div class="key">s</div>242      <div class="key">d</div>243      <div class="key">f</div>244      <div class="key">g</div>245      <div class="key">h</div>246      <div class="key">j</div>247      <div class="key">k</div>248      <div class="key">l</div>249    </div>250 251    <!-- Row 3 -->252    <div class="row" style="padding-left: 30px; padding-right: 30px;">253      <div class="key special">254        <svg class="svg-white" viewBox="0 0 24 24">255          <path d="M4 16l8-8 8 8" stroke="#EDEDED" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>256        </svg>257      </div>258      <div class="key">z</div>259      <div class="key">x</div>260      <div class="key">c</div>261      <div class="key">v</div>262      <div class="key">b</div>263      <div class="key">n</div>264      <div class="key">m</div>265      <div class="key special">266        <svg class="svg-white" viewBox="0 0 24 24">267          <path d="M6 6h12v12H6z" fill="none"/>268          <path d="M18 8l-6 6-6-6" fill="none" stroke="#EDEDED" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" transform="rotate(180 12 12)"/>269        </svg>270      </div>271    </div>272 273    <!-- Row 4 -->274    <div class="row" style="align-items: center;">275      <div class="key key-wide">?123</div>276      <div class="key key-wide">,</div>277      <div class="spacebar"></div>278      <div class="key key-wide">.</div>279      <div class="search-btn">280        <svg viewBox="0 0 24 24" width="56" height="56" fill="#2C2C32">281          <path d="M15.5 14h-.8l-.3-.3A6 6 0 1 0 14 15.5l.3.3v.8l5 5 1.5-1.5-5-5zm-5.5 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"/>282        </svg>283      </div>284    </div>285  </div>286 287</div>288</body>289</html>