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 UI - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212;15    color: #EDEDED;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    height: 96px;25    width: 100%;26    padding: 0 28px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #EDEDED;32    font-size: 30px;33  }34  .status-left { font-weight: 600; letter-spacing: 1px; }35  .status-right { display: flex; align-items: center; gap: 24px; }36  .icon-circle {37    width: 22px; height: 22px; border: 3px solid #9E9E9E; border-radius: 50%;38  }39  .wifi {40    width: 32px; height: 22px;41  }42  .wifi path { fill: none; stroke: #E0E0E0; stroke-width: 3; }43  .battery {44    display: inline-flex; align-items: center; gap: 8px; font-size: 26px; color: #E0E0E0;45  }46  .battery .shape {47    width: 44px; height: 22px; border: 3px solid #E0E0E0; border-radius: 4px; position: relative;48  }49  .battery .shape::after {50    content: ""; position: absolute; right: -8px; top: 4px; width: 6px; height: 12px; background: #E0E0E0; border-radius: 1px;51  }52  .battery .level {53    position: absolute; left: 2px; top: 2px; bottom: 2px; right: 2px; background: #E0E0E0; border-radius: 2px;54  }55 56  /* Top app bar with search */57  .appbar {58    position: absolute;59    top: 96px;60    left: 0;61    width: 100%;62    height: 112px;63    display: flex;64    align-items: center;65    padding: 0 24px;66    box-sizing: border-box;67    color: #fff;68  }69  .nav-icon, .clear-icon {70    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;71  }72  .title-row {73    flex: 1;74    display: flex;75    align-items: center;76    gap: 8px;77    font-size: 48px;78    color: #EDEDED;79  }80  .caret {81    width: 3px; height: 56px; background: #5FE36A; display: inline-block;82    margin-left: 6px; border-radius: 2px;83  }84 85  /* Main empty area */86  .content {87    position: absolute;88    top: 208px;89    bottom: 760px; /* space reserved for keyboard */90    left: 0;91    right: 0;92    background: #121212;93  }94 95  /* Keyboard */96  .keyboard {97    position: absolute;98    left: 0; right: 0; bottom: 0;99    height: 860px;100    background: #1A1A1A;101    border-top: 1px solid #2A2A2A;102    box-sizing: border-box;103  }104  .suggest {105    height: 96px;106    display: flex;107    align-items: center;108    padding: 0 24px;109    gap: 24px;110    background: #171717;111    color: #D8D8D8;112    font-size: 40px;113  }114  .suggest .left-ico,115  .suggest .right-ico {116    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; opacity: 0.9;117  }118  .suggest .words {119    flex: 1; display: flex; justify-content: center; gap: 40px; align-items: center;120  }121  .divider {122    width: 2px; height: 36px; background: #3A3A3A;123  }124 125  .rows {126    padding: 24px;127    display: flex; flex-direction: column; gap: 22px;128  }129  .row { display: flex; gap: 14px; }130  .key {131    flex: 1;132    height: 120px;133    background: #2B2B2B;134    border-radius: 18px;135    display: flex; align-items: center; justify-content: center;136    color: #F2F2F2;137    font-size: 44px;138    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);139  }140  .key.small { flex: 0.9; }141  .key.wide { flex: 1.4; }142  .key.space { flex: 4.5; font-size: 34px; color: #BEBEBE; }143  .key.alt { background: #2F2F2F; color: #EAEAEA; }144  .key.pill {145    background: #A7B99A; color: #111; font-weight: 600;146  }147  .key.circle {148    width: 120px; height: 120px; border-radius: 60px; flex: 0 0 120px;149    background: #C2FF77; color: #0B1D0B;150  }151 152  /* Gesture bar */153  .gesture {154    position: absolute;155    bottom: 12px;156    left: 50%;157    transform: translateX(-50%);158    width: 240px; height: 10px; background: #FFFFFF; opacity: 0.9; border-radius: 6px;159    pointer-events: none;160  }161 162  svg { display: block; }163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Status Bar -->169  <div class="status-bar">170    <div class="status-left">11:51</div>171    <div class="status-right">172      <div class="icon-circle" title="Do Not Disturb"></div>173      <svg class="wifi" viewBox="0 0 24 14" aria-hidden="true">174        <path d="M2 12c4-4 16-4 20 0M6 10c3-3 9-3 12 0M10 8c2-2 4-2 6 0M12 12l0 0" />175      </svg>176      <div class="battery">177        <div class="shape"><div class="level"></div></div>178        <div>100%</div>179      </div>180    </div>181  </div>182 183  <!-- App Bar with search text -->184  <div class="appbar">185    <div class="nav-icon" aria-label="Back">186      <svg width="40" height="40" viewBox="0 0 24 24">187        <path d="M15 18l-6-6 6-6" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>188      </svg>189    </div>190    <div class="title-row">191      <div>Berlin trip</div>192      <span class="caret"></span>193    </div>194    <div class="clear-icon" aria-label="Clear">195      <svg width="36" height="36" viewBox="0 0 24 24">196        <path d="M6 6l12 12M18 6L6 18" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"></path>197      </svg>198    </div>199  </div>200 201  <!-- Main content area (empty / dark) -->202  <div class="content"></div>203 204  <!-- Keyboard -->205  <div class="keyboard">206    <div class="suggest">207      <div class="left-ico">208        <svg width="36" height="36" viewBox="0 0 24 24" aria-hidden="true">209          <rect x="3" y="3" width="7" height="7" fill="#CFCFCF"></rect>210          <rect x="14" y="3" width="7" height="7" fill="#CFCFCF"></rect>211          <rect x="3" y="14" width="7" height="7" fill="#CFCFCF"></rect>212          <rect x="14" y="14" width="7" height="7" fill="#CFCFCF"></rect>213        </svg>214      </div>215      <div class="words">216        <div>trip</div>217        <div class="divider"></div>218        <div>Trip</div>219        <div class="divider"></div>220        <div>triple</div>221      </div>222      <div class="right-ico">223        <svg width="34" height="34" viewBox="0 0 24 24">224          <path d="M12 3a4 4 0 0 0-4 4v4a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4zm-7 9h14M9 16h6" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"></path>225        </svg>226      </div>227    </div>228 229    <div class="rows">230      <div class="row">231        <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>232      </div>233      <div class="row">234        <div class="key small">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 small">l</div>235      </div>236      <div class="row">237        <div class="key wide alt">238          <svg width="40" height="40" viewBox="0 0 24 24">239            <path d="M15 18l-6-6 6-6" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>240          </svg>241        </div>242        <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>243        <div class="key wide alt">244          <svg width="44" height="44" viewBox="0 0 24 24">245            <path d="M4 18l8-8 8 8" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>246          </svg>247        </div>248      </div>249      <div class="row">250        <div class="key pill small">?123</div>251        <div class="key alt small">,</div>252        <div class="key alt small">253          <svg width="36" height="36" viewBox="0 0 24 24">254            <circle cx="12" cy="9" r="3.2" fill="#EDEDED"></circle>255            <path d="M4 20c2-3 6-4 8-4s6 1 8 4" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"></path>256          </svg>257        </div>258        <div class="key space">space</div>259        <div class="key alt small">.</div>260        <div class="key circle">261          <svg width="40" height="40" viewBox="0 0 24 24">262            <circle cx="11" cy="11" r="6" fill="none" stroke="#0B1D0B" stroke-width="2"></circle>263            <path d="M16 16l4 4" stroke="#0B1D0B" stroke-width="2" stroke-linecap="round"></path>264          </svg>265        </div>266      </div>267    </div>268  </div>269 270  <div class="gesture"></div>271</div>272</body>273</html>