GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Search UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 86px;23    background: #121212;24    display: flex;25    align-items: center;26    padding: 0 24px;27    box-sizing: border-box;28  }29  .status-left { font-size: 28px; color: #EDEDED; }30  .status-right {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 20px;35    color: #BDBDBD;36    font-size: 20px;37  }38  .battery {39    display: flex;40    align-items: center;41    gap: 8px;42    color: #EDEDED;43    font-size: 24px;44  }45  .battery-icon {46    width: 34px; height: 18px;47    border: 2px solid #EDEDED; border-radius: 3px; position: relative;48  }49  .battery-icon::after{50    content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 10px; background: #EDEDED; border-radius: 1px;51  }52  .battery-fill {53    position: absolute; left: 2px; top: 2px; width: 24px; height: 12px; background: #EDEDED; border-radius: 2px;54  }55 56  /* Search bar */57  .search-bar {58    position: absolute;59    top: 86px;60    left: 0;61    width: 1080px;62    height: 120px;63    display: flex;64    align-items: center;65    padding: 0 24px;66    box-sizing: border-box;67    border-bottom: 1px solid #1F1F1F;68  }69  .icon-btn {70    width: 72px; height: 72px;71    display: flex; align-items: center; justify-content: center;72    color: #E0E0E0;73  }74  .search-input {75    flex: 1;76    font-size: 44px;77    color: #EDEDED;78    padding: 0 10px;79    white-space: nowrap;80    overflow: hidden;81    text-overflow: ellipsis;82  }83 84  /* Suggestions area */85  .suggestions {86    position: absolute;87    top: 206px;88    left: 0;89    width: 1080px;90    bottom: 820px; /* leaves space for keyboard */91    overflow: hidden;92  }93  .suggest-item {94    display: flex;95    align-items: center;96    padding: 28px 32px;97    gap: 28px;98    border-bottom: 1px solid #191919;99  }100  .suggest-text {101    display: flex;102    flex-direction: column;103  }104  .title {105    font-size: 44px; color: #EDEDED;106  }107  .subtitle {108    margin-top: 10px;109    font-size: 28px; color: #A8A8A8;110  }111 112  .img-thumb {113    width: 86px;114    height: 120px;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    display: flex; align-items: center; justify-content: center;118    color: #555;119    font-size: 18px;120  }121 122  /* keyboard */123  .keyboard {124    position: absolute;125    left: 0;126    bottom: 0;127    width: 1080px;128    height: 820px;129    background: #1E1E1E;130    box-shadow: 0 -4px 12px rgba(0,0,0,0.5) inset;131    display: flex;132    flex-direction: column;133    padding: 18px 20px 24px;134    box-sizing: border-box;135  }136  .kb-suggestions {137    display: flex;138    gap: 24px;139    padding: 10px 6px 18px 6px;140  }141  .pill {142    padding: 10px 24px;143    background: #2A2A2A;144    border-radius: 26px;145    color: #D9D9D9;146    font-size: 32px;147  }148  .kb-row {149    display: grid;150    grid-template-columns: repeat(10, 1fr);151    gap: 12px;152    margin-bottom: 14px;153  }154  .kb-row.row2 { grid-template-columns: repeat(9, 1fr); }155  .kb-row.row3 { grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1fr 1fr 1.2fr; }156  .kb-row.row4 {157    grid-template-columns: 1.2fr 1fr 1fr 4fr 1fr 1.2fr;158  }159  .key {160    background: #2B2B2B;161    border-radius: 16px;162    height: 120px;163    display: flex; align-items: center; justify-content: center;164    color: #F2F2F2;165    font-size: 46px;166    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);167  }168  .key.gray { background: #262626; color: #CFCFCF; font-size: 38px; }169  .key.search {170    background: #9FE0BA;171    color: #0C2D1A;172    font-weight: bold;173  }174 175  /* helper icons */176  .svg-icon { width: 42px; height: 42px; }177  .svg-icon.small { width: 36px; height: 36px; }178  .icon-circle { width: 54px; height: 54px; border-radius: 50%; background: #2A2A2A; display:flex; align-items:center; justify-content:center; }179 180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status Bar -->186  <div class="status-bar">187    <div class="status-left">8:38</div>188    <div class="status-right">189      <span>◉</span>190      <span>◌</span>191      <div class="battery">192        <div class="battery-icon"><div class="battery-fill"></div></div>193        <span>95%</span>194      </div>195    </div>196  </div>197 198  <!-- Search Bar -->199  <div class="search-bar">200    <div class="icon-btn">201      <!-- Back Arrow -->202      <svg class="svg-icon" viewBox="0 0 24 24" fill="#E0E0E0">203        <path d="M15.4 3.3L7 11.7l8.4 8.4-1.4 1.4L4.2 11.7 14 2l1.4 1.3z"/>204      </svg>205    </div>206    <div class="search-input">The Pillars of the Earth</div>207    <div class="icon-btn">208      <!-- Clear X -->209      <svg class="svg-icon small" viewBox="0 0 24 24" fill="#B0B0B0">210        <path d="M18 6L6 18M6 6l12 12" stroke="#B0B0B0" stroke-width="2" stroke-linecap="round"/>211      </svg>212    </div>213    <div class="icon-btn">214      <!-- Mic -->215      <svg class="svg-icon" viewBox="0 0 24 24" fill="#B0B0B0">216        <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm-6-3a6 6 0 0 0 12 0h-2a4 4 0 0 1-8 0H6zm5 6h2v3h-2z"/>217      </svg>218    </div>219  </div>220 221  <!-- Suggestions -->222  <div class="suggestions">223    <!-- Recent query -->224    <div class="suggest-item">225      <div class="icon-circle">226        <!-- clock history -->227        <svg class="svg-icon small" viewBox="0 0 24 24" fill="#B0B0B0">228          <path d="M12 2a10 10 0 1 0 10 10h-2a8 8 0 1 1-8-8v3l4-4-4-4v3zM11 7h2v6h-4v-2h2V7z"/>229        </svg>230      </div>231      <div class="title">The Pillars of the Earth</div>232    </div>233 234    <!-- Book item with thumbnail -->235    <div class="suggest-item">236      <div class="img-thumb">[IMG: Book Cover]</div>237      <div class="suggest-text">238        <div class="title">The Pillars of the Earth</div>239        <div class="subtitle">Ken Follett • ebook in your library</div>240      </div>241    </div>242 243    <!-- Search suggestion -->244    <div class="suggest-item">245      <div class="icon-circle">246        <!-- magnifier -->247        <svg class="svg-icon small" viewBox="0 0 24 24" fill="#B0B0B0">248          <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0 2a6 6 0 1 0 0 12A6 6 0 0 0 10 4zm9.7 15.3-4-4 1.4-1.4 4 4-1.4 1.4z"/>249        </svg>250      </div>251      <div class="title">The Pillars of the Earth</div>252    </div>253  </div>254 255  <!-- Keyboard -->256  <div class="keyboard">257    <div class="kb-suggestions">258      <div class="pill">Earth</div>259      <div class="pill">Earth's</div>260      <div class="pill">🌍</div>261      <div class="pill">🌎</div>262      <div class="pill">🎤</div>263    </div>264 265    <div class="kb-row">266      <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>267      <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>268    </div>269 270    <div class="kb-row row2">271      <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>272      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>273    </div>274 275    <div class="kb-row row3">276      <div class="key gray">⇧</div>277      <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 gray">⌫</div>278    </div>279 280    <div class="kb-row row4">281      <div class="key gray">?123</div>282      <div class="key gray">,</div>283      <div class="key gray">☺</div>284      <div class="key"> </div>285      <div class="key gray">.</div>286      <div class="key search">287        <!-- search icon -->288        🔍289      </div>290    </div>291  </div>292 293</div>294</body>295</html>