GD-ML/AndroidCode
13.4k
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 Suggestions UI</title>7<style>8 /* Reset and body requirements */9 html, body { margin: 0; padding: 0; }10 body { background: transparent; font-family: Arial, Helvetica, sans-serif; }11 12 /* Root container */13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #ffffff; /* app surface */19 color: #111;20 }21 22 /* Status bar */23 .statusbar {24 height: 90px;25 background: #EDEDED;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 28px;30 font-size: 30px;31 color: #222;32 box-sizing: border-box;33 }34 .status-left { font-weight: 600; }35 .status-right { display: flex; align-items: center; gap: 22px; }36 .icon-small svg { width: 38px; height: 38px; fill: #444; }37 38 /* Search header */39 .searchbar {40 height: 120px;41 display: flex;42 align-items: center;43 padding: 0 24px;44 box-sizing: border-box;45 border-bottom: 1px solid #e8e8e8;46 gap: 24px;47 }48 .searchbar .icon {49 width: 48px;50 height: 48px;51 display: inline-flex;52 align-items: center;53 justify-content: center;54 }55 .query {56 flex: 1;57 font-size: 44px;58 color: #222;59 display: flex;60 align-items: center;61 }62 .query .caret {63 color: #2962FF;64 margin-left: 4px;65 }66 67 /* Suggestions list */68 .suggestions {69 overflow: hidden;70 height: auto;71 padding-bottom: 840px; /* space for keyboard overlay */72 }73 .row {74 display: flex;75 align-items: center;76 padding: 28px 24px;77 gap: 24px;78 border-bottom: 1px solid #eeeeee;79 }80 .row .thumb {81 width: 110px;82 height: 110px;83 background: #E0E0E0;84 border: 1px solid #BDBDBD;85 display: flex;86 align-items: center;87 justify-content: center;88 color: #757575;89 font-size: 22px;90 }91 .row .lefticon {92 width: 72px;93 height: 72px;94 display: flex;95 align-items: center;96 justify-content: center;97 opacity: 0.8;98 }99 .row .content {100 flex: 1;101 min-width: 0;102 }103 .title {104 font-size: 38px;105 color: #222;106 white-space: nowrap;107 overflow: hidden;108 text-overflow: ellipsis;109 }110 .title .bold { font-weight: 700; }111 .subtitle {112 margin-top: 6px;113 font-size: 30px;114 color: #5E35B1;115 }116 .endicon {117 width: 64px;118 height: 64px;119 display: flex;120 align-items: center;121 justify-content: center;122 opacity: 0.6;123 }124 .endicon svg { width: 38px; height: 38px; }125 126 /* Keyboard mock */127 .keyboard {128 position: absolute;129 left: 0;130 bottom: 0;131 width: 1080px;132 height: 820px;133 background: #121212;134 border-top: 1px solid #2b2b2b;135 box-sizing: border-box;136 color: #EDEDED;137 }138 .kb-suggest {139 height: 88px;140 background: #1B1B1B;141 display: flex;142 align-items: center;143 padding: 0 28px;144 font-size: 32px;145 gap: 18px;146 color: #cfcfcf;147 box-sizing: border-box;148 }149 .kb-suggest .divider { opacity: 0.4; }150 .kb-rows {151 padding: 16px 20px 0;152 box-sizing: border-box;153 }154 .kb-row {155 display: flex;156 justify-content: center;157 gap: 18px;158 margin: 10px 0;159 }160 .key {161 min-width: 86px;162 height: 120px;163 background: #262626;164 border-radius: 16px;165 display: flex;166 align-items: center;167 justify-content: center;168 font-size: 40px;169 color: #EEEEEE;170 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.35);171 }172 .key.wide { min-width: 180px; }173 .key.space { flex: 1; min-width: 0; }174 .key.circle {175 width: 110px;176 min-width: 110px;177 border-radius: 56px;178 background: #96A6BD2a;179 color: #DDE7F7;180 }181 .gesture-pill {182 position: absolute;183 width: 240px;184 height: 10px;185 border-radius: 8px;186 background: #eaeaea;187 left: 50%;188 transform: translateX(-50%);189 bottom: 18px;190 opacity: 0.9;191 }192 /* Utility */193 .muted { color: #666; }194 195 /* Simple icon sizes */196 .icon svg { width: 48px; height: 48px; }197 .lefticon svg { width: 44px; height: 44px; stroke: #444; }198</style>199</head>200<body>201<div id="render-target">202 203 <!-- Status bar -->204 <div class="statusbar">205 <div class="status-left">11:26</div>206 <div class="status-right">207 <span class="icon-small" title="Wi‑Fi">208 <svg viewBox="0 0 24 24">209 <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />210 <path d="M2 9c5-5 15-5 20 0" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"/>211 <path d="M5 12c4-4 10-4 14 0" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"/>212 <path d="M8 15c2-2 6-2 8 0" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"/>213 </svg>214 </span>215 <span class="icon-small" title="Battery">216 <svg viewBox="0 0 32 24">217 <rect x="1" y="4" width="26" height="16" rx="3" ry="3" fill="#444"></rect>218 <rect x="4" y="7" width="18" height="10" fill="#9ccc65"></rect>219 <rect x="28" y="9" width="3" height="8" rx="1" fill="#444"></rect>220 </svg>221 </span>222 </div>223 </div>224 225 <!-- Search bar -->226 <div class="searchbar">227 <div class="icon" title="Back">228 <svg viewBox="0 0 24 24">229 <path d="M15 18l-6-6 6-6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>230 </svg>231 </div>232 <div class="query">shirts for men <span class="caret">|</span></div>233 <div class="icon" title="Clear">234 <svg viewBox="0 0 24 24">235 <path d="M6 6l12 12M18 6L6 18" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"/>236 </svg>237 </div>238 </div>239 240 <!-- Suggestions -->241 <div class="suggestions">242 <!-- First row with avatar image -->243 <div class="row">244 <div class="thumb">[IMG]</div>245 <div class="content">246 <div class="title">shirts for men</div>247 <div class="subtitle">in Casual Shirts</div>248 </div>249 </div>250 251 <!-- Search suggestion rows -->252 <div class="row">253 <div class="lefticon" aria-label="search icon">254 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">255 <circle cx="11" cy="11" r="7"></circle>256 <path d="M20 20l-4-4"></path>257 </svg>258 </div>259 <div class="content">260 <div class="title">shirts for men wear</div>261 </div>262 <div class="endicon" aria-label="go">263 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">264 <path d="M7 17l10-10"></path>265 <path d="M7 7h10v10"></path>266 </svg>267 </div>268 </div>269 270 <div class="row">271 <div class="lefticon">272 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">273 <circle cx="11" cy="11" r="7"></circle>274 <path d="M20 20l-4-4"></path>275 </svg>276 </div>277 <div class="content">278 <div class="title">shirts for men <span class="bold">full sleeve</span></div>279 </div>280 <div class="endicon">281 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">282 <path d="M7 17l10-10"></path>283 <path d="M7 7h10v10"></path>284 </svg>285 </div>286 </div>287 288 <div class="row">289 <div class="lefticon">290 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">291 <circle cx="11" cy="11" r="7"></circle>292 <path d="M20 20l-4-4"></path>293 </svg>294 </div>295 <div class="content">296 <div class="title">t shirts for men</div>297 </div>298 <div class="endicon">299 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">300 <path d="M7 17l10-10"></path>301 <path d="M7 7h10v10"></path>302 </svg>303 </div>304 </div>305 306 <div class="row">307 <div class="lefticon">308 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">309 <circle cx="11" cy="11" r="7"></circle>310 <path d="M20 20l-4-4"></path>311 </svg>312 </div>313 <div class="content">314 <div class="title"><span class="bold">formal</span> shirts for men</div>315 </div>316 <div class="endicon">317 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">318 <path d="M7 17l10-10"></path>319 <path d="M7 7h10v10"></path>320 </svg>321 </div>322 </div>323 324 <div class="row">325 <div class="lefticon">326 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">327 <circle cx="11" cy="11" r="7"></circle>328 <path d="M20 20l-4-4"></path>329 </svg>330 </div>331 <div class="content">332 <div class="title"><span class="bold">sweatshirt</span> for men</div>333 </div>334 <div class="endicon">335 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">336 <path d="M7 17l10-10"></path>337 <path d="M7 7h10v10"></path>338 </svg>339 </div>340 </div>341 342 <div class="row">343 <div class="lefticon">344 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">345 <circle cx="11" cy="11" r="7"></circle>346 <path d="M20 20l-4-4"></path>347 </svg>348 </div>349 <div class="content">350 <div class="title">shirts for men <span class="bold">half sleeve</span></div>351 </div>352 <div class="endicon">353 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">354 <path d="M7 17l10-10"></path>355 <path d="M7 7h10v10"></path>356 </svg>357 </div>358 </div>359 360 <div class="row">361 <div class="lefticon">362 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">363 <circle cx="11" cy="11" r="7"></circle>364 <path d="M20 20l-4-4"></path>365 </svg>366 </div>367 <div class="content">368 <div class="title"><span class="bold">woolen</span> shirts for men</div>369 </div>370 <div class="endicon">371 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">372 <path d="M7 17l10-10"></path>373 <path d="M7 7h10v10"></path>374 </svg>375 </div>376 </div>377 378 <div class="row">379 <div class="lefticon">380 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">381 <circle cx="11" cy="11" r="7"></circle>382 <path d="M20 20l-4-4"></path>383 </svg>384 </div>385 <div class="content">386 <div class="title">shirts for men <span class="bold">combo</span></div>387 </div>388 <div class="endicon">389 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">390 <path d="M7 17l10-10"></path>391 <path d="M7 7h10v10"></path>392 </svg>393 </div>394 </div>395 </div>396 397 <!-- Keyboard mock -->398 <div class="keyboard" aria-label="virtual keyboard">399 <div class="kb-suggest">400 <span>men</span>401 <span class="divider">|</span>402 <span>mens</span>403 <span class="divider">|</span>404 <span>men's</span>405 <span style="margin-left:auto; opacity:.5;">🎤</span>406 </div>407 <div class="kb-rows">408 <div class="kb-row">409 <div class="key">q</div>410 <div class="key">w</div>411 <div class="key">e</div>412 <div class="key">r</div>413 <div class="key">t</div>414 <div class="key">y</div>415 <div class="key">u</div>416 <div class="key">i</div>417 <div class="key">o</div>418 <div class="key">p</div>419 </div>420 <div class="kb-row">421 <div class="key">a</div>422 <div class="key">s</div>423 <div class="key">d</div>424 <div class="key">f</div>425 <div class="key">g</div>426 <div class="key">h</div>427 <div class="key">j</div>428 <div class="key">k</div>429 <div class="key">l</div>430 </div>431 <div class="kb-row">432 <div class="key wide">⇧</div>433 <div class="key">z</div>434 <div class="key">x</div>435 <div class="key">c</div>436 <div class="key">v</div>437 <div class="key">b</div>438 <div class="key">n</div>439 <div class="key">m</div>440 <div class="key wide">⌫</div>441 </div>442 <div class="kb-row">443 <div class="key circle">?123</div>444 <div class="key circle">😊</div>445 <div class="key">,</div>446 <div class="key space"></div>447 <div class="key">.</div>448 <div class="key circle">✔</div>449 </div>450 </div>451 <div class="gesture-pill"></div>452 </div>453 454</div>455</body>456</html>