GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Search UI</title>5<meta name="viewport" content="width=1080, initial-scale=1">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top status bar */17  .status-bar {18    height: 96px;19    padding: 0 34px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #1b1b1b;24    font-weight: 600;25    font-size: 40px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 22px;31  }32  .dot, .tiny-rect {33    width: 18px;34    height: 18px;35    background: #8e8e8e;36    border-radius: 50%;37    opacity: .9;38  }39  .tiny-rect {40    width: 16px;41    height: 26px;42    border-radius: 4px;43  }44 45  /* Search header */46  .search-area {47    padding: 24px 32px 8px 24px;48    display: flex;49    align-items: center;50    gap: 26px;51  }52  .back-btn {53    width: 64px;54    height: 64px;55    display: flex;56    align-items: center;57    justify-content: center;58    border-radius: 16px;59  }60  .search-input {61    flex: 1;62    height: 120px;63    background: #F1F3F6;64    border-radius: 60px;65    display: flex;66    align-items: center;67    padding: 0 34px;68    gap: 20px;69    color: #6b6f78;70    font-size: 42px;71  }72  .search-input svg { fill: #8a8f98; }73 74  /* Sections */75  .section {76    padding: 10px 24px 0 24px;77  }78  .section-title {79    font-size: 44px;80    font-weight: 800;81    color: #1d1e20;82    margin: 18px 0 10px 8px;83  }84  .chips {85    display: flex;86    flex-wrap: wrap;87    gap: 18px 22px;88    padding: 12px 0 8px 8px;89  }90  .chip {91    padding: 20px 30px;92    font-size: 38px;93    background: #F7F8FA;94    border: 2px solid #E3E6EB;95    color: #222;96    border-radius: 44px;97    white-space: nowrap;98  }99 100  .purple-title {101    color: #6E60F7;102  }103 104  /* Keyboard mock */105  .keyboard {106    position: absolute;107    bottom: 0;108    left: 0;109    width: 1080px;110    height: 830px;111    background: #0f1011;112    color: #eaeaea;113    border-top-left-radius: 22px;114    border-top-right-radius: 22px;115    box-shadow: 0 -6px 16px rgba(0,0,0,.25);116  }117  .kbd-toolbar {118    height: 120px;119    display: flex;120    align-items: center;121    padding: 0 28px;122    gap: 38px;123  }124  .kbd-icon {125    width: 84px;126    height: 84px;127    background: #1f2124;128    border-radius: 18px;129    display: flex;130    align-items: center;131    justify-content: center;132    color: #cfcfcf;133    font-weight: 700;134    font-size: 30px;135  }136  .kbd-rows {137    padding: 8px 18px 18px 18px;138  }139  .kbd-row {140    display: flex;141    gap: 18px;142    justify-content: space-between;143    margin: 18px 8px;144  }145  .key {146    flex: 1;147    height: 118px;148    background: #1b1e21;149    border-radius: 22px;150    display: flex;151    align-items: center;152    justify-content: center;153    color: #f3f3f3;154    font-size: 48px;155  }156  .key.small { flex: .8; }157  .key.wide { flex: 2.8; }158  .key.round {159    width: 140px;160    flex: 0 0 140px;161    border-radius: 70px;162    background: #C8F6C9;163    color: #1a1a1a;164    font-weight: 700;165  }166  .spacebar { background: #262a2e; }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="status-bar">174    <div>8:20</div>175    <div class="status-icons">176      <div class="tiny-rect"></div>177      <div class="dot"></div>178      <div class="dot"></div>179      <div class="dot"></div>180      <div class="dot"></div>181      <div class="dot"></div>182    </div>183  </div>184 185  <!-- Search header -->186  <div class="search-area">187    <div class="back-btn">188      <svg width="44" height="44" viewBox="0 0 24 24">189        <path d="M14.7 5.3a1 1 0 0 1 0 1.4L10.4 11l4.3 4.3a1 1 0 0 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 0z" fill="#5b5f67"/>190      </svg>191    </div>192    <div class="search-input">193      <svg width="44" height="44" viewBox="0 0 24 24">194        <path d="M21 20l-4.1-4.1a7 7 0 1 0-1.4 1.4L20 21l1-1zM5 10a5 5 0 1 1 10 0A5 5 0 0 1 5 10z"/>195      </svg>196      <div>What are you looking for?</div>197    </div>198  </div>199 200  <!-- Recent Searches -->201  <div class="section">202    <div class="section-title">Recent Searches</div>203    <div class="chips">204      <div class="chip">stuffed Pikachu</div>205      <div class="chip">Pikachu</div>206      <div class="chip">dragon</div>207      <div class="chip">firefly</div>208      <div class="chip">sportscar</div>209    </div>210  </div>211 212  <!-- Trending Searches -->213  <div class="section">214    <div class="section-title">Trending Searches</div>215    <div class="chips">216      <div class="chip">Bicycle</div>217      <div class="chip">Playground Sets</div>218      <div class="chip">Trampolines</div>219      <div class="chip">Swing &amp; Slides</div>220      <div class="chip">Playhouse</div>221      <div class="chip">Scooters</div>222      <div class="chip">Goal Post</div>223      <div class="chip">Battery Powered Ride Ons</div>224      <div class="chip">Football</div>225    </div>226  </div>227 228  <!-- Trending Brands title near keyboard -->229  <div class="section" style="padding-bottom: 860px;">230    <div class="section-title purple-title">Trending Brands</div>231  </div>232 233  <!-- On-screen keyboard mock -->234  <div class="keyboard">235    <div class="kbd-toolbar">236      <div class="kbd-icon">▦</div>237      <div class="kbd-icon">😊</div>238      <div class="kbd-icon">GIF</div>239      <div class="kbd-icon">⚙</div>240      <div class="kbd-icon">G↔</div>241      <div class="kbd-icon">🎨</div>242      <div class="kbd-icon">🎤</div>243    </div>244 245    <div class="kbd-rows">246      <div class="kbd-row">247        <div class="key">q</div>248        <div class="key">w</div>249        <div class="key">e</div>250        <div class="key">r</div>251        <div class="key">t</div>252        <div class="key">y</div>253        <div class="key">u</div>254        <div class="key">i</div>255        <div class="key">o</div>256        <div class="key">p</div>257      </div>258      <div class="kbd-row">259        <div class="key">a</div>260        <div class="key">s</div>261        <div class="key">d</div>262        <div class="key">f</div>263        <div class="key">g</div>264        <div class="key">h</div>265        <div class="key">j</div>266        <div class="key">k</div>267        <div class="key">l</div>268      </div>269      <div class="kbd-row">270        <div class="key small">⇧</div>271        <div class="key">z</div>272        <div class="key">x</div>273        <div class="key">c</div>274        <div class="key">v</div>275        <div class="key">b</div>276        <div class="key">n</div>277        <div class="key">m</div>278        <div class="key small">⌫</div>279      </div>280      <div class="kbd-row">281        <div class="key small">?123</div>282        <div class="key small">,</div>283        <div class="key small">😊</div>284        <div class="key wide spacebar"></div>285        <div class="key small">.</div>286        <div class="key round">🔍</div>287      </div>288    </div>289  </div>290 291</div>292</body>293</html>