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</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121417;14    color: #EDEDED;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    background: #111417;25    display: flex;26    align-items: center;27    padding: 0 28px;28    box-sizing: border-box;29    color: #D9D9D9;30    font-size: 36px;31    letter-spacing: 1px;32  }33  .status-spacer { flex: 1; }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .dot {40    width: 12px; height: 12px; background: #DADADA; border-radius: 50%;41  }42  .battery {43    width: 46px; height: 22px; border: 3px solid #DADADA; border-radius: 6px; position: relative;44  }45  .battery::after {46    content: ""; position: absolute; right: -8px; top: 5px; width: 6px; height: 12px; background: #DADADA; border-radius: 2px;47  }48  .battery-level {49    position: absolute; left: 3px; top: 3px; bottom: 3px; width: 70%; background: #DADADA; border-radius: 3px;50  }51 52  /* Search area */53  .search-area {54    position: absolute;55    top: 96px;56    left: 0;57    right: 0;58    padding: 28px 28px 18px;59    box-sizing: border-box;60  }61  .search-row {62    display: flex;63    align-items: center;64    gap: 24px;65  }66  .search-field {67    flex: 1;68    height: 116px;69    background: #23282C;70    border-radius: 22px;71    display: flex;72    align-items: center;73    padding: 0 26px;74    box-sizing: border-box;75  }76  .search-icon, .clear-icon {77    width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;78  }79  .search-text {80    flex: 1;81    color: #F2F2F2;82    font-size: 42px;83    margin-left: 16px;84    white-space: nowrap;85    overflow: hidden;86    text-overflow: ellipsis;87  }88  .clear-chip {89    width: 64px; height: 64px; border-radius: 32px; background: #3A3F43;90    display: flex; align-items: center; justify-content: center;91    margin-left: 12px;92  }93  .cancel {94    color: #62A8FF;95    font-size: 42px;96    padding-right: 6px;97  }98 99  /* Suggestions */100  .suggestions {101    margin-top: 22px;102  }103  .suggestion {104    padding: 26px 10px 26px 18px;105    margin-left: 24px;106    color: #F1F1F1;107    font-size: 40px;108  }109 110  /* Big filler area (content background) */111  .content-fill {112    position: absolute;113    top: 350px;114    bottom: 920px; /* make room for keyboard */115    left: 0; right: 0;116    background: #121417;117  }118 119  /* Keyboard */120  .keyboard {121    position: absolute;122    left: 0; right: 0; bottom: 0;123    height: 950px;124    background: #1A1712;125    box-sizing: border-box;126    padding: 0 18px 90px;127  }128  .kb-suggest {129    height: 110px;130    background: #231F17;131    margin: 0 -18px 16px;132    padding: 0 26px;133    display: flex;134    align-items: center;135    color: #EADAC7;136    font-size: 42px;137    box-sizing: border-box;138  }139  .kb-suggest .pipe { opacity: 0.6; padding: 0 16px; }140  .kb-suggest .spacer { flex: 1; }141  .kb-row {142    display: flex;143    gap: 16px;144    margin: 12px 8px;145    justify-content: center;146  }147  .key {148    flex: 1;149    height: 120px;150    background: #2D281E;151    color: #F4E8D1;152    border-radius: 18px;153    display: flex;154    align-items: center;155    justify-content: center;156    font-size: 48px;157    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);158  }159  .key.small { flex: 0 0 88px; }160  .key.wide { flex: 2; }161  .key.space { flex: 5; }162  .action-key { background: #3B3428; }163 164  /* Gesture bar */165  .gesture-bar {166    position: absolute;167    bottom: 24px;168    left: 50%;169    transform: translateX(-50%);170    width: 420px;171    height: 10px;172    background: #F2F2F2;173    border-radius: 6px;174    opacity: 0.9;175  }176 177  /* Simple icon styles */178  svg { fill: #DADFE5; }179  .icon-muted { fill: #C9CED4; }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status Bar -->186  <div class="status-bar">187    <div>11:30</div>188    <div class="status-spacer"></div>189    <div class="status-icons">190      <div class="dot"></div>191      <div class="dot"></div>192      <!-- WiFi -->193      <svg width="42" height="42" viewBox="0 0 24 24">194        <path d="M12 18.5a1.9 1.9 0 1 0 0 3.8 1.9 1.9 0 0 0 0-3.8zm-6.9-6.1 1.7 1.7A8.4 8.4 0 0 1 12 12c2.2 0 4.3.9 5.8 2.1l1.7-1.7A10.9 10.9 0 0 0 12 9.5c-3 0-6 .9-6.9 2.9zm3.4-3.4 1.6 1.6A10 10 0 0 1 12 9c2.1 0 3.9.5 5.9 1.6l1.6-1.6A14 14 0 0 0 12 6.5c-2.6 0-5 .6-7.5 2.5z"/>195      </svg>196      <!-- Battery -->197      <div class="battery"><div class="battery-level"></div></div>198    </div>199  </div>200 201  <!-- Search -->202  <div class="search-area">203    <div class="search-row">204      <div class="search-field">205        <div class="search-icon">206          <svg width="40" height="40" viewBox="0 0 24 24">207            <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l4.9 4.9 1.5-1.5L15.5 14zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>208          </svg>209        </div>210        <div class="search-text">Samsung refrigerator</div>211        <div class="clear-chip">212          <svg width="28" height="28" viewBox="0 0 24 24">213            <path d="M18 6 6 18M6 6l12 12" stroke="#E6E6E6" stroke-width="2" fill="none" stroke-linecap="round"/>214          </svg>215        </div>216      </div>217      <div class="cancel">Cancel</div>218    </div>219 220    <div class="suggestions">221      <div class="suggestion">Samsung fridge freezer combinations</div>222      <div class="suggestion">Samsung Spacemax fridge freezer combinations</div>223    </div>224  </div>225 226  <!-- Content filler (dark area) -->227  <div class="content-fill"></div>228 229  <!-- Keyboard -->230  <div class="keyboard">231    <div class="kb-suggest">232      <div>refrigerator</div>233      <div class="pipe">|</div>234      <div>refrigerators</div>235      <div class="spacer"></div>236      <svg width="48" height="48" viewBox="0 0 24 24" class="icon-muted">237        <path d="M12 3a7 7 0 0 0-7 7v3.5l-1.6 1.6A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7L19 13.5V10a7 7 0 0 0-7-7zm0 18a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z"/>238      </svg>239    </div>240 241    <!-- Row 1 -->242    <div class="kb-row">243      <div class="key">q</div>244      <div class="key">w</div>245      <div class="key">e</div>246      <div class="key">r</div>247      <div class="key">t</div>248      <div class="key">y</div>249      <div class="key">u</div>250      <div class="key">i</div>251      <div class="key">o</div>252      <div class="key">p</div>253    </div>254 255    <!-- Row 2 -->256    <div class="kb-row" style="padding: 0 40px;">257      <div class="key">a</div>258      <div class="key">s</div>259      <div class="key">d</div>260      <div class="key">f</div>261      <div class="key">g</div>262      <div class="key">h</div>263      <div class="key">j</div>264      <div class="key">k</div>265      <div class="key">l</div>266    </div>267 268    <!-- Row 3 -->269    <div class="kb-row" style="padding: 0 90px;">270      <div class="key action-key">⇧</div>271      <div class="key">z</div>272      <div class="key">x</div>273      <div class="key">c</div>274      <div class="key">v</div>275      <div class="key">b</div>276      <div class="key">n</div>277      <div class="key">m</div>278      <div class="key action-key" style="flex:1.4">279        <svg width="44" height="44" viewBox="0 0 24 24">280          <path d="M20 17H8l3.3-3.3-1.4-1.4L4 18l5.9 5.7 1.4-1.4L8 19h12v-2z" fill="#F4E8D1"/>281        </svg>282      </div>283    </div>284 285    <!-- Row 4 (bottom) -->286    <div class="kb-row">287      <div class="key action-key" style="flex:1.4">?123</div>288      <div class="key">,</div>289      <div class="key">😊</div>290      <div class="key space"></div>291      <div class="key">.</div>292      <div class="key action-key" style="flex:1.4">293        <svg width="44" height="44" viewBox="0 0 24 24">294          <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l4.9 4.9 1.5-1.5L15.5 14z" fill="#F4E8D1"/>295        </svg>296      </div>297    </div>298 299    <div class="gesture-bar"></div>300  </div>301 302</div>303</body>304</html>