GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Android Search UI - ESIC-COVID-19</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: #e9efe6; /* soft pale green seen in screenshot */13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 96px;22    padding: 0 40px;23    box-sizing: border-box;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #2c2c2c;28    font-weight: 600;29    font-size: 40px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 22px;35  }36  .dot {37    width: 14px; height: 14px; background:#2c2c2c; border-radius:50%;38  }39 40  /* Search header bar */41  .search-bar {42    position: absolute;43    top: 96px;44    left: 0;45    width: 1080px;46    height: 150px;47    padding: 0 40px;48    box-sizing: border-box;49    display: flex;50    align-items: center;51    gap: 24px;52    color: #1f1f1f;53  }54  .icon-btn {55    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;56  }57  .search-text {58    font-size: 54px;59    letter-spacing: 1px;60    flex: 1;61    color: #1f1f1f;62  }63  .caret {64    display: inline-block;65    width: 3px; height: 64px; background: #1f1f1f; vertical-align: -10px; margin-left: 6px;66  }67 68  /* Main white content area */69  .content-area {70    position: absolute;71    top: 246px;72    left: 0;73    width: 1080px;74    height: 1364px; /* calculated to fit screenshot proportions */75    background: #ffffff;76  }77 78  /* Keyboard */79  .keyboard {80    position: absolute;81    bottom: 50px; /* leave room for gesture bar */82    left: 0;83    width: 1080px;84    height: 740px;85    background: #eef1ea;86    box-sizing: border-box;87    padding: 26px 30px;88    border-top-left-radius: 28px;89    border-top-right-radius: 28px;90  }91  .suggestion-bar {92    height: 90px;93    display: flex;94    align-items: center;95    justify-content: center;96    color: #1f1f1f;97    font-size: 40px;98    font-weight: 600;99    position: relative;100  }101  .suggestion-mic {102    position: absolute;103    right: 12px;104    top: 12px;105    width: 84px; height: 84px;106    background: #d6e6cf;107    border-radius: 50%;108    display: flex; align-items: center; justify-content: center;109  }110  .keys-row {111    display: flex;112    justify-content: center;113    gap: 16px;114    margin-top: 24px;115  }116  .key {117    width: 86px;118    height: 110px;119    background: #ffffff;120    border: 1px solid #dcdcdc;121    border-radius: 22px;122    box-shadow: 0 1px 0 rgba(0,0,0,0.05);123    display: flex;124    align-items: center;125    justify-content: center;126    font-size: 44px;127    color: #1f1f1f;128    position: relative;129  }130  .key.wide { width: 180px; }131  .key.space { flex: 1; width: auto; height: 110px; }132  .key.small { font-size: 36px; }133  .sup {134    position: absolute;135    top: 10px;136    left: 10px;137    font-size: 26px;138    color: #707070;139  }140  .bottom-row {141    display: flex;142    align-items: center;143    gap: 18px;144    margin-top: 28px;145  }146  .round-btn {147    width: 96px; height: 96px; background: #cfe1c7; border-radius: 28px;148    display: flex; align-items: center; justify-content: center;149  }150  /* Gesture bar */151  .gesture {152    position: absolute;153    bottom: 10px;154    left: 50%;155    transform: translateX(-50%);156    width: 320px; height: 10px;157    background: #bcbcbc;158    border-radius: 6px;159  }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status Bar -->166  <div class="status-bar">167    <div>11:22</div>168    <div class="status-right">169      <!-- simple icons to mimic Android status -->170      <svg width="42" height="42" viewBox="0 0 24 24">171        <path d="M2 8c6-6 14-6 20 0" stroke="#2c2c2c" stroke-width="2" fill="none" stroke-linecap="round"/>172        <path d="M5 11c4-4 10-4 14 0" stroke="#2c2c2c" stroke-width="2" fill="none" stroke-linecap="round"/>173        <circle cx="12" cy="16" r="2" fill="#2c2c2c"/>174      </svg>175      <div class="dot"></div>176      <svg width="52" height="42" viewBox="0 0 26 16">177        <rect x="1" y="2" width="20" height="12" rx="2" ry="2" fill="none" stroke="#2c2c2c" stroke-width="2"/>178        <rect x="3" y="4" width="16" height="8" fill="#2c2c2c"/>179        <rect x="22" y="5" width="3" height="6" fill="#2c2c2c"/>180      </svg>181    </div>182  </div>183 184  <!-- Search Bar -->185  <div class="search-bar">186    <div class="icon-btn">187      <svg width="64" height="64" viewBox="0 0 24 24">188        <path d="M19 11H7.8l5.6-5.6L12 4 4 12l8 8 1.4-1.4-5.6-5.6H19z" fill="#1f1f1f"/>189      </svg>190    </div>191    <div class="search-text">ESIC-COVID-19<span class="caret"></span></div>192    <div class="icon-btn">193      <svg width="64" height="64" viewBox="0 0 24 24">194        <path d="M6 6L18 18M6 18L18 6" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round"/>195      </svg>196    </div>197  </div>198 199  <!-- Large blank content area -->200  <div class="content-area"></div>201 202  <!-- Keyboard -->203  <div class="keyboard">204    <div class="suggestion-bar">205      ESIC-COVID-19206      <div class="suggestion-mic">207        <svg width="38" height="38" viewBox="0 0 24 24">208          <rect x="9" y="5" width="6" height="10" rx="3" fill="#1f1f1f"/>209          <path d="M6 11a6 6 0 0 0 12 0" stroke="#1f1f1f" stroke-width="2" fill="none" stroke-linecap="round"/>210          <path d="M12 17v3" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round"/>211        </svg>212      </div>213    </div>214 215    <!-- Top Row -->216    <div class="keys-row">217      <div class="key"><span class="sup">1</span>q</div>218      <div class="key"><span class="sup">2</span>w</div>219      <div class="key"><span class="sup">3</span>e</div>220      <div class="key"><span class="sup">4</span>r</div>221      <div class="key"><span class="sup">5</span>t</div>222      <div class="key"><span class="sup">6</span>y</div>223      <div class="key"><span class="sup">7</span>u</div>224      <div class="key"><span class="sup">8</span>i</div>225      <div class="key"><span class="sup">9</span>o</div>226      <div class="key"><span class="sup">0</span>p</div>227    </div>228 229    <!-- Second Row -->230    <div class="keys-row">231      <div class="key">a</div>232      <div class="key">s</div>233      <div class="key">d</div>234      <div class="key">f</div>235      <div class="key">g</div>236      <div class="key">h</div>237      <div class="key">j</div>238      <div class="key">k</div>239      <div class="key">l</div>240    </div>241 242    <!-- Third Row -->243    <div class="keys-row">244      <div class="key">z</div>245      <div class="key">x</div>246      <div class="key">c</div>247      <div class="key">v</div>248      <div class="key">b</div>249      <div class="key">n</div>250      <div class="key">m</div>251      <div class="key small">252        <svg width="44" height="44" viewBox="0 0 24 24">253          <path d="M4 12h16M14 6l6 6-6 6" stroke="#1f1f1f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>254        </svg>255      </div>256    </div>257 258    <!-- Bottom Row -->259    <div class="bottom-row">260      <div class="key wide small">?123</div>261      <div class="key small">,</div>262      <div class="key small">🙂</div>263      <div class="key space"></div>264      <div class="key small">.</div>265      <div class="round-btn">266        <svg width="46" height="46" viewBox="0 0 24 24">267          <circle cx="11" cy="11" r="7" stroke="#1f1f1f" stroke-width="2" fill="none"/>268          <path d="M16.5 16.5L21 21" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round"/>269        </svg>270      </div>271    </div>272  </div>273 274  <!-- Gesture bar -->275  <div class="gesture"></div>276 277</div>278</body>279</html>