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 UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Roboto", "Segoe UI", Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #FFFFFF;20 border-radius: 24px;21 box-shadow: 0 8px 24px rgba(0,0,0,0.08);22 color: #222;23 }24 25 /* Status bar */26 .status-bar {27 height: 96px;28 padding: 0 32px;29 display: flex;30 align-items: center;31 font-weight: 600;32 color: #222;33 }34 .status-time {35 font-size: 32px;36 letter-spacing: 0.5px;37 }38 .status-right {39 margin-left: auto;40 display: flex;41 align-items: center;42 gap: 20px;43 }44 .status-dot {45 width: 14px;46 height: 14px;47 background: #9E9E9E;48 border-radius: 50%;49 }50 .status-icon {51 width: 40px;52 height: 24px;53 }54 55 /* Search header */56 .search-header {57 padding: 12px 24px 0 24px;58 display: flex;59 align-items: center;60 gap: 16px;61 }62 .back-btn {63 width: 72px;64 height: 72px;65 border: none;66 background: none;67 display: flex;68 align-items: center;69 justify-content: center;70 cursor: default;71 }72 .back-btn svg {73 width: 44px;74 height: 44px;75 fill: none;76 stroke: #3949AB;77 stroke-width: 6;78 stroke-linecap: round;79 stroke-linejoin: round;80 }81 .search-field {82 flex: 1;83 height: 88px;84 background: #F4F5F7;85 border-radius: 16px;86 display: flex;87 align-items: center;88 padding: 0 24px;89 position: relative;90 border-bottom: 4px solid #F48FB1;91 }92 .query {93 font-size: 34px;94 color: #616161;95 flex: 1;96 white-space: nowrap;97 overflow: hidden;98 text-overflow: ellipsis;99 }100 .close-btn {101 width: 56px;102 height: 56px;103 border-radius: 28px;104 border: none;105 background: #E0E0E0;106 display: flex;107 align-items: center;108 justify-content: center;109 cursor: default;110 }111 .close-btn svg {112 width: 28px;113 height: 28px;114 stroke: #616161;115 stroke-width: 6;116 fill: none;117 stroke-linecap: round;118 }119 120 /* Chips */121 .chips-row {122 padding: 24px 24px 8px 24px;123 display: flex;124 gap: 20px;125 }126 .chip {127 height: 96px;128 padding: 0 26px 0 10px;129 border-radius: 48px;130 border: 2px solid #E0E0E0;131 background: #FFFFFF;132 display: flex;133 align-items: center;134 gap: 18px;135 color: #333;136 font-size: 32px;137 font-weight: 600;138 }139 .chip.active {140 border-color: #FF9EB4;141 background: #FFF0F4;142 color: #D81B60;143 }144 .chip-avatar {145 width: 64px;146 height: 64px;147 border-radius: 50%;148 background: #E0E0E0;149 border: 1px solid #BDBDBD;150 display: flex;151 align-items: center;152 justify-content: center;153 color: #757575;154 font-size: 18px;155 line-height: 1.1;156 text-align: center;157 padding: 6px;158 }159 160 /* Suggestions */161 .suggestions {162 padding: 8px 24px 0 24px;163 }164 .suggestion {165 display: flex;166 align-items: center;167 gap: 20px;168 padding: 26px 6px;169 border-radius: 16px;170 }171 .suggestion svg {172 width: 36px;173 height: 36px;174 stroke: #757575;175 stroke-width: 5;176 fill: none;177 }178 .suggestion .bold {179 font-weight: 700;180 color: #222;181 font-size: 36px;182 }183 .suggestion span {184 font-size: 34px;185 color: #424242;186 }187 .suggestion .muted {188 color: #9E9E9E;189 font-weight: 500;190 }191 192 /* Keyboard */193 .keyboard {194 position: absolute;195 left: 0;196 bottom: 72px;197 width: 100%;198 height: 900px;199 background: #1F1F1F;200 border-top-left-radius: 24px;201 border-top-right-radius: 24px;202 box-shadow: 0 -6px 16px rgba(0,0,0,0.2);203 padding: 18px 22px;204 display: flex;205 flex-direction: column;206 gap: 16px;207 }208 .kb-suggest {209 height: 80px;210 background: #2A2A2A;211 border-radius: 18px;212 display: flex;213 align-items: center;214 padding: 0 20px;215 color: #E0E0E0;216 font-size: 30px;217 gap: 22px;218 }219 .kb-suggest .divider {220 width: 2px;221 height: 28px;222 background: #616161;223 margin: 0 8px;224 }225 .kb-suggest .mic {226 margin-left: auto;227 width: 32px;228 height: 32px;229 stroke: #B0BEC5;230 stroke-width: 4;231 fill: none;232 }233 .kb-row {234 display: grid;235 grid-template-columns: repeat(11, 1fr);236 gap: 12px;237 }238 .kb-row.row2 {239 grid-template-columns: repeat(10, 1fr);240 padding: 0 40px;241 }242 .kb-row.row3 {243 grid-template-columns: 1.2fr repeat(8, 1fr) 1.2fr;244 }245 .key {246 background: #2C2C2C;247 color: #FAFAFA;248 border-radius: 14px;249 height: 112px;250 display: flex;251 align-items: center;252 justify-content: center;253 font-size: 38px;254 font-weight: 500;255 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);256 }257 .key.small {258 height: 100px;259 font-size: 34px;260 }261 .key-func {262 background: #2A2A2A;263 color: #D6D6D6;264 font-weight: 600;265 }266 .space-key {267 flex: 1;268 height: 112px;269 background: #2C2C2C;270 border-radius: 14px;271 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);272 }273 .bottom-row {274 display: grid;275 grid-template-columns: 1.6fr 1.2fr 5.2fr 1.2fr 1.8fr;276 gap: 12px;277 padding: 0 16px;278 }279 .search-btn {280 background: #C7DAF6;281 color: #263238;282 }283 .search-btn svg {284 width: 38px;285 height: 38px;286 stroke: #263238;287 stroke-width: 5;288 fill: none;289 }290 .backspace svg {291 width: 36px;292 height: 36px;293 fill: none;294 stroke: #FAFAFA;295 stroke-width: 5;296 }297 .shift svg {298 width: 34px;299 height: 34px;300 fill: none;301 stroke: #FAFAFA;302 stroke-width: 5;303 }304 305 /* Gesture bar */306 .gesture-bar {307 position: absolute;308 bottom: 18px;309 left: 50%;310 transform: translateX(-50%);311 width: 280px;312 height: 10px;313 background: #E0E0E0;314 border-radius: 10px;315 }316</style>317</head>318<body>319<div id="render-target">320 <!-- Status Bar -->321 <div class="status-bar">322 <div class="status-time">10:27</div>323 <div class="status-right">324 <div class="status-dot"></div>325 <svg class="status-icon" viewBox="0 0 24 24">326 <path d="M3 18h18" stroke="#616161" stroke-width="2" />327 <path d="M5 14h14" stroke="#616161" stroke-width="2" />328 <path d="M8 10h8" stroke="#616161" stroke-width="2" />329 </svg>330 <svg class="status-icon" viewBox="0 0 24 24">331 <path d="M2 18h20M4 14h16M6 10h12" stroke="#616161" stroke-width="2" />332 </svg>333 <svg class="status-icon" viewBox="0 0 24 24">334 <rect x="2" y="6" width="16" height="12" rx="2" stroke="#616161" stroke-width="2" fill="none"/>335 <path d="M20 10v4" stroke="#616161" stroke-width="2"/>336 </svg>337 </div>338 </div>339 340 <!-- Search Header -->341 <div class="search-header">342 <button class="back-btn" aria-label="Back">343 <svg viewBox="0 0 24 24">344 <path d="M15 5L7 12l8 7" />345 </svg>346 </button>347 <div class="search-field">348 <span class="query">black formal pants for women</span>349 <button class="close-btn" aria-label="Clear">350 <svg viewBox="0 0 24 24">351 <path d="M6 6l12 12M18 6L6 18"/>352 </svg>353 </button>354 </div>355 </div>356 357 <!-- Category Chips -->358 <div class="chips-row">359 <div class="chip active">360 <div class="chip-avatar">[IMG: Category]</div>361 <span>All</span>362 </div>363 <div class="chip">364 <div class="chip-avatar">[IMG: Women]</div>365 <span>Women</span>366 </div>367 <div class="chip">368 <div class="chip-avatar">[IMG: Men]</div>369 <span>Men</span>370 </div>371 <div class="chip">372 <div class="chip-avatar">[IMG: Kids]</div>373 <span>Kids</span>374 </div>375 </div>376 377 <!-- Suggestions -->378 <div class="suggestions">379 <div class="suggestion">380 <svg viewBox="0 0 24 24">381 <circle cx="10" cy="10" r="7"/>382 <path d="M15 15l6 6"/>383 </svg>384 <span class="bold">Black formal pants for women</span>385 </div>386 <div class="suggestion">387 <svg viewBox="0 0 24 24">388 <circle cx="10" cy="10" r="7"/>389 <path d="M15 15l6 6"/>390 </svg>391 <span>Black formal for women pant</span>392 </div>393 <div class="suggestion">394 <svg viewBox="0 0 24 24">395 <circle cx="10" cy="10" r="7"/>396 <path d="M15 15l6 6"/>397 </svg>398 <span><span class="muted">TINTED </span><span class="bold">Black Formal Pants for Women</span></span>399 </div>400 </div>401 402 <!-- Keyboard -->403 <div class="keyboard">404 <div class="kb-suggest">405 <span>women</span>406 <span class="divider"></span>407 <span>womens</span>408 <span class="divider"></span>409 <span>women's</span>410 <svg class="mic" viewBox="0 0 24 24">411 <rect x="8" y="4" width="8" height="10" rx="4"/>412 <path d="M12 14v4M8 12c0 2.2 1.8 4 4 4s4-1.8 4-4" />413 </svg>414 </div>415 416 <div class="kb-row row1">417 <div class="key">q</div>418 <div class="key">w</div>419 <div class="key">e</div>420 <div class="key">r</div>421 <div class="key">t</div>422 <div class="key">y</div>423 <div class="key">u</div>424 <div class="key">i</div>425 <div class="key">o</div>426 <div class="key">p</div>427 <div class="key backspace" aria-label="Backspace">428 <svg viewBox="0 0 24 24">429 <path d="M4 12l6-6h10v12H10z"/>430 <path d="M12 9l6 6M18 9l-6 6"/>431 </svg>432 </div>433 </div>434 435 <div class="kb-row row2">436 <div class="key">a</div>437 <div class="key">s</div>438 <div class="key">d</div>439 <div class="key">f</div>440 <div class="key">g</div>441 <div class="key">h</div>442 <div class="key">j</div>443 <div class="key">k</div>444 <div class="key">l</div>445 <div class="key key-func">↵</div>446 </div>447 448 <div class="kb-row row3">449 <div class="key shift" aria-label="Shift">450 <svg viewBox="0 0 24 24">451 <path d="M12 4l8 8h-5v8H9v-8H4z"/>452 </svg>453 </div>454 <div class="key">z</div>455 <div class="key">x</div>456 <div class="key">c</div>457 <div class="key">v</div>458 <div class="key">b</div>459 <div class="key">n</div>460 <div class="key">m</div>461 <div class="key key-func">⌫</div>462 </div>463 464 <div class="bottom-row">465 <div class="key key-func">?123</div>466 <div class="key key-func">☺</div>467 <div class="space-key"></div>468 <div class="key key-func">.</div>469 <div class="key search-btn" aria-label="Search">470 <svg viewBox="0 0 24 24">471 <circle cx="10" cy="10" r="7"/>472 <path d="M15 15l6 6"/>473 </svg>474 </div>475 </div>476 </div>477 478 <!-- Gesture bar -->479 <div class="gesture-bar"></div>480</div>481</body>482</html>