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 - Dark</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 }14 #render-target {15 position: relative;16 overflow: hidden;17 width: 1080px;18 height: 2400px;19 background: #121214;20 color: #EDEDED;21 }22 23 /* Status Bar */24 .status-bar {25 height: 120px;26 padding: 0 32px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #FFFFFF;31 font-weight: 600;32 }33 .status-left {34 display: flex;35 align-items: center;36 gap: 18px;37 font-size: 40px;38 }39 .status-right {40 display: flex;41 align-items: center;42 gap: 22px;43 }44 .status-icon svg {45 width: 40px;46 height: 40px;47 stroke: #FFFFFF;48 }49 50 /* Search header */51 .search-header {52 padding: 12px 32px 0 32px;53 }54 .search-bar {55 background: #1A1B1F;56 border-radius: 16px;57 height: 116px;58 display: flex;59 align-items: center;60 padding: 0 24px;61 gap: 24px;62 border: 1px solid #25262A;63 }64 .search-text {65 flex: 1;66 color: #CFCFCF;67 font-size: 38px;68 letter-spacing: 0.3px;69 }70 .caret {71 display: inline-block;72 width: 2px;73 height: 44px;74 background: #9AA0A6;75 margin-left: 8px;76 vertical-align: middle;77 }78 .icon-btn svg {79 width: 56px;80 height: 56px;81 stroke: #EDEDED;82 }83 84 /* Chips */85 .chips {86 margin-top: 24px;87 display: flex;88 gap: 18px;89 padding: 0 4px;90 }91 .chip {92 display: inline-flex;93 align-items: center;94 gap: 14px;95 height: 72px;96 padding: 0 26px;97 border-radius: 36px;98 background: #1E1F23;99 border: 1px solid #2A2B30;100 color: #E0E0E0;101 font-size: 28px;102 white-space: nowrap;103 }104 .chip svg {105 width: 38px;106 height: 38px;107 stroke: #DADADA;108 }109 110 /* Recent item */111 .recent {112 margin-top: 28px;113 padding: 0 32px;114 }115 .recent-item {116 height: 84px;117 display: flex;118 align-items: center;119 gap: 22px;120 color: #DADADA;121 font-size: 34px;122 }123 .recent-item svg {124 width: 40px;125 height: 40px;126 stroke: #DADADA;127 }128 .clear-x {129 position: absolute;130 right: 36px;131 top: 330px;132 }133 .clear-x svg {134 width: 56px;135 height: 56px;136 stroke: #CFCFCF;137 }138 139 /* Keyboard */140 .keyboard {141 position: absolute;142 left: 0;143 right: 0;144 bottom: 72px;145 padding: 16px 24px 24px 24px;146 background: #18191C;147 border-top: 1px solid #2A2B30;148 }149 .kbd-top-actions {150 display: flex;151 align-items: center;152 gap: 34px;153 padding: 8px 8px 14px 8px;154 color: #BFC3C9;155 font-size: 26px;156 }157 .kbd-top-actions .icon {158 width: 56px;159 height: 56px;160 border-radius: 12px;161 display: flex;162 align-items: center;163 justify-content: center;164 color: #EDEDED;165 }166 .kbd-top-actions svg {167 width: 40px;168 height: 40px;169 stroke: #EDEDED;170 }171 172 .row {173 display: flex;174 gap: 12px;175 margin: 12px 0;176 }177 .key {178 flex: 1;179 height: 118px;180 background: #2A2B2F;181 border-radius: 18px;182 display: flex;183 align-items: center;184 justify-content: center;185 color: #FFFFFF;186 font-size: 44px;187 border: 1px solid #35363B;188 }189 .key.small {190 flex: 0.95;191 }192 .key.wide {193 flex: 1.4;194 }195 .key.extra-wide {196 flex: 3.6;197 font-size: 38px;198 color: #DADADA;199 }200 .key svg {201 width: 46px;202 height: 46px;203 stroke: #FFFFFF;204 }205 .key.secondary {206 background: #222327;207 color: #CFCFCF;208 }209 .search-action {210 background: #C9D1FA;211 color: #0D0E12;212 border-color: #99A5F0;213 }214 215 /* Home indicator */216 .home-indicator {217 position: absolute;218 bottom: 20px;219 left: 50%;220 transform: translateX(-50%);221 width: 420px;222 height: 10px;223 background: #EDEDED;224 border-radius: 12px;225 opacity: 0.75;226 }227</style>228</head>229<body>230<div id="render-target">231 232 <!-- Status Bar -->233 <div class="status-bar">234 <div class="status-left">235 <div>10:44</div>236 <div class="status-icon">237 <!-- mail icon -->238 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">239 <path d="M3 5h18v14H3z"></path>240 <path d="M3 7l9 6 9-6"></path>241 </svg>242 </div>243 <div class="status-icon">244 <!-- cloud icon -->245 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">246 <path d="M6 15a5 5 0 019-3 4 4 0 010 8H7a3 3 0 01-1-5z"></path>247 </svg>248 </div>249 </div>250 <div class="status-right">251 <div class="status-icon">252 <!-- wifi icon -->253 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">254 <path d="M2 8c5-4 15-4 20 0"></path>255 <path d="M5 12c3-3 11-3 14 0"></path>256 <path d="M8 16c2-2 6-2 8 0"></path>257 <circle cx="12" cy="19" r="1.5"></circle>258 </svg>259 </div>260 <div class="status-icon">261 <!-- battery icon -->262 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">263 <rect x="2" y="6" width="18" height="12" rx="2"></rect>264 <rect x="20" y="10" width="2" height="4" rx="1"></rect>265 </svg>266 </div>267 </div>268 </div>269 270 <!-- Search Header -->271 <div class="search-header">272 <div class="search-bar">273 <!-- back arrow -->274 <div class="icon-btn">275 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">276 <path d="M15 19l-7-7 7-7"></path>277 </svg>278 </div>279 <div class="search-text">Search<span class="caret"></span></div>280 <!-- mic icon -->281 <div class="icon-btn">282 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">283 <rect x="9" y="4" width="6" height="10" rx="3"></rect>284 <path d="M5 10a7 7 0 0014 0"></path>285 <path d="M12 17v3"></path>286 </svg>287 </div>288 </div>289 290 <!-- Filter chips -->291 <div class="chips">292 <div class="chip">293 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">294 <path d="M6 8a4 4 0 018 0v8a4 4 0 11-8 0V8z"></path>295 <path d="M18 12v2a3 3 0 106 0v-2"></path>296 </svg>297 Audio298 </div>299 <div class="chip">300 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">301 <rect x="4" y="3" width="16" height="18" rx="2"></rect>302 <path d="M14 3v6h6"></path>303 </svg>304 Documents & other305 </div>306 <div class="chip">307 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">308 <rect x="3" y="5" width="18" height="14" rx="2"></rect>309 <path d="M7 13l3-3 4 5 3-4 3 4"></path>310 <circle cx="8" cy="9" r="1.5"></circle>311 </svg>312 Images313 </div>314 </div>315 316 <!-- Recent item -->317 <div class="recent">318 <div class="recent-item">319 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">320 <circle cx="12" cy="12" r="9"></circle>321 <path d="M12 7v6l4 2"></path>322 </svg>323 doc x.zip324 </div>325 </div>326 327 <!-- Clear X near top-right of content area -->328 <div class="clear-x">329 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">330 <path d="M6 6l12 12M18 6L6 18"></path>331 </svg>332 </div>333 </div>334 335 <!-- Keyboard -->336 <div class="keyboard">337 <!-- Top actions above keys -->338 <div class="kbd-top-actions">339 <div class="icon">340 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">341 <rect x="3" y="3" width="6" height="6"></rect>342 <rect x="15" y="3" width="6" height="6"></rect>343 <rect x="3" y="15" width="6" height="6"></rect>344 <rect x="15" y="15" width="6" height="6"></rect>345 </svg>346 </div>347 <div class="icon">348 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">349 <circle cx="12" cy="12" r="9"></circle>350 <path d="M9 10h.01M15 10h.01"></path>351 <path d="M8 15c2 2 6 2 8 0"></path>352 </svg>353 </div>354 <div class="icon" style="font-weight:700;">GIF</div>355 <div class="icon">356 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">357 <circle cx="12" cy="12" r="8"></circle>358 <path d="M12 6v6l4 2"></path>359 </svg>360 </div>361 <div class="icon" style="font-weight:700;">Gx</div>362 <div class="icon">363 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">364 <path d="M12 3a9 9 0 109 9h-9V3z"></path>365 </svg>366 </div>367 <div class="icon">368 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">369 <rect x="9" y="4" width="6" height="10" rx="3"></rect>370 <path d="M5 10a7 7 0 0014 0"></path>371 <path d="M12 17v3"></path>372 </svg>373 </div>374 </div>375 376 <!-- Key rows -->377 <div class="row">378 <div class="key">q</div>379 <div class="key">w</div>380 <div class="key">e</div>381 <div class="key">r</div>382 <div class="key">t</div>383 <div class="key">y</div>384 <div class="key">u</div>385 <div class="key">i</div>386 <div class="key">o</div>387 <div class="key">p</div>388 </div>389 390 <div class="row">391 <div class="key small">a</div>392 <div class="key small">s</div>393 <div class="key small">d</div>394 <div class="key small">f</div>395 <div class="key small">g</div>396 <div class="key small">h</div>397 <div class="key small">j</div>398 <div class="key small">k</div>399 <div class="key small">l</div>400 </div>401 402 <div class="row">403 <div class="key wide secondary">404 <!-- shift -->405 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">406 <path d="M12 4l8 8H4l8-8z"></path>407 <path d="M12 12v8"></path>408 </svg>409 </div>410 <div class="key">z</div>411 <div class="key">x</div>412 <div class="key">c</div>413 <div class="key">v</div>414 <div class="key">b</div>415 <div class="key">n</div>416 <div class="key">m</div>417 <div class="key wide secondary">418 <!-- backspace -->419 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">420 <path d="M3 12l6-7h11v14H9z"></path>421 <path d="M12 9l6 6M18 9l-6 6"></path>422 </svg>423 </div>424 </div>425 426 <div class="row">427 <div class="key wide secondary">?123</div>428 <div class="key secondary">429 <!-- emoji -->430 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">431 <circle cx="12" cy="12" r="9"></circle>432 <path d="M9 10h.01M15 10h.01"></path>433 <path d="M8 15c2 2 6 2 8 0"></path>434 </svg>435 </div>436 <div class="key extra-wide secondary">space</div>437 <div class="key secondary">,</div>438 <div class="key secondary">.</div>439 <div class="key wide search-action">440 <!-- search icon -->441 <svg viewBox="0 0 24 24" fill="none" stroke="#0D0E12" stroke-width="2">442 <circle cx="11" cy="11" r="6"></circle>443 <path d="M20 20l-4.2-4.2"></path>444 </svg>445 </div>446 </div>447 </div>448 449 <!-- Home indicator -->450 <div class="home-indicator"></div>451 452</div>453</body>454</html>