GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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 { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    border-radius: 0;16    box-shadow: none;17  }18 19  /* Top app bar */20  .app-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 240px;26    background: #B63A3D; /* deep red */27    color: #fff;28  }29 30  .status-bar {31    height: 72px;32    padding: 0 32px;33    display: flex;34    align-items: center;35    justify-content: space-between;36    color: #fff;37    font-size: 34px;38    opacity: 0.95;39  }40  .status-left, .status-right { display: flex; align-items: center; gap: 24px; }41  .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }42  .status-icon {43    width: 30px; height: 30px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.8);44  }45 46  .search-wrap {47    position: absolute;48    left: 24px;49    right: 24px;50    top: 92px;51    height: 120px;52    background: #fff;53    border-radius: 12px;54    box-shadow: 0 2px 0 rgba(0,0,0,0.12);55    display: flex;56    align-items: center;57    padding: 0 20px;58    gap: 24px;59  }60  .icon-btn {61    width: 64px;62    height: 64px;63    display: inline-flex;64    align-items: center;65    justify-content: center;66    color: #5f6368;67  }68  .search-text {69    flex: 1;70    font-size: 56px;71    color: #000;72    line-height: 1;73  }74  .caret {75    display: inline-block;76    width: 2px;77    height: 60px;78    background: #B63A3D;79    vertical-align: middle;80    margin-left: 6px;81  }82 83  /* Suggestions sheet */84  .sheet {85    position: absolute;86    top: 222px; /* slightly overlapping the app bar */87    left: 0;88    width: 1080px;89    height: 1320px;90    background: #fff;91    box-shadow: 0 -2px 6px rgba(0,0,0,0.15);92    border-top-left-radius: 12px;93    border-top-right-radius: 12px;94    overflow: hidden;95  }96  .suggestions {97    padding: 20px 32px;98  }99  .suggestion {100    font-size: 48px;101    color: #222;102    padding: 36px 0;103    border-bottom: 1px solid #eee;104  }105  .suggestion:last-child { border-bottom: none; }106 107  /* Scroll indicator */108  .scroll-indicator {109    position: absolute;110    right: 10px;111    top: 300px;112    width: 12px;113    height: 800px;114    background: #e6e6e6;115    border-radius: 6px;116  }117  .scroll-thumb {118    position: absolute;119    right: 10px;120    top: 520px;121    width: 12px;122    height: 160px;123    background: #bdbdbd;124    border-radius: 6px;125  }126 127  /* Keyboard */128  .keyboard {129    position: absolute;130    left: 0;131    bottom: 0;132    width: 1080px;133    height: 740px;134    background: #ECEFE5; /* soft light green */135    border-top-left-radius: 24px;136    border-top-right-radius: 24px;137    box-shadow: 0 -6px 16px rgba(0,0,0,0.15);138    padding: 16px 24px;139  }140 141  .kbd-suggestions {142    display: flex;143    align-items: center;144    gap: 28px;145    padding: 10px 8px 22px;146    font-size: 44px;147    color: #444;148  }149  .kbd-suggestions .sep {150    width: 2px; height: 40px; background: #cfcfcf;151  }152 153  .row {154    display: grid;155    grid-template-columns: repeat(10, 1fr);156    gap: 14px;157    margin-bottom: 22px;158  }159  .key {160    height: 110px;161    background: #fff;162    border-radius: 22px;163    box-shadow: inset 0 0 0 1px #d9d9d9;164    display: flex;165    align-items: center;166    justify-content: center;167    font-size: 44px;168    color: #222;169  }170  .key.light {171    background: #E6F3DE;172    color: #2f6f31;173    box-shadow: inset 0 0 0 1px #cddac7;174  }175  .key.wide { grid-column: span 2; }176  .key.icon { color: #5f6368; }177  .kbd-bottom {178    display: grid;179    grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr;180    gap: 14px;181  }182  .bottom-key {183    height: 120px;184    background: #fff;185    border-radius: 24px;186    box-shadow: inset 0 0 0 1px #d9d9d9;187    display: flex; align-items: center; justify-content: center;188    font-size: 44px; color: #222;189  }190  .bottom-key.search {191    background: #BCE1B1;192    color: #1f5f21;193    box-shadow: inset 0 0 0 1px #a7d49e;194  }195 196  /* Simple icons */197  svg { width: 48px; height: 48px; }198</style>199</head>200<body>201<div id="render-target">202 203  <!-- App bar and search -->204  <div class="app-bar">205    <div class="status-bar">206      <div class="status-left">207        <div>1:11</div>208        <div class="status-icon"></div>209        <div class="status-icon"></div>210        <div class="status-icon"></div>211        <div class="status-dot"></div>212      </div>213      <div class="status-right">214        <div class="status-icon"></div>215        <div class="status-icon"></div>216      </div>217    </div>218 219    <div class="search-wrap">220      <div class="icon-btn">221        <svg viewBox="0 0 24 24" fill="#5f6368">222          <path d="M15 18l-6-6 6-6" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223        </svg>224      </div>225      <div class="search-text">Pizza<span class="caret"></span></div>226      <div class="icon-btn">227        <svg viewBox="0 0 24 24" fill="#5f6368">228          <path d="M6 6l12 12M18 6L6 18" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>229        </svg>230      </div>231    </div>232  </div>233 234  <!-- Suggestions sheet -->235  <div class="sheet">236    <div class="suggestions">237      <div class="suggestion">Amazing Whole Wheat Pizza Crust</div>238      <div class="suggestion">Barbecued Chicken Pizza</div>239      <div class="suggestion">Basic Pizza Dough</div>240      <div class="suggestion">Basic Pizza Sauce</div>241      <div class="suggestion">BBQ Chicken Pizza</div>242      <div class="suggestion">Bread Machine Pizza Dough</div>243      <div class="suggestion">Breakfast Pizza</div>244      <div class="suggestion">Bruschetta Pizza</div>245      <div class="suggestion">Bubble Pizza</div>246    </div>247  </div>248 249  <div class="scroll-indicator"></div>250  <div class="scroll-thumb"></div>251 252  <!-- Keyboard -->253  <div class="keyboard">254    <div class="kbd-suggestions">255      <div>Pizza</div>256      <div class="sep"></div>257      <div>Pizzas</div>258      <div class="sep"></div>259      <div>🍕</div>260      <div style="margin-left:auto; display:flex; align-items:center;">261        <svg viewBox="0 0 24 24" fill="#5f6368">262          <path d="M12 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm6-1 4 4" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"/>263        </svg>264      </div>265    </div>266 267    <div class="row">268      <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>269      <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>270    </div>271    <div class="row">272      <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>273      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key icon">274        <svg viewBox="0 0 24 24" fill="#5f6368">275          <path d="M4 20l16-8L4 4v6l9 2-9 2v6z" fill="#5f6368"/>276        </svg>277      </div>278    </div>279    <div class="row">280      <div class="key light">⇧</div>281      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>282      <div class="key">b</div><div class="key">n</div><div class="key">m</div>283      <div class="key">.</div>284      <div class="key icon">285        <svg viewBox="0 0 24 24" fill="#5f6368">286          <path d="M4 6h16l-2 14H6L4 6zm5 2v10m6-10v10" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"/>287        </svg>288      </div>289    </div>290 291    <div class="kbd-bottom">292      <div class="bottom-key light">?123</div>293      <div class="bottom-key">,</div>294      <div class="bottom-key">🙂</div>295      <div class="bottom-key">.</div>296      <div class="bottom-key search">297        <svg viewBox="0 0 24 24" fill="#2f6f31">298          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>299        </svg>300      </div>301    </div>302  </div>303 304</div>305</body>306</html>