GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Select destination UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #FFFFFF; font-family: Roboto, Arial, sans-serif; color: #212121;11 }12 /* Status bar */13 .status-bar {14 position: absolute; top: 0; left: 0; width: 100%; height: 120px;15 background: #000000; color: #FFFFFF;16 display: flex; align-items: center; justify-content: space-between;17 padding: 0 40px; box-sizing: border-box; font-size: 44px; letter-spacing: 0.5px;18 }19 .sb-icons { display: flex; align-items: center; gap: 26px; }20 /* Header */21 .header {22 position: absolute; top: 120px; left: 0; width: 100%; height: 150px;23 display: flex; align-items: center; padding: 0 36px; box-sizing: border-box;24 border-bottom: 1px solid #EAEAEA; background: #FFFFFF;25 }26 .header .title { font-size: 56px; font-weight: 600; margin-left: 22px; }27 .close-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }28 /* Search field */29 .search-wrap {30 position: absolute; top: 290px; left: 36px; right: 36px; height: 120px;31 background: #F5F6F7; border: 1px solid #E0E0E0; border-radius: 60px;32 display: flex; align-items: center; gap: 28px; padding: 0 32px; box-sizing: border-box;33 }34 .search-input { flex: 1; font-size: 48px; color: #424242; }35 .clear-btn {36 width: 64px; height: 64px; border-radius: 32px; background: #E8EBEE;37 display: flex; align-items: center; justify-content: center;38 border: 1px solid #D0D4D8;39 }40 /* List */41 .list {42 position: absolute; top: 430px; left: 0; width: 100%; bottom: 980px;43 overflow: hidden; background: #FFFFFF;44 }45 .item {46 display: flex; align-items: center; padding: 28px 36px; box-sizing: border-box;47 border-bottom: 1px solid #EEEEEE;48 }49 .item-icon {50 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;51 margin-right: 24px;52 }53 .item-text { flex: 1; }54 .item .name { font-size: 48px; color: #4285F4; }55 .item .desc { font-size: 34px; color: #9E9E9E; margin-top: 6px; }56 .props {57 width: 250px; text-align: right; color: #9E9E9E; font-size: 36px;58 line-height: 1.25;59 }60 .props .count { font-size: 44px; color: #9E9E9E; }61 .props .label { font-size: 32px; color: #A6A6A6; }62 /* Keyboard */63 .keyboard {64 position: absolute; left: 0; right: 0; bottom: 64px; height: 960px;65 background: #1E1E21; border-top-left-radius: 28px; border-top-right-radius: 28px;66 box-shadow: 0 -8px 16px rgba(0,0,0,0.2);67 }68 .kb-suggestions {69 height: 130px; background: #2A2A2D; border-top-left-radius: 28px; border-top-right-radius: 28px;70 display: flex; align-items: center; padding: 0 28px; box-sizing: border-box; gap: 18px; color: #FFFFFF;71 }72 .pill {73 padding: 16px 26px; background: #3A3A3D; border-radius: 40px; font-size: 36px; color: #FFFFFF;74 }75 .kb-rows { padding: 24px 22px; box-sizing: border-box; }76 .row { display: flex; justify-content: space-between; margin-bottom: 18px; }77 .key {78 width: 92px; height: 120px; background: #2C2C2F; border-radius: 20px;79 color: #FFFFFF; font-size: 42px; display: flex; align-items: center; justify-content: center;80 border: 1px solid #242427;81 }82 .key.wide { width: 180px; }83 .space { flex: 1; height: 120px; background: #2C2C2F; border-radius: 20px; margin: 0 16px; border: 1px solid #242427; }84 .key.icon { width: 120px; }85 .gesture {86 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);87 width: 240px; height: 12px; background: #EAEAEA; border-radius: 8px;88 }89 /* Utility */90 svg { display: block; }91</style>92</head>93<body>94<div id="render-target">95 96 <!-- Status bar -->97 <div class="status-bar">98 <div>10:32</div>99 <div class="sb-icons">100 <!-- simple signal icon -->101 <svg width="44" height="44" viewBox="0 0 24 24" fill="#FFFFFF">102 <rect x="2" y="14" width="3" height="8" rx="1"></rect>103 <rect x="7" y="11" width="3" height="11" rx="1" opacity="0.8"></rect>104 <rect x="12" y="8" width="3" height="14" rx="1" opacity="0.6"></rect>105 <rect x="17" y="5" width="3" height="17" rx="1" opacity="0.4"></rect>106 </svg>107 <!-- wifi icon -->108 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">109 <path d="M2 8c5-4 15-4 20 0"></path>110 <path d="M5 12c3-3 11-3 14 0"></path>111 <path d="M8 16c2-2 6-2 8 0"></path>112 <circle cx="12" cy="19" r="1.5" fill="#FFFFFF" stroke="none"></circle>113 </svg>114 <!-- battery icon -->115 <svg width="44" height="44" viewBox="0 0 28 24" fill="none" stroke="#FFFFFF" stroke-width="2">116 <rect x="2" y="5" width="22" height="14" rx="2"></rect>117 <rect x="4" y="7" width="14" height="10" fill="#FFFFFF"></rect>118 <rect x="24" y="9" width="2" height="6" fill="#FFFFFF" stroke="none"></rect>119 </svg>120 </div>121 </div>122 123 <!-- Header -->124 <div class="header">125 <div class="close-btn">126 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#3C3C3C" stroke-width="2.5" fill="none" stroke-linecap="round">127 <path d="M5 5 L19 19"></path>128 <path d="M19 5 L5 19"></path>129 </svg>130 </div>131 <div class="title">Select destination</div>132 </div>133 134 <!-- Search field -->135 <div class="search-wrap">136 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#8E8E8E" stroke-width="2.5" stroke-linecap="round">137 <circle cx="11" cy="11" r="7"></circle>138 <path d="M21 21 L16.4 16.4"></path>139 </svg>140 <div class="search-input">London</div>141 <div class="clear-btn">142 <svg width="28" height="28" viewBox="0 0 24 24" stroke="#6F6F6F" stroke-width="2.5" fill="none" stroke-linecap="round">143 <path d="M5 5 L19 19"></path>144 <path d="M19 5 L5 19"></path>145 </svg>146 </div>147 </div>148 149 <!-- Results list -->150 <div class="list">151 <div class="item">152 <div class="item-icon">153 <!-- building icon -->154 <svg width="72" height="72" viewBox="0 0 24 24" fill="#CFCFCF">155 <rect x="3" y="3" width="10" height="18" rx="1"></rect>156 <rect x="15" y="8" width="6" height="13" rx="1"></rect>157 <rect x="5" y="6" width="2" height="2"></rect>158 <rect x="8" y="6" width="2" height="2"></rect>159 <rect x="5" y="9" width="2" height="2"></rect>160 <rect x="8" y="9" width="2" height="2"></rect>161 </svg>162 </div>163 <div class="item-text">164 <div class="name">London</div>165 <div class="desc">City in United Kingdom</div>166 </div>167 <div class="props">168 <div class="count">24105</div>169 <div class="label">properties</div>170 </div>171 </div>172 173 <div class="item">174 <div class="item-icon">175 <svg width="72" height="72" viewBox="0 0 24 24" fill="#CFCFCF">176 <rect x="3" y="3" width="10" height="18" rx="1"></rect>177 <rect x="15" y="8" width="6" height="13" rx="1"></rect>178 <rect x="5" y="6" width="2" height="2"></rect>179 <rect x="8" y="6" width="2" height="2"></rect>180 <rect x="5" y="9" width="2" height="2"></rect>181 <rect x="8" y="9" width="2" height="2"></rect>182 </svg>183 </div>184 <div class="item-text">185 <div class="name">East London</div>186 <div class="desc">City in South Africa</div>187 </div>188 <div class="props">189 <div class="count">473</div>190 <div class="label">properties</div>191 </div>192 </div>193 194 <div class="item">195 <div class="item-icon">196 <svg width="72" height="72" viewBox="0 0 24 24" fill="#CFCFCF">197 <rect x="3" y="3" width="10" height="18" rx="1"></rect>198 <rect x="15" y="8" width="6" height="13" rx="1"></rect>199 <rect x="5" y="6" width="2" height="2"></rect>200 <rect x="8" y="6" width="2" height="2"></rect>201 <rect x="5" y="9" width="2" height="2"></rect>202 <rect x="8" y="9" width="2" height="2"></rect>203 </svg>204 </div>205 <div class="item-text">206 <div class="name">Derry / Londonderry</div>207 <div class="desc">City in United Kingdom</div>208 </div>209 <div class="props">210 <div class="count">197</div>211 <div class="label">properties</div>212 </div>213 </div>214 215 <div class="item">216 <div class="item-icon">217 <svg width="72" height="72" viewBox="0 0 24 24" fill="#CFCFCF">218 <rect x="3" y="3" width="10" height="18" rx="1"></rect>219 <rect x="15" y="8" width="6" height="13" rx="1"></rect>220 <rect x="5" y="6" width="2" height="2"></rect>221 <rect x="8" y="6" width="2" height="2"></rect>222 <rect x="5" y="9" width="2" height="2"></rect>223 <rect x="8" y="9" width="2" height="2"></rect>224 </svg>225 </div>226 <div class="item-text">227 <div class="name">London (ON)</div>228 <div class="desc">City in Canada</div>229 </div>230 <div class="props">231 <div class="count">82</div>232 <div class="label">properties</div>233 </div>234 </div>235 236 <div class="item">237 <div class="item-icon">238 <!-- pin icon -->239 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2">240 <path d="M12 22c-5-6-8-10-8-14a8 8 0 1 1 16 0c0 4-3 8-8 14z" fill="#D6D6D6" stroke="none"></path>241 <circle cx="12" cy="8.8" r="3.3" fill="#BEBEBE" stroke="none"></circle>242 </svg>243 </div>244 <div class="item-text">245 <div class="name">Victoria, London</div>246 <div class="desc">Region in United Kingdom</div>247 </div>248 <div class="props">249 <div class="count">24105</div>250 <div class="label">properties</div>251 </div>252 </div>253 254 <div class="item">255 <div class="item-icon">256 <svg width="72" height="72" viewBox="0 0 24 24" fill="#CFCFCF">257 <rect x="3" y="3" width="10" height="18" rx="1"></rect>258 <rect x="15" y="8" width="6" height="13" rx="1"></rect>259 <rect x="5" y="6" width="2" height="2"></rect>260 <rect x="8" y="6" width="2" height="2"></rect>261 <rect x="5" y="9" width="2" height="2"></rect>262 <rect x="8" y="9" width="2" height="2"></rect>263 </svg>264 </div>265 <div class="item-text">266 <div class="name">Londonderry (VT)</div>267 <div class="desc">City in United States</div>268 </div>269 <div class="props">270 <div class="count">30</div>271 <div class="label">properties</div>272 </div>273 </div>274 </div>275 276 <!-- Keyboard -->277 <div class="keyboard">278 <div class="kb-suggestions">279 <!-- grid icon -->280 <svg width="48" height="48" viewBox="0 0 24 24" fill="#FFFFFF" opacity="0.9">281 <rect x="3" y="3" width="6" height="6" rx="1"></rect>282 <rect x="3" y="13" width="6" height="6" rx="1"></rect>283 <rect x="13" y="3" width="6" height="6" rx="1"></rect>284 <rect x="13" y="13" width="6" height="6" rx="1"></rect>285 </svg>286 <div class="pill">London</div>287 <div class="pill">London's</div>288 <div class="pill">Londo</div>289 <div style="margin-left:auto; display:flex; align-items:center; gap:18px;">290 <!-- mic icon -->291 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">292 <rect x="8" y="4" width="8" height="12" rx="4" fill="#FFFFFF" stroke="none"></rect>293 <path d="M5 11c0 4 3.5 6 7 6s7-2 7-6" stroke="#FFFFFF" fill="none"></path>294 <path d="M12 17v4" stroke="#FFFFFF"></path>295 </svg>296 </div>297 </div>298 299 <div class="kb-rows">300 <div class="row">301 <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>302 <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>303 </div>304 <div class="row">305 <div class="key wide">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>306 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key wide">l</div>307 </div>308 <div class="row">309 <div class="key icon">310 <!-- shift icon -->311 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.5">312 <path d="M12 4l7 7h-4v7H9v-7H5z"></path>313 </svg>314 </div>315 <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>316 <div class="key icon">317 <!-- backspace icon -->318 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round">319 <path d="M2 12l6-6h11a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H8z"></path>320 <path d="M14 9l3 3-3 3M17 9l-3 3 3 3"></path>321 </svg>322 </div>323 </div>324 <div class="row">325 <div class="key icon">326 <span style="font-size:36px; color:#FFFFFF;">?123</span>327 </div>328 <div class="key">,</div>329 <div class="key icon">330 <!-- emoji -->331 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">332 <circle cx="12" cy="12" r="9"></circle>333 <circle cx="9" cy="10" r="1.2" fill="#FFFFFF" stroke="none"></circle>334 <circle cx="15" cy="10" r="1.2" fill="#FFFFFF" stroke="none"></circle>335 <path d="M8 15c2 2 6 2 8 0" stroke-linecap="round"></path>336 </svg>337 </div>338 <div class="space"></div>339 <div class="key">.</div>340 <div class="key icon">341 <!-- search icon -->342 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round">343 <circle cx="11" cy="11" r="6"></circle>344 <path d="M20 20l-4.5-4.5"></path>345 </svg>346 </div>347 </div>348 </div>349 </div>350 351 <div class="gesture"></div>352</div>353</body>354</html>