GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #ffffff;19 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;20 color: #1f1f1f;21 }22 23 /* Status bar */24 .status-bar {25 height: 110px;26 padding: 0 36px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 box-sizing: border-box;31 }32 .status-left {33 font-size: 44px;34 font-weight: 600;35 color: #3a3a3a;36 }37 .status-right {38 display: flex;39 align-items: center;40 gap: 26px;41 }42 .icon-dot {43 width: 28px;44 height: 28px;45 background: #444;46 border-radius: 50%;47 opacity: 0.85;48 }49 .icon-wifi {50 width: 46px;51 height: 30px;52 }53 .icon-battery {54 width: 52px;55 height: 28px;56 }57 58 /* Search bar */59 .search-wrap {60 padding: 6px 34px 0 34px;61 box-sizing: border-box;62 }63 .search-bar {64 height: 130px;65 border: 8px solid #f1b733;66 border-radius: 26px;67 display: flex;68 align-items: center;69 padding: 0 24px;70 box-sizing: border-box;71 box-shadow: 0 4px 0 rgba(0,0,0,0.06) inset;72 }73 .back-icon {74 width: 44px;75 height: 44px;76 margin-right: 18px;77 flex: 0 0 auto;78 }79 .search-placeholder {80 font-size: 42px;81 color: #bdbdbd;82 }83 84 /* Suggestions list */85 .list {86 padding: 30px 24px 0 24px;87 }88 .item {89 display: flex;90 align-items: center;91 gap: 28px;92 padding: 22px 6px;93 }94 .thumb {95 width: 120px;96 height: 120px;97 border-radius: 22px;98 background: #eef3ff;99 display: flex;100 align-items: center;101 justify-content: center;102 }103 .thumb svg { width: 64px; height: 64px; }104 .text-block .title {105 font-size: 44px;106 font-weight: 700;107 color: #2f6de6;108 line-height: 1.15;109 letter-spacing: 0.2px;110 }111 .text-block .subtitle {112 font-size: 32px;113 color: #7b7f87;114 margin-top: 8px;115 }116 .section-title {117 font-size: 56px;118 font-weight: 800;119 margin: 36px 0 10px 22px;120 }121 .recent .title {122 color: #1b1b1b;123 }124 .show-more {125 margin: 36px 0 0 36px;126 color: #2f6de6;127 font-size: 40px;128 font-weight: 600;129 }130 131 /* Keyboard mock */132 .keyboard {133 position: absolute;134 left: 0;135 bottom: 0;136 width: 1080px;137 height: 880px;138 background: #f1eef8;139 border-top-left-radius: 24px;140 border-top-right-radius: 24px;141 box-shadow: 0 -2px 0 rgba(0,0,0,0.04) inset;142 }143 .kb-toolbar {144 height: 110px;145 display: flex;146 align-items: center;147 justify-content: space-around;148 padding: 0 30px;149 box-sizing: border-box;150 }151 .tool-pill {152 width: 86px;153 height: 86px;154 border-radius: 50%;155 background: #e6f5dc;156 display: flex;157 align-items: center;158 justify-content: center;159 }160 .tool-icon {161 width: 48px; height: 48px;162 }163 .kb-rows {164 padding: 10px 20px 24px;165 box-sizing: border-box;166 }167 .row {168 display: flex;169 justify-content: center;170 gap: 14px;171 margin: 18px 0;172 }173 .key {174 min-width: 85px;175 height: 110px;176 background: #ffffff;177 border-radius: 22px;178 display: flex;179 align-items: center;180 justify-content: center;181 font-size: 44px;182 color: #222;183 box-shadow: 0 2px 0 rgba(0,0,0,0.06);184 }185 .key.wide { min-width: 140px; }186 .key.xwide { min-width: 320px; }187 .key.circle {188 width: 100px;189 min-width: 100px;190 height: 100px;191 border-radius: 50%;192 background: #cce7b9;193 }194 .key.soft {195 background: #fadbe1;196 }197 .row-bottom {198 display: flex;199 align-items: center;200 justify-content: space-between;201 gap: 14px;202 padding: 0 16px;203 }204 .mic {205 width: 96px;206 height: 96px;207 border-radius: 50%;208 background: #ffffff;209 display: flex;210 align-items: center;211 justify-content: center;212 box-shadow: 0 2px 0 rgba(0,0,0,0.06);213 }214 .tick {215 width: 120px;216 height: 120px;217 border-radius: 50%;218 background: #bfe1a8;219 display: flex;220 align-items: center;221 justify-content: center;222 }223</style>224</head>225<body>226<div id="render-target">227 228 <!-- Status bar -->229 <div class="status-bar">230 <div class="status-left">1:37</div>231 <div class="status-right">232 <div class="icon-dot"></div>233 <div class="icon-dot"></div>234 <svg class="icon-wifi" viewBox="0 0 24 24">235 <path d="M2 7c5-4 15-4 20 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>236 <path d="M6 11c3-3 9-3 12 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>237 <circle cx="12" cy="17" r="2" fill="#444"/>238 </svg>239 <svg class="icon-battery" viewBox="0 0 28 14">240 <rect x="1" y="2" width="22" height="10" rx="2" fill="none" stroke="#444" stroke-width="2"></rect>241 <rect x="3" y="4" width="16" height="6" rx="1" fill="#444"></rect>242 <rect x="24" y="5" width="3" height="4" rx="1" fill="#444"></rect>243 </svg>244 </div>245 </div>246 247 <!-- Search bar -->248 <div class="search-wrap">249 <div class="search-bar">250 <svg class="back-icon" viewBox="0 0 24 24">251 <path d="M15 18l-6-6 6-6" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 <div class="search-placeholder">Enter destination</div>254 </div>255 </div>256 257 <!-- Suggestions -->258 <div class="list">259 <div class="item">260 <div class="thumb">261 <svg viewBox="0 0 24 24">262 <circle cx="12" cy="12" r="7" fill="none" stroke="#2f6de6" stroke-width="2"/>263 <circle cx="12" cy="12" r="2" fill="#2f6de6"/>264 <path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke="#2f6de6" stroke-width="2" stroke-linecap="round"/>265 </svg>266 </div>267 <div class="text-block">268 <div class="title">Around current location</div>269 </div>270 </div>271 272 <div class="item">273 <div class="thumb">274 <svg viewBox="0 0 24 24">275 <circle cx="12" cy="12" r="7" fill="none" stroke="#2f6de6" stroke-width="2"/>276 <circle cx="12" cy="12" r="2" fill="#2f6de6"/>277 <path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke="#2f6de6" stroke-width="2" stroke-linecap="round"/>278 </svg>279 </div>280 <div class="text-block">281 <div class="title">Places to stay tonight</div>282 <div class="subtitle">14 - 15 Dec, 2 adults</div>283 </div>284 </div>285 286 <div class="section-title">Continue your search</div>287 288 <div class="item recent">289 <div class="thumb">290 <svg viewBox="0 0 24 24">291 <circle cx="12" cy="12" r="9" fill="none" stroke="#2f6de6" stroke-width="2"/>292 <path d="M12 7v6l4 2" stroke="#2f6de6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>293 <path d="M8 4l-2 2" stroke="#2f6de6" stroke-width="2" stroke-linecap="round"/>294 </svg>295 </div>296 <div class="text-block">297 <div class="title" style="color:#1b1b1b;">Berlin</div>298 <div class="subtitle">Dec 15-Dec 16, 1 adult</div>299 </div>300 </div>301 302 <div class="show-more">Show more</div>303 </div>304 305 <!-- Keyboard -->306 <div class="keyboard">307 <div class="kb-toolbar">308 <div class="tool-pill">309 <svg class="tool-icon" viewBox="0 0 24 24">310 <rect x="3" y="3" width="6" height="6" rx="1" fill="#5a7d3a"/>311 <rect x="15" y="3" width="6" height="6" rx="1" fill="#5a7d3a"/>312 <rect x="3" y="15" width="6" height="6" rx="1" fill="#5a7d3a"/>313 <rect x="15" y="15" width="6" height="6" rx="1" fill="#5a7d3a"/>314 </svg>315 </div>316 <svg class="tool-icon" viewBox="0 0 24 24">317 <circle cx="12" cy="12" r="8" fill="none" stroke="#333" stroke-width="2"/>318 <circle cx="9" cy="10" r="1.4" fill="#333"/>319 <circle cx="15" cy="10" r="1.4" fill="#333"/>320 <path d="M8 15c2 2 6 2 8 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>321 </svg>322 <text style="font-size:36px;color:#333;">GIF</text>323 <svg class="tool-icon" viewBox="0 0 24 24">324 <circle cx="12" cy="12" r="9" fill="none" stroke="#333" stroke-width="2"/>325 <circle cx="12" cy="12" r="2" fill="#333"/>326 <path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke="#333" stroke-width="2" stroke-linecap="round"/>327 </svg>328 <svg class="tool-icon" viewBox="0 0 24 24">329 <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#333" stroke-width="2"/>330 <path d="M7 9h10M7 13h6" stroke="#333" stroke-width="2" stroke-linecap="round"/>331 </svg>332 <svg class="tool-icon" viewBox="0 0 24 24">333 <circle cx="7" cy="7" r="4" fill="none" stroke="#333" stroke-width="2"/>334 <rect x="11" y="11" width="10" height="10" rx="2" fill="none" stroke="#333" stroke-width="2"/>335 </svg>336 <div class="mic">337 <svg viewBox="0 0 24 24" width="40" height="40">338 <rect x="9" y="4" width="6" height="10" rx="3" fill="#333"/>339 <path d="M5 12c0 4 3 6 7 6s7-2 7-6M12 18v3" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>340 </svg>341 </div>342 </div>343 344 <div class="kb-rows">345 <div class="row">346 <div class="key">1</div>347 <div class="key">2</div>348 <div class="key">3</div>349 <div class="key">4</div>350 <div class="key">5</div>351 <div class="key">6</div>352 <div class="key">7</div>353 <div class="key">8</div>354 <div class="key">9</div>355 <div class="key">0</div>356 </div>357 <div class="row">358 <div class="key">q</div>359 <div class="key">w</div>360 <div class="key">e</div>361 <div class="key">r</div>362 <div class="key">t</div>363 <div class="key">y</div>364 <div class="key">u</div>365 <div class="key">i</div>366 <div class="key">o</div>367 <div class="key">p</div>368 </div>369 <div class="row">370 <div class="key">a</div>371 <div class="key">s</div>372 <div class="key">d</div>373 <div class="key">f</div>374 <div class="key">g</div>375 <div class="key">h</div>376 <div class="key">j</div>377 <div class="key">k</div>378 <div class="key">l</div>379 </div>380 <div class="row">381 <div class="key soft wide">⇧</div>382 <div class="key">z</div>383 <div class="key">x</div>384 <div class="key">c</div>385 <div class="key">v</div>386 <div class="key">b</div>387 <div class="key">n</div>388 <div class="key">m</div>389 <div class="key soft wide">⌫</div>390 </div>391 <div class="row-bottom">392 <div class="key soft circle">?123</div>393 <div class="key soft" style="min-width:100px">,</div>394 <div class="key xwide"></div>395 <div class="key soft">.</div>396 <div class="tick">397 <svg viewBox="0 0 24 24" width="48" height="48">398 <path d="M5 13l4 4L19 7" stroke="#2b2b2b" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>399 </svg>400 </div>401 </div>402 </div>403 </div>404 405</div>406</body>407</html>