GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 font-family: Arial, Helvetica, sans-serif;15 color: #111;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #000;26 color: #fff;27 display: flex;28 align-items: center;29 padding: 0 32px;30 box-sizing: border-box;31 font-size: 36px;32 letter-spacing: 0.5px;33 }34 .status-spacer { flex: 1; }35 .status-icons {36 display: flex;37 gap: 20px;38 align-items: center;39 }40 .status-dot {41 width: 28px; height: 28px; border-radius: 50%; background: #fff; opacity: 0.9;42 }43 .status-battery {44 width: 36px; height: 22px; border: 3px solid #fff; border-radius: 4px; position: relative;45 }46 .status-battery::after {47 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 2px;48 }49 50 /* App header */51 .app-header {52 position: absolute;53 top: 120px;54 left: 0;55 width: 100%;56 background: #fff;57 box-sizing: border-box;58 padding: 28px 32px 20px 32px;59 }60 .header-row {61 display: flex;62 align-items: center;63 gap: 24px;64 }65 .title {66 font-size: 52px;67 font-weight: 700;68 color: #222;69 }70 .icon-btn {71 width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;72 }73 74 /* Search field */75 .search-wrap {76 margin-top: 24px;77 padding: 0 32px;78 box-sizing: border-box;79 }80 .search-field {81 width: 1016px;82 height: 112px;83 background: #F1F3F5;84 border: 1px solid #E5E7EB;85 border-radius: 56px;86 display: flex;87 align-items: center;88 padding: 0 28px;89 box-sizing: border-box;90 gap: 22px;91 }92 .search-placeholder {93 flex: 1;94 font-size: 34px;95 color: #6B7280;96 }97 98 /* Choose on map row */99 .choose-row {100 margin-top: 30px;101 padding: 0 32px;102 display: flex;103 align-items: center;104 gap: 24px;105 box-sizing: border-box;106 }107 .choose-text {108 font-size: 36px;109 color: #2F6EF7;110 font-weight: 600;111 }112 .divider {113 margin: 22px 32px 0 32px;114 height: 2px;115 background: #E5E7EB;116 }117 118 /* Content area (blank white) */119 .content-area {120 position: absolute;121 top: 120px;122 left: 0;123 width: 100%;124 height: 1200px;125 /* stays white */126 }127 128 /* Keyboard mock */129 .keyboard {130 position: absolute;131 bottom: 54px;132 left: 0;133 width: 100%;134 height: 980px;135 background: #1E1E1E;136 box-sizing: border-box;137 padding: 22px 26px 28px 26px;138 display: flex;139 flex-direction: column;140 gap: 18px;141 }142 143 .kbd-top-actions {144 display: flex;145 align-items: center;146 justify-content: space-between;147 padding: 0 12px;148 }149 .action-btn {150 width: 100px; height: 100px; border-radius: 50%;151 background: #2A2A2A; border: 1px solid #3A3A3A;152 display: flex; align-items: center; justify-content: center; color: #EEE; font-size: 34px; font-weight: 700;153 }154 155 .keys {156 display: flex; flex-direction: column; gap: 18px; padding-top: 8px;157 }158 .row {159 display: flex; justify-content: center; gap: 16px;160 }161 .key {162 height: 120px; min-width: 90px; padding: 0 16px;163 background: #2A2A2A; border: 1px solid #3A3A3A; border-radius: 24px;164 color: #EAEAEA; font-size: 44px; display: flex; align-items: center; justify-content: center;165 }166 .key.wide { min-width: 140px; }167 .key.space { flex: 1; min-width: 360px; }168 .key.light {169 background: #CCE0F9; color: #0A2540; border-color: #BBD3F3;170 }171 172 .kbd-bottom-row {173 display: flex; gap: 16px; padding: 0 20px;174 }175 176 /* Home pill */177 .home-pill {178 position: absolute;179 bottom: 12px; left: 50%; transform: translateX(-50%);180 width: 220px; height: 12px; background: #DADADA; border-radius: 8px;181 }182 183 /* SVG helpers */184 svg { display: block; }185</style>186</head>187<body>188<div id="render-target">189 190 <!-- Status bar -->191 <div class="status-bar">192 <div>10:32</div>193 <div class="status-spacer"></div>194 <div class="status-icons">195 <div class="status-dot"></div>196 <div class="status-dot" style="opacity:0.7;"></div>197 <div class="status-dot" style="opacity:0.7;"></div>198 <div class="status-battery"></div>199 </div>200 </div>201 202 <!-- App header -->203 <div class="app-header">204 <div class="header-row">205 <div class="icon-btn">206 <svg width="44" height="44" viewBox="0 0 24 24">207 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2.5" stroke-linecap="round"></path>208 </svg>209 </div>210 <div class="title">Select destination</div>211 </div>212 213 <div class="search-wrap">214 <div class="search-field">215 <!-- Search icon -->216 <svg width="44" height="44" viewBox="0 0 24 24">217 <circle cx="10" cy="10" r="7" stroke="#7B7F86" stroke-width="2" fill="none"></circle>218 <path d="M15.5 15.5 L22 22" stroke="#7B7F86" stroke-width="2" stroke-linecap="round"></path>219 </svg>220 <div class="search-placeholder">Location, landmark, or property</div>221 <!-- Mic icon -->222 <svg width="40" height="40" viewBox="0 0 24 24">223 <rect x="8" y="4" width="8" height="12" rx="4" fill="#6B7280"></rect>224 <path d="M6 11 C6 15 9 17 12 17 C15 17 18 15 18 11" stroke="#6B7280" stroke-width="2" fill="none"></path>225 <path d="M12 17 L12 21" stroke="#6B7280" stroke-width="2" stroke-linecap="round"></path>226 </svg>227 </div>228 </div>229 230 <div class="choose-row">231 <!-- Map pin icon -->232 <svg width="54" height="54" viewBox="0 0 24 24">233 <path d="M12 2 C8 2 5 5 5 9 C5 13 12 22 12 22 C12 22 19 13 19 9 C19 5 16 2 12 2 Z" stroke="#6B7280" stroke-width="1.8" fill="none"></path>234 <circle cx="12" cy="9" r="2.8" fill="#6B7280"></circle>235 </svg>236 <div class="choose-text">Choose on map</div>237 </div>238 <div class="divider"></div>239 </div>240 241 <!-- Blank content area (represents the rest of the white screen above keyboard) -->242 <div class="content-area"></div>243 244 <!-- Keyboard -->245 <div class="keyboard">246 <div class="kbd-top-actions">247 <div class="action-btn">248 <svg width="44" height="44" viewBox="0 0 24 24">249 <rect x="3" y="3" width="7" height="7" fill="#EAEAEA"></rect>250 <rect x="14" y="3" width="7" height="7" fill="#EAEAEA"></rect>251 <rect x="3" y="14" width="7" height="7" fill="#EAEAEA"></rect>252 <rect x="14" y="14" width="7" height="7" fill="#EAEAEA"></rect>253 </svg>254 </div>255 <div class="action-btn">256 <svg width="44" height="44" viewBox="0 0 24 24">257 <circle cx="12" cy="12" r="9" fill="none" stroke="#EEE" stroke-width="2"></circle>258 <circle cx="9" cy="10" r="1.8" fill="#EEE"></circle>259 <circle cx="15" cy="10" r="1.8" fill="#EEE"></circle>260 <path d="M8 15 C10 17 14 17 16 15" stroke="#EEE" stroke-width="2" fill="none" stroke-linecap="round"></path>261 </svg>262 </div>263 <div class="action-btn">GIF</div>264 <div class="action-btn">265 <svg width="44" height="44" viewBox="0 0 24 24">266 <circle cx="12" cy="12" r="8" stroke="#EEE" stroke-width="2" fill="none"></circle>267 <circle cx="12" cy="12" r="2.5" fill="#EEE"></circle>268 </svg>269 </div>270 <div class="action-btn">271 <svg width="44" height="44" viewBox="0 0 24 24">272 <text x="6" y="16" font-size="12" fill="#EEE" font-weight="700">G</text>273 <text x="14" y="16" font-size="12" fill="#EEE">文</text>274 </svg>275 </div>276 <div class="action-btn">277 <svg width="44" height="44" viewBox="0 0 24 24">278 <path d="M12 3 C6 3 4 8 8 10 C9 11 9 12 8 13 C7 14 8.5 16 11 16 C14 16 18 14 18 10 C18 6 15 3 12 3 Z" fill="#EEE"></path>279 <circle cx="9" cy="9" r="1.2" fill="#1E1E1E"></circle>280 <circle cx="12" cy="8" r="1.2" fill="#1E1E1E"></circle>281 <circle cx="15" cy="10" r="1.2" fill="#1E1E1E"></circle>282 </svg>283 </div>284 <div class="action-btn">285 <svg width="40" height="40" viewBox="0 0 24 24">286 <rect x="8" y="4" width="8" height="12" rx="4" fill="#EEE"></rect>287 <path d="M6 11 C6 15 9 17 12 17 C15 17 18 15 18 11" stroke="#EEE" stroke-width="2" fill="none"></path>288 <path d="M12 17 L12 21" stroke="#EEE" stroke-width="2" stroke-linecap="round"></path>289 </svg>290 </div>291 </div>292 293 <div class="keys">294 <div class="row">295 <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>296 <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>297 </div>298 <div class="row">299 <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>300 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>301 </div>302 <div class="row">303 <div class="key wide">304 <svg width="40" height="40" viewBox="0 0 24 24">305 <path d="M12 5 L6 11 H10 V19 H14 V11 H18 Z" fill="#EAEAEA"></path>306 </svg>307 </div>308 <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>309 <div class="key wide">310 <svg width="44" height="44" viewBox="0 0 24 24">311 <path d="M20 7 H9 L4 12 L9 17 H20 V7 Z" fill="#EAEAEA"></path>312 <path d="M12 10 L15 12 L12 14" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>313 </svg>314 </div>315 </div>316 <div class="kbd-bottom-row">317 <div class="key wide">?123</div>318 <div class="key wide">,</div>319 <div class="key wide">320 <svg width="34" height="34" viewBox="0 0 24 24">321 <circle cx="12" cy="12" r="9" stroke="#EAEAEA" stroke-width="2" fill="none"></circle>322 <path d="M12 7 L12 13" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round"></path>323 </svg>324 </div>325 <div class="key space"></div>326 <div class="key wide">.</div>327 <div class="key wide light">328 <svg width="44" height="44" viewBox="0 0 24 24">329 <circle cx="10" cy="10" r="7" stroke="#0A2540" stroke-width="2" fill="none"></circle>330 <path d="M15.5 15.5 L22 22" stroke="#0A2540" stroke-width="2" stroke-linecap="round"></path>331 </svg>332 </div>333 </div>334 </div>335 </div>336 337 <div class="home-pill"></div>338</div>339</body>340</html>