GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Search Suggestions UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #F5F5F5;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0; left: 0;20 width: 100%;21 height: 120px;22 padding: 0 28px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #111;27 font-weight: 600;28 letter-spacing: .5px;29 }30 .status-left { font-size: 42px; }31 .status-right {32 display: flex; align-items: center; gap: 26px;33 }34 .sb-dot {35 width: 18px; height: 18px; background: #222;36 border-radius: 50%;37 opacity: .9;38 }39 .sb-icon {40 width: 30px; height: 30px; border: 3px solid #222; border-radius: 6px;41 }42 43 /* Search bar */44 .search-wrap {45 position: absolute;46 top: 120px;47 left: 24px;48 right: 24px;49 padding: 24px 0;50 }51 .search-bar {52 position: relative;53 width: 100%;54 height: 120px;55 background: #FFFFFF;56 border: 2px solid #E2E2E2;57 border-radius: 60px;58 display: flex;59 align-items: center;60 padding: 0 32px;61 gap: 22px;62 box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;63 }64 .icon-btn {65 width: 68px; height: 68px; border-radius: 34px;66 display: flex; align-items: center; justify-content: center;67 color: #424242;68 }69 .search-input {70 font-size: 52px;71 color: #111;72 flex: 1;73 }74 .search-placeholder {75 color: #9E9E9E;76 }77 .clear-btn {78 width: 72px; height: 72px; border-radius: 36px; 79 display: flex; align-items: center; justify-content: center;80 color: #666;81 background: #F2F2F2;82 }83 /* blue cursor handle */84 .cursor-handle {85 position: absolute;86 top: 88px;87 left: 150px;88 width: 34px; height: 34px;89 background: #2F6BFF;90 border-radius: 50% 50% 50% 0;91 transform: rotate(-45deg);92 box-shadow: 0 2px 0 rgba(0,0,0,0.1);93 }94 95 /* Suggestions list */96 .list {97 position: absolute;98 top: 264px;99 left: 0; right: 0;100 background: transparent;101 }102 .item {103 display: flex;104 align-items: center;105 gap: 28px;106 padding: 30px 32px;107 height: 160px;108 background: #FFF;109 border-top: 1px solid #EEE;110 }111 .item:first-child { border-top: none; }112 .pin {113 width: 88px; height: 88px; border-radius: 44px;114 background: #F0F0F0; border: 2px solid #D7D7D7;115 display: flex; align-items: center; justify-content: center;116 color: #757575;117 }118 .item-body { flex: 1; }119 .title { font-size: 46px; color: #1b1b1b; font-weight: 700; line-height: 1.2; }120 .subtitle { font-size: 36px; color: #7C7C7C; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 850px; }121 .launch {122 width: 56px; height: 56px; border-radius: 28px;123 display: flex; align-items: center; justify-content: center;124 color: #4E4E4E;125 }126 127 /* Keyboard */128 .keyboard {129 position: absolute;130 left: 0; right: 0;131 bottom: 0;132 height: 930px;133 background: #121212;134 border-top-left-radius: 22px;135 border-top-right-radius: 22px;136 box-shadow: 0 -6px 24px rgba(0,0,0,0.35);137 color: #EDEDED;138 }139 .kb-suggestions {140 height: 110px;141 display: flex; align-items: center; justify-content: center;142 gap: 60px;143 color: #E0E0E0;144 font-size: 44px;145 border-bottom: 1px solid #2A2A2A;146 }147 .kb-suggestions span { color: #BDBDBD; }148 .kb-rows {149 padding: 28px 26px 0 26px;150 }151 .row {152 display: flex; justify-content: center; gap: 18px;153 margin-bottom: 26px;154 }155 .key {156 width: 88px; height: 120px;157 background: #2A2A2A;158 border-radius: 22px;159 display: flex; align-items: center; justify-content: center;160 font-size: 52px;161 color: #F5F5F5;162 }163 .key.wide { width: 150px; }164 .key.xwide { width: 580px; }165 .key.dark { background: #1F1F1F; }166 .row-bottom { justify-content: space-between; }167 .voice-btn, .search-btn {168 width: 120px; height: 120px; border-radius: 60px;169 display: flex; align-items: center; justify-content: center;170 background: #2A2A2A; color: #EDEDED;171 }172 .search-btn { background: #CFE0FF; color: #0D47A1; }173 .nav-indicator {174 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);175 width: 360px; height: 10px; background: #E0E0E0; border-radius: 8px;176 opacity: .9;177 }178 179 /* SVG helpers */180 svg { display: block; }181</style>182</head>183<body>184<div id="render-target">185 186 <!-- Status Bar -->187 <div class="status-bar">188 <div class="status-left">11:04</div>189 <div class="status-right">190 <div class="sb-dot"></div>191 <div class="sb-dot"></div>192 <div class="sb-dot"></div>193 <div class="sb-dot"></div>194 <div class="sb-icon"></div>195 <div class="sb-dot" style="width: 16px; height:16px;"></div>196 </div>197 </div>198 199 <!-- Search Bar -->200 <div class="search-wrap">201 <div class="search-bar">202 <div class="icon-btn">203 <!-- Back chevron -->204 <svg width="44" height="44" viewBox="0 0 24 24">205 <path d="M15.5 19L8.5 12l7-7" fill="none" stroke="#333" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>206 </svg>207 </div>208 <div class="search-input">k</div>209 <div class="clear-btn">210 <!-- Close/X -->211 <svg width="38" height="38" viewBox="0 0 24 24">212 <path d="M18 6L6 18M6 6l12 12" stroke="#666" stroke-width="2.4" stroke-linecap="round"/>213 </svg>214 </div>215 </div>216 <div class="cursor-handle"></div>217 </div>218 219 <!-- Suggestions List -->220 <div class="list">221 <div class="item">222 <div class="pin">223 <!-- Pin icon -->224 <svg width="40" height="40" viewBox="0 0 24 24">225 <path d="M12 22s7-7.2 7-12a7 7 0 10-14 0c0 4.8 7 12 7 12z" fill="none" stroke="#8C8C8C" stroke-width="1.8"/>226 <circle cx="12" cy="10" r="3" fill="#BDBDBD"/>227 </svg>228 </div>229 <div class="item-body">230 <div class="title">K'Far Cafe Philadelphia</div>231 <div class="subtitle">South 19th Street, Philadelphia, PA, USA</div>232 </div>233 <div class="launch">234 <svg width="40" height="40" viewBox="0 0 24 24">235 <path d="M7 17L17 7M9 7h8v8" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>236 </svg>237 </div>238 </div>239 240 <div class="item">241 <div class="pin">242 <svg width="40" height="40" viewBox="0 0 24 24">243 <path d="M12 22s7-7.2 7-12a7 7 0 10-14 0c0 4.8 7 12 7 12z" fill="none" stroke="#8C8C8C" stroke-width="1.8"/>244 <circle cx="12" cy="10" r="3" fill="#BDBDBD"/>245 </svg>246 </div>247 <div class="item-body">248 <div class="title">K. R. Mangalam University</div>249 <div class="subtitle">Sohna, Haryana</div>250 </div>251 <div class="launch">252 <svg width="40" height="40" viewBox="0 0 24 24">253 <path d="M7 17L17 7M9 7h8v8" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 </div>256 </div>257 258 <div class="item">259 <div class="pin">260 <svg width="40" height="40" viewBox="0 0 24 24">261 <path d="M12 22s7-7.2 7-12a7 7 0 10-14 0c0 4.8 7 12 7 12z" fill="none" stroke="#8C8C8C" stroke-width="1.8"/>262 <circle cx="12" cy="10" r="3" fill="#BDBDBD"/>263 </svg>264 </div>265 <div class="item-body">266 <div class="title">K Lot</div>267 <div class="subtitle">Lincoln Financial Field Way, Philadelphia, …</div>268 </div>269 <div class="launch">270 <svg width="40" height="40" viewBox="0 0 24 24">271 <path d="M7 17L17 7M9 7h8v8" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>272 </svg>273 </div>274 </div>275 276 <div class="item">277 <div class="pin">278 <svg width="40" height="40" viewBox="0 0 24 24">279 <path d="M12 22s7-7.2 7-12a7 7 0 10-14 0c0 4.8 7 12 7 12z" fill="none" stroke="#8C8C8C" stroke-width="1.8"/>280 <circle cx="12" cy="10" r="3" fill="#BDBDBD"/>281 </svg>282 </div>283 <div class="item-body">284 <div class="title">K-town</div>285 <div class="subtitle">Manhattan, New York, NY, USA</div>286 </div>287 <div class="launch">288 <svg width="40" height="40" viewBox="0 0 24 24">289 <path d="M7 17L17 7M9 7h8v8" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>290 </svg>291 </div>292 </div>293 294 <div class="item">295 <div class="pin">296 <svg width="40" height="40" viewBox="0 0 24 24">297 <path d="M12 22s7-7.2 7-12a7 7 0 10-14 0c0 4.8 7 12 7 12z" fill="none" stroke="#8C8C8C" stroke-width="1.8"/>298 <circle cx="12" cy="10" r="3" fill="#BDBDBD"/>299 </svg>300 </div>301 <div class="item-body">302 <div class="title">K.R. Puram</div>303 <div class="subtitle">Bengaluru, Karnataka</div>304 </div>305 <div class="launch">306 <svg width="40" height="40" viewBox="0 0 24 24">307 <path d="M7 17L17 7M9 7h8v8" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>308 </svg>309 </div>310 </div>311 312 <div class="item">313 <div class="pin">314 <svg width="40" height="40" viewBox="0 0 24 24">315 <path d="M12 22s7-7.2 7-12a7 7 0 10-14 0c0 4.8 7 12 7 12z" fill="none" stroke="#8C8C8C" stroke-width="1.8"/>316 <circle cx="12" cy="10" r="3" fill="#BDBDBD"/>317 </svg>318 </div>319 <div class="item-body">320 <div class="title">K'Far</div>321 <div class="subtitle">Wythe Avenue, Brooklyn, NY, USA</div>322 </div>323 <div class="launch">324 <svg width="40" height="40" viewBox="0 0 24 24">325 <path d="M7 17L17 7M9 7h8v8" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>326 </svg>327 </div>328 </div>329 330 <div class="item">331 <div class="pin">332 <svg width="40" height="40" viewBox="0 0 24 24">333 <path d="M12 22s7-7.2 7-12a7 7 0 10-14 0c0 4.8 7 12 7 12z" fill="none" stroke="#8C8C8C" stroke-width="1.8"/>334 <circle cx="12" cy="10" r="3" fill="#BDBDBD"/>335 </svg>336 </div>337 <div class="item-body">338 <div class="title">K'gari</div>339 <div class="subtitle">QLD, Australia</div>340 </div>341 <div class="launch">342 <svg width="40" height="40" viewBox="0 0 24 24">343 <path d="M7 17L17 7M9 7h8v8" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>344 </svg>345 </div>346 </div>347 </div>348 349 <!-- Keyboard -->350 <div class="keyboard">351 <div class="kb-suggestions">352 <div>k</div>353 <span>|</span>354 <div>kya</div>355 <span>|</span>356 <div>kal</div>357 </div>358 <div class="kb-rows">359 <div class="row">360 <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><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>361 </div>362 <div class="row">363 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>364 </div>365 <div class="row">366 <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>367 <div class="key">368 <!-- backspace -->369 <svg width="40" height="40" viewBox="0 0 24 24">370 <path d="M10 7l-5 5 5 5h9a2 2 0 002-2V9a2 2 0 00-2-2h-9z" fill="none" stroke="#EEE" stroke-width="2"/>371 <path d="M13 9l4 4m0-4l-4 4" stroke="#EEE" stroke-width="2" stroke-linecap="round"/>372 </svg>373 </div>374 </div>375 <div class="row row-bottom">376 <div class="key wide dark">?123</div>377 <div class="key dark">,</div>378 <div class="key dark">😊</div>379 <div class="key xwide dark"></div>380 <div class="key dark">.</div>381 <div class="voice-btn">382 <!-- mic -->383 <svg width="40" height="40" viewBox="0 0 24 24">384 <path d="M12 14a3 3 0 003-3V7a3 3 0 10-6 0v4a3 3 0 003 3z" fill="#EDEDED"/>385 <path d="M5 11a7 7 0 0014 0M12 18v3" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>386 </svg>387 </div>388 <div class="search-btn">389 <!-- magnifier -->390 <svg width="44" height="44" viewBox="0 0 24 24">391 <circle cx="11" cy="11" r="6" fill="none" stroke="#0D47A1" stroke-width="2"/>392 <path d="M16.5 16.5L21 21" stroke="#0D47A1" stroke-width="2" stroke-linecap="round"/>393 </svg>394 </div>395 </div>396 </div>397 <div class="nav-indicator"></div>398 </div>399 400</div>401</body>402</html>