GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - Search Addresses</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0B0B0B;13 color: #EDEDED;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 background: #0B0B0B;24 display: flex;25 align-items: center;26 padding: 0 30px;27 box-sizing: border-box;28 font-size: 38px;29 color: #BFBFBF;30 }31 .status-right {32 margin-left: auto;33 display: flex;34 gap: 24px;35 align-items: center;36 }37 .dot { width: 10px; height: 10px; background: #BFBFBF; border-radius: 50%; display: inline-block; }38 39 /* Search bar area */40 .search-area {41 position: absolute;42 top: 90px;43 left: 0;44 width: 1080px;45 height: 120px;46 display: flex;47 align-items: center;48 padding: 0 24px;49 box-sizing: border-box;50 gap: 20px;51 }52 .back-btn {53 width: 72px;54 height: 72px;55 display: flex;56 justify-content: center;57 align-items: center;58 border-radius: 36px;59 }60 .search-field {61 flex: 1;62 height: 96px;63 background: #1E1E1E;64 border-radius: 24px;65 display: flex;66 align-items: center;67 padding: 0 24px;68 box-sizing: border-box;69 font-size: 42px;70 color: #DADADA;71 letter-spacing: 0.2px;72 }73 .search-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }74 .clear-btn {75 width: 72px;76 height: 72px;77 border-radius: 36px;78 display: flex;79 align-items: center;80 justify-content: center;81 }82 83 /* Tabs */84 .tabs {85 position: absolute;86 top: 210px;87 left: 0;88 width: 1080px;89 height: 120px;90 display: flex;91 align-items: flex-end;92 padding: 0 36px;93 box-sizing: border-box;94 gap: 40px;95 }96 .tab {97 font-size: 42px;98 color: #B9B9B9;99 padding-bottom: 26px;100 position: relative;101 }102 .tab.active {103 color: #79E6E8;104 }105 .tab.active::after {106 content: "";107 position: absolute;108 left: 0;109 bottom: 0;110 width: 100%;111 height: 6px;112 background: #79E6E8;113 border-radius: 3px;114 }115 116 /* Nearby row */117 .nearby {118 position: absolute;119 top: 330px;120 left: 0;121 width: 1080px;122 height: 110px;123 display: flex;124 align-items: center;125 padding: 0 36px;126 box-sizing: border-box;127 gap: 22px;128 border-top: 1px solid #1A1A1A;129 border-bottom: 1px solid #1A1A1A;130 }131 .nearby span { font-size: 46px; color: #9FEDEF; }132 133 /* Section title */134 .section-title {135 position: absolute;136 top: 440px;137 left: 0;138 width: 1080px;139 height: 90px;140 display: flex;141 align-items: center;142 padding: 0 36px;143 box-sizing: border-box;144 font-size: 44px;145 color: #A7A7A7;146 }147 148 /* List */149 .list {150 position: absolute;151 top: 530px;152 left: 0;153 width: 1080px;154 }155 .list-item {156 height: 140px;157 display: flex;158 align-items: center;159 padding: 0 36px;160 box-sizing: border-box;161 border-bottom: 1px solid #1A1A1A;162 gap: 28px;163 }164 .address-text {165 font-size: 44px;166 color: #EDEDED;167 flex: 1;168 white-space: nowrap;169 overflow: hidden;170 text-overflow: ellipsis;171 }172 .chip {173 font-size: 40px;174 color: #A3A3A3;175 }176 177 /* Keyboard suggestion bar */178 .kb-suggest {179 position: absolute;180 bottom: 840px;181 left: 0;182 width: 1080px;183 height: 100px;184 background: #161616;185 display: flex;186 align-items: center;187 padding: 0 30px;188 box-sizing: border-box;189 gap: 24px;190 border-top: 1px solid #1A1A1A;191 }192 .suggest-pill {193 background: #222;194 color: #D9D9D9;195 border-radius: 30px;196 padding: 10px 24px;197 font-size: 40px;198 }199 200 /* Keyboard area */201 .keyboard {202 position: absolute;203 bottom: 0;204 left: 0;205 width: 1080px;206 height: 840px;207 background: #171717;208 box-sizing: border-box;209 padding: 24px 24px 30px;210 }211 .keys-row {212 display: grid;213 grid-gap: 16px;214 margin-bottom: 26px;215 }216 .row1 { grid-template-columns: repeat(10, 1fr); }217 .row2 { grid-template-columns: repeat(9, 1fr); }218 .row3 { grid-template-columns: repeat(8, 1fr); }219 .row4 { grid-template-columns: 1.2fr 1fr 1fr 5fr 1fr 1.4fr; }220 221 .key {222 background: #222;223 color: #EDEDED;224 border-radius: 18px;225 height: 120px;226 display: flex;227 justify-content: center;228 align-items: center;229 font-size: 50px;230 box-shadow: inset 0 0 0 1px #2A2A2A;231 }232 .key.long { grid-column: span 2; }233 .space { height: 120px; }234 .caret {235 position: absolute;236 bottom: 820px;237 left: 520px;238 width: 40px;239 height: 24px;240 border-left: 12px solid transparent;241 border-right: 12px solid transparent;242 border-top: 12px solid #A7A7A7;243 }244 245 /* Simple icons */246 .icon { width: 48px; height: 48px; }247 .pin { width: 56px; height: 56px; }248</style>249</head>250<body>251<div id="render-target">252 253 <!-- Status bar -->254 <div class="status-bar">255 <div>7:03</div>256 <div class="status-right">257 <span class="dot"></span>258 <span class="dot"></span>259 <span class="dot"></span>260 <span class="dot"></span>261 <span class="dot"></span>262 <!-- Wi-Fi icon -->263 <svg class="icon" viewBox="0 0 24 24" fill="#DADADA">264 <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5z" opacity="0.0"/>265 <path d="M2 8a16 16 0 0 1 20 0l-1.8 2A13 13 0 0 0 3.8 10L2 8zm4 5a10 10 0 0 1 12 0l-2 2a7 7 0 0 0-8 0l-2-2zm4 5a4 4 0 0 1 4 0l-2 2-2-2z"/>266 </svg>267 <!-- Battery icon -->268 <svg class="icon" viewBox="0 0 24 24" fill="#DADADA">269 <rect x="2" y="7" width="18" height="10" rx="2"></rect>270 <rect x="20" y="10" width="2.5" height="4" rx="1" fill="#DADADA"></rect>271 </svg>272 </div>273 </div>274 275 <!-- Search area -->276 <div class="search-area">277 <div class="back-btn">278 <svg class="icon" viewBox="0 0 24 24" fill="#DADADA">279 <path d="M15 18l-6-6 6-6" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>280 </svg>281 </div>282 <div class="search-field">283 <div class="search-text">Hudson, Columbia, New York</div>284 <div class="clear-btn">285 <svg class="icon" viewBox="0 0 24 24">286 <path d="M6 6l12 12M18 6L6 18" stroke="#DADADA" stroke-width="2" stroke-linecap="round"></path>287 </svg>288 </div>289 </div>290 </div>291 292 <!-- Tabs -->293 <div class="tabs">294 <div class="tab">FOR SALE</div>295 <div class="tab active">FOR RENT</div>296 <div class="tab">RECENTLY SOLD</div>297 </div>298 299 <!-- Nearby -->300 <div class="nearby">301 <svg class="icon" viewBox="0 0 24 24">302 <path d="M12 2l6 10-6 3-6-3 6-10z" fill="#79E6E8"></path>303 </svg>304 <span>Nearby</span>305 </div>306 307 <!-- Section title -->308 <div class="section-title">Places</div>309 310 <!-- List of addresses -->311 <div class="list">312 <div class="list-item">313 <svg class="pin" viewBox="0 0 24 24">314 <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" fill="#A7A7A7"></path>315 </svg>316 <div class="address-text">951 Columbia St #4 Hudson, NY 12534</div>317 <div class="chip">Address</div>318 </div>319 320 <div class="list-item">321 <svg class="pin" viewBox="0 0 24 24">322 <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" fill="#A7A7A7"></path>323 </svg>324 <div class="address-text">536 Columbia St #2F Hudson, NY 12534</div>325 <div class="chip">Address</div>326 </div>327 328 <div class="list-item">329 <svg class="pin" viewBox="0 0 24 24">330 <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" fill="#A7A7A7"></path>331 </svg>332 <div class="address-text">921 Columbia St #C Hudson, NY 12534</div>333 <div class="chip">Address</div>334 </div>335 336 <div class="list-item">337 <svg class="pin" viewBox="0 0 24 24">338 <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" fill="#A7A7A7"></path>339 </svg>340 <div class="address-text">51 Columbia Tpke #A Hudson, NY 12534</div>341 <div class="chip">Address</div>342 </div>343 344 <div class="list-item">345 <svg class="pin" viewBox="0 0 24 24">346 <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" fill="#A7A7A7"></path>347 </svg>348 <div class="address-text">51 Columbia Tpke #B Hudson, NY 12534</div>349 <div class="chip">Address</div>350 </div>351 352 <div class="list-item">353 <svg class="pin" viewBox="0 0 24 24">354 <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" fill="#A7A7A7"></path>355 </svg>356 <div class="address-text">Columbiaville, Hudson, NY</div>357 <div class="chip">Neighborhood</div>358 </div>359 </div>360 361 <!-- Keyboard suggestion bar -->362 <div class="kb-suggest">363 <div class="suggest-pill">York</div>364 <div class="suggest-pill">Yorker</div>365 <div class="suggest-pill">York's</div>366 <div style="margin-left:auto; display:flex; align-items:center;">367 <svg class="icon" viewBox="0 0 24 24">368 <path d="M12 4a4 4 0 0 0-4 4v8a4 4 0 0 0 8 0V8a4 4 0 0 0-4-4z" stroke="#DADADA" stroke-width="1.5" fill="none"></path>369 </svg>370 </div>371 </div>372 373 <!-- Keyboard -->374 <div class="caret"></div>375 <div class="keyboard">376 <div class="keys-row row1">377 <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>378 <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>379 </div>380 <div class="keys-row row2">381 <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>382 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>383 </div>384 <div class="keys-row row3">385 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>386 <div class="key">b</div><div class="key">n</div><div class="key">m</div>387 <div class="key">388 <svg class="icon" viewBox="0 0 24 24">389 <path d="M4 8l8 8 8-8" stroke="#EDEDED" stroke-width="2" fill="none"></path>390 </svg>391 </div>392 </div>393 <div class="keys-row row4">394 <div class="key">?123</div>395 <div class="key">,</div>396 <div class="key">😊</div>397 <div class="key space"> </div>398 <div class="key">.</div>399 <div class="key">400 <svg class="icon" viewBox="0 0 24 24">401 <circle cx="11" cy="11" r="7" stroke="#EDEDED" stroke-width="2" fill="none"></circle>402 <path d="M20 20l-4-4" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"></path>403 </svg>404 </div>405 </div>406 </div>407 408</div>409</body>410</html>