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">6<title>Search Suggestions UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 color: #222;14 }15 #render-target {16 position: relative;17 overflow: hidden;18 width: 1080px;19 height: 2400px;20 background: #ffffff;21 border-radius: 32px;22 box-shadow: 0 4px 24px rgba(0,0,0,0.15);23 }24 25 /* Top gradient header area */26 .header-bg {27 position: absolute;28 top: 0;29 left: 0;30 width: 1080px;31 height: 360px;32 background: linear-gradient(180deg, #b5e6dd 0%, #c7efe6 60%, #e9f7f3 100%);33 }34 35 /* Status bar */36 .status-bar {37 position: absolute;38 top: 0;39 left: 0;40 height: 88px;41 width: 100%;42 display: flex;43 align-items: center;44 padding: 0 36px;45 font-size: 36px;46 color: #2b2b2b;47 }48 .status-left { display: flex; align-items: center; gap: 18px; }49 .status-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }50 51 /* Search header row */52 .search-row {53 position: absolute;54 top: 124px;55 left: 24px;56 right: 24px;57 height: 120px;58 display: flex;59 align-items: center;60 gap: 24px;61 }62 .back-btn {63 width: 72px;64 height: 72px;65 display: flex;66 align-items: center;67 justify-content: center;68 }69 .search-bar {70 flex: 1;71 height: 120px;72 background: #fff;73 border-radius: 28px;74 box-shadow: 0 2px 8px rgba(0,0,0,0.08);75 display: flex;76 align-items: center;77 padding: 0 28px;78 gap: 22px;79 }80 .search-input-text {81 font-size: 44px;82 color: #222;83 letter-spacing: 0.2px;84 flex: 1;85 }86 .icon-btn {87 width: 64px;88 height: 64px;89 display: flex;90 align-items: center;91 justify-content: center;92 }93 94 /* Suggestions list */95 .suggestions {96 position: absolute;97 top: 360px;98 left: 0;99 right: 0;100 bottom: 860px; /* room for keyboard */101 background: #ffffff;102 }103 .suggestion-item {104 display: flex;105 align-items: center;106 padding: 30px 36px;107 border-bottom: 1px solid #eee;108 font-size: 44px;109 color: #333;110 }111 .suggestion-item .left {112 display: flex;113 align-items: center;114 gap: 28px;115 flex: 1;116 }117 .suggestion-item .right {118 width: 64px;119 display: flex;120 justify-content: flex-end;121 opacity: 0.75;122 }123 .suggestion-item strong { font-weight: 700; }124 125 /* Chip suggestions above keyboard */126 .chips {127 position: absolute;128 left: 24px;129 right: 24px;130 bottom: 860px;131 height: 96px;132 display: flex;133 align-items: center;134 gap: 18px;135 }136 .chip {137 padding: 16px 28px;138 border-radius: 24px;139 background: #2f3a3f;140 color: #fff;141 font-size: 36px;142 }143 144 /* Keyboard */145 .keyboard {146 position: absolute;147 left: 0;148 right: 0;149 bottom: 66px;150 height: 794px;151 background: #12171a;152 border-top-left-radius: 24px;153 border-top-right-radius: 24px;154 box-shadow: 0 -6px 16px rgba(0,0,0,0.35);155 }156 .kb-row {157 display: grid;158 grid-template-columns: repeat(10, 1fr);159 gap: 16px;160 padding: 22px 26px;161 }162 .kb-key {163 height: 110px;164 background: #2a3338;165 border-radius: 22px;166 color: #e8edf1;167 font-size: 44px;168 display: flex;169 align-items: center;170 justify-content: center;171 }172 .kb-small {173 font-size: 36px;174 }175 .kb-space {176 grid-column: span 4;177 }178 .kb-left, .kb-right {179 width: 132px;180 height: 110px;181 background: #9ddfc5;182 color: #0a2a1f;183 border-radius: 28px;184 display: flex;185 align-items: center;186 justify-content: center;187 font-size: 40px;188 }189 .kb-action {190 width: 132px;191 height: 110px;192 border-radius: 64px;193 background: #9ff0d3;194 color: #0b2a21;195 display: flex;196 align-items: center;197 justify-content: center;198 }199 200 /* Gesture pill */201 .gesture-pill {202 position: absolute;203 bottom: 16px;204 left: 50%;205 transform: translateX(-50%);206 width: 360px;207 height: 16px;208 background: #e6e6e6;209 border-radius: 10px;210 }211 212 /* Simple icon styling */213 .icon {214 width: 48px;215 height: 48px;216 }217 .icon-lg { width: 56px; height: 56px; }218 .muted { color: #6d6d6d; }219</style>220</head>221<body>222<div id="render-target">223 224 <div class="header-bg"></div>225 226 <!-- Status bar -->227 <div class="status-bar">228 <div class="status-left">12:30</div>229 <div class="status-right">230 <!-- Signal -->231 <svg class="icon muted" viewBox="0 0 24 24">232 <rect x="2" y="14" width="3" height="8" fill="#4a4a4a"></rect>233 <rect x="7" y="10" width="3" height="12" fill="#4a4a4a"></rect>234 <rect x="12" y="6" width="3" height="16" fill="#4a4a4a"></rect>235 <rect x="17" y="2" width="3" height="20" fill="#bdbdbd"></rect>236 </svg>237 <!-- Wi-Fi -->238 <svg class="icon muted" viewBox="0 0 24 24">239 <path d="M2 9c5-5 15-5 20 0" stroke="#4a4a4a" stroke-width="2" fill="none"/>240 <path d="M6 13c3-3 9-3 12 0" stroke="#4a4a4a" stroke-width="2" fill="none"/>241 <circle cx="12" cy="17" r="2" fill="#4a4a4a"></circle>242 </svg>243 <!-- Battery -->244 <svg class="icon muted" viewBox="0 0 24 24">245 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#4a4a4a" stroke-width="2" fill="none"></rect>246 <rect x="4" y="8" width="13" height="8" fill="#4a4a4a"></rect>247 <rect x="20" y="10" width="2" height="6" fill="#4a4a4a"></rect>248 </svg>249 <span style="font-size:34px;color:#2b2b2b;">93%</span>250 </div>251 </div>252 253 <!-- Search header -->254 <div class="search-row">255 <div class="back-btn">256 <svg class="icon-lg" viewBox="0 0 24 24">257 <path d="M15 5 L7 12 L15 19" stroke="#2f2f2f" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>258 </svg>259 </div>260 <div class="search-bar">261 <!-- Search icon -->262 <svg class="icon" viewBox="0 0 24 24">263 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2.2" fill="none"></circle>264 <path d="M16.5 16.5 L21 21" stroke="#777" stroke-width="2.2" stroke-linecap="round"></path>265 </svg>266 <div class="search-input-text">1kg hammer</div>267 <!-- Clear X -->268 <div class="icon-btn">269 <svg class="icon" viewBox="0 0 24 24">270 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#999" stroke-width="2.4" stroke-linecap="round"></path>271 </svg>272 </div>273 </div>274 </div>275 276 <!-- Suggestions list -->277 <div class="suggestions">278 <div class="suggestion-item">279 <div class="left">280 <svg class="icon" viewBox="0 0 24 24">281 <circle cx="11" cy="11" r="7" stroke="#7a7a7a" stroke-width="2" fill="none"></circle>282 <path d="M16.5 16.5 L21 21" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"></path>283 </svg>284 <span>1kg hammer</span>285 </div>286 <div class="right">287 <svg class="icon" viewBox="0 0 24 24">288 <path d="M4 20 L20 4 M10 4 H20 V14" stroke="#9a9a9a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>289 </svg>290 </div>291 </div>292 293 <div class="suggestion-item">294 <div class="left">295 <svg class="icon" viewBox="0 0 24 24">296 <circle cx="11" cy="11" r="7" stroke="#7a7a7a" stroke-width="2" fill="none"></circle>297 <path d="M16.5 16.5 L21 21" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"></path>298 </svg>299 <span>1kg hammer <strong>tata</strong></span>300 </div>301 <div class="right">302 <svg class="icon" viewBox="0 0 24 24">303 <path d="M4 20 L20 4 M10 4 H20 V14" stroke="#9a9a9a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>304 </svg>305 </div>306 </div>307 308 <div class="suggestion-item">309 <div class="left">310 <svg class="icon" viewBox="0 0 24 24">311 <circle cx="11" cy="11" r="7" stroke="#7a7a7a" stroke-width="2" fill="none"></circle>312 <path d="M16.5 16.5 L21 21" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"></path>313 </svg>314 <span><strong>iron</strong> hammer 1kg</span>315 </div>316 <div class="right">317 <svg class="icon" viewBox="0 0 24 24">318 <path d="M4 20 L20 4 M10 4 H20 V14" stroke="#9a9a9a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>319 </svg>320 </div>321 </div>322 323 <div class="suggestion-item">324 <div class="left">325 <svg class="icon" viewBox="0 0 24 24">326 <circle cx="11" cy="11" r="7" stroke="#7a7a7a" stroke-width="2" fill="none"></circle>327 <path d="M16.5 16.5 L21 21" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"></path>328 </svg>329 <span>hammer <strong>taparia original</strong> 1kg</span>330 </div>331 <div class="right">332 <svg class="icon" viewBox="0 0 24 24">333 <path d="M4 20 L20 4 M10 4 H20 V14" stroke="#9a9a9a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>334 </svg>335 </div>336 </div>337 338 <div class="suggestion-item">339 <div class="left">340 <svg class="icon" viewBox="0 0 24 24">341 <circle cx="11" cy="11" r="7" stroke="#7a7a7a" stroke-width="2" fill="none"></circle>342 <path d="M16.5 16.5 L21 21" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"></path>343 </svg>344 <span><strong>taparia</strong> hammer 1kg</span>345 </div>346 <div class="right">347 <svg class="icon" viewBox="0 0 24 24">348 <path d="M4 20 L20 4 M10 4 H20 V14" stroke="#9a9a9a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>349 </svg>350 </div>351 </div>352 353 <div class="suggestion-item">354 <div class="left">355 <svg class="icon" viewBox="0 0 24 24">356 <circle cx="11" cy="11" r="7" stroke="#7a7a7a" stroke-width="2" fill="none"></circle>357 <path d="M16.5 16.5 L21 21" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"></path>358 </svg>359 <span><strong>sledge</strong> hammer 1kg</span>360 </div>361 <div class="right">362 <svg class="icon" viewBox="0 0 24 24">363 <path d="M4 20 L20 4 M10 4 H20 V14" stroke="#9a9a9a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>364 </svg>365 </div>366 </div>367 368 <div class="suggestion-item">369 <div class="left">370 <svg class="icon" viewBox="0 0 24 24">371 <circle cx="11" cy="11" r="7" stroke="#7a7a7a" stroke-width="2" fill="none"></circle>372 <path d="M16.5 16.5 L21 21" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"></path>373 </svg>374 <span><strong>rubber</strong> hammer 1kg</span>375 </div>376 <div class="right">377 <svg class="icon" viewBox="0 0 24 24">378 <path d="M4 20 L20 4 M10 4 H20 V14" stroke="#9a9a9a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>379 </svg>380 </div>381 </div>382 383 <div class="suggestion-item">384 <div class="left">385 <svg class="icon" viewBox="0 0 24 24">386 <circle cx="11" cy="11" r="7" stroke="#7a7a7a" stroke-width="2" fill="none"></circle>387 <path d="M16.5 16.5 L21 21" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"></path>388 </svg>389 <span><strong>club</strong> hammer 1kg</span>390 </div>391 <div class="right">392 <svg class="icon" viewBox="0 0 24 24">393 <path d="M4 20 L20 4 M10 4 H20 V14" stroke="#9a9a9a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>394 </svg>395 </div>396 </div>397 398 <div class="suggestion-item">399 <div class="left">400 <svg class="icon" viewBox="0 0 24 24">401 <circle cx="11" cy="11" r="7" stroke="#7a7a7a" stroke-width="2" fill="none"></circle>402 <path d="M16.5 16.5 L21 21" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"></path>403 </svg>404 <span><strong>ball peen</strong> hammer 1kg</span>405 </div>406 <div class="right">407 <svg class="icon" viewBox="0 0 24 24">408 <path d="M4 20 L20 4 M10 4 H20 V14" stroke="#9a9a9a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>409 </svg>410 </div>411 </div>412 413 <div class="suggestion-item">414 <div class="left">415 <svg class="icon" viewBox="0 0 24 24">416 <circle cx="11" cy="11" r="7" stroke="#7a7a7a" stroke-width="2" fill="none"></circle>417 <path d="M16.5 16.5 L21 21" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"></path>418 </svg>419 <span><strong>sledge</strong> hammer 1kg <strong>taparia</strong></span>420 </div>421 <div class="right">422 <svg class="icon" viewBox="0 0 24 24">423 <path d="M4 20 L20 4 M10 4 H20 V14" stroke="#9a9a9a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>424 </svg>425 </div>426 </div>427 </div>428 429 <!-- Chips above keyboard -->430 <div class="chips">431 <div class="chip">hammer</div>432 <div class="chip">hammers</div>433 <div class="chip">🛠️</div>434 <div class="chip">🔨</div>435 </div>436 437 <!-- Keyboard -->438 <div class="keyboard">439 <!-- Row 1 -->440 <div class="kb-row" style="grid-template-columns: repeat(10, 1fr);">441 <div class="kb-key">q</div>442 <div class="kb-key">w</div>443 <div class="kb-key">e</div>444 <div class="kb-key">r</div>445 <div class="kb-key">t</div>446 <div class="kb-key">y</div>447 <div class="kb-key">u</div>448 <div class="kb-key">i</div>449 <div class="kb-key">o</div>450 <div class="kb-key">p</div>451 </div>452 <!-- Row 2 -->453 <div class="kb-row" style="grid-template-columns: repeat(10, 1fr);">454 <div class="kb-key">a</div>455 <div class="kb-key">s</div>456 <div class="kb-key">d</div>457 <div class="kb-key">f</div>458 <div class="kb-key">g</div>459 <div class="kb-key">h</div>460 <div class="kb-key">j</div>461 <div class="kb-key">k</div>462 <div class="kb-key">l</div>463 <div class="kb-key">464 <svg class="icon" viewBox="0 0 24 24">465 <path d="M4 7 L10 12 L4 17" stroke="#e8edf1" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>466 </svg>467 </div>468 </div>469 <!-- Row 3 -->470 <div class="kb-row" style="grid-template-columns: repeat(9, 1fr);">471 <div class="kb-key kb-small">shift</div>472 <div class="kb-key">z</div>473 <div class="kb-key">x</div>474 <div class="kb-key">c</div>475 <div class="kb-key">v</div>476 <div class="kb-key">b</div>477 <div class="kb-key">n</div>478 <div class="kb-key">m</div>479 <div class="kb-key">480 <!-- backspace -->481 <svg class="icon" viewBox="0 0 24 24">482 <path d="M3 12 L8 6 H20 V18 H8 Z" fill="none" stroke="#e8edf1" stroke-width="2"></path>483 <path d="M11 9 L15 13 M15 9 L11 13" stroke="#e8edf1" stroke-width="2" stroke-linecap="round"></path>484 </svg>485 </div>486 </div>487 <!-- Row 4 -->488 <div class="kb-row" style="grid-template-columns: 160px 120px 1fr 120px