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 - York UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 40px;27 color: #212121;28 font-weight: 500;29 font-size: 38px;30 }31 .status-left { display: flex; align-items: center; gap: 26px; }32 .status-icons { display: flex; align-items: center; gap: 26px; color: #4a4a4a; }33 34 .icon-bell, .icon-dot {35 width: 22px; height: 22px; border-radius: 50%; background: #6d6d6d; opacity: .9;36 }37 .icon-wifi, .icon-battery {38 width: 42px; height: 26px; border: 2px solid #4a4a4a; border-radius: 4px; position: relative;39 }40 .icon-wifi:after {41 content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 8px; background: #4a4a4a; border-radius: 3px;42 }43 .icon-battery:after {44 content: ""; position: absolute; top: 6px; right: -8px; width: 6px; height: 14px; background: #4a4a4a; border-radius: 1px;45 }46 47 /* Search */48 .search-wrap {49 position: absolute;50 top: 120px;51 left: 30px;52 right: 30px;53 }54 .search-bar {55 height: 150px;56 border: 2px solid #E0E0E0;57 border-radius: 80px;58 display: flex;59 align-items: center;60 padding: 0 36px;61 gap: 28px;62 background: #fff;63 }64 .search-input {65 font-size: 58px;66 color: #222;67 flex: 1;68 }69 .search-actions { display: flex; align-items: center; gap: 22px; }70 .chip-x {71 width: 76px; height: 76px; border-radius: 50%; border: 2px solid #DADADA; display: grid; place-items: center;72 }73 .chip-x svg { width: 34px; height: 34px; stroke: #5f6368; }74 75 /* blue selection handle */76 .selection-handle {77 position: absolute;78 top: 222px;79 left: 196px;80 width: 64px;81 height: 64px;82 background: #2F6EF3;83 border-radius: 50%;84 box-shadow: 0 2px 0 rgba(0,0,0,0.1) inset;85 }86 .selection-handle:after {87 content: "";88 position: absolute;89 top: 58px;90 left: 28px;91 width: 8px; height: 22px;92 background: #2F6EF3;93 border-radius: 0 0 6px 6px;94 transform: translateX(-50%);95 }96 97 /* List */98 .list {99 position: absolute;100 top: 300px;101 left: 0;102 width: 100%;103 padding-bottom: 20px;104 }105 .row {106 display: flex;107 align-items: center;108 padding: 32px 36px;109 gap: 28px;110 border-bottom: 1px solid #eee;111 }112 .row .pin {113 width: 80px; height: 80px; border-radius: 40px; background: #F2F2F2; border: 1px solid #DDD; display: grid; place-items: center;114 }115 .row .pin svg { width: 36px; height: 36px; fill: #757575; }116 .row .text { flex: 1; }117 .row .title { font-size: 54px; color: #111; line-height: 1.1; }118 .row .sub { font-size: 36px; color: #6e6e6e; margin-top: 10px; }119 .row .open {120 width: 64px; height: 64px; display: grid; place-items: center; opacity: .65;121 }122 .row .open svg { width: 42px; height: 42px; }123 124 /* Keyboard */125 .keyboard {126 position: absolute;127 left: 0;128 bottom: 0;129 width: 1080px;130 height: 920px;131 background: #161719;132 color: #e9e9e9;133 border-top-left-radius: 22px;134 border-top-right-radius: 22px;135 }136 .kb-suggest {137 height: 110px; border-bottom: 1px solid #2a2a2a;138 display: flex; align-items: center; justify-content: space-between;139 padding: 0 28px; color: #e9e9e9;140 }141 .kb-suggest .left { display: flex; align-items: center; gap: 22px; }142 .pill {143 padding: 16px 26px; background: #26282c; border-radius: 36px; font-size: 42px;144 }145 .kb-rows { padding: 18px 26px; }146 .kb-row { display: flex; gap: 18px; justify-content: center; margin-top: 18px; }147 .key {148 width: 92px; height: 120px; background: #2b2d31; border-radius: 18px;149 display: grid; place-items: center; font-size: 54px; color: #eaeaea;150 }151 .key.small { width: 84px; }152 .key.wide { width: 180px; }153 .key.xwide { width: 520px; }154 .key.icon svg { width: 42px; height: 42px; stroke: #eaeaea; }155 .key.icon.fill svg { fill: #eaeaea; stroke: none; }156 .bottom-row { display: flex; gap: 18px; justify-content: space-between; padding: 0 8px; margin-top: 18px; }157</style>158</head>159<body>160<div id="render-target">161 162 <!-- Status Bar -->163 <div class="status-bar">164 <div class="status-left">165 <div>11:04</div>166 <div class="icon-bell"></div>167 <div class="icon-bell"></div>168 <div class="icon-bell"></div>169 <div class="icon-bell"></div>170 <div class="icon-dot" style="opacity:.6;"></div>171 </div>172 <div class="status-icons">173 <div class="icon-wifi"></div>174 <div class="icon-battery"></div>175 </div>176 </div>177 178 <!-- Search Bar -->179 <div class="search-wrap">180 <div class="search-bar">181 <div style="width:72px;height:72px;display:grid;place-items:center;">182 <svg viewBox="0 0 24 24" width="48" height="48">183 <path d="M15 18L9 12l6-6" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>184 </svg>185 </div>186 <div class="search-input">York</div>187 <div class="search-actions">188 <div class="chip-x">189 <svg viewBox="0 0 24 24">190 <path d="M6 6l12 12M18 6L6 18" fill="none" stroke-width="2"/>191 </svg>192 </div>193 </div>194 </div>195 </div>196 197 <!-- Blue selection handle -->198 <div class="selection-handle"></div>199 200 <!-- Suggestion List -->201 <div class="list">202 <div class="row">203 <div class="pin">204 <svg viewBox="0 0 24 24">205 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>206 </svg>207 </div>208 <div class="text">209 <div class="title">York</div>210 <div class="sub">PA, USA</div>211 </div>212 <div class="open">213 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">214 <path d="M14 5h5v5M9 15l10-10M5 19h10"/>215 </svg>216 </div>217 </div>218 219 <div class="row">220 <div class="pin">221 <svg viewBox="0 0 24 24">222 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>223 </svg>224 </div>225 <div class="text">226 <div class="title">York</div>227 <div class="sub">UK</div>228 </div>229 <div class="open">230 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">231 <path d="M14 5h5v5M9 15l10-10M5 19h10"/>232 </svg>233 </div>234 </div>235 236 <div class="row">237 <div class="pin">238 <svg viewBox="0 0 24 24">239 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>240 </svg>241 </div>242 <div class="text">243 <div class="title">York</div>244 <div class="sub">ME, USA</div>245 </div>246 <div class="open">247 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">248 <path d="M14 5h5v5M9 15l10-10M5 19h10"/>249 </svg>250 </div>251 </div>252 253 <div class="row">254 <div class="pin">255 <svg viewBox="0 0 24 24">256 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>257 </svg>258 </div>259 <div class="text">260 <div class="title">York</div>261 <div class="sub">NE, USA</div>262 </div>263 <div class="open">264 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">265 <path d="M14 5h5v5M9 15l10-10M5 19h10"/>266 </svg>267 </div>268 </div>269 270 <div class="row">271 <div class="pin">272 <svg viewBox="0 0 24 24">273 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>274 </svg>275 </div>276 <div class="text">277 <div class="title">York College</div>278 <div class="sub">Guy R Brewer Boulevard, Jamaica, NY, U...</div>279 </div>280 <div class="open">281 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">282 <path d="M14 5h5v5M9 15l10-10M5 19h10"/>283 </svg>284 </div>285 </div>286 287 <div class="row">288 <div class="pin">289 <svg viewBox="0 0 24 24">290 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>291 </svg>292 </div>293 <div class="text">294 <div class="title">York Haven</div>295 <div class="sub">PA, USA</div>296 </div>297 <div class="open">298 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">299 <path d="M14 5h5v5M9 15l10-10M5 19h10"/>300 </svg>301 </div>302 </div>303 304 <div class="row">305 <div class="pin">306 <svg viewBox="0 0 24 24">307 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>308 </svg>309 </div>310 <div class="text">311 <div class="title">York</div>312 <div class="sub">SC, USA</div>313 </div>314 <div class="open">315 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">316 <path d="M14 5h5v5M9 15l10-10M5 19h10"/>317 </svg>318 </div>319 </div>320 </div>321 322 <!-- Keyboard -->323 <div class="keyboard">324 <div class="kb-suggest">325 <div class="left">326 <div style="width:60px;height:60px;background:#2b2d31;border-radius:14px;display:grid;place-items:center;">327 <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#eaeaea" stroke-width="2"><path d="M4 6h6v6H4zM14 6h6v6h-6zM4 16h6v6H4zM14 16h6v6h-6z"/></svg>328 </div>329 <div class="pill">York</div>330 <div class="pill">Yorkshire</div>331 <div class="pill">Yorker</div>332 </div>333 <div style="width:74px;height:74px;background:#2b2d31;border-radius:50%;display:grid;place-items:center;">334 <svg viewBox="0 0 24 24" width="30" height="30" fill="#eaeaea"><path d="M12 2a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3zm-4 10a4 4 0 0 0 8 0h2a6 6 0 0 1-5 5.91V21h-2v-3.09A6 6 0 0 1 6 12h2z"/></svg>335 </div>336 </div>337 338 <div class="kb-rows">339 <div class="kb-row">340 <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>341 </div>342 <div class="kb-row" style="padding:0 46px;">343 <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>344 </div>345 <div class="kb-row" style="padding:0 110px;">346 <div class="key wide">⇧</div>347 <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>348 <div class="key icon">349 <svg viewBox="0 0 24 24"><path d="M3 12h14M14 7l5 5-5 5" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>350 </div>351 </div>352 <div class="bottom-row">353 <div class="key wide">?123</div>354 <div class="key">,</div>355 <div class="key">😊</div>356 <div class="key xwide"></div>357 <div class="key">.</div>358 <div class="key icon fill">359 <svg viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 4.9-14.32l1.1 1.1A8 8 0 0 1 10 18zm7 3-4.35-4.35" /></svg>360 </div>361 </div>362 </div>363 </div>364 365</div>366</body>367</html>