GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Search</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #1d150f;13    color: #fff;14  }15 16  /* Top search bar */17  .top-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 100%;22    height: 220px;23    background: #2a211a;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28  }29  .back, .close {30    width: 90px;31    height: 90px;32    display: flex;33    align-items: center;34    justify-content: center;35  }36  .back { margin-right: 18px; }37  .close { margin-left: 18px; }38  .search-input {39    flex: 1;40    height: 110px;41    background: #3a3028;42    border-radius: 20px;43    display: flex;44    align-items: center;45    padding: 0 24px;46    color: #e7d7c3;47    font-size: 48px;48    box-sizing: border-box;49  }50  .search-input .placeholder { flex: 1; }51 52  /* Results list */53  .results {54    position: absolute;55    top: 220px;56    left: 0;57    width: 100%;58    padding: 32px 40px 0;59    box-sizing: border-box;60  }61  .result {62    display: flex;63    align-items: center;64    color: #e9d6c9;65    padding: 40px 0;66    border-bottom: 1px solid rgba(255,255,255,0.05);67  }68  .result .text { font-size: 64px; margin-left: 22px; }69  .result .right { margin-left: auto; }70  .folder-item { display: flex; align-items: flex-start; margin-top: 6px; }71  .folder-icon { width: 56px; height: 56px; border-radius: 8px; background: #e6c55c; margin-right: 24px; }72  .folder-item .title { font-size: 60px; color: #fff; }73  .folder-item .meta { font-size: 32px; color: #c0a98a; margin-top: 8px; }74 75  .empty-area { position: absolute; left: 0; right: 0; top: 540px; bottom: 870px; }76 77  /* Keyboard */78  .keyboard {79    position: absolute;80    bottom: 120px;81    left: 0;82    width: 100%;83    height: 820px;84    background: #201a15;85    border-top: 1px solid rgba(255,255,255,0.1);86    padding: 22px 20px;87    box-sizing: border-box;88  }89  .suggest {90    display: flex;91    justify-content: space-around;92    color: #d7c8b8;93    font-size: 44px;94    margin-bottom: 30px;95  }96  .key-row { display: flex; justify-content: center; margin-bottom: 18px; }97  .key {98    background: #2c2520;99    color: #f1e6d8;100    border-radius: 22px;101    padding: 26px 22px;102    margin: 8px;103    font-size: 52px;104    min-width: 84px;105    text-align: center;106  }107  .key.small { font-size: 40px; min-width: 90px; }108  .key.wide { min-width: 160px; }109  .space { flex: 1; min-width: 0; }110  .bottom-row { display: flex; align-items: center; }111  .search-btn {112    background: #f5d1b2;113    color: #372c25;114    border-radius: 50%;115    width: 120px;116    height: 120px;117    display: flex;118    align-items: center;119    justify-content: center;120    margin-left: auto;121    margin-right: 12px;122  }123  .mic {124    width: 100px;125    height: 100px;126    background: #2c2520;127    border-radius: 26px;128    display: flex;129    align-items: center;130    justify-content: center;131    margin-left: 16px;132  }133 134  /* Bottom navigation bar */135  .navbar {136    position: absolute;137    bottom: 0;138    left: 0;139    width: 100%;140    height: 120px;141    background: transparent;142    display: flex;143    align-items: center;144    justify-content: center;145  }146  .home-indicator { width: 360px; height: 12px; background: #e0d9d1; border-radius: 6px; opacity: 0.6; }147 148  /* Icons */149  svg { width: 64px; height: 64px; }150  .icon { fill: #e9d6c9; }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Top search bar -->157  <div class="top-bar">158    <div class="back">159      <svg viewBox="0 0 24 24" class="icon">160        <path d="M15 18l-6-6 6-6" stroke="#e9d6c9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>161      </svg>162    </div>163    <div class="search-input">164      <div class="placeholder">globalisation</div>165    </div>166    <div class="close">167      <svg viewBox="0 0 24 24" class="icon">168        <path d="M6 6l12 12M18 6L6 18" stroke="#e9d6c9" stroke-width="2" stroke-linecap="round"></path>169      </svg>170    </div>171  </div>172 173  <!-- Results list -->174  <div class="results">175    <div class="result">176      <svg viewBox="0 0 24 24" class="icon">177        <circle cx="10" cy="10" r="9" fill="none" stroke="#e9d6c9" stroke-width="2"></circle>178        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#e9d6c9" stroke-width="2" stroke-linecap="round"></line>179      </svg>180      <div class="text">globalisation</div>181      <div class="right">182        <svg viewBox="0 0 24 24" class="icon">183          <path d="M7 17l10-10M7 7h10v10" stroke="#e9d6c9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>184        </svg>185      </div>186    </div>187 188    <div class="folder-item">189      <div class="folder-icon"></div>190      <div>191        <div class="title">Globalisation</div>192        <div class="meta">Modified Jul 10</div>193      </div>194    </div>195  </div>196 197  <div class="empty-area"></div>198 199  <!-- Keyboard -->200  <div class="keyboard">201    <div class="suggest">202      <div>in</div>203      <div>|</div>204      <div>and</div>205      <div>|</div>206      <div>to</div>207    </div>208    <div class="key-row">209      <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>210    </div>211    <div class="key-row">212      <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>213    </div>214    <div class="key-row">215      <div class="key small">shift</div>216      <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>217      <div class="key small">⌫</div>218    </div>219    <div class="bottom-row">220      <div class="key small">?123</div>221      <div class="key small">,</div>222      <div class="key small">☺</div>223      <div class="key space" style="background:#2c2520;border-radius:28px;height:110px;"></div>224      <div class="key small">.</div>225      <div class="mic">226        <svg viewBox="0 0 24 24" class="icon">227          <path d="M12 4a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3zm0 12v4m-5-7a5 5 0 0 0 10 0" stroke="#e9d6c9" stroke-width="2" fill="none" stroke-linecap="round"></path>228        </svg>229      </div>230      <div class="search-btn">231        <svg viewBox="0 0 24 24" class="icon">232          <circle cx="11" cy="11" r="8" stroke="#372c25" stroke-width="2" fill="none"></circle>233          <line x1="17" y1="17" x2="22" y2="22" stroke="#372c25" stroke-width="2"></line>234        </svg>235      </div>236    </div>237  </div>238 239  <!-- Bottom navigation bar -->240  <div class="navbar">241    <div class="home-indicator"></div>242  </div>243 244</div>245</body>246</html>