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 with Keyboard</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F6F7F9;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 background: #ffffff;25 color: #353535;26 }27 .status-left {28 position: absolute;29 left: 36px;30 top: 28px;31 font-size: 44px;32 letter-spacing: 1px;33 }34 .status-center {35 position: absolute;36 left: 420px;37 top: 30px;38 display: flex;39 gap: 28px;40 align-items: center;41 }42 .status-right {43 position: absolute;44 right: 28px;45 top: 24px;46 display: flex;47 align-items: center;48 gap: 24px;49 font-size: 36px;50 }51 .icon {52 width: 48px; height: 48px;53 }54 55 /* Search header */56 .search-header {57 position: absolute;58 top: 110px;59 left: 0;60 width: 1080px;61 height: 130px;62 background: #ffffff;63 border-bottom: 1px solid #E5E7EB;64 display: flex;65 align-items: center;66 padding: 0 24px;67 box-sizing: border-box;68 }69 .back-btn {70 width: 72px;71 height: 72px;72 display: flex;73 align-items: center;74 justify-content: center;75 margin-right: 8px;76 }77 .search-field {78 flex: 1;79 height: 80px;80 display: flex;81 align-items: center;82 position: relative;83 }84 .caret {85 width: 2px;86 height: 44px;87 background: #D22E61; /* pink caret */88 margin-right: 14px;89 }90 .search-placeholder {91 color: #9CA3AF;92 font-size: 38px;93 }94 .search-placeholder em {95 color: #6B7280;96 font-style: normal;97 }98 .field-actions {99 display: flex;100 align-items: center;101 gap: 20px;102 margin-left: 10px;103 }104 105 /* Suggestion list */106 .suggestions {107 position: absolute;108 top: 240px;109 left: 0;110 width: 1080px;111 background: #ffffff;112 border-bottom: 1px solid #E5E7EB;113 }114 .suggest-item {115 display: flex;116 align-items: center;117 padding: 22px 28px;118 gap: 24px;119 }120 .thumb {121 width: 96px;122 height: 96px;123 background: #E0E0E0;124 border: 1px solid #BDBDBD;125 color: #757575;126 display: flex;127 justify-content: center;128 align-items: center;129 font-size: 20px;130 }131 .suggest-text {132 font-size: 44px;133 color: #2176FF;134 }135 136 /* Main area blank */137 .content-blank {138 position: absolute;139 top: 340px;140 left: 0;141 width: 1080px;142 height: 980px;143 background: #F3F4F6;144 }145 146 /* Keyboard */147 .keyboard {148 position: absolute;149 bottom: 90px;150 left: 0;151 width: 1080px;152 height: 860px;153 background: #12181C;154 box-shadow: 0 -6px 20px rgba(0,0,0,0.35) inset;155 color: #E5E7EB;156 padding: 24px 22px 26px 22px;157 box-sizing: border-box;158 }159 .kb-tools {160 display: flex;161 justify-content: space-between;162 align-items: center;163 padding: 12px 18px 22px 18px;164 }165 .kb-tools .tool {166 width: 74px; height: 74px;167 display: flex; align-items: center; justify-content: center;168 border-radius: 18px;169 background: #1E262B;170 }171 172 .kb-rows {173 display: grid;174 grid-template-rows: repeat(4, 1fr);175 gap: 20px;176 height: calc(100% - 118px);177 }178 .row {179 display: grid;180 gap: 14px;181 }182 .row.row1 { grid-template-columns: repeat(10, 1fr); }183 .row.row2 { grid-template-columns: 0.5fr repeat(9, 1fr) 0.5fr; } /* add side paddings */184 .row.row3 { grid-template-columns: 0.9fr repeat(7, 1fr) 1.4fr; } /* shift + letters + backspace */185 .row.row4 { grid-template-columns: 1.4fr 0.9fr 0.9fr 4.4fr 0.9fr 1.4fr; }186 187 .key {188 background: #222A2F;189 border-radius: 18px;190 display: flex;191 align-items: center;192 justify-content: center;193 font-size: 40px;194 box-shadow: 0 2px 0 rgba(255,255,255,0.05) inset, 0 2px 6px rgba(0,0,0,0.45);195 }196 .key.small { font-size: 34px; }197 .key.em { background: #8EE7C3; color: #0B1B16; font-weight: bold; }198 .space { justify-content: center; font-size: 30px; color: #9CA3AF; }199 .round-action {200 background: #8EE7C3;201 color: #0B1B16;202 border-radius: 999px;203 }204 205 /* Bottom pill (gesture bar) */206 .nav-pill {207 position: absolute;208 bottom: 24px;209 left: 50%;210 transform: translateX(-50%);211 width: 290px;212 height: 12px;213 background: #FFFFFF;214 border-radius: 12px;215 opacity: 0.9;216 }217</style>218</head>219<body>220<div id="render-target">221 222 <!-- Status Bar -->223 <div class="status-bar">224 <div class="status-left">9:50</div>225 226 <div class="status-center">227 <!-- bulb -->228 <svg class="icon" viewBox="0 0 24 24" fill="#7A7A7A">229 <path d="M9 21h6v-1H9v1Zm3-19a7 7 0 0 0-4 12c.6.6 1 1.3 1 2h6c0-.7.4-1.4 1-2a7 7 0 0 0-4-12Z"/>230 </svg>231 <!-- cloud -->232 <svg class="icon" viewBox="0 0 24 24" fill="#7A7A7A">233 <path d="M6 19h11a4 4 0 0 0 .6-7.97A6 6 0 0 0 6 9a5 5 0 0 0 0 10Z"/>234 </svg>235 </div>236 237 <div class="status-right">238 <!-- WiFi -->239 <svg class="icon" viewBox="0 0 24 24" fill="#555">240 <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm-5.5-6.5a9 9 0 0 1 11 0l-1.6 1.2a7 7 0 0 0-7.8 0L6.5 13.5Zm-3-3a14 14 0 0 1 17 0L19.7 12a12 12 0 0 0-15.4 0L3.5 10.5Z"/>241 </svg>242 <!-- Battery -->243 <svg class="icon" viewBox="0 0 32 24">244 <rect x="1" y="5" width="26" height="14" rx="2" ry="2" fill="#555"/>245 <rect x="27" y="9" width="4" height="6" fill="#555"/>246 <text x="6" y="17" font-size="10" fill="#fff" font-family="Arial">100%</text>247 </svg>248 </div>249 </div>250 251 <!-- Search Header -->252 <div class="search-header">253 <div class="back-btn">254 <svg class="icon" viewBox="0 0 24 24" fill="#333">255 <path d="M14.5 5 6 12l8.5 7 1.5-1.9L9.8 12l6.2-5.1L14.5 5Z"/>256 </svg>257 </div>258 <div class="search-field">259 <div class="caret"></div>260 <div class="search-placeholder">Search for <em>“kitchen product”</em></div>261 </div>262 <div class="field-actions">263 <!-- clear X -->264 <svg class="icon" viewBox="0 0 24 24" fill="#9CA3AF">265 <path d="M6 6l12 12-1.4 1.4L4.6 7.4 6 6Zm12 0L6 18l1.4 1.4L19.4 7.4 18 6Z"/>266 </svg>267 <!-- mic -->268 <svg class="icon" viewBox="0 0 24 24" fill="#6B7280">269 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3Zm-5-3h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.9V20h-4v-2.1A7 7 0 0 1 7 11Z"/>270 </svg>271 </div>272 </div>273 274 <!-- Suggestion -->275 <div class="suggestions">276 <div class="suggest-item">277 <div class="thumb">[IMG: Silk saree]</div>278 <div class="suggest-text">silk saree</div>279 </div>280 </div>281 282 <!-- Blank content area -->283 <div class="content-blank"></div>284 285 <!-- Keyboard -->286 <div class="keyboard">287 <div class="kb-tools">288 <div class="tool">289 <svg viewBox="0 0 24 24" width="34" height="34" fill="#B7C1C7">290 <circle cx="12" cy="12" r="10" fill="none" stroke="#B7C1C7" stroke-width="2"/>291 <circle cx="12" cy="12" r="3" />292 </svg>293 </div>294 <div class="tool"><span style="font-weight:700;color:#B7C1C7;">GIF</span></div>295 <div class="tool">296 <svg viewBox="0 0 24 24" width="30" height="30" fill="#B7C1C7">297 <path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm8 3h-2a6 6 0 0 0-12 0H4a8 8 0 0 1 16 0Z"/>298 </svg>299 </div>300 <div class="tool">301 <svg viewBox="0 0 24 24" width="30" height="30" fill="#B7C1C7">302 <path d="M2 5h20v4H2V5Zm0 5h13v4H2v-4Zm0 5h20v4H2v-4Z"/>303 </svg>304 </div>305 <div class="tool">306 <svg viewBox="0 0 24 24" width="30" height="30" fill="#B7C1C7">307 <path d="M4 4h16v16H4V4Zm3 3v10h10V7H7Z"/>308 </svg>309 </div>310 <div class="tool">311 <svg viewBox="0 0 24 24" width="30" height="30" fill="#B7C1C7">312 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3Z"/>313 <path d="M5 11h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.9V20h-4v-2.1A7 7 0 0 1 5 11Z"/>314 </svg>315 </div>316 </div>317 318 <div class="kb-rows">319 <!-- Row 1 -->320 <div class="row row1">321 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>322 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>323 </div>324 325 <!-- Row 2 -->326 <div class="row row2">327 <div></div>328 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>329 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>330 <div></div>331 </div>332 333 <!-- Row 3 -->334 <div class="row row3">335 <div class="key small">336 <svg viewBox="0 0 24 24" width="38" height="38" fill="#D1D5DB">337 <path d="M12 5 5 12h4v7h6v-7h4L12 5Z"/>338 </svg>339 </div>340 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>341 <div class="key small">342 <svg viewBox="0 0 24 24" width="40" height="40" fill="#D1D5DB">343 <path d="M3 6h18v12H3V6Zm3 3v6h9V9H6Zm12 0h2v6h-2V9Z"/>344 </svg>345 </div>346 </div>347 348 <!-- Row 4 -->349 <div class="row row4">350 <div class="key em">?123</div>351 <div class="key">,</div>352 <div class="key small">353 <span style="font-size:36px;">😊</span>354 </div>355 <div class="key space">space</div>356 <div class="key">.</div>357 <div class="key round-action">358 <svg viewBox="0 0 24 24" width="40" height="40" fill="#0B1B16">359 <path d="M21 21 15.8 15.8M11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/>360 </svg>361 </div>362 </div>363 </div>364 </div>365 366 <div class="nav-pill"></div>367</div>368</body>369</html>