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">6<title>Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    background: #2b2b2b;23    color: #fff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 32px;28    box-sizing: border-box;29    font-weight: 500;30  }31  .status-left { font-size: 40px; letter-spacing: 0.5px; }32  .status-right {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .icon {38    display: inline-flex;39    align-items: center;40    justify-content: center;41  }42 43  /* Search bar */44  .search-wrap {45    padding: 22px 28px;46    box-sizing: border-box;47  }48  .search-bar {49    height: 112px;50    border: 1px solid #e0e0e0;51    border-radius: 12px;52    background: #ffffff;53    display: flex;54    align-items: center;55    padding: 0 18px;56    box-shadow: 0 1px 0 rgba(0,0,0,0.04);57    gap: 16px;58  }59  .icon-btn {60    width: 88px;61    height: 88px;62    border: none;63    background: transparent;64    padding: 0;65    display: inline-flex;66    align-items: center;67    justify-content: center;68    cursor: default;69  }70  .search-input {71    flex: 1;72    height: 100%;73    border: none;74    outline: none;75    font-size: 44px;76    letter-spacing: 0.2px;77    caret-color: #ff9800;78    color: #222;79    background: transparent;80  }81  .search-placeholder { color: #9e9e9e; }82 83  /* Suggestion list */84  .suggestions {85    padding: 18px 32px;86    box-sizing: border-box;87  }88  .suggestion {89    font-size: 42px;90    color: #111;91    padding: 22px 0;92  }93 94  /* Keyboard mock */95  .kb {96    position: absolute;97    left: 0;98    right: 0;99    bottom: 0;100    background: #f1f2f4;101    border-top: 1px solid #e1e1e1;102    padding-bottom: 28px;103  }104  .kb-suggestions {105    display: flex;106    gap: 22px;107    padding: 16px 24px;108    background: #f6f6f6;109    border-bottom: 1px solid #e6e6e6;110  }111  .chip {112    background: #ffffff;113    border: 1px solid #e0e0e0;114    border-radius: 999px;115    padding: 10px 22px;116    font-size: 34px;117    color: #444;118  }119  .kb-rows {120    padding: 18px 18px 0;121    box-sizing: border-box;122  }123  .row {124    display: flex;125    justify-content: center;126    gap: 12px;127    margin-bottom: 14px;128  }129  .key {130    width: 88px;131    height: 120px;132    background: #ffffff;133    border: 1px solid #e0e0e0;134    border-radius: 16px;135    display: flex;136    align-items: center;137    justify-content: center;138    font-size: 44px;139    color: #222;140  }141  .key-wide { width: 150px; }142  .key-xwide { width: 300px; }143  .spacebar { flex: 1; min-width: 420px; }144  .key-ghost { background: #e9edf2; }145  .key-blue {146    background: #1e88ff;147    color: #fff;148    border-color: #1e88ff;149  }150 151  /* Home indicator */152  .home-indicator {153    position: absolute;154    bottom: 12px;155    left: 50%;156    transform: translateX(-50%);157    width: 280px;158    height: 10px;159    background: #bdbdbd;160    border-radius: 10px;161    opacity: 0.8;162  }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">12:59</div>171    <div class="status-right">172      <!-- small bullet -->173      <div class="icon" style="width:18px;height:18px;border-radius:50%;background:#9e9e9e;"></div>174      <!-- Wi-Fi -->175      <div class="icon">176        <svg width="52" height="40" viewBox="0 0 24 24" fill="none">177          <path d="M2 9c4.7-4.7 15.3-4.7 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>178          <path d="M6 13c3.1-3.1 8.9-3.1 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>179          <path d="M10 17c1.4-1.4 3.6-1.4 5 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>180          <circle cx="12.5" cy="20" r="1.4" fill="#fff"/>181        </svg>182      </div>183      <!-- Battery -->184      <div class="icon">185        <svg width="70" height="40" viewBox="0 0 34 16" fill="none">186          <rect x="1" y="3" width="28" height="10" rx="2" stroke="#fff" stroke-width="2"/>187          <rect x="3.5" y="5.5" width="22" height="5" rx="1.2" fill="#ffffff"/>188          <rect x="30" y="6" width="3" height="4" rx="1" fill="#fff"/>189        </svg>190      </div>191    </div>192  </div>193 194  <!-- Search Bar -->195  <div class="search-wrap">196    <div class="search-bar">197      <button class="icon-btn" aria-label="Back">198        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">199          <path d="M15 5L7 12l8 7" stroke="#333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>200        </svg>201      </button>202      <input class="search-input" type="text" value="Apple MacBook Laptop" />203      <button class="icon-btn" aria-label="Clear">204        <svg width="52" height="52" viewBox="0 0 24 24" fill="none">205          <path d="M6 6l12 12M18 6L6 18" stroke="#8e8e8e" stroke-width="2.5" stroke-linecap="round"/>206        </svg>207      </button>208    </div>209  </div>210 211  <!-- Suggestions -->212  <div class="suggestions">213    <div class="suggestion">apple macbook laptop</div>214  </div>215 216  <!-- Keyboard -->217  <div class="kb">218    <div class="kb-suggestions">219      <div class="chip">Laptop</div>220      <div class="chip">Laptops</div>221      <div class="chip">💻</div>222      <div class="chip">Voice</div>223    </div>224    <div class="kb-rows">225      <div class="row">226        <div class="key">q</div>227        <div class="key">w</div>228        <div class="key">e</div>229        <div class="key">r</div>230        <div class="key">t</div>231        <div class="key">y</div>232        <div class="key">u</div>233        <div class="key">i</div>234        <div class="key">o</div>235        <div class="key">p</div>236      </div>237      <div class="row">238        <div class="key">a</div>239        <div class="key">s</div>240        <div class="key">d</div>241        <div class="key">f</div>242        <div class="key">g</div>243        <div class="key">h</div>244        <div class="key">j</div>245        <div class="key">k</div>246        <div class="key">l</div>247      </div>248      <div class="row">249        <div class="key key-wide key-ghost">250          <svg width="44" height="44" viewBox="0 0 24 24" fill="none">251            <path d="M7 15l5-6 5 6" stroke="#333" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>252          </svg>253        </div>254        <div class="key">z</div>255        <div class="key">x</div>256        <div class="key">c</div>257        <div class="key">v</div>258        <div class="key">b</div>259        <div class="key">n</div>260        <div class="key">m</div>261        <div class="key key-wide">262          <svg width="44" height="44" viewBox="0 0 24 24" fill="none">263            <path d="M4 6l8 6-8 6" stroke="#333" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>264          </svg>265        </div>266      </div>267      <div class="row">268        <div class="key key-wide key-ghost">?123</div>269        <div class="key key-wide">,</div>270        <div class="key key-wide">271          <svg width="36" height="36" viewBox="0 0 24 24" fill="none">272            <path d="M12 18v-6m0-6v2" stroke="#333" stroke-width="2.2" stroke-linecap="round"/>273          </svg>274        </div>275        <div class="key spacebar"></div>276        <div class="key key-wide">.</div>277        <div class="key key-blue key-wide" aria-label="Search">278          <svg width="42" height="42" viewBox="0 0 24 24" fill="none">279            <circle cx="11" cy="11" r="5.5" stroke="#fff" stroke-width="2.4"/>280            <path d="M16 16l4 4" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/>281          </svg>282        </div>283      </div>284    </div>285    <div class="home-indicator"></div>286  </div>287 288</div>289</body>290</html>