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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #111315;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 height: 100px;21 background: #222428;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 32px;26 font-size: 34px;27 letter-spacing: 0.5px;28 }29 .status-right { display: flex; align-items: center; gap: 26px; }30 31 /* Header */32 .app-bar {33 height: 180px;34 background: #2E3136;35 display: flex;36 align-items: center;37 padding: 0 26px;38 box-sizing: border-box;39 }40 .app-left, .app-right { display: flex; align-items: center; }41 .app-left { gap: 24px; flex: 1; }42 .title-wrap { display: flex; flex-direction: column; }43 .title {44 font-size: 44px;45 color: #ffffff;46 }47 .subtitle {48 font-size: 28px;49 color: #b8bec6;50 margin-top: 6px;51 }52 .app-right { gap: 36px; }53 54 /* Tabs */55 .tabs {56 background: #ffffff;57 color: #2c2c2c;58 height: 110px;59 display: flex;60 align-items: flex-end;61 padding: 0 36px;62 box-sizing: border-box;63 position: relative;64 border-bottom: 1px solid #e6e6e6;65 }66 .tab {67 font-size: 38px;68 color: #80868b;69 margin-right: 56px;70 padding-bottom: 26px;71 }72 .tab.active {73 color: #1a73e8;74 font-weight: 600;75 }76 .indicator {77 position: absolute;78 bottom: 0;79 left: 36px;80 width: 140px;81 height: 8px;82 background: #1a73e8;83 border-radius: 4px 4px 0 0;84 }85 86 /* Search field */87 .search-area {88 background: #ffffff;89 padding: 24px 26px 6px 26px;90 box-sizing: border-box;91 border-bottom: 1px solid #e9e9e9;92 }93 .search-input {94 height: 120px;95 border: 1px solid #d9d9d9;96 border-radius: 16px;97 display: flex;98 align-items: center;99 padding: 0 26px;100 box-sizing: border-box;101 gap: 20px;102 }103 .search-placeholder {104 font-size: 42px;105 color: #4a4f55;106 flex: 1;107 }108 .cancel-x { color: #8b9097; }109 110 /* Suggestions list */111 .list {112 height: 980px; /* space above keyboard */113 background: #ffffff;114 overflow: hidden;115 padding-bottom: 8px;116 }117 .item {118 display: flex;119 align-items: center;120 padding: 26px 30px;121 height: 120px;122 box-sizing: border-box;123 border-bottom: 1px solid #efefef;124 color: #2b2b2b;125 gap: 26px;126 }127 .item-text {128 font-size: 40px;129 flex: 1;130 }131 .item-text .bold { font-weight: 700; }132 .tail { color: #8a8f96; }133 134 /* Keyboard mock */135 .keyboard {136 position: absolute;137 left: 0; right: 0; bottom: 0;138 height: 900px;139 background: #171a1c;140 border-top: 1px solid #262a2e;141 padding: 26px 22px 120px;142 box-sizing: border-box;143 }144 .key-row {145 display: flex;146 justify-content: center;147 gap: 14px;148 margin-bottom: 22px;149 }150 .key {151 background: #23282b;152 border: 1px solid #30363a;153 color: #e5e9ec;154 border-radius: 14px;155 height: 120px;156 min-width: 96px;157 padding: 0 22px;158 display: flex;159 align-items: center;160 justify-content: center;161 font-size: 42px;162 box-sizing: border-box;163 }164 .key.wide { min-width: 140px; }165 .key.xwide { min-width: 180px; }166 .key.space { flex: 1; }167 .key.circle {168 border-radius: 60px;169 min-width: 120px;170 background: #6be7c3;171 color: #0b1c16;172 font-weight: 700;173 }174 .gesture-bar {175 position: absolute;176 bottom: 26px;177 left: 50%;178 transform: translateX(-50%);179 width: 310px;180 height: 12px;181 background: #e8e8e8;182 border-radius: 6px;183 opacity: 0.9;184 }185 186 /* Simple icon styling */187 svg { display: block; }188 .icon-btn { width: 56px; height: 56px; }189 .icon-lg { width: 48px; height: 48px; }190 .bed { width: 56px; height: 56px; color: #61656a; }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Status bar -->197 <div class="status-bar">198 <div>2:04</div>199 <div class="status-right">200 <!-- simple status icons -->201 <svg width="38" height="38" viewBox="0 0 24 24" fill="#cbd3dc"><circle cx="12" cy="12" r="10"/></svg>202 <svg width="38" height="38" viewBox="0 0 24 24" fill="#cbd3dc"><rect x="2" y="8" width="20" height="8" rx="2"/></svg>203 <svg width="38" height="38" viewBox="0 0 24 24" fill="#cbd3dc"><path d="M7 20h10a2 2 0 0 0 2-2V8l-4-4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"/></svg>204 <div style="display:flex;align-items:center;gap:8px;">205 <svg width="40" height="40" viewBox="0 0 24 24" fill="#cbd3dc"><path d="M16 8h2a2 2 0 0 1 2 2v6h-4V8zM4 10a2 2 0 0 1 2-2h8v8H4v-6z"/><rect x="18" y="10" width="2" height="6" rx="1"/></svg>206 <span>100%</span>207 </div>208 </div>209 </div>210 211 <!-- App header -->212 <div class="app-bar">213 <div class="app-left">214 <!-- close icon -->215 <svg class="icon-btn" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">216 <path d="M4 4l16 16M20 4L4 20"/>217 </svg>218 <!-- lock -->219 <svg class="icon-lg" viewBox="0 0 24 24" fill="#b8bec6">220 <path d="M6 10h12v10H6z"/><path d="M8 10V7a4 4 0 0 1 8 0v3H8z" fill="#b8bec6"/>221 </svg>222 <div class="title-wrap">223 <div class="title">Change search criteria</div>224 <div class="subtitle">google.com</div>225 </div>226 </div>227 <div class="app-right">228 <!-- share -->229 <svg class="icon-lg" viewBox="0 0 24 24" fill="#ffffff">230 <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>231 <path d="M8.6 11L15.4 7M8.6 13L15.4 17" stroke="#ffffff" stroke-width="2" fill="none"/>232 </svg>233 <!-- bookmark -->234 <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">235 <path d="M6 4h12v16l-6-4-6 4z"/>236 </svg>237 <!-- more -->238 <svg class="icon-lg" viewBox="0 0 24 24" fill="#ffffff">239 <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>240 </svg>241 </div>242 </div>243 244 <!-- Tabs -->245 <div class="tabs">246 <div class="tab active">Search</div>247 <div class="tab">Dates</div>248 <div class="tab">Guests</div>249 <div class="indicator"></div>250 </div>251 252 <!-- Search input -->253 <div class="search-area">254 <div class="search-input">255 <!-- back arrow -->256 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#5f6368" stroke-width="2">257 <path d="M14 6l-6 6 6 6"/><path d="M20 12H9" />258 </svg>259 <div class="search-placeholder">Hotels in Berlin</div>260 <svg class="cancel-x" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#8b9097" stroke-width="2">261 <path d="M4 4l16 16M20 4L4 20"/>262 </svg>263 </div>264 </div>265 266 <!-- Suggestions -->267 <div class="list">268 <div class="item">269 <svg class="bed" viewBox="0 0 24 24" fill="currentColor">270 <path d="M2 7h7a3 3 0 0 1 3 3v1h10v6h-2v-2H4v2H2V7zM4 12h8v-2a1 1 0 0 0-1-1H4v3z"/>271 </svg>272 <div class="item-text">hotels in berlin <span class="bold">germany</span></div>273 <svg class="tail" width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#8a8f96" stroke-width="2">274 <path d="M8 5l8 7-8 7"/>275 </svg>276 </div>277 <div class="item">278 <svg class="bed" viewBox="0 0 24 24" fill="currentColor">279 <path d="M2 7h7a3 3 0 0 1 3 3v1h10v6h-2v-2H4v2H2V7zM4 12h8v-2a1 1 0 0 0-1-1H4v3z"/>280 </svg>281 <div class="item-text">hotels in berlin <span class="bold">ohio</span></div>282 <svg class="tail" width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#8a8f96" stroke-width="2">283 <path d="M8 5l8 7-8 7"/>284 </svg>285 </div>286 <div class="item">287 <svg class="bed" viewBox="0 0 24 24" fill="currentColor">288 <path d="M2 7h7a3 3 0 0 1 3 3v1h10v6h-2v-2H4v2H2V7zM4 12h8v-2a1 1 0 0 0-1-1H4v3z"/>289 </svg>290 <div class="item-text">hotels in berlin <span class="bold">city centre</span></div>291 <svg class="tail" width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#8a8f96" stroke-width="2">292 <path d="M8 5l8 7-8 7"/>293 </svg>294 </div>295 <div class="item">296 <svg class="bed" viewBox="0 0 24 24" fill="currentColor">297 <path d="M2 7h7a3 3 0 0 1 3 3v1h10v6h-2v-2H4v2H2V7zM4 12h8v-2a1 1 0 0 0-1-1H4v3z"/>298 </svg>299 <div class="item-text">hotels in berlin <span class="bold">md</span></div>300 <svg class="tail" width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#8a8f96" stroke-width="2">301 <path d="M8 5l8 7-8 7"/>302 </svg>303 </div>304 <div class="item">305 <svg class="bed" viewBox="0 0 24 24" fill="currentColor">306 <path d="M2 7h7a3 3 0 0 1 3 3v1h10v6h-2v-2H4v2H2V7zM4 12h8v-2a1 1 0 0 0-1-1H4v3z"/>307 </svg>308 <div class="item-text">hotels in berlin <span class="bold">mitte</span></div>309 <svg class="tail" width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#8a8f96" stroke-width="2">310 <path d="M8 5l8 7-8 7"/>311 </svg>312 </div>313 <div class="item">314 <svg class="bed" viewBox="0 0 24 24" fill="currentColor">315 <path d="M2 7h7a3 3 0 0 1 3 3v1h10v6h-2v-2H4v2H2V7zM4 12h8v-2a1 1 0 0 0-1-1H4v3z"/>316 </svg>317 <div class="item-text">hotels in berlin <span class="bold">nh</span></div>318 <svg class="tail" width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#8a8f96" stroke-width="2">319 <path d="M8 5l8 7-8 7"/>320 </svg>321 </div>322 <div class="item">323 <svg class="bed" viewBox="0 0 24 24" fill="currentColor">324 <path d="M2 7h7a3 3 0 0 1 3 3v1h10v6h-2v-2H4v2H2V7zM4 12h8v-2a1 1 0 0 0-1-1H4v3z"/>325 </svg>326 <div class="item-text">hotels in berlin <span class="bold">nj</span></div>327 <svg class="tail" width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#8a8f96" stroke-width="2">328 <path d="M8 5l8 7-8 7"/>329 </svg>330 </div>331 <div class="item">332 <svg class="bed" viewBox="0 0 24 24" fill="currentColor">333 <path d="M2 7h7a3 3 0 0 1 3 3v1h10v6h-2v-2H4v2H2V7zM4 12h8v-2a1 1 0 0 0-1-1H4v3z"/>334 </svg>335 <div class="item-text">hotels in berlin <span class="bold">new hampshire</span></div>336 <svg class="tail" width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#8a8f96" stroke-width="2">337 <path d="M8 5l8 7-8 7"/>338 </svg>339 </div>340 </div>341 342 <!-- Keyboard -->343 <div class="keyboard">344 <div class="key-row">345 <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>346 <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>347 </div>348 <div class="key-row">349 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>350 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>351 <div class="key"><svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#e5e9ec" stroke-width="2"><path d="M21 12H8"/><path d="M12 18l-6-6 6-6"/></svg></div>352 </div>353 <div class="key-row">354 <div class="key xwide"><svg width="40" height="40" viewBox="0 0 24 24" fill="#e5e9ec"><path d="M3 20h18v-2H3v2zM8 18h2V6h4v12h2L12 22 8 18z"/></svg></div>355 <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>356 <div class="key">n</div><div class="key">m</div>357 <div class="key xwide"><svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#e5e9ec" stroke-width="2"><path d="M9 9l6 6M15 9l-6 6"/></svg></div>358 </div>359 <div class="key-row">360 <div class="key circle">?123</div>361 <div class="key wide">,</div>362 <div class="key space"></div>363 <div class="key wide">.</div>364 <div class="key circle">365 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#0b1c16" stroke-width="2">366 <path d="M5 12h9"/><path d="M13 5l7 7-7 7"/>367 </svg>368 </div>369 </div>370 <div class="gesture-bar"></div>371 </div>372 373</div>374</body>375</html>