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>Search Suggestions UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #B83B3B; /* red app area */20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 110px;29    color: #ffffff;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 32px;34    box-sizing: border-box;35  }36  .status-left {37    font-size: 36px;38    font-weight: 500;39    letter-spacing: 0.5px;40  }41  .status-right {42    display: flex;43    align-items: center;44    gap: 26px;45  }46  .status-icon {47    width: 36px;48    height: 36px;49  }50 51  /* Search bar in app bar */52  .search-area {53    position: absolute;54    top: 118px;55    left: 30px;56    width: 1020px;57    height: 110px;58    background: #ffffff;59    border-radius: 14px;60    display: flex;61    align-items: center;62    box-shadow: 0 2px 0 rgba(0,0,0,0.05);63    padding: 0 20px;64    box-sizing: border-box;65  }66  .icon-btn {67    width: 72px;68    height: 72px;69    display: flex;70    align-items: center;71    justify-content: center;72    margin-right: 12px;73  }74  .icon-btn svg {75    width: 44px;76    height: 44px;77    fill: #333;78  }79  .search-input {80    flex: 1;81    font-size: 44px;82    color: #222;83  }84  .clear-btn {85    width: 72px;86    height: 72px;87    display: flex;88    align-items: center;89    justify-content: center;90  }91  .clear-btn svg {92    width: 40px;93    height: 40px;94    stroke: #333;95    stroke-width: 6;96    fill: none;97  }98 99  /* Suggestions card */100  .suggestions {101    position: absolute;102    top: 250px;103    left: 0;104    width: 1080px;105    height: 1290px; /* stops before keyboard */106    background: #ffffff;107    border-top-left-radius: 10px;108    border-top-right-radius: 10px;109    box-shadow: 0 10px 30px rgba(0,0,0,0.15);110    overflow: hidden;111  }112  .suggest-list {113    position: absolute;114    top: 0;115    left: 0;116    right: 24px;117    bottom: 0;118    padding-top: 14px;119  }120  .suggest-item {121    font-size: 44px;122    color: #111;123    padding: 34px 40px;124    border-bottom: 1px solid #eee;125  }126  .scrollbar {127    position: absolute;128    top: 20px;129    right: 10px;130    width: 12px;131    height: 420px;132    background: #E0E0E0;133    border-radius: 6px;134  }135 136  /* Keyboard */137  .keyboard {138    position: absolute;139    bottom: 78px;140    left: 0;141    width: 1080px;142    height: 860px;143    background: #EEF1E6; /* pale green tint */144    border-top-left-radius: 28px;145    border-top-right-radius: 28px;146    box-shadow: 0 -6px 18px rgba(0,0,0,0.12);147  }148  .kb-suggestions {149    height: 120px;150    display: flex;151    align-items: center;152    gap: 22px;153    padding: 0 24px;154    box-sizing: border-box;155  }156  .chip {157    background: #ffffff;158    border: 1px solid #D9D9D9;159    color: #222;160    font-size: 36px;161    padding: 16px 28px;162    border-radius: 26px;163  }164  .kb-rows {165    padding: 16px 24px 0;166    box-sizing: border-box;167  }168  .row {169    display: flex;170    justify-content: space-between;171    margin: 16px 0;172  }173  .key {174    width: 92px;175    height: 120px;176    background: #ffffff;177    border: 1px solid #D8D8D8;178    border-radius: 22px;179    display: flex;180    align-items: center;181    justify-content: center;182    font-size: 42px;183    color: #333;184    box-sizing: border-box;185  }186  .key-wide { width: 160px; }187  .key-xwide { width: 320px; }188  .key-search {189    width: 140px;190    background: #CDE7C7;191    border-color: #B8D8B2;192  }193  .bottom-gesture {194    position: absolute;195    bottom: 20px;196    left: 50%;197    transform: translateX(-50%);198    width: 300px;199    height: 16px;200    background: #888888;201    border-radius: 8px;202    opacity: 0.8;203  }204</style>205</head>206<body>207<div id="render-target">208 209  <!-- Status bar -->210  <div class="status-bar">211    <div class="status-left">8:27</div>212    <div class="status-right">213      <!-- small status icons -->214      <svg class="status-icon" viewBox="0 0 24 24">215        <circle cx="12" cy="12" r="10" fill="#ffffff" opacity="0.6"></circle>216      </svg>217      <svg class="status-icon" viewBox="0 0 24 24">218        <path d="M3 18h18L12 6z" fill="#ffffff"></path>219      </svg>220      <svg class="status-icon" viewBox="0 0 24 24">221        <rect x="4" y="6" width="16" height="12" rx="2" fill="#ffffff"></rect>222      </svg>223      <svg class="status-icon" viewBox="0 0 24 24">224        <rect x="6" y="4" width="12" height="16" rx="3" fill="#ffffff"></rect>225      </svg>226    </div>227  </div>228 229  <!-- Search bar -->230  <div class="search-area">231    <div class="icon-btn">232      <svg viewBox="0 0 24 24">233        <path d="M15 6L9 12l6 6" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>234      </svg>235    </div>236    <div class="search-input">pizza</div>237    <div class="clear-btn">238      <svg viewBox="0 0 24 24">239        <path d="M6 6l12 12M18 6L6 18" stroke="#333" stroke-width="3" stroke-linecap="round"></path>240      </svg>241    </div>242  </div>243 244  <!-- Suggestions dropdown -->245  <div class="suggestions">246    <div class="suggest-list">247      <div class="suggest-item">Amazing Whole Wheat Pizza Crust</div>248      <div class="suggest-item">Barbecued Chicken Pizza</div>249      <div class="suggest-item">Basic Pizza Dough</div>250      <div class="suggest-item">Basic Pizza Sauce</div>251      <div class="suggest-item">BBQ Chicken Pizza</div>252      <div class="suggest-item">Bread Machine Pizza Dough</div>253      <div class="suggest-item">Breakfast Pizza</div>254      <div class="suggest-item">Bruschetta Pizza</div>255      <div class="suggest-item">Bubble Pizza</div>256    </div>257    <div class="scrollbar"></div>258  </div>259 260  <!-- Keyboard -->261  <div class="keyboard">262    <div class="kb-suggestions">263      <div class="chip">pizza</div>264      <div class="chip">Pizza</div>265      <div class="chip">🍕</div>266      <div class="chip">267        <svg viewBox="0 0 24 24" width="32" height="32">268          <rect x="9" y="5" width="6" height="10" rx="3" fill="#666"></rect>269          <rect x="8" y="15" width="8" height="2" fill="#666"></rect>270          <rect x="10" y="17" width="4" height="3" rx="1" fill="#666"></rect>271        </svg>272      </div>273    </div>274    <div class="kb-rows">275      <div class="row">276        <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>277      </div>278      <div class="row">279        <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>280      </div>281      <div class="row">282        <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>283        <div class="key key-wide">⌫</div>284      </div>285      <div class="row">286        <div class="key key-wide">?123</div>287        <div class="key key-wide">,</div>288        <div class="key key-xwide"></div>289        <div class="key">.</div>290        <div class="key key-search">291          <svg viewBox="0 0 24 24" width="40" height="40">292            <circle cx="10" cy="10" r="6" stroke="#2f6b2f" stroke-width="2" fill="none"></circle>293            <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#2f6b2f" stroke-width="2"></line>294          </svg>295        </div>296      </div>297    </div>298  </div>299 300  <!-- Gesture bar -->301  <div class="bottom-gesture"></div>302 303</div>304</body>305</html>